@vyr/element-plus-browser 0.0.1

package/src/preset/ElTable.ts

@@ -0,0 +1,425 @@
+import { ArrayUtils, Descriptor, Generate, executePreset as _executePreset } from '@vyr/engine'
+import { ElDialogDescriptor, ElFormDescriptor, ElPaginationDescriptor, executePreset, routinePreset } from '@vyr/element-plus'
+import { DataService, Preset, runtime } from '@vyr/runtime'
+import { dialog, DialogOptions, Option } from '@vyr/design'
+import { language as builtinLanguage, option } from '@vyr/builtin'
+import { language } from '../locale'
+
+const getSelectOptions = () => {
+    const dataService = runtime.get<DataService>('data')
+    const navigator = dataService.sidebar.get(dataService.sidebar.active)
+    const forms: Option[] = []
+    const dialogs: Option[] = []
+    const paginations: Option[] = []
+
+    if (navigator) {
+        const interactionIds: string[] = []
+        navigator.root.traverse(child => {
+            if (child.interactions.length > 0) {
+                for (const interaction of child.interactions) {
+                    ArrayUtils.insert(interactionIds, interaction.type)
+                }
+            }
+            if (child instanceof ElFormDescriptor) {
+                forms.push({ label: child.name, value: child.uuid })
+            } else if (child instanceof ElDialogDescriptor) {
+                dialogs.push({ label: child.name, value: child.uuid })
+            } else if (child instanceof ElPaginationDescriptor) {
+                paginations.push({ label: child.name, value: child.uuid })
+            }
+        })
+    }
+
+    return {
+        forms,
+        dialogs,
+        paginations,
+    }
+}
+
+const listPreset: Preset = {
+    type: 'interaction',
+    label: language.get('preset.ElTable.list'),
+    value: 'preset.ElTable.list',
+    executor: async (descriptor: Descriptor) => {
+        const { forms, paginations } = getSelectOptions()
+        const { datasets } = option.Preset.getSelectOptions()
+
+        const options: DialogOptions = [
+            {
+                name: 'url',
+                label: language.get('preset.ElTable.list.url'),
+                componentType: 'input',
+                componentProps: {}
+            },
+            {
+                name: 'form',
+                label: language.get('preset.ElTable.list.form'),
+                componentType: 'select',
+                componentProps: {},
+                componentData: forms
+            },
+            {
+                name: 'pagination',
+                label: language.get('preset.ElTable.list.pagination'),
+                componentType: 'select',
+                componentProps: {},
+                componentData: paginations,
+            },
+            {
+                name: 'dataset',
+                label: language.get('preset.ElTable.list.dataset'),
+                componentType: 'select',
+                componentProps: {},
+                componentData: datasets
+            },
+        ]
+
+        const result = await dialog({ title: builtinLanguage.get('preset.dialog.title'), options })
+        if (result.success === false) return
+
+        const requestArgs = {
+            url: result.value.url,
+            type: _executePreset.net.request.RequestType.GET,
+            data: `${routinePreset.ElTable.list.nodes.form},${routinePreset.ElTable.list.nodes.pagination}`
+        }
+        const inputs = {
+            [routinePreset.ElTable.list.nodes.form]: executePreset.ElForm.getData.createExecuteInput({ form: result.value.form }),
+            [routinePreset.ElTable.list.nodes.pagination]: executePreset.ElPagination.getData.createExecuteInput({ pagination: result.value.pagination }),
+            [routinePreset.ElTable.list.nodes.request]: _executePreset.net.request.createExecuteInput(requestArgs),
+            [routinePreset.ElTable.list.nodes.dataset]: _executePreset.dataset.update.createExecuteInput({ url: result.value.dataset }),
+        }
+        const config = { uuid: Generate.uuid(), type: 'click', url: routinePreset.ElTable.list.url, inputs }
+        descriptor.interactions.push(config)
+    }
+}
+
+const resetPreset: Preset = {
+    type: 'interaction',
+    label: language.get('preset.ElTable.reset'),
+    value: 'preset.ElTable.reset',
+    executor: async (descriptor: Descriptor) => {
+        const { forms, paginations } = getSelectOptions()
+        const { interactionTargets } = option.Preset.getSelectOptions()
+
+        const options: DialogOptions = [
+            {
+                name: 'form',
+                label: language.get('preset.ElTable.list.form'),
+                componentType: 'select',
+                componentProps: {},
+                componentData: forms,
+            },
+            {
+                name: 'pagination',
+                label: language.get('preset.ElTable.list.pagination'),
+                componentType: 'select',
+                componentProps: {},
+                componentData: paginations
+            },
+            {
+                name: 'target',
+                label: builtinLanguage.get('preset.scheduler.invoke.target'),
+                componentType: 'select',
+                componentProps: {},
+                componentData: interactionTargets
+            },
+            {
+                name: 'interaction',
+                label: builtinLanguage.get('preset.scheduler.invoke.interaction'),
+                componentType: 'select',
+                componentProps: {},
+                componentData: (result) => {
+                    const descriptor = Descriptor.get<Descriptor>(result.target)
+                    if (descriptor === null) return []
+                    return option.Preset.getInteractionOptionsByTarget(descriptor)
+                },
+            },
+        ]
+
+        const result = await dialog({ title: builtinLanguage.get('preset.dialog.title'), options })
+        if (result.success === false) return
+
+        const inputs = {
+            [routinePreset.ElTable.reset.nodes.form]: executePreset.ElForm.reset.createExecuteInput({ form: result.value.form }),
+            [routinePreset.ElTable.reset.nodes.pagination]: executePreset.ElPagination.reset.createExecuteInput({ pagination: result.value.pagination }),
+            [routinePreset.ElTable.reset.nodes.refresh]: _executePreset.graphics.invoke.createExecuteInput({
+                target: result.value.target,
+                interaction: result.value.interaction,
+            })
+        }
+        const config = { uuid: Generate.uuid(), type: 'click', url: routinePreset.ElTable.reset.url, inputs }
+        descriptor.interactions.push(config)
+    }
+}
+
+const createPreset: Preset = {
+    type: 'interaction',
+    label: language.get('preset.ElTable.create'),
+    value: 'preset.ElTable.create',
+    executor: async (descriptor: Descriptor) => {
+        const { dialogs } = getSelectOptions()
+        const { datasets } = option.Preset.getSelectOptions()
+        const options: DialogOptions = [
+            {
+                name: 'dataset',
+                label: language.get('preset.ElTable.create.dataset'),
+                componentType: 'select',
+                componentProps: {},
+                componentData: datasets
+            },
+            {
+                name: 'dialog',
+                label: language.get('preset.ElTable.create.dialog'),
+                componentType: 'select',
+                componentProps: {},
+                componentData: dialogs,
+            },
+            {
+                name: 'title',
+                label: language.get('preset.ElTable.create.dialog.title'),
+                componentType: 'input',
+                componentProps: {}
+            },
+        ]
+
+        const result = await dialog({ title: builtinLanguage.get('preset.dialog.title'), options, })
+        if (result.success === false) return
+
+        const inputs = {
+            [routinePreset.ElTable.create.nodes.create]: executePreset.ElTable.create.createExecuteInput({}),
+            [routinePreset.ElTable.create.nodes.dataset]: _executePreset.dataset.update.createExecuteInput({ url: result.value.dataset }),
+            [routinePreset.ElTable.create.nodes.dialog]: executePreset.ElDialog.open.createExecuteInput({
+                dialog: result.value.dialog,
+                title: result.value.title
+            })
+        }
+        const config = { uuid: Generate.uuid(), type: 'click', url: routinePreset.ElTable.create.url, inputs }
+        descriptor.interactions.push(config)
+    }
+}
+
+const editPreset: Preset = {
+    type: 'interaction',
+    label: language.get('preset.ElTable.edit'),
+    value: 'preset.ElTable.edit',
+    executor: async (descriptor: Descriptor) => {
+        const { dialogs } = getSelectOptions()
+        const { datasets } = option.Preset.getSelectOptions()
+        const options: DialogOptions = [
+            {
+                name: 'url',
+                label: language.get('preset.ElTable.edit.url'),
+                componentType: 'input',
+                componentProps: {}
+            },
+            {
+                name: 'dataset',
+                label: language.get('preset.ElTable.edit.dataset'),
+                componentType: 'select',
+                componentProps: {},
+                componentData: datasets
+            },
+            {
+                name: 'dialog',
+                label: language.get('preset.ElTable.edit.dialog'),
+                componentType: 'select',
+                componentProps: {},
+                componentData: dialogs
+            },
+            {
+                name: 'title',
+                label: language.get('preset.ElTable.edit.dialog.title'),
+                componentType: 'input',
+                componentProps: {}
+            },
+        ]
+
+        const result = await dialog({ title: builtinLanguage.get('preset.dialog.title'), options, })
+        if (result.success === false) return
+
+        const inputs = {
+            [routinePreset.ElTable.edit.nodes.edit]: executePreset.ElTable.edit.createExecuteInput({}),
+            [routinePreset.ElTable.edit.nodes.request]: _executePreset.net.request.createExecuteInput({
+                url: result.value.url,
+                type: _executePreset.net.request.RequestType.GET
+            }),
+            [routinePreset.ElTable.edit.nodes.dataset]: _executePreset.dataset.update.createExecuteInput({ url: result.value.dataset }),
+            [routinePreset.ElTable.edit.nodes.dialog]: executePreset.ElDialog.open.createExecuteInput({
+                dialog: result.value.dialog,
+                title: result.value.title
+            })
+        }
+        const config = { uuid: Generate.uuid(), type: 'click', url: routinePreset.ElTable.edit.url, inputs }
+        descriptor.interactions.push(config)
+    }
+}
+
+const deletePreset: Preset = {
+    type: 'interaction',
+    label: language.get('preset.ElTable.delete'),
+    value: 'preset.ElTable.delete',
+    executor: async (descriptor: Descriptor) => {
+        const { interactionTargets } = option.Preset.getSelectOptions()
+        const options: DialogOptions = [
+            {
+                name: 'url',
+                label: language.get('preset.ElTable.delete.url'),
+                componentType: 'input',
+                componentProps: {}
+            },
+            {
+                name: 'target',
+                label: builtinLanguage.get('preset.scheduler.invoke.target'),
+                componentType: 'select',
+                componentProps: {},
+                componentData: interactionTargets
+            },
+            {
+                name: 'interaction',
+                label: builtinLanguage.get('preset.scheduler.invoke.interaction'),
+                componentType: 'select',
+                componentProps: {},
+                componentData: (result) => {
+                    const descriptor = Descriptor.get<Descriptor>(result.target)
+                    if (descriptor === null) return []
+                    return option.Preset.getInteractionOptionsByTarget(descriptor)
+                },
+            },
+        ]
+
+        const result = await dialog({ title: builtinLanguage.get('preset.dialog.title'), options, })
+        if (result.success === false) return
+
+        const inputs = {
+            [routinePreset.ElTable.delete.nodes.delete]: executePreset.ElTable.delete.createExecuteInput({}),
+            [routinePreset.ElTable.delete.nodes.request]: _executePreset.net.request.createExecuteInput({
+                url: result.value.url,
+                type: _executePreset.net.request.RequestType.DELETE,
+            }),
+            [routinePreset.ElTable.delete.nodes.refresh]: _executePreset.graphics.invoke.createExecuteInput({
+                target: result.value.target,
+                interaction: result.value.interaction,
+            })
+        }
+        const config = { uuid: Generate.uuid(), type: 'click', url: routinePreset.ElTable.delete.url, inputs }
+        descriptor.interactions.push(config)
+    }
+}
+
+const submitPreset: Preset = {
+    type: 'interaction',
+    label: language.get('preset.ElTable.submit'),
+    value: 'preset.ElTable.submit',
+    executor: async (descriptor: Descriptor) => {
+        const { forms, dialogs } = getSelectOptions()
+        const { interactionTargets } = option.Preset.getSelectOptions()
+
+        const options: DialogOptions = [
+            {
+                name: 'url',
+                label: language.get('preset.ElTable.submit.url'),
+                componentType: 'input',
+                componentProps: {}
+            },
+            {
+                name: 'form',
+                label: language.get('preset.ElTable.submit.form'),
+                componentType: 'select',
+                componentProps: {},
+                componentData: forms,
+            },
+            {
+                name: 'dialog',
+                label: language.get('preset.ElTable.submit.dialog'),
+                componentType: 'select',
+                componentProps: {},
+                componentData: dialogs
+            },
+            {
+                name: 'target',
+                label: builtinLanguage.get('preset.scheduler.invoke.target'),
+                componentType: 'select',
+                componentProps: {},
+                componentData: interactionTargets
+            },
+            {
+                name: 'interaction',
+                label: builtinLanguage.get('preset.scheduler.invoke.interaction'),
+                componentType: 'select',
+                componentProps: {},
+                componentData: (result) => {
+                    const descriptor = Descriptor.get<Descriptor>(result.target)
+                    if (descriptor === null) return []
+                    return option.Preset.getInteractionOptionsByTarget(descriptor)
+                },
+            },
+        ]
+
+        const result = await dialog({ title: builtinLanguage.get('preset.dialog.title'), options })
+        if (result.success === false) return
+
+        const inputs = {
+            [routinePreset.ElTable.submit.nodes.form]: executePreset.ElForm.getData.createExecuteInput({ form: result.value.form, validate: '1' }),
+            [routinePreset.ElTable.submit.nodes.branch]: executePreset.ElForm.branch.createExecuteInput({ primaryKey: 'id', }),
+            [routinePreset.ElTable.submit.nodes.create]: executePreset.ElForm.create.createExecuteInput({}),
+            [routinePreset.ElTable.submit.nodes.edit]: executePreset.ElForm.edit.createExecuteInput({}),
+            [routinePreset.ElTable.submit.nodes.createRequest]: _executePreset.net.request.createExecuteInput({
+                url: result.value.url,
+                type: _executePreset.net.request.RequestType.POST,
+                data: routinePreset.ElTable.submit.nodes.form,
+            }),
+            [routinePreset.ElTable.submit.nodes.editRequest]: _executePreset.net.request.createExecuteInput({
+                url: result.value.url,
+                type: _executePreset.net.request.RequestType.PUT,
+                data: routinePreset.ElTable.submit.nodes.form,
+            }),
+            [routinePreset.ElTable.submit.nodes.dialog]: executePreset.ElDialog.close.createExecuteInput({ dialog: result.value.dialog }),
+            [routinePreset.ElTable.submit.nodes.refresh]: _executePreset.graphics.invoke.createExecuteInput({
+                target: result.value.target,
+                interaction: result.value.interaction,
+            })
+        }
+        const config = { uuid: Generate.uuid(), type: 'click', url: routinePreset.ElTable.submit.url, inputs }
+        descriptor.interactions.push(config)
+    }
+}
+
+const closePreset: Preset = {
+    type: 'interaction',
+    label: language.get('preset.ElTable.close'),
+    value: 'preset.ElTable.close',
+    executor: async (descriptor: Descriptor) => {
+        const { dialogs } = getSelectOptions()
+
+        const options: DialogOptions = [
+            {
+                name: 'dialog',
+                label: language.get('preset.ElTable.close.dialog'),
+                componentType: 'select',
+                componentProps: {
+                    data: dialogs,
+                }
+            },
+        ]
+
+        const result = await dialog({ title: builtinLanguage.get('preset.dialog.title'), options, })
+        if (result.success === false) return
+
+        const inputs = {
+            [routinePreset.ElDialog.close.nodes.dialog]: executePreset.ElDialog.close.createExecuteInput({ dialog: result.value.dialog })
+        }
+        const config = { uuid: Generate.uuid(), type: 'click', url: routinePreset.ElDialog.close.url, inputs }
+        descriptor.interactions.push(config)
+    }
+}
+
+export {
+    listPreset,
+    resetPreset,
+    createPreset,
+    editPreset,
+    deletePreset,
+    submitPreset,
+    closePreset,
+}

