feat(lib): 添加vue3 naiveui支持

ref #152

Author: lljj-x

packages/lib/vue3/vue3-form-naive/src/config/widgets/CheckboxesWidget/index.js

@@ -0,0 +1,40 @@
+/**
+ * Created by Liu.Jun on 2021/2/23 10:21 下午.
+ */
+
+import { h } from 'vue';
+import { resolveComponent, modelValueComponent } from '@lljj/vjsf-utils/vue3Utils';
+
+const baseComponent = {
+    name: 'CheckboxesWidget',
+    props: {
+        enumOptions: {
+            default: () => [],
+            type: [Array]
+        }
+    },
+    setup(props, { attrs }) {
+        return () => h(resolveComponent('n-checkbox-group'), attrs, {
+            default() {
+                return h(resolveComponent('n-space'), {
+                    itemStyle: 'display: flex'
+                }, {
+                    default() {
+                        return props.enumOptions.map((item, index) => h(resolveComponent('n-checkbox'), {
+                            key: index,
+                            value: item.value
+                        }, {
+                            default: () => item.label
+                        }));
+                    }
+                });
+            }
+        });
+    }
+};
+
+const moduleValeComponent = modelValueComponent(baseComponent, {
+    model: 'value'
+});
+
+export default moduleValeComponent;

packages/lib/vue3/vue3-form-naive/src/config/widgets/CheckboxesWidget/index.vue

@@ -1,50 +1,34 @@
 /**
- * Created by Liu.Jun on 2020/7/22 13:21.
+ * Created by Liu.Jun on 2021/2/23 10:21 下午.
  */
 
 import { h } from 'vue';
 import { resolveComponent } from '@lljj/vjsf-utils/vue3Utils';
 
