@vyr/element-plus 0.0.1

package/src/actor/ElRadioActor.ts

@@ -0,0 +1,46 @@
+import { h, resolveDynamicComponent, VNode } from "vue";
+import { DatasetDescriptor, UpdateArgs } from "@vyr/engine";
+import { VyrVueProps, VyrVueInstance, VyrVueChildren } from "@vyr/vue";
+import { ElRadioDescriptor } from "../descriptor";
+import { ElFormItemActor } from "./ElFormItemActor";
+
+class ElRadioActor extends ElFormItemActor {
+
+    getProps(descriptor: ElRadioDescriptor, args: UpdateArgs): VyrVueProps {
+        const props = super.getProps(descriptor, args)
+
+        return {
+            ...props,
+            disabled: descriptor.disabled,
+            border: descriptor.border,
+        }
+    }
+
+    getComponent() {
+        return resolveDynamicComponent('el-radio-group') as VNode
+    }
+
+    getContent(instance: VyrVueInstance, _children: VyrVueChildren, descriptor: ElRadioDescriptor) {
+        const children: VNode[] = []
+
+        const options = DatasetDescriptor.getCollection(descriptor.options)
+        if (options.length > 0) {
+            for (const option of options) {
+                const checkbox = resolveDynamicComponent('el-radio') as VNode
+                const labelAttr = { value: option[descriptor.value] }
+                children.push(h(checkbox, labelAttr, () => option[descriptor.label]))
+            }
+        }
+
+        const inputComponent = this.getComponent()
+        const inputAttrs = this.getComponentAttrs(instance, descriptor, descriptor.modelValue)
+        const inputVnode = h(inputComponent, inputAttrs, { default: () => children })
+        this.currentVnode = inputVnode
+
+        return this.getItemComponent(descriptor, inputVnode)
+    }
+}
+
+export {
+    ElRadioActor
+}

package/src/actor/ElRowActor.ts

@@ -0,0 +1,37 @@
+import { h, resolveDynamicComponent, VNode } from "vue";
+import { UpdateArgs } from "@vyr/engine";
+import { VueActor, VyrVueProps, VyrVueInstance, VyrVueChildren } from "@vyr/vue";
+import { ElRowDescriptor } from "../descriptor";
+
+class ElRowActor extends VueActor {
+
+    getProps(descriptor: ElRowDescriptor, args: UpdateArgs): VyrVueProps {
+        const props = super.getProps(descriptor, args)
+
+        return {
+            ...props,
+            gutter: descriptor.gutter,
+            justify: descriptor.justify,
+            align: descriptor.align,
+        }
+    }
+
+    getWrapperVNode(instance: VyrVueInstance, content: VNode) {
+        return content
+    }
+
+    getComponent() {
+        return resolveDynamicComponent('el-row') as VNode
+    }
+
+    getContent(instance: VyrVueInstance, children: VyrVueChildren, descriptor: ElRowDescriptor) {
+        const component = this.getComponent()
+        const attrs = this.getComponentAttrs(instance, descriptor)
+
+        return h(component, attrs, children)
+    }
+}
+
+export {
+    ElRowActor
+}

package/src/actor/ElSelectActor.ts

