diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2022-08-31 00:24:33 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2022-08-31 00:24:33 +0900 |
| commit | 786b150ea75111b5f6102c256d5cfa42cb83d1fb (patch) | |
| tree | d552d0c371829d7ff027890d1036a80bb08517f7 /packages/client/src/components/widgets.vue | |
| parent | update deps (diff) | |
| download | misskey-786b150ea75111b5f6102c256d5cfa42cb83d1fb.tar.gz misskey-786b150ea75111b5f6102c256d5cfa42cb83d1fb.tar.bz2 misskey-786b150ea75111b5f6102c256d5cfa42cb83d1fb.zip | |
refactor(client): align filename to component name
Diffstat (limited to 'packages/client/src/components/widgets.vue')
| -rw-r--r-- | packages/client/src/components/widgets.vue | 167 |
1 files changed, 0 insertions, 167 deletions
diff --git a/packages/client/src/components/widgets.vue b/packages/client/src/components/widgets.vue deleted file mode 100644 index 54d4c57af3..0000000000 --- a/packages/client/src/components/widgets.vue +++ /dev/null @@ -1,167 +0,0 @@ -<template> -<div class="vjoppmmu"> - <template v-if="edit"> - <header> - <MkSelect v-model="widgetAdderSelected" style="margin-bottom: var(--margin)" class="mk-widget-select"> - <template #label>{{ i18n.ts.selectWidget }}</template> - <option v-for="widget in widgetDefs" :key="widget" :value="widget">{{ i18n.t(`_widgets.${widget}`) }}</option> - </MkSelect> - <MkButton inline primary class="mk-widget-add" @click="addWidget"><i class="fas fa-plus"></i> {{ i18n.ts.add }}</MkButton> - <MkButton inline @click="$emit('exit')">{{ i18n.ts.close }}</MkButton> - </header> - <XDraggable - v-model="widgets_" - item-key="id" - handle=".handle" - animation="150" - > - <template #item="{element}"> - <div class="customize-container"> - <button class="config _button" @click.prevent.stop="configWidget(element.id)"><i class="fas fa-cog"></i></button> - <button class="remove _button" @click.prevent.stop="removeWidget(element)"><i class="fas fa-times"></i></button> - <div class="handle"> - <component :is="`mkw-${element.name}`" :ref="el => widgetRefs[element.id] = el" class="widget" :widget="element" @updateProps="updateWidget(element.id, $event)"/> - </div> - </div> - </template> - </XDraggable> - </template> - <component :is="`mkw-${widget.name}`" v-for="widget in widgets" v-else :key="widget.id" :ref="el => widgetRefs[widget.id] = el" class="widget" :widget="widget" @updateProps="updateWidget(widget.id, $event)" @contextmenu.stop="onContextmenu(widget, $event)"/> -</div> -</template> - -<script lang="ts" setup> -import { defineAsyncComponent, reactive, ref, computed } from 'vue'; -import { v4 as uuid } from 'uuid'; -import MkSelect from '@/components/form/select.vue'; -import MkButton from '@/components/ui/button.vue'; -import { widgets as widgetDefs } from '@/widgets'; -import * as os from '@/os'; -import { i18n } from '@/i18n'; - -const XDraggable = defineAsyncComponent(() => import('vuedraggable')); - -type Widget = { - name: string; - id: string; - data: Record<string, any>; -}; - -const props = defineProps<{ - widgets: Widget[]; - edit: boolean; -}>(); - -const emit = defineEmits<{ - (ev: 'updateWidgets', widgets: Widget[]): void; - (ev: 'addWidget', widget: Widget): void; - (ev: 'removeWidget', widget: Widget): void; - (ev: 'updateWidget', widget: Partial<Widget>): void; - (ev: 'exit'): void; -}>(); - -const widgetRefs = {}; -const configWidget = (id: string) => { - widgetRefs[id].configure(); -}; -const widgetAdderSelected = ref(null); -const addWidget = () => { - if (widgetAdderSelected.value == null) return; - - emit('addWidget', { - name: widgetAdderSelected.value, - id: uuid(), - data: {}, - }); - - widgetAdderSelected.value = null; -}; -const removeWidget = (widget) => { - emit('removeWidget', widget); -}; -const updateWidget = (id, data) => { - emit('updateWidget', { id, data }); -}; -const widgets_ = computed({ - get: () => props.widgets, - set: (value) => { - emit('updateWidgets', value); - }, -}); - -function onContextmenu(widget: Widget, ev: MouseEvent) { - const isLink = (el: HTMLElement) => { - if (el.tagName === 'A') return true; - if (el.parentElement) { - return isLink(el.parentElement); - } - }; - if (isLink(ev.target)) return; - if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes(ev.target.tagName) || ev.target.attributes['contenteditable']) return; - if (window.getSelection()?.toString() !== '') return; - - os.contextMenu([{ - type: 'label', - text: i18n.t(`_widgets.${widget.name}`), - }, { - icon: 'fas fa-cog', - text: i18n.ts.settings, - action: () => { - configWidget(widget.id); - }, - }], ev); -} -</script> - -<style lang="scss" scoped> -.vjoppmmu { - > header { - margin: 16px 0; - - > * { - width: 100%; - padding: 4px; - } - } - - > .widget, .customize-container { - contain: content; - margin: var(--margin) 0; - - &:first-of-type { - margin-top: 0; - } - } - - .customize-container { - position: relative; - cursor: move; - - > .config, - > .remove { - position: absolute; - z-index: 10000; - top: 8px; - width: 32px; - height: 32px; - color: #fff; - background: rgba(#000, 0.7); - border-radius: 4px; - } - - > .config { - right: 8px + 8px + 32px; - } - - > .remove { - right: 8px; - } - - > .handle { - > .widget { - pointer-events: none; - } - } - } -} -</style> |