-import { parseDateString } from '@lljj/vjsf-utils/utils';
-
-function isEmptyValue(value) {
-    return value === null || value === '' || (Array.isArray(value) && value.every(item => item === ''));
-}
-
-const formatDateStr = (dateString) => {
-    const {
-        year,
-        month,
-        day
-    } = parseDateString(dateString, false);
-    return `${year}-${month}-${day}`;
-};
-
-export default {
+const baseComponent = {
     name: 'DatePickerWidget',
     inheritAttrs: false,
-    setup(props, { attrs, slots }) {
+    setup(props, { attrs }) {
         return () => {
-            const { isNumberValue, isRange, ...otherProps } = attrs || {};
-            return h(resolveComponent('el-date-picker'), {
+            const {
+                isNumberValue, isRange, modelValue, 'onUpdate:modelValue': onUpdateFormattedValue, ...otherAttrs
+            } = attrs;
+            const trueValue = isRange ? (modelValue && modelValue.length === 0 ? null : modelValue) : modelValue;
+
+            return h(resolveComponent('n-date-picker'), {
                 type: isRange ? 'daterange' : 'date',
-                ...otherProps,
-                'onUpdate:modelValue': (val) => {
-                    let trueVal;
-                    if (isRange) {
-                        trueVal = isEmptyValue(val)
-                            ? []
-                            : val.map(
-                                item => (isNumberValue ? (new Date(item)).valueOf() : formatDateStr(item, isNumberValue))
-                            );
-                    } else {
-                        trueVal = isEmptyValue(val)
-                            ? undefined
-                            : isNumberValue ? (new Date(val)).valueOf() : formatDateStr(val, isNumberValue);
-                    }
-                    attrs['onUpdate:modelValue'].apply(attrs, [trueVal]);
+                ...otherAttrs,
+                ...isNumberValue ? {
+                    value: trueValue,
+                    onUpdateValue: onUpdateFormattedValue
+                } : {
+                    valueFormat: isNumberValue ? 'T' : 'yyyy-MM-dd',
+                    formattedValue: trueValue,
+                    onUpdateFormattedValue,
                 }
-            }, slots);
+            });
         };
     }
 };
+
+export default baseComponent;

packages/lib/vue3/vue3-form-naive/src/config/widgets/DatePickerWidget/index.js

@@ -1,33 +1,34 @@
 /**
- * Created by Liu.Jun on 2020/7/22 13:21.
+ * Created by Liu.Jun on 2021/2/23 10:21 下午.
  */
 
 import { h } from 'vue';
 import { resolveComponent } from '@lljj/vjsf-utils/vue3Utils';
 
-export default {
-    name: 'DateTimePickerWidget',
+const baseComponent = {
+    name: 'DatePickerWidget',
     inheritAttrs: false,
-    setup(props, { attrs, slots }) {
-        const trueValue = (isRange, isNumberValue, val) => {
-            if (isRange) {
-                return (val === null) ? [] : val.map(item => (new Date(item))[isNumberValue ? 'valueOf' : 'toISOString']());
-            }
-            return (val === null) ? undefined : (new Date(val))[isNumberValue ? 'valueOf' : 'toISOString']();
-        };
-
+    setup(props, { attrs }) {
         return () => {
-            const { isNumberValue, isRange, ...otherProps } = attrs || {};
-            return h(resolveComponent('el-date-picker'), {
-                type: isRange ? 'datetimerange' : 'datetime',
-                ...otherProps,
+            const {
+                isNumberValue, isRange, modelValue, 'onUpdate:modelValue': onUpdateFormattedValue, ...otherAttrs
+            } = attrs;
+            const trueValue = isRange ? (modelValue && modelValue.length === 0 ? null : modelValue) : modelValue;
 
-                'onUpdate:modelValue': (val) => {
-                    const trueVal = trueValue(isRange, isNumberValue, val);
-
-                    attrs['onUpdate:modelValue'].apply(attrs, [trueVal]);
+            return h(resolveComponent('n-date-picker'), {
+                type: isRange ? 'datetimerange' : 'datetime',
+                ...otherAttrs,
+                ...isNumberValue ? {
+                    value: trueValue,
+                    onUpdateValue: onUpdateFormattedValue
+                } : {
+                    valueFormat: isNumberValue ? 'T' : 'yyyy-MM-dd\'T\'HH:mm:ss.SSS\'Z\'',
+                    formattedValue: trueValue,
+                    onUpdateFormattedValue,
                 }
-            }, slots);
+            });
         };
     }
 };
+
+export default baseComponent;

packages/lib/vue3/vue3-form-naive/src/config/widgets/DateTimePickerWidget/index.js

@@ -0,0 +1,34 @@
+/**
+ * Created by Liu.Jun on 2021/2/23 10:21 下午.
+ */
+
+import { h } from 'vue';
+import { modelValueComponent, resolveComponent } from '@lljj/vjsf-utils/vue3Utils';
+
+const baseComponent = {
+    name: 'RadioWidget',
+    props: {
+        enumOptions: {
+            default: () => [],
+            type: [Array]
+        }
+    },
+    setup(props, { attrs }) {
+        return () => h(resolveComponent('n-radio-group'), attrs, {
+            default() {
+                return props.enumOptions.map((item, index) => h(resolveComponent('n-radio'), {
+                    key: index,
+                    value: item.value
+                }, {
+                    default: () => item.label
+                }));
+            }
+        });
+    }
+};
+
+const moduleValeComponent = modelValueComponent(baseComponent, {
+    model: 'value'
+});
+
+export default moduleValeComponent;

packages/lib/vue3/vue3-form-naive/src/config/widgets/RadioWidget/index.js

@@ -0,0 +1,28 @@
+/**
+ * Created by Liu.Jun on 2021/2/23 10:21 下午.
+ */
+
+import { h } from 'vue';
+import { modelValueComponent, resolveComponent } from '@lljj/vjsf-utils/vue3Utils';
+
+const baseComponent = {
+    name: 'SelectWidget',
+    props: {
+        enumOptions: {
+            default: () => [],
+            type: [Array]
+        }
+    },
+    setup(props, { attrs }) {
+        return () => h(resolveComponent('n-select'), {
+            options: props.enumOptions,
+            ...attrs,
+        });
+    }
+};
+
+const moduleValeComponent = modelValueComponent(baseComponent, {
+    model: 'value'
+});
+
+export default moduleValeComponent;

packages/lib/vue3/vue3-form-naive/src/config/widgets/RadioWidget/index.vue

@@ -1,71 +1,27 @@
 /**
- * Created by Liu.Jun on 2020/7/22 13:22.
+ * Created by Liu.Jun on 2021/2/23 10:21 下午.
  */
 
-import { h, ref, watch } from 'vue';
+import { h } from 'vue';
 import { resolveComponent } from '@lljj/vjsf-utils/vue3Utils';
-import { parseDateString } from '@lljj/vjsf-utils/utils';
 
-const formatTimeStr = (dateString) => {
-    const { hour, minute, second } = parseDateString(dateString, true);
-    return `${hour}:${minute}:${second}`;
-};
-
-const formatTimeObj = (timeStr) => {
-    if (timeStr instanceof Date) {
-        return timeStr;
-    }
-
-    // 取当前时间 改时分秒
-    if (typeof timeStr === 'string') {
-        const [hours, minutes, seconds] = timeStr.split(':');
-        const curTime = new Date();
-        curTime.setHours(+hours);
-        curTime.setMinutes(+minutes);
-        curTime.setSeconds(+seconds);
-        return curTime;
-    }
-
-    // 其它格式清空
-    return undefined;
-};
-
-export default {
+const baseComponent = {
     name: 'TimePickerWidget',
     inheritAttrs: false,
-    props: {
-        modelValue: {
-            default: null,
-            type: null
-        }
-    },
-    setup(props, { attrs, slots }) {
-        // hack element plus timePicker 变为object类型
-        const originValue = ref(formatTimeObj(props.modelValue));
-
-        // 不需要响应式
-        let formatValue = props.modelValue;
-
-        // 如果外部修改了值
-        watch(() => props.modelValue, (newVal) => {
-            if (newVal !== formatValue) {
-                // 更新内部值
-                originValue.value = formatTimeObj(newVal);
-            }
-        });
-
-        return () => h(resolveComponent('el-time-picker'), {
-            ...attrs,
-            modelValue: originValue.value,
-            'onUpdate:modelValue': (val) => {
-                originValue.value = val;
-
-                // 更新并缓存内部 timeStr
-                formatValue = val === null ? undefined : formatTimeStr(val);
-
-                // 更新外部的值
-                attrs['onUpdate:modelValue'].apply(attrs, [formatValue]);
-            }
-        }, slots);
+    setup(props, { attrs }) {
+        return () => {
+            const {
+                modelValue, 'onUpdate:modelValue': onUpdateFormattedValue, ...otherAttrs
+            } = attrs;
+
+            return h(resolveComponent('n-time-picker'), {
+                ...otherAttrs,
+                valueFormat: 'HH:mm:ss',
+                formattedValue: modelValue,
+                onUpdateFormattedValue,
+            });
+        };
     }
 };
+
+export default baseComponent;