@vyr/element-plus 0.0.1

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@vyr/element-plus",
+  "version": "0.0.1",
+  "description": "",
+  "main": "./src/index.ts",
+  "author": "",
+  "sideEffects": true,
+  "license": "MIT",
+  "dependencies": {
+    "@vyr/locale": "0.0.1",
+    "@vyr/engine": "0.0.1",
+    "@vyr/vue": "0.0.1",
+    "element-plus": "2.10.1",
+    "vue": "3.5.22"
+  },
+  "files": [
+    "package.json",
+    "src/"
+  ],
+  "vyr": {
+    "type": "universal",
+    "order": 11
+  }
+}

package/src/actor/ElButtonActor.ts

@@ -0,0 +1,42 @@
+import { h, resolveDynamicComponent, Text, VNode } from "vue";
+import { UpdateArgs } from "@vyr/engine";
+import { VueActor, VyrVueProps, VyrVueInstance, VyrVueChildren } from "@vyr/vue";
+import { ElButtonDescriptor } from "../descriptor";
+import { mergeStyle } from "../utils";
+
+class ElButtonActor extends VueActor {
+
+    getProps(descriptor: ElButtonDescriptor, args: UpdateArgs): VyrVueProps {
+        const props = super.getProps(descriptor, args)
+
+        return {
+            ...props,
+            type: descriptor.buttonType,
+            plain: descriptor.plain,
+            circle: descriptor.circle,
+            round: descriptor.round,
+            size: descriptor.size,
+            text: descriptor.textMode,
+            disabled: descriptor.disabled,
+            loading: descriptor.loading,
+        }
+    }
+
+    getComponent() {
+        return resolveDynamicComponent('el-button') as VNode
+    }
+
+    getContent(instance: VyrVueInstance, children: VyrVueChildren, descriptor: ElButtonDescriptor) {
+        const component = this.getComponent()
+        const attrs = this.getComponentAttrs(instance, descriptor)
+        mergeStyle({ width: '100%' }, attrs)
+
+        if (descriptor.text) children.default().push(h(Text, descriptor.text))
+
+        return h(component, attrs, children)
+    }
+}
+
+export {
+    ElButtonActor
+}

package/src/actor/ElCascaderActor.ts

@@ -0,0 +1,43 @@
+import { resolveDynamicComponent, VNode, h } from "vue";
+import { DatasetDescriptor, UpdateArgs } from "@vyr/engine";
+import { VyrVueProps, VyrVueInstance, VyrVueChildren } from "@vyr/vue";
+import { ElCascaderDescriptor } from "../descriptor";
+import { mergeStyle } from "../utils";
+import { ElFormItemActor } from "./ElFormItemActor";
+
+class ElCascaderActor extends ElFormItemActor {
+
+    getProps(descriptor: ElCascaderDescriptor, args: UpdateArgs): VyrVueProps {
+        const props = super.getProps(descriptor, args)
+
+        return {
+            ...props,
+            placeholder: descriptor.placeholder,
+            props: {
+                label: descriptor.label,
+                value: descriptor.value,
+            },
+            clearable: descriptor.clearable,
+            disabled: descriptor.disabled,
+        }
+    }
+
+    getComponent() {
+        return resolveDynamicComponent('el-cascader') as VNode
+    }
+
+    getContent(instance: VyrVueInstance, children: VyrVueChildren, descriptor: ElCascaderDescriptor) {
+        const options = DatasetDescriptor.getCollection(descriptor.options)
+        const inputComponent = this.getComponent()
+        const inputAttrs = this.getComponentAttrs(instance, descriptor, this.getArrayByJoinValue(descriptor.modelValue))
+        mergeStyle({ width: '100%', 'min-width': '200px' }, inputAttrs)
+        const inputVnode = h(inputComponent, { ...inputAttrs, options }, { default: () => [] })
+        this.currentVnode = inputVnode
+
+        return this.getItemComponent(descriptor, inputVnode)
+    }
+}
+
+export {
+    ElCascaderActor
+}

