@neatui/nuxt 1.6.4 → 1.6.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/nuxt",
-  "version": "1.6.4",
+  "version": "1.6.6",
   "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']);
@@ -89,6 +95,7 @@
     disabled?: boolean;
     readonly?: boolean;
     clearable?: boolean;
+    cipher?: boolean;
     verify?: boolean;
     prefix?: Array<any>;
     suffix?: Array<any>;
@@ -110,6 +117,7 @@
     disabled: false,
     readonly: false,
     clearable: true,
+    cipher: true,
     verify: false,
     prefix: () => [],
     suffix: () => [],
@@ -124,6 +132,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 +215,11 @@
     emits('update:modelValue', null);
     emits('clear');
   }
+
+  const toggleCipher = () => {
+    if (props.disabled || props.readonly) return;
+    cipherVisible.value = !cipherVisible.value;
+  };
   // 输入
   const input = (e: any) => {
     // 用户交互

package/src/components/loader/FormLoader/FormLoader.vue

@@ -3,14 +3,19 @@
     <template v-for="(col, idx) in state.form" :key="idx">
       <div v-if="!col.clear" :id="col._fid" :ui-col="col.media" :ui-flex="`${vertical ? 'col xm' : 'row lt'}`">
         <template v-if="col.label">
-          <h6 v-if="vertical" :style="`${col.rules?.some((validator: any) => validator.required) ? 'text-indent: -1em' : ''}`">
+          <h6 v-if="vertical" :style="`${col.rules?.some((validator: any) => validator.required) ? 'text-indent: -1em' : ''}`" :class="labelClass">
             <template v-if="col.label == '*'"></template>
             <template v-else>
               <b v-if="col.rules?.some((validator: any) => validator.required)" class="co-risk pr" style="left: 0.1em">﹡</b>
               <span>{{ formatLabel(col) }}</span>
             </template>
           </h6>
-          <p v-else :class="`${clh({ ...(col.model[1] || {}) })}`" :style="`width:${state._lw + 'em'}; max-width:50%;`" class="ar nr-sm flex-fixed o-ls">
+          <p
+            v-else
+            :class="[labelClass, `${clh({ ...(col.model[1] || {}) })}`]"
+            :style="`width:${state._lw + 'em'}; max-width:50%;`"
+            class="ar nr-sm flex-fixed o-ls"
+          >
             <template v-if="col.label == '*'"></template>
             <template v-else>
               <b v-if="col.rules?.some((validator: any) => validator.required)" class="co-risk">﹡</b>
@@ -267,6 +272,11 @@
       type: [Boolean, String],
       default: true,
     },
+    // 统一的label class
+    labelClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
     // 是否垂直排列
     vertical: {
       type: Boolean,