summaryrefslogtreecommitdiff
path: root/packages/client/src/components/widgets.vue
diff options
context:
space:
mode:
authorsyuilo <Syuilotan@yahoo.co.jp>2022-08-31 00:24:33 +0900
committersyuilo <Syuilotan@yahoo.co.jp>2022-08-31 00:24:33 +0900
commit786b150ea75111b5f6102c256d5cfa42cb83d1fb (patch)
treed552d0c371829d7ff027890d1036a80bb08517f7 /packages/client/src/components/widgets.vue
parentupdate deps (diff)
downloadmisskey-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.vue167
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>