package/src/actor/ElCheckboxActor.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 { ElCheckboxDescriptor } from "../descriptor";
+import { ElFormItemActor } from "./ElFormItemActor";
+
+class ElCheckboxActor extends ElFormItemActor {
+
+    getProps(descriptor: ElCheckboxDescriptor, args: UpdateArgs): VyrVueProps {
+        const props = super.getProps(descriptor, args)
+
+        return {
+            ...props,
+            disabled: descriptor.disabled,
+            border: descriptor.border,
+        }
+    }
+
+    getComponent() {
+        return resolveDynamicComponent('el-checkbox-group') as VNode
+    }
+
+    getContent(instance: VyrVueInstance, _children: VyrVueChildren, descriptor: ElCheckboxDescriptor) {
+        const children: VNode[] = []
+
+        const options = DatasetDescriptor.getCollection(descriptor.options)
+        if (options.length > 0) {
+            for (const option of options) {
+                const checkbox = resolveDynamicComponent('el-checkbox') as VNode
+                const labelAttrs = { value: option[descriptor.value] }
+                children.push(h(checkbox, labelAttrs, () => option[descriptor.label]))
+            }
+        }
+
+        const inputComponent = this.getComponent()
+        const inputAttrs = this.getComponentAttrs(instance, descriptor, this.getArrayByJoinValue(descriptor.modelValue))
+        const inputVnode = h(inputComponent, inputAttrs, { default: () => children })
+        this.currentVnode = inputVnode
+
+        return this.getItemComponent(descriptor, inputVnode)
+    }
+}
+
+export {
+    ElCheckboxActor
+}

package/src/actor/ElColActor.ts

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

package/src/actor/ElDatePickerActor.ts

@@ -0,0 +1,42 @@
+import { h, resolveDynamicComponent, VNode } from "vue";
+import { UpdateArgs } from "@vyr/engine";
+import { VyrVueProps, VyrVueInstance, VyrVueChildren } from "@vyr/vue";
+import { ElDatePickerDescriptor } from "../descriptor";
+import { mergeStyle } from "../utils";
+import { ElFormItemActor } from "./ElFormItemActor";
+
+class ElDatePickerActor extends ElFormItemActor {
+
+    getProps(descriptor: ElDatePickerDescriptor, args: UpdateArgs): VyrVueProps {
+        const props = super.getProps(descriptor, args)
+
+        return {
+            ...props,
+            type: descriptor.dateType,
+            placeholder: descriptor.placeholder,
+            readonly: descriptor.readonly,
+            disabled: descriptor.disabled,
+            clearable: descriptor.clearable,
+            format: descriptor.format,
+            valueFormat: descriptor.format,
+        }
+    }
+
+    getComponent() {
+        return resolveDynamicComponent('el-datePicker') as VNode
+    }
+
+    getContent(instance: VyrVueInstance, children: VyrVueChildren, descriptor: ElDatePickerDescriptor) {
+        const inputComponent = this.getComponent()
+        const inputAttrs = this.getComponentAttrs(instance, descriptor, descriptor.modelValue)
+        mergeStyle({ width: '100%', 'min-width': '200px' }, inputAttrs)
+        const inputVnode = h(inputComponent, inputAttrs, { default: () => [] })
+        this.currentVnode = inputVnode
+
+        return this.getItemComponent(descriptor, inputVnode)
+    }
+}
+
+export {
+    ElDatePickerActor
+}

package/src/actor/ElDialogActor.ts

@@ -0,0 +1,38 @@
+import { h, resolveDynamicComponent, VNode } from "vue";
+import { UpdateArgs } from "@vyr/engine";
+import { VueActor, VyrVueProps, VyrVueInstance, VyrVueChildren } from "@vyr/vue";
+import { ElDialogDescriptor } from "../descriptor"
+
+class ElDialogActor extends VueActor {
+
+    getProps(descriptor: ElDialogDescriptor, args: UpdateArgs): VyrVueProps {
+        const props = super.getProps(descriptor, args)
+
+        return {
+            ...props,
+            title: descriptor.title,
+            modelValue: descriptor.visible,
+            width: descriptor.width + descriptor.wUnit,
+            closeOnClickModal: descriptor.closeOnClickModal,
+            onClose() {
+                descriptor.visible = false
+                descriptor.setNeedsUpdate()
+            }
+        }
+    }
+
+    getComponent() {
+        return resolveDynamicComponent('el-dialog') as VNode
+    }
+
+    getContent(instance: VyrVueInstance, children: VyrVueChildren, descriptor: ElDialogDescriptor) {
+        const component = this.getComponent()
+        const attrs = this.getComponentAttrs(instance, descriptor)
+
+        return h(component, attrs, children)
+    }
+}
+
+export {
+    ElDialogActor
+}

package/src/actor/ElFormActor.ts

