@neatui/nuxt 1.6.9 → 1.6.10

package/package.json

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

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) => {
     // 用户交互