@neatui/vue 2.17.2 → 2.17.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/vue",
-  "version": "2.17.2",
+  "version": "2.17.5",
   "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/basic/IScrollView.vue

@@ -1,131 +1,136 @@
 <template>
-  <div class="fekit-ipull-scroll" :ui-scroll="`:y ${stable ? 'stable' : ''}`" ref="root">
-    <div>
+  <div
+    class="fekit-ipull-scroll"
+    :ui-scroll="`:y ${stable ? 'stable' : ''}`"
+    ref="root"
+  >
+    <div class="full">
       <div class="fs-xs co-text o-mm" fekit-pullload-head="" v-if="pull">
-        <div v-show="demo.store.pull < 2" ui-flex="row cm">
-          <i class="pulldown icon icon-pulldown" :class="`${demo.store.pull === 1 ? 'toup' : ''}`"></i>
-          <span v-show="demo.store.pull === 0">下拉刷新</span>
-          <span v-show="demo.store.pull === 1">松开加载</span>
-        </div>
-        <div v-show="demo.store.pull === 2" ui-flex="row cm">
-          <span ui-load="@d"></span>
-          <!-- <span>正在刷新</span> -->
-        </div>
-        <div v-show="demo.store.pull === 3" ui-flex="row cm">
-          <span>刷新完成</span>
-        </div>
-      </div>
-      <slot></slot>
-      <div class="fs-xs co-text o-mm mb-sm" fekit-pullload-foot="" v-if="load">
-        <transition name="fekit-pullload-fade" mode="out-in">
-          <div v-if="demo.store.load === 2" ui-flex="row cm">
+        <slot name="pull-head" :state="demo.store.pull">
+          <div v-show="demo.store.pull < 2" ui-flex="row cm">
+            <i class="pulldown icon icon-pulldown" :class="`${demo.store.pull === 1 ? 'toup' : ''}`"></i>
+            <span v-show="demo.store.pull === 0">下拉刷新</span>
+            <span v-show="demo.store.pull === 1">松开加载</span>
+          </div>
+          <div v-show="demo.store.pull === 2" ui-flex="row cm">
             <span ui-load="@d"></span>
-            <!-- <span>正在加载</span> -->
           </div>
-          <div v-else-if="demo.store.load === 3">没有更多了</div>
-          <div v-else>&nbsp;</div>
-        </transition>
+          <div v-show="demo.store.pull === 3" ui-flex="row cm">
+            <span>刷新完成</span>
+          </div>
+        </slot>
+      </div>
+      <slot></slot>
+      <div class="fs-xs co-text o-mm my-sm" fekit-pullload-foot="" v-if="load">
+        <slot name="load-foot" :state="demo.store.load">
+          <transition name="fekit-pullload-fade" mode="out-in">
+            <div v-if="demo.store.load === 2" ui-flex="row cm">
+              <span ui-load="@d"></span>
+            </div>
+            <div v-else-if="demo.store.load === 3">没有更多了</div>
+            <div v-else>&nbsp;</div>
+          </transition>
+        </slot>
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-  import { onMounted, onBeforeUnmount, ref } from 'vue';
-  import PullLoad, { Easing } from '@fekit/pullload';
-  const emits = defineEmits(['onpull', 'onload']);
-  const props: any = defineProps({
-    pull: {
-      type: Boolean,
-      default: false,
-    },
-    load: {
-      type: Boolean,
-      default: false,
-    },
-    stable: {
-      type: Boolean,
-      default: false,
-    },
-  });
-  const root: any = ref(null);
-  const demo: any = ref(null);
-  demo.value = new PullLoad({
-    easing: Easing.easeOut,
-    friction: 0.3,
-    triggerDistance: 60,
-    loadingDistance: 50,
-    ...(props.pull
-      ? {
-          onpull: async () => {
-            emits('onpull', demo.value);
-          },
-        }
-      : {}),
-    ...(props.pull
-      ? {
-          onload: async () => {
-            emits('onload', demo.value);
-          },
-        }
-      : {}),
-  });
-
-  onMounted(() => {
-    if (root.value) {
-      demo.value?.listen(root.value);
-      if (props.pull) {
-        demo.value?.ispull();
+import { onMounted, onBeforeUnmount, ref } from "vue";
+import PullLoad, { Easing } from "@fekit/pullload";
+const emits = defineEmits(["onpull", "onload"]);
+const props: any = defineProps({
+  pull: {
+    type: Boolean,
+    default: false,
+  },
+  load: {
+    type: Boolean,
+    default: false,
+  },
+  stable: {
+    type: Boolean,
+    default: false,
+  },
+});
+const root: any = ref(null);
+const demo: any = ref(null);
+demo.value = new PullLoad({
+  easing: Easing.easeOut,
+  friction: 0.3,
+  triggerDistance: 60,
+  loadingDistance: 50,
+  ...(props.pull
+    ? {
+        onpull: async () => {
+          emits("onpull", demo.value);
+        },
+      }
+    : {}),
+  ...(props.load
+    ? {
+        onload: async () => {
+          emits("onload", demo.value);
+        },
       }
+    : {}),
+});
+
+onMounted(() => {
+  if (root.value) {
+    demo.value?.listen(root.value);
+    if (props.pull) {
+      demo.value?.ispull();
     }
-  });
-  onBeforeUnmount(() => {
-    demo.value?.remove();
-  });
+  }
+});
+onBeforeUnmount(() => {
+  demo.value?.remove();
+});
 
-  const pullload = () => {
-    demo.value?.ispull();
-  };
+const pullload = () => {
+  demo.value?.ispull();
+};
 
-  defineExpose({ pullload, ex: () => demo.value });
+defineExpose({ pullload, ex: () => demo.value });
 </script>
 
 <style lang="scss">
-  .fekit-ipull-scroll {
-    [fekit-pullload-head],
-    [fekit-pullload-foot] {
-      position: absolute;
-      width: 100%;
-      height: 2em;
-      left: 0;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      align-content: center;
-    }
-    [fekit-pullload-head] {
-      bottom: 100%;
-      margin-bottom: 1em;
-    }
-    [fekit-pullload-foot] {
-      position: relative;
-      top: 100%;
-    }
+.fekit-ipull-scroll {
+  [fekit-pullload-head],
+  [fekit-pullload-foot] {
+    position: absolute;
+    width: 100%;
+    height: 2em;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+  }
+  [fekit-pullload-head] {
+    bottom: 100%;
+    margin-bottom: 1em;
+  }
+  [fekit-pullload-foot] {
+    position: relative;
+  }
 
-    .fekit-pullload-fade-enter-active,
-    .fekit-pullload-fade-leave-active {
-      transition: opacity 0.2s;
-    }
-    .fekit-pullload-fade-enter,
-    .fekit-pullload-fade-leave-to {
-      opacity: 0;
-    }
+  .fekit-pullload-fade-enter-active,
+  .fekit-pullload-fade-leave-active {
+    transition: opacity 0.2s;
+  }
+  .fekit-pullload-fade-enter,
+  .fekit-pullload-fade-leave-to {
+    opacity: 0;
+  }
 
-    .pulldown {
-      transition: all 0.3s;
-      display: inline-block;
-      &.toup {
-        transform: rotate(180deg);
-      }
+  .pulldown {
+    transition: all 0.3s;
+    display: inline-block;
+    &.toup {
+      transform: rotate(180deg);
     }
   }
+}
 </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>