@@ -0,0 +1,46 @@
+import { h, resolveDynamicComponent, VNode, getCurrentInstance } from "vue";
+import { UpdateArgs } from "@vyr/engine";
+import { VueActor, VyrVueProps, VyrVueInstance, VyrVueChildren } from "@vyr/vue";
+import { ElFormDescriptor } from "../descriptor";
+
+class ElFormActor extends VueActor {
+
+    methods!: any
+
+    getProps(descriptor: ElFormDescriptor, args: UpdateArgs): VyrVueProps {
+        const props = super.getProps(descriptor, args)
+
+        return {
+            ...props,
+            model: {},
+            labelWidth: descriptor.labelWidth,
+            labelPosition: descriptor.labelPosition,
+            inline: descriptor.inline,
+            disabled: descriptor.disabled,
+        }
+    }
+
+    getComponent() {
+        return resolveDynamicComponent('el-form') as VNode
+    }
+
+    getContent(instance: VyrVueInstance, children: VyrVueChildren, descriptor: ElFormDescriptor) {
+        const self = this
+        const component = this.getComponent()
+
+        const attrs = this.getComponentAttrs(instance, descriptor)
+
+        const formComponent = {
+            ...component,
+            mounted() {
+                self.methods = getCurrentInstance()?.exposed ?? null
+            }
+        }
+
+        return h(formComponent, attrs, children)
+    }
+}
+
+export {
+    ElFormActor
+}

package/src/actor/ElFormItemActor.ts

@@ -0,0 +1,81 @@
+import { h, resolveDynamicComponent, VNode } from "vue";
+import { VueActor, VyrVueProps, VyrVueInstance, VyrVueChildren } from "@vyr/vue";
+import { ElFormDescriptor, ElFormItemDescriptor } from "../descriptor";
+import { getValidators, mergeStyle } from "../utils";
+
+abstract class ElFormItemActor extends VueActor {
+    private _modelValue: string | number | boolean | null = null
+    protected currentVnode!: VNode
+
+    getItemComponentAttrs(descriptor: ElFormItemDescriptor) {
+        const rules = getValidators(descriptor, this)
+        const props: VyrVueProps = {
+            rules,
+            prop: descriptor.columnName,
+            label: descriptor.columnComment,
+            style: {
+                'margin-bottom': '0',
+            }
+        }
+        return props
+    }
+
+    getItemComponent(descriptor: ElFormItemDescriptor, inputVnode: VNode) {
+        const ItemComponent = resolveDynamicComponent('el-form-item') as VNode
+        const attrs = this.getItemComponentAttrs(descriptor)
+        const { parent } = descriptor.traceAncestor(false)
+        if (parent instanceof ElFormDescriptor) {
+            if (parent.inline) {
+                let width = parseInt(parent.labelWidth.toString())
+                if (isNaN(width)) width = 80
+                mergeStyle({ width: width + 200 + 'px' }, attrs)
+            }
+        }
+        return h(ItemComponent, attrs, () => inputVnode)
+    }
+
+    getComponentAttrs(instance: VyrVueInstance, descriptor: ElFormItemDescriptor, modelValue?: any) {
+        const self = this
+        const formatValue = self.formatModelValue(modelValue)
+        self._modelValue = formatValue
+        return {
+            ...super.getComponentAttrs(instance, descriptor),
+            modelValue: modelValue,
+            'onUpdate:modelValue'(value: string) {
+                if (self.currentVnode.props) self.currentVnode.props.modelValue = value
+                if (self.currentVnode.component === undefined || self.currentVnode.component === null) return
+                self.currentVnode.component.props.modelValue = value
+                self._modelValue = self.formatModelValue(value)
+            }
+        }
+    }
+
+    getContent(instance: VyrVueInstance, children: VyrVueChildren, descriptor: ElFormItemDescriptor) {
+        const inputComponent = this.getComponent()
+        const inputAttrs = this.getComponentAttrs(instance, descriptor, descriptor.modelValue)
+        const inputVnode = h(inputComponent, inputAttrs, children)
+        this.currentVnode = inputVnode
+
+        return this.getItemComponent(descriptor, inputVnode)
+    }
+
+    formatModelValue(modelValue: string | null = null) {
+        return Array.isArray(modelValue) ? modelValue.filter(item => item !== '').join(',') : modelValue
+    }
+
+    getArrayByJoinValue(modelValue?: string) {
+        if (modelValue === undefined) return []
+
+        if (typeof modelValue !== 'string') return [modelValue]
+
+        return modelValue.split(',').filter(item => item !== "")
+    }
+
+    getModelValue() {
+        return this._modelValue
+    }
+}
+
+export {
+    ElFormItemActor
+}

