next-element-vue 0.4.3 → 0.4.6

package/dist/index.umd.js

@@ -2,8 +2,8 @@
 /**
  * 作　　者：huangteng
  * 邮　　箱：htengweb@163.com
- * 当前版本：0.4.3 v
- * 发布日期：2024-11-20
+ * 当前版本：0.4.6 v
+ * 发布日期：2024-12-02
  * 地　　址：https://www.npmjs.com/package/next-element-vue
  */
 
@@ -4195,6 +4195,10 @@
             top: {
                 type: String,
                 default: "15vh"
+            },
+            nofill: {
+                type: Boolean,
+                default: !1
             }
         },
         emits: [ "close" ],
@@ -4209,7 +4213,7 @@
             return () => vue.createVNode(vue.Fragment, null, [ vue.createVNode(elementPlus.ElDialog, {
                 modelValue: visible.value,
                 "onUpdate:modelValue": $event => visible.value = $event,
-                class: [ ns$b.b(), props.className ],
+                class: [ ns$b.b(), props.className, props.nofill && ns$b.b("nofill") ],
                 style: props.style,
                 title: props.title,
                 appendToBody: props.appendToBody,
@@ -4344,7 +4348,7 @@
         return "function" == typeof s || "[object Object]" === Object.prototype.toString.call(s) && !vue.isVNode(s);
     }
     const ns$9 = useNamespace("form"), InputTableSelect = vue.defineComponent({
-        name: "InputTableSelect",
+        name: "NextInputTableSelect",
         props: {
             modelValue: {
                 type: [ Array, String, Number, Boolean, Object ],
@@ -4360,6 +4364,10 @@
                 type: Boolean,
                 default: !1
             },
+            closable: {
+                type: Boolean,
+                default: !1
+            },
             formParams: {
                 type: Object,
                 default: () => ({})
@@ -4371,7 +4379,10 @@
         },
         emits: [ "select" ],
         setup(props, {emit: emit}) {
-            const {t: t} = useLocale(), _disabled = props.disabled, _column = props.column, _placeholder = _column.placeholder || t("next.form.select") + _column.label, _tableDefaultConfig = deepClone(defaultConfig$4), _tableSelectConfig = deepClone(tableSelectConfig), _options = merge$1(_tableDefaultConfig, _tableSelectConfig, _column.tableSelect), tableSelectDialog = vue.reactive({
+            const {t: t} = useLocale(), _disabled = props.disabled, _closable = props.closable, _column = props.column, _placeholder = _column.placeholder || t("next.form.select") + _column.label, _tableDefaultConfig = deepClone(defaultConfig$4), _tableSelectConfig = deepClone(tableSelectConfig), _options = merge$1(_tableDefaultConfig, _tableSelectConfig, _column.tableSelect), {value: propsValue, label: propsLabel} = _column.tableSelectProps || {
+                value: "id",
+                label: "name"
+            }, tableSelectDialog = vue.reactive({
                 visible: !1,
                 title: _column.label + t("next.form.tableSelect"),
                 dialogWidth: _options.dialogWidth
@@ -4392,15 +4403,13 @@
                     tableReactive.data = res.data || [], tableReactive.page.total = res.total || 0, 
                     tableReactive.loading = !1;
                 }));
-            }, multipleSelection = vue.ref([]);
+            }, multipleSelection = vue.ref([]), sinleSelection = vue.ref("");
             _column.tableSelectDefaultValue?.(props.formParams, _column, (rows => {
-                rows?.length && (_column.tableSelectRows = rows, multipleSelection.value = rows);
+                rows?.length && (_column.tableSelectRows = rows, multipleSelection.value = rows, 
+                sinleSelection.value = rows[0][propsValue]);
             }));
-            const sinleSelection = vue.ref(""), _disabledSelect = vue.computed((() => "radio" === _options.selectType ? !sinleSelection.value : 0 === multipleSelection.value.length)), isSelected = row => multipleSelection.value.includes(row), onResetTableSelect = () => {
+            const _disabledSelect = vue.computed((() => "radio" === _options.selectType ? !sinleSelection.value : 0 === multipleSelection.value.length)), onResetTableSelect = () => {
                 multipleSelection.value = [], sinleSelection.value = "";
-            }, {value: propsValue, label: propsLabel} = _column.tableSelectProps || {
-                value: "id",
-                label: "name"
             }, onConfirmSelect = () => {
                 const rows = vue.toRaw(multipleSelection.value), _rows = arrayObjNoRepeat(rows, propsValue);
                 onCloseTableDialog(), emit("select", _rows);
@@ -4409,10 +4418,10 @@
             }, renderSelectTypeContent = (row, index) => {
                 const rowKey = _options.rowKey, value = valueExist(row[rowKey], index);
                 return "checkbox" === _options.selectType ? vue.createVNode(elementPlus.ElCheckbox, {
-                    modelValue: isSelected(vue.toRaw(row)),
+                    value: value,
                     onChange: event => ((event, row) => {
                         if (event) multipleSelection.value.push(row); else {
-                            const index = multipleSelection.value.indexOf(row);
+                            const index = multipleSelection.value.findIndex((o => o[propsValue] === row[propsValue]));
                             -1 !== index && multipleSelection.value.splice(index, 1);
                         }
                     })(event, vue.toRaw(row))
@@ -4424,8 +4433,8 @@
                 }, null);
             }, tags = vue.ref([]), tagsMore = vue.ref([]), _updateTags = () => {
                 const rows = arrayObjNoRepeat(multipleSelection.value, propsValue).map((row => ({
-                    value: row[propsValue || "value"],
-                    label: row[propsLabel || "label"]
+                    value: row[propsValue],
+                    label: row[propsLabel]
                 })));
                 rows.length > 1 ? (tags.value = rows.splice(0, 1), tagsMore.value = rows) : (tags.value = rows, 
                 tagsMore.value = []);
@@ -4436,6 +4445,20 @@
                 deep: !0,
                 immediate: !0
             });
+            const _multipleSelection = vue.ref([]);
+            vue.watch((() => [ props.formParams[_column.prop], multipleSelection.value ]), (() => {
+                _multipleSelection.value = multipleSelection.value.map((o => o[propsValue])), _updateTags();
+            }), {
+                deep: !0,
+                immediate: !0
+            });
+            const _sinleSelection = vue.ref(null);
+            vue.watch((() => [ props.formParams[_column.prop], sinleSelection.value ]), (() => {
+                _sinleSelection.value = sinleSelection.value, _updateTags();
+            }), {
+                deep: !0,
+                immediate: !0
+            });
             const _onCloseTag = (tag, i) => {
                 const rows = vue.toRaw(multipleSelection.value);
                 rows.splice(i, 1), multipleSelection.value = rows, _updateTags(), emit("select", rows);
@@ -4448,7 +4471,7 @@
                 }, [ tags?.value.length ? vue.createVNode("span", {
                     class: ns$9.em("input-table", "value")
                 }, [ tags.value.map(((tag, index) => vue.createVNode(elementPlus.ElTag, {
-                    closable: !_disabled,
+                    closable: !_closable,
                     onClose: () => _onCloseTag(0, index)
                 }, {
                     default: () => [ tag.label ]
@@ -4461,7 +4484,7 @@
                         default: () => [ vue.createTextVNode("+ "), tagsMore.value.length ]
                     }),
                     content: () => tagsMore.value.map(((tag, index) => vue.createVNode(elementPlus.ElTag, {
-                        closable: !_disabled,
+                        closable: !_closable,
                         onClose: () => _onCloseTag(0, index + 1)
                     }, {
                         default: () => [ tag.label ]
@@ -4480,13 +4503,35 @@
                     title: tableSelectDialog.title,
                     closeOnClickModal: _options.closeOnClickModal,
                     width: _options.dialogWidth,
+                    appendToBody: valueExist(_options.dialogAppendToBody, !0),
                     modal: !1,
                     onClose: onCloseTableDialog
                 }, {
                     default: () => [ vue.createVNode("div", {
                         class: ns$9.em("input-table", "content")
-                    }, [ vue.createVNode(elementPlus.ElRadioGroup, {
-                        modelValue: sinleSelection.value
+                    }, [ "checkbox" === _options.selectType ? vue.createVNode(elementPlus.ElCheckboxGroup, {
+                        modelValue: _multipleSelection.value
+                    }, {
+                        default: () => [ vue.createVNode(NextCrudTable, {
+                            options: _options,
+                            loading: tableReactive.loading,
+                            data: tableReactive.data,
+                            page: tableReactive.page,
+                            "onConfirm-search": onConfirmSearch,
+                            "onClick-add-edit": onClickAddEdit
+                        }, {
+                            default: () => [ vue.createVNode(elementPlus.ElTableColumn, {
+                                fixed: "left",
+                                label: t("next.table.selection"),
+                                width: 55,
+                                headerAlign: _options.headerAlign,
+                                align: _options.cellAlign
+                            }, {
+                                default: ({row: row, $index: $index}) => renderSelectTypeContent(row, $index)
+                            }) ]
+                        }) ]
+                    }) : vue.createVNode(elementPlus.ElRadioGroup, {
+                        modelValue: _sinleSelection.value
                     }, {
                         default: () => [ vue.createVNode(NextCrudTable, {
                             options: _options,
@@ -4998,6 +5043,7 @@
                         disabled: valueExist(col.disabled, !1),
                         readonly: valueExist(col.readonly, !1),
                         multiple: valueExist(col.multiple, !1),
+                        filterable: valueExist(col.filterable, !1),
                         "collapse-tags-tooltip": !0,
                         onChange: event => col.onChange?.(event, col, formParams, formColumns)
                     }, {
@@ -5229,7 +5275,7 @@
             };
         }
     });
-    const NextTreeSelect = withInstall(treeSelect), NextTreeCascader = withInstall(treeCascader), NextForm = withInstall(Element$7);
+    const NextTreeSelect = withInstall(treeSelect), NextTreeCascader = withInstall(treeCascader), NextInputTableSelect = withInstall(InputTableSelect), NextForm = withInstall(Element$7);
     var AddEditForm = vue.defineComponent({
         name: "AddEditForm",
         props: {
@@ -5732,7 +5778,7 @@
                 default: "image/*"
             }
         },
-        emits: [ "change" ],
+        emits: [ "change", "remove", "preview" ],
         setup() {
             const {appContext: appContext} = vue.getCurrentInstance(), {t: t} = useLocale();
             return {
@@ -5763,10 +5809,14 @@
                             }
                         }) ])
                     });
-                    previewImagesContainer.appContext = this.appContext, vue.render(previewComponent, previewImagesContainer);
+                    previewImagesContainer.appContext = this.appContext, vue.render(previewComponent, previewImagesContainer), 
+                    emit("preview", uploadFile);
                 },
                 onChange: (uploadfile, uploadfiles) => {
                     uploadfilesPreview.value = uploadfiles, emit("change", uploadfile, uploadfiles);
+                },
+                onRemove: (uploadfile, uploadfiles) => {
+                    uploadfilesPreview.value = uploadfiles, emit("remove", uploadfile, uploadfiles);
                 }
             }, {
                 trigger: () => slots.default ? slots.default() : "picture-card" === props.listType ? vue.createVNode(elementPlus.ElIcon, null, {
@@ -8117,6 +8167,7 @@
         NextDialog: NextDialog,
         NextDragResize: NextDragResize,
         NextForm: NextForm,
+        NextInputTableSelect: NextInputTableSelect,
         NextLabelimg: NextLabelimg,
         NextLabelimgPreview: NextLabelimgPreview,
         NextLabelme: NextLabelme,
@@ -8171,20 +8222,21 @@
         })(app);
     };
     var index = {
-        version: "0.4.3",
+        version: "0.4.6",
         install: install
     };
     exports.NextContainer = NextContainer, exports.NextCrudTable = NextCrudTable, exports.NextCrudTableVirtualized = NextCrudTableVirtualized, 
     exports.NextDialog = NextDialog, exports.NextDragResize = NextDragResize, exports.NextForm = NextForm, 
-    exports.NextLabelimg = NextLabelimg, exports.NextLabelimgPreview = NextLabelimgPreview, 
-    exports.NextLabelme = NextLabelme, exports.NextLayout = NextLayout, exports.NextMenu = NextMenu, 
-    exports.NextSpinLoading = NextSpinLoading, exports.NextTabs = NextTabs, exports.NextTextEllipsis = NextTextEllipsis, 
-    exports.NextTreeCascader = NextTreeCascader, exports.NextTreeSelect = NextTreeSelect, 
-    exports.NextUpload = NextUpload, exports.NextVideoPlayer = NextVideoPlayer, exports.buildLocaleContext = buildLocaleContext, 
-    exports.buildTranslator = buildTranslator, exports.default = index, exports.defaultNamespace = "next", 
-    exports.install = install, exports.localeContextKey = localeContextKey, exports.localeLang = localeLang, 
-    exports.namespaceContextKey = namespaceContextKey, exports.nextUseCssTheme = nextUseCssTheme, 
-    exports.nextUseCssVar = nextUseCssVar, exports.translate = translate, exports.updateThemeColor = color => {
+    exports.NextInputTableSelect = NextInputTableSelect, exports.NextLabelimg = NextLabelimg, 
+    exports.NextLabelimgPreview = NextLabelimgPreview, exports.NextLabelme = NextLabelme, 
+    exports.NextLayout = NextLayout, exports.NextMenu = NextMenu, exports.NextSpinLoading = NextSpinLoading, 
+    exports.NextTabs = NextTabs, exports.NextTextEllipsis = NextTextEllipsis, exports.NextTreeCascader = NextTreeCascader, 
+    exports.NextTreeSelect = NextTreeSelect, exports.NextUpload = NextUpload, exports.NextVideoPlayer = NextVideoPlayer, 
+    exports.buildLocaleContext = buildLocaleContext, exports.buildTranslator = buildTranslator, 
+    exports.default = index, exports.defaultNamespace = "next", exports.install = install, 
+    exports.localeContextKey = localeContextKey, exports.localeLang = localeLang, exports.namespaceContextKey = namespaceContextKey, 
+    exports.nextUseCssTheme = nextUseCssTheme, exports.nextUseCssVar = nextUseCssVar, 
+    exports.translate = translate, exports.updateThemeColor = color => {
         color && nextUseCssTheme("--el-color-primary", color);
     }, exports.updateThemeColorCssVar = updateThemeColorCssVar, exports.useDetectVideo = () => ({
         detectVideoFrameImage: ({container: container, video: video, modelUrl: modelUrl, classNames: classNames, classInput: classInput = []}, success, error) => modelUrl ? classNames ? void tf__namespace.loadGraphModel(modelUrl).then((model => {
@@ -8218,7 +8270,7 @@
     }), exports.useGetDerivedNamespace = useGetDerivedNamespace, exports.useLanguage = (locale, lang) => {
         const localeRef = vue.isRef(locale) ? locale : vue.ref(locale), nextLang = localeLang[lang] || localeLang["zh-cn"];
         localeRef.value.name = lang, localeRef.value.next = nextLang.next;
-    }, exports.useLocale = useLocale, exports.useNamespace = useNamespace, exports.version = "0.4.3", 
+    }, exports.useLocale = useLocale, exports.useNamespace = useNamespace, exports.version = "0.4.6", 
     Object.defineProperty(exports, "__esModule", {
         value: !0
     });