package/src/preset/index.ts

@@ -0,0 +1,14 @@
+import { Preset } from '@vyr/runtime'
+import * as ElTable from './ElTable'
+
+const preset: Preset[] = [
+    ElTable.listPreset,
+    ElTable.resetPreset,
+    ElTable.createPreset,
+    ElTable.editPreset,
+    ElTable.deletePreset,
+    ElTable.submitPreset,
+    ElTable.closePreset,
+]
+
+export { preset }

package/src/service/global/index.ts

@@ -0,0 +1 @@
+export { scripts } from './scripts'

package/src/service/global/scripts/index.ts

@@ -0,0 +1,60 @@
+import { executePreset, language } from '@vyr/element-plus'
+
+const scripts = [
+    {
+        label: language.get(executePreset.ElForm.branch.scriptable as any),
+        value: executePreset.ElForm.branch.scriptable,
+    },
+    {
+        label: language.get(executePreset.ElForm.create.scriptable as any),
+        value: executePreset.ElForm.create.scriptable,
+    },
+    {
+        label: language.get(executePreset.ElForm.edit.scriptable as any),
+        value: executePreset.ElForm.edit.scriptable,
+    },
+    {
+        label: language.get(executePreset.ElForm.getData.scriptable as any),
+        value: executePreset.ElForm.getData.scriptable,
+    },
+    {
+        label: language.get(executePreset.ElForm.reset.scriptable as any),
+        value: executePreset.ElForm.reset.scriptable,
+    },
+    {
+        label: language.get(executePreset.ElPagination.getData.scriptable as any),
+        value: executePreset.ElPagination.getData.scriptable,
+    },
+    {
+        label: language.get(executePreset.ElPagination.reset.scriptable as any),
+        value: executePreset.ElPagination.reset.scriptable,
+    },
+    {
+        label: language.get(executePreset.ElTable.create.scriptable as any),
+        value: executePreset.ElTable.create.scriptable,
+    },
+    {
+        label: language.get(executePreset.ElTable.delete.scriptable as any),
+        value: executePreset.ElTable.delete.scriptable,
+    },
+    {
+        label: language.get(executePreset.ElTable.edit.scriptable as any),
+        value: executePreset.ElTable.edit.scriptable,
+    },
+    {
+        label: language.get(executePreset.ElTableColumn.formatter.scriptable as any),
+        value: executePreset.ElTableColumn.formatter.scriptable,
+    },
+    {
+        label: language.get(executePreset.ElDialog.open.scriptable as any),
+        value: executePreset.ElDialog.open.scriptable,
+    },
+    {
+        label: language.get(executePreset.ElDialog.close.scriptable as any),
+        value: executePreset.ElDialog.close.scriptable,
+    },
+]
+
+export {
+    scripts
+}

