@neatui/vue 4.7.0 → 4.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/vue",
-  "version": "4.7.0",
+  "version": "4.8.0",
   "description": "basic component ui",
   "main": "./src/index.ts",
   "license": "MIT",
@@ -34,7 +34,7 @@
     "@fekit/scrollto": "^3.0.3",
     "@fekit/toast": "^2.7.2",
     "@fekit/utils": "^6.0.0",
-    "@neatui/css": "^4.4.1",
+    "@neatui/css": "4.7.1",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@vue/compiler-sfc": "^3.4.30",
@@ -46,5 +46,8 @@
     "sortablejs": "^1.15.6",
     "swiper": "^11.0.4",
     "vue-cropper": "^0.6.4"
+  },
+  "resolutions": {
+    "@neatui/css": "4.7.1"
   }
 }

package/src/components/basic/IFollowView.vue

@@ -16,7 +16,7 @@
         @mouseout="hoverhide"
         @click="clickhide"
       >
-        <div ref="box" :ui-tips-box="state.pos" :class="tipBoxClass" :style="tipBoxStyle">
+        <div ref="box" :ui-tips-box="state.pos" :class="tipBoxClass" :style="[tipBoxStyle, dragPassing ? 'pointer-events: none;' : '']">
           <div ui-hide=">mob" class="mob-follow-tips w-full n-ss" ui-flex="row xm">
             <div class="w-xs*s"></div>
             <div>
@@ -54,6 +54,7 @@
     tipBoxStyle?: string;
     arrow?: any;
     clickTipHide?: boolean;
+    dragTipHide?: boolean;
     mobile?: boolean;
     title?: string;
     zIndex?: string | number | null;
@@ -72,6 +73,7 @@
     tipBoxStyle: '',
     arrow: {},
     clickTipHide: false,
+    dragTipHide: false,
     mobile: true,
     title: '',
     zIndex: undefined,
@@ -92,6 +94,78 @@
 
   const showTimer: any = ref(null);
   const hideTimer: any = ref(null);
