@neatui/nuxt 1.5.4 → 1.6.0

package/package.json

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

package/src/components/form/Checkbox.vue

@@ -1,64 +1,79 @@
 <template>
-  <form class="m-sm-sub">
-    <label v-for="(item, idx) in state.lists" :key="idx" :ui-form="`${theme} type:checkbox${item.disabled ? ' disabled' : ''}`">
-      <input v-model="item.__checked" type="checkbox" :disabled="item.disabled" />
-      <slot>
-        <span>{{ item.label }}</span>
-      </slot>
-    </label>
-  </form>
+  <CheckboxGroup v-if="isMultiple" v-bind="groupBindings" :modelValue="arrayValue" @update:modelValue="emitValue">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </CheckboxGroup>
+  <Checkbox v-else v-bind="singleBindings" :modelValue="modelValue" @update:modelValue="emitValue">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </Checkbox>
 </template>
+
 <script setup lang="ts">
-  import { reactive, watch } from 'vue';
+  import { computed } from 'vue';
+  import Checkbox from './CheckboxItem.vue';
+  import CheckboxGroup from './CheckboxGroup.vue';
+
+  type ValueType = any | { label?: string; value: any };
 
-  // 定义类型
-  interface OptionsTypes {
+  interface OptionType {
     label: string;
-    value: any;
+    value?: any;
     disabled?: boolean;
   }
+
   interface Props {
-    modelValue: any[];
-    options: OptionsTypes[];
+    modelValue?: any | any[];
+    label?: string;
+    disabled?: boolean;
     theme?: string;
+    attrs?: any;
+    checkedValue?: ValueType;
+    defaultValue?: ValueType;
+    options?: (OptionType | string)[] | [ValueType, ValueType];
+    required?: boolean;
   }
-  // 外部入参
+
   const props = withDefaults(defineProps<Props>(), {
+    modelValue: () => false,
     theme: '@a',
-    modelValue: () => [],
+    disabled: false,
+    label: '',
+    attrs: () => ({}),
+    checkedValue: () => true,
+    defaultValue: () => false,
+    required: false,
     options: () => [],
   });
 
-  // 定义事件
-  const emits = defineEmits(['update:modelValue']);
+  const emit = defineEmits<{
+    (e: 'update:modelValue', value: any | any[]): void;
+  }>();
 
-  // 内部数据
-  const state: any = reactive({
-    lists: [],
-  });
+  const isMultiple = computed(() => Array.isArray(props.modelValue));
+  const arrayValue = computed(() => (Array.isArray(props.modelValue) ? props.modelValue : []));
+
+  const singleOptions = computed(() => (Array.isArray(props.options) && props.options.length === 2 ? (props.options as [ValueType, ValueType]) : undefined));
+
+  const singleBindings = computed(() => ({
+    label: props.label,
+    disabled: props.disabled,
+    theme: props.theme,
+    attrs: props.attrs,
+    checkedValue: props.checkedValue,
+    defaultValue: props.defaultValue,
+    options: singleOptions.value,
+    required: props.required,
+  }));
+
+  const groupBindings = computed(() => ({
+    options: props.options as (OptionType | string)[],
+    disabled: props.disabled,
+    theme: props.theme,
+    attrs: props.attrs,
+  }));
 
-  // 监听数据
-  watch(
-    [() => props.options, () => props.modelValue],
-    ([options, value]) => {
-      const lists = options?.map((item) => ({ ...item, __checked: value?.includes(item.value) }));
-      // 只有在内容变化时才更新
-      if (JSON.stringify(state.lists) !== JSON.stringify(lists)) {
-        state.lists = lists;
-      }
-    },
-    {
-      immediate: true,
-    },
-  );
-  watch(
-    () => state.lists,
-    (val) => {
-      const value = val.filter((item: any) => item.__checked).map((item: any) => item.value);
-      emits('update:modelValue', value);
-    },
-    {
-      deep: true,
-    },
-  );
+  const emitValue = (value: any | any[]) => emit('update:modelValue', value);
 </script>

package/src/components/form/CheckboxGroup.vue

@@ -0,0 +1,74 @@
+<template>
+  <form class="m-sm-sub">
+    <label v-for="(item, idx) in normalizedOptions" :key="idx" :ui-form="`${theme} type:checkbox${item.disabled ? ' disabled' : ''}`" v-bind="attrs">
+      <input type="checkbox" :checked="isChecked(item.value)" :disabled="item.disabled" @change="handleChange(item.value, $event)" />
+      <slot :item="item" :index="idx">
+        <span>{{ item.label }}</span>
+      </slot>
+    </label>
+  </form>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+
+  interface OptionType {
+    label: string;
+    value?: any;
+    disabled?: boolean;
+  }
+
+  interface Props {
+    modelValue?: any[];
+    options?: (OptionType | string)[];
+    disabled?: boolean;
+    theme?: string;
+    attrs?: any;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    modelValue: () => [],
+    options: () => [],
+    disabled: false,
+    theme: '@a',
+    attrs: () => ({}),
+  });
+
+  const emits = defineEmits<{
+    (e: 'update:modelValue', value: any[]): void;
+  }>();
+
+  // 规范化 options
+  const normalizedOptions = computed(() => {
+    return props.options.map((item) =>
+      typeof item === 'string'
+        ? { label: item, value: item, disabled: props.disabled }
+        : {
+            label: item?.label ?? '',
+            value: 'value' in item ? item.value : item?.label,
+            disabled: item?.disabled ?? props.disabled,
+          },
+    );
+  });
+
+  // 判断某个值是否被选中
+  const isChecked = (value: any) => {
+    return props.modelValue.includes(value);
+  };
+
+  // 处理选中状态变化
+  const handleChange = (value: any, e: Event) => {
+    const checked = (e.target as HTMLInputElement).checked;
+    let newValue: any[];
+
+    if (checked) {
+      // 添加到选中列表
+      newValue = [...props.modelValue, value];
+    } else {
+      // 从选中列表移除
+      newValue = props.modelValue.filter((v) => v !== value);
+    }
+
+    emits('update:modelValue', newValue);
+  };
+</script>

