yc-pro-components 0.0.19 → 0.0.21

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

@@ -1,29 +1,82 @@
-import { nextTick } from 'vue';
-
 const loadMoreDirective = {
   mounted(el, binding) {
-    nextTick(() => {
-      const domClass = ".el-select-dropdown__wrap";
-      const element = el.querySelector(domClass);
-      if (element) {
+    const bindScrollListener = (poperId) => {
+      const poper = document.getElementById(poperId);
+      if (!poper) return;
+      let scrollContainer = null;
+      scrollContainer = poper.querySelector(".el-scrollbar .el-select-dropdown__wrap");
+      if (!scrollContainer) {
+        scrollContainer = poper.querySelector(".el-select-dropdown__wrap");
+      }
+      if (!scrollContainer) {
+        scrollContainer = poper.querySelector('[class*="scrollbar__wrap"]');
+      }
+      if (scrollContainer && !scrollContainer.__vueLoadMoreBound__) {
+        scrollContainer.__vueLoadMoreBound__ = true;
+        let lastTriggerTime = 0;
         const handleScroll = () => {
-          const { scrollTop, scrollHeight, clientHeight } = element;
-          const scrollDistance = scrollHeight - scrollTop <= clientHeight + 10;
-          if (scrollDistance) {
+          if (!scrollContainer) return;
+          const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
+          const THRESHOLD = 100;
+          const scrollDistance = scrollHeight - scrollTop <= clientHeight + THRESHOLD;
+          const now = Date.now();
+          if (scrollDistance && binding.value && now - lastTriggerTime > 1e3) {
+            lastTriggerTime = now;
             binding.value();
           }
         };
-        element.__vueLoadMoreHandler__ = handleScroll;
-        element.addEventListener("scroll", handleScroll);
+        scrollContainer.__vueLoadMoreHandler__ = handleScroll;
+        scrollContainer.addEventListener("scroll", handleScroll);
       }
-    });
+    };
+    const callback = (records) => {
+      records.forEach((record) => {
+        if (record.attributeName === "aria-describedby") {
+          const target = record.target;
+          const newValue = target.getAttribute("aria-describedby");
+          if (newValue) {
+            bindScrollListener(newValue);
+          }
+        }
+      });
+    };
+    const selectTrigger = el.querySelector(".select-trigger") || el.querySelector(".el-select__wrapper") || el.querySelector("input");
+    if (selectTrigger) {
+      const observer = new MutationObserver(callback);
+      observer.observe(selectTrigger, {
+        attributes: true,
+        attributeOldValue: true,
+        attributeFilter: ["aria-describedby"]
+      });
+      el.__vueLoadMoreObserver__ = observer;
+    }
   },
   beforeUnmount(el) {
-    const domClass = ".el-select-dropdown__wrap";
-    const element = el.querySelector(domClass);
-    if (element && element.__vueLoadMoreHandler__) {
-      element.removeEventListener("scroll", element.__vueLoadMoreHandler__);
-      delete element.__vueLoadMoreHandler__;
+    if (el.__vueLoadMoreObserver__) {
+      el.__vueLoadMoreObserver__.disconnect();
+      delete el.__vueLoadMoreObserver__;
+    }
+    const selectTrigger = el.querySelector(".select-trigger") || el.querySelector(".el-select__wrapper") || el.querySelector("input");
+    if (selectTrigger) {
+      const ariaId = selectTrigger.getAttribute("aria-describedby");
+      if (ariaId) {
+        const poper = document.getElementById(ariaId);
+        if (poper) {
+          const scrollContainer = poper.querySelector(
+            ".el-scrollbar .el-select-dropdown__wrap"
+          ) || poper.querySelector(
+            ".el-select-dropdown__wrap"
+          );
+          if (scrollContainer && scrollContainer.__vueLoadMoreHandler__) {
+            scrollContainer.removeEventListener(
+              "scroll",
+              scrollContainer.__vueLoadMoreHandler__
+            );
+            delete scrollContainer.__vueLoadMoreHandler__;
+            delete scrollContainer.__vueLoadMoreBound__;
+          }
+        }
+      }
     }
   }
 };

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

@@ -44,14 +44,14 @@ declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRunt
     initialOptions: () => never[];
     allSelect: boolean;
 }>>> & {
-    "onUpdate:modelValue"?: ((value: FieldValueType) => any) | undefined;
     onChange?: ((value: SelectValueType) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: FieldValueType) => any) | undefined;
 }, {
-    modelValue: string | number | boolean | string[] | [string, string] | boolean[] | RecordType | Date | number[] | Date[] | [Date, Date] | [number, number] | string[][] | number[][] | null;
-    filterable: boolean;
     disabled: boolean;
+    filterable: boolean;
     options: SelectOption[];
     pageSize: number;
+    modelValue: string | number | boolean | string[] | [string, string] | number[] | Date | RecordType | boolean[] | Date[] | [Date, Date] | [number, number] | string[][] | number[][] | null;
     multiple: boolean;
     clearable: boolean;
     placeholder: string;

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

@@ -1,10 +1,12 @@
-import { defineComponent, computed, ref, watch, onMounted, resolveDirective, withDirectives, openBlock, createBlock, unref, withCtx, createElementBlock, Fragment, renderList, nextTick } from 'vue';
+import { defineComponent, computed, ref, watch, onMounted, resolveDirective, withDirectives, openBlock, createBlock, unref, withCtx, createElementBlock, Fragment, renderList, normalizeClass, 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";
+const LOADING_VALUE = "__LOADING__";
+const LOADING_LABEL = "\u52A0\u8F7D\u4E2D...";
 var _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "YcSelectV2",
@@ -62,14 +64,23 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       return innerOptions.value.every((opt) => currentValue.includes(opt.value));
     });
     const displayOptions = computed(() => {
-      if (props.allSelect && props.multiple && innerOptions.value.length > 0) {
+      let options = [...innerOptions.value];
+      if (props.allSelect && props.multiple && options.length > 0) {
         const allSelectOption = {
           label: isAllSelected.value ? ALL_UNSELECT_LABEL : ALL_SELECT_LABEL,
           value: ALL_SELECT_VALUE
         };
-        return [allSelectOption, ...innerOptions.value];
+        options = [allSelectOption, ...options];
       }
-      return innerOptions.value;
+      if (loading.value && hasMore.value) {
+        const loadingOption = {
+          label: LOADING_LABEL,
+          value: LOADING_VALUE,
+          disabled: true
+        };
+        options = [...options, loadingOption];
+      }
+      return options;
     });
     const initData = async () => {
       if (props.searchMode === "local" && props.options.length > 0) {
@@ -367,8 +378,9 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                 key: item.value,
                 label: item.label,
                 value: item.value,
-                disabled: item.disabled
-              }, null, 8, ["label", "value", "disabled"]);
+                disabled: item.disabled,
+                class: normalizeClass({ "yc-select-v2-loading": item.value === "__LOADING__" })
+              }, null, 8, ["label", "value", "disabled", "class"]);
             }),
             128
             /* KEYED_FRAGMENT */

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

