ll-plus 2.6.17 → 2.6.19

package/es/packages/components/cropper/src/cropper-modal.vue2.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch, resolveComponent, openBlock, createElementBlock, Fragment, createVNode, withCtx, createElementVNode, normalizeClass, unref, createBlock, createCommentVNode, normalizeStyle, renderSlot } from 'vue';
+import { defineComponent, ref, watch, watchEffect, resolveComponent, openBlock, createElementBlock, Fragment, createVNode, withCtx, createElementVNode, normalizeClass, unref, createBlock, createCommentVNode, normalizeStyle, renderSlot } from 'vue';
 import '../../../utils/index.mjs';
 import CropperImage from './cropper-image.vue.mjs';
 import { cropperModalProps, cropperModalEmits } from './cropper-image.mjs';
@@ -12,7 +12,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "cropper-modal",
   props: cropperModalProps,
   emits: cropperModalEmits,
-  setup(__props, { emit: __emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emits = __emit;
     const bem = createNamespace("cropper-modal");
@@ -20,16 +20,23 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const avatar = ref(props.avatar || "");
     const open = ref(false);
     const previewSource = ref("");
+    const loading = ref(props.loading);
+    const uploadLoading = ref(false);
     const cropper = 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;
     }
@@ -59,10 +66,13 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       avatar.value = previewSource.value;
       open.value = false;
     }
+    const cleanValue = () => {
+      src.value = "";
+      avatar.value = "";
+    };
     watch(
       () => props.avatar,
       (val) => {
-        console.log({ val });
         src.value = val;
         avatar.value = val;
       },
@@ -70,6 +80,12 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         immediate: true
       }
     );
+    watchEffect(() => {
+      loading.value = props.loading;
+    });
+    __expose({
+      cleanValue
+    });
     return (_ctx, _cache) => {
       const _component_ll_icon = resolveComponent("ll-icon");
       const _component_ll_button = resolveComponent("ll-button");
@@ -77,6 +93,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       const _component_a_upload = resolveComponent("a-upload");
       const _component_ll_space = resolveComponent("ll-space");
       const _component_ll_image = resolveComponent("ll-image");
+      const _component_a_spin = resolveComponent("a-spin");
       const _component_ll_modal = resolveComponent("ll-modal");
       return openBlock(), createElementBlock(
         Fragment,
@@ -89,6 +106,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             keyboard: false,
             "mask-closable": false,
             "ok-text": "\u786E\u5B9A",
+            loading: uploadLoading.value,
             onCancel: _cache[8] || (_cache[8] = ($event) => open.value = false),
             onOk: handleOk
           }, {
@@ -116,9 +134,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                             src: src.value,
                             height: "300px",
                             circled: _ctx.circled,
+                            loading: uploadLoading.value,
                             onCropend: handleCropend,
                             onOnReady: handleReady
-                          }, null, 8, ["src", "circled"])) : createCommentVNode("v-if", true)
+                          }, null, 8, ["src", "circled", "loading"])) : createCommentVNode("v-if", true)
                         ],
                         2
                         /* CLASS */
@@ -143,6 +162,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                                   createVNode(_component_ll_button, {
                                     type: "primary",
                                     size: "small",
+                                    disabled: uploadLoading.value,
                                     onClick: _cache[0] || (_cache[0] = ($event) => handlerToolbar("reset"))
                                   }, {
                                     default: withCtx(() => [
@@ -150,7 +170,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                                     ]),
                                     _: 1
                                     /* STABLE */
-                                  })
+                                  }, 8, ["disabled"])
                                 ]),
                                 _: 1
                                 /* STABLE */
