@tmagic/form 1.5.0 → 1.5.1

package/dist/tmagic-form.js

@@ -5,7 +5,7 @@ import { TMagicFormItem, TMagicTooltip, TMagicIcon, TMagicButton, TMagicCheckbox
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import Sortable from 'sortablejs';
-import { sleep, asyncLoadJs, getValueByKeyPath, isNumber } from '@tmagic/utils';
+import { asyncLoadJs, getValueByKeyPath, isNumber } from '@tmagic/utils';
 import { createPopper } from '@popperjs/core';
 
 const isTableSelect = (type) => typeof type === "string" && ["table-select", "tableSelect"].includes(type);
@@ -405,6 +405,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
             class: normalizeClass({ "tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value }),
             prop: itemProp.value,
             "label-width": itemLabelWidth.value,
+            "label-position": _ctx.config.labelPosition,
             rules: rule.value
           }, {
             label: withCtx(() => [
@@ -452,7 +453,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
               }, null, 8, _hoisted_4$3)) : createCommentVNode("", true)
             ]),
             _: 1
-          }, 8, ["style", "class", "prop", "label-width", "rules"]),
+          }, 8, ["style", "class", "prop", "label-width", "label-position", "rules"]),
           _ctx.config.tip ? (openBlock(), createBlock(unref(TMagicTooltip), {
             key: 0,
             placement: "left"
@@ -478,6 +479,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
             class: normalizeClass({ "tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value }),
             prop: itemProp.value,
             "label-width": itemLabelWidth.value,
+            "label-position": _ctx.config.labelPosition,
             rules: rule.value
           }, {
             label: withCtx(() => [
@@ -521,7 +523,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
               }, null, 8, _hoisted_8$1)) : createCommentVNode("", true)
             ]),
             _: 1
-          }, 8, ["style", "class", "prop", "label-width", "rules"]),
+          }, 8, ["style", "class", "prop", "label-width", "label-position", "rules"]),
           _ctx.config.tip ? (openBlock(), createBlock(unref(TMagicTooltip), {
             key: 0,
             placement: "left"
@@ -546,6 +548,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
             class: normalizeClass({ "tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value }),
             prop: itemProp.value,
             "label-width": itemLabelWidth.value,
+            "label-position": _ctx.config.labelPosition,
             rules: rule.value
           }, {
             label: withCtx(() => [
@@ -589,7 +592,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
               }, null, 8, _hoisted_12)) : createCommentVNode("", true)
             ]),
             _: 1
-          }, 8, ["style", "class", "prop", "label-width", "rules"]),
+          }, 8, ["style", "class", "prop", "label-width", "label-position", "rules"]),
           _ctx.config.tip ? (openBlock(), createBlock(unref(TMagicTooltip), {
             key: 1,
             placement: "left"
@@ -1445,10 +1448,6 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
         props.model[modelName.value] = props.model[modelName.value].sort((a, b) => b[prop] - a[prop]);
       }
     };
-    const foreUpdate = () => {
-      updateKey.value += 1;
-      setTimeout(() => rowDrop());
-    };
     const swapArray = (index1, index2) => {
       props.model[modelName.value].splice(index1, 0, props.model[modelName.value].splice(index2, 1)[0]);
       if (props.sortKey) {
@@ -1458,31 +1457,25 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
       }
       mForm?.$emit("field-change", props.prop, props.model[modelName.value]);
     };
+    let sortable;
     const rowDrop = () => {
+      sortable?.destroy();
       const tableEl = tMagicTable.value?.instance.$el;
       const tBodyEl = tableEl?.querySelector(".el-table__body > tbody");
-      if (tBodyEl) {
-        const sortable = Sortable.create(tBodyEl, {
-          onEnd: ({ newIndex, oldIndex }) => {
-            if (typeof newIndex === "undefined") return;
-            if (typeof oldIndex === "undefined") return;
-            swapArray(newIndex, oldIndex);
-            emit("change", props.model[modelName.value]);
-            foreUpdate();
-            sortable.destroy();
-            mForm?.$emit("field-change", props.prop, props.model[modelName.value]);
-            sleep(1e3).then(() => {
-              const elTrs = tableEl.querySelectorAll(".el-table__body > tbody > tr");
-              if (elTrs?.[newIndex]) {
-                elTrs[newIndex].style.backgroundColor = "rgba(243, 89, 59, 0.2)";
-                sleep(1e3).then(() => {
-                  elTrs[newIndex].style.backgroundColor = "";
-                });
-              }
-            });
-          }
-        });
+      if (!tBodyEl) {
+        return;
       }
+      sortable = Sortable.create(tBodyEl, {
+        draggable: ".tmagic-design-table-row",
+        direction: "vertical",
+        onEnd: ({ newIndex, oldIndex }) => {
+          if (typeof newIndex === "undefined") return;
+          if (typeof oldIndex === "undefined") return;
+          swapArray(newIndex, oldIndex);
+          emit("change", props.model[modelName.value]);
+          mForm?.$emit("field-change", props.prop, props.model[modelName.value]);
+        }
+      });
     };
     const newHandler = async (row) => {
       if (props.config.max && props.model[modelName.value].length >= props.config.max) {
@@ -1794,7 +1787,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                   onSortChange: sortChange
                 }, {
                   default: withCtx(() => [
-                    _ctx.config.itemExtra ? (openBlock(), createBlock(unref(TMagicTableColumn), {
+                    _ctx.config.itemExtra && !_ctx.config.dropSort ? (openBlock(), createBlock(unref(TMagicTableColumn), {
                       key: 0,
                       fixed: "left",
                       width: "30",
@@ -4646,6 +4639,7 @@ const index = {
     app.component("m-form-table", _sfc_main$p);
     app.component("m-form-tab", _sfc_main$o);
     app.component("m-fields-text", _sfc_main$5);
+    app.component("m-fields-img-upload", _sfc_main$5);
     app.component("m-fields-number", _sfc_main$a);
     app.component("m-fields-number-range", _sfc_main$9);
     app.component("m-fields-textarea", _sfc_main$4);

package/dist/tmagic-form.umd.cjs

@@ -401,6 +401,7 @@
               class: vue.normalizeClass({ "tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value }),
               prop: itemProp.value,
               "label-width": itemLabelWidth.value,
+              "label-position": _ctx.config.labelPosition,
               rules: rule.value
             }, {
               label: vue.withCtx(() => [
@@ -448,7 +449,7 @@
                 }, null, 8, _hoisted_4$3)) : vue.createCommentVNode("", true)
               ]),
               _: 1
-            }, 8, ["style", "class", "prop", "label-width", "rules"]),
+            }, 8, ["style", "class", "prop", "label-width", "label-position", "rules"]),
             _ctx.config.tip ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
               key: 0,
               placement: "left"
@@ -474,6 +475,7 @@
               class: vue.normalizeClass({ "tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value }),
               prop: itemProp.value,
               "label-width": itemLabelWidth.value,
+              "label-position": _ctx.config.labelPosition,
               rules: rule.value
             }, {
               label: vue.withCtx(() => [
@@ -517,7 +519,7 @@
                 }, null, 8, _hoisted_8$1)) : vue.createCommentVNode("", true)
               ]),
               _: 1
-            }, 8, ["style", "class", "prop", "label-width", "rules"]),
+            }, 8, ["style", "class", "prop", "label-width", "label-position", "rules"]),
             _ctx.config.tip ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
               key: 0,
               placement: "left"
@@ -542,6 +544,7 @@
               class: vue.normalizeClass({ "tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value }),
               prop: itemProp.value,
               "label-width": itemLabelWidth.value,
+              "label-position": _ctx.config.labelPosition,
               rules: rule.value
             }, {
               label: vue.withCtx(() => [
@@ -585,7 +588,7 @@
                 }, null, 8, _hoisted_12)) : vue.createCommentVNode("", true)
               ]),
               _: 1
-            }, 8, ["style", "class", "prop", "label-width", "rules"]),
+            }, 8, ["style", "class", "prop", "label-width", "label-position", "rules"]),
             _ctx.config.tip ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
               key: 1,
               placement: "left"
