unika-components 1.1.21 → 1.1.22

package/dist/unika-components.esm.js

@@ -28596,6 +28596,14 @@ var script$d = defineComponent({
         const inputValue = ref('');
         const hasError = ref(false);
         const isTouched = ref(false);
+        const inputRef = ref(null);
+        const instanceId = ref(`input-${Math.random().toString(36).substr(2, 9)}`);
+        const inputId = computed(() => `form-input-${props.element.id || instanceId.value}`);
+        // 检测移动设备
+        const isMobile = ref(false);
+        const checkIfMobile = () => {
+            isMobile.value = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+        };
         // 根据inputType确定验证类型
         const validatorType = computed(() => {
             switch (props.element.inputType) {
@@ -28633,12 +28641,68 @@ var script$d = defineComponent({
             isTouched.value = true;
             validate();
         };
+        // 处理输入框聚焦时的滚动问题
+        const handleFocus = () => {
+            if (props.isPlatform || !isMobile.value || !inputRef.value)
+                return;
+            setTimeout(() => {
+                const inputEl = inputRef.value;
+                if (!inputEl)
+                    return;
+                // 对于Android设备，需要额外处理
+                if (/Android/i.test(navigator.userAgent)) {
+                    const scrollContainer = inputEl.closest('.scroll-long');
+                    if (scrollContainer) {
+                        const inputRect = inputEl.getBoundingClientRect();
+                        const scrollTop = window.scrollY || document.documentElement.scrollTop;
+                        const targetPosition = inputRect.top + scrollTop - (window.innerHeight / 3);
+                        window.scrollTo({
+                            top: targetPosition,
+                            behavior: 'smooth'
+                        });
+                    }
+                }
+                else {
+                    // iOS和其他设备
+                    const wrapper = inputEl.closest('.input-wrapper');
+                    if (wrapper) {
+                        wrapper.scrollIntoView({
+                            block: 'center',
+                            behavior: 'smooth'
+                        });
+                    }
+                }
+            }, 300);
+        };
+        // 处理Android键盘收起
+        const handleAndroidBlur = () => {
+            if (/Android/i.test(navigator.userAgent)) {
+                setTimeout(() => {
+                    window.scrollTo(0, 0);
+                }, 200);
+            }
+        };
         // 值变化时验证(如果已经触摸过)
         watch(inputValue, () => {
             if (isTouched.value) {
                 validate();
             }
         });
+        // 初始化
+        onMounted(() => {
+            checkIfMobile();
+            if (inputRef.value) {
+                inputRef.value.addEventListener('focus', handleFocus);
+                inputRef.value.addEventListener('blur', handleAndroidBlur);
+            }
+        });
+        // 清理
+        onBeforeUnmount(() => {
+            if (inputRef.value) {
+                inputRef.value.removeEventListener('focus', handleFocus);
+                inputRef.value.removeEventListener('blur', handleAndroidBlur);
+            }
+        });
         // 样式计算
         const required = computed(() => props.element.properties.required || false);
         const title = computed(() => props.element.title || '');
@@ -28651,6 +28715,13 @@ var script$d = defineComponent({
             transform: `rotate(${props.element.css.transform || 0}deg)`,
             opacity: props.element.css.opacity || 1
         }));
+        const shadowStyle = computed(() => {
+            const shadow = props.element.properties;
+            if (shadow.shadowSize <= 0)
+                return 'none';
+            // Use px2rem for shadow values and remove props.unit (which does not exist)
+            return `${px2rem(shadow.shadowX, props.isPlatform)} ${px2rem(shadow.shadowY, props.isPlatform)} ${px2rem(shadow.shadowBlur, props.isPlatform)} ${shadow.shadowColor}`;
+        });
         const wrapperStyles = computed(() => ({
             backgroundColor: props.element.css.backgroundColor || '#fff',
             borderRadius: px2rem(props.element.css.borderRadius || 2, props.isPlatform),
@@ -28673,7 +28744,11 @@ var script$d = defineComponent({
             containerStyles,
             wrapperStyles,
             inputStyles,
-            handleBlur
+            shadowStyle,
+            handleBlur,
+            inputRef,
+            instanceId,
+            inputId
         };
     }
 });
@@ -28682,12 +28757,12 @@ const _hoisted_1$7 = {
   key: 0,
   class: "required-marker"
 };
-const _hoisted_2$7 = ["type", "placeholder"];
+const _hoisted_2$7 = ["id", "type", "placeholder", "data-instance-id"];
 
 function render$9(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
     class: "ele-form form-input eles",
-    style: normalizeStyle(_ctx.containerStyles)
+    style: normalizeStyle({..._ctx.containerStyles, boxShadow: _ctx.shadowStyle})
   }, [
     createElementVNode("div", {
       class: "input-wrapper",
@@ -28700,12 +28775,15 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
         ? (openBlock(), createElementBlock("span", _hoisted_1$7, "*"))
         : createCommentVNode("v-if", true),
       withDirectives(createElementVNode("input", {
+        id: _ctx.inputId,
         type: _ctx.inputType,
         placeholder: _ctx.title,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((_ctx.inputValue) = $event)),
         style: normalizeStyle(_ctx.inputStyles),
         onBlur: _cache[1] || (_cache[1] = (...args) => (_ctx.handleBlur && _ctx.handleBlur(...args))),
-        class: "dynamic-placeholder-input"
+        class: "dynamic-placeholder-input",
+        ref: "inputRef",
+        "data-instance-id": _ctx.instanceId
       }, null, 44 /* STYLE, PROPS, NEED_HYDRATION */, _hoisted_2$7), [
         [vModelDynamic, _ctx.inputValue]
       ])
@@ -28714,6 +28792,7 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 script$d.render = render$9;
+script$d.__scopeId = "data-v-af046be2";
 script$d.__file = "src/components/UniFormInput/UniFormInput.vue";
 
 var script$c = defineComponent({
@@ -29376,7 +29455,6 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 script$8.render = render$4;
-script$8.__scopeId = "data-v-2d16d26f";
 script$8.__file = "src/components/UniFormContainer/UniFormContainer.vue";
 
 var script$7 = /*#__PURE__*/ defineComponent({
@@ -29992,6 +30070,8 @@ var script$2 = defineComponent({
         const direction = ref('up');
         const autoPlayTimer = ref(null);
         const isAutoPlaying = ref(false);
+        const isMobile = ref(false);
+        const isKeyboardActive = ref(false);
         const workData = computed(() => props.workData || { pages: [], global: {} });
         const personalData = computed(() => workData.value.personalData || {});
         const global = computed(() => workData.value.global || {});
@@ -29999,6 +30079,10 @@ var script$2 = defineComponent({
         const musicStatus = ref(false);
         const musicPlayer = ref();
         const { attemptAutoplay, playOnInteraction, pauseNonGlobalMusic, getCurrentMusicState } = useMusicManager();
+        // 检测移动设备
+        const checkIfMobile = () => {
+            isMobile.value = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+        };
         // 处理首次交互
         const handleFirstInteraction = () => {
             const currentState = getCurrentMusicState();
@@ -30061,7 +30145,40 @@ var script$2 = defineComponent({
         watch(currentPageId, () => {
             startAutoPlay();
         });
+        // 处理移动端键盘事件
+        const handleMobileResize = () => {
+            const activeElement = document.activeElement;
+            if (activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA')) {
+                setTimeout(() => {
+                    activeElement.scrollIntoView({
+                        block: 'center',
+                        behavior: 'smooth'
+                    });
+                }, 100);
+            }
+        };
+        const handleFocusIn = (e) => {
+            const target = e.target;
+            if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
+                isKeyboardActive.value = true;
+                if (isAutoPlaying.value) {
+                    clearAutoPlayTimer();
+                }
+            }
+        };
+        const handleFocusOut = (e) => {
+            const target = e.target;
+            if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
+                isKeyboardActive.value = false;
+                if (/Android/i.test(navigator.userAgent)) {
+                    setTimeout(() => {
+                        window.scrollTo(0, 0);
+                    }, 200);
+                }
+            }
+        };
         onMounted(() => {
+            checkIfMobile();
             startAutoPlay();
             if (global.value.music.url) {
                 setTimeout(() => {
@@ -30073,9 +30190,19 @@ var script$2 = defineComponent({
                     handleFirstInteraction();
                 }, 1000);
             }
+            if (isMobile.value) {
+                window.addEventListener('resize', handleMobileResize);
+                document.body.addEventListener('focusin', handleFocusIn);
+                document.body.addEventListener('focusout', handleFocusOut);
+            }
         });
         onBeforeUnmount(() => {
             clearAutoPlayTimer();
+            if (isMobile.value) {
+                window.removeEventListener('resize', handleMobileResize);
+                document.body.removeEventListener('focusin', handleFocusIn);
+                document.body.removeEventListener('focusout', handleFocusOut);
+            }
         });
         const { handleTouchStart, handleTouchMove, handleTouchEnd, handleMouseDown, handleMouseMove, handleMouseUp } = useTouchHandler(pages, currentPageId, direction, isLoopEnabled, () => {
             handleFirstInteraction();
@@ -30180,6 +30307,7 @@ var script$2 = defineComponent({
             showPopup,
             direction,
             musicPlayer,
+            isKeyboardActive,
             handleFirstInteraction,
             playMusic,
             px2rem,
@@ -30223,7 +30351,8 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
     onMousemove: _cache[4] || (_cache[4] = (...args) => (_ctx.handleMouseMove && _ctx.handleMouseMove(...args))),
     onMouseup: _cache[5] || (_cache[5] = (...args) => (_ctx.handleMouseUp && _ctx.handleMouseUp(...args))),
     onMouseleave: _cache[6] || (_cache[6] = (...args) => (_ctx.handleMouseUp && _ctx.handleMouseUp(...args))),
-    style: normalizeStyle(_ctx.containerStyle)
+    style: normalizeStyle(_ctx.containerStyle),
+    class: normalizeClass({ 'keyboard-active': _ctx.isKeyboardActive })
   }, [
     createCommentVNode(" 背景音乐 "),
     (_ctx.global && _ctx.global.music && _ctx.global.music.url)
@@ -30277,29 +30406,41 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                         }, {
                           default: withCtx(() => [
                             (openBlock(true), createElementBlock(Fragment, null, renderList(page.elements, (element) => {
-                              return (openBlock(), createBlock(resolveDynamicComponent(_ctx.getComponentName(element.type)), {
-                                key: element.id,
-                                element: element,
-                                isPlatform: _ctx.isPlatform,
-                                global: _ctx.global,
-                                env: _ctx.env,
-                                personalData: _ctx.personalData,
-                                onTrigger: _ctx.handleElementTrigger
-                              }, null, 40 /* PROPS, NEED_HYDRATION */, ["element", "isPlatform", "global", "env", "personalData", "onTrigger"]))
+                              return (openBlock(), createElementBlock(Fragment, {
+                                key: element.id
+                              }, [
+                                (element.type !== 'group')
+                                  ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.getComponentName(element.type)), {
+                                      key: 0,
+                                      element: element,
+                                      isPlatform: _ctx.isPlatform,
+                                      global: _ctx.global,
+                                      env: _ctx.env,
+                                      personalData: _ctx.personalData,
+                                      onTrigger: _ctx.handleElementTrigger
+                                    }, null, 40 /* PROPS, NEED_HYDRATION */, ["element", "isPlatform", "global", "env", "personalData", "onTrigger"]))
+                                  : createCommentVNode("v-if", true)
+                              ], 64 /* STABLE_FRAGMENT */))
                             }), 128 /* KEYED_FRAGMENT */))
                           ]),
                           _: 2 /* DYNAMIC */
                         }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onSubmit"]))
                       : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(page.elements, (element) => {
-                          return (openBlock(), createBlock(resolveDynamicComponent(_ctx.getComponentName(element.type)), {
-                            key: element.id,
-                            element: element,
-                            global: _ctx.global,
-                            env: _ctx.env,
-                            isPlatform: _ctx.isPlatform,
-                            personalData: _ctx.personalData,
-                            onTrigger: _ctx.handleElementTrigger
-                          }, null, 40 /* PROPS, NEED_HYDRATION */, ["element", "global", "env", "isPlatform", "personalData", "onTrigger"]))
+                          return (openBlock(), createElementBlock(Fragment, {
+                            key: element.id
+                          }, [
+                            (element.type !== 'group')
+                              ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.getComponentName(element.type)), {
+                                  key: 0,
+                                  element: element,
+                                  global: _ctx.global,
+                                  env: _ctx.env,
+                                  isPlatform: _ctx.isPlatform,
+                                  personalData: _ctx.personalData,
+                                  onTrigger: _ctx.handleElementTrigger
+                                }, null, 40 /* PROPS, NEED_HYDRATION */, ["element", "global", "env", "isPlatform", "personalData", "onTrigger"]))
+                              : createCommentVNode("v-if", true)
+                          ], 64 /* STABLE_FRAGMENT */))
                         }), 128 /* KEYED_FRAGMENT */))
                   ])
                 ])
@@ -30314,7 +30455,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
     ], 2 /* CLASS */),
     createVNode(_component_UniBarrage, { global: _ctx.global }, null, 8 /* PROPS */, ["global"]),
     createVNode(_component_UniMenu, { global: _ctx.global }, null, 8 /* PROPS */, ["global"])
-  ], 36 /* STYLE, NEED_HYDRATION */))
+  ], 38 /* CLASS, STYLE, NEED_HYDRATION */))
 }
 
 script$2.render = render$2;
@@ -30775,29 +30916,41 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                   }, {
                     default: withCtx(() => [
                       (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.page.elements, (element) => {
-                        return (openBlock(), createBlock(resolveDynamicComponent(_ctx.getComponentName(element.type)), {
-                          key: element.id,
-                          element: element,
-                          isPlatform: _ctx.isPlatform,
-                          global: _ctx.global,
-                          env: _ctx.env,
-                          personalData: _ctx.personalData,
-                          onTrigger: _ctx.handleElementTrigger
-                        }, null, 40 /* PROPS, NEED_HYDRATION */, ["element", "isPlatform", "global", "env", "personalData", "onTrigger"]))
+                        return (openBlock(), createElementBlock(Fragment, {
+                          key: element.id
+                        }, [
+                          (element.type !== 'group')
+                            ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.getComponentName(element.type)), {
+                                key: 0,
+                                element: element,
+                                isPlatform: _ctx.isPlatform,
+                                global: _ctx.global,
+                                env: _ctx.env,
+                                personalData: _ctx.personalData,
+                                onTrigger: _ctx.handleElementTrigger
+                              }, null, 40 /* PROPS, NEED_HYDRATION */, ["element", "isPlatform", "global", "env", "personalData", "onTrigger"]))
+                            : createCommentVNode("v-if", true)
+                        ], 64 /* STABLE_FRAGMENT */))
                       }), 128 /* KEYED_FRAGMENT */))
                     ]),
                     _: 1 /* STABLE */
                   }, 8 /* PROPS */, ["onSubmit"]))
                 : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.page.elements, (element) => {
-                    return (openBlock(), createBlock(resolveDynamicComponent(_ctx.getComponentName(element.type)), {
-                      key: element.id,
-                      element: element,
-                      global: _ctx.global,
-                      env: _ctx.env,
-                      isPlatform: _ctx.isPlatform,
-                      personalData: _ctx.personalData,
-                      onTrigger: _ctx.handleElementTrigger
-                    }, null, 40 /* PROPS, NEED_HYDRATION */, ["element", "global", "env", "isPlatform", "personalData", "onTrigger"]))
+                    return (openBlock(), createElementBlock(Fragment, {
+                      key: element.id
+                    }, [
+                      (element.type !== 'group')
+                        ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.getComponentName(element.type)), {
+                            key: 0,
+                            element: element,
+                            global: _ctx.global,
+                            env: _ctx.env,
+                            isPlatform: _ctx.isPlatform,
+                            personalData: _ctx.personalData,
+                            onTrigger: _ctx.handleElementTrigger
+                          }, null, 40 /* PROPS, NEED_HYDRATION */, ["element", "global", "env", "isPlatform", "personalData", "onTrigger"]))
+                        : createCommentVNode("v-if", true)
+                    ], 64 /* STABLE_FRAGMENT */))
                   }), 128 /* KEYED_FRAGMENT */))
             ])
           ], 36 /* STYLE, NEED_HYDRATION */)