package/src/components/form/CheckboxItem.vue

@@ -0,0 +1,87 @@
+<template>
+  <label :ui-form="`${theme} type:checkbox${disabled ? ' disabled' : ''}`" v-bind="attrs">
+    <input type="checkbox" :checked="isChecked" :disabled="disabled" @change="handleChange" />
+    <slot :item="slotItem">
+      <span v-if="label">{{ label }}</span>
+    </slot>
+  </label>
+</template>
+
+<script setup lang="ts">
+  import { computed, onMounted } from 'vue';
+
+  type ValueType = any | { label?: string; value: any };
+
+  interface Props {
+    modelValue?: any;
+    label?: string;
+    disabled?: boolean;
+    theme?: string;
+    attrs?: any;
+    checkedValue?: ValueType;
+    defaultValue?: ValueType;
+    options?: [ValueType, ValueType]; // [checkedValue, defaultValue]
+    required?: boolean; // 是否必填，必填时自动初始化为 defaultValue
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    modelValue: () => false,
+    theme: '@a',
+    disabled: false,
+    label: '',
+    attrs: () => ({}),
+    checkedValue: () => true,
+    defaultValue: () => false,
+    required: false,
+  });
+
+  const emits = defineEmits<{
+    (e: 'update:modelValue', value: any): void;
+  }>();
+
+  // 获取实际的值（支持对象和基本类型）
+  const getActualValue = (val: ValueType) => {
+    return val && typeof val === 'object' && 'value' in val ? val.value : val;
+  };
+
+  // 优先使用 options，否则使用 checkedValue/defaultValue
+  const actualCheckedValue = computed(() => {
+    const checkedVal = props.options ? props.options[0] : props.checkedValue;
+    return getActualValue(checkedVal);
+  });
+
+  const actualDefaultValue = computed(() => {
+    const defaultVal = props.options ? props.options[1] : props.defaultValue;
+    return getActualValue(defaultVal);
+  });
+
+  const slotItem = computed(() => {
+    if (props.options && props.options.length) {
+      const checkedVal = props.options[0];
+      const label = checkedVal && typeof checkedVal === 'object' && 'label' in checkedVal ? checkedVal.label : props.label;
+      return { label, value: getActualValue(checkedVal) };
+    }
+    return { label: props.label, value: actualCheckedValue.value };
+  });
+
+  // 判断是否选中
+  const isChecked = computed(() => {
+    return props.modelValue === actualCheckedValue.value;
+  });
+
+  const handleChange = (e: Event) => {
+    const checked = (e.target as HTMLInputElement).checked;
+    emits('update:modelValue', checked ? actualCheckedValue.value : actualDefaultValue.value);
+  };
+
+  // 如果是必填项，且值不是有效的 checkedValue 或 defaultValue，自动初始化为 defaultValue
+  onMounted(() => {
+    if (props.required) {
+      const currentVal = props.modelValue;
+      const isValidValue = currentVal === actualCheckedValue.value || currentVal === actualDefaultValue.value;
+      if (!isValidValue) {
+        emits('update:modelValue', actualDefaultValue.value);
+      }
+    }
+  });
+</script>

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

