ll-plus 2.6.17 → 2.6.19

package/lib/packages/components/cropper/src/cropper-modal.vue2.js

@@ -16,7 +16,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "cropper-modal",
   props: cropperImage.cropperModalProps,
   emits: cropperImage.cropperModalEmits,
-  setup(__props, { emit: __emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emits = __emit;
     const bem = createNamespace.createNamespace("cropper-modal");
@@ -24,16 +24,23 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const avatar = vue.ref(props.avatar || "");
     const open = vue.ref(false);
     const previewSource = vue.ref("");
+    const loading = vue.ref(props.loading);
+    const uploadLoading = vue.ref(false);
     const cropper = vue.ref();
     let scaleX = 1;
     let scaleY = 1;
     function handleBeforeUpload(file) {
       const reader = new FileReader();
       reader.readAsDataURL(file);
+      uploadLoading.value = true;
       src.value = "";
       previewSource.value = "";
       reader.onload = function(e) {
         src.value = e.target?.result ?? "";
+        uploadLoading.value = false;
+      };
+      reader.onerror = () => {
+        uploadLoading.value = false;
       };
       return false;
     }
@@ -63,10 +70,13 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       avatar.value = previewSource.value;
       open.value = false;
     }
+    const cleanValue = () => {
+      src.value = "";
+      avatar.value = "";
+    };
     vue.watch(
       () => props.avatar,
       (val) => {
-        console.log({ val });
         src.value = val;
         avatar.value = val;
       },
@@ -74,6 +84,12 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         immediate: true
       }
     );
+    vue.watchEffect(() => {
+      loading.value = props.loading;
+    });
+    __expose({
+      cleanValue
+    });
     return (_ctx, _cache) => {
       const _component_ll_icon = vue.resolveComponent("ll-icon");
       const _component_ll_button = vue.resolveComponent("ll-button");
@@ -81,6 +97,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       const _component_a_upload = vue.resolveComponent("a-upload");
       const _component_ll_space = vue.resolveComponent("ll-space");
       const _component_ll_image = vue.resolveComponent("ll-image");
+      const _component_a_spin = vue.resolveComponent("a-spin");
       const _component_ll_modal = vue.resolveComponent("ll-modal");
       return vue.openBlock(), vue.createElementBlock(
         vue.Fragment,
@@ -93,6 +110,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
             keyboard: false,
             "mask-closable": false,
             "ok-text": "\u786E\u5B9A",
+            loading: uploadLoading.value,
             onCancel: _cache[8] || (_cache[8] = ($event) => open.value = false),
             onOk: handleOk
           }, {
@@ -120,9 +138,10 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                             src: src.value,
                             height: "300px",
                             circled: _ctx.circled,
+                            loading: uploadLoading.value,
                             onCropend: handleCropend,
                             onOnReady: handleReady
-                          }, null, 8, ["src", "circled"])) : vue.createCommentVNode("v-if", true)
+                          }, null, 8, ["src", "circled", "loading"])) : vue.createCommentVNode("v-if", true)
                         ],
                         2
                         /* CLASS */
@@ -147,6 +166,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                   vue.createVNode(_component_ll_button, {
                                     type: "primary",
                                     size: "small",
+                                    disabled: uploadLoading.value,
                                     onClick: _cache[0] || (_cache[0] = ($event) => handlerToolbar("reset"))
                                   }, {
                                     default: vue.withCtx(() => [
@@ -154,7 +174,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                     ]),
                                     _: 1
                                     /* STABLE */
-                                  })
+                                  }, 8, ["disabled"])
                                 ]),
                                 _: 1
                                 /* STABLE */
@@ -173,7 +193,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                   vue.createVNode(_component_ll_button, {
                                     type: "primary",
                                     size: "small",
-                                    disabled: !src.value,
+                                    disabled: !src.value || uploadLoading.value,
                                     onClick: _cache[1] || (_cache[1] = ($event) => handlerToolbar("reset"))
                                   }, {
                                     default: vue.withCtx(() => [
@@ -194,7 +214,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                   vue.createVNode(_component_ll_button, {
                                     type: "primary",
                                     size: "small",
-                                    disabled: !src.value,
+                                    disabled: !src.value || uploadLoading.value,
                                     onClick: _cache[2] || (_cache[2] = ($event) => handlerToolbar("rotate", -45))
                                   }, {
                                     default: vue.withCtx(() => [
@@ -215,7 +235,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                   vue.createVNode(_component_ll_button, {
                                     type: "primary",
                                     size: "small",
-                                    disabled: !src.value,
+                                    disabled: !src.value || uploadLoading.value,
                                     onClick: _cache[3] || (_cache[3] = ($event) => handlerToolbar("rotate", 45))
                                   }, {
                                     default: vue.withCtx(() => [
@@ -236,7 +256,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                   vue.createVNode(_component_ll_button, {
                                     type: "primary",
                                     size: "small",
-                                    disabled: !src.value,
+                                    disabled: !src.value || uploadLoading.value,
                                     onClick: _cache[4] || (_cache[4] = ($event) => handlerToolbar("scaleX"))
                                   }, {
                                     default: vue.withCtx(() => [
@@ -257,7 +277,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                   vue.createVNode(_component_ll_button, {
                                     type: "primary",
                                     size: "small",
-                                    disabled: !src.value,
+                                    disabled: !src.value || uploadLoading.value,
                                     onClick: _cache[5] || (_cache[5] = ($event) => handlerToolbar("scaleY"))
                                   }, {
                                     default: vue.withCtx(() => [
@@ -278,7 +298,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                   vue.createVNode(_component_ll_button, {
                                     type: "primary",
                                     size: "small",
-                                    disabled: !src.value,
+                                    disabled: !src.value || uploadLoading.value,
                                     onClick: _cache[6] || (_cache[6] = ($event) => handlerToolbar("zoom", 0.1))
                                   }, {
                                     default: vue.withCtx(() => [
@@ -299,7 +319,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                   vue.createVNode(_component_ll_button, {
                                     type: "primary",
                                     size: "small",
-                                    disabled: !src.value,
+                                    disabled: !src.value || uploadLoading.value,
                                     onClick: _cache[7] || (_cache[7] = ($event) => handlerToolbar("zoom", -0.1))
                                   }, {
                                     default: vue.withCtx(() => [
@@ -330,56 +350,62 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       class: vue.normalizeClass(vue.unref(bem).e("right"))
                     },
                     [
-                      vue.createElementVNode(
-                        "div",
-                        {
-                          class: vue.normalizeClass(vue.unref(bem).e("preview"))
-                        },
-                        [
-                          previewSource.value ? (vue.openBlock(), vue.createElementBlock("img", {
-                            key: 0,
-                            src: previewSource.value,
-                            alt: "\u9884\u89C8"
-                          }, null, 8, _hoisted_1)) : vue.createCommentVNode("v-if", true)
-                        ],
-                        2
-                        /* CLASS */
-                      ),
-                      previewSource.value ? (vue.openBlock(), vue.createElementBlock(
-                        "div",
-                        {
-                          key: 0,
-                          class: vue.normalizeClass(vue.unref(bem).e("group"))
-                        },
-                        [
-                          vue.createVNode(_component_ll_image, {
-                            preview: false,
-                            src: previewSource.value,
-                            width: 32,
-                            height: 32
-                          }, null, 8, ["src"]),
-                          vue.createVNode(_component_ll_image, {
-                            preview: false,
-                            src: previewSource.value,
-                            width: 48,
-                            height: 48
-                          }, null, 8, ["src"]),
-                          vue.createVNode(_component_ll_image, {
-                            preview: false,
-                            src: previewSource.value,
-                            width: 64,
-                            height: 64
-                          }, null, 8, ["src"]),
-                          vue.createVNode(_component_ll_image, {
-                            preview: false,
-                            src: previewSource.value,
-                            width: 80,
-                            height: 80
-                          }, null, 8, ["src"])
-                        ],
-                        2
-                        /* CLASS */
-                      )) : vue.createCommentVNode("v-if", true)
+                      vue.createVNode(_component_a_spin, { spinning: uploadLoading.value }, {
+                        default: vue.withCtx(() => [
+                          vue.createElementVNode(
+                            "div",
+                            {
+                              class: vue.normalizeClass(vue.unref(bem).e("preview"))
+                            },
+                            [
+                              previewSource.value ? (vue.openBlock(), vue.createElementBlock("img", {
+                                key: 0,
+                                src: previewSource.value,
+                                alt: "\u9884\u89C8"
+                              }, null, 8, _hoisted_1)) : vue.createCommentVNode("v-if", true)
+                            ],
+                            2
+                            /* CLASS */
+                          ),
+                          previewSource.value ? (vue.openBlock(), vue.createElementBlock(
+                            "div",
+                            {
+                              key: 0,
+                              class: vue.normalizeClass(vue.unref(bem).e("group"))
+                            },
+                            [
+                              vue.createVNode(_component_ll_image, {
+                                preview: false,
+                                src: previewSource.value,
+                                width: 32,
+                                height: 32
+                              }, null, 8, ["src"]),
+                              vue.createVNode(_component_ll_image, {
+                                preview: false,
+                                src: previewSource.value,
+                                width: 48,
+                                height: 48
+                              }, null, 8, ["src"]),
+                              vue.createVNode(_component_ll_image, {
+                                preview: false,
+                                src: previewSource.value,
+                                width: 64,
+                                height: 64
+                              }, null, 8, ["src"]),
+                              vue.createVNode(_component_ll_image, {
+                                preview: false,
+                                src: previewSource.value,
+                                width: 80,
+                                height: 80
+                              }, null, 8, ["src"])
+                            ],
+                            2
+                            /* CLASS */
+                          )) : vue.createCommentVNode("v-if", true)
+                        ]),
+                        _: 1
+                        /* STABLE */
+                      }, 8, ["spinning"])
                     ],
                     2
                     /* CLASS */
@@ -391,25 +417,35 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
             ]),
             _: 1
             /* STABLE */
-          }, 8, ["open", "title", "width"]),
+          }, 8, ["open", "title", "width", "loading"]),
           vue.createElementVNode(
             "div",
             {
               class: vue.normalizeClass(vue.unref(bem).e("cropper-avatar")),
               style: vue.normalizeStyle({
-                cursor: props.disabled ? "not-allowed" : "pointer"
+                cursor: props.disabled ? "not-allowed" : "pointer",
+                display: "inline-block"
               }),
               onClick: handleOpen
             },
             [
-              vue.renderSlot(_ctx.$slots, "default", { src: avatar.value }, () => [
-                vue.createVNode(_component_ll_image, {
-                  src: avatar.value,
-                  width: 64,
-                  height: 64,
-                  preview: false
-                }, null, 8, ["src"])
-              ])
+              vue.createVNode(_component_a_spin, {
+                spinning: loading.value,
+                style: { "display": "inline-block" }
+              }, {
+                default: vue.withCtx(() => [
+                  vue.renderSlot(_ctx.$slots, "default", { src: avatar.value }, () => [
+                    vue.createVNode(_component_ll_image, {
+                      src: avatar.value,
+                      width: 64,
+                      height: 64,
+                      preview: false
+                    }, null, 8, ["src"])
+                  ])
+                ]),
+                _: 3
+                /* FORWARDED */
+              }, 8, ["spinning"])
             ],
             6
             /* CLASS, STYLE */

package/lib/packages/components/cropper/src/cropper-modal.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"cropper-modal.vue2.js","sources":["../../../../../../packages/components/cropper/src/cropper-modal.vue"],"sourcesContent":["<template>\n  <ll-modal\n    :open=\"open\"\n    :title=\"props.title\"\n    :width=\"props.width\"\n    :keyboard=\"false\"\n    :mask-closable=\"false\"\n    :ok-text=\"'确定'\"\n    @cancel=\"open = false\"\n    @ok=\"handleOk\"\n  >\n    <div :class=\"bem.b()\">\n      <div :class=\"bem.e('left')\">\n        <div :class=\"bem.e('cropper')\">\n          <cropper-image\n            v-if=\"src && open\"\n            :src=\"src\"\n            height=\"300px\"\n            :circled=\"circled\"\n            @cropend=\"handleCropend\"\n            @on-ready=\"handleReady\"\n          />\n        </div>\n        <div :class=\"bem.e('toolbar')\">\n          <a-upload\n            :file-list=\"[]\"\n            accept=\"image/*\"\n            :before-upload=\"handleBeforeUpload\"\n          >\n            <ll-tooltip :title=\"'选择图片'\" placement=\"bottom\">\n              <ll-button\n                type=\"primary\"\n                size=\"small\"\n                @click=\"handlerToolbar('reset')\"\n              >\n                <ll-icon icon-name=\"icon-upload\" />\n              </ll-button>\n            </ll-tooltip>\n          </a-upload>\n          <ll-space>\n            <ll-tooltip :tip=\"'重置'\" placement=\"bottom\">\n              <ll-button\n                type=\"primary\"\n                size=\"small\"\n                :disabled=\"!src\"\n                @click=\"handlerToolbar('reset')\"\n              >\n                <ll-icon icon-name=\"icon-refresh\" />\n              </ll-button>\n            </ll-tooltip>\n            <ll-tooltip :tip=\"'逆时针旋转'\" placement=\"bottom\">\n              <ll-button\n                type=\"primary\"\n                size=\"small\"\n                :disabled=\"!src\"\n                @click=\"handlerToolbar('rotate', -45)\"\n              >\n                <ll-icon icon-name=\"icon-counter-clockwise\" />\n              </ll-button>\n            </ll-tooltip>\n            <ll-tooltip :tip=\"'顺时针旋转'\" placement=\"bottom\">\n              <ll-button\n                type=\"primary\"\n                size=\"small\"\n                :disabled=\"!src\"\n                @click=\"handlerToolbar('rotate', 45)\"\n              >\n                <ll-icon icon-name=\"icon-flip-horizontal\" />\n              </ll-button>\n            </ll-tooltip>\n            <ll-tooltip :tip=\"'水平翻转'\" placement=\"bottom\">\n              <ll-button\n                type=\"primary\"\n                size=\"small\"\n                :disabled=\"!src\"\n                @click=\"handlerToolbar('scaleX')\"\n              >\n                <ll-icon icon-name=\"icon-flip-horizontal\" />\n              </ll-button>\n            </ll-tooltip>\n            <ll-tooltip :tip=\"'垂直翻转'\" placement=\"bottom\">\n              <ll-button\n                type=\"primary\"\n                size=\"small\"\n                :disabled=\"!src\"\n                @click=\"handlerToolbar('scaleY')\"\n              >\n                <ll-icon icon-name=\"icon-flip-vertical\" />\n              </ll-button>\n            </ll-tooltip>\n            <ll-tooltip :tip=\"'放大'\" placement=\"bottom\">\n              <ll-button\n                type=\"primary\"\n                size=\"small\"\n                :disabled=\"!src\"\n                @click=\"handlerToolbar('zoom', 0.1)\"\n              >\n                <ll-icon icon-name=\"icon-amplify1\" />\n              </ll-button>\n            </ll-tooltip>\n            <ll-tooltip :tip=\"'缩小'\" placement=\"bottom\">\n              <ll-button\n                type=\"primary\"\n                size=\"small\"\n                :disabled=\"!src\"\n                @click=\"handlerToolbar('zoom', -0.1)\"\n              >\n                <ll-icon icon-name=\"icon-scale\" />\n              </ll-button>\n            </ll-tooltip>\n          </ll-space>\n        </div>\n      </div>\n      <div :class=\"bem.e('right')\">\n        <div :class=\"bem.e('preview')\">\n          <img v-if=\"previewSource\" :src=\"previewSource\" :alt=\"'预览'\" />\n        </div>\n        <template v-if=\"previewSource\">\n          <div :class=\"bem.e('group')\">\n            <ll-image\n              :preview=\"false\"\n              :src=\"previewSource\"\n              :width=\"32\"\n              :height=\"32\"\n            />\n            <ll-image\n              :preview=\"false\"\n              :src=\"previewSource\"\n              :width=\"48\"\n              :height=\"48\"\n            />\n            <ll-image\n              :preview=\"false\"\n              :src=\"previewSource\"\n              :width=\"64\"\n              :height=\"64\"\n            />\n            <ll-image\n              :preview=\"false\"\n              :src=\"previewSource\"\n              :width=\"80\"\n              :height=\"80\"\n            />\n          </div>\n        </template>\n      </div>\n    </div>\n  </ll-modal>\n  <div\n    :class=\"bem.e('cropper-avatar')\"\n    :style=\"{\n      cursor: props.disabled ? 'not-allowed' : 'pointer'\n    }\"\n    @click=\"handleOpen\"\n  >\n    <slot :src=\"avatar\">\n      <ll-image :src=\"avatar\" :width=\"64\" :height=\"64\" :preview=\"false\" />\n    </slot>\n  </div>\n</template>\n<script lang=\"ts\" setup>\n//@ts-ignore\nimport type Cropper from 'cropperjs'\n\nimport { ref, watch } from 'vue'\nimport { createNamespace, dataURLtoBlob, type Nullable } from '@ll-plus/utils'\nimport CropperImage from './cropper-image.vue'\nimport {\n  cropperModalProps,\n  cropperModalEmits,\n  type CropendResult\n} from './cropper-image'\n\ndefineOptions({ name: 'LlCropperModal' })\nconst props = defineProps(cropperModalProps)\nconst emits = defineEmits(cropperModalEmits)\nconst bem = createNamespace('cropper-modal')\nconst src = ref(props.avatar || '')\nconst avatar = ref(props.avatar || '')\nconst open = ref(false)\nconst previewSource = ref('')\n\nconst cropper = ref<Nullable<Cropper>>()\nlet scaleX = 1\nlet scaleY = 1\n\n// Block upload\nfunction handleBeforeUpload(file: File) {\n  const reader = new FileReader()\n  reader.readAsDataURL(file)\n  src.value = ''\n  previewSource.value = ''\n  reader.onload = function (e) {\n    src.value = (e.target?.result as string) ?? ''\n    // filename = file.name\n  }\n  return false\n}\nfunction handleOpen() {\n  if (props.disabled) return\n  open.value = true\n}\nfunction handleCropend({ imgBase64 }: CropendResult) {\n  previewSource.value = imgBase64\n}\n\nfunction handleReady(cropperInstance: Cropper) {\n  cropper.value = cropperInstance\n}\nfunction handlerToolbar(event: string, arg?: number) {\n  if (event === 'scaleX') {\n    scaleX = arg = scaleX === -1 ? 1 : -1\n  }\n  if (event === 'scaleY') {\n    scaleY = arg = scaleY === -1 ? 1 : -1\n  }\n  cropper?.value?.[event]?.(arg)\n}\n\nasync function handleOk() {\n  const blob = dataURLtoBlob(previewSource.value)\n  emits('confirm', { blob, previewSource: previewSource.value })\n  avatar.value = previewSource.value\n  open.value = false\n}\n\nwatch(\n  () => props.avatar,\n  val => {\n    console.log({ val })\n    src.value = val\n    avatar.value = val\n  },\n  {\n    immediate: true\n  }\n)\n</script>\n"],"names":["createNamespace","ref","dataURLtoBlob","watch"],"mappings":"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"}
+{"version":3,"file":"cropper-modal.vue2.js","sources":["../../../../../../packages/components/cropper/src/cropper-modal.vue"],"sourcesContent":["<template>\n  <ll-modal\n    :open=\"open\"\n    :title=\"props.title\"\n    :width=\"props.width\"\n    :keyboard=\"false\"\n    :mask-closable=\"false\"\n    :ok-text=\"'确定'\"\n    :loading=\"uploadLoading\"\n    @cancel=\"open = false\"\n    @ok=\"handleOk\"\n  >\n    <div :class=\"bem.b()\">\n      <div :class=\"bem.e('left')\">\n        <div :class=\"bem.e('cropper')\">\n          <cropper-image\n            v-if=\"src && open\"\n            :src=\"src\"\n            height=\"300px\"\n            :circled=\"circled\"\n            :loading=\"uploadLoading\"\n            @cropend=\"handleCropend\"\n            @on-ready=\"handleReady\"\n          />\n        </div>\n        <div :class=\"bem.e('toolbar')\">\n          <a-upload\n            :file-list=\"[]\"\n            accept=\"image/*\"\n            :before-upload=\"handleBeforeUpload\"\n          >\n            <ll-tooltip :title=\"'选择图片'\" placement=\"bottom\">\n              <ll-button\n                type=\"primary\"\n                size=\"small\"\n                :disabled=\"uploadLoading\"\n                @click=\"handlerToolbar('reset')\"\n              >\n                <ll-icon icon-name=\"icon-upload\" />\n              </ll-button>\n            </ll-tooltip>\n          </a-upload>\n          <ll-space>\n            <ll-tooltip :tip=\"'重置'\" placement=\"bottom\">\n              <ll-button\n                type=\"primary\"\n                size=\"small\"\n                :disabled=\"!src || uploadLoading\"\n                @click=\"handlerToolbar('reset')\"\n              >\n                <ll-icon icon-name=\"icon-refresh\" />\n              </ll-button>\n            </ll-tooltip>\n            <ll-tooltip :tip=\"'逆时针旋转'\" placement=\"bottom\">\n              <ll-button\n                type=\"primary\"\n                size=\"small\"\n                :disabled=\"!src || uploadLoading\"\n                @click=\"handlerToolbar('rotate', -45)\"\n              >\n                <ll-icon icon-name=\"icon-counter-clockwise\" />\n              </ll-button>\n            </ll-tooltip>\n            <ll-tooltip :tip=\"'顺时针旋转'\" placement=\"bottom\">\n              <ll-button\n                type=\"primary\"\n                size=\"small\"\n                :disabled=\"!src || uploadLoading\"\n                @click=\"handlerToolbar('rotate', 45)\"\n              >\n                <ll-icon icon-name=\"icon-flip-horizontal\" />\n              </ll-button>\n            </ll-tooltip>\n            <ll-tooltip :tip=\"'水平翻转'\" placement=\"bottom\">\n              <ll-button\n                type=\"primary\"\n                size=\"small\"\n                :disabled=\"!src || uploadLoading\"\n                @click=\"handlerToolbar('scaleX')\"\n              >\n                <ll-icon icon-name=\"icon-flip-horizontal\" />\n              </ll-button>\n            </ll-tooltip>\n            <ll-tooltip :tip=\"'垂直翻转'\" placement=\"bottom\">\n              <ll-button\n                type=\"primary\"\n                size=\"small\"\n                :disabled=\"!src || uploadLoading\"\n                @click=\"handlerToolbar('scaleY')\"\n              >\n                <ll-icon icon-name=\"icon-flip-vertical\" />\n              </ll-button>\n            </ll-tooltip>\n            <ll-tooltip :tip=\"'放大'\" placement=\"bottom\">\n              <ll-button\n                type=\"primary\"\n                size=\"small\"\n                :disabled=\"!src || uploadLoading\"\n                @click=\"handlerToolbar('zoom', 0.1)\"\n              >\n                <ll-icon icon-name=\"icon-amplify1\" />\n              </ll-button>\n            </ll-tooltip>\n            <ll-tooltip :tip=\"'缩小'\" placement=\"bottom\">\n              <ll-button\n                type=\"primary\"\n                size=\"small\"\n                :disabled=\"!src || uploadLoading\"\n                @click=\"handlerToolbar('zoom', -0.1)\"\n              >\n                <ll-icon icon-name=\"icon-scale\" />\n              </ll-button>\n            </ll-tooltip>\n          </ll-space>\n        </div>\n      </div>\n      <div :class=\"bem.e('right')\">\n        <a-spin :spinning=\"uploadLoading\">\n          <div :class=\"bem.e('preview')\">\n            <img v-if=\"previewSource\" :src=\"previewSource\" :alt=\"'预览'\" />\n          </div>\n          <template v-if=\"previewSource\">\n            <div :class=\"bem.e('group')\">\n              <ll-image\n                :preview=\"false\"\n                :src=\"previewSource\"\n                :width=\"32\"\n                :height=\"32\"\n              />\n              <ll-image\n                :preview=\"false\"\n                :src=\"previewSource\"\n                :width=\"48\"\n                :height=\"48\"\n              />\n              <ll-image\n                :preview=\"false\"\n                :src=\"previewSource\"\n                :width=\"64\"\n                :height=\"64\"\n              />\n              <ll-image\n                :preview=\"false\"\n                :src=\"previewSource\"\n                :width=\"80\"\n                :height=\"80\"\n              />\n            </div>\n          </template>\n        </a-spin>\n      </div>\n    </div>\n  </ll-modal>\n  <div\n    :class=\"bem.e('cropper-avatar')\"\n    :style=\"{\n      cursor: props.disabled ? 'not-allowed' : 'pointer',\n      display: 'inline-block'\n    }\"\n    @click=\"handleOpen\"\n  >\n    <a-spin :spinning=\"loading\" style=\"display: inline-block\">\n      <slot :src=\"avatar\">\n        <ll-image :src=\"avatar\" :width=\"64\" :height=\"64\" :preview=\"false\" />\n      </slot>\n    </a-spin>\n  </div>\n</template>\n<script lang=\"ts\" setup>\n//@ts-ignore\nimport type Cropper from 'cropperjs'\n\nimport { ref, watch, watchEffect } from 'vue'\nimport { createNamespace, dataURLtoBlob, type Nullable } from '@ll-plus/utils'\nimport CropperImage from './cropper-image.vue'\nimport {\n  cropperModalProps,\n  cropperModalEmits,\n  type CropendResult\n} from './cropper-image'\n\ndefineOptions({ name: 'LlCropperModal' })\nconst props = defineProps(cropperModalProps)\nconst emits = defineEmits(cropperModalEmits)\nconst bem = createNamespace('cropper-modal')\nconst src = ref(props.avatar || '')\nconst avatar = ref(props.avatar || '')\nconst open = ref(false)\nconst previewSource = ref('')\nconst loading = ref<boolean>(props.loading)\nconst uploadLoading = ref(false)\n\nconst cropper = ref<Nullable<Cropper>>()\nlet scaleX = 1\nlet scaleY = 1\n\n// Block upload\nfunction handleBeforeUpload(file: File) {\n  const reader = new FileReader()\n  reader.readAsDataURL(file)\n  uploadLoading.value = true\n  src.value = ''\n  previewSource.value = ''\n  reader.onload = function (e) {\n    src.value = (e.target?.result as string) ?? ''\n    uploadLoading.value = false\n    // filename = file.name\n  }\n  reader.onerror = () => {\n    uploadLoading.value = false\n  }\n  return false\n}\nfunction handleOpen() {\n  if (props.disabled) return\n  open.value = true\n}\nfunction handleCropend({ imgBase64 }: CropendResult) {\n  previewSource.value = imgBase64\n}\n\nfunction handleReady(cropperInstance: Cropper) {\n  cropper.value = cropperInstance\n}\nfunction handlerToolbar(event: string, arg?: number) {\n  if (event === 'scaleX') {\n    scaleX = arg = scaleX === -1 ? 1 : -1\n  }\n  if (event === 'scaleY') {\n    scaleY = arg = scaleY === -1 ? 1 : -1\n  }\n  cropper?.value?.[event]?.(arg)\n}\n\nasync function handleOk() {\n  const blob = dataURLtoBlob(previewSource.value)\n  emits('confirm', { blob, previewSource: previewSource.value })\n  avatar.value = previewSource.value\n  open.value = false\n}\n\nconst cleanValue = () => {\n  src.value = ''\n  avatar.value = ''\n}\n\nwatch(\n  () => props.avatar,\n  val => {\n    src.value = val\n    avatar.value = val\n  },\n  {\n    immediate: true\n  }\n)\nwatchEffect(() => {\n  loading.value = props.loading\n})\ndefineExpose({\n  cleanValue\n})\n</script>\n"],"names":["createNamespace","ref","dataURLtoBlob","watch","watchEffect"],"mappings":"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"}

package/lib/packages/components/form/src/components/form-component.vue2.js

@@ -13,10 +13,11 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "form-component",
   props: formComponent.formComponentProps,
   emits: formComponent.formComponentEmits,
-  setup(__props, { emit: __emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emits = __emit;
     const formData = vue.reactive(props.formData);
+    const componentRef = vue.ref();
     const getBindValue = (item) => {
       const obj = { ...item };
       return lodashEs.omit(obj, ["label", "onChange", "change"]);
@@ -31,13 +32,29 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
       emits("changeField", item);
     };
+    const focus = async () => {
+      await vue.nextTick();
+      console.log(componentRef.value);
+      componentRef.value?.focus();
+    };
+    const getItem = () => {
+      return props.item;
+    };
+    __expose({
+      focus,
+      getItem
+    });
     return (_ctx, _cache) => {
       return vue.unref(components.checkedType).includes(_ctx.item.type) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(`ll-${_ctx.item.type}`), vue.mergeProps({
         key: 0,
+        ref_key: "componentRef",
+        ref: componentRef,
         checked: formData[_ctx.item.key],
         "onUpdate:checked": _cache[0] || (_cache[0] = ($event) => formData[_ctx.item.key] = $event)
       }, getBindValue(_ctx.item), { onChange: handleChange }), null, 16, ["checked"])) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(`ll-${_ctx.item.type}`), vue.mergeProps({
         key: 1,
+        ref_key: "componentRef",
+        ref: componentRef,
         value: formData[_ctx.item.key],
         "onUpdate:value": _cache[1] || (_cache[1] = ($event) => formData[_ctx.item.key] = $event)
       }, getBindValue(_ctx.item), { onChange: handleChange }), null, 16, ["value"]));

package/lib/packages/components/form/src/components/form-component.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-component.vue2.js","sources":["../../../../../../../packages/components/form/src/components/form-component.vue"],"sourcesContent":["<template>\n  <template v-if=\"checkedType.includes(item.type)\">\n    <component\n      :is=\"`ll-${item.type}`\"\n      v-model:checked=\"formData[item.key]\"\n      v-bind=\"getBindValue(item)\"\n      @change=\"handleChange\"\n    />\n  </template>\n  <template v-else>\n    <component\n      :is=\"`ll-${item.type}`\"\n      v-model:value=\"formData[item.key]\"\n      v-bind=\"getBindValue(item)\"\n      @change=\"handleChange\"\n    />\n  </template>\n</template>\n\n<script setup lang=\"ts\">\nimport { reactive } from 'vue'\nimport { omit, has } from 'lodash-es'\nimport {\n  formComponentProps,\n  formComponentEmits,\n  checkedType,\n  type FormColumn\n} from '../config'\n\nconst props = defineProps(formComponentProps)\n\nconst emits = defineEmits(formComponentEmits)\n\nconst formData = reactive(props.formData)\n\nconst getBindValue = (item: FormColumn) => {\n  const obj = { ...item }\n  return omit(obj, ['label', 'onChange', 'change'])\n}\n\nconst handleChange = (...arg) => {\n  const item: FormColumn = props.item\n  if (has(item, 'change')) {\n    item.change(...arg)\n  }\n  if (has(item, 'onChange')) {\n    item.onChange(...arg)\n  }\n  emits('changeField', item)\n}\n</script>\n"],"names":["reactive","omit","has"],"mappings":";;;;;;;;;;;;;;;;AA6BA,IAAA,MAAM,KAAQ,GAAA,OAAA,CAAA;AAEd,IAAA,MAAM,KAAQ,GAAA,MAAA,CAAA;AAEd,IAAM,MAAA,QAAA,GAAWA,YAAS,CAAA,KAAA,CAAM,QAAQ,CAAA,CAAA;AAExC,IAAM,MAAA,YAAA,GAAe,CAAC,IAAqB,KAAA;AACzC,MAAM,MAAA,GAAA,GAAM,EAAE,GAAG,IAAK,EAAA,CAAA;AACtB,MAAA,OAAOC,cAAK,GAAK,EAAA,CAAC,OAAS,EAAA,UAAA,EAAY,QAAQ,CAAC,CAAA,CAAA;AAAA,KAClD,CAAA;AAEA,IAAM,MAAA,YAAA,GAAe,IAAI,GAAQ,KAAA;AAC/B,MAAA,MAAM,OAAmB,KAAM,CAAA,IAAA,CAAA;AAC/B,MAAI,IAAAC,YAAA,CAAI,IAAM,EAAA,QAAQ,CAAG,EAAA;AACvB,QAAK,IAAA,CAAA,MAAA,CAAO,GAAG,GAAG,CAAA,CAAA;AAAA,OACpB;AACA,MAAI,IAAAA,YAAA,CAAI,IAAM,EAAA,UAAU,CAAG,EAAA;AACzB,QAAK,IAAA,CAAA,QAAA,CAAS,GAAG,GAAG,CAAA,CAAA;AAAA,OACtB;AACA,MAAA,KAAA,CAAM,eAAe,IAAI,CAAA,CAAA;AAAA,KAC3B,CAAA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"form-component.vue2.js","sources":["../../../../../../../packages/components/form/src/components/form-component.vue"],"sourcesContent":["<template>\n  <template v-if=\"checkedType.includes(item.type)\">\n    <component\n      :is=\"`ll-${item.type}`\"\n      ref=\"componentRef\"\n      v-model:checked=\"formData[item.key]\"\n      v-bind=\"getBindValue(item)\"\n      @change=\"handleChange\"\n    />\n  </template>\n  <template v-else>\n    <component\n      :is=\"`ll-${item.type}`\"\n      ref=\"componentRef\"\n      v-model:value=\"formData[item.key]\"\n      v-bind=\"getBindValue(item)\"\n      @change=\"handleChange\"\n    />\n  </template>\n</template>\n\n<script setup lang=\"ts\">\nimport { nextTick, reactive, ref } from 'vue'\nimport { omit, has } from 'lodash-es'\nimport {\n  formComponentProps,\n  formComponentEmits,\n  checkedType,\n  type FormColumn\n} from '../config'\n\nconst props = defineProps(formComponentProps)\n\nconst emits = defineEmits(formComponentEmits)\n\nconst formData = reactive(props.formData)\n\nconst componentRef = ref()\n\nconst getBindValue = (item: FormColumn) => {\n  const obj = { ...item }\n  return omit(obj, ['label', 'onChange', 'change'])\n}\n\nconst handleChange = (...arg) => {\n  const item: FormColumn = props.item\n  if (has(item, 'change')) {\n    item.change(...arg)\n  }\n  if (has(item, 'onChange')) {\n    item.onChange(...arg)\n  }\n  emits('changeField', item)\n}\n// 获取焦点\nconst focus = async () => {\n  await nextTick()\n  console.log(componentRef.value)\n  componentRef.value?.focus()\n}\n\nconst getItem = () => {\n  return props.item\n}\ndefineExpose({\n  focus,\n  getItem\n})\n</script>\n"],"names":["reactive","ref","omit","has","nextTick"],"mappings":";;;;;;;;;;;;;;;;AA+BA,IAAA,MAAM,KAAQ,GAAA,OAAA,CAAA;AAEd,IAAA,MAAM,KAAQ,GAAA,MAAA,CAAA;AAEd,IAAM,MAAA,QAAA,GAAWA,YAAS,CAAA,KAAA,CAAM,QAAQ,CAAA,CAAA;AAExC,IAAA,MAAM,eAAeC,OAAI,EAAA,CAAA;AAEzB,IAAM,MAAA,YAAA,GAAe,CAAC,IAAqB,KAAA;AACzC,MAAM,MAAA,GAAA,GAAM,EAAE,GAAG,IAAK,EAAA,CAAA;AACtB,MAAA,OAAOC,cAAK,GAAK,EAAA,CAAC,OAAS,EAAA,UAAA,EAAY,QAAQ,CAAC,CAAA,CAAA;AAAA,KAClD,CAAA;AAEA,IAAM,MAAA,YAAA,GAAe,IAAI,GAAQ,KAAA;AAC/B,MAAA,MAAM,OAAmB,KAAM,CAAA,IAAA,CAAA;AAC/B,MAAI,IAAAC,YAAA,CAAI,IAAM,EAAA,QAAQ,CAAG,EAAA;AACvB,QAAK,IAAA,CAAA,MAAA,CAAO,GAAG,GAAG,CAAA,CAAA;AAAA,OACpB;AACA,MAAI,IAAAA,YAAA,CAAI,IAAM,EAAA,UAAU,CAAG,EAAA;AACzB,QAAK,IAAA,CAAA,QAAA,CAAS,GAAG,GAAG,CAAA,CAAA;AAAA,OACtB;AACA,MAAA,KAAA,CAAM,eAAe,IAAI,CAAA,CAAA;AAAA,KAC3B,CAAA;AAEA,IAAA,MAAM,QAAQ,YAAY;AACxB,MAAA,MAAMC,YAAS,EAAA,CAAA;AACf,MAAQ,OAAA,CAAA,GAAA,CAAI,aAAa,KAAK,CAAA,CAAA;AAC9B,MAAA,YAAA,CAAa,OAAO,KAAM,EAAA,CAAA;AAAA,KAC5B,CAAA;AAEA,IAAA,MAAM,UAAU,MAAM;AACpB,MAAA,OAAO,KAAM,CAAA,IAAA,CAAA;AAAA,KACf,CAAA;AACA,IAAa,QAAA,CAAA;AAAA,MACX,KAAA;AAAA,MACA,OAAA;AAAA,KACD,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;"}

package/lib/packages/components/form/src/config/form.js

@@ -43,6 +43,27 @@ const formProps = runtime.buildProps({
   loading: {
     type: Boolean,
     default: false
+  },
+  /**
+   * @description 自动聚焦
+   */
+  autoFocus: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * @description 是否全体禁用
+   */
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * @description 当某一规则校验不通过时，是否停止剩下的规则的校验
+   */
+  validateErrorStop: {
+    type: Boolean,
+    default: false
   }
 });
 const formEmits = {

package/lib/packages/components/form/src/config/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","sources":["../../../../../../../packages/components/form/src/config/form.ts"],"sourcesContent":["import { buildProps, definePropType } from '@ll-plus/utils'\n\nimport type { ExtractPropTypes } from 'vue'\nimport type {\n  FormItemProps,\n  RowProps,\n  ColProps,\n  FormProps as AntFormProps\n} from 'ant-design-vue'\nimport type { TooltipProps } from '@ll-plus/components'\nimport type Form from '../form.vue'\n\ntype FormType<T = any> = (\n  | 'input'\n  | 'input-number'\n  | 'cascader'\n  | 'checkbox'\n  | 'checkbox-group'\n  | 'code-editor'\n  | 'date-picker'\n  | 'time-picker'\n  | 'date-range'\n  | 'time-range'\n  | 'radio'\n  | 'radio-group'\n  | 'select'\n  | 'switch'\n  | 'textarea'\n  | 'upload-image'\n) &\n  T\n\nexport interface FormChangeEvent {\n  item: FormColumn\n  value: any\n  formData: FormData\n}\nexport interface BasicFormColumn extends FormItemProps {\n  label?: string\n  key: string\n  spanCol?: number | 24 // 一行几条\n  colOptions?: ColProps\n  tip?: string\n  tipConfig?: TooltipProps\n  type: FormType\n  unit?: string\n  change?: () => void\n  rowOptions?: RowProps\n  children?: FormColumn[]\n  [key: string]: any\n}\n\nexport type FormColumn<T = any> = BasicFormColumn & T\n\nexport type FormData = Record<string, any>\n\nexport const formProps = buildProps({\n  /**\n   * @description 表单项列表\n   */\n  formColumns: {\n    type: definePropType<FormColumn[]>(Array),\n    default: () => []\n  },\n  /**\n   * @description 展开的行变化时触发\n   */\n  formOptions: {\n    type: definePropType<AntFormProps>(Object),\n    default: () => ({\n      layout: 'horizontal'\n    })\n  },\n  /**\n   * @description 展开的行变化时触发\n   */\n  formData: {\n    type: definePropType<FormData>(Object),\n    default: () => ({})\n  },\n  /**\n   * @description 展开的行变化时触发\n   */\n  rowOptions: {\n    type: definePropType<RowProps>(Object),\n    default: () => ({\n      gutter: 16\n    })\n  },\n  /**\n   * @description 表单加载状态\n   */\n  loading: {\n    type: Boolean,\n    default: false\n  }\n} as const)\n\nexport const formEmits = {\n  /**\n   * @description 表单项值改变时触发\n   */\n  change: (params: FormChangeEvent) => !!params\n}\n\n// props\nexport type FormProps = ExtractPropTypes<typeof formProps>\n\n// emits\nexport type FormEmits = typeof formEmits\n\n// instance\nexport type FormInstance = InstanceType<typeof Form>\n"],"names":["buildProps","definePropType"],"mappings":";;;;;;AAwDO,MAAM,YAAYA,kBAAW,CAAA;AAAA;AAAA;AAAA;AAAA,EAIlC,WAAa,EAAA;AAAA,IACX,IAAA,EAAMC,uBAA6B,KAAK,CAAA;AAAA,IACxC,OAAA,EAAS,MAAM,EAAC;AAAA,GAClB;AAAA;AAAA;AAAA;AAAA,EAIA,WAAa,EAAA;AAAA,IACX,IAAA,EAAMA,uBAA6B,MAAM,CAAA;AAAA,IACzC,SAAS,OAAO;AAAA,MACd,MAAQ,EAAA,YAAA;AAAA,KACV,CAAA;AAAA,GACF;AAAA;AAAA;AAAA;AAAA,EAIA,QAAU,EAAA;AAAA,IACR,IAAA,EAAMA,uBAAyB,MAAM,CAAA;AAAA,IACrC,OAAA,EAAS,OAAO,EAAC,CAAA;AAAA,GACnB;AAAA;AAAA;AAAA;AAAA,EAIA,UAAY,EAAA;AAAA,IACV,IAAA,EAAMA,uBAAyB,MAAM,CAAA;AAAA,IACrC,SAAS,OAAO;AAAA,MACd,MAAQ,EAAA,EAAA;AAAA,KACV,CAAA;AAAA,GACF;AAAA;AAAA;AAAA;AAAA,EAIA,OAAS,EAAA;AAAA,IACP,IAAM,EAAA,OAAA;AAAA,IACN,OAAS,EAAA,KAAA;AAAA,GACX;AACF,CAAU,EAAA;AAEH,MAAM,SAAY,GAAA;AAAA;AAAA;AAAA;AAAA,EAIvB,MAAQ,EAAA,CAAC,MAA4B,KAAA,CAAC,CAAC,MAAA;AACzC;;;;;"}
+{"version":3,"file":"form.js","sources":["../../../../../../../packages/components/form/src/config/form.ts"],"sourcesContent":["import { buildProps, definePropType } from '@ll-plus/utils'\n\nimport type { ExtractPropTypes } from 'vue'\nimport type {\n  FormItemProps,\n  RowProps,\n  ColProps,\n  FormProps as AntFormProps\n} from 'ant-design-vue'\nimport type { TooltipProps } from '@ll-plus/components'\nimport type Form from '../form.vue'\n\ntype FormType<T = any> = (\n  | 'input'\n  | 'input-number'\n  | 'cascader'\n  | 'checkbox'\n  | 'checkbox-group'\n  | 'code-editor'\n  | 'date-picker'\n  | 'time-picker'\n  | 'date-range'\n  | 'time-range'\n  | 'radio'\n  | 'radio-group'\n  | 'select'\n  | 'switch'\n  | 'textarea'\n  | 'upload-image'\n) &\n  T\n\nexport interface FormChangeEvent {\n  item: FormColumn\n  value: any\n  formData: FormData\n}\nexport interface BasicFormColumn extends FormItemProps {\n  label?: string\n  key: string\n  spanCol?: number | 24 // 一行几条\n  colOptions?: ColProps\n  tip?: string\n  tipConfig?: TooltipProps\n  type: FormType\n  unit?: string\n  change?: () => void\n  rowOptions?: RowProps\n  children?: FormColumn[]\n  [key: string]: any\n}\n\nexport type FormColumn<T = any> = BasicFormColumn & T\n\nexport type FormData = Record<string, any>\n\nexport const formProps = buildProps({\n  /**\n   * @description 表单项列表\n   */\n  formColumns: {\n    type: definePropType<FormColumn[]>(Array),\n    default: () => []\n  },\n  /**\n   * @description 展开的行变化时触发\n   */\n  formOptions: {\n    type: definePropType<AntFormProps>(Object),\n    default: () => ({\n      layout: 'horizontal'\n    })\n  },\n  /**\n   * @description 展开的行变化时触发\n   */\n  formData: {\n    type: definePropType<FormData>(Object),\n    default: () => ({})\n  },\n  /**\n   * @description 展开的行变化时触发\n   */\n  rowOptions: {\n    type: definePropType<RowProps>(Object),\n    default: () => ({\n      gutter: 16\n    })\n  },\n  /**\n   * @description 表单加载状态\n   */\n  loading: {\n    type: Boolean,\n    default: false\n  },\n  /**\n   * @description 自动聚焦\n   */\n  autoFocus: {\n    type: Boolean,\n    default: false\n  },\n  /**\n   * @description 是否全体禁用\n   */\n  disabled: {\n    type: Boolean,\n    default: false\n  },\n  /**\n   * @description 当某一规则校验不通过时，是否停止剩下的规则的校验\n   */\n  validateErrorStop: {\n    type: Boolean,\n    default: false\n  }\n} as const)\n\nexport const formEmits = {\n  /**\n   * @description 表单项值改变时触发\n   */\n  change: (params: FormChangeEvent) => !!params\n}\n\n// props\nexport type FormProps = ExtractPropTypes<typeof formProps>\n\n// emits\nexport type FormEmits = typeof formEmits\n\n// instance\nexport type FormInstance = InstanceType<typeof Form>\n"],"names":["buildProps","definePropType"],"mappings":";;;;;;AAwDO,MAAM,YAAYA,kBAAW,CAAA;AAAA;AAAA;AAAA;AAAA,EAIlC,WAAa,EAAA;AAAA,IACX,IAAA,EAAMC,uBAA6B,KAAK,CAAA;AAAA,IACxC,OAAA,EAAS,MAAM,EAAC;AAAA,GAClB;AAAA;AAAA;AAAA;AAAA,EAIA,WAAa,EAAA;AAAA,IACX,IAAA,EAAMA,uBAA6B,MAAM,CAAA;AAAA,IACzC,SAAS,OAAO;AAAA,MACd,MAAQ,EAAA,YAAA;AAAA,KACV,CAAA;AAAA,GACF;AAAA;AAAA;AAAA;AAAA,EAIA,QAAU,EAAA;AAAA,IACR,IAAA,EAAMA,uBAAyB,MAAM,CAAA;AAAA,IACrC,OAAA,EAAS,OAAO,EAAC,CAAA;AAAA,GACnB;AAAA;AAAA;AAAA;AAAA,EAIA,UAAY,EAAA;AAAA,IACV,IAAA,EAAMA,uBAAyB,MAAM,CAAA;AAAA,IACrC,SAAS,OAAO;AAAA,MACd,MAAQ,EAAA,EAAA;AAAA,KACV,CAAA;AAAA,GACF;AAAA;AAAA;AAAA;AAAA,EAIA,OAAS,EAAA;AAAA,IACP,IAAM,EAAA,OAAA;AAAA,IACN,OAAS,EAAA,KAAA;AAAA,GACX;AAAA;AAAA;AAAA;AAAA,EAIA,SAAW,EAAA;AAAA,IACT,IAAM,EAAA,OAAA;AAAA,IACN,OAAS,EAAA,KAAA;AAAA,GACX;AAAA;AAAA;AAAA;AAAA,EAIA,QAAU,EAAA;AAAA,IACR,IAAM,EAAA,OAAA;AAAA,IACN,OAAS,EAAA,KAAA;AAAA,GACX;AAAA;AAAA;AAAA;AAAA,EAIA,iBAAmB,EAAA;AAAA,IACjB,IAAM,EAAA,OAAA;AAAA,IACN,OAAS,EAAA,KAAA;AAAA,GACX;AACF,CAAU,EAAA;AAEH,MAAM,SAAY,GAAA;AAAA;AAAA;AAAA;AAAA,EAIvB,MAAQ,EAAA,CAAC,MAA4B,KAAA,CAAC,CAAC,MAAA;AACzC;;;;;"}

package/lib/packages/components/form/src/form.vue2.js

@@ -22,9 +22,46 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const bem = createNamespace.createNamespace("form");
     const formData = vue.reactive(props.formData);
     const formRef = vue.ref();
+    const formComponents = vue.ref([]);
+    const computedFormColumns = vue.computed(() => {
+      return props.formColumns.map((e) => {
+        e.disabled = lodashEs.has(e, "disabled") ? e.disabled : props.disabled;
+        if (e.children && e.children.length) {
+          e.children.map((a) => {
+            a.disabled = lodashEs.has(a, "disabled") ? a.disabled : props.disabled;
+            return a;
+          });
+        }
+        return e;
+      });
+    });
+    const validateFields = vue.computed(() => {
+      return props.formColumns.filter((e) => e.required || lodashEs.has(e, "rules") && e.rules.length > 0).map((e) => {
+        return e.key;
+      });
+    });
+    const computedFormOptions = vue.computed(() => {
+      return {
+        scrollToFirstError: !props.validateErrorStop,
+        ...props.formOptions
+      };
+    });
     const id = vue.ref(`ll-form-${+/* @__PURE__ */ new Date()}`);
     const validate = async () => {
-      return await formRef.value.validateFields();
+      if (props.validateErrorStop) {
+        clearValidate();
+        let bool = true;
+        if (!validateFields.value.length)
+          return bool;
+        for (const i of validateFields.value) {
+          bool = await formRef.value.validateFields([i]);
+          if (!bool) {
+            return bool;
+          }
+        }
+      } else {
+        return await formRef.value.validateFields();
+      }
     };
     const resetFields = async () => {
       return await formRef.value.resetFields();
@@ -64,6 +101,18 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         immediate: true
       }
     );
+    vue.onMounted(async () => {
+      await vue.nextTick();
+      if (props.autoFocus) {
+        for (const element of formComponents.value) {
+          const item = element?.getItem();
+          if (["input", "textarea", "input-number"].includes(item.type)) {
+            element?.focus();
+            break;
+          }
+        }
+      }
+    });
     __expose({
       validate,
       resetFields,
@@ -87,7 +136,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
             spinning: props.loading
           }, {
             default: vue.withCtx(() => [
-              vue.createVNode(_component_a_form, vue.mergeProps(props.formOptions, {
+              vue.createVNode(_component_a_form, vue.mergeProps(computedFormOptions.value, {
                 id: id.value,
                 ref_key: "formRef",
                 ref: formRef,
@@ -102,7 +151,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                         (vue.openBlock(true), vue.createElementBlock(
                           vue.Fragment,
                           null,
-                          vue.renderList(props.formColumns, (item, index) => {
+                          vue.renderList(computedFormColumns.value, (item, index) => {
                             return vue.openBlock(), vue.createBlock(_component_a_col, vue.mergeProps({
                               key: index,
                               ref_for: true
@@ -213,6 +262,8 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                           /* FULL_PROPS, DYNAMIC_SLOTS */
                                         )) : (vue.openBlock(), vue.createBlock(formComponent.default, {
                                           key: 1,
+                                          ref_for: true,
+                                          ref: (el) => formComponents.value[index] = el,
                                           item,
                                           "form-data": formData,
                                           onChangeField: handleChangeField

package/lib/packages/components/form/src/form.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.vue2.js","sources":["../../../../../../packages/components/form/src/form.vue"],"sourcesContent":["<template>\n  <div :class=\"bem.b()\">\n    <a-spin :spinning=\"props.loading\">\n      <a-form\n        v-bind=\"props.formOptions\"\n        :id=\"id\"\n        ref=\"formRef\"\n        :model=\"props.formData\"\n      >\n        <a-row v-bind=\"props.rowOptions\">\n          <a-col\n            v-for=\"(item, index) in props.formColumns\"\n            :key=\"index\"\n            v-bind=\"item?.colOptions ?? {}\"\n            :span=\"item?.spanCol ?? 24\"\n          >\n            <slot name=\"formItem\" :item=\"item\" :index=\"index\">\n              <ll-form-item\n                :name=\"item?.key ?? index\"\n                :class=\"getFormItemClass(item)\"\n                v-bind=\"getBindValue(item)\"\n              >\n                <template #label>\n                  <slot name=\"label\" :item=\"item\" :index=\"index\">\n                    <span>{{ item.label }}</span>\n                    <span v-if=\"item?.tip\" :class=\"bem.e('tooltip-wrapper')\">\n                      <ll-tooltip\n                        style=\"margin-left: 8px\"\n                        :overlay-class-name=\"bem.e('tooltip')\"\n                        :arrow-point-at-center=\"true\"\n                        :max-width=\"item?.tipConfig?.maxWidth ?? 406\"\n                        :placement=\"item?.tipConfig?.placement ?? 'top'\"\n                        :tip=\"item.tip\"\n                        :font-size=\"'16px'\"\n                        v-bind=\"item?.tipConfig\"\n                      />\n                    </span>\n                  </slot>\n                </template>\n                <slot name=\"content\" :item=\"item\" :index=\"index\">\n                  <template v-if=\"!isEmpty(item.children)\">\n                    <a-row :gutter=\"5\" v-bind=\"item.rowOptions\">\n                      <a-col\n                        v-for=\"(child, childIndex) in item.children\"\n                        :key=\"childIndex\"\n                        :style=\"{\n                          display: 'flex',\n                          'align-items': 'center'\n                        }\"\n                        v-bind=\"item?.colOptions ?? {}\"\n                      >\n                        <slot name=\"children\" :item=\"child\" :index=\"index\">\n                          <form-component\n                            :item=\"child\"\n                            :form-data=\"formData\"\n                            @change-field=\"handleChangeField\"\n                          />\n                        </slot>\n                      </a-col>\n                    </a-row>\n                  </template>\n                  <form-component\n                    v-else\n                    :item=\"item\"\n                    :form-data=\"formData\"\n                    @change-field=\"handleChangeField\"\n                  />\n                </slot>\n              </ll-form-item>\n            </slot>\n          </a-col>\n        </a-row>\n      </a-form>\n    </a-spin>\n  </div>\n</template>\n<script setup lang=\"ts\">\nimport { reactive, ref, watch } from 'vue'\nimport { omit, isEmpty } from 'lodash-es'\nimport { formProps, formEmits, type FormColumn } from './config'\n\nimport type { NamePath } from 'ant-design-vue/es/form/interface'\n\nimport { createNamespace } from '@ll-plus/utils'\n\nimport formComponent from './components/form-component.vue'\n\n// 定义组件名称\ndefineOptions({ name: 'LlForm' })\n\n// Props\nconst props = defineProps(formProps)\n\nconst emits = defineEmits(formEmits)\n\nconst bem = createNamespace('form')\n\nconst formData = reactive(props.formData)\n\nconst formRef = ref()\n\nconst id = ref(`ll-form-${+new Date()}`)\n\nconst validate = async () => {\n  return await formRef.value.validateFields()\n}\n\nconst resetFields = async () => {\n  return await formRef.value.resetFields()\n}\n\nconst clearValidate = async (nameList?: NamePath[]) => {\n  return await formRef.value.clearValidate(nameList)\n}\n\nconst scrollToField = async (name: NamePath, options?: ScrollOptions) => {\n  return await formRef.value.scrollToField(name, options)\n}\n\nconst getBindValue = (item: FormColumn) => {\n  const obj = { ...item }\n  return omit(obj, ['label'])\n}\n\nconst getFormItemClass = (item = {} as FormColumn) => {\n  if (props.formOptions.layout === 'horizontal') {\n    if (item?.labelCol) {\n      return item.labelCol.span && item.labelCol.span >= 24\n        ? bem.is('label-top')\n        : bem.is('label-left')\n    } else {\n      return bem.is('label-left')\n    }\n  }\n  return bem.is('label-top')\n}\n\nconst handleChangeField = (item: FormColumn) => {\n  emits('change', { item, value: formData[item.key], formData })\n}\n\n// watch(\n//   () => formData,\n//   val => {\n//     emits('change', val)\n//   },\n//   {\n//     deep: true\n//   }\n// )\n\nwatch(\n  () => props.formData,\n  async val => {\n    for (const i in val) {\n      formData[i] = val[i]\n    }\n  },\n  {\n    deep: true,\n    immediate: true\n  }\n)\n\ndefineExpose({\n  validate,\n  resetFields,\n  clearValidate,\n  scrollToField\n})\n</script>\n"],"names":["createNamespace","reactive","ref","omit","watch"],"mappings":"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"}
+{"version":3,"file":"form.vue2.js","sources":["../../../../../../packages/components/form/src/form.vue"],"sourcesContent":["<template>\n  <div :class=\"bem.b()\">\n    <a-spin :spinning=\"props.loading\">\n      <a-form\n        v-bind=\"computedFormOptions\"\n        :id=\"id\"\n        ref=\"formRef\"\n        :model=\"props.formData\"\n      >\n        <a-row v-bind=\"props.rowOptions\">\n          <a-col\n            v-for=\"(item, index) in computedFormColumns\"\n            :key=\"index\"\n            v-bind=\"item?.colOptions ?? {}\"\n            :span=\"item?.spanCol ?? 24\"\n          >\n            <slot name=\"formItem\" :item=\"item\" :index=\"index\">\n              <ll-form-item\n                :name=\"item?.key ?? index\"\n                :class=\"getFormItemClass(item)\"\n                v-bind=\"getBindValue(item)\"\n              >\n                <template #label>\n                  <slot name=\"label\" :item=\"item\" :index=\"index\">\n                    <span>{{ item.label }}</span>\n                    <span v-if=\"item?.tip\" :class=\"bem.e('tooltip-wrapper')\">\n                      <ll-tooltip\n                        style=\"margin-left: 8px\"\n                        :overlay-class-name=\"bem.e('tooltip')\"\n                        :arrow-point-at-center=\"true\"\n                        :max-width=\"item?.tipConfig?.maxWidth ?? 406\"\n                        :placement=\"item?.tipConfig?.placement ?? 'top'\"\n                        :tip=\"item.tip\"\n                        :font-size=\"'16px'\"\n                        v-bind=\"item?.tipConfig\"\n                      />\n                    </span>\n                  </slot>\n                </template>\n                <slot name=\"content\" :item=\"item\" :index=\"index\">\n                  <template v-if=\"!isEmpty(item.children)\">\n                    <a-row :gutter=\"5\" v-bind=\"item.rowOptions\">\n                      <a-col\n                        v-for=\"(child, childIndex) in item.children\"\n                        :key=\"childIndex\"\n                        :style=\"{\n                          display: 'flex',\n                          'align-items': 'center'\n                        }\"\n                        v-bind=\"item?.colOptions ?? {}\"\n                      >\n                        <slot name=\"children\" :item=\"child\" :index=\"index\">\n                          <form-component\n                            :item=\"child\"\n                            :form-data=\"formData\"\n                            @change-field=\"handleChangeField\"\n                          />\n                        </slot>\n                      </a-col>\n                    </a-row>\n                  </template>\n                  <form-component\n                    v-else\n                    :ref=\"el => (formComponents[index] = el)\"\n                    :item=\"item\"\n                    :form-data=\"formData\"\n                    @change-field=\"handleChangeField\"\n                  />\n                </slot>\n              </ll-form-item>\n            </slot>\n          </a-col>\n        </a-row>\n      </a-form>\n    </a-spin>\n  </div>\n</template>\n<script setup lang=\"ts\">\nimport { reactive, ref, watch, onMounted, nextTick, computed } from 'vue'\nimport { omit, isEmpty, has } from 'lodash-es'\nimport { formProps, formEmits, type FormColumn } from './config'\n\nimport type { NamePath } from 'ant-design-vue/es/form/interface'\n\nimport { createNamespace } from '@ll-plus/utils'\n\nimport formComponent from './components/form-component.vue'\n\n// 定义组件名称\ndefineOptions({ name: 'LlForm' })\n\n// Props\nconst props = defineProps(formProps)\n\nconst emits = defineEmits(formEmits)\n\nconst bem = createNamespace('form')\n\nconst formData = reactive(props.formData)\n\nconst formRef = ref()\n\nconst formComponents = ref<InstanceType<typeof formComponent>[]>([])\n\nconst computedFormColumns = computed(() => {\n  return props.formColumns.map(e => {\n    e.disabled = has(e, 'disabled') ? e.disabled : props.disabled\n    if (e.children && e.children.length) {\n      e.children.map(a => {\n        a.disabled = has(a, 'disabled') ? a.disabled : props.disabled\n        return a\n      })\n    }\n    return e\n  })\n})\n\nconst validateFields = computed(() => {\n  return props.formColumns\n    .filter(e => e.required || (has(e, 'rules') && e.rules.length > 0))\n    .map(e => {\n      return e.key\n    })\n})\n\nconst computedFormOptions = computed(() => {\n  return {\n    scrollToFirstError: !props.validateErrorStop,\n    ...props.formOptions\n  }\n})\n\nconst id = ref(`ll-form-${+new Date()}`)\n\nconst validate = async () => {\n  if (props.validateErrorStop) {\n    clearValidate()\n    let bool = true\n    if (!validateFields.value.length) return bool\n    for (const i of validateFields.value) {\n      bool = await formRef.value.validateFields([i])\n      if (!bool) {\n        return bool\n      }\n    }\n  } else {\n    return await formRef.value.validateFields()\n  }\n}\n\nconst resetFields = async () => {\n  return await formRef.value.resetFields()\n}\n\nconst clearValidate = async (nameList?: NamePath[]) => {\n  return await formRef.value.clearValidate(nameList)\n}\n\nconst scrollToField = async (name: NamePath, options?: ScrollOptions) => {\n  return await formRef.value.scrollToField(name, options)\n}\n\nconst getBindValue = (item: FormColumn) => {\n  const obj = { ...item }\n  return omit(obj, ['label'])\n}\n\nconst getFormItemClass = (item = {} as FormColumn) => {\n  if (props.formOptions.layout === 'horizontal') {\n    if (item?.labelCol) {\n      return item.labelCol.span && item.labelCol.span >= 24\n        ? bem.is('label-top')\n        : bem.is('label-left')\n    } else {\n      return bem.is('label-left')\n    }\n  }\n  return bem.is('label-top')\n}\n\nconst handleChangeField = (item: FormColumn) => {\n  emits('change', { item, value: formData[item.key], formData })\n}\n\nwatch(\n  () => props.formData,\n  async val => {\n    for (const i in val) {\n      formData[i] = val[i]\n    }\n  },\n  {\n    deep: true,\n    immediate: true\n  }\n)\n\nonMounted(async () => {\n  await nextTick()\n  if (props.autoFocus) {\n    for (const element of formComponents.value) {\n      const item = element?.getItem()\n      if (['input', 'textarea', 'input-number'].includes(item.type)) {\n        element?.focus()\n        break\n      }\n    }\n  }\n})\n\ndefineExpose({\n  validate,\n  resetFields,\n  clearValidate,\n  scrollToField\n})\n</script>\n"],"names":["createNamespace","reactive","ref","computed","has","omit","watch","onMounted","nextTick"],"mappings":"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"}