Merge 3bb022aee0 into ded6ef207b
This commit is contained in:
かっこかり
GitHub
commit
75ce2f242f
13 changed files with 479 additions and 602 deletions
|
|
@ -18,6 +18,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@discordapp/twemoji": "15.1.0",
|
||||
"@formkit/drag-and-drop": "0.2.0",
|
||||
"@github/webauthn-json": "2.1.1",
|
||||
"@mcaptcha/vanilla-glue": "0.1.0-alpha-3",
|
||||
"@misskey-dev/browser-image-resizer": "2024.1.0",
|
||||
|
|
@ -72,8 +73,7 @@
|
|||
"uuid": "10.0.0",
|
||||
"v-code-diff": "1.13.1",
|
||||
"vite": "5.4.8",
|
||||
"vue": "3.5.11",
|
||||
"vuedraggable": "next"
|
||||
"vue": "3.5.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@misskey-dev/summaly": "5.1.0",
|
||||
|
|
|
|||
|
|
@ -4,54 +4,74 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
-->
|
||||
|
||||
<template>
|
||||
<div v-show="props.modelValue.length != 0" :class="$style.root">
|
||||
<Sortable :modelValue="props.modelValue" :class="$style.files" itemKey="id" :animation="150" :delay="100" :delayOnTouchOnly="true" @update:modelValue="v => emit('update:modelValue', v)">
|
||||
<template #item="{element}">
|
||||
<div
|
||||
:class="$style.file"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
@click="showFileMenu(element, $event)"
|
||||
@keydown.space.enter="showFileMenu(element, $event)"
|
||||
@contextmenu.prevent="showFileMenu(element, $event)"
|
||||
>
|
||||
<MkDriveFileThumbnail :data-id="element.id" :class="$style.thumbnail" :file="element" fit="cover"/>
|
||||
<div v-if="element.isSensitive" :class="$style.sensitive">
|
||||
<i class="ti ti-eye-exclamation" style="margin: auto;"></i>
|
||||
</div>
|
||||
<div
|
||||
v-show="props.modelValue.length != 0"
|
||||
:class="$style.root"
|
||||
@dragover.stop
|
||||
@dragenter.stop
|
||||
@dragleave.stop
|
||||
@drop.stop
|
||||
>
|
||||
<div ref="dndParentEl" :class="$style.files">
|
||||
<div
|
||||
v-for="file in files"
|
||||
:key="file.id"
|
||||
:class="$style.file"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
@click="showFileMenu(file, $event)"
|
||||
@keydown.space.enter="showFileMenu(file, $event)"
|
||||
@contextmenu.prevent="showFileMenu(file, $event)"
|
||||
>
|
||||
<MkDriveFileThumbnail :data-id="file.id" :class="$style.thumbnail" :file="file" fit="cover"/>
|
||||
<div v-if="file.isSensitive" :class="$style.sensitive">
|
||||
<i class="ti ti-eye-exclamation" style="margin: auto;"></i>
|
||||
</div>
|
||||
</template>
|
||||
</Sortable>
|
||||
</div>
|
||||
</div>
|
||||
<p :class="$style.remain">{{ 16 - props.modelValue.length }}/16</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineAsyncComponent, inject } from 'vue';
|
||||
import { defineAsyncComponent, computed, inject, shallowRef } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import { animations } from '@formkit/drag-and-drop';
|
||||
import { dragAndDrop } from '@formkit/drag-and-drop/vue';
|
||||
import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
|
||||
import * as os from '@/os.js';
|
||||
import { misskeyApi } from '@/scripts/misskey-api.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import type { MenuItem } from '@/types/menu.js';
|
||||
|
||||
const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: any[];
|
||||
modelValue: Misskey.entities.DriveFile[];
|
||||
detachMediaFn?: (id: string) => void;
|
||||
}>();
|
||||
|
||||
const mock = inject<boolean>('mock', false);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'update:modelValue', value: any[]): void;
|
||||
(ev: 'update:modelValue', value: Misskey.entities.DriveFile[]): void;
|
||||
(ev: 'detach', id: string): void;
|
||||
(ev: 'changeSensitive', file: Misskey.entities.DriveFile, isSensitive: boolean): void;
|
||||
(ev: 'changeName', file: Misskey.entities.DriveFile, newName: string): void;
|
||||
(ev: 'replaceFile', file: Misskey.entities.DriveFile, newFile: Misskey.entities.DriveFile): void;
|
||||
}>();
|
||||
|
||||
const dndParentEl = shallowRef<HTMLElement>();
|
||||
|
||||
const files = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (v) => emit('update:modelValue', v),
|
||||
});
|
||||
|
||||
dragAndDrop({
|
||||
parent: dndParentEl,
|
||||
values: files,
|
||||
plugins: [animations()],
|
||||
});
|
||||
|
||||
let menuShowing = false;
|
||||
|
||||
function detachMedia(id: string) {
|
||||
|
|
|
|||
|
|
@ -14,44 +14,25 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<MkButton inline primary data-cy-widget-add @click="addWidget"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
|
||||
<MkButton inline @click="$emit('exit')">{{ i18n.ts.close }}</MkButton>
|
||||
</header>
|
||||
<Sortable
|
||||
:modelValue="props.widgets"
|
||||
itemKey="id"
|
||||
handle=".handle"
|
||||
:animation="150"
|
||||
:group="{ name: 'SortableMkWidgets' }"
|
||||
:class="$style.editEditing"
|
||||
@update:modelValue="v => emit('updateWidgets', v)"
|
||||
>
|
||||
<template #item="{element}">
|
||||
<div :class="[$style.widget, $style.customizeContainer]" data-cy-customize-container>
|
||||
<button :class="$style.customizeContainerConfig" class="_button" @click.prevent.stop="configWidget(element.id)"><i class="ti ti-settings"></i></button>
|
||||
<button :class="$style.customizeContainerRemove" data-cy-customize-container-remove class="_button" @click.prevent.stop="removeWidget(element)"><i class="ti ti-x"></i></button>
|
||||
<div class="handle">
|
||||
<component :is="`widget-${element.name}`" :ref="el => widgetRefs[element.id] = el" class="widget" :class="$style.customizeContainerHandleWidget" :widget="element" @updateProps="updateWidget(element.id, $event)"/>
|
||||
</div>
|
||||
<div ref="dndParentEl" :class="$style.editEditing">
|
||||
<div v-for="widgetId in widgetIds" :key="widgetId" :class="[$style.widget, $style.customizeContainer]" data-cy-customize-container>
|
||||
<button :class="$style.customizeContainerConfig" class="_button" @click.prevent.stop="configWidget(widgetId)"><i class="ti ti-settings"></i></button>
|
||||
<button :class="$style.customizeContainerRemove" data-cy-customize-container-remove class="_button" @click.prevent.stop="removeWidget(getWidgetById(widgetId)!)"><i class="ti ti-x"></i></button>
|
||||
<div class="handle">
|
||||
<component :is="`widget-${getWidgetById(widgetId)!.name}`" :ref="el => widgetRefs[widgetId] = el" class="widget" :class="$style.customizeContainerHandleWidget" :widget="getWidgetById(widgetId)!" @updateProps="updateWidget(widgetId, $event)"/>
|
||||
</div>
|
||||
</template>
|
||||
</Sortable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<component :is="`widget-${widget.name}`" v-for="widget in widgets" v-else :key="widget.id" :ref="el => widgetRefs[widget.id] = el" :class="$style.widget" :widget="widget" @updateProps="updateWidget(widget.id, $event)" @contextmenu.stop="onContextmenu(widget, $event)"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export type Widget = {
|
||||
name: string;
|
||||
id: string;
|
||||
data: Record<string, any>;
|
||||
};
|
||||
export type DefaultStoredWidget = {
|
||||
place: string | null;
|
||||
} & Widget;
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineAsyncComponent, ref } from 'vue';
|
||||
import { ref, shallowRef, watch } from 'vue';
|
||||
import { v4 as uuid } from 'uuid';
|
||||
import { animations } from '@formkit/drag-and-drop';
|
||||
import { dragAndDrop } from '@formkit/drag-and-drop/vue';
|
||||
import MkSelect from '@/components/MkSelect.vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import { widgets as widgetDefs } from '@/widgets/index.js';
|
||||
|
|
@ -59,7 +40,7 @@ import * as os from '@/os.js';
|
|||
import { i18n } from '@/i18n.js';
|
||||
import { isLink } from '@@/js/is-link.js';
|
||||
|
||||
const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
|
||||
import type { Widget, WidgetProps } from '@/widgets/widget.js';
|
||||
|
||||
const props = defineProps<{
|
||||
widgets: Widget[];
|
||||
|
|
@ -74,10 +55,40 @@ const emit = defineEmits<{
|
|||
(ev: 'exit'): void;
|
||||
}>();
|
||||
|
||||
function updateWidgetIds(to: Widget[]) {
|
||||
return to.map(w => w.id);
|
||||
}
|
||||
|
||||
function getWidgetById(id: string) {
|
||||
return props.widgets.find(w => w.id === id) ?? null;
|
||||
}
|
||||
|
||||
const widgetIds = ref(updateWidgetIds(props.widgets));
|
||||
|
||||
watch(() => props.widgets, (to) => {
|
||||
const updated = updateWidgetIds(to);
|
||||
widgetIds.value = updated;
|
||||
});
|
||||
|
||||
const dndParentEl = shallowRef<HTMLElement>();
|
||||
|
||||
dragAndDrop({
|
||||
parent: dndParentEl,
|
||||
values: widgetIds,
|
||||
plugins: [animations()],
|
||||
dragHandle: '.handle',
|
||||
onDragend: () => {
|
||||
// Widget ids to widget object array
|
||||
const widgets = widgetIds.value.map(id => props.widgets.find(w => w.id === id) ?? null).filter(w => w !== null);
|
||||
emit('updateWidgets', widgets);
|
||||
},
|
||||
});
|
||||
|
||||
const widgetRefs = {};
|
||||
const configWidget = (id: string) => {
|
||||
widgetRefs[id].configure();
|
||||
};
|
||||
|
||||
const widgetAdderSelected = ref<string | null>(null);
|
||||
const addWidget = () => {
|
||||
if (widgetAdderSelected.value == null) return;
|
||||
|
|
@ -90,10 +101,12 @@ const addWidget = () => {
|
|||
|
||||
widgetAdderSelected.value = null;
|
||||
};
|
||||
const removeWidget = (widget) => {
|
||||
|
||||
const removeWidget = (widget: Widget) => {
|
||||
emit('removeWidget', widget);
|
||||
};
|
||||
const updateWidget = (id, data) => {
|
||||
|
||||
const updateWidget = (id: string, data: Partial<WidgetProps>) => {
|
||||
emit('updateWidget', { id, data });
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -36,37 +36,37 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</div>
|
||||
|
||||
<div v-if="type === 'and' || type === 'or'" class="_gaps">
|
||||
<Sortable v-model="v.values" tag="div" class="_gaps" itemKey="id" handle=".drag-handle" :group="{ name: 'roleFormula' }" :animation="150" :swapThreshold="0.5">
|
||||
<template #item="{element}">
|
||||
<div :class="$style.item">
|
||||
<!-- divが無いとエラーになる https://github.com/SortableJS/vue.draggable.next/issues/189 -->
|
||||
<RolesEditorFormula :modelValue="element" draggable @update:modelValue="updated => valuesItemUpdated(updated)" @remove="removeItem(element)"/>
|
||||
</div>
|
||||
</template>
|
||||
</Sortable>
|
||||
<div ref="dndParentEl" class="_gaps">
|
||||
<div v-for="valueId in valueIds" :key="valueId" :class="$style.item">
|
||||
<RolesEditorFormula :modelValue="valueKv[valueId]" draggable @update:modelValue="valuesItemUpdated" @remove="removeItem(valueId)"/>
|
||||
</div>
|
||||
</div>
|
||||
<MkButton rounded style="margin: 0 auto;" @click="addValue"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
|
||||
</div>
|
||||
|
||||
<div v-else-if="type === 'not'" :class="$style.item">
|
||||
<div v-else-if="assertValueNot(v)" :class="$style.item">
|
||||
<RolesEditorFormula v-model="v.value"/>
|
||||
</div>
|
||||
|
||||
<MkInput v-else-if="type === 'createdLessThan' || type === 'createdMoreThan'" v-model="v.sec" type="number">
|
||||
<MkInput v-else-if="['createdMoreThan', 'createdLessThan'].includes(type) && 'sec' in v" v-model="v.sec" type="number">
|
||||
<template #suffix>sec</template>
|
||||
</MkInput>
|
||||
|
||||
<MkInput v-else-if="['followersLessThanOrEq', 'followersMoreThanOrEq', 'followingLessThanOrEq', 'followingMoreThanOrEq', 'notesLessThanOrEq', 'notesMoreThanOrEq'].includes(type)" v-model="v.value" type="number">
|
||||
<MkInput v-else-if="['followersLessThanOrEq', 'followersMoreThanOrEq', 'followingLessThanOrEq', 'followingMoreThanOrEq', 'notesLessThanOrEq', 'notesMoreThanOrEq'].includes(type) && 'value' in v" v-model="v.value" type="number">
|
||||
</MkInput>
|
||||
|
||||
<MkSelect v-else-if="type === 'roleAssignedTo'" v-model="v.roleId">
|
||||
<MkSelect v-else-if="type === 'roleAssignedTo' && 'roleId' in v" v-model="v.roleId">
|
||||
<option v-for="role in roles.filter(r => r.target === 'manual')" :key="role.id" :value="role.id">{{ role.name }}</option>
|
||||
</MkSelect>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, defineAsyncComponent, ref, watch } from 'vue';
|
||||
import { computed, ref, shallowRef, watch } from 'vue';
|
||||
import { v4 as uuid } from 'uuid';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import { animations } from '@formkit/drag-and-drop';
|
||||
import { dragAndDrop } from '@formkit/drag-and-drop/vue';
|
||||
import MkInput from '@/components/MkInput.vue';
|
||||
import MkSelect from '@/components/MkSelect.vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
|
|
@ -74,20 +74,69 @@ import { i18n } from '@/i18n.js';
|
|||
import { deepClone } from '@/scripts/clone.js';
|
||||
import { rolesCache } from '@/cache.js';
|
||||
|
||||
const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'update:modelValue', value: any): void;
|
||||
(ev: 'update:modelValue', value: Misskey.entities.RoleCondFormulaValue): void;
|
||||
(ev: 'remove'): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: any;
|
||||
modelValue: Misskey.entities.RoleCondFormulaValue;
|
||||
draggable?: boolean;
|
||||
}>();
|
||||
|
||||
function assertLogicFormula(f: Misskey.entities.RoleCondFormulaValue): f is Misskey.entities.RoleCondFormulaLogics {
|
||||
return ['and', 'or'].includes(f.type);
|
||||
}
|
||||
|
||||
function assertValueNot(f: Misskey.entities.RoleCondFormulaValue): f is Misskey.entities.RoleCondFormulaValueNot {
|
||||
return f.type === 'not';
|
||||
}
|
||||
|
||||
const dndParentEl = shallowRef<HTMLElement>();
|
||||
const v = ref(deepClone(props.modelValue));
|
||||
|
||||
const valueKv = computed(() => {
|
||||
if (assertLogicFormula(v.value)) {
|
||||
return Object.fromEntries(v.value.values.map(v => [v.id, v] as const));
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
});
|
||||
|
||||
function updateValueIds(to: Misskey.entities.RoleCondFormulaValue) {
|
||||
if (assertLogicFormula(to)) {
|
||||
return to.values.map(v => v.id);
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
const valueIds = ref(updateValueIds(v.value));
|
||||
|
||||
watch(v, () => {
|
||||
valueIds.value = updateValueIds(v.value);
|
||||
}, { deep: true });
|
||||
|
||||
dragAndDrop({
|
||||
parent: dndParentEl,
|
||||
values: valueIds,
|
||||
// TODO: v0.2.0時点では親子階層のドラッグアンドドロップは不安定
|
||||
//group: 'roleFormula',
|
||||
dragHandle: '.drag-handle',
|
||||
plugins: [animations()],
|
||||
onDragend: () => {
|
||||
if (assertLogicFormula(v.value)) {
|
||||
v.value.values = valueIds.value.map(id => {
|
||||
if (assertLogicFormula(v.value)) {
|
||||
return v.value.values.find(v => v.id === id) ?? null;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}).filter(v => v !== null);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const roles = await rolesCache.fetch();
|
||||
|
||||
watch(() => props.modelValue, () => {
|
||||
|
|
@ -102,33 +151,37 @@ watch(v, () => {
|
|||
const type = computed({
|
||||
get: () => v.value.type,
|
||||
set: (t) => {
|
||||
if (t === 'and') v.value.values = [];
|
||||
if (t === 'or') v.value.values = [];
|
||||
if (t === 'not') v.value.value = { id: uuid(), type: 'isRemote' };
|
||||
if (t === 'roleAssignedTo') v.value.roleId = '';
|
||||
if (t === 'createdLessThan') v.value.sec = 86400;
|
||||
if (t === 'createdMoreThan') v.value.sec = 86400;
|
||||
if (t === 'followersLessThanOrEq') v.value.value = 10;
|
||||
if (t === 'followersMoreThanOrEq') v.value.value = 10;
|
||||
if (t === 'followingLessThanOrEq') v.value.value = 10;
|
||||
if (t === 'followingMoreThanOrEq') v.value.value = 10;
|
||||
if (t === 'notesLessThanOrEq') v.value.value = 10;
|
||||
if (t === 'notesMoreThanOrEq') v.value.value = 10;
|
||||
v.value.type = t;
|
||||
|
||||
if (v.value.type === 'and') v.value.values = [];
|
||||
if (v.value.type === 'or') v.value.values = [];
|
||||
if (v.value.type === 'not') v.value.value = { id: uuid(), type: 'isRemote' };
|
||||
if (v.value.type === 'roleAssignedTo') v.value.roleId = '';
|
||||
if (v.value.type === 'createdLessThan') v.value.sec = 86400;
|
||||
if (v.value.type === 'createdMoreThan') v.value.sec = 86400;
|
||||
if (v.value.type === 'followersLessThanOrEq') v.value.value = 10;
|
||||
if (v.value.type === 'followersMoreThanOrEq') v.value.value = 10;
|
||||
if (v.value.type === 'followingLessThanOrEq') v.value.value = 10;
|
||||
if (v.value.type === 'followingMoreThanOrEq') v.value.value = 10;
|
||||
if (v.value.type === 'notesLessThanOrEq') v.value.value = 10;
|
||||
if (v.value.type === 'notesMoreThanOrEq') v.value.value = 10;
|
||||
},
|
||||
});
|
||||
|
||||
function addValue() {
|
||||
if (!assertLogicFormula(v.value)) return;
|
||||
v.value.values.push({ id: uuid(), type: 'isRemote' });
|
||||
}
|
||||
|
||||
function valuesItemUpdated(item) {
|
||||
function valuesItemUpdated(item: Misskey.entities.RoleCondFormulaValue) {
|
||||
if (!assertLogicFormula(v.value)) return;
|
||||
const i = v.value.values.findIndex(_item => _item.id === item.id);
|
||||
v.value.values[i] = item;
|
||||
}
|
||||
|
||||
function removeItem(item) {
|
||||
v.value.values = v.value.values.filter(_item => _item.id !== item.id);
|
||||
function removeItem(itemId: string) {
|
||||
if (!assertLogicFormula(v.value)) return;
|
||||
v.value.values = v.value.values.filter(_item => _item.id !== itemId);
|
||||
}
|
||||
|
||||
function removeSelf() {
|
||||
|
|
|
|||
|
|
@ -10,28 +10,18 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
|
||||
<div class="_gaps_m">
|
||||
<div>{{ i18n.ts._serverRules.description }}</div>
|
||||
<Sortable
|
||||
v-model="serverRules"
|
||||
class="_gaps_m"
|
||||
:itemKey="(_, i) => i"
|
||||
:animation="150"
|
||||
:handle="'.' + $style.itemHandle"
|
||||
@start="e => e.item.classList.add('active')"
|
||||
@end="e => e.item.classList.remove('active')"
|
||||
>
|
||||
<template #item="{element,index}">
|
||||
<div :class="$style.item">
|
||||
<div :class="$style.itemHeader">
|
||||
<div :class="$style.itemNumber" v-text="String(index + 1)"/>
|
||||
<span :class="$style.itemHandle"><i class="ti ti-menu"/></span>
|
||||
<button class="_button" :class="$style.itemRemove" @click="remove(index)"><i class="ti ti-x"></i></button>
|
||||
</div>
|
||||
<MkInput v-model="serverRules[index]"/>
|
||||
<div ref="dndParentEl" class="_gaps_m">
|
||||
<div v-for="rule, index in serverRules" :key="rule.id" :class="$style.item">
|
||||
<div :class="$style.itemHeader">
|
||||
<div :class="$style.itemNumber" v-text="String(index + 1)"/>
|
||||
<span :class="$style.itemHandle" class="handle"><i class="ti ti-menu"/></span>
|
||||
<button class="_button" :class="$style.itemRemove" @click="remove(rule.id)"><i class="ti ti-x"></i></button>
|
||||
</div>
|
||||
</template>
|
||||
</Sortable>
|
||||
<MkInput v-model="rule.value"/>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="$style.commands">
|
||||
<MkButton rounded @click="serverRules.push('')"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
|
||||
<MkButton rounded @click="add"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
|
||||
<MkButton primary rounded @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -41,7 +31,10 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineAsyncComponent, ref, computed } from 'vue';
|
||||
import { ref, shallowRef, computed } from 'vue';
|
||||
import { v4 as uuid } from 'uuid';
|
||||
import { animations } from '@formkit/drag-and-drop';
|
||||
import { dragAndDrop } from '@formkit/drag-and-drop/vue';
|
||||
import XHeader from './_header_.vue';
|
||||
import * as os from '@/os.js';
|
||||
import { fetchInstance, instance } from '@/instance.js';
|
||||
|
|
@ -50,20 +43,31 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
|
|||
import MkButton from '@/components/MkButton.vue';
|
||||
import MkInput from '@/components/MkInput.vue';
|
||||
|
||||
const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
|
||||
const serverRules = ref<{ id: string; value: string; }[]>(instance.serverRules.map((rule: string) => ({ id: uuid(), value: rule })));
|
||||
|
||||
const serverRules = ref<string[]>(instance.serverRules);
|
||||
const dndParentEl = shallowRef<HTMLElement>();
|
||||
|
||||
const save = async () => {
|
||||
dragAndDrop({
|
||||
parent: dndParentEl,
|
||||
values: serverRules,
|
||||
plugins: [animations()],
|
||||
dragHandle: '.handle',
|
||||
});
|
||||
|
||||
async function save() {
|
||||
await os.apiWithDialog('admin/update-meta', {
|
||||
serverRules: serverRules.value,
|
||||
serverRules: serverRules.value.map(rule => rule.value),
|
||||
});
|
||||
fetchInstance(true);
|
||||
};
|
||||
}
|
||||
|
||||
const remove = (index: number): void => {
|
||||
serverRules.value.splice(index, 1);
|
||||
};
|
||||
function add() {
|
||||
serverRules.value.push({ id: uuid(), value: '' });
|
||||
}
|
||||
|
||||
function remove(id: string) {
|
||||
serverRules.value = serverRules.value.filter(rule => rule.id !== id);
|
||||
}
|
||||
|
||||
const headerTabs = computed(() => []);
|
||||
|
||||
|
|
|
|||
|
|
@ -42,20 +42,13 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div class="_gaps">
|
||||
<MkButton primary rounded @click="addPinnedNote()"><i class="ti ti-plus"></i></MkButton>
|
||||
|
||||
<Sortable
|
||||
v-model="pinnedNotes"
|
||||
itemKey="id"
|
||||
:handle="'.' + $style.pinnedNoteHandle"
|
||||
:animation="150"
|
||||
>
|
||||
<template #item="{element,index}">
|
||||
<div :class="$style.pinnedNote">
|
||||
<button class="_button" :class="$style.pinnedNoteHandle"><i class="ti ti-menu"></i></button>
|
||||
{{ element.id }}
|
||||
<button class="_button" :class="$style.pinnedNoteRemove" @click="removePinnedNote(index)"><i class="ti ti-x"></i></button>
|
||||
</div>
|
||||
</template>
|
||||
</Sortable>
|
||||
<div ref="dndParentEl">
|
||||
<div v-for="pinnedNote, index in pinnedNotes" :key="pinnedNote.id" :class="$style.pinnedNote">
|
||||
<button class="_button handle" :class="$style.pinnedNoteHandle"><i class="ti ti-menu"></i></button>
|
||||
{{ pinnedNote.id }}
|
||||
<button class="_button" :class="$style.pinnedNoteRemove" @click="removePinnedNote(index)"><i class="ti ti-x"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</MkFolder>
|
||||
|
||||
|
|
@ -69,8 +62,10 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, watch, defineAsyncComponent } from 'vue';
|
||||
import { computed, ref, shallowRef, watch, defineAsyncComponent } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import { animations } from '@formkit/drag-and-drop';
|
||||
import { dragAndDrop } from '@formkit/drag-and-drop/vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import MkInput from '@/components/MkInput.vue';
|
||||
import MkColorInput from '@/components/MkColorInput.vue';
|
||||
|
|
@ -84,8 +79,6 @@ import MkSwitch from '@/components/MkSwitch.vue';
|
|||
import MkTextarea from '@/components/MkTextarea.vue';
|
||||
import { useRouter } from '@/router/supplier.js';
|
||||
|
||||
const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const props = defineProps<{
|
||||
|
|
@ -101,6 +94,14 @@ const color = ref('#000');
|
|||
const isSensitive = ref(false);
|
||||
const allowRenoteToExternal = ref(true);
|
||||
const pinnedNotes = ref<{ id: Misskey.entities.Note['id'] }[]>([]);
|
||||
const dndParentEl = shallowRef<HTMLElement>();
|
||||
|
||||
dragAndDrop({
|
||||
parent: dndParentEl,
|
||||
values: pinnedNotes,
|
||||
dragHandle: '.handle',
|
||||
plugins: [animations()],
|
||||
});
|
||||
|
||||
watch(() => bannerId.value, async () => {
|
||||
if (bannerId.value == null) {
|
||||
|
|
|
|||
|
|
@ -4,19 +4,17 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
-->
|
||||
|
||||
<template>
|
||||
<Sortable :modelValue="modelValue" tag="div" itemKey="id" handle=".drag-handle" :group="{ name: 'blocks' }" :animation="150" :swapThreshold="0.5" @update:modelValue="v => $emit('update:modelValue', v)">
|
||||
<template #item="{element}">
|
||||
<div :class="$style.item">
|
||||
<!-- divが無いとエラーになる https://github.com/SortableJS/vue.draggable.next/issues/189 -->
|
||||
<component :is="getComponent(element.type)" :modelValue="element" @update:modelValue="updateItem" @remove="() => removeItem(element)"/>
|
||||
</div>
|
||||
</template>
|
||||
</Sortable>
|
||||
<div ref="dndParentEl">
|
||||
<div v-for="item in items" :key="item.id" :class="$style.item">
|
||||
<component :is="getComponent(item.type)" :modelValue="item" @update:modelValue="updateItem" @remove="() => removeItem(item)"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineAsyncComponent } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import { animations } from '@formkit/drag-and-drop';
|
||||
import { useDragAndDrop } from '@formkit/drag-and-drop/vue';
|
||||
import XSection from './els/page-editor.el.section.vue';
|
||||
import XText from './els/page-editor.el.text.vue';
|
||||
import XImage from './els/page-editor.el.image.vue';
|
||||
|
|
@ -32,17 +30,28 @@ function getComponent(type: string) {
|
|||
}
|
||||
}
|
||||
|
||||
const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: Misskey.entities.Page['content'];
|
||||
modelValue: Misskey.entities.PageBlock[];
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'update:modelValue', value: Misskey.entities.Page['content']): void;
|
||||
(ev: 'update:modelValue', value: Misskey.entities.PageBlock[]): void;
|
||||
}>();
|
||||
|
||||
function updateItem(v) {
|
||||
const [dndParentEl, items] = useDragAndDrop(props.modelValue, {
|
||||
dragHandle: '.drag-handle',
|
||||
group: 'blocks',
|
||||
plugins: [animations()],
|
||||
threshold: {
|
||||
horizontal: 0.5,
|
||||
vertical: 0.5,
|
||||
},
|
||||
onDragend: () => {
|
||||
emit('update:modelValue', items.value);
|
||||
},
|
||||
});
|
||||
|
||||
function updateItem(v: Misskey.entities.PageBlock) {
|
||||
const i = props.modelValue.findIndex(x => x.id === v.id);
|
||||
const newValue = [
|
||||
...props.modelValue.slice(0, i),
|
||||
|
|
@ -52,8 +61,8 @@ function updateItem(v) {
|
|||
emit('update:modelValue', newValue);
|
||||
}
|
||||
|
||||
function removeItem(el) {
|
||||
const i = props.modelValue.findIndex(x => x.id === el.id);
|
||||
function removeItem(v: Misskey.entities.PageBlock) {
|
||||
const i = props.modelValue.findIndex(x => x.id === v.id);
|
||||
const newValue = [
|
||||
...props.modelValue.slice(0, i),
|
||||
...props.modelValue.slice(i + 1),
|
||||
|
|
|
|||
|
|
@ -13,26 +13,15 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div class="_gaps">
|
||||
<div>
|
||||
<div v-panel style="border-radius: 6px;">
|
||||
<Sortable
|
||||
v-model="pinnedEmojisForReaction"
|
||||
:class="$style.emojis"
|
||||
:itemKey="item => item"
|
||||
:animation="150"
|
||||
:delay="100"
|
||||
:delayOnTouchOnly="true"
|
||||
>
|
||||
<template #item="{element}">
|
||||
<button class="_button" :class="$style.emojisItem" @click="removeReaction(element, $event)">
|
||||
<MkCustomEmoji v-if="element[0] === ':'" :name="element" :normal="true" :fallbackToImage="true"/>
|
||||
<MkEmoji v-else :emoji="element" :normal="true"/>
|
||||
</button>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button class="_button" :class="$style.emojisAdd" @click="chooseReaction">
|
||||
<i class="ti ti-plus"></i>
|
||||
</button>
|
||||
</template>
|
||||
</Sortable>
|
||||
<div ref="forReactionDndParentEl" :class="$style.emojis">
|
||||
<button v-for="emoji in pinnedEmojisForReaction" :key="`pinnedForReaction_${emoji}`" class="_button" :class="$style.emojisItem" @click="removeReaction(emoji, $event)">
|
||||
<MkCustomEmoji v-if="emoji.startsWith(':')" :name="emoji" :normal="true" :fallbackToImage="true"/>
|
||||
<MkEmoji v-else :emoji="emoji" :normal="true"/>
|
||||
</button>
|
||||
<button class="_button no-drag" :class="$style.emojisAdd" @click="chooseReaction">
|
||||
<i class="ti ti-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="$style.editorCaption">{{ i18n.ts.reactionSettingDescription2 }}</div>
|
||||
</div>
|
||||
|
|
@ -53,26 +42,15 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div class="_gaps">
|
||||
<div>
|
||||
<div v-panel style="border-radius: 6px;">
|
||||
<Sortable
|
||||
v-model="pinnedEmojis"
|
||||
:class="$style.emojis"
|
||||
:itemKey="item => item"
|
||||
:animation="150"
|
||||
:delay="100"
|
||||
:delayOnTouchOnly="true"
|
||||
>
|
||||
<template #item="{element}">
|
||||
<button class="_button" :class="$style.emojisItem" @click="removeEmoji(element, $event)">
|
||||
<MkCustomEmoji v-if="element[0] === ':'" :name="element" :normal="true" :fallbackToImage="true"/>
|
||||
<MkEmoji v-else :emoji="element" :normal="true"/>
|
||||
</button>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button class="_button" :class="$style.emojisAdd" @click="chooseEmoji">
|
||||
<i class="ti ti-plus"></i>
|
||||
</button>
|
||||
</template>
|
||||
</Sortable>
|
||||
<div ref="dndParentEl" :class="$style.emojis">
|
||||
<button v-for="emoji in pinnedEmojis" :key="`pinned_${emoji}`" class="_button" :class="$style.emojisItem" @click="removeEmoji(emoji, $event)">
|
||||
<MkCustomEmoji v-if="emoji.startsWith(':')" :name="emoji" :normal="true" :fallbackToImage="true"/>
|
||||
<MkEmoji v-else :emoji="emoji" :normal="true"/>
|
||||
</button>
|
||||
<button class="_button no-drag" :class="$style.emojisAdd" @click="chooseEmoji">
|
||||
<i class="ti ti-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="$style.editorCaption">{{ i18n.ts.reactionSettingDescription2 }}</div>
|
||||
</div>
|
||||
|
|
@ -126,8 +104,9 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, Ref, watch } from 'vue';
|
||||
import Sortable from 'vuedraggable';
|
||||
import { computed, ref, Ref, shallowRef, watch } from 'vue';
|
||||
import { animations } from '@formkit/drag-and-drop';
|
||||
import { dragAndDrop } from '@formkit/drag-and-drop/vue';
|
||||
import MkRadios from '@/components/MkRadios.vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import FormSection from '@/components/form/section.vue';
|
||||
|
|
@ -143,14 +122,52 @@ import MkCustomEmoji from '@/components/global/MkCustomEmoji.vue';
|
|||
import MkEmoji from '@/components/global/MkEmoji.vue';
|
||||
import MkFolder from '@/components/MkFolder.vue';
|
||||
|
||||
const pinnedEmojisForReaction: Ref<string[]> = ref(deepClone(defaultStore.state.reactions));
|
||||
const pinnedEmojis: Ref<string[]> = ref(deepClone(defaultStore.state.pinnedEmojis));
|
||||
const pinnedEmojisForReaction = ref<string[]>(deepClone(defaultStore.state.reactions));
|
||||
const isPinnedEmojisForReactionDragging = ref(false);
|
||||
|
||||
const pinnedEmojis = ref<string[]>(deepClone(defaultStore.state.pinnedEmojis));
|
||||
const isPinnedEmojisDragging = ref(false);
|
||||
|
||||
const emojiPickerScale = computed(defaultStore.makeGetterSetter('emojiPickerScale'));
|
||||
const emojiPickerWidth = computed(defaultStore.makeGetterSetter('emojiPickerWidth'));
|
||||
const emojiPickerHeight = computed(defaultStore.makeGetterSetter('emojiPickerHeight'));
|
||||
const emojiPickerStyle = computed(defaultStore.makeGetterSetter('emojiPickerStyle'));
|
||||
|
||||
const forReactionDndParentEl = shallowRef<HTMLElement>();
|
||||
const dndParentEl = shallowRef<HTMLElement>();
|
||||
|
||||
dragAndDrop({
|
||||
parent: forReactionDndParentEl,
|
||||
values: pinnedEmojisForReaction,
|
||||
plugins: [animations()],
|
||||
draggable: (el: HTMLElement) => {
|
||||
return !el.classList.contains('no-drag');
|
||||
},
|
||||
onDragstart: () => {
|
||||
isPinnedEmojisForReactionDragging.value = true;
|
||||
},
|
||||
onDragend: () => {
|
||||
isPinnedEmojisForReactionDragging.value = false;
|
||||
defaultStore.set('reactions', pinnedEmojisForReaction.value);
|
||||
},
|
||||
});
|
||||
|
||||
dragAndDrop({
|
||||
parent: dndParentEl,
|
||||
values: pinnedEmojis,
|
||||
plugins: [animations()],
|
||||
draggable: (el: HTMLElement) => {
|
||||
return !el.classList.contains('no-drag');
|
||||
},
|
||||
onDragstart: () => {
|
||||
isPinnedEmojisDragging.value = true;
|
||||
},
|
||||
onDragend: () => {
|
||||
isPinnedEmojisDragging.value = false;
|
||||
defaultStore.set('pinnedEmojis', pinnedEmojis.value);
|
||||
},
|
||||
});
|
||||
|
||||
const removeReaction = (reaction: string, ev: MouseEvent) => remove(pinnedEmojisForReaction, reaction, ev);
|
||||
const chooseReaction = (ev: MouseEvent) => pickEmoji(pinnedEmojisForReaction, ev);
|
||||
const setDefaultReaction = () => setDefault(pinnedEmojisForReaction);
|
||||
|
|
@ -229,12 +246,14 @@ function getHTMLElement(ev: MouseEvent): HTMLElement {
|
|||
}
|
||||
|
||||
watch(pinnedEmojisForReaction, () => {
|
||||
if (isPinnedEmojisForReactionDragging.value) return;
|
||||
defaultStore.set('reactions', pinnedEmojisForReaction.value);
|
||||
}, {
|
||||
deep: true,
|
||||
});
|
||||
|
||||
watch(pinnedEmojis, () => {
|
||||
if (isPinnedEmojisDragging.value) return;
|
||||
defaultStore.set('pinnedEmojis', pinnedEmojis.value);
|
||||
}, {
|
||||
deep: true,
|
||||
|
|
|
|||
|
|
@ -8,25 +8,17 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<FormSlot>
|
||||
<template #label>{{ i18n.ts.navbar }}</template>
|
||||
<MkContainer :showHeader="false">
|
||||
<Sortable
|
||||
v-model="items"
|
||||
itemKey="id"
|
||||
:animation="150"
|
||||
:handle="'.' + $style.itemHandle"
|
||||
@start="e => e.item.classList.add('active')"
|
||||
@end="e => e.item.classList.remove('active')"
|
||||
>
|
||||
<template #item="{element,index}">
|
||||
<div
|
||||
v-if="element.type === '-' || navbarItemDef[element.type]"
|
||||
:class="$style.item"
|
||||
>
|
||||
<button class="_button" :class="$style.itemHandle"><i class="ti ti-menu"></i></button>
|
||||
<i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[element.type]?.icon]"></i><span :class="$style.itemText">{{ navbarItemDef[element.type]?.title ?? i18n.ts.divider }}</span>
|
||||
<button class="_button" :class="$style.itemRemove" @click="removeItem(index)"><i class="ti ti-x"></i></button>
|
||||
</div>
|
||||
</template>
|
||||
</Sortable>
|
||||
<div ref="dndParentEl">
|
||||
<div
|
||||
v-for="item, index in items"
|
||||
:key="item.id"
|
||||
:class="$style.item"
|
||||
>
|
||||
<button class="_button handle" :class="$style.itemHandle"><i class="ti ti-menu"></i></button>
|
||||
<i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[item.type]?.icon]"></i><span :class="$style.itemText">{{ navbarItemDef[item.type]?.title ?? i18n.ts.divider }}</span>
|
||||
<button class="_button" :class="$style.itemRemove" @click="removeItem(index)"><i class="ti ti-x"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</MkContainer>
|
||||
</FormSlot>
|
||||
<div class="_buttons">
|
||||
|
|
@ -46,7 +38,9 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, defineAsyncComponent, ref, watch } from 'vue';
|
||||
import { computed, ref, shallowRef, watch } from 'vue';
|
||||
import { animations } from '@formkit/drag-and-drop';
|
||||
import { dragAndDrop } from '@formkit/drag-and-drop/vue';
|
||||
import MkRadios from '@/components/MkRadios.vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import FormSlot from '@/components/form/slot.vue';
|
||||
|
|
@ -58,12 +52,19 @@ import { reloadAsk } from '@/scripts/reload-ask.js';
|
|||
import { i18n } from '@/i18n.js';
|
||||
import { definePageMetadata } from '@/scripts/page-metadata.js';
|
||||
|
||||
const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
|
||||
|
||||
const items = ref(defaultStore.state.menu.map(x => ({
|
||||
id: Math.random().toString(),
|
||||
type: x,
|
||||
})));
|
||||
})).filter(x => Object.keys(navbarItemDef).includes(x.type) || x.type === '-'));
|
||||
|
||||
const dndParentEl = shallowRef<HTMLElement>();
|
||||
|
||||
dragAndDrop({
|
||||
parent: dndParentEl,
|
||||
values: items,
|
||||
plugins: [animations()],
|
||||
dragHandle: '.handle',
|
||||
});
|
||||
|
||||
const menuDisplay = computed(defaultStore.makeGetterSetter('menuDisplay'));
|
||||
|
||||
|
|
@ -77,7 +78,7 @@ async function addItem() {
|
|||
value: '-', text: i18n.ts.divider,
|
||||
}],
|
||||
});
|
||||
if (canceled) return;
|
||||
if (canceled || item == null) return;
|
||||
items.value = [...items.value, {
|
||||
id: Math.random().toString(),
|
||||
type: item,
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<template>
|
||||
<div class="_gaps_m">
|
||||
<div class="_panel">
|
||||
<div :class="$style.banner" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
|
||||
<div :class="$style.banner" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : undefined }">
|
||||
<MkButton primary rounded :class="$style.bannerEdit" @click="changeBanner">{{ i18n.ts._profile.changeBanner }}</MkButton>
|
||||
</div>
|
||||
<div :class="$style.avatarContainer">
|
||||
|
|
@ -58,30 +58,22 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div :class="$style.metadataRoot" class="_gaps_s">
|
||||
<MkInfo>{{ i18n.ts._profile.verifiedLinkDescription }}</MkInfo>
|
||||
|
||||
<Sortable
|
||||
v-model="fields"
|
||||
class="_gaps_s"
|
||||
itemKey="id"
|
||||
:animation="150"
|
||||
:handle="'.' + $style.dragItemHandle"
|
||||
@start="e => e.item.classList.add('active')"
|
||||
@end="e => e.item.classList.remove('active')"
|
||||
>
|
||||
<template #item="{element, index}">
|
||||
<div v-panel :class="$style.fieldDragItem">
|
||||
<button v-if="!fieldEditMode" class="_button" :class="$style.dragItemHandle" tabindex="-1"><i class="ti ti-menu"></i></button>
|
||||
<button v-if="fieldEditMode" :disabled="fields.length <= 1" class="_button" :class="$style.dragItemRemove" @click="deleteField(index)"><i class="ti ti-x"></i></button>
|
||||
<div :class="$style.dragItemForm">
|
||||
<FormSplit :minWidth="200">
|
||||
<MkInput v-model="element.name" small :placeholder="i18n.ts._profile.metadataLabel">
|
||||
</MkInput>
|
||||
<MkInput v-model="element.value" small :placeholder="i18n.ts._profile.metadataContent">
|
||||
</MkInput>
|
||||
</FormSplit>
|
||||
</div>
|
||||
<div ref="fieldsRootEl" class="_gaps_s">
|
||||
<div v-for="field, index in fields" :key="field.id" :class="$style.fieldDragItem">
|
||||
<button v-if="!fieldEditMode" class="_button handle" :class="$style.dragItemHandle" tabindex="-1"><i class="ti ti-menu"></i></button>
|
||||
<button v-if="fieldEditMode" :disabled="fields.length <= 1" class="_button" :class="$style.dragItemRemove" @click="deleteField(index)"><i class="ti ti-x"></i></button>
|
||||
<div :class="$style.dragItemForm">
|
||||
<FormSplit :minWidth="200">
|
||||
<MkInput v-model="field.name" small>
|
||||
<template #label>{{ i18n.ts._profile.metadataLabel }}</template>
|
||||
</MkInput>
|
||||
<MkInput v-model="field.value" small>
|
||||
<template #label>{{ i18n.ts._profile.metadataContent }}</template>
|
||||
</MkInput>
|
||||
</FormSplit>
|
||||
</div>
|
||||
</template>
|
||||
</Sortable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</MkFolder>
|
||||
<template #caption>{{ i18n.ts._profile.metadataDescription }}</template>
|
||||
|
|
@ -116,7 +108,9 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, reactive, ref, watch, defineAsyncComponent } from 'vue';
|
||||
import { computed, reactive, ref, shallowRef, watch } from 'vue';
|
||||
import { animations } from '@formkit/drag-and-drop';
|
||||
import { dragAndDrop } from '@formkit/drag-and-drop/vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import MkInput from '@/components/MkInput.vue';
|
||||
import MkSwitch from '@/components/MkSwitch.vue';
|
||||
|
|
@ -138,7 +132,9 @@ import MkTextarea from '@/components/MkTextarea.vue';
|
|||
|
||||
const $i = signinRequired();
|
||||
|
||||
const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
|
||||
function assertValidLang(value: string | null): value is keyof typeof langmap {
|
||||
return value !== null && Object.keys(langmap).includes(value);
|
||||
}
|
||||
|
||||
const reactionAcceptance = computed(defaultStore.makeGetterSetter('reactionAcceptance'));
|
||||
|
||||
|
|
@ -152,7 +148,7 @@ const profile = reactive({
|
|||
followedMessage: $i.followedMessage,
|
||||
location: $i.location,
|
||||
birthday: $i.birthday,
|
||||
lang: assertVaildLang($i.lang) ? $i.lang : null,
|
||||
lang: assertValidLang($i.lang) ? $i.lang : null,
|
||||
isBot: $i.isBot ?? false,
|
||||
isCat: $i.isCat ?? false,
|
||||
});
|
||||
|
|
@ -166,6 +162,16 @@ watch(() => profile, () => {
|
|||
const fields = ref($i.fields.map(field => ({ id: Math.random().toString(), name: field.name, value: field.value })) ?? []);
|
||||
const fieldEditMode = ref(false);
|
||||
|
||||
const fieldsRootEl = shallowRef<HTMLElement>();
|
||||
|
||||
dragAndDrop({
|
||||
parent: fieldsRootEl,
|
||||
values: fields,
|
||||
plugins: [animations()],
|
||||
dragHandle: '.handle',
|
||||
draggable: () => !fieldEditMode.value,
|
||||
});
|
||||
|
||||
function addField() {
|
||||
fields.value.push({
|
||||
id: Math.random().toString(),
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import lightTheme from '@@/themes/l-light.json5';
|
|||
import darkTheme from '@@/themes/d-green-lime.json5';
|
||||
import { miLocalStorage } from './local-storage.js';
|
||||
import type { SoundType } from '@/scripts/sound.js';
|
||||
import type { DefaultStoredWidget } from '@/widgets/widget.js';
|
||||
import { Storage } from '@/pizzax.js';
|
||||
|
||||
interface PostFormAction {
|
||||
|
|
@ -128,7 +129,7 @@ export const defaultStore = markRaw(new Storage('base', {
|
|||
},
|
||||
pinnedEmojis: {
|
||||
where: 'account',
|
||||
default: [],
|
||||
default: [] as string[],
|
||||
},
|
||||
reactionAcceptance: {
|
||||
where: 'account',
|
||||
|
|
@ -179,12 +180,7 @@ export const defaultStore = markRaw(new Storage('base', {
|
|||
},
|
||||
widgets: {
|
||||
where: 'account',
|
||||
default: [] as {
|
||||
name: string;
|
||||
id: string;
|
||||
place: string | null;
|
||||
data: Record<string, any>;
|
||||
}[],
|
||||
default: [] as DefaultStoredWidget[],
|
||||
},
|
||||
tl: {
|
||||
where: 'deviceAccount',
|
||||
|
|
|
|||
|
|
@ -9,16 +9,23 @@ import { Form, GetFormResultType } from '@/scripts/form.js';
|
|||
import * as os from '@/os.js';
|
||||
import { deepClone } from '@/scripts/clone.js';
|
||||
|
||||
export type Widget<P extends Record<string, unknown>> = {
|
||||
export type WidgetProps = Record<string, unknown>;
|
||||
|
||||
export type Widget<P extends WidgetProps = WidgetProps> = {
|
||||
name: string;
|
||||
id: string;
|
||||
data: Partial<P>;
|
||||
};
|
||||
|
||||
export type WidgetComponentProps<P extends Record<string, unknown>> = {
|
||||
export type DefaultStoredWidget<P extends WidgetProps = WidgetProps> = {
|
||||
place: 'left' | 'right' | null;
|
||||
} & Widget<P>;
|
||||
|
||||
export type WidgetComponentProps<P extends WidgetProps = WidgetProps> = {
|
||||
widget?: Widget<P>;
|
||||
};
|
||||
|
||||
export type WidgetComponentEmits<P extends Record<string, unknown>> = {
|
||||
export type WidgetComponentEmits<P extends WidgetProps = WidgetProps> = {
|
||||
(ev: 'updateProps', props: P);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue