yc-pro-components 0.0.1

package/lib/components/yc-plus-tree/src/useSortableDrag.d.ts

@@ -0,0 +1,107 @@
+import { Ref } from 'vue';
+import { default as Sortable } from 'sortablejs';
+
+/**
+ * 拖拽配置选项
+ */
+export interface SortableDragOptions {
+    /** 是否启用拖拽 */
+    enabled?: boolean;
+    /** 拖拽动画时长（毫秒） */
+    animation?: number;
+    /** 拖拽手柄选择器（如果指定，只有点击手柄才能拖拽） */
+    handle?: string;
+    /** 分组名称（相同分组的元素可以互相拖拽） */
+    group?: string | {
+        name: string;
+        pull?: boolean;
+        put?: boolean;
+    };
+    /** 是否允许拖拽到其他位置 */
+    sort?: boolean;
+    /** 幽灵元素的 CSS 类名 */
+    ghostClass?: string;
+    /** 选中元素的 CSS 类名 */
+    chosenClass?: string;
+    /** 拖拽中元素的 CSS 类名 */
+    dragClass?: string;
+    /** 判断元素是否可拖拽的函数 */
+    filter?: string | ((evt: Event, target: HTMLElement) => boolean);
+    /** 阻止拖拽的选择器 */
+    preventOnFilter?: boolean;
+}
+/**
+ * 拖拽事件回调
+ */
+export interface SortableDragEvents {
+    /** 拖拽开始事件 */
+    onStart?: (evt: Sortable.SortableEvent) => void;
+    /** 拖拽结束事件 */
+    onEnd?: (evt: Sortable.SortableEvent) => void;
+    /** 元素移动事件 */
+    onMove?: (evt: Sortable.MoveEvent, originalEvent: Event) => boolean | -1 | 1;
+    /** 拖拽更新事件（在同一列表中排序） */
+    onUpdate?: (evt: Sortable.SortableEvent) => void;
+    /** 元素添加事件（从其他列表添加） */
+    onAdd?: (evt: Sortable.SortableEvent) => void;
+    /** 元素移除事件（移动到其他列表） */
+    onRemove?: (evt: Sortable.SortableEvent) => void;
+    /** 拖拽选择事件 */
+    onChoose?: (evt: Sortable.SortableEvent) => void;
+    /** 取消选择事件 */
+    onUnchoose?: (evt: Sortable.SortableEvent) => void;
+}
+/**
+ * useSortableDrag 参数接口
+ */
+export interface UseSortableDragParams {
+    /** 树容器的 DOM 引用 */
+    containerRef: Ref<HTMLElement | undefined>;
+    /** 拖拽配置选项 */
+    options: SortableDragOptions;
+    /** 拖拽事件回调 */
+    events: SortableDragEvents;
+    /** 搜索关键词（用于判断是否禁用拖拽） */
+    filterText?: Ref<string>;
+    /** 树节点容器选择器 */
+    treeNodeSelector?: string;
+}
+/**
+ * useSortableDrag 返回值接口
+ */
+export interface UseSortableDragReturn {
+    /** 是否启用拖拽（搜索时自动禁用） */
+    isDraggableEnabled: Ref<boolean>;
+    /** SortableJS 实例 */
+    sortableInstance: Ref<Sortable | null>;
+    /** 销毁拖拽实例 */
+    destroy: () => void;
+    /** 启用拖拽 */
+    enable: () => void;
+    /** 禁用拖拽 */
+    disable: () => void;
+}
+/**
+ * 使用 SortableJS 实现树形组件拖拽
+ *
+ * @param params - 拖拽参数配置
+ * @returns 拖拽控制方法和状态
+ *
+ * @example
+ * ```ts
+ * const { isDraggableEnabled, destroy } = useSortableDrag({
+ *   containerRef: treeRef,
+ *   options: {
+ *     enabled: true,
+ *     animation: 150,
+ *     handle: '.drag-handle'
+ *   },
+ *   events: {
+ *     onEnd: (evt) => {
+ *       console.log('拖拽完成', evt);
+ *     }
+ *   }
+ * });
+ * ```
+ */
+export declare function useSortableDrag(params: UseSortableDragParams): UseSortableDragReturn;

package/lib/components/yc-plus-tree/src/useSortableDrag.js

@@ -0,0 +1,157 @@
+'use strict';
+
+var Sortable = require('sortablejs');
+var vue = require('vue');
+
+function useSortableDrag(params) {
+  const {
+    containerRef,
+    options,
+    events,
+    filterText,
+    treeNodeSelector = ".el-tree-v2__list"
+  } = params;
+  let _sortableInstance = null;
+  const isDraggableEnabled = vue.computed(() => {
+    if (!options.enabled) return false;
+    if (filterText && filterText.value) return false;
+    return true;
+  });
+  const initSortable = () => {
+    var _a, _b, _c, _d, _e, _f;
+    if (!containerRef.value) {
+      return;
+    }
+    let treeNodeContainer = null;
+    if (treeNodeSelector !== ".el-tree-v2__list") {
+      treeNodeContainer = containerRef.value.querySelector(treeNodeSelector);
+    }
+    if (!treeNodeContainer) {
+      const selectors = [
+        '[role="tree"]',
+        // 标准 HTML tree (使用最多)
+        ".el-tree-v2__wrapper",
+        // el-tree-v2 的主容器
+        ".el-tree-v2"
+      ];
+      for (const selector of selectors) {
+        treeNodeContainer = containerRef.value.querySelector(selector);
+        if (treeNodeContainer) {
+          const firstTreeitem = treeNodeContainer.querySelector('[role="treeitem"]');
+          if (firstTreeitem) {
+            const directParent = firstTreeitem.parentElement;
+            treeNodeContainer = directParent;
+          }
+          break;
+        }
+      }
+    }
+    if (!treeNodeContainer) {
+      return;
+    }
+    const sortableOptions = {
+      animation: (_a = options.animation) != null ? _a : 150,
+      handle: options.handle,
+      group: options.group,
+      sort: (_b = options.sort) != null ? _b : true,
+      ghostClass: (_c = options.ghostClass) != null ? _c : "sortable-ghost",
+      chosenClass: (_d = options.chosenClass) != null ? _d : "sortable-chosen",
+      dragClass: (_e = options.dragClass) != null ? _e : "sortable-drag",
+      filter: options.filter,
+      preventOnFilter: (_f = options.preventOnFilter) != null ? _f : true,
+      disabled: !isDraggableEnabled.value,
+      // 强制刷新
+      forceFallback: false,
+      // 设置拖拽延迟，避免误触
+      delay: 0,
+      delayOnTouchOnly: false,
+      // 只允许拖拽 treeitem 元素
+      draggable: '[role="treeitem"]',
+      // 事件回调
+      onStart: (evt) => {
+        var _a2;
+        (_a2 = events.onStart) == null ? void 0 : _a2.call(events, evt);
+      },
+      onEnd: (evt) => {
+        var _a2;
+        (_a2 = events.onEnd) == null ? void 0 : _a2.call(events, evt);
+      },
+      onMove: (evt, originalEvent) => {
+        var _a2, _b2;
+        const result = (_b2 = (_a2 = events.onMove) == null ? void 0 : _a2.call(events, evt, originalEvent)) != null ? _b2 : true;
+        return result;
+      },
+      onUpdate: (evt) => {
+        var _a2;
+        (_a2 = events.onUpdate) == null ? void 0 : _a2.call(events, evt);
+      },
+      onAdd: (evt) => {
+        var _a2;
+        (_a2 = events.onAdd) == null ? void 0 : _a2.call(events, evt);
+      },
+      onRemove: (evt) => {
+        var _a2;
+        (_a2 = events.onRemove) == null ? void 0 : _a2.call(events, evt);
+      },
+      onChoose: (evt) => {
+        var _a2;
+        (_a2 = events.onChoose) == null ? void 0 : _a2.call(events, evt);
+      },
+      onUnchoose: (evt) => {
+        var _a2;
+        (_a2 = events.onUnchoose) == null ? void 0 : _a2.call(events, evt);
+      }
+    };
+    try {
+      _sortableInstance = Sortable.create(treeNodeContainer, sortableOptions);
+    } catch (e) {
+    }
+  };
+  const destroy = () => {
+    if (_sortableInstance) {
+      _sortableInstance.destroy();
+      _sortableInstance = null;
+    }
+  };
+  const enable = () => {
+    _sortableInstance == null ? void 0 : _sortableInstance.option("disabled", false);
+  };
+  const disable = () => {
+    _sortableInstance == null ? void 0 : _sortableInstance.option("disabled", true);
+  };
+  vue.onMounted(() => {
+    if (isDraggableEnabled.value) {
+      vue.nextTick(() => {
+        setTimeout(() => {
+          initSortable();
+        }, 500);
+      });
+    }
+  });
+  vue.watch(
+    () => isDraggableEnabled.value,
+    (enabled) => {
+      if (enabled && !_sortableInstance) {
+        vue.nextTick(() => {
+          setTimeout(() => {
+            initSortable();
+          }, 500);
+        });
+      } else if (_sortableInstance) {
+        _sortableInstance.option("disabled", !enabled);
+      }
+    }
+  );
+  vue.onBeforeUnmount(() => {
+    destroy();
+  });
+  return {
+    isDraggableEnabled,
+    sortableInstance: vue.computed(() => _sortableInstance),
+    destroy,
+    enable,
+    disable
+  };
+}
+
+exports.useSortableDrag = useSortableDrag;

package/lib/components/yc-segmented/index.d.ts

@@ -0,0 +1,71 @@
+import { DefineComponent, PropType, ComponentOptionsMixin, PublicProps, ExtractPropTypes } from 'vue';
+import { SFCWithInstall } from 'yc-components/es/utils';
+import { YcSegmentedOption, YcSegmentedProps } from './src/type';
+import { default as YcSegmented } from './src/index';
+
+export declare const YcSegmentedWithInstall: SFCWithInstall<DefineComponent<{
+    options: {
+        type: PropType<YcSegmentedOption[]>;
+        default: () => never[];
+    };
+    modelValue: {
+        type: PropType<string | number>;
+        require: boolean;
+        default: number;
+    };
+    block: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: PropType<"default" | "small" | "large">;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    resize: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, () => any, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", PublicProps, Readonly< ExtractPropTypes<{
+    options: {
+        type: PropType<YcSegmentedOption[]>;
+        default: () => never[];
+    };
+    modelValue: {
+        type: PropType<string | number>;
+        require: boolean;
+        default: number;
+    };
+    block: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: PropType<"default" | "small" | "large">;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    resize: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    options: YcSegmentedOption[];
+    modelValue: string | number;
+    resize: boolean;
+    block: boolean;
+}, {}>>;
+export { YcSegmented };
+export type { YcSegmentedOption, YcSegmentedProps };
+export default YcSegmented;
+export { YcSegmented as ReSegmented };
+export type { YcSegmentedOption as ReSegmentedOption };
+export type YcSegmentedInstance = InstanceType<typeof YcSegmented>;

package/lib/components/yc-segmented/index.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('js-cookie');
+require('dayjs');
+require('numeral');
+require('accounting');
+require('good-storage');
+require('crypto-js');
+require('qs');
+var component = require('../../utils/dist/component.js');
+var index = require('./src/index.js');
+
+const YcSegmentedWithInstall = component.withInstall(index.default);
+
+exports.ReSegmented = index.default;
+exports.YcSegmented = index.default;
+exports.default = index.default;
+exports.YcSegmentedWithInstall = YcSegmentedWithInstall;

package/lib/components/yc-segmented/src/index.d.ts

@@ -0,0 +1,74 @@
+import { PropType, DefineComponent, ComponentOptionsMixin, PublicProps, ExtractPropTypes } from 'vue';
+import { YcSegmentedOption } from './type';
+
+declare const _default: DefineComponent<{
+    options: {
+        type: PropType<YcSegmentedOption[]>;
+        default: () => never[];
+    };
+    /** 默认选中，按照第一个索引为 `0` 的模式，可选（`modelValue`只有传`number`类型时才为响应式） */
+    modelValue: {
+        type: PropType<string | number>;
+        require: boolean;
+        default: number;
+    };
+    /** 将宽度调整为父元素宽度 */
+    block: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 控件尺寸 */
+    size: {
+        type: PropType<"default" | "small" | "large">;
+    };
+    /** 是否全局禁用，默认 `false` */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 当内容发生变化时，设置 `resize` 可使其自适应容器位置 */
+    resize: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, () => any, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", PublicProps, Readonly< ExtractPropTypes<{
+    options: {
+        type: PropType<YcSegmentedOption[]>;
+        default: () => never[];
+    };
+    /** 默认选中，按照第一个索引为 `0` 的模式，可选（`modelValue`只有传`number`类型时才为响应式） */
+    modelValue: {
+        type: PropType<string | number>;
+        require: boolean;
+        default: number;
+    };
+    /** 将宽度调整为父元素宽度 */
+    block: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 控件尺寸 */
+    size: {
+        type: PropType<"default" | "small" | "large">;
+    };
+    /** 是否全局禁用，默认 `false` */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 当内容发生变化时，设置 `resize` 可使其自适应容器位置 */
+    resize: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    options: YcSegmentedOption[];
+    modelValue: string | number;
+    resize: boolean;
+    block: boolean;
+}, {}>;
+export default _default;

package/lib/components/yc-segmented/src/index.js

@@ -0,0 +1,180 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var core = require('@vueuse/core');
+var lodashEs = require('lodash-es');
+
+const props = {
+  options: {
+    type: Array,
+    default: () => []
+  },
+  /** 默认选中，按照第一个索引为 `0` 的模式，可选（`modelValue`只有传`number`类型时才为响应式） */
+  modelValue: {
+    type: void 0,
+    require: false,
+    default: 0
+  },
+  /** 将宽度调整为父元素宽度 */
+  block: {
+    type: Boolean,
+    default: false
+  },
+  /** 控件尺寸 */
+  size: {
+    type: String
+  },
+  /** 是否全局禁用，默认 `false` */
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  /** 当内容发生变化时，设置 `resize` 可使其自适应容器位置 */
+  resize: {
+    type: Boolean,
+    default: false
+  }
+};
+var YcSegmented = /* @__PURE__ */ vue.defineComponent({
+  name: "YcSegmented",
+  props,
+  emits: ["change", "update:modelValue"],
+  setup(props2, {
+    emit
+  }) {
+    const width = vue.ref(0);
+    const translateX = vue.ref(0);
+    const initStatus = vue.ref(false);
+    const curMouseActive = vue.ref(-1);
+    const segmentedItembg = vue.ref("");
+    const instance = vue.getCurrentInstance();
+    const curIndex = lodashEs.isNumber(props2.modelValue) ? vue.toRef(props2, "modelValue") : vue.ref(0);
+    const isCurrentDark = vue.computed(() => {
+      return document.documentElement.classList.contains("dark");
+    });
+    function handleChange({
+      option,
+      index
+    }, event) {
+      if (props2.disabled || option.disabled) return;
+      event.preventDefault();
+      if (lodashEs.isNumber(props2.modelValue)) {
+        emit("update:modelValue", index);
+      } else {
+        curIndex.value = index;
+      }
+      segmentedItembg.value = "";
+      emit("change", {
+        index,
+        option
+      });
+    }
+    function handleMouseenter({
+      option,
+      index
+    }, event) {
+      if (props2.disabled) return;
+      event.preventDefault();
+      curMouseActive.value = index;
+      if (option.disabled || curIndex.value === index) {
+        segmentedItembg.value = "";
+      } else {
+        const currentIsDark = document.documentElement.classList.contains("dark");
+        segmentedItembg.value = currentIsDark ? "#1f1f1f" : "#fff";
+      }
+    }
+    function handleMouseleave(_, event) {
+      if (props2.disabled) return;
+      event.preventDefault();
+      curMouseActive.value = -1;
+    }
+    function handleInit(index = curIndex.value) {
+      vue.nextTick(() => {
+        var _a;
+        const curLabelRef = (_a = instance == null ? void 0 : instance.proxy) == null ? void 0 : _a.$refs[`labelRef${index}`];
+        if (!curLabelRef) return;
+        width.value = curLabelRef.clientWidth;
+        translateX.value = curLabelRef.offsetLeft;
+        initStatus.value = true;
+      });
+    }
+    function handleResizeInit() {
+      const segmentedElement = document.querySelector(".yc-segmented");
+      if (segmentedElement) {
+        core.useResizeObserver(segmentedElement, () => {
+          vue.nextTick(() => {
+            handleInit(curIndex.value);
+          });
+        });
+      }
+    }
+    if (props2.block || props2.resize) {
+      handleResizeInit();
+    }
+    vue.watch(() => curIndex.value, (index) => {
+      vue.nextTick(() => {
+        handleInit(index);
+      });
+    }, {
+      immediate: true
+    });
+    vue.watch(() => props2.size, handleResizeInit, {
+      immediate: true
+    });
+    const rendLabel = () => {
+      return props2.options.map((option, index) => {
+        return vue.createVNode("label", {
+          "ref": `labelRef${index}`,
+          "class": ["yc-segmented-item", (props2.disabled || (option == null ? void 0 : option.disabled)) && "yc-segmented-item-disabled"],
+          "style": {
+            background: curMouseActive.value === index ? segmentedItembg.value : "",
+            color: props2.disabled ? void 0 : !option.disabled && (curIndex.value === index || curMouseActive.value === index) ? isCurrentDark.value ? "rgba(255, 255, 255, 0.85)" : "" : ""
+          },
+          "onMouseenter": (event) => handleMouseenter({
+            option,
+            index
+          }, event),
+          "onMouseleave": (event) => handleMouseleave({
+            option,
+            index
+          }, event),
+          "onClick": (event) => handleChange({
+            option,
+            index
+          }, event)
+        }, [vue.createVNode("input", {
+          "type": "radio",
+          "name": "segmented"
+        }, null), vue.createVNode("div", {
+          "class": "yc-segmented-item-label"
+        }, [option.icon && !lodashEs.isFunction(option.label) ? vue.createVNode("span", {
+          "class": "yc-segmented-item-icon",
+          "style": {
+            marginRight: option.label ? "6px" : 0
+          }
+        }, [vue.h(option.icon)]) : null, option.label ? lodashEs.isFunction(option.label) ? vue.h(option.label) : vue.createVNode("span", null, [option.label]) : null])]);
+      });
+    };
+    return () => vue.createVNode("div", {
+      "class": {
+        "yc-segmented": true,
+        "yc-segmented-block": props2.block,
+        "yc-segmented--large": props2.size === "large",
+        "yc-segmented--small": props2.size === "small"
+      }
+    }, [vue.createVNode("div", {
+      "class": "yc-segmented-group"
+    }, [vue.createVNode("div", {
+      "class": "yc-segmented-item-selected",
+      "style": {
+        width: `${width.value}px`,
+        transform: `translateX(${translateX.value}px)`,
+        display: initStatus.value ? "block" : "none"
+      }
+    }, null), rendLabel()])]);
+  }
+});
+
+exports.default = YcSegmented;

