@neatui/vue 2.10.0 → 2.12.0

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

@@ -1,12 +1,15 @@
 <template>
-  <div :ui-form="`@a type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : ''">
+  <div :ui-form="`@a type:select${sz ? 'sz:' + sz : ''}`" :ui-form-open="state.show ? 'show' : ''">
     <IFollowView ref="ifollow" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
       <Input
         v-bind="{ placeholder, rules, theme, sz, co, block, ready, type, tips, disabled, readonly: true, clearable: false, verify, prefix, suffix, interacted }"
         v-model="state.selectd.label"
         :interacted="interacted"
       >
-        <template #suffix><i ui-form-select=""></i></template>
+        <template #suffix>
+          <i v-if="clearable && modelValue && !readonly && !disabled" ui-form-clean="" @click.stop="remove"></i>
+          <i ui-form-select=""></i>
+        </template>
       </Input>
       <template #tips v-if="!readonly && !disabled">
         <div v-if="search" class="ny-sm nx-sl">
@@ -16,7 +19,7 @@
             </template>
           </Input>
         </div>
-        <ul v-if="props.options?.length" ui-scroll=":y s" class="nx-sm lh-sl" style="min-width: 100%; max-height: 16em">
+        <ul v-if="state.filter?.length" ui-scroll=":y s" class="nx-sm lh-sl" style="min-width: 100%; max-height: 16em">
           <template v-for="(item, idx) of state.filter" :key="idx">
             <li v-if="item.disabled" class="ux-hover nx-sm ny-ss r-ss o-ms nowrap" :class="item.value === state.selectd?.value ? 'co-main' : ''">
               <del>{{ item.label || item }}</del>
@@ -47,7 +50,7 @@
 
 <script setup lang="ts">
   import { reactive, ref, computed } from 'vue';
-  import { Input } from '../form';
+  import { Input } from '.';
   import { IFollowView } from '../basic';
   const ifollow: any = ref(null);
 
@@ -119,7 +122,7 @@
   const props: any = withDefaults(defineProps<Props>(), {
     modelValue: '',
     options: () => [],
-    tools: true,
+    tools: false,
     spare: '当前没有可选项',
     search: false,
     pagination: false,
@@ -139,14 +142,14 @@
     minlength: null,
     disabled: false,
     readonly: false,
-    clearable: false,
+    clearable: true,
     verify: false,
     prefix: () => [],
     suffix: () => [],
-    interacted: false
+    interacted: false,
   });
 
-  const change = ({ value = '' }: any = {}) => {
+  const change = ({ value = null }: any = {}) => {
     emits('update:modelValue', value);
     emits('change', value);
   };
@@ -165,7 +168,7 @@
       } else {
         return props.options;
       }
-    })
+    }),
   });
   // 选择
   const select = (item: any = {}) => {
@@ -195,7 +198,7 @@
     select,
     remove,
     change,
-    cancel
+    cancel,
   });
 </script>
 . .

package/src/components/form/SelectList.vue

@@ -1,8 +1,8 @@
 <template>
   <ul v-if="props.options?.length" class="my-sm-sub lh-ss">
     <li
-      class="hover:bg-main-ss n-sl r-ss b-solid b-xs"
-      :class="`${item.value === mv ? 'bk-main-ml bg-main-ss' : 'bk-case'}`"
+      class="hover:bg-main-o-ss n-sl r-ss b-solid b-xs"
+      :class="`${item.value === mv ? 'bk-main-o-ml bg-main-o-ss' : 'bk-case'}`"
       v-for="(item, idx) of props.options"
       :key="idx"
       @click="mv = item.value === mv ? '' : item.value"
@@ -27,16 +27,16 @@
     placeholder: { type: String, default: '' },
     options: {
       type: Array as () => any[],
-      default: () => []
+      default: () => [],
     },
     modelValue: {
       type: [String, Number],
-      default: ''
+      default: '',
     },
     rules: {
       type: Array,
-      default: () => []
-    }
+      default: () => [],
+    },
   });
 
   // eslint-disable-next-line vue/no-dupe-keys
@@ -47,12 +47,12 @@
     () => props.modelValue,
     (value: any) => {
       mv.value = value;
-    }
+    },
   );
   watch(
     () => mv.value,
     (value: any) => {
       emits('update:modelValue', value);
-    }
+    },
   );
 </script>

package/src/components/form/SelectPicker.vue

@@ -29,7 +29,7 @@
 
 <script setup lang="ts">
   import { reactive, ref, computed } from 'vue';
-  import { Input } from '../form';
+  import { Input } from '.';
   import { IPickerView, IScrollView } from '../basic';
   import { watch } from 'vue';
   const ipicker: any = ref(null);
@@ -43,16 +43,16 @@
     placeholder: { type: String, default: '' },
     options: {
       type: Array as () => any[],
-      default: () => []
+      default: () => [],
     },
     modelValue: {
       type: [String, Number],
-      default: ''
+      default: '',
     },
     rules: {
       type: Array,
-      default: () => []
-    }
+      default: () => [],
+    },
   });
   // 内部数据
   const mv: any = ref(props.modelValue);
