@neatui/vue 2.17.2 → 2.17.3

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

@@ -3,7 +3,7 @@
     :ui-form="`${theme} sz:${sz} ${state.error.co} type:input ${block ? ' :block' : ''} ${disabled ? 'disabled' : ''} ${readonly ? 'readonly' : ''}`"
     @click="emits('click', $event)"
   >
-    <div :ui-form-tips="state.error.ontips">{{ state.error.tips }}</div>
+    <div v-if="state.interacted" :ui-form-tips="state.error.ontips">{{ state.error.tips }}</div>
     <div ui-form-prefix="">
       <template v-for="(item, idx) in prefix" :key="idx">
         <div v-if="isObject(item)" v-bind="item.attrs" v-on="event(item, props.modelValue)">
@@ -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']);
@@ -66,7 +72,7 @@
    * readonly       是否只读
    * clearable      是否显示清除按钮
    * rules          校验规则
-   * verify         是否是示校验图标 2=tips 3=text 4=icon 5=tips+text 6=text+icon 7=text+icon
+   * verify         是否显示校验
    * prefix         前缀内容
    * suffix         后缀内容
    * interacted     用户是否交互
@@ -89,10 +95,11 @@
     disabled?: boolean;
     readonly?: boolean;
     clearable?: boolean;
+    cipher?: boolean;
     verify?: boolean;
     prefix?: Array<any>;
     suffix?: Array<any>;
-    interacted?: boolean;
+    interacted?: boolean | number | null;
   }
   const props: any = withDefaults(defineProps<Props>(), {
     modelValue: '',
@@ -110,52 +117,45 @@
     disabled: false,
     readonly: false,
     clearable: true,
+    cipher: true,
     verify: false,
     prefix: () => [],
     suffix: () => [],
-    interacted: false,
+    interacted: null,
   });
 
   const state: any = reactive({
     // 用户是否交互
-    interacted: false,
+    interacted: null,
     // 值
     value: props.modelValue,
     // 错误
     error: {},
   });
-  // 外部传入交互标识，主要用于外部没有输入但点击了提交
+  const cipherVisible = ref(false);
+
+  const inputType = computed(() => {
+    if (props.type === 'password') {
+      return cipherVisible.value ? 'text' : 'password';
+    }
+    return props.type;
+  });
+  // 外部传入交互标识，主要用于外部没有输入但点击了提交，或表单提交成功后重置状态
   watch(
     () => props.interacted,
     (interacted: any) => {
-      if (interacted) {
-        state.interacted = interacted;
-      }
+      state.interacted = interacted;
     },
-    { deep: true, immediate: true },
+    { immediate: true },
   );
 