@@ -0,0 +1,49 @@
+import { h, resolveDynamicComponent, VNode } from "vue";
+import { DatasetDescriptor, UpdateArgs } from "@vyr/engine";
+import { VyrVueProps, VyrVueInstance, VyrVueChildren } from "@vyr/vue";
+import { ElSelectDescriptor } from "../descriptor";
+import { mergeStyle } from "../utils";
+import { ElFormItemActor } from "./ElFormItemActor";
+
+class ElSelectActor extends ElFormItemActor {
+
+    getProps(descriptor: ElSelectDescriptor, args: UpdateArgs): VyrVueProps {
+        const props = super.getProps(descriptor, args)
+
+        return {
+            ...props,
+            placeholder: descriptor.placeholder,
+            disabled: descriptor.disabled,
+            clearable: descriptor.clearable,
+        }
+    }
+
+    getComponent() {
+        return resolveDynamicComponent('el-select') as VNode
+    }
+
+    getContent(instance: VyrVueInstance, _children: VyrVueChildren, descriptor: ElSelectDescriptor) {
+        const children: VNode[] = []
+
+        const options = DatasetDescriptor.getCollection(descriptor.options)
+        if (options.length > 0) {
+            for (const option of options) {
+                const checkbox = resolveDynamicComponent('el-option') as VNode
+                const labelAttr = { label: option[descriptor.label], value: option[descriptor.value] }
+                children.push(h(checkbox, labelAttr, { default: () => [] }))
+            }
+        }
+
+        const inputComponent = this.getComponent()
+        const inputAttrs = this.getComponentAttrs(instance, descriptor, descriptor.modelValue)
+        mergeStyle({ 'min-width': '200px' }, inputAttrs)
+        const inputVnode = h(inputComponent, inputAttrs, { default: () => children })
+        this.currentVnode = inputVnode
+
+        return this.getItemComponent(descriptor, inputVnode)
+    }
+}
+
+export {
+    ElSelectActor
+}

package/src/actor/ElSubMenuActor.ts

@@ -0,0 +1,46 @@
+import { h, resolveDynamicComponent, VNode, Text } from "vue"
+import { Generate, UpdateArgs } from "@vyr/engine";
+import { VueActor, VyrVueChildren, VyrVueInstance } from "@vyr/vue";
+import { ElSubMenuDescriptor } from "../descriptor";
+
+class ElSubMenuActor extends VueActor {
+
+    getWrapper() {
+        return null
+    }
+
+    getProps(descriptor: ElSubMenuDescriptor, args: UpdateArgs) {
+        const props = super.getProps(descriptor, args)
+
+        return {
+            ...props,
+            index: descriptor.uuid,
+        }
+    }
+
+    getWrapperVNode(instance: VyrVueInstance, content: VNode) {
+        return content
+    }
+
+    getComponent() {
+        return resolveDynamicComponent('el-sub-menu') as VNode
+    }
+
+    getContent(instance: VyrVueInstance, children: VyrVueChildren, descriptor: ElSubMenuDescriptor) {
+        const component = this.getComponent()
+        const attrs = this.getComponentAttrs(instance, descriptor)
+
+        if (descriptor.label) {
+            const title = h(Text, descriptor.label)
+            children.title = () => title
+        }
+
+        const content = h(component, { ...attrs, key: Generate.uuid() }, children)
+
+        return content
+    }
+}
+
+export {
+    ElSubMenuActor
+}

package/src/actor/ElSwitchActor.ts

@@ -0,0 +1,26 @@
+import { resolveDynamicComponent, VNode } from "vue";
+import { UpdateArgs } from "@vyr/engine";
+import { VyrVueProps } from "@vyr/vue";
+import { ElSwitchDescriptor } from "../descriptor";
+import { ElFormItemActor } from "./ElFormItemActor";
+
+class ElSwitchActor extends ElFormItemActor {
+
+    getProps(descriptor: ElSwitchDescriptor, args: UpdateArgs): VyrVueProps {
+        const props = super.getProps(descriptor, args)
+
+        return {
+            ...props,
+            disabled: descriptor.disabled,
+            loading: descriptor.loading,
+        }
+    }
+
+    getComponent() {
+        return resolveDynamicComponent('el-switch') as VNode
+    }
+}
+
+export {
+    ElSwitchActor
+}

package/src/actor/ElTableActor.ts

