yc-pro-components 0.0.1

package/es/components/yc-select-v2/src/index.vue.d.ts

@@ -0,0 +1,84 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ExtractPropTypes, PropType } from 'vue';
+import { SelectOption, YcSelectV2Props, SelectValueType } from './type';
+import { FieldValueType, RecordType } from 'yc-components/es/types';
+
+declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<YcSelectV2Props>, {
+    modelValue: string;
+    options: () => never[];
+    searchMode: string;
+    pageSize: number;
+    placeholder: string;
+    clearable: boolean;
+    filterable: boolean;
+    disabled: boolean;
+    reserveKeyword: boolean;
+    allowCreate: boolean;
+    defaultFirstOption: boolean;
+    multiple: boolean;
+    collapseTags: boolean;
+    maxCollapseTags: number;
+    initialOptions: () => never[];
+    allSelect: boolean;
+}>, {
+    reload: () => Promise<void>;
+    loadMore: () => Promise<void>;
+    clear: () => void;
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    "update:modelValue": (value: FieldValueType) => void;
+    change: (value: SelectValueType) => void;
+}, string, PublicProps, Readonly< ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<YcSelectV2Props>, {
+    modelValue: string;
+    options: () => never[];
+    searchMode: string;
+    pageSize: number;
+    placeholder: string;
+    clearable: boolean;
+    filterable: boolean;
+    disabled: boolean;
+    reserveKeyword: boolean;
+    allowCreate: boolean;
+    defaultFirstOption: boolean;
+    multiple: boolean;
+    collapseTags: boolean;
+    maxCollapseTags: number;
+    initialOptions: () => never[];
+    allSelect: boolean;
+}>>> & {
+    onChange?: ((value: SelectValueType) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: FieldValueType) => any) | undefined;
+}, {
+    disabled: boolean;
+    filterable: boolean;
+    options: SelectOption[];
+    pageSize: number;
+    modelValue: string | number | boolean | string[] | [string, string] | Date | RecordType | boolean[] | number[] | Date[] | [Date, Date] | [number, number] | string[][] | number[][] | null;
+    multiple: boolean;
+    clearable: boolean;
+    placeholder: string;
+    collapseTags: boolean;
+    maxCollapseTags: number;
+    allowCreate: boolean;
+    defaultFirstOption: boolean;
+    reserveKeyword: boolean;
+    searchMode: "local" | "remote";
+    initialOptions: SelectOption[];
+    allSelect: boolean;
+}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/es/components/yc-select-v2/src/index.vue.mjs

@@ -0,0 +1,6 @@
+import _sfc_main from './index.vue2.mjs';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';
+
+var YcSelectV2 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "index.vue"]]);
+
+export { YcSelectV2 as default };

package/es/components/yc-select-v2/src/index.vue2.mjs