@@ -30,11 +30,7 @@
       <div v-if="state.type === 2" class="full">
         <ul ui-grid="mob:4" class="n-ms ny-sm-sub">
           <li v-for="(year, idx) in panel.years" :key="idx" ui-flex="col cm" @click="setDateValue('y', year)">
-            <div
-              ui-flex="col cm"
-              class="w-ss h-xs ac ux-none r-sm"
-              :class="isSelectedYear(year) ? 'active bg-main-o-lm co-w' : 'co-main:hover'"
-            >
+            <div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedYear(year) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">
               {{ year }}
             </div>
           </li>
@@ -42,18 +38,42 @@
       </div>
       <div v-else-if="state.type === 1" class="full">
         <ul ui-grid="mob:4" class="n-ms ny-sm-sub">
-          <li ui-flex="col cm" @click="setDateValue('m', 1)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(1) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">1月</div></li>
-          <li ui-flex="col cm" @click="setDateValue('m', 2)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(2) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">2月</div></li>
-          <li ui-flex="col cm" @click="setDateValue('m', 3)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(3) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">3月</div></li>
-          <li ui-flex="col cm" @click="setDateValue('m', 4)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(4) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">4月</div></li>
-          <li ui-flex="col cm" @click="setDateValue('m', 5)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(5) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">5月</div></li>
-          <li ui-flex="col cm" @click="setDateValue('m', 6)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(6) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">6月</div></li>
-          <li ui-flex="col cm" @click="setDateValue('m', 7)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(7) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">7月</div></li>
-          <li ui-flex="col cm" @click="setDateValue('m', 8)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(8) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">8月</div></li>
-          <li ui-flex="col cm" @click="setDateValue('m', 9)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(9) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">9月</div></li>
-          <li ui-flex="col cm" @click="setDateValue('m', 10)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(10) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">10月</div></li>
-          <li ui-flex="col cm" @click="setDateValue('m', 11)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(11) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">11月</div></li>
-          <li ui-flex="col cm" @click="setDateValue('m', 12)"><div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(12) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">12月</div></li>
+          <li ui-flex="col cm" @click="setDateValue('m', 1)">
+            <div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(1) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">1月</div>
+          </li>
+          <li ui-flex="col cm" @click="setDateValue('m', 2)">
+            <div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(2) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">2月</div>
+          </li>
+          <li ui-flex="col cm" @click="setDateValue('m', 3)">
+            <div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(3) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">3月</div>
+          </li>
+          <li ui-flex="col cm" @click="setDateValue('m', 4)">
+            <div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(4) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">4月</div>
+          </li>
+          <li ui-flex="col cm" @click="setDateValue('m', 5)">
+            <div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(5) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">5月</div>
+          </li>
+          <li ui-flex="col cm" @click="setDateValue('m', 6)">
+            <div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(6) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">6月</div>
+          </li>
+          <li ui-flex="col cm" @click="setDateValue('m', 7)">
+            <div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(7) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">7月</div>
+          </li>
+          <li ui-flex="col cm" @click="setDateValue('m', 8)">
+            <div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(8) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">8月</div>
+          </li>
+          <li ui-flex="col cm" @click="setDateValue('m', 9)">
+            <div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(9) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">9月</div>
+          </li>
+          <li ui-flex="col cm" @click="setDateValue('m', 10)">
+            <div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(10) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">10月</div>
+          </li>
+          <li ui-flex="col cm" @click="setDateValue('m', 11)">
+            <div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(11) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">11月</div>
+          </li>
+          <li ui-flex="col cm" @click="setDateValue('m', 12)">
+            <div ui-flex="col cm" class="w-ss h-xs ac ux-none r-sm" :class="isSelectedMonth(12) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">12月</div>
+          </li>
         </ul>
       </div>
       <div v-else class="full">