@@ -0,0 +1,35 @@
+import { h, resolveDynamicComponent, VNode } from "vue";
+import { UpdateArgs } from "@vyr/engine";
+import { VueActor, VyrVueProps, VyrVueInstance, VyrVueChildren } from "@vyr/vue";
+import { ElTableDescriptor } from "../descriptor";
+
+class ElTableActor extends VueActor {
+
+    getProps(descriptor: ElTableDescriptor, args: UpdateArgs): VyrVueProps {
+        const props = super.getProps(descriptor, args)
+
+        return {
+            ...props,
+            data: descriptor.data,
+            border: descriptor.border,
+            stripe: descriptor.stripe,
+            fit: descriptor.fit,
+            showHeader: descriptor.showHeader,
+        }
+    }
+
+    getComponent() {
+        return resolveDynamicComponent('el-table') as VNode
+    }
+
+    getContent(instance: VyrVueInstance, children: VyrVueChildren, descriptor: ElTableDescriptor) {
+        const component = this.getComponent()
+        const attrs = this.getComponentAttrs(instance, descriptor)
+
+        return h(component, attrs, children)
+    }
+}
+
+export {
+    ElTableActor
+}

package/src/actor/ElTableColumnActor.ts

@@ -0,0 +1,72 @@
+import { TableColumnCtx } from "element-plus";
+import { h, resolveDynamicComponent, VNode } from "vue"
+import { Asset, Generate, Scriptable, UpdateArgs } from "@vyr/engine";
+import { VueActor, VyrVueChildren, VyrVueInstance } from "@vyr/vue";
+import { ElTableColumnDescriptor } from "../descriptor";
+import { executePreset } from '../preset'
+
+class ElTableColumnActor extends VueActor {
+
+    getWrapper() {
+        return null
+    }
+
+    useFormatter(descriptor: ElTableColumnDescriptor) {
+        return (row: any, column: TableColumnCtx<any>, cellValue: any, index: number) => {
+            const formattingScript = Asset.get<Scriptable>(descriptor.formattingScript)
+            if (formattingScript) {
+                const graphics = VueActor.getGraphics(this)
+                const input = executePreset.ElTableColumn.formatter.createExecuteInput({ dataset: descriptor.formattingDataset })
+                const previous = 'cellValue'
+                const args = {
+                    delta: 0,
+                    trigger: descriptor,
+                    input: { previous, default: input, user: input, },
+                    result: new Map(),
+                }
+                args.result.set(previous, cellValue)
+                const formatValue = formattingScript.execute(descriptor, graphics, args)
+
+                return formatValue ?? cellValue
+            }
+            return cellValue
+        }
+    }
+
+    getProps(descriptor: ElTableColumnDescriptor, args: UpdateArgs) {
+        const props = super.getProps(descriptor, args)
+
+        return {
+            ...props,
+            formatter: this.useFormatter(descriptor),
+            type: descriptor.columnType,
+            prop: descriptor.columnName,
+            label: descriptor.columnComment,
+            width: descriptor.columnWidth,
+            fixed: descriptor.columnFixed,
+            align: descriptor.columnAlign,
+            showOverflowTooltip: descriptor.columnTooltip,
+        }
+    }
+
+    getWrapperVNode(instance: VyrVueInstance, content: VNode) {
+        return content
+    }
+
+    getComponent() {
+        return resolveDynamicComponent('el-table-column') as VNode
+    }
+
+    getContent(instance: VyrVueInstance, children: VyrVueChildren, descriptor: ElTableColumnDescriptor) {
+        const component = this.getComponent()
+        const attrs = this.getComponentAttrs(instance, descriptor)
+
+        const content = h(component, { ...attrs, key: Generate.uuid() }, this.getSlots(children))
+
+        return content
+    }
+}
+
+export {
+    ElTableColumnActor
+}

package/src/actor/index.ts

@@ -0,0 +1,20 @@
+export * from './ElButtonActor'
+export * from './ElRowActor'
+export * from './ElColActor'
+export * from './ElFormActor'
+export * from './ElFormItemActor'
+export * from './ElInputActor'
+export * from './ElInputNumberActor'
+export * from './ElSelectActor'
+export * from './ElCascaderActor'
+export * from './ElCheckboxActor'
+export * from './ElDatePickerActor'
+export * from './ElRadioActor'
+export * from './ElSwitchActor'
+export * from './ElTableColumnActor'
+export * from './ElTableActor'
+export * from './ElDialogActor'
+export * from './ElPaginationActor'
+export * from './ElMenuActor'
+export * from './ElSubMenuActor'
+export * from './ElMenuItemActor'