@@ -0,0 +1,386 @@
+import { defineComponent, computed, ref, watch, onMounted, resolveDirective, withDirectives, openBlock, createBlock, unref, withCtx, createElementBlock, Fragment, renderList, nextTick } from 'vue';
+import { ElSelect, ElOption } from 'element-plus';
+import loadMoreDirective from './directive.mjs';
+
+const ALL_SELECT_VALUE = "__ALL_SELECT__";
+const ALL_SELECT_LABEL = "\u5168\u9009";
+const ALL_UNSELECT_LABEL = "\u5168\u4E0D\u9009";
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "YcSelectV2",
+    directives: {
+      "load-more": loadMoreDirective
+    }
+  },
+  __name: "index",
+  props: {
+    modelValue: { type: [String, Number, Boolean, null, Date, Array, Object], default: "" },
+    options: { default: () => [] },
+    searchMode: { default: "local" },
+    loadMore: {},
+    remoteSearch: {},
+    searchParams: {},
+    pageSize: { default: 20 },
+    placeholder: { default: "\u8BF7\u9009\u62E9" },
+    clearable: { type: Boolean, default: true },
+    filterable: { type: Boolean, default: true },
+    disabled: { type: Boolean, default: false },
+    reserveKeyword: { type: Boolean, default: true },
+    allowCreate: { type: Boolean, default: false },
+    defaultFirstOption: { type: Boolean, default: true },
+    multiple: { type: Boolean, default: false },
+    collapseTags: { type: Boolean, default: false },
+    maxCollapseTags: { default: 1 },
+    initialOptions: { default: () => [] },
+    allSelect: { type: Boolean, default: false }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const innerValue = computed({
+      get: () => props.modelValue,
+      set: (val) => emit("update:modelValue", val)
+    });
+    const selectRef = ref();
+    const innerOptions = ref([]);
+    const loading = ref(false);
+    const isInitialLoading = ref(false);
+    const currentPage = ref(1);
+    const currentKeyword = ref("");
+    const hasMore = ref(true);
+    const isFirstOpen = ref(true);
+    const lastInputValue = ref("");
+    const isAllSelected = computed(() => {
+      if (!props.allSelect || !props.multiple || innerOptions.value.length === 0) {
+        return false;
+      }
+      const currentValue = Array.isArray(props.modelValue) ? props.modelValue : [];
+      if (currentValue.length === 0) {
+        return false;
+      }
+      return innerOptions.value.every((opt) => currentValue.includes(opt.value));
+    });
+    const displayOptions = computed(() => {
+      if (props.allSelect && props.multiple && innerOptions.value.length > 0) {
+        const allSelectOption = {
+          label: isAllSelected.value ? ALL_UNSELECT_LABEL : ALL_SELECT_LABEL,
+          value: ALL_SELECT_VALUE
+        };
+        return [allSelectOption, ...innerOptions.value];
+      }
+      return innerOptions.value;
+    });
+    const initData = async () => {
+      if (props.searchMode === "local" && props.options.length > 0) {
+        innerOptions.value = props.options;
+      } else if (props.searchMode === "remote" && props.initialOptions.length > 0) {
+        innerOptions.value = props.initialOptions;
+      }
+    };
+    const loadFirstPage = async () => {
+      var _a;
+      currentPage.value = 1;
+      currentKeyword.value = "";
+      hasMore.value = true;
+      isInitialLoading.value = true;
+      try {
+        if (props.loadMore) {
+          const result = await props.loadMore({
+            page: 1,
+            pageSize: props.pageSize,
+            keyword: ""
+          });
+          innerOptions.value = result.list;
+          hasMore.value = (_a = result.hasMore) != null ? _a : result.list.length >= props.pageSize;
+        } else if (props.remoteSearch) {
+          const result = await props.remoteSearch("", props.searchParams);
+          innerOptions.value = result;
+          hasMore.value = false;
+        }
+      } catch (error) {
+        console.error("[YcSelectV2] Load first page error:", error);
+        innerOptions.value = [];
+      } finally {
+        isInitialLoading.value = false;
+      }
+    };
+    const handleVisibleChange = async (visible) => {
+      if (visible && props.searchMode === "remote" && isFirstOpen.value) {
+        isFirstOpen.value = false;
+        if (innerOptions.value.length === 0) {
+          await loadFirstPage();
+        }
+      }
+      if (!visible && props.allowCreate && !props.multiple) {
+        const valueToCheck = lastInputValue.value;
+        nextTick(() => {
+          requestAnimationFrame(() => {
+            var _a;
+            if (!selectRef.value) {
+              return;
+            }
+            const selectEl = selectRef.value.$el;
+            if (!selectEl) {
+              return;
+            }
+            const inputElement = selectEl.querySelector(".el-input__inner");
+            const inputValue = valueToCheck || ((_a = inputElement == null ? void 0 : inputElement.value) == null ? void 0 : _a.trim()) || "";
+            if (inputValue) {
+              const existsInOptions = displayOptions.value.some(
+                (opt) => String(opt.value) === String(inputValue) || String(opt.label) === String(inputValue)
+              );
+              if (!existsInOptions && String(props.modelValue) !== String(inputValue)) {
+                emit("update:modelValue", inputValue);
+                emit("change", inputValue);
+              }
+            }
+            lastInputValue.value = "";
+          });
+        });
+      }
+    };
+    const handleRemoteSearch = async (query) => {
+      var _a;
+      currentKeyword.value = query;
+      currentPage.value = 1;
+      hasMore.value = true;
+      if (props.allowCreate && !props.multiple && query) {
+        lastInputValue.value = query;
+      }
+      if (props.searchMode === "local") {
+        if (props.allowCreate && !props.multiple && query) {
+          lastInputValue.value = query;
+        }
+        if (!query) {
+          innerOptions.value = props.options;
+        } else {
+          innerOptions.value = props.options.filter(
+            (item) => item.label.toLowerCase().includes(query.toLowerCase())
+          );
+        }
+        return;
+      }
+      isInitialLoading.value = true;
+      try {
+        if (props.loadMore) {
+          const result = await props.loadMore({
+            page: 1,
+            pageSize: props.pageSize,
+            keyword: query
+          });
+          innerOptions.value = result.list;
+          hasMore.value = (_a = result.hasMore) != null ? _a : result.list.length >= props.pageSize;
+        } else if (props.remoteSearch) {
+          const result = await props.remoteSearch(query, props.searchParams);
+          innerOptions.value = result;
+          hasMore.value = false;
+        }
+      } catch (error) {
+        console.error("[YcSelectV2] Search error:", error);
+        innerOptions.value = [];
+      } finally {
+        isInitialLoading.value = false;
+      }
+    };
+    const handleLocalFilter = (query) => {
+      currentKeyword.value = query;
+      if (props.allowCreate && !props.multiple && query) {
+        lastInputValue.value = query;
+      }
+      if (!query) {
+        innerOptions.value = props.options;
+      } else {
+        innerOptions.value = props.options.filter(
+          (item) => item.label.toLowerCase().includes(query.toLowerCase())
+        );
+      }
+    };
+    const handleLoadMore = async () => {
+      var _a;
+      if (!props.loadMore || !hasMore.value || loading.value) {
+        return;
+      }
+      const scrollInfo = saveScrollPosition();
+      currentPage.value++;
+      loading.value = true;
+      try {
+        const result = await props.loadMore({
+          page: currentPage.value,
+          pageSize: props.pageSize,
+          keyword: currentKeyword.value
+        });
+        innerOptions.value = [...innerOptions.value, ...result.list];
+        hasMore.value = (_a = result.hasMore) != null ? _a : result.list.length >= props.pageSize;
+        await nextTick();
+        requestAnimationFrame(() => {
+          restoreScrollPosition(scrollInfo);
+        });
+      } catch (error) {
+        console.error("[YcSelectV2] Load more error:", error);
+        currentPage.value--;
+      } finally {
+        loading.value = false;
+      }
+    };
+    const getScrollContainer = () => {
+      const selectWrapper = document.querySelector('.el-select-dropdown:not([style*="display: none"])');
+      if (!selectWrapper) return null;
+      return selectWrapper.querySelector(".el-scrollbar__wrap");
+    };
+    const saveScrollPosition = () => {
+      const scrollContainer = getScrollContainer();
+      if (!scrollContainer) return null;
+      const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
+      return {
+        scrollTop,
+        scrollHeight,
+        clientHeight,
+        scrollContainer
+      };
+    };
+    const restoreScrollPosition = (scrollInfo) => {
+      if (!scrollInfo) return;
+      const { scrollTop, scrollContainer } = scrollInfo;
+      if (!scrollContainer) return;
+      const newScrollHeight = scrollContainer.scrollHeight;
+      const { clientHeight } = scrollContainer;
+      const isAtBottom = newScrollHeight - scrollTop <= clientHeight + 10;
+      if (isAtBottom) {
+        const newScrollTop = Math.max(0, scrollTop - 1);
+        scrollContainer.scrollTop = newScrollTop;
+      }
+    };
+    const handleChange = (value) => {
+      lastInputValue.value = "";
+      if (props.allSelect && props.multiple && Array.isArray(value)) {
+        const hasAllSelectInValue = value.includes(ALL_SELECT_VALUE);
+        if (hasAllSelectInValue) {
+          if (isAllSelected.value) {
+            emit("update:modelValue", []);
+            emit("change", []);
+          } else {
+            const allValues = innerOptions.value.map((opt) => opt.value);
+            emit("update:modelValue", allValues);
+            emit("change", allValues);
+          }
+          return;
+        }
+        const filteredValue = value.filter((v) => v !== ALL_SELECT_VALUE);
+        emit("update:modelValue", filteredValue);
+        emit("change", filteredValue);
+        return;
+      }
+      emit("change", value);
+    };
+    const handleClear = () => {
+      emit("update:modelValue", "");
+    };
+    const handleBlur = () => {
+      var _a;
+      if (!props.allowCreate || props.multiple) {
+        return;
+      }
+      if (!selectRef.value) {
+        return;
+      }
+      const selectEl = selectRef.value.$el;
+      if (!selectEl) {
+        return;
+      }
+      const inputElement = selectEl.querySelector(".el-input__inner");
+      if (!inputElement) {
+        return;
+      }
+      const inputValue = (_a = inputElement.value) == null ? void 0 : _a.trim();
+      if (inputValue) {
+        lastInputValue.value = inputValue;
+      }
+    };
+    watch(
+      () => props.options,
+      (newOptions) => {
+        if (props.searchMode === "local") {
+          innerOptions.value = newOptions;
+        }
+      },
+      { deep: true }
+    );
+    watch(
+      () => props.initialOptions,
+      (newInitialOptions) => {
+        if (props.searchMode === "remote" && newInitialOptions.length > 0) {
+          const existingValues = new Set(innerOptions.value.map((opt) => opt.value));
+          const newOptions = newInitialOptions.filter((opt) => !existingValues.has(opt.value));
+          if (newOptions.length > 0) {
+            innerOptions.value = [...innerOptions.value, ...newOptions];
+          }
+        }
+      },
+      { deep: true, immediate: true }
+    );
+    onMounted(() => {
+      initData();
+    });
+    __expose({
+      reload: initData,
+      loadMore: handleLoadMore,
+      clear: () => {
+        innerOptions.value = [];
+        currentPage.value = 1;
+        currentKeyword.value = "";
+      }
+    });
+    return (_ctx, _cache) => {
+      const _directive_load_more = resolveDirective("load-more");
+      return withDirectives((openBlock(), createBlock(unref(ElSelect), {
+        ref_key: "selectRef",
+        ref: selectRef,
+        modelValue: innerValue.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => innerValue.value = $event),
+        "append-to-body": "",
+        filterable: _ctx.filterable,
+        remote: _ctx.searchMode === "remote",
+        "reserve-keyword": _ctx.reserveKeyword,
+        placeholder: _ctx.placeholder,
+        clearable: _ctx.clearable,
+        disabled: _ctx.disabled,
+        loading: isInitialLoading.value,
+        "remote-method": handleRemoteSearch,
+        "filter-method": _ctx.searchMode === "local" ? handleLocalFilter : void 0,
+        "allow-create": _ctx.allowCreate,
+        "default-first-option": _ctx.defaultFirstOption,
+        multiple: _ctx.multiple,
+        "collapse-tags": _ctx.collapseTags,
+        "max-collapse-tags": _ctx.maxCollapseTags,
+        onVisibleChange: handleVisibleChange,
+        onChange: handleChange,
+        onClear: handleClear,
+        onBlur: handleBlur
+      }, {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(
+            Fragment,
+            null,
+            renderList(displayOptions.value, (item) => {
+              return openBlock(), createBlock(unref(ElOption), {
+                key: item.value,
+                label: item.label,
+                value: item.value,
+                disabled: item.disabled
+              }, null, 8, ["label", "value", "disabled"]);
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          ))
+        ]),
+        _: 1
+        /* STABLE */
+      }, 8, ["modelValue", "filterable", "remote", "reserve-keyword", "placeholder", "clearable", "disabled", "loading", "filter-method", "allow-create", "default-first-option", "multiple", "collapse-tags", "max-collapse-tags"])), [
+        [_directive_load_more, handleLoadMore]
+      ]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/es/components/yc-select-v2/src/loadMore.d.ts

@@ -0,0 +1,4 @@
+import { Directive } from 'vue';
+
+export declare const vLoadMore: Directive;
+export default vLoadMore;

package/es/components/yc-select-v2/src/loadMore.mjs

@@ -0,0 +1,56 @@
+const DEBOUNCE_TIME = 1e3;
+const SCROLL_THRESHOLD = 50;
+const vLoadMore = {
+  mounted(el, binding) {
+    const callback = binding.value;
+    if (typeof callback !== "function") {
+      console.warn("[v-load-more] \u6307\u4EE4\u503C\u5FC5\u987B\u662F\u4E00\u4E2A\u51FD\u6570");
+      return;
+    }
+    const handleScroll = (event) => {
+      const target = event.target;
+      if (!target) return;
+      const { scrollTop, scrollHeight, clientHeight } = target;
+      const distanceToBottom = scrollHeight - scrollTop - clientHeight;
+      if (distanceToBottom < SCROLL_THRESHOLD) {
+        const now = Date.now();
+        if (!el.__lastTriggerTime || now - el.__lastTriggerTime > DEBOUNCE_TIME) {
+          el.__lastTriggerTime = now;
+          callback();
+        }
+      }
+    };
+    const observer = new MutationObserver(() => {
+      const popover = document.querySelector('.el-select-dropdown:not([style*="display: none"])');
+      if (!popover) return;
+      const scrollWrap = popover.querySelector(".el-scrollbar__wrap");
+      if (!scrollWrap) return;
+      if (el.__loadMoreHandler) {
+        scrollWrap.removeEventListener("scroll", el.__loadMoreHandler);
+      }
+      el.__loadMoreHandler = handleScroll;
+      scrollWrap.addEventListener("scroll", handleScroll);
+    });
+    observer.observe(el, {
+      attributes: true,
+      attributeFilter: ["aria-describedby"]
+    });
+    el.__loadMoreObserver = observer;
+  },
+  unmounted(el) {
+    if (el.__loadMoreObserver) {
+      el.__loadMoreObserver.disconnect();
+      el.__loadMoreObserver = void 0;
+    }
+    const popover = document.querySelector(".el-select-dropdown");
+    if (popover && el.__loadMoreHandler) {
+      const scrollWrap = popover.querySelector(".el-scrollbar__wrap");
+      if (scrollWrap) {
+        scrollWrap.removeEventListener("scroll", el.__loadMoreHandler);
+      }
+    }
+    el.__loadMoreHandler = void 0;
+  }
+};
+
+export { vLoadMore as default, vLoadMore };

package/es/components/yc-select-v2/src/type.d.ts

@@ -0,0 +1,83 @@
+import { FieldValueType } from 'yc-components/es/types';
+
+/**
+ * YcSelectV2 内部使用的值类型
+ */
+export type SelectValueType = string | number | (string | number)[];
+/**
+ * 选项数据类型
+ */
+export interface SelectOption {
+    label: string;
+    value: string | number;
+    disabled?: boolean;
+    [key: string]: unknown;
+}
+/**
+ * 加载更多参数
+ */
+export interface LoadMoreParams {
+    page: number;
+    pageSize: number;
+    keyword?: string;
+}
+/**
+ * 加载更多结果
+ */
+export interface LoadMoreResult {
+    list: SelectOption[];
+    total?: number;
+    hasMore: boolean;
+}
+/**
+ * 加载更多函数类型
+ */
+export type LoadMoreFunction = (params: LoadMoreParams) => Promise<LoadMoreResult>;
+/**
+ * 远程搜索函数类型
+ */
+export type RemoteSearchFunction = (keyword: string, extraParams?: Record<string, unknown>) => Promise<SelectOption[]>;
+/**
+ * YcSelectV2 组件属性
+ * @description modelValue 接受 FieldValueType 以兼容 PlusColumn 的 renderField 回调
+ */
+export interface YcSelectV2Props {
+    /** 绑定值（兼容 FieldValueType，实际使用时会转换为 SelectValueType） */
+    modelValue?: FieldValueType;
+    /** 选项列表（本地模式） */
+    options?: SelectOption[];
+    /** 搜索模式：local-本地搜索，remote-远程搜索 */
+    searchMode?: 'local' | 'remote';
+    /** 分页加载函数 */
+    loadMore?: LoadMoreFunction;
+    /** 远程搜索函数 */
+    remoteSearch?: RemoteSearchFunction;
+    /** 额外搜索参数 */
+    searchParams?: Record<string, unknown>;
+    /** 每页条数 */
+    pageSize?: number;
+    /** 占位文本 */
+    placeholder?: string;
+    /** 是否可清空 */
+    clearable?: boolean;
+    /** 是否可搜索 */
+    filterable?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 搜索时是否保留关键词 */
+    reserveKeyword?: boolean;
+    /** 是否允许创建新选项 */
+    allowCreate?: boolean;
+    /** 是否在输入框按下回车时，选中第一个匹配项 */
+    defaultFirstOption?: boolean;
+    /** 是否多选 */
+    multiple?: boolean;
+    /** 多选时是否折叠标签 */
+    collapseTags?: boolean;
+    /** 最大折叠标签数 */
+    maxCollapseTags?: number;
+    /** 初始选项（用于回显） */
+    initialOptions?: SelectOption[];
+    /** 是否启用全选功能（仅多选时有效） */
+    allSelect?: boolean;
+}

package/es/components/yc-select-v2/src/type.mjs

@@ -0,0 +1 @@
+

package/es/components/yc-status-dialog/index.d.ts

@@ -0,0 +1,9 @@
+import { YcStatusDialogProps, StatusType, StatusConfig } from './src/type';
+import { default as YcStatusDialog } from './src/index.vue';
+
+export type YcStatusDialogInstance = InstanceType<typeof YcStatusDialog>;
+export * from './src/type';
+export { YcStatusDialog };
+export type { YcStatusDialogProps, StatusType, StatusConfig };
+export { YcStatusDialog as ReStatusDialog };
+export type { YcStatusDialogProps as ReStatusDialogProps };

package/es/components/yc-status-dialog/index.mjs

@@ -0,0 +1,2 @@
+export { default as ReStatusDialog, default as YcStatusDialog } from './src/index.vue.mjs';
+export { STATUS_CONFIG_MAP } from './src/type.mjs';