-  // 监听外部数据
-  // watch(
-  //   () => props.modelValue,
-  //   (value: any) => {
-  //     state.value = value;
-  //   },
-  //   { deep: true, immediate: true }
-  // );
-  // watch(
-  //   () => state.value,
-  //   (value: any) => {
-  //     emits('update:modelValue', value);
-  //   },
-  //   { deep: true, immediate: true }
-  // );
-
   // 校验
   watch(
     [() => state.interacted, () => props.modelValue],
     async () => {
       if (state.interacted) {
+        const hasValue =
+          props.modelValue !== '' && props.modelValue !== null && props.modelValue !== undefined;
         // 提示文案
         let tips = '';
         // 错误类型
@@ -163,7 +163,7 @@
         // 验证结果
         let verify = '';
 
-        if (props.modelValue) {
+        if (hasValue) {
           // 有值
           let hasError = false;
           // 遍历校验规则
@@ -215,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) => {
     // 用户交互
@@ -230,11 +235,6 @@
       e.target.value = props.modelValue;
       return false;
     }
-    // 数字类型 - 移除有问题的逻辑，允许用户正常删除数字
-    // if (props.type === 'number' && !value && props.modelValue?.length !== 1) {
-    //   e.target.value = props.modelValue;
-    //   return false;
-    // }
     // 输入事件
     emits('input', e, state);
     emits('update:modelValue', value || null);

package/src/components/form/InputNumber.vue

@@ -35,47 +35,70 @@
 </template>
 
 <script setup lang="ts">
-  import { reactive, watch, PropType } from 'vue';
+  import { reactive, watch } from 'vue';
   import { isObject } from '@fekit/utils';
 
   const emits = defineEmits(['update:modelValue', 'click', 'blur', 'focus', 'change', 'input', 'clear']);
-  const props = defineProps({
+
+  interface Props {
     // 主题
-    theme: { type: String, default: '@a' },
+    theme?: string;
     // 尺寸
-    sz: { type: String, default: '' },
+    sz?: string;
     // 颜色
-    co: { type: String, default: '' },
+    co?: string;
     // 撑满
-    block: { type: Boolean, default: true },
+    block?: boolean;
     // 准备就绪
-    ready: { type: Boolean, default: false },
+    ready?: boolean;
     // 值
-    modelValue: { type: [String, Number], default: '' },
+    modelValue?: string | number;
     // 类型
-    type: { type: String, default: 'text' },
+    type?: string;
     // 提示文案
-    tips: { type: String, default: '' },
+    tips?: string;
     // 内容占位
-    placeholder: { type: String, default: '' },
+    placeholder?: string;
     // 最大长度
-    maxlength: { type: Number, default: null },
+    maxlength?: number | null;
     // 最小长度
-    minlength: { type: Number, default: null },
+    minlength?: number | null;
     // 是否禁用
-    disabled: { type: Boolean, default: false },
+    disabled?: boolean;
     // 是否只读
-    readonly: { type: Boolean, default: false },
+    readonly?: boolean;
     // 是否显示清除按钮
-    clearable: { type: Boolean, default: true },
+    clearable?: boolean;
     // 校验规则
-    rules: { type: Array as PropType<any[]>, default: () => [] },
+    rules?: any[];
     // 是否是示校验图标
-    verify: { type: Boolean, default: false },
-    prefix: { type: Array as PropType<any[]>, default: () => [] },
-    suffix: { type: Array as PropType<any[]>, default: () => [] },
+    verify?: boolean;
+    prefix?: any[];
+    suffix?: any[];
     // 用户是否交互
-    interacted: { type: Boolean, default: false }
+    interacted?: boolean;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    theme: '@a',
+    sz: '',
+    co: '',
+    block: true,
+    ready: false,
+    modelValue: '',
+    type: 'text',
+    tips: '',
+    placeholder: '',
+    maxlength: null,
+    minlength: null,
+    disabled: false,
+    readonly: false,
+    clearable: true,
+    rules: () => [],
+    verify: false,
+    prefix: () => [],
+    suffix: () => [],
+    interacted: false
   });
 
   const state: any = reactive({
@@ -86,13 +109,11 @@
     // 错误
     error: {}
   });
-  // 外部传入交互标识，主要用于外部没有输入但点击了提交
+  // 外部传入交互标识，主要用于外部没有输入但点击了提交，或表单提交成功后重置状态
   watch(
     () => props.interacted,
     (interacted: any) => {
-      if (interacted) {
-        state.interacted = interacted;
-      }
+      state.interacted = interacted;
     },
     { deep: true, immediate: true }
   );

package/src/components/form/{Textarea@v2.vue → Textarea.vue}

@@ -148,9 +148,7 @@
   watch(
     () => props.interacted,
     (interacted: any) => {
-      if (interacted) {
-        state.interacted = interacted;
-      }
+      state.interacted = interacted;
     },
     { deep: true, immediate: true },
   );

package/src/components/form/index.ts

@@ -1,9 +1,11 @@
 import Input from './Input@v3.vue';
 import InputRange from './InputRange.vue';
 import Switch from './Switch.vue';
-import Textarea from './Textarea@v2.vue';
+import Textarea from './Textarea.vue';
 
 import Checkbox from './Checkbox.vue';
+import CheckboxItem from './CheckboxItem.vue';
+import CheckboxGroup from './CheckboxGroup.vue';
 import Select from './Select@v3.vue';
 import SelectList from './SelectList.vue';
 import SelectTags from './SelectTags.vue';
@@ -17,8 +19,6 @@ import SearchMoreSelect from './SearchMoreSelect.vue';
 import PageSelect from './PageSelect.vue';
 import SelectTree from './SelectTree/SelectTree@v1.vue';
 
-// import DateView from './DateView.vue';
-// import DateView from './DateView@v2.vue';
 import DateView from './DateView@v3.vue';
 import DateRangeView from './DateRangeView@v3.vue';
 import DatePicker from './DatePicker.vue';
@@ -34,6 +34,8 @@ export {
   Switch,
   Textarea,
   Checkbox,
+  CheckboxItem,
+  CheckboxGroup,
   Select,
   SelectList,
   SelectTags,