@@ -61,7 +61,7 @@
     (v: any) => {
       mv.value = v;
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
   const state = reactive({
     view: 0,
@@ -74,7 +74,7 @@
         }
       }
       return _value;
-    })
+    }),
   });
   // 更新
   const change = ({ value = null }: any = {}) => {

package/src/components/form/SelectTags.vue

@@ -2,7 +2,7 @@
   <div v-if="props.options?.length" class="mr-sm-sub mb-sm-sub">
     <span
       class="lh-ss ny-sm nx-ms r-xl dib"
-      :class="`${mv == item.value ? 'bg-main-sm co-main' : 'bg-weak'}`"
+      :class="`${mv == item.value ? 'bg-main-o-sm co-main' : 'bg-weak'}`"
       v-for="(item, idx) of props.options"
       :key="idx"
       @click="mv = item.value === mv ? '' : item.value"
@@ -24,16 +24,16 @@
     placeholder: { type: String, default: '' },
     options: {
       type: Array as () => any[],
-      default: () => []
+      default: () => [],
     },
     modelValue: {
       type: [String, Number],
-      default: ''
+      default: '',
     },
     rules: {
       type: Array,
-      default: () => []
-    }
+      default: () => [],
+    },
   });
   // 内部数据
   const mv: any = ref(props.modelValue);
@@ -41,12 +41,12 @@
     () => props.modelValue,
     (value: any) => {
       mv.value = value;
-    }
+    },
   );
   watch(
     () => mv.value,
     (value: any) => {
       emits('update:modelValue', value);
-    }
+    },
   );
 </script>

package/src/components/form/SelectTree/SelectTree@v1.vue

@@ -40,7 +40,7 @@
 
 <script setup lang="ts">
   import { reactive, ref, computed, watch } from 'vue';
-  import { Input } from '../../form';
+  import { Input } from '..';
   import { IFollowView } from '../../basic';
   import { TreeView } from '../../display';
   import { findByJson, filterJson } from '@fekit/utils';
@@ -144,7 +144,7 @@
     verify: false,
     prefix: () => [],
     suffix: () => [],
-    interacted: false
+    interacted: false,
   });
 
   const state: any = reactive({
@@ -158,7 +158,7 @@
       return (props.chain ? _item.chain : _item.label) || '';
     }),
     filter: [],
-    value: ''
+    value: '',
   });
   watch(
     () => state.value,
@@ -167,7 +167,7 @@
         change(value);
       }
     },
-    { deep: true }
+    { deep: true },
   );
   watch(
     [() => state.search, () => props.options],
@@ -178,7 +178,7 @@
         state.filter = props.options;
       }
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
   );
 
   const change = (value: any = '') => {
@@ -221,7 +221,7 @@
     select,
     remove,
     change,
-    cancel
+    cancel,
   });
 </script>
 .. ..

package/src/components/form/Switch.vue

@@ -1,12 +1,14 @@
 <template>
-  <label ui-form="@a type:switch" class="lh-ls">
-    <input type="checkbox" name="form2" :checked="value ? true : false" />
-    <slot>&nbsp;</slot>
+  <label ui-form="@a type:switch">
+    <input type="checkbox" v-model="internalValue" :disabled="disabled" />
+    <slot>
+      <span>{{ text }}</span>
+    </slot>
   </label>
 </template>
 
 <script setup lang="ts">
-  import { ref, watch, computed, onMounted, PropType } from 'vue';
+  import { ref, watch, PropType } from 'vue';
 
   const props = defineProps({
     theme: { type: String, default: '@a' },
@@ -15,121 +17,54 @@
     block: { type: Boolean, default: true },
     // 值
     modelValue: {
-      type: [Number, Boolean],
-      default: false
+      type: [Number, Boolean, String],
+      default: false,
     },
-    // 类型
-    type: {
+    text: {
       type: String,
-      default: 'text'
-    },
-    // 提示文案
-    tips: {
-      type: String,
-      default: ''
-    },
-    // 内容占位
-    placeholder: {
-      type: String,
-      default: ''
-    },
-    // 最大长度
-    maxlength: {
-      type: Number,
-      default: null
-    },
-    // 最小长度
-    minlength: {
-      type: Number,
-      default: null
+      default: '',
     },
     // 是否禁用
     disabled: {
       type: Boolean,
-      default: false
-    },
-    // 是否中读
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    // 是否显示清除按钮
-    clearable: {
-      type: Boolean,
-      default: true
+      default: false,
     },
-    // 校验规则
-    rules: {
-      type: Array,
-      default: () => []
-    },
-    // 是否是示校验图标
-    verify: {
-      type: Boolean,
-      default: false
-    },
-    prefix: {
+    map: {
       type: Array as PropType<any[]>,
-      default: () => []
+      default: () => [false, true],
     },
-    suffix: {
-      type: Array as PropType<any[]>,
-      default: () => []
-    }
   });
 
-  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 emit = defineEmits(['update:modelValue']);
 
-  const value = ref(props.modelValue);
-  // 监听异步数据
+  // 内部值（始终是布尔值）
+  const internalValue = ref(false);
+
+  // 计算内部值
+  const getInternalValue = (externalValue: any) => {
+    const index = props.map.indexOf(externalValue);
+    return index === 0 ? true : index === 1 ? false : Boolean(externalValue);
+  };
+
+  // 计算外部值
+  const getExternalValue = (internalValue: boolean) => {
+    return internalValue ? props.map[0] : props.map[1];
+  };
+
+  // 初始化内部值
+  internalValue.value = getInternalValue(props.modelValue);
+
+  // 监听外部值变化
   watch(
     () => props.modelValue,
     (newValue) => {
-      value.value = newValue;
-    }
+      internalValue.value = getInternalValue(newValue);
+    },
   );
 
-  onMounted(() => {
-    setTimeout(() => {
-      ready.value = 1;
-    }, 300);
+  // 监听内部值变化，向父组件发送映射后的值
+  watch(internalValue, (newValue) => {
+    const externalValue = getExternalValue(newValue);
+    emit('update:modelValue', externalValue);
   });
 </script>