@neatui/vue 2.17.1 → 2.17.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/vue",
-  "version": "2.17.1",
+  "version": "2.17.3",
   "description": "basic component ui",
   "main": "./src/index.ts",
   "license": "MIT",

package/src/components/basic/IFollowView.vue

@@ -3,24 +3,33 @@
     <slot>
       <button ui-btn="@a s case :border"><i class="icon icon-dropdown"></i></button>
     </slot>
-    <Teleport to="#ifollow" v-if="$slots.tips">
-      <div
-        ref="tip"
-        :class="tipClass"
-        :style="`position: fixed; pointer-events: none; ${tipStyle}`"
-        ui-tips="@a"
-        :ui-tips-view="state.show ? 1 : 0"
-        @mouseover="hovershow"
-        @mouseout="hoverhide"
-        @click="clickhide"
-      >
-        <div ref="box" :ui-tips-box="state.pos" :class="tipBoxClass" :style="tipBoxStyle" @mousedown="downdom">
-          <slot name="tips"></slot>
-          <div v-if="arrow" ui-tips-arrow="" v-bind="arrow"></div>
+  </div>
+  <Teleport v-if="$slots.tips" to="#ifollow">
+    <div
+      ref="tip"
+      :class="`${tipClass}${mobile ? ' fekit-follow-mobile' : ''}`"
+      :style="`position: fixed; pointer-events: none; ${tipStyle}`"
+      ui-tips="@a"
+      :ui-tips-view="state.show ? 1 : 0"
+      @mouseover="hovershow"
+      @mouseout="hoverhide"
+      @click="clickhide"
+    >
+      <div ref="box" :ui-tips-box="state.pos" :class="tipBoxClass" :style="tipBoxStyle">
+        <div ui-hide=">mob" class="mob-follow-tips w-full n-ss" ui-flex="row xm">
+          <div class="w-sm"></div>
+          <div>
+            <h5 class="bold">{{ title }}</h5>
+          </div>
+          <div class="w-sm" ui-flex="row rm">
+            <button ui-btn="@a none s :square" @click="toggle"><i class="icon icon-close"></i></button>
+          </div>
         </div>
+        <slot name="tips"></slot>
+        <div v-if="arrow" ui-tips-arrow="" v-bind="arrow"></div>
       </div>
-    </Teleport>
-  </div>
+    </div>
+  </Teleport>
 </template>
 <script setup lang="ts">
   import { reactive, ref, onMounted, onUnmounted, watch } from 'vue';
@@ -48,6 +57,8 @@
     tipBoxStyle?: string;
     arrow?: any;
     clickTipHide?: boolean;
+    mobile?: boolean;
+    title?: string;
   }
 
   // 入参
@@ -63,6 +74,8 @@
     tipBoxStyle: '',
     arrow: {},
     clickTipHide: false,
+    mobile: true,
+    title: '',
   });
 
   const dom: any = ref(null);
@@ -74,6 +87,7 @@
     pos: props.pos,
     hover: 0,
     tipdom: false,
+    isMobile: false,
   });
 
   const showTimer: any = ref(null);
@@ -148,42 +162,47 @@
     }
   };
 
-  const downdom = (ev: any) => {
-    // 不记得了这个当时为什么要加上这个，这个会影响单选框的选中后不自动关闭下拉框啊～
-    // state.tipdom = true;
-    // document.addEventListener(
-    //   'mouseup',
-    //   () => {
-    //     setTimeout(() => {
-    //       state.tipdom = false;
-    //     }, 10);
-    //   },
-    //   true
-    // );
+  // 阻止触摸事件冒泡和默认行为
+  const preventTouchScroll = (e: TouchEvent) => {
+    // 只有当触摸点在遮罩层本身时才阻止，不影响子元素
+    if (e.target === tip.value && tip.value?.classList.contains('fekit-follow-mobile')) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
   };
 
   onMounted(() => {
     document.addEventListener('click', cancel, true);
+    // 添加触摸事件监听器以防止页面滚动
+    document.addEventListener('touchstart', preventTouchScroll, { passive: false });
+    document.addEventListener('touchmove', preventTouchScroll, { passive: false });
+    // 判断是否为移动端
+    state.isMobile = window.innerWidth < 800;
   });
 
   const ex: any = ref(null);
   watch([() => dom.value, () => tip.value], () => {
     if (dom.value && tip.value) {
-      ex.value = new Follow(dom.value, tip.value, (status) => {
-        if (!props?.pos?.includes(':fixed')) {
-          if (status === 'b') {
-            const _pos = props?.pos?.replace(/b/g, 't');
-            if (_pos) {
-              state.pos = _pos;
-            }
-          } else {
-            const _pos = props?.pos?.replace(/t/g, 'b');
-            if (_pos) {
-              state.pos = _pos;
+      ex.value = new Follow(
+        dom.value,
+        tip.value,
+        (status) => {
+          if (!props?.pos?.includes(':fixed')) {
+            if (status === 'b') {
+              const _pos = props?.pos?.replace(/b/g, 't');
+              if (_pos) {
+                state.pos = _pos;
+              }
+            } else {
+              const _pos = props?.pos?.replace(/t/g, 'b');
+              if (_pos) {
+                state.pos = _pos;
+              }
             }
           }
-        }
-      });
+        },
+        { hideOnScrollOut: false },
+      );
     } else {
       ex.value = null;
     }
@@ -191,6 +210,9 @@
 
   onUnmounted(() => {
     document.removeEventListener('click', cancel, true);
+    // 移除触摸事件监听器
+    document.removeEventListener('touchstart', preventTouchScroll);
+    document.removeEventListener('touchmove', preventTouchScroll);
     state.show = 0;
 
     if (ex.value) {
@@ -218,3 +240,64 @@
     cancel,
   });
 </script>
+<style lang="scss">
+  @use '@neatui/css' as neatui;
+  @include neatui.mob {
+    .fekit-follow-mobile {
+      position: fixed !important;
+      width: 100% !important;
+      height: 100% !important;
+
+      display: flex !important;
+      flex-direction: column !important;
+      justify-content: flex-end !important;
+      align-items: center !important;
+      align-content: center !important;
+      inset: 0 0 0 0 !important;
+
+      &[ui-tips-view='1'] {
+        background-color: rgba(0, 0, 0, 0.5);
+        pointer-events: auto !important;
+        touch-action: none !important;
+      }
+
+      &[ui-tips~='@a'] [ui-tips-box] {
+        position: relative !important;
+
+        width: 100% !important;
+        bottom: env(safe-area-inset-bottom) !important;
+        right: unset !important;
+        top: unset !important;
+        left: unset !important;
+        transform: translate3d(0, 0.5em, 0);
+
+        display: flex !important;
+        flex-direction: column !important;
+        justify-content: flex-end !important;
+        align-items: center !important;
+        align-content: center !important;
+
+        [ui-tips-arrow] {
+          display: none;
+        }
+      }
+    }
+
+    .mob-follow-tips {
+      position: relative;
+      padding-bottom: env(safe-area-inset-bottom, 16px);
+      &::before {
+        position: absolute;
+        content: '';
+        display: block;
+        width: 4rem;
+        height: 3px;
+        border-radius: 1em;
+        background-color: var(--co-text-o-ss);
+        top: 5px;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+  }
+</style>

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) => {