wait-what/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Packages Projects Releases Wiki Activity

refactor components/widgets.vue to composition API

Browse source
This commit is contained in:
Johann150 2022-07-30 22:37:29 +02:00
parent 9fc3fcaf18
commit 340420c48a
Signed by untrusted user: Johann150
GPG key ID: 9EE6577A2A06F8F1
1 changed files with 40 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

96
packages/client/src/components/widgets.vue
View file

@ -7,7 +7,7 @@
<option v-for="widget in widgetDefs" :key="widget" :value="widget">{{ i18n.t(`_widgets.${widget}`) }}</option> <option v-for="widget in widgetDefs" :key="widget" :value="widget">{{ i18n.t(`_widgets.${widget}`) }}</option>
</MkSelect> </MkSelect>
<MkButton inline primary class="mk-widget-add" @click="addWidget"><i class="fas fa-plus"></i> {{ i18n.ts.add }}</MkButton> <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> <MkButton inline @click="emit('exit')">{{ i18n.ts.close }}</MkButton>
</header> </header>
<XDraggable <XDraggable
v-model="widgets_" v-model="widgets_"
@ -30,73 +30,57 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, defineAsyncComponent, reactive, ref, computed } from 'vue'; import { defineComponent, defineAsyncComponent, reactive, ref, computed } from 'vue';
import { v4 as uuid } from 'uuid'; import { v4 as uuid } from 'uuid';
import MkSelect from '@/components/form/select.vue'; import MkSelect from '@/components/form/select.vue';
import MkButton from '@/components/ui/button.vue'; import MkButton from '@/components/ui/button.vue';
import { widgets as widgetDefs } from '@/widgets'; import { widgets as widgetDefs } from '@/widgets';
import { i18n } from '@/i18n';
export default defineComponent({ const XDraggable = defineAsyncComponent(() => import('vuedraggable'));
components: {
XDraggable: defineAsyncComponent(() => import('vuedraggable')),
MkSelect,
MkButton,
},
props: { type Widgets = any[];
widgets: {
type: Array,
required: true,
},
edit: {
type: Boolean,
required: true,
},
},
emits: ['updateWidgets', 'addWidget', 'removeWidget', 'updateWidget', 'exit'], const props = defineProps<{
widgets: Widgets;
edit: boolean;
}>();
setup(props, context) { const emit = defineEmits<{
const widgetRefs = reactive({}); (ev: 'updateWidgets', v: Widgets): void;
const configWidget = (id: string) => { (ev: 'addWidget', v: { name: string; id: string; data: Record<string, any>; }): void;
widgetRefs[id].configure(); (ev: 'removeWidget', v: { name: string; id: string; }): void;
}; (ev: 'updateWidget', v: { id: string; data: Record<string, any>; }): void;
const widgetAdderSelected = ref(null); (ev: 'exit'): void;
const addWidget = () => { }>();
if (widgetAdderSelected.value == null) return;
context.emit('addWidget', { const widgetRefs = reactive({});
name: widgetAdderSelected.value, const configWidget = (id: string) => {
id: uuid(), widgetRefs[id].configure();
data: {}, };
}); const widgetAdderSelected = ref(null);
const addWidget = () => {
if (widgetAdderSelected.value == null) return;
widgetAdderSelected.value = null; emit('addWidget', {
}; name: widgetAdderSelected.value,
const removeWidget = (widget) => { id: uuid(),
context.emit('removeWidget', widget); data: {},
}; });
const updateWidget = (id, data) => {
context.emit('updateWidget', { id, data });
};
const widgets_ = computed({
get: () => props.widgets,
set: (value) => {
context.emit('updateWidgets', value);
},
});
return { widgetAdderSelected.value = null;
widgetRefs, };
configWidget, const removeWidget = (widget) => {
widgetAdderSelected, emit('removeWidget', widget);
widgetDefs, };
addWidget, const updateWidget = (id, data) => {
removeWidget, emit('updateWidget', { id, data });
updateWidget, };
widgets_, const widgets_ = computed({
}; get: () => props.widgets,
set: (value) => {
emit('updateWidgets', value);
}, },
}); });
</script> </script>