@@ -28,9 +28,9 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<__VLS_WithDefau
     onCancel?: (() => any) | undefined;
     onConfirm?: (() => any) | undefined;
 }, {
+    content: string;
     title: string;
     width: string | number;
-    content: string;
     visible: boolean;
     status: StatusType;
     cancelText: string;

package/es/components/yc-tabs-with-filter/index.d.ts

@@ -5,14 +5,14 @@ import { default as YcTabsWithFilter } from './src/index.vue';
 /** 带筛选按钮的 Tabs 组件 */
 export declare const YcTabsWithFilterWithInstall: SFCWithInstall<{
     new (...args: any[]): CreateComponentPublicInstance<Readonly< ExtractPropTypes<{
-        filterText: {
-            type: PropType<string>;
-            default: undefined;
-        };
         modelValue: {
             type: PropType<string>;
             required: true;
         };
+        filterText: {
+            type: PropType<string>;
+            default: undefined;
+        };
         showFilter: {
             type: PropType<boolean>;
             default: boolean;
@@ -38,14 +38,14 @@ export declare const YcTabsWithFilterWithInstall: SFCWithInstall<{
         "update:modelValue": (value: string) => void;
         "filter-toggle": (visible: boolean) => void;
     }, VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly< ExtractPropTypes<{
-        filterText: {
-            type: PropType<string>;
-            default: undefined;
-        };
         modelValue: {
             type: PropType<string>;
             required: true;
         };
+        filterText: {
+            type: PropType<string>;
+            default: undefined;
+        };
         showFilter: {
             type: PropType<boolean>;
             default: boolean;
@@ -79,14 +79,14 @@ export declare const YcTabsWithFilterWithInstall: SFCWithInstall<{
         M: {};
         Defaults: {};
     }, Readonly< ExtractPropTypes<{
-        filterText: {
-            type: PropType<string>;
-            default: undefined;
-        };
         modelValue: {
             type: PropType<string>;
             required: true;
         };
+        filterText: {
+            type: PropType<string>;
+            default: undefined;
+        };
         showFilter: {
             type: PropType<boolean>;
             default: boolean;
@@ -119,14 +119,14 @@ export declare const YcTabsWithFilterWithInstall: SFCWithInstall<{
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & ComponentOptionsBase<Readonly< ExtractPropTypes<{
-    filterText: {
-        type: PropType<string>;
-        default: undefined;
-    };
     modelValue: {
         type: PropType<string>;
         required: true;
     };
+    filterText: {
+        type: PropType<string>;
+        default: undefined;
+    };
     showFilter: {
         type: PropType<boolean>;
         default: boolean;

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

@@ -9,7 +9,7 @@ interface TippyOptions {
 declare const _default: __VLS_WithTemplateSlots< DefineComponent<{
     /** 行数限制 */
     lineClamp: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
     };
     /** Tippy 配置 */
     tippyProps: {
@@ -19,7 +19,7 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<{
 }, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
     /** 行数限制 */
     lineClamp: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
     };
     /** Tippy 配置 */
     tippyProps: {