package/src/asset/index.ts

@@ -0,0 +1,17 @@
+import { AssetGraph, Category, Descriptor, Port } from "@vyr/engine";
+import { ElCascaderDescriptor, ElCheckboxDescriptor, ElRadioDescriptor, ElSelectDescriptor, ElTableColumnDescriptor } from "../descriptor";
+
+const ElFormByOptionsDescriptorProvider = (descriptor: { options: string } & Descriptor, port: Port) => {
+    if (descriptor.options) port.edges.push({ key: 'options', category: Category.dataset, asset: descriptor.options })
+}
+
+const ElTableColumnDescriptorProvider = (descriptor: ElTableColumnDescriptor, port: Port) => {
+    if (descriptor.formattingDataset) port.edges.push({ key: 'formattingDataset', category: Category.dataset, asset: descriptor.formattingDataset })
+    if (descriptor.formattingScript) port.edges.push({ key: 'formattingScript', category: Category.ts, asset: descriptor.formattingScript })
+}
+
+AssetGraph.register(ElCascaderDescriptor.type, ElFormByOptionsDescriptorProvider)
+AssetGraph.register(ElCheckboxDescriptor.type, ElFormByOptionsDescriptorProvider)
+AssetGraph.register(ElRadioDescriptor.type, ElFormByOptionsDescriptorProvider)
+AssetGraph.register(ElSelectDescriptor.type, ElFormByOptionsDescriptorProvider)
+AssetGraph.register(ElTableColumnDescriptor.type, ElTableColumnDescriptorProvider)

package/src/descriptor/ElButtonDescriptor.ts

@@ -0,0 +1,36 @@
+import { DeserializationObject } from "@vyr/engine";
+import { VueDescriptor } from "@vyr/vue";
+
+class ElButtonDescriptor extends VueDescriptor {
+    static type = 'ElButton'
+
+    buttonType: 'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger'
+    plain: boolean
+    circle: boolean
+    round: boolean
+    size: 'large' | 'small' | 'default'
+    textMode: boolean
+    text: string
+
+    disabled: boolean
+    loading: boolean
+
+    constructor(descriptor: Partial<DeserializationObject<ElButtonDescriptor>> = {}) {
+        super(descriptor)
+        this.display = descriptor.display ?? 'inline-block'
+        this.buttonType = descriptor.buttonType ?? 'default'
+        this.plain = descriptor.plain ?? false
+        this.circle = descriptor.circle ?? false
+        this.round = descriptor.round ?? false
+        this.size = descriptor.size ?? 'default'
+        this.textMode = descriptor.textMode ?? false
+        this.text = descriptor.text ?? ''
+        this.disabled = descriptor.disabled ?? false
+        this.loading = descriptor.loading ?? false
+    }
+}
+VueDescriptor.register(ElButtonDescriptor)
+
+export {
+    ElButtonDescriptor
+}

package/src/descriptor/ElCascaderDescriptor.ts

@@ -0,0 +1,43 @@
+import { DeserializationObject } from "@vyr/engine";
+import { VueDescriptor } from "@vyr/vue";
+import { ElFormItemDescriptor } from "./ElFormItemDescriptor";
+
+class ElCascaderDescriptor extends ElFormItemDescriptor {
+    static type = 'ElCascader'
+
+    columnName: string
+    columnComment: string
+    columnType: string
+    modelValue: string
+    labelWidth: string | number
+    placeholder: string
+    required: boolean
+
+    options: string
+    label: string
+    value: string
+    clearable: boolean
+    disabled: boolean
+
+    constructor(descriptor: Partial<DeserializationObject<ElCascaderDescriptor>> = {}) {
+        super(descriptor)
+        this.columnName = descriptor.columnName ?? ''
+        this.columnComment = descriptor.columnComment ?? ''
+        this.columnType = descriptor.columnType ?? ''
+        this.modelValue = descriptor.modelValue ?? ''
+        this.labelWidth = descriptor.labelWidth ?? ''
+        this.placeholder = descriptor.placeholder ?? ''
+        this.required = descriptor.required ?? false
+
+        this.options = descriptor.options ?? ''
+        this.label = descriptor.label ?? 'label'
+        this.value = descriptor.value ?? 'value'
+        this.clearable = descriptor.clearable ?? false
+        this.disabled = descriptor.disabled ?? false
+    }
+}
+VueDescriptor.register(ElCascaderDescriptor)
+
+export {
+    ElCascaderDescriptor
+}

