@neatui/vue 2.17.2 → 2.17.5

package/src/components/form/TextArea.vue

@@ -1,192 +1,272 @@
 <template>
   <div
-    :ui-form="`${theme} sz:${sz} ${state.co} type:textarea ${block ? ' :block' : ''} ${disabled ? 'disabled' : ''} ${readonly ? 'readonly' : ''}`"
+    :ui-form="`${theme} sz:${sz} ${state.error.co} type:textarea ${block ? ' :block' : ''} ${disabled ? 'disabled' : ''} ${readonly ? 'readonly' : ''}`"
     @click="emits('click', $event)"
   >
-    <div v-if="ready" :ui-form-tips="state.ontips">{{ state.tips }}</div>
+    <div :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)">
+          <div v-html="isFunction(item.value) ? item.value(props.modelValue) : item.value"></div>
+        </div>
+        <div v-else v-html="isFunction(item) ? item(props.modelValue) : item"></div>
+      </template>
+      <slot name="prefix"></slot>
+    </div>
     <slot>
       <textarea
         ref="el"
-        :rows="rows"
-        v-model="mv"
-        :type="type"
+        :title="props.modelValue"
+        :value="props.modelValue"
         :placeholder="placeholder"
-        :readonly="readonly || disabled"
-        @focus="emits('focus', $event)"
-        @input="emits('input', $event)"
-        @change="emits('change', $event)"
-        @blur="emits('blur', $event)"
+        :disabled="disabled"
+        :readonly="readonly"
+        :rows="rows"
         ui-scroll=":y"
         dir="auto"
+        @focus="emits('focus', $event, state)"
+        @input="input($event)"
+        @change="emits('change', $event, state)"
+        @blur="blur($event)"
       ></textarea>
     </slot>
-    <i v-if="ready && verify" :ui-form-verify="state.verify"></i>
+    <div ui-form-suffix="">
+      <i ui-form-clean="" v-if="clearable && props.modelValue && !readonly && !disabled" @click.stop="clear"></i>
+      <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)">
+          <div v-html="isFunction(item.value) ? item.value(props.modelValue) : item.value"></div>
+        </div>
+        <div v-else v-html="isFunction(item) ? item(props.modelValue) : item"></div>
+      </template>
+    </div>
+    <i v-if="verify && state.interacted" :ui-form-verify="state.error.verify"></i>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { ref, watch, computed, onMounted, PropType, nextTick } from 'vue';
+  import { reactive, watch, ref, nextTick, onMounted } from 'vue';
+  import { isObject, isFunction } from '@fekit/utils';
 
   const emits = defineEmits(['update:modelValue', 'click', 'blur', 'focus', 'change', 'input', 'clear']);