@@ -161,8 +181,7 @@
 </template>
 <script setup lang="ts">
   import { computed, ref, reactive, watch, onMounted } from 'vue';
-  import { isDateString, isObject, isString } from '@fekit/utils';
-  import { idate } from './date';
+  import { idate, isDateString, isObject, isString } from '@fekit/utils';
   import { Icon } from '../basic';
 
   const normalizeDateInput = (value: any) => {

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

@@ -124,33 +124,15 @@
     // 错误
     error: {},
   });
-  // 外部传入交互标识，主要用于外部没有输入但点击了提交
+  // 外部传入交互标识，主要用于外部没有输入但点击了提交，或表单提交成功后重置状态
   watch(
     () => props.interacted,
     (interacted: any) => {
-      if (interacted) {
-        state.interacted = interacted;
-      }
+      state.interacted = interacted;
     },
     { deep: 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],
@@ -230,11 +212,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

@@ -86,13 +86,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

@@ -4,6 +4,8 @@ import Switch from './Switch.vue';
 import Textarea from './Textarea@v2.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,

package/src/components/loader/FormLoader/{FormLoader@v2.vue → FormLoader.vue}

@@ -153,6 +153,7 @@
           v-bind="{ ...(col.model[1] || {}) }"
         ></Textarea>
         <Switch v-else-if="col.model[0] === 'Switch'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" v-bind="{ ...(col.model[1] || {}) }" />
+        <Checkbox v-else-if="col.model[0] === 'Checkbox'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" v-bind="{ ...(col.model[1] || {}) }" />
         <Tree v-else-if="col.model[0] === 'Tree'" v-model="col._data[col.field]" :interacted="interacted" :rules="col.rules" class="mt-sm" v-bind="{ ...(col.model[1] || {}) }" />
         <Cascader
           v-else-if="col.model[0] === 'Cascader'"
@@ -170,7 +171,7 @@
         </template>
       </div>
     </template>
-    <div :ui-flex="`${vertical ? 'col xm' : 'row xt'}`">
+    <div v-if="$slots.submit" :ui-flex="`${vertical ? 'col xm' : 'row xt'}`">
       <div v-if="vertical">
         <slot name="submit"></slot>
       </div>
@@ -187,6 +188,7 @@
   import {
     Input,
     Switch,
+    Checkbox,
     Textarea,
     Select,
     SelectList,

package/src/components/loader/index.ts

@@ -1,4 +1,4 @@
-import FormLoader from './FormLoader/FormLoader@v2.vue';
+import FormLoader from './FormLoader/FormLoader.vue';
 import LimitLoader from './LimitLoader';
 export * from './TableLoader/index';
 import TableLoader from './TableLoader/TableLoader.vue';