unika-components 1.1.21 → 1.1.22

package/dist/unika-components.umd.js

@@ -28603,6 +28603,14 @@
           const inputValue = vue.ref('');
           const hasError = vue.ref(false);
           const isTouched = vue.ref(false);
+          const inputRef = vue.ref(null);
+          const instanceId = vue.ref(`input-${Math.random().toString(36).substr(2, 9)}`);
+          const inputId = vue.computed(() => `form-input-${props.element.id || instanceId.value}`);
+          // 检测移动设备
+          const isMobile = vue.ref(false);
+          const checkIfMobile = () => {
+              isMobile.value = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+          };
           // 根据inputType确定验证类型
           const validatorType = vue.computed(() => {
               switch (props.element.inputType) {
@@ -28640,12 +28648,68 @@
               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);
+              }
+          };
           // 值变化时验证(如果已经触摸过)
           vue.watch(inputValue, () => {
               if (isTouched.value) {
                   validate();
               }
           });
+          // 初始化
+          vue.onMounted(() => {
+              checkIfMobile();
+              if (inputRef.value) {
+                  inputRef.value.addEventListener('focus', handleFocus);
+                  inputRef.value.addEventListener('blur', handleAndroidBlur);
+              }
+          });
+          // 清理
+          vue.onBeforeUnmount(() => {
+              if (inputRef.value) {
+                  inputRef.value.removeEventListener('focus', handleFocus);
+                  inputRef.value.removeEventListener('blur', handleAndroidBlur);
+              }
+          });
           // 样式计算
           const required = vue.computed(() => props.element.properties.required || false);
           const title = vue.computed(() => props.element.title || '');
@@ -28658,6 +28722,13 @@
               transform: `rotate(${props.element.css.transform || 0}deg)`,
               opacity: props.element.css.opacity || 1
           }));
+          const shadowStyle = vue.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 = vue.computed(() => ({
               backgroundColor: props.element.css.backgroundColor || '#fff',
               borderRadius: px2rem(props.element.css.borderRadius || 2, props.isPlatform),
@@ -28680,7 +28751,11 @@
               containerStyles,
               wrapperStyles,
               inputStyles,
-              handleBlur
+              shadowStyle,
+              handleBlur,
+              inputRef,
+              instanceId,
+              inputId
           };
       }
   });