package/src/actor/ElInputActor.ts

@@ -0,0 +1,47 @@
+import { h, resolveDynamicComponent, VNode } from "vue";
+import { UpdateArgs } from "@vyr/engine";
+import { VyrVueChildren, VyrVueInstance } from "@vyr/vue";
+import { ElInputDescriptor } from "../descriptor";
+import { mergeStyle } from "../utils";
+import { ElFormItemActor } from "./ElFormItemActor";
+
+class ElInputActor extends ElFormItemActor {
+
+    getProps(descriptor: ElInputDescriptor, args: UpdateArgs) {
+        const props = super.getProps(descriptor, args)
+
+        return {
+            ...props,
+            type: descriptor.inputType,
+            placeholder: descriptor.placeholder,
+            rows: descriptor.rows,
+            step: descriptor.step,
+            readonly: descriptor.readonly,
+            clearable: descriptor.clearable,
+            showPassword: descriptor.showPassword,
+            showWordLimit: descriptor.showWordLimit,
+            disabled: descriptor.disabled,
+            autofocus: descriptor.autofocus,
+            maxlength: descriptor.maxlength,
+            minlength: descriptor.minlength,
+        }
+    }
+
+    getComponent() {
+        return resolveDynamicComponent('el-input') as VNode
+    }
+
+    getContent(instance: VyrVueInstance, children: VyrVueChildren, descriptor: ElInputDescriptor) {
+        const inputComponent = this.getComponent()
+        const inputAttrs = this.getComponentAttrs(instance, descriptor, descriptor.modelValue)
+        mergeStyle({ width: '100%' }, inputAttrs)
+        const inputVnode = h(inputComponent, inputAttrs, children)
+        this.currentVnode = inputVnode
+
+        return this.getItemComponent(descriptor, inputVnode)
+    }
+}
+
+export {
+    ElInputActor
+}

package/src/actor/ElInputNumberActor.ts

@@ -0,0 +1,38 @@
+import { h, resolveDynamicComponent, VNode } from "vue";
+import { UpdateArgs } from "@vyr/engine";
+import { VyrVueProps, VyrVueInstance, VyrVueChildren } from "@vyr/vue";
+import { ElInputNumberDescriptor } from "../descriptor";
+import { mergeStyle } from "../utils";
+import { ElFormItemActor } from "./ElFormItemActor";
+
+class ElInputNumberActor extends ElFormItemActor {
+    getProps(descriptor: ElInputNumberDescriptor, args: UpdateArgs): VyrVueProps {
+        const props = super.getProps(descriptor, args)
+
+        return {
+            ...props,
+            min: descriptor.min,
+            max: descriptor.max,
+            step: descriptor.step,
+            disabled: descriptor.disabled,
+        }
+    }
+
+    getComponent() {
+        return resolveDynamicComponent('el-input-number') as VNode
+    }
+
+    getContent(instance: VyrVueInstance, children: VyrVueChildren, descriptor: ElInputNumberDescriptor) {
+        const inputComponent = this.getComponent()
+        const inputAttrs = this.getComponentAttrs(instance, descriptor, descriptor.modelValue || null)
+        mergeStyle({ width: '100%', 'min-width': '200px' }, inputAttrs)
+        const inputVnode = h(inputComponent, inputAttrs, children)
+        this.currentVnode = inputVnode
+
+        return this.getItemComponent(descriptor, inputVnode)
+    }
+}
+
+export {
+    ElInputNumberActor
+}

package/src/actor/ElMenuActor.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 { ElMenuDescriptor } from "../descriptor";
+
+class ElMenuActor extends VueActor {
+
+    getProps(descriptor: ElMenuDescriptor, args: UpdateArgs): VyrVueProps {
+        const props = super.getProps(descriptor, args)
+
+        return {
+            ...props,
+            mode: descriptor.mode,
+            defaultActive: descriptor.defaultActive,
+            backgroundColor: descriptor.backgroundColor.getColor(),
+            textColor: descriptor.textColor,
+            activeTextColor: descriptor.activeTextColor,
+        }
+    }
+
+    getComponent() {
+        return resolveDynamicComponent('el-menu') as VNode
+    }
+
+    getContent(instance: VyrVueInstance, children: VyrVueChildren, descriptor: ElMenuDescriptor) {
+        const component = this.getComponent()
+        const attrs = this.getComponentAttrs(instance, descriptor)
+
+        return h(component, attrs, children)
+    }
+}
+
+export {
+    ElMenuActor
+}