-  const props = defineProps({
-    theme: { type: String, default: '@a' },
-    sz: { type: String, default: '' },
-    co: { type: String, default: '' },
-    block: { type: Boolean, default: true },
-    // 值
-    modelValue: {
-      type: [String, Number],
-      default: '',
-    },
-    // 类型
-    type: {
-      type: String,
-      default: 'text',
-    },
-    // 提示文案
-    tips: {
-      type: String,
-      default: '',
-    },
-    // 内容占位
-    placeholder: {
-      type: String,
-      default: '',
-    },
-    // 最大长度
-    maxLength: {
-      type: Number,
-      default: null,
-    },
-    // 最小长度
-    minLength: {
-      type: Number,
-      default: null,
-    },
-    // 最小长度
-    autoHeight: {
-      type: Boolean,
-      default: false,
-    },
-    // 是否禁用
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    // 是否中读
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-    // 是否显示清除按钮
-    clearable: {
-      type: Boolean,
-      default: true,
-    },
-    // 校验规则
-    rules: {
-      type: Array,
-      default: () => [],
-    },
-    // 是否是示校验图标
-    verify: {
-      type: Boolean,
-      default: false,
-    },
-    prefix: {
-      type: Array as PropType<any[]>,
-      default: () => [],
-    },
-    suffix: {
-      type: Array as PropType<any[]>,
-      default: () => [],
-    },
-    rows: {
-      type: Number,
-      default: 3,
-    },
+
+  /**
+   * 入参说明
+   *
+   * modelValue     值
+   * theme          主题
+   * sz             尺寸
+   * co             颜色
+   * block          撑满
+   * ready          准备就绪
+   * tips           提示文案
+   * placeholder    内容占位
+   * maxlength      最大长度
+   * minlength      最小长度
+   * disabled       是否禁用
+   * readonly       是否只读
+   * clearable      是否显示清除按钮
+   * rules          校验规则
+   * verify         是否是示校验图标 2=tips 3=text 4=icon 5=tips+text 6=text+icon 7=text+icon
+   * prefix         前缀内容
+   * suffix         后缀内容
+   * interacted     用户是否交互
+   * autoHeight     是否自动调整高度
+   * rows           初始行数
+   */
+
+  // 类型
+  interface Props {
+    modelValue?: string | number;
+    placeholder?: string;
+    rules?: Array<object>;
+    theme?: string;
+    sz?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
+    co?: string;
+    block?: boolean;
+    ready?: boolean;
+    tips?: string;
+    maxlength?: null | number;
+    minlength?: null | number;
+    disabled?: boolean;
+    readonly?: boolean;
+    clearable?: boolean;
+    verify?: boolean;
+    prefix?: Array<any>;
+    suffix?: Array<any>;
+    interacted?: boolean;
+    autoHeight?: boolean;
+    rows?: number;
+  }
+  const props: any = withDefaults(defineProps<Props>(), {
+    modelValue: '',
+    placeholder: '',
+    rules: () => [],
+    theme: '@a',
+    sz: '',
+    co: '',
+    block: true,
+    ready: false,
+    tips: '',
+    maxlength: null,
+    minlength: null,
+    disabled: false,
+    readonly: false,
+    clearable: true,
+    verify: false,
+    prefix: () => [],
+    suffix: () => [],
+    interacted: false,
+    // textarea 特有属性默认值
+    autoHeight: false,
+    rows: 3,
   });
 
-  const ready: any = ref(0);
-  const state: any = computed(() => {
-    if (ready.value) {
-      // 提示文案
-      let tips = '';
-      // 错误类型
-      let type = '';
-      // 验证结果
-      let verify = '';
-      if (props.modelValue) {
-        // 有值
-        const res: any = props.rules?.some((rule: any) => {
-          const yes = rule.validator && !rule.validator(props.modelValue);
-          tips = rule.msg;
-          type = rule.type;
-          return yes;
-        });
-        verify = res ? 'no' : 'ok';
-      } else {
-        // 无值
-        const res: any = props.rules?.some((rule: any) => {
-          tips = rule.msg;
-          type = rule.type;
-          return rule.required;
-        });
-        verify = res ? 'no' : '';
-      }
-      if (verify !== 'no' && props.tips) {
-        tips = props.tips;
-      }
-      // 是否显示提示
-      const ontips = verify === 'no' && tips ? 'show' : '';
-      // 状态颜色
-      const co = verify === 'no' ? 'co:' + type : props.co ? 'co:' + props.co : '';
-      return { tips, ontips, verify, co };
-    } else {
-      return {};
-    }
+  const state: any = reactive({
+    // 用户是否交互
+    interacted: false,
+    // 值
+    value: props.modelValue,
+    // 错误
+    error: {},
   });
 
-  // 自动高度
+  // textarea 元素引用
   const el: any = ref(null);
+
+  // 自动高度功能
   const fAutoHeight = () => {
     nextTick(() => {
-      if (props.autoHeight) {
+      if (props.autoHeight && el.value) {
         el.value.style.height = 'auto';
         el.value.style.height = el.value.scrollHeight + 1 + 'px';
       }
     });
   };
 
-  const mv: any = ref(props.modelValue);
+  // 外部传入交互标识，主要用于外部没有输入但点击了提交
   watch(
-    () => props.modelValue,
-    (v: any) => {
-      mv.value = v;
+    () => props.interacted,
+    (interacted: any) => {
+      state.interacted = interacted;
     },
     { deep: true, immediate: true },
   );
 
+  // 校验
   watch(
-    () => mv.value,
-    (v: any) => {
-      let value = v;
-      if (typeof props.maxLength === 'number' && !isNaN(props.maxLength)) {
-        value = value.slice(0, props.maxLength);
-        mv.value = value;
-      }
-      emits('update:modelValue', value);
+    [() => state.interacted, () => props.modelValue],
+    async () => {
+      if (state.interacted) {
+        // 提示文案
+        let tips = '';
+        // 错误类型
+        let type = '';
+        // 验证结果
+        let verify = '';
 
-      // 自动高度
-      fAutoHeight();
+        if (props.modelValue) {
+          // 有值
+          let hasError = false;
+          // 遍历校验规则
+          for (const rule of props.rules) {
+            if (rule && rule.validator) {
+              const yes = !(await rule.validator(props.modelValue));
+              if (yes) {
+                tips = rule.msg;
+                type = rule.type;
+                hasError = true;
+                break;
+              }
+            }
+          }
+          verify = hasError ? 'no' : 'ok';
+        } else {
+          // 无值
+          let hasError = false;
+          // 遍历校验规则
+          for (const rule of props.rules) {
+            if (rule) {
+              tips = rule.msg;
+              type = rule.type;
+              if (rule.required) {
+                hasError = true;
+                break;
+              }
+            }
+          }
+          verify = hasError ? 'no' : '';
+        }
+        if (verify !== 'no' && props.tips) {
+          tips = props.tips;
+        }
+        // 是否显示提示
+        const ontips = (verify === 'no' && tips) || props.tips ? 'show' : '';
+        // 状态颜色
+        const co = verify === 'no' ? 'co:' + type : props.co ? 'co:' + props.co : '';
+        state.error = { tips, ontips, verify, co };
+      } else {
+        state.error = { tips: props.tips, ontips: props.tips ? 'show' : '', verify: '', co: '' };
+      }
     },
-    { deep: true },
+    { deep: true, immediate: true },
   );
 
+  // 清空
+  function clear() {
+    emits('update:modelValue', null);
+    emits('clear');
+  }
+  // 输入
+  const input = (e: any) => {
+    // 用户交互
+    if (!state.interacted) {
+      setTimeout(() => {
+        state.interacted = true;
+      }, 50);
+    }
+
+    // 长度限制
+    const value = e?.target?.value || '';
+    if (props.maxlength && value.length > props.maxlength) {
+      e.target.value = props.modelValue;
+      return false;
+    }
+    // 输入事件
+    emits('input', e, state);
+    emits('update:modelValue', value || null);
+
+    // 自动高度
+    fAutoHeight();
+  };
+  // 失焦
+  const blur = (e: any) => {
+    if (!state.interacted) {
+      setTimeout(() => {
+        state.interacted = true;
+      }, 50);
+    }
+    emits('blur', e, state);
+  };
+
+  // 事件处理
+  const event: any = (item: any, data: any): object => {
+    const _event: any = {};
+    if (isObject(item.event)) {
+      for (const key in item.event) {
+        const fun = item.event[key];
+        if (isFunction(fun)) {
+          _event[key] = (...args: any) => {
+            return fun({ data }, ...args);
+          };
+        }
+      }
+    }
+    return { ..._event };
+  };
+
+  // 组件挂载后初始化自动高度
   onMounted(() => {
-    setTimeout(() => {
-      ready.value = 1;
-    }, 300);
     // 自动高度
     fAutoHeight();
   });

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,