@neatui/nuxt 1.6.9 → 1.6.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/nuxt",
-  "version": "1.6.9",
+  "version": "1.6.11",
   "description": "NeatUI component library for Nuxt 3",
   "main": "./src/index.ts",
   "license": "MIT",

package/src/components/basic/IFollowView.vue

@@ -4,7 +4,7 @@
       <button ui-btn="@a s case :border"><i class="icon icon-dropdown"></i></button>
     </slot>
   </div>
-  <Teleport v-if="$slots.tips" to="#ifollow">
+  <Teleport v-if="teleportReady && $slots.tips" to="#ifollow">
     <div
       ref="tip"
       :class="`${tipClass}${mobile ? ' fekit-follow-mobile' : ''}`"
@@ -37,15 +37,6 @@
 
   const emits = defineEmits(['update:modelValue', 'onhide', 'onshow']);
 
-  if (import.meta.client) {
-    const area = document.querySelector('#ifollow');
-    if (!area) {
-      const el = document.createElement('div');
-      el.id = 'ifollow';
-      document.body.appendChild(el);
-    }
-  }
-
   // 类型
   interface Props {
     modelValue?: string | number;
@@ -83,6 +74,7 @@
   const dom: any = ref(null);
   const tip: any = ref(null);
   const box: any = ref(null);
+  const teleportReady = ref(false);
   const state = reactive({
     view: 0,
     show: 0,
@@ -173,7 +165,18 @@
     }
   };
 
+  const ensureTeleportTarget = () => {
+    let area = document.querySelector('#ifollow');
+    if (!area) {
+      area = document.createElement('div');
+      area.id = 'ifollow';
+      document.body.appendChild(area);
+    }
+    teleportReady.value = true;
+  };
+
   onMounted(() => {
+    ensureTeleportTarget();
     document.addEventListener('click', cancel, true);
     // 添加触摸事件监听器以防止页面滚动
     document.addEventListener('touchstart', preventTouchScroll, { passive: false });

package/src/components/form/Input@v3.vue

@@ -17,7 +17,7 @@
       <input
         :title="props.modelValue"
         :value="props.modelValue"
-        :type="type"
+        :type="inputType"
         :placeholder="placeholder"
         :disabled="disabled"
         :readonly="readonly"
@@ -30,6 +30,12 @@
     </slot>
     <div ui-form-suffix="">
       <i ui-form-clean="" v-if="clearable && props.modelValue && !readonly && !disabled" @click.stop="clear"></i>
+      <div
+        class="o-ls"
+        v-if="type === 'password' && cipher"
+        :ui-form-cipher="cipherVisible ? '1' : ''"
+        @click.stop="toggleCipher"
+      ></div>
       <slot name="suffix"></slot>
       <template v-for="(item, idx) in suffix" :key="idx">
         <div v-if="isObject(item)" v-bind="item.attrs" v-on="event(item, props.modelValue)">
@@ -43,7 +49,7 @@
 </template>
 
 <script setup lang="ts">
-  import { reactive, watch } from 'vue';
+  import { computed, reactive, ref, watch } from 'vue';
   import { isObject, isFunction } from '@fekit/utils';
 
   const emits = defineEmits(['update:modelValue', 'click', 'blur', 'focus', 'change', 'input', 'clear']);
@@ -65,6 +71,7 @@
    * disabled       是否禁用
    * readonly       是否只读
    * clearable      是否显示清除按钮
+   * cipher         密码框是否显示明密文切换
    * rules          校验规则
    * verify         是否显示校验
    * prefix         前缀内容
@@ -89,6 +96,7 @@
     disabled?: boolean;
     readonly?: boolean;
     clearable?: boolean;
+    cipher?: boolean;
     verify?: boolean;
     prefix?: Array<any>;
     suffix?: Array<any>;
@@ -110,6 +118,7 @@
     disabled: false,
     readonly: false,
     clearable: true,
+    cipher: true,
     verify: false,
     prefix: () => [],
     suffix: () => [],
@@ -124,6 +133,14 @@
     // 错误
     error: {},
   });
+  const cipherVisible = ref(false);
+
+  const inputType = computed(() => {
+    if (props.type === 'password') {
+      return cipherVisible.value ? 'text' : 'password';
+    }
+    return props.type;
+  });
   // 外部传入交互标识，主要用于外部没有输入但点击了提交，或表单提交成功后重置状态
   watch(
     () => props.interacted,
@@ -199,6 +216,11 @@
     emits('update:modelValue', null);
     emits('clear');
   }
+
+  const toggleCipher = () => {
+    if (props.disabled || props.readonly) return;
+    cipherVisible.value = !cipherVisible.value;
+  };
   // 输入
   const input = (e: any) => {
     // 用户交互