package/src/actor/ElMenuItemActor.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 { ElMenuItemDescriptor } from "../descriptor";
+
+class ElMenuItemActor extends VueActor {
+
+    getWrapper() {
+        return null
+    }
+
+    getProps(descriptor: ElMenuItemDescriptor, args: UpdateArgs) {
+        const props = super.getProps(descriptor, args)
+
+        return {
+            ...props,
+            index: descriptor.uuid,
+        }
+    }
+
+    getWrapperVNode(instance: VyrVueInstance, content: VNode) {
+        return content
+    }
+
+    getComponent() {
+        return resolveDynamicComponent('el-menu-item') as VNode
+    }
+
+    getContent(instance: VyrVueInstance, children: VyrVueChildren, descriptor: ElMenuItemDescriptor) {
+        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 {
+    ElMenuItemActor
+}

package/src/actor/ElPaginationActor.ts

@@ -0,0 +1,83 @@
+import { h, resolveDynamicComponent, VNode } from "vue";
+import { UpdateArgs } from "@vyr/engine";
+import { VueActor, VyrVueProps, VyrVueInstance, VyrVueChildren } from "@vyr/vue";
+import { ElPaginationDescriptor } from "../descriptor";
+
+class ElPaginationActor extends VueActor {
+    protected currentVnode!: VNode
+
+    getProps(descriptor: ElPaginationDescriptor, args: UpdateArgs): VyrVueProps {
+        const props = super.getProps(descriptor, args)
+        const layout: string[] = []
+        if (descriptor.layoutSizes) layout.push('sizes')
+        if (descriptor.layoutPrev) layout.push('prev')
+        if (descriptor.layoutPager) layout.push('pager')
+        if (descriptor.layoutNext) layout.push('next')
+        if (descriptor.layoutJumper) layout.push('jumper')
+        if (descriptor.layoutArrow) layout.push(' ->')
+        if (descriptor.layoutTotal) layout.push('total')
+
+        return {
+            ...props,
+            total: descriptor.total,
+            background: descriptor.background,
+            layout: layout.join(', '),
+        }
+    }
+
+    getComponent() {
+        return resolveDynamicComponent('el-pagination') as VNode
+    }
+
+    getComponentAttrs(instance: VyrVueInstance, descriptor: ElPaginationDescriptor, ...args: any[]) {
+        const attrs = super.getComponentAttrs(instance, descriptor, ...args)
+        const pageSizes = descriptor.pageSizes.split(',').filter(clip => clip).map(clip => parseInt(clip))
+
+        const self = this
+        Object.assign(attrs, {
+            pageSizes,
+            pageSize: descriptor.pageSize,
+            'onUpdate:pageSize'(value: number) {
+                if (self.currentVnode.props) self.currentVnode.props.pageSize = value
+                if (self.currentVnode.component === undefined || self.currentVnode.component === null) return
+                self.currentVnode.component.props.pageSize = value
+            },
+            currentPage: descriptor.currentPage,
+            'onUpdate:currentPage'(value: number) {
+                if (self.currentVnode.props) self.currentVnode.props.currentPage = value
+                if (self.currentVnode.component === undefined || self.currentVnode.component === null) return
+                self.currentVnode.component.props.currentPage = value
+            },
+        })
+
+        return attrs
+    }
+
+    getContent(instance: VyrVueInstance, children: VyrVueChildren, descriptor: ElPaginationDescriptor) {
+        const component = this.getComponent()
+        const attrs = this.getComponentAttrs(instance, descriptor)
+        this.currentVnode = h(component, attrs, children)
+        return this.currentVnode
+    }
+
+    getData() {
+        //@ts-ignore
+        const { pageSize, currentPage } = this.currentVnode.component.props
+
+        return {
+            pageSize,
+            currentPage,
+        }
+    }
+
+    reset() {
+        const value = 1
+        if (this.currentVnode.props) this.currentVnode.props.currentPage = value
+        if (this.currentVnode.component === undefined || this.currentVnode.component === null) return
+        this.currentVnode.component.props.currentPage = value
+    }
+}
+
+export {
+    ElPaginationActor
+}