package/src/descriptor/ElCheckboxDescriptor.ts

@@ -0,0 +1,41 @@
+import { DeserializationObject } from "@vyr/engine";
+import { VueDescriptor } from "@vyr/vue";
+import { ElFormItemDescriptor } from "./ElFormItemDescriptor";
+
+class ElCheckboxDescriptor extends ElFormItemDescriptor {
+    static type = 'ElCheckbox'
+
+    columnName: string
+    columnComment: string
+    columnType: string
+    modelValue: string
+    labelWidth: string | number
+    required: boolean
+
+    options: string
+    label: string
+    value: string
+    disabled: boolean
+    border: boolean
+
+    constructor(descriptor: Partial<DeserializationObject<ElCheckboxDescriptor>> = {}) {
+        super(descriptor)
+        this.columnName = descriptor.columnName ?? ''
+        this.columnComment = descriptor.columnComment ?? ''
+        this.columnType = descriptor.columnType ?? ''
+        this.modelValue = descriptor.modelValue ?? ''
+        this.labelWidth = descriptor.labelWidth ?? ''
+        this.required = descriptor.required ?? false
+
+        this.options = descriptor.options ?? ''
+        this.label = descriptor.label ?? 'label'
+        this.value = descriptor.value ?? 'value'
+        this.disabled = descriptor.disabled ?? false
+        this.border = descriptor.border ?? false
+    }
+}
+VueDescriptor.register(ElCheckboxDescriptor)
+
+export {
+    ElCheckboxDescriptor
+}

package/src/descriptor/ElColDescriptor.ts

@@ -0,0 +1,20 @@
+import { DeserializationObject } from "@vyr/engine";
+import { VueDescriptor } from "@vyr/vue";
+
+class ElColDescriptor extends VueDescriptor {
+    static type = 'ElCol'
+
+    span: number
+    offset: number
+
+    constructor(descriptor: Partial<DeserializationObject<ElColDescriptor>> = {}) {
+        super(descriptor)
+        this.span = descriptor.span ?? 24
+        this.offset = descriptor.offset ?? 0
+    }
+}
+VueDescriptor.register(ElColDescriptor)
+
+export {
+    ElColDescriptor
+}

package/src/descriptor/ElDatePickerDescriptor.ts

@@ -0,0 +1,43 @@
+import { DeserializationObject } from "@vyr/engine";
+import { VueDescriptor } from "@vyr/vue";
+import { ElFormItemDescriptor } from "./ElFormItemDescriptor";
+
+class ElDatePickerDescriptor extends ElFormItemDescriptor {
+    static type = 'ElDatePicker'
+
+    columnName: string
+    columnComment: string
+    columnType: string
+    modelValue: string
+    labelWidth: string | number
+    placeholder: string
+    required: boolean
+
+    dateType: string
+    readonly: boolean
+    disabled: boolean
+    clearable: boolean
+    format: string
+
+    constructor(descriptor: Partial<DeserializationObject<ElDatePickerDescriptor>> = {}) {
+        super(descriptor)
+        this.columnName = descriptor.columnName ?? ''
+        this.columnComment = descriptor.columnComment ?? ''
+        this.columnType = descriptor.columnType ?? ''
+        this.modelValue = descriptor.modelValue ?? ''
+        this.labelWidth = descriptor.labelWidth ?? ''
+        this.placeholder = descriptor.placeholder ?? ''
+        this.required = descriptor.required ?? false
+
+        this.dateType = descriptor.dateType ?? 'datetime'
+        this.readonly = descriptor.readonly ?? false
+        this.disabled = descriptor.disabled ?? false
+        this.clearable = descriptor.clearable ?? false
+        this.format = descriptor.format ?? 'YYYY-MM-DD HH:mm:ss'
+    }
+}
+VueDescriptor.register(ElDatePickerDescriptor)
+
+export {
+    ElDatePickerDescriptor
+}