package/src/service/index.ts

@@ -0,0 +1,53 @@
+import { runtime, ShortcutkeyService, InspectorService, PresetService, DataService } from "@vyr/runtime";
+import { ElButtonDescriptor, ElCascaderDescriptor, ElCheckboxDescriptor, ElColDescriptor, ElDatePickerDescriptor, ElDialogDescriptor, ElFormDescriptor, ElInputDescriptor, ElInputNumberDescriptor, ElMenuDescriptor, ElMenuItemDescriptor, ElPaginationDescriptor, ElRadioDescriptor, ElRowDescriptor, ElSelectDescriptor, ElSubMenuDescriptor, ElSwitchDescriptor, ElTableColumnDescriptor, ElTableDescriptor } from '@vyr/element-plus'
+import { events } from "../common";
+import { language } from "../locale";
+import { preset } from '../preset'
+import * as global from './global'
+import inspectorViewer from './inspector'
+
+const setup = async () => {
+    const dataService = runtime.get<DataService>('data')
+    const inspectorService = runtime.get<InspectorService>('inspector')
+    const shortcutkeyService = runtime.get<ShortcutkeyService>('shortcutkey')
+
+    const sidebar = shortcutkeyService.get('sidebar')
+    const addComponent = sidebar.get('sidebar.addComponent')
+    if (addComponent) {
+        //@ts-ignore
+        const generate = addComponent.generate
+        addComponent.children.push(generate(language.get('descriptor.type.ElButton'), ElButtonDescriptor))
+        addComponent.children.push(generate(language.get('descriptor.type.ElForm'), ElFormDescriptor))
+        addComponent.children.push(generate(language.get('descriptor.type.ElInput'), ElInputDescriptor))
+        addComponent.children.push(generate(language.get('descriptor.type.ElInputNumber'), ElInputNumberDescriptor))
+        addComponent.children.push(generate(language.get('descriptor.type.ElSelect'), ElSelectDescriptor))
+        addComponent.children.push(generate(language.get('descriptor.type.ElCascader'), ElCascaderDescriptor))
+        addComponent.children.push(generate(language.get('descriptor.type.ElDatePicker'), ElDatePickerDescriptor))
+        addComponent.children.push(generate(language.get('descriptor.type.ElSwitch'), ElSwitchDescriptor))
+        addComponent.children.push(generate(language.get('descriptor.type.ElCheckbox'), ElCheckboxDescriptor))
+        addComponent.children.push(generate(language.get('descriptor.type.ElRadio'), ElRadioDescriptor))
+        addComponent.children.push(generate(language.get('descriptor.type.ElTable'), ElTableDescriptor))
+        addComponent.children.push(generate(language.get('descriptor.type.ElTableColumn'), ElTableColumnDescriptor))
+        addComponent.children.push(generate(language.get('descriptor.type.ElPagination'), ElPaginationDescriptor))
+        addComponent.children.push(generate(language.get('descriptor.type.ElRow'), ElRowDescriptor))
+        addComponent.children.push(generate(language.get('descriptor.type.ElCol'), ElColDescriptor))
+        addComponent.children.push(generate(language.get('descriptor.type.ElDialog'), ElDialogDescriptor))
+        addComponent.children.push(generate(language.get('descriptor.type.ElMenu'), ElMenuDescriptor))
+        addComponent.children.push(generate(language.get('descriptor.type.ElSubMenu'), ElSubMenuDescriptor))
+        addComponent.children.push(generate(language.get('descriptor.type.ElMenuItem'), ElMenuItemDescriptor))
+    }
+
+    const presetService = runtime.get<PresetService>('preset')
+    for (const event of events) {
+        for (const id of event.ids) presetService.addInteractionProvider({ id, label: language.get(`preset.Interaction.id.${id}` as any), ignore: event.ignore })
+    }
+    for (const item of preset) presetService.set(item)
+
+    for (const script of global.scripts) dataService.addScripte(script)
+
+    for (const viewer of inspectorViewer) {
+        inspectorService.set(viewer.type, viewer.import)
+    }
+}
+
+export { setup }