package/lib/components/yc-segmented/src/type.d.ts

@@ -0,0 +1,28 @@
+import { VNode, Component } from 'vue';
+
+export interface YcSegmentedOption {
+    /** 文字 */
+    label?: string | (() => VNode | Component);
+    /** 图标组件 */
+    icon?: Component;
+    /** 值 */
+    value?: any;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** tooltip 提示 */
+    tip?: string;
+}
+export interface YcSegmentedProps {
+    /** 选项列表 */
+    options?: YcSegmentedOption[];
+    /** 当前选中值（索引或值） */
+    modelValue?: number | string;
+    /** 将宽度调整为父元素宽度 */
+    block?: boolean;
+    /** 控件尺寸 */
+    size?: 'small' | 'default' | 'large';
+    /** 是否全局禁用 */
+    disabled?: boolean;
+    /** 当内容发生变化时，设置 resize 可使其自适应容器位置 */
+    resize?: boolean;
+}

package/lib/components/yc-segmented/src/type.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/lib/components/yc-select-v2/index.d.ts

@@ -0,0 +1,6 @@
+import { default as YcSelectV2 } from './src/index.vue';
+
+export type YcSelectV2Instance = InstanceType<typeof YcSelectV2>;
+export * from './src/type';
+export { YcSelectV2 };
+export { YcSelectV2 as ReSelectV2 };

package/lib/components/yc-select-v2/index.js

@@ -0,0 +1,8 @@
+'use strict';
+
+var index = require('./src/index.vue.js');
+
+
+
+exports.ReSelectV2 = index.default;
+exports.YcSelectV2 = index.default;

package/lib/components/yc-select-v2/src/directive.d.ts

@@ -0,0 +1,8 @@
+import { Directive } from 'vue';
+
+/**
+ * 滚动加载更多指令
+ * 用于监听下拉框滚动到底部时触发加载更多
+ */
+declare const loadMoreDirective: Directive;
+export default loadMoreDirective;