+  const dragPointerId = ref<number | null>(null);
+  const dragFromInternal = ref(false);
+  const dragStartX = ref(0);
+  const dragStartY = ref(0);
+  const dragPassing = ref(false);
+  const DRAG_HIDE_PX = 6;
+
+  const containsPoint = (el: HTMLElement | null, x: number, y: number) => {
+    if (!el) return false;
+    const rect = el.getBoundingClientRect();
+    return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+  };
+
+  const isOutsideFollow = (x: number, y: number) => {
+    return !containsPoint(box.value, x, y) && !containsPoint(dom.value, x, y);
+  };
+
+  const isInternalDragSource = (target: EventTarget | null) => {
+    if (!(target instanceof Element)) return false;
+    if (target.closest('input, textarea, select, [contenteditable="true"], [role="slider"]')) return true;
+    const stop = box.value?.parentElement || null;
+    let el: Element | null = target;
+    while (el && el !== stop) {
+      const style = window.getComputedStyle(el);
+      const canScroll =
+        ((style.overflowY === 'auto' || style.overflowY === 'scroll') && el.scrollHeight > el.clientHeight) ||
+        ((style.overflowX === 'auto' || style.overflowX === 'scroll') && el.scrollWidth > el.clientWidth);
+      if (canScroll) return true;
+      el = el.parentElement;
+    }
+    return false;
+  };
+
+  const clearDragSession = () => {
+    dragPointerId.value = null;
+    dragFromInternal.value = false;
+  };
+
+  const hideFromDrag = () => {
+    dragPassing.value = true;
+    state.show = 0;
+    state.hover = 0;
+    clearDragSession();
+  };
+
+  const onDragPointerDown = (ev: PointerEvent) => {
+    if (!props.dragTipHide || !state.show || ev.button !== 0) return;
+    if (!box.value?.contains(ev.target as Node)) return;
+    dragPointerId.value = ev.pointerId;
+    dragFromInternal.value = isInternalDragSource(ev.target);
+    dragStartX.value = ev.clientX;
+    dragStartY.value = ev.clientY;
+  };
+
+  const onDragPointerMove = (ev: PointerEvent) => {
+    if (!props.dragTipHide || dragPointerId.value !== ev.pointerId || ev.buttons === 0) return;
+    if (isOutsideFollow(ev.clientX, ev.clientY)) {
+      hideFromDrag();
+      return;
+    }
+    if (dragFromInternal.value) return;
+    const dx = ev.clientX - dragStartX.value;
+    const dy = ev.clientY - dragStartY.value;
+    if (dx * dx + dy * dy >= DRAG_HIDE_PX * DRAG_HIDE_PX) {
+      hideFromDrag();
+    }
+  };
+
+  const onDragPointerUp = (ev: PointerEvent) => {
+    if (dragPointerId.value === ev.pointerId) clearDragSession();
+  };
+
   watch(
     () => state.hover,
     () => {
@@ -148,11 +222,13 @@
   };
 
   const show = () => {
+    dragPassing.value = false;
     state.show = 1;
   };
 
   const hide = () => {
     state.show = 0;
+    clearDragSession();
   };
 
   // 取消
@@ -184,6 +260,10 @@
   onMounted(() => {
     ensureTeleportTarget();
     document.addEventListener('click', cancel, true);
+    document.addEventListener('pointerdown', onDragPointerDown, true);
+    window.addEventListener('pointermove', onDragPointerMove, true);
+    window.addEventListener('pointerup', onDragPointerUp, true);
+    window.addEventListener('pointercancel', onDragPointerUp, true);
     // 添加触摸事件监听器以防止页面滚动
     document.addEventListener('touchstart', preventTouchScroll, {
       passive: false,
@@ -232,6 +312,10 @@
 
   onUnmounted(() => {
     document.removeEventListener('click', cancel, true);
+    document.removeEventListener('pointerdown', onDragPointerDown, true);
+    window.removeEventListener('pointermove', onDragPointerMove, true);
+    window.removeEventListener('pointerup', onDragPointerUp, true);
+    window.removeEventListener('pointercancel', onDragPointerUp, true);
     // 移除触摸事件监听器
     document.removeEventListener('touchstart', preventTouchScroll);
     document.removeEventListener('touchmove', preventTouchScroll);
@@ -245,6 +329,11 @@
   watch(
     () => state.show,
     (show: any) => {
+      if (show) {
+        dragPassing.value = false;
+      } else {
+        clearDragSession();
+      }
       if (ex.value) {
         if (show) {
           ex.value.listen();

package/src/components/form/MoreSelectTree.vue

@@ -0,0 +1,258 @@
+<template>
+  <div :ui-form="`${theme} type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : 'hide'">
+    <IFollowView ref="ifollow" v-model="state.show" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
+      <Input
+        v-bind="{ placeholder, rules, theme, sz, co, block, ready, type: 'text', tips, disabled, readonly: true, clearable: false, verify, prefix, suffix, interacted }"
+        :modelValue="state.label"
+        :interacted="interacted"
+      >
+        <template #suffix><i ui-form-select=""></i></template>
+      </Input>
+      <template #tips v-if="!disabled && !readonly">
+        <div v-if="search" class="nb-sm nx-sl">
+          <Input v-model="state.search" :theme="theme" sz="s">
+            <template #suffix>
+              <i ui-form-search="" class="co-note"></i>
+            </template>
+          </Input>
+        </div>
+        <div v-if="state.filter?.length" ui-scroll=":y s" class="nx-sm lh-ml" style="min-width: 100%; max-height: 12em">
+          <Tree
+            v-model="state.value"
+            :treeData="state.filter"
+            :options="fields"
+            :multiple="true"
+            :checkStrictly="checkStrictly"
+            :defaultExpandAll="defaultExpandAll"
+            :expandedKeys="expandedKeys"
+            block
+          />
+        </div>
+        <div v-else class="w-full ny-ms" ui-flex="col cm" v-html="spare"></div>
+        <ul class="nx-sm lh-ml" v-if="tools">
+          <li class="my-ss"><div class="o-mm" ui-line="@a"></div></li>
+          <li ui-flex="row xm">
+            <div class="co-main">
+              <p class="nx-sm r-ss nowrap">
+                <span>{{ state.count }}个可选项</span>
+              </p>
+            </div>
+            <div>
+              <button v-show="state.value?.length" class="co-risk" ui-btn="@a none s" type="button" @click="remove">清空</button>
+            </div>
+          </li>
+        </ul>
+      </template>
+    </IFollowView>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { reactive, ref, computed, watch } from 'vue';
+  import Input from './Input.vue';
+  import { IFollowView } from '../basic';
+  import { Tree } from '../display';
+  import { isArray } from '@fekit/utils';
+
+  const ifollow: any = ref(null);
+  const emits = defineEmits(['update:modelValue', 'change', 'onshow', 'onhide']);
+
+  /**
+   * 入参说明
+   * modelValue         值（多选，数组）
+   * options            枚举列表（label / value / child）
+   * tools              是否显示工具栏
+   * spare              空闲兜底内容
+   * search             是否启用搜索框
+   * separator          回显文案的分隔符
+   * checkStrictly      父子节点选中状态不再关联
+   * defaultExpandAll   是否默认展开所有子节点
+   * expandedKeys       默认展开的节点
+   *
+   * ---------------------------
+   * theme          主题
+   * sz             尺寸
+   * co             颜色
+   * block          撑满
+   * ready          准备就绪
+   * tips           提示文案
+   * placeholder    内容占位
+   * disabled       是否禁用
+   * readonly       是否只读
+   * rules          校验规则
+   * verify         是否显示校验图标
+   * prefix         前缀内容
+   * suffix         后缀内容
+   * interacted     用户是否交互
+   */
+
+  // 类型
+  interface Props {
+    modelValue?: Array<string | number>;
+    options?: Array<object>;
+    tools?: boolean;
+    spare?: string;
+    search?: boolean;
+    separator?: string;
+    checkStrictly?: boolean;
+    defaultExpandAll?: boolean;
+    expandedKeys?: Array<string | number>;
+
+    // Input
+    placeholder?: string;
+    rules?: Array<object>;
+    theme?: string;
+    sz?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
+    co?: string;
+    block?: boolean;
+    ready?: boolean;
+    tips?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    verify?: boolean;
+    prefix?: Array<any>;
+    suffix?: Array<any>;
+    interacted?: boolean;
+  }
+
+  // 入参
+  const props: any = withDefaults(defineProps<Props>(), {
+    modelValue: () => [],
+    options: () => [],
+    tools: true,
+    spare: '当前没有可选项',
+    search: true,
+    separator: ' | ',
+    checkStrictly: false,
+    defaultExpandAll: true,
+    expandedKeys: () => [],
+
+    // INPUT
+    placeholder: '',
+    rules: () => [],
+    theme: '@a',
+    sz: '',
+    co: '',
+    block: true,
+    ready: false,
+    tips: '',
+    disabled: false,
+    readonly: false,
+    verify: false,
+    prefix: () => [],
+    suffix: () => [],
+    interacted: false,
+  });
+
+  // Tree 的字段映射：枚举用 value / label / child，Tree 内部用 id / label / children
+  const fields = { id: 'value', label: 'label', children: 'child' };
+
+  // 过滤：子节点命中则只留命中的子节点，自身命中则保留整棵子树（与 filterJson 行为一致，但忽略大小写）
+  const filterTree = (nodes: Array<any> = [], keyword: string): Array<any> => {
+    if (!keyword) return nodes;
+    const out: Array<any> = [];
+    for (const node of nodes) {
+      const child = node?.child?.length ? filterTree(node.child, keyword) : [];
+      if (child.length) {
+        out.push({ ...node, child });
+      } else if (String(node?.label ?? '').toLowerCase().includes(keyword)) {
+        out.push({ ...node });
+      }
+    }
+    return out;
+  };
+
+  // 回显文案：始终在完整枚举里找，避免搜索时已选项的文案消失
+  const collectLabels = (nodes: Array<any> = [], values: Array<string | number> = []) => {
+    const set = new Set(values.map(String));
+    const out: Array<string> = [];
+    const walk = (list: Array<any>) => {
+      for (const node of list) {
+        if (set.has(String(node?.value))) out.push(node?.label);
+        if (node?.child?.length) walk(node.child);
+      }
+    };
+    walk(nodes);
+    return out;
+  };
+
+  // 可选项数量：关联选择时只算叶子节点，独立选择时算全部节点
+  const countNodes = (nodes: Array<any> = [], all: boolean): number => {
+    let n = 0;
+    const walk = (list: Array<any>) => {
+      for (const node of list) {
+        if (node?.child?.length) {
+          if (all) n += 1;
+          walk(node.child);
+        } else {
+          n += 1;
+        }
+      }
+    };
+    walk(nodes);
+    return n;
+  };
+
+  const state: any = reactive({
+    show: 0,
+    search: '',
+    value: computed({
+      get: () => (isArray(props.modelValue) ? props.modelValue : []),
+      set: (value: Array<string | number>) => {
+        const next = isArray(value) ? value : [];
+        // Tree 挂载时会回吐一次初始值，值没变就不向外抛事件
+        if (next.join(',') === state.value.join(',')) return;
+        change(next);
+      },
+    }),
+    label: computed(() => collectLabels(props.options, isArray(props.modelValue) ? props.modelValue : []).join(props.separator)),
+    filter: computed(() => filterTree(props.options, state.search.trim().toLowerCase())),
+    count: computed(() => countNodes(state.filter, props.checkStrictly)),
+  });
+
+  // 更新
+  const change = (value: Array<string | number> = []) => {
+    emits('update:modelValue', value);
+    emits('change', value);
+  };
+  // 选择
+  const select = (value: Array<string | number> = []) => {
+    change(value);
+  };
+  // 清空
+  const remove = () => {
+    change([]);
+    cancel();
+  };
+  // 取消
+  const cancel = () => {
+    ifollow.value?.cancel();
+  };
+  // 显示
+  const onshow = () => {
+    emits('onshow', state.value);
+  };
+  // 折叠
+  const timer: any = ref(null);
+  const onhide = () => {
+    clearTimeout(timer.value);
+    timer.value = setTimeout(() => {
+      state.search = '';
+    }, 500);
+    emits('onhide', state.value);
+  };
+
+  watch(
+    () => props.disabled,
+    (disabled: boolean) => {
+      if (disabled) cancel();
+    },
+  );
+
+  defineExpose({
+    select,
+    remove,
+    change,
+    cancel,
+  });
+</script>

package/src/components/form/index.ts

@@ -15,6 +15,7 @@ import MoreSelect from './MoreSelect.vue';
 import MoreSelectList from './MoreSelectList.vue';
 import MoreSelectTags from './MoreSelectTags.vue';
 import MoreSelectPicker from './MoreSelectPicker.vue';
+import MoreSelectTree from './MoreSelectTree.vue';
 import SearchMoreSelect from './SearchMoreSelect.vue';
 import PageSelect from './PageSelect.vue';
 import SelectTree from './SelectTree/SelectTree.vue';
@@ -47,6 +48,7 @@ export {
   MoreSelectList,
   MoreSelectTags,
   MoreSelectPicker,
+  MoreSelectTree,
   SearchMoreSelect,
   // 日期&时间
   DateView,