package/src/descriptor/ElDialogDescriptor.ts

@@ -0,0 +1,24 @@
+import { DeserializationObject } from "@vyr/engine";
+import { VueDescriptor } from "@vyr/vue";
+
+class ElDialogDescriptor extends VueDescriptor {
+    static type = 'ElDialog'
+
+    title: string
+    closeOnClickModal: boolean
+
+    constructor(descriptor: Partial<DeserializationObject<ElDialogDescriptor>> = {}) {
+        super(descriptor)
+        if (descriptor.width === undefined) {
+            this.width = 50
+            this.wUnit = '%'
+        }
+        this.title = descriptor.title ?? ''
+        this.closeOnClickModal = descriptor.closeOnClickModal ?? false
+    }
+}
+VueDescriptor.register(ElDialogDescriptor)
+
+export {
+    ElDialogDescriptor
+}

package/src/descriptor/ElFormDescriptor.ts

@@ -0,0 +1,60 @@
+import { DeserializationObject, Graphics } from "@vyr/engine";
+import { VueDescriptor } from "@vyr/vue";
+import { ElFormActor, ElFormItemActor } from "../actor";
+import { ElFormItemDescriptor } from "./ElFormItemDescriptor";
+
+interface ElFormGetDataArgs {
+    form: string
+}
+
+class ElFormDescriptor extends VueDescriptor {
+    static type = 'ElForm'
+    labelWidth: string | number
+    labelPosition: string
+    inline: boolean
+    disabled: boolean
+
+    constructor(descriptor: Partial<DeserializationObject<ElFormDescriptor>> = {}) {
+        super(descriptor)
+        this.inline = descriptor.inline ?? false
+        this.labelPosition = descriptor.labelPosition ?? 'right'
+        this.labelWidth = descriptor.labelWidth ?? ''
+        this.disabled = descriptor.disabled ?? false
+    }
+
+    async validate(graphics: Graphics) {
+        const formActor = graphics.getActor<ElFormActor>(this, { delta: 0 })
+        if (formActor && formActor.methods) {
+            return await formActor.methods.validate()
+        }
+
+        return false
+    }
+
+    async resets(graphics: Graphics) {
+        const formActor = graphics.getActor<ElFormActor>(this, { delta: 0 })
+        if (formActor && formActor.methods) {
+            await formActor.methods.resetFields()
+        }
+    }
+
+    async getData(graphics: Graphics) {
+        const data: { [k: string]: any } = {}
+
+        for (const sub of this.children) {
+            if (sub instanceof ElFormItemDescriptor) {
+                const itemActor = graphics.getActor<ElFormItemActor>(sub, { delta: 0 })
+                if (itemActor === null) continue
+                data[sub.columnName] = itemActor.getModelValue()
+            }
+        }
+
+        return data
+    }
+}
+VueDescriptor.register(ElFormDescriptor)
+
+export {
+    ElFormDescriptor,
+    ElFormGetDataArgs,
+}

package/src/descriptor/ElFormItemDescriptor.ts

@@ -0,0 +1,14 @@
+import { Asset, DatasetDescriptor } from "@vyr/engine";
+import { VueDescriptor } from "@vyr/vue";
+
+abstract class ElFormItemDescriptor extends VueDescriptor {
+    abstract modelValue?: string | boolean | number
+    abstract columnName: string
+    abstract columnComment: string
+    abstract columnType: string
+    abstract required: boolean
+}
+
+export {
+    ElFormItemDescriptor
+}