package/src/service/inspector/ElButton.vue

@@ -0,0 +1,98 @@
+<template>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.ElButton.type')">
+            <vyr-col>
+                <vyr-select v-model="descriptor.buttonType" :data="Button.typeOptions"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.ElButton.text')">
+            <vyr-col>
+                <vyr-input v-model="descriptor.text" :clearable="true" trigger="blur"></vyr-input>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.ElButton.size')">
+            <vyr-col>
+                <vyr-select v-model="descriptor.size" :data="Button.sizeOptions"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.ElButton.shape')">
+            <vyr-col>
+                <vyr-select v-model="currentShape" :data="Button.shapeOptions"
+                    @update:modelValue="changeShape"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.ElButton.state')">
+            <vyr-col>
+                <vyr-select v-model="currentState" :data="Button.stateOptions"
+                    @update:modelValue="changeState"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+    <vyr-row>
+        <vyr-label :label="language.get('inspector.ElButton.plain')">
+            <vyr-col>
+                <vyr-select v-model="descriptor.plain" :data="Button.plainOptions"></vyr-select>
+            </vyr-col>
+        </vyr-label>
+    </vyr-row>
+</template>
+
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { DraggableService, runtime } from '@vyr/runtime';
+import { VyrInput, VyrRow, VyrCol, VyrLabel, VyrSelect } from '@vyr/design';
+import { ElButtonDescriptor } from '@vyr/element-plus';
+import { language } from '../../locale'
+import { useDescriptor } from '../../common'
+import { Button } from '../../option'
+
+const descriptor = useDescriptor<ElButtonDescriptor>()
+const draggableService = runtime.get<DraggableService>('draggable')
+const draggable = draggableService.get(draggableService.key.inspector)
+
+const currentState = computed(() => {
+    if (descriptor.value.loading) return 2
+    return descriptor.value.disabled ? 3 : 1
+})
+const changeState = (state: number) => {
+    if (state === 3) {
+        descriptor.value.disabled = true
+        descriptor.value.loading = false
+    } else if (state === 2) {
+        descriptor.value.disabled = false
+        descriptor.value.loading = true
+    } else if (state === 1) {
+        descriptor.value.disabled = false
+        descriptor.value.loading = false
+    }
+}
+
+const currentShape = computed(() => {
+    if (descriptor.value.round) return 3
+    return descriptor.value.circle ? 2 : 1
+})
+
+const changeShape = (shape: number) => {
+    if (shape === 3) {
+        descriptor.value.round = true
+        descriptor.value.circle = false
+    } else if (shape === 2) {
+        descriptor.value.round = false
+        descriptor.value.circle = true
+    } else if (shape === 1) {
+        descriptor.value.round = false
+        descriptor.value.circle = false
+    }
+}
+</script>
+
+<style lang="less" scoped></style>