@@ -169,7 +189,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                                   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: withCtx(() => [
@@ -190,7 +210,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                                   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: withCtx(() => [
@@ -211,7 +231,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                                   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: withCtx(() => [
@@ -232,7 +252,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                                   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: withCtx(() => [
@@ -253,7 +273,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                                   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: withCtx(() => [
@@ -274,7 +294,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                                   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: withCtx(() => [
@@ -295,7 +315,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                                   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: withCtx(() => [
@@ -326,56 +346,62 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                       class: normalizeClass(unref(bem).e("right"))
                     },
                     [
-                      createElementVNode(
-                        "div",
-                        {
-                          class: normalizeClass(unref(bem).e("preview"))
-                        },
-                        [
-                          previewSource.value ? (openBlock(), createElementBlock("img", {
-                            key: 0,
-                            src: previewSource.value,
-                            alt: "\u9884\u89C8"
-                          }, null, 8, _hoisted_1)) : createCommentVNode("v-if", true)
-                        ],
-                        2
-                        /* CLASS */
-                      ),
-                      previewSource.value ? (openBlock(), createElementBlock(
-                        "div",
-                        {
-                          key: 0,
-                          class: normalizeClass(unref(bem).e("group"))
-                        },
-                        [
-                          createVNode(_component_ll_image, {
-                            preview: false,
-                            src: previewSource.value,
-                            width: 32,
-                            height: 32
-                          }, null, 8, ["src"]),
-                          createVNode(_component_ll_image, {
-                            preview: false,
-                            src: previewSource.value,
-                            width: 48,
-                            height: 48
-                          }, null, 8, ["src"]),
-                          createVNode(_component_ll_image, {
-                            preview: false,
-                            src: previewSource.value,
-                            width: 64,
-                            height: 64
-                          }, null, 8, ["src"]),
-                          createVNode(_component_ll_image, {
-                            preview: false,
-                            src: previewSource.value,
-                            width: 80,
-                            height: 80
-                          }, null, 8, ["src"])
-                        ],
-                        2
-                        /* CLASS */
-                      )) : createCommentVNode("v-if", true)
+                      createVNode(_component_a_spin, { spinning: uploadLoading.value }, {
+                        default: withCtx(() => [
+                          createElementVNode(
+                            "div",
+                            {
+                              class: normalizeClass(unref(bem).e("preview"))
+                            },
+                            [
+                              previewSource.value ? (openBlock(), createElementBlock("img", {
+                                key: 0,
+                                src: previewSource.value,
+                                alt: "\u9884\u89C8"
+                              }, null, 8, _hoisted_1)) : createCommentVNode("v-if", true)
+                            ],
+                            2
+                            /* CLASS */
+                          ),
+                          previewSource.value ? (openBlock(), createElementBlock(
+                            "div",
+                            {
+                              key: 0,
+                              class: normalizeClass(unref(bem).e("group"))
+                            },
+                            [
+                              createVNode(_component_ll_image, {
+                                preview: false,
+                                src: previewSource.value,
+                                width: 32,
+                                height: 32
+                              }, null, 8, ["src"]),
+                              createVNode(_component_ll_image, {
+                                preview: false,
+                                src: previewSource.value,
+                                width: 48,
+                                height: 48
+                              }, null, 8, ["src"]),
+                              createVNode(_component_ll_image, {
+                                preview: false,
+                                src: previewSource.value,
+                                width: 64,
+                                height: 64
+                              }, null, 8, ["src"]),
+                              createVNode(_component_ll_image, {
+                                preview: false,
+                                src: previewSource.value,
+                                width: 80,
+                                height: 80
+                              }, null, 8, ["src"])
+                            ],
+                            2
+                            /* CLASS */
+                          )) : createCommentVNode("v-if", true)
+                        ]),
+                        _: 1
+                        /* STABLE */
+                      }, 8, ["spinning"])
                     ],
                     2
                     /* CLASS */
@@ -387,25 +413,35 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
             /* STABLE */
-          }, 8, ["open", "title", "width"]),
+          }, 8, ["open", "title", "width", "loading"]),
           createElementVNode(
             "div",
             {
               class: normalizeClass(unref(bem).e("cropper-avatar")),
               style: normalizeStyle({
-                cursor: props.disabled ? "not-allowed" : "pointer"
+                cursor: props.disabled ? "not-allowed" : "pointer",
+                display: "inline-block"
               }),
               onClick: handleOpen
             },
             [
-              renderSlot(_ctx.$slots, "default", { src: avatar.value }, () => [
-                createVNode(_component_ll_image, {
-                  src: avatar.value,
-                  width: 64,
-                  height: 64,
-                  preview: false
-                }, null, 8, ["src"])
-              ])
+              createVNode(_component_a_spin, {
+                spinning: loading.value,
+                style: { "display": "inline-block" }
+              }, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "default", { src: avatar.value }, () => [
+                    createVNode(_component_ll_image, {
+                      src: avatar.value,
+                      width: 64,
+                      height: 64,
+                      preview: false
+                    }, null, 8, ["src"])
+                  ])
+                ]),
+                _: 3
+                /* FORWARDED */
+              }, 8, ["spinning"])
             ],
             6
             /* CLASS, STYLE */

package/es/packages/components/cropper/src/cropper-modal.vue2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cropper-modal.vue2.mjs","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":[],"mappings":"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"}
+{"version":3,"file":"cropper-modal.vue2.mjs","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":[],"mappings":"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"}

package/es/packages/components/form/src/components/form-component.vue2.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, reactive, unref, openBlock, createBlock, resolveDynamicComponent, mergeProps } from 'vue';
+import { defineComponent, reactive, ref, nextTick, unref, openBlock, createBlock, resolveDynamicComponent, mergeProps } from 'vue';
 import { omit, has } from 'lodash-es';
 import '../config/index.mjs';
 import { formComponentProps, formComponentEmits } from '../config/form-component.mjs';
@@ -9,10 +9,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "form-component",
   props: formComponentProps,
   emits: formComponentEmits,
-  setup(__props, { emit: __emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emits = __emit;
     const formData = reactive(props.formData);
+    const componentRef = ref();
     const getBindValue = (item) => {
       const obj = { ...item };
       return omit(obj, ["label", "onChange", "change"]);
@@ -27,13 +28,29 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }
       emits("changeField", item);
     };
+    const focus = async () => {
+      await nextTick();
+      console.log(componentRef.value);
+      componentRef.value?.focus();
+    };
+    const getItem = () => {
+      return props.item;
+    };
+    __expose({
+      focus,
+      getItem
+    });
     return (_ctx, _cache) => {
       return unref(checkedType).includes(_ctx.item.type) ? (openBlock(), createBlock(resolveDynamicComponent(`ll-${_ctx.item.type}`), 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"])) : (openBlock(), createBlock(resolveDynamicComponent(`ll-${_ctx.item.type}`), 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/es/packages/components/form/src/components/form-component.vue2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"form-component.vue2.mjs","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":[],"mappings":";;;;;;;;;;;;AA6BA,IAAA,MAAM,KAAQ,GAAA,OAAA,CAAA;AAEd,IAAA,MAAM,KAAQ,GAAA,MAAA,CAAA;AAEd,IAAM,MAAA,QAAA,GAAW,QAAS,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,OAAO,KAAK,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,IAAA,GAAA,CAAI,IAAM,EAAA,QAAQ,CAAG,EAAA;AACvB,QAAK,IAAA,CAAA,MAAA,CAAO,GAAG,GAAG,CAAA,CAAA;AAAA,OACpB;AACA,MAAI,IAAA,GAAA,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.mjs","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":[],"mappings":";;;;;;;;;;;;AA+BA,IAAA,MAAM,KAAQ,GAAA,OAAA,CAAA;AAEd,IAAA,MAAM,KAAQ,GAAA,MAAA,CAAA;AAEd,IAAM,MAAA,QAAA,GAAW,QAAS,CAAA,KAAA,CAAM,QAAQ,CAAA,CAAA;AAExC,IAAA,MAAM,eAAe,GAAI,EAAA,CAAA;AAEzB,IAAM,MAAA,YAAA,GAAe,CAAC,IAAqB,KAAA;AACzC,MAAM,MAAA,GAAA,GAAM,EAAE,GAAG,IAAK,EAAA,CAAA;AACtB,MAAA,OAAO,KAAK,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,IAAA,GAAA,CAAI,IAAM,EAAA,QAAQ,CAAG,EAAA;AACvB,QAAK,IAAA,CAAA,MAAA,CAAO,GAAG,GAAG,CAAA,CAAA;AAAA,OACpB;AACA,MAAI,IAAA,GAAA,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,MAAM,QAAS,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/es/packages/components/form/src/config/form.mjs

@@ -41,6 +41,27 @@ const formProps = 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/es/packages/components/form/src/config/form.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"form.mjs","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":[],"mappings":";;;;AAwDO,MAAM,YAAY,UAAW,CAAA;AAAA;AAAA;AAAA;AAAA,EAIlC,WAAa,EAAA;AAAA,IACX,IAAA,EAAM,eAA6B,KAAK,CAAA;AAAA,IACxC,OAAA,EAAS,MAAM,EAAC;AAAA,GAClB;AAAA;AAAA;AAAA;AAAA,EAIA,WAAa,EAAA;AAAA,IACX,IAAA,EAAM,eAA6B,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,EAAM,eAAyB,MAAM,CAAA;AAAA,IACrC,OAAA,EAAS,OAAO,EAAC,CAAA;AAAA,GACnB;AAAA;AAAA;AAAA;AAAA,EAIA,UAAY,EAAA;AAAA,IACV,IAAA,EAAM,eAAyB,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.mjs","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":[],"mappings":";;;;AAwDO,MAAM,YAAY,UAAW,CAAA;AAAA;AAAA;AAAA;AAAA,EAIlC,WAAa,EAAA;AAAA,IACX,IAAA,EAAM,eAA6B,KAAK,CAAA;AAAA,IACxC,OAAA,EAAS,MAAM,EAAC;AAAA,GAClB;AAAA;AAAA;AAAA;AAAA,EAIA,WAAa,EAAA;AAAA,IACX,IAAA,EAAM,eAA6B,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,EAAM,eAAyB,MAAM,CAAA;AAAA,IACrC,OAAA,EAAS,OAAO,EAAC,CAAA;AAAA,GACnB;AAAA;AAAA;AAAA;AAAA,EAIA,UAAY,EAAA;AAAA,IACV,IAAA,EAAM,eAAyB,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/es/packages/components/form/src/form.vue2.mjs

@@ -1,5 +1,5 @@
-import { defineComponent, reactive, ref, watch, resolveComponent, openBlock, createElementBlock, normalizeClass, unref, createVNode, withCtx, mergeProps, normalizeProps, guardReactiveProps, Fragment, renderList, createBlock, renderSlot, createElementVNode, toDisplayString, createCommentVNode } from 'vue';
-import { omit, isEmpty } from 'lodash-es';
+import { defineComponent, reactive, ref, computed, watch, onMounted, nextTick, resolveComponent, openBlock, createElementBlock, normalizeClass, unref, createVNode, withCtx, mergeProps, normalizeProps, guardReactiveProps, Fragment, renderList, createBlock, renderSlot, createElementVNode, toDisplayString, createCommentVNode } from 'vue';
+import { has, omit, isEmpty } from 'lodash-es';
 import './config/index.mjs';
 import '../../../utils/index.mjs';
 import FormComponent from './components/form-component.vue.mjs';
@@ -18,9 +18,46 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const bem = createNamespace("form");
     const formData = reactive(props.formData);
     const formRef = ref();
+    const formComponents = ref([]);
+    const computedFormColumns = computed(() => {
+      return props.formColumns.map((e) => {
+        e.disabled = has(e, "disabled") ? e.disabled : props.disabled;
+        if (e.children && e.children.length) {
+          e.children.map((a) => {
+            a.disabled = has(a, "disabled") ? a.disabled : props.disabled;
+            return a;
+          });
+        }
+        return e;
+      });
+    });
+    const validateFields = computed(() => {
+      return props.formColumns.filter((e) => e.required || has(e, "rules") && e.rules.length > 0).map((e) => {
+        return e.key;
+      });
+    });
+    const computedFormOptions = computed(() => {
+      return {
+        scrollToFirstError: !props.validateErrorStop,
+        ...props.formOptions
+      };
+    });
     const id = 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();
@@ -60,6 +97,18 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         immediate: true
       }
     );
+    onMounted(async () => {
+      await 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,
@@ -83,7 +132,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             spinning: props.loading
           }, {
             default: withCtx(() => [
-              createVNode(_component_a_form, mergeProps(props.formOptions, {
+              createVNode(_component_a_form, mergeProps(computedFormOptions.value, {
                 id: id.value,
                 ref_key: "formRef",
                 ref: formRef,
@@ -98,7 +147,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                         (openBlock(true), createElementBlock(
                           Fragment,
                           null,
-                          renderList(props.formColumns, (item, index) => {
+                          renderList(computedFormColumns.value, (item, index) => {
                             return openBlock(), createBlock(_component_a_col, mergeProps({
                               key: index,
                               ref_for: true
@@ -209,6 +258,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                                           /* FULL_PROPS, DYNAMIC_SLOTS */
                                         )) : (openBlock(), createBlock(FormComponent, {
                                           key: 1,
+                                          ref_for: true,
+                                          ref: (el) => formComponents.value[index] = el,
                                           item,
                                           "form-data": formData,
                                           onChangeField: handleChangeField