@@ -1441,10 +1444,6 @@
           props.model[modelName.value] = props.model[modelName.value].sort((a, b) => b[prop] - a[prop]);
         }
       };
-      const foreUpdate = () => {
-        updateKey.value += 1;
-        setTimeout(() => rowDrop());
-      };
       const swapArray = (index1, index2) => {
         props.model[modelName.value].splice(index1, 0, props.model[modelName.value].splice(index2, 1)[0]);
         if (props.sortKey) {
@@ -1454,31 +1453,25 @@
         }
         mForm?.$emit("field-change", props.prop, props.model[modelName.value]);
       };
+      let sortable;
       const rowDrop = () => {
+        sortable?.destroy();
         const tableEl = tMagicTable.value?.instance.$el;
         const tBodyEl = tableEl?.querySelector(".el-table__body > tbody");
-        if (tBodyEl) {
-          const sortable = Sortable.create(tBodyEl, {
-            onEnd: ({ newIndex, oldIndex }) => {
-              if (typeof newIndex === "undefined") return;
-              if (typeof oldIndex === "undefined") return;
-              swapArray(newIndex, oldIndex);
-              emit("change", props.model[modelName.value]);
-              foreUpdate();
-              sortable.destroy();
-              mForm?.$emit("field-change", props.prop, props.model[modelName.value]);
-              utils.sleep(1e3).then(() => {
-                const elTrs = tableEl.querySelectorAll(".el-table__body > tbody > tr");
-                if (elTrs?.[newIndex]) {
-                  elTrs[newIndex].style.backgroundColor = "rgba(243, 89, 59, 0.2)";
-                  utils.sleep(1e3).then(() => {
-                    elTrs[newIndex].style.backgroundColor = "";
-                  });
-                }
-              });
-            }
-          });
+        if (!tBodyEl) {
+          return;
         }
+        sortable = Sortable.create(tBodyEl, {
+          draggable: ".tmagic-design-table-row",
+          direction: "vertical",
+          onEnd: ({ newIndex, oldIndex }) => {
+            if (typeof newIndex === "undefined") return;
+            if (typeof oldIndex === "undefined") return;
+            swapArray(newIndex, oldIndex);
+            emit("change", props.model[modelName.value]);
+            mForm?.$emit("field-change", props.prop, props.model[modelName.value]);
+          }
+        });
       };
       const newHandler = async (row) => {
         if (props.config.max && props.model[modelName.value].length >= props.config.max) {
@@ -1790,7 +1783,7 @@
                     onSortChange: sortChange
                   }, {
                     default: vue.withCtx(() => [
-                      _ctx.config.itemExtra ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTableColumn), {
+                      _ctx.config.itemExtra && !_ctx.config.dropSort ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTableColumn), {
                         key: 0,
                         fixed: "left",
                         width: "30",
@@ -4642,6 +4635,7 @@
       app.component("m-form-table", _sfc_main$p);
       app.component("m-form-tab", _sfc_main$o);
       app.component("m-fields-text", _sfc_main$5);
+      app.component("m-fields-img-upload", _sfc_main$5);
       app.component("m-fields-number", _sfc_main$a);
       app.component("m-fields-number-range", _sfc_main$9);
       app.component("m-fields-textarea", _sfc_main$4);

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.0",
+  "version": "1.5.1",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -47,18 +47,18 @@
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^18.19.0",
     "@types/sortablejs": "^1.15.8",
-    "@vitejs/plugin-vue": "^5.1.3",
+    "@vitejs/plugin-vue": "^5.2.1",
     "@vue/compiler-sfc": "^3.5.12",
     "@vue/test-utils": "^2.4.6",
     "rimraf": "^3.0.2",
-    "sass": "^1.78.0",
-    "vite": "^5.4.10"
+    "sass": "^1.83.0",
+    "vite": "^6.0.3"
   },
   "peerDependencies": {
     "vue": ">=3.5.0",
     "typescript": "*",
-    "@tmagic/design": "1.5.0",
-    "@tmagic/utils": "1.5.0"
+    "@tmagic/design": "1.5.1",
+    "@tmagic/utils": "1.5.1"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/containers/Container.vue

@@ -40,6 +40,7 @@
         :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text }"
         :prop="itemProp"
         :label-width="itemLabelWidth"
+        :label-position="config.labelPosition"
         :rules="rule"
       >
         <template #label><span v-html="type === 'checkbox' ? '' : text" :title="config.labelTitle"></span></template>
@@ -96,6 +97,7 @@
         :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text }"
         :prop="itemProp"
         :label-width="itemLabelWidth"
+        :label-position="config.labelPosition"
         :rules="rule"
         style="background: #f7dadd"
       >
@@ -145,6 +147,7 @@
         :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text }"
         :prop="itemProp"
         :label-width="itemLabelWidth"
+        :label-position="config.labelPosition"
         :rules="rule"
         style="background: #def7da"
       >

package/src/containers/Table.vue

@@ -18,7 +18,7 @@
             @select="selectHandle"
             @sort-change="sortChange"
           >
-            <TMagicTableColumn v-if="config.itemExtra" :fixed="'left'" width="30" type="expand">
+            <TMagicTableColumn v-if="config.itemExtra && !config.dropSort" :fixed="'left'" width="30" type="expand">
               <template v-slot="scope">
                 <span v-html="itemExtra(config.itemExtra, scope.$index)" class="m-form-tip"></span>
               </template>
@@ -204,7 +204,7 @@ import {
   TMagicUpload,
   useZIndex,
 } from '@tmagic/design';
-import { asyncLoadJs, sleep } from '@tmagic/utils';
+import { asyncLoadJs } from '@tmagic/utils';
 
 import type { ContainerChangeEventData, FormState, SortProp, TableColumnConfig, TableConfig } from '../schema';
 import { display as displayFunc, initValue } from '../utils/form';
@@ -286,11 +286,6 @@ const sortChange = ({ prop, order }: SortProp) => {
   }
 };
 
-const foreUpdate = () => {
-  updateKey.value += 1;
-  setTimeout(() => rowDrop());
-};
-
 const swapArray = (index1: number, index2: number) => {
   props.model[modelName.value].splice(index1, 0, props.model[modelName.value].splice(index2, 1)[0]);
 
@@ -302,32 +297,25 @@ const swapArray = (index1: number, index2: number) => {
   mForm?.$emit('field-change', props.prop, props.model[modelName.value]);
 };
 
+let sortable: Sortable | undefined;
 const rowDrop = () => {
+  sortable?.destroy();
   const tableEl = tMagicTable.value?.instance.$el;
   const tBodyEl = tableEl?.querySelector('.el-table__body > tbody');
-  if (tBodyEl) {
-    // eslint-disable-next-line prefer-destructuring
-    const sortable = Sortable.create(tBodyEl, {
-      onEnd: ({ newIndex, oldIndex }: SortableEvent) => {
-        if (typeof newIndex === 'undefined') return;
-        if (typeof oldIndex === 'undefined') return;
-        swapArray(newIndex, oldIndex);
-        emit('change', props.model[modelName.value]);
-        foreUpdate();
-        sortable.destroy();
-        mForm?.$emit('field-change', props.prop, props.model[modelName.value]);
-        sleep(1000).then(() => {
-          const elTrs = tableEl.querySelectorAll('.el-table__body > tbody > tr');
-          if (elTrs?.[newIndex]) {
-            elTrs[newIndex].style.backgroundColor = 'rgba(243, 89, 59, 0.2)';
-            sleep(1000).then(() => {
-              elTrs[newIndex].style.backgroundColor = '';
-            });
-          }
-        });
-      },
-    });
+  if (!tBodyEl) {
+    return;
   }
+  sortable = Sortable.create(tBodyEl, {
+    draggable: '.tmagic-design-table-row',
+    direction: 'vertical',
+    onEnd: ({ newIndex, oldIndex }: SortableEvent) => {
+      if (typeof newIndex === 'undefined') return;
+      if (typeof oldIndex === 'undefined') return;
+      swapArray(newIndex, oldIndex);
+      emit('change', props.model[modelName.value]);
+      mForm?.$emit('field-change', props.prop, props.model[modelName.value]);
+    },
+  });
 };
 
 const newHandler = async (row?: any) => {

package/src/index.ts

@@ -116,6 +116,7 @@ export default {
     app.component('m-form-table', Table);
     app.component('m-form-tab', Tabs);
     app.component('m-fields-text', Text);
+    app.component('m-fields-img-upload', Text);
     app.component('m-fields-number', Number);
     app.component('m-fields-number-range', NumberRange);
     app.component('m-fields-textarea', Textarea);