@@ -28689,12 +28764,12 @@
     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 (vue.openBlock(), vue.createElementBlock("div", {
       class: "ele-form form-input eles",
-      style: vue.normalizeStyle(_ctx.containerStyles)
+      style: vue.normalizeStyle({..._ctx.containerStyles, boxShadow: _ctx.shadowStyle})
     }, [
       vue.createElementVNode("div", {
         class: "input-wrapper",
@@ -28707,12 +28782,15 @@
           ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$7, "*"))
           : vue.createCommentVNode("v-if", true),
         vue.withDirectives(vue.createElementVNode("input", {
+          id: _ctx.inputId,
           type: _ctx.inputType,
           placeholder: _ctx.title,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((_ctx.inputValue) = $event)),
           style: vue.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), [
           [vue.vModelDynamic, _ctx.inputValue]
         ])
@@ -28721,6 +28799,7 @@
   }
 
   script$d.render = render$9;
+  script$d.__scopeId = "data-v-af046be2";
   script$d.__file = "src/components/UniFormInput/UniFormInput.vue";
 
   var script$c = vue.defineComponent({
@@ -29383,7 +29462,6 @@
   }
 
   script$8.render = render$4;
-  script$8.__scopeId = "data-v-2d16d26f";
   script$8.__file = "src/components/UniFormContainer/UniFormContainer.vue";
 
   var script$7 = /*#__PURE__*/ vue.defineComponent({
@@ -29999,6 +30077,8 @@
           const direction = vue.ref('up');
           const autoPlayTimer = vue.ref(null);
           const isAutoPlaying = vue.ref(false);
+          const isMobile = vue.ref(false);
+          const isKeyboardActive = vue.ref(false);
           const workData = vue.computed(() => props.workData || { pages: [], global: {} });
           const personalData = vue.computed(() => workData.value.personalData || {});
           const global = vue.computed(() => workData.value.global || {});
@@ -30006,6 +30086,10 @@
           const musicStatus = vue.ref(false);
           const musicPlayer = vue.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();
@@ -30068,7 +30152,40 @@
           vue.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);
+                  }
+              }
+          };
           vue.onMounted(() => {
+              checkIfMobile();
               startAutoPlay();
               if (global.value.music.url) {
                   setTimeout(() => {
@@ -30080,9 +30197,19 @@
                       handleFirstInteraction();
                   }, 1000);
               }
+              if (isMobile.value) {
+                  window.addEventListener('resize', handleMobileResize);
+                  document.body.addEventListener('focusin', handleFocusIn);
+                  document.body.addEventListener('focusout', handleFocusOut);
+              }
           });
           vue.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();
@@ -30187,6 +30314,7 @@
               showPopup,
               direction,
               musicPlayer,
+              isKeyboardActive,
               handleFirstInteraction,
               playMusic,
               px2rem,
@@ -30230,7 +30358,8 @@
       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: vue.normalizeStyle(_ctx.containerStyle)
+      style: vue.normalizeStyle(_ctx.containerStyle),
+      class: vue.normalizeClass({ 'keyboard-active': _ctx.isKeyboardActive })
     }, [
       vue.createCommentVNode(" 背景音乐 "),
       (_ctx.global && _ctx.global.music && _ctx.global.music.url)
@@ -30284,29 +30413,41 @@
                           }, {
                             default: vue.withCtx(() => [
                               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(page.elements, (element) => {
-                                return (vue.openBlock(), vue.createBlock(vue.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 (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+                                  key: element.id
+                                }, [
+                                  (element.type !== 'group')
+                                    ? (vue.openBlock(), vue.createBlock(vue.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"]))
+                                    : vue.createCommentVNode("v-if", true)
+                                ], 64 /* STABLE_FRAGMENT */))
                               }), 128 /* KEYED_FRAGMENT */))
                             ]),
                             _: 2 /* DYNAMIC */
                           }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onSubmit"]))
                         : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(page.elements, (element) => {
-                            return (vue.openBlock(), vue.createBlock(vue.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 (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+                              key: element.id
+                            }, [
+                              (element.type !== 'group')
+                                ? (vue.openBlock(), vue.createBlock(vue.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"]))
+                                : vue.createCommentVNode("v-if", true)
+                            ], 64 /* STABLE_FRAGMENT */))
                           }), 128 /* KEYED_FRAGMENT */))
                     ])
                   ])
@@ -30321,7 +30462,7 @@
       ], 2 /* CLASS */),
       vue.createVNode(_component_UniBarrage, { global: _ctx.global }, null, 8 /* PROPS */, ["global"]),
       vue.createVNode(_component_UniMenu, { global: _ctx.global }, null, 8 /* PROPS */, ["global"])
-    ], 36 /* STYLE, NEED_HYDRATION */))
+    ], 38 /* CLASS, STYLE, NEED_HYDRATION */))
   }
 
   script$2.render = render$2;
@@ -30782,29 +30923,41 @@
                     }, {
                       default: vue.withCtx(() => [
                         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.page.elements, (element) => {
-                          return (vue.openBlock(), vue.createBlock(vue.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 (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+                            key: element.id
+                          }, [
+                            (element.type !== 'group')
+                              ? (vue.openBlock(), vue.createBlock(vue.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"]))
+                              : vue.createCommentVNode("v-if", true)
+                          ], 64 /* STABLE_FRAGMENT */))
                         }), 128 /* KEYED_FRAGMENT */))
                       ]),
                       _: 1 /* STABLE */
                     }, 8 /* PROPS */, ["onSubmit"]))
                   : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(_ctx.page.elements, (element) => {
-                      return (vue.openBlock(), vue.createBlock(vue.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 (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+                        key: element.id
+                      }, [
+                        (element.type !== 'group')
+                          ? (vue.openBlock(), vue.createBlock(vue.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"]))
+                          : vue.createCommentVNode("v-if", true)
+                      ], 64 /* STABLE_FRAGMENT */))
                     }), 128 /* KEYED_FRAGMENT */))
               ])
             ], 36 /* STYLE, NEED_HYDRATION */)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unika-components",
-  "version": "1.1.21",
+  "version": "1.1.22",
   "private": false,
   "main": "dist/unika-components.umd.js",
   "module": "dist/unika-components.esm.js",