@das-fed/ui 1.1.4 → 6.3.0-beta.1

package/packages/components/select-list/index.js

@@ -1,8 +1,8 @@
 import { withInstall } from '@das-fed/utils';
 import { i18n as i18n$1, getVar, setI18nRule, setThemeRule } from '@das-fed/web';
-import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick, defineComponent, useCssVars, resolveDirective, openBlock, createElementBlock, normalizeStyle, createElementVNode, toDisplayString, unref, createBlock, withCtx, createTextVNode, createCommentVNode, withDirectives, Fragment, renderList, normalizeClass, renderSlot } from 'vue';
+import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick, defineComponent, useCssVars, resolveDirective, openBlock, createElementBlock, normalizeStyle, createElementVNode, toDisplayString, createBlock, withCtx, createTextVNode, createCommentVNode, withDirectives, normalizeClass, Fragment, renderList, renderSlot } from 'vue';
 import { RecycleScroller } from 'vue-virtual-scroller';
-import { DasButton, DasIcon, vDasTooltip, vOverlay } from '@das-fed/ui';
+import { vDasTooltip, DasIcon, DasButton, vOverlay } from '@das-fed/ui';
 import { useModelValue } from '@das-fed/utils/vue';
 import { SizeWatcher } from '@das-fed/utils/size-watcher';
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
@@ -15,8 +15,7 @@ const useSelectList = (props, emits) => {
   const itemGroups = useModelValue(props, "modelValue");
   const key = props.valueKey;
   const selectedLabel = computed(() => {
-    if (props.selectedNum)
-      return props.selectedNum;
+    if (props.selectedNum) return props.selectedNum;
     return `${props.customTitle || i18n$1("das-select-list-selected").value}${i18n$1("das-select-list-parentheses-left").value}${itemGroups.value.length}${i18n$1("das-select-list-parentheses-right").value}`;
   });
   const defaultProps = computed(() => {
@@ -58,16 +57,13 @@ const useSelectList = (props, emits) => {
   let preHeight = 0;
   const watchDom = (height) => {
     const containerHeight = $list.value?.offsetHeight || 0;
-    if (preHeight !== 0 && height === 0)
-      infiniteLoad();
+    if (preHeight !== 0 && height === 0) infiniteLoad();
     preHeight = height;
-    if (height !== 0 && height - containerHeight < 10)
-      infiniteLoad();
+    if (height !== 0 && height - containerHeight < 10) infiniteLoad();
   };
   const sizeWatcher = ref();
   onMounted(() => {
-    if (props.infiniteDisabled)
-      return;
+    if (props.infiniteDisabled) return;
     const groupDom = $list.value?.querySelector(".selected-group");
     sizeWatcher.value = SizeWatcher((rect) => {
       watchDom(rect.height);
@@ -400,10 +396,8 @@ function isScrolledPast(el, elSide, parentSide) {
   while (parent) {
     var parentSideVal = getRect(parent)[parentSide],
       visible = void 0;
-    if (parentSide === 'top' || parentSide === 'left') {
+    {
       visible = elSideVal >= parentSideVal;
-    } else {
-      visible = elSideVal <= parentSideVal;
     }
     if (!visible) return parent;
     if (parent === getWindowScrollingElement()) break;
@@ -2785,13 +2779,6 @@ const useDrag = (props, emit, $list, data) => {
   return { timeStamp };
 };
 
-const _hoisted_1 = { class: "selected-number-header" };
-const _hoisted_2 = { class: "selected-num" };
-const _hoisted_3 = { class: "name" };
-const _hoisted_4 = { class: "name" };
-const _hoisted_5 = ["infinite-scroll-disabled"];
-const _hoisted_6 = { class: "selected-group" };
-const _hoisted_7 = { class: "name" };
 var _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "Index",
   props: {
@@ -2809,7 +2796,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     itemHeight: { type: Number, required: false, default: 32 },
     selectedNum: { type: String, required: false },
     infiniteScroll: { type: Function, required: false },
-    infiniteDisabled: { type: Boolean, required: false, default: true }
+    infiniteDisabled: { type: Boolean, required: false, default: true },
+    hideHeader: { type: Boolean, required: false, default: false }
   },
   emits: ["update:modelValue", "item-remove", "remove-all", "sortEnd", "update:infiniteDisabled"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -2820,226 +2808,38 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const emits = __emit;
     const selecteItemHeight = computed(() => props.itemHeight + "px");
     const innerVirtual = computed(() => {
-      if (props.dragSort || props.infiniteScroll)
-        return false;
+      if (props.dragSort || props.infiniteScroll) return false;
       return props.virtual;
     });
     const { selectListRef, $list, disabledFlag, itemGroups, selectedLabel, itemRemove, removeAll, infiniteLoad } = useSelectList(props, emits);
     useDrag(props, emits, $list, itemGroups);
+    const showVirtualList = ref(true);
+    onMounted(() => {
+      showVirtualList.value = false;
+      setTimeout(() => {
+        showVirtualList.value = true;
+      }, 300);
+    });
     __expose({
       infiniteLoad
     });
-    return (_ctx, _cache) => {
-      const _directive_infinite_scroll = resolveDirective("infinite-scroll");
-      return openBlock(), createElementBlock(
-        "div",
-        {
-          ref_key: "selectListRef",
-          ref: selectListRef,
-          class: "das-ui-select-list",
-          style: normalizeStyle({ width: _ctx.width, height: _ctx.height, ..._ctx.customStyle })
-        },
-        [
-          createElementVNode("div", _hoisted_1, [
-            createElementVNode(
-              "div",
-              _hoisted_2,
-              toDisplayString(unref(selectedLabel)),
-              1
-              /* TEXT */
-            ),
-            !_ctx.isView ? (openBlock(), createBlock(unref(DasButton), {
-              key: 0,
-              "btn-type": "primary-text",
-              block: "",
-              onClick: unref(removeAll),
-              disabled: !unref(itemGroups) || !unref(itemGroups).length
-            }, {
-              default: withCtx(() => [
-                createTextVNode(
-                  toDisplayString(unref(i18n$1)("das-select-list-removeAll").value),
-                  1
-                  /* TEXT */
-                )
-              ]),
-              _: 1
-              /* STABLE */
-            }, 8, ["onClick", "disabled"])) : createCommentVNode("v-if", true)
-          ]),
-          createCommentVNode(" \u666E\u901A "),
-          !_ctx.infiniteScroll && !innerVirtual.value ? withDirectives((openBlock(), createElementBlock("div", {
-            key: 0,
-            ref_key: "$list",
-            ref: $list,
-            class: "selected-container"
-          }, [
-            (openBlock(true), createElementBlock(
-              Fragment,
-              null,
-              renderList(unref(itemGroups), (item, index) => {
-                return openBlock(), createElementBlock(
-                  "div",
-                  {
-                    class: normalizeClass(["selected-item", { disabled: !_ctx.isView && unref(disabledFlag)(item), enable: !_ctx.isView && !unref(disabledFlag)(item) }]),
-                    key: item[_ctx.valueKey] + index
-                  },
-                  [
-                    _ctx.dragSort ? (openBlock(), createBlock(unref(DasIcon), {
-                      key: 0,
-                      class: "drag-icon",
-                      icon: "drag",
-                      size: "medium",
-                      style: { "margin-right": "8px" }
-                    })) : createCommentVNode("v-if", true),
-                    createElementVNode("div", _hoisted_3, [
-                      renderSlot(_ctx.$slots, "default", { item }, () => [
-                        withDirectives((openBlock(), createElementBlock("div", null, [
-                          createTextVNode(
-                            toDisplayString(item[_ctx.labelKey]),
-                            1
-                            /* TEXT */
-                          )
-                        ])), [
-                          [unref(vDasTooltip)]
-                        ])
-                      ], true)
-                    ]),
-                    !_ctx.isView ? (openBlock(), createBlock(unref(DasIcon), {
-                      key: 1,
-                      icon: "close2",
-                      size: "small",
-                      class: "close-icon",
-                      "icon-color": unref(getVar)("--das-ui-color-secondary"),
-                      onClick: ($event) => unref(itemRemove)(item)
-                    }, null, 8, ["icon-color", "onClick"])) : createCommentVNode("v-if", true)
-                  ],
-                  2
-                  /* CLASS */
-                );
-              }),
-              128
-              /* KEYED_FRAGMENT */
-            ))
-          ])), [
-            [unref(vOverlay)]
-          ]) : createCommentVNode("v-if", true),
-          createCommentVNode(" \u865A\u62DF\u6EDA\u52A8 "),
-          !_ctx.dragSort && innerVirtual.value ? (openBlock(), createElementBlock(
-            "div",
-            {
-              key: 1,
-              ref_key: "$list",
-              ref: $list,
-              class: "selected-container"
-            },
-            [
-              unref(itemGroups).length > 0 ? (openBlock(), createBlock(unref(RecycleScroller), {
-                key: unref(itemGroups).length,
-                items: unref(itemGroups),
-                "item-size": _ctx.itemHeight,
-                "key-field": _ctx.valueKey,
-                class: "virtual-list"
-              }, {
-                default: withCtx(({ item, index }) => [
-                  (openBlock(), createElementBlock(
-                    "div",
-                    {
-                      class: normalizeClass(["selected-item", { disabled: !_ctx.isView && unref(disabledFlag)(item), enable: !_ctx.isView && !unref(disabledFlag)(item) }]),
-                      key: item[_ctx.valueKey]
-                    },
-                    [
-                      createElementVNode("div", _hoisted_4, [
-                        renderSlot(_ctx.$slots, "default", { item }, () => [
-                          withDirectives((openBlock(), createElementBlock("div", null, [
-                            createTextVNode(
-                              toDisplayString(item[_ctx.labelKey]),
-                              1
-                              /* TEXT */
-                            )
-                          ])), [
-                            [unref(vDasTooltip)]
-                          ])
-                        ], true)
-                      ]),
-                      !_ctx.isView ? (openBlock(), createBlock(unref(DasIcon), {
-                        key: 0,
-                        icon: "close2",
-                        size: "small",
-                        class: "close-icon",
-                        "icon-color": unref(getVar)("--das-ui-color-secondary"),
-                        onClick: ($event) => unref(itemRemove)(item)
-                      }, null, 8, ["icon-color", "onClick"])) : createCommentVNode("v-if", true)
-                    ],
-                    2
-                    /* CLASS */
-                  ))
-                ]),
-                _: 3
-                /* FORWARDED */
-              }, 8, ["items", "item-size", "key-field"])) : createCommentVNode("v-if", true)
-            ],
-            512
-            /* NEED_PATCH */
-          )) : createCommentVNode("v-if", true),
-          createCommentVNode(" \u5206\u9875\u52A0\u8F7D "),
-          !_ctx.dragSort && _ctx.infiniteScroll ? withDirectives((openBlock(), createElementBlock("div", {
-            key: 2,
-            ref_key: "$list",
-            ref: $list,
-            class: "selected-container",
-            "infinite-scroll-disabled": _ctx.infiniteDisabled,
-            style: { "overflow": "overlay" }
-          }, [
-            createElementVNode("div", _hoisted_6, [
-              (openBlock(true), createElementBlock(
-                Fragment,
-                null,
-                renderList(unref(itemGroups), (item) => {
-                  return openBlock(), createElementBlock(
-                    "div",
-                    {
-                      class: normalizeClass(["selected-item", { disabled: !_ctx.isView && unref(disabledFlag)(item), enable: !_ctx.isView && !unref(disabledFlag)(item) }]),
-                      key: item[_ctx.valueKey]
-                    },
-                    [
-                      createElementVNode("div", _hoisted_7, [
-                        renderSlot(_ctx.$slots, "default", { item }, () => [
-                          withDirectives((openBlock(), createElementBlock("div", null, [
-                            createTextVNode(
-                              toDisplayString(item[_ctx.labelKey]),
-                              1
-                              /* TEXT */
-                            )
-                          ])), [
-                            [unref(vDasTooltip)]
-                          ])
-                        ], true)
-                      ]),
-                      !_ctx.isView ? (openBlock(), createBlock(unref(DasIcon), {
-                        key: 0,
-                        icon: "close2",
-                        size: "small",
-                        class: "close-icon",
-                        "icon-color": unref(getVar)("--das-ui-color-secondary"),
-                        onClick: ($event) => unref(itemRemove)(item)
-                      }, null, 8, ["icon-color", "onClick"])) : createCommentVNode("v-if", true)
-                    ],
-                    2
-                    /* CLASS */
-                  );
-                }),
-                128
-                /* KEYED_FRAGMENT */
-              ))
-            ])
-          ], 8, _hoisted_5)), [
-            [_directive_infinite_scroll, unref(infiniteLoad)]
-          ]) : createCommentVNode("v-if", true)
-        ],
-        4
-        /* STYLE */
-      );
-    };
+    const __returned__ = { props, emits, selecteItemHeight, innerVirtual, selectListRef, $list, disabledFlag, itemGroups, selectedLabel, itemRemove, removeAll, infiniteLoad, showVirtualList, get RecycleScroller() {
+      return RecycleScroller;
+    }, get vDasTooltip() {
+      return vDasTooltip;
+    }, get DasIcon() {
+      return DasIcon;
+    }, get DasButton() {
+      return DasButton;
+    }, get vOverlay() {
+      return vOverlay;
+    }, get i18n() {
+      return i18n$1;
+    }, get getVar() {
+      return getVar;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
   }
 });
 
@@ -3051,7 +2851,230 @@ var _export_sfc = (sfc, props) => {
   return target;
 };
 
-var SelectList = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e1c892f3"], ["__file", "E:\\company-code\\v6r3\\framework-3\\packages\\das-ui\\packages\\components\\select-list\\src\\Index.vue"]]);
+const _hoisted_1 = {
+  key: 0,
+  class: "selected-number-header"
+};
+const _hoisted_2 = { class: "selected-num" };
+const _hoisted_3 = { class: "name" };
+const _hoisted_4 = { class: "name" };
+const _hoisted_5 = ["infinite-scroll-disabled"];
+const _hoisted_6 = { class: "selected-group" };
+const _hoisted_7 = { class: "name" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _directive_infinite_scroll = resolveDirective("infinite-scroll");
+  return openBlock(), createElementBlock(
+    "div",
+    {
+      ref: "selectListRef",
+      class: "das-ui-select-list",
+      style: normalizeStyle({ width: $props.width, height: $props.height, ...$props.customStyle })
+    },
+    [
+      !$props.hideHeader ? (openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode(
+          "div",
+          _hoisted_2,
+          toDisplayString($setup.selectedLabel),
+          1
+          /* TEXT */
+        ),
+        !$props.isView ? (openBlock(), createBlock($setup["DasButton"], {
+          key: 0,
+          "btn-type": "primary-text",
+          block: "",
+          onClick: $setup.removeAll,
+          disabled: !$setup.itemGroups || !$setup.itemGroups.length
+        }, {
+          default: withCtx(() => [
+            createTextVNode(
+              toDisplayString($setup.i18n("das-select-list-removeAll").value),
+              1
+              /* TEXT */
+            )
+          ]),
+          _: 1
+          /* STABLE */
+        }, 8, ["onClick", "disabled"])) : createCommentVNode("v-if", true)
+      ])) : createCommentVNode("v-if", true),
+      createCommentVNode(" \u666E\u901A "),
+      !$props.infiniteScroll && !$setup.innerVirtual ? withDirectives((openBlock(), createElementBlock(
+        "div",
+        {
+          key: 1,
+          ref: "$list",
+          class: normalizeClass(["selected-container", { "hide-header": $props.hideHeader }])
+        },
+        [
+          (openBlock(true), createElementBlock(
+            Fragment,
+            null,
+            renderList($setup.itemGroups, (item, index) => {
+              return openBlock(), createElementBlock(
+                "div",
+                {
+                  class: normalizeClass(["selected-item", { disabled: !$props.isView && $setup.disabledFlag(item), enable: !$props.isView && !$setup.disabledFlag(item) }]),
+                  key: item[$props.valueKey] + index
+                },
+                [
+                  $props.dragSort ? (openBlock(), createBlock($setup["DasIcon"], {
+                    key: 0,
+                    class: "drag-icon",
+                    icon: "drag",
+                    size: "medium",
+                    style: { "margin-right": "8px" }
+                  })) : createCommentVNode("v-if", true),
+                  createElementVNode("div", _hoisted_3, [
+                    renderSlot(_ctx.$slots, "default", { item }, () => [
+                      withDirectives((openBlock(), createElementBlock("div", null, [
+                        createTextVNode(
+                          toDisplayString(item[$props.labelKey]),
+                          1
+                          /* TEXT */
+                        )
+                      ])), [
+                        [$setup["vDasTooltip"]]
+                      ])
+                    ], true)
+                  ]),
+                  !$props.isView ? (openBlock(), createBlock($setup["DasIcon"], {
+                    key: 1,
+                    icon: "close2",
+                    size: "small",
+                    class: "close-icon",
+                    "icon-color": $setup.getVar("--das-ui-color-secondary"),
+                    onClick: ($event) => $setup.itemRemove(item)
+                  }, null, 8, ["icon-color", "onClick"])) : createCommentVNode("v-if", true)
+                ],
+                2
+                /* CLASS */
+              );
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          ))
+        ],
+        2
+        /* CLASS */
+      )), [
+        [$setup["vOverlay"], { usePrevOverlay: true }]
+      ]) : createCommentVNode("v-if", true),
+      createCommentVNode(" \u865A\u62DF\u6EDA\u52A8 "),
+      !$props.dragSort && $setup.innerVirtual ? (openBlock(), createElementBlock(
+        "div",
+        {
+          key: 2,
+          ref: "$list",
+          class: normalizeClass(["selected-container", { "hide-header": $props.hideHeader }])
+        },
+        [
+          $setup.showVirtualList && $setup.itemGroups.length > 0 ? (openBlock(), createBlock($setup["RecycleScroller"], {
+            key: $setup.itemGroups.length,
+            items: $setup.itemGroups,
+            "item-size": $props.itemHeight,
+            "key-field": $props.valueKey,
+            class: "virtual-list"
+          }, {
+            default: withCtx(({ item, index }) => [
+              (openBlock(), createElementBlock(
+                "div",
+                {
+                  class: normalizeClass(["selected-item", { disabled: !$props.isView && $setup.disabledFlag(item), enable: !$props.isView && !$setup.disabledFlag(item) }]),
+                  key: item[$props.valueKey]
+                },
+                [
+                  createElementVNode("div", _hoisted_4, [
+                    renderSlot(_ctx.$slots, "default", { item }, () => [
+                      withDirectives((openBlock(), createElementBlock("div", null, [
+                        createTextVNode(
+                          toDisplayString(item[$props.labelKey]),
+                          1
+                          /* TEXT */
+                        )
+                      ])), [
+                        [$setup["vDasTooltip"]]
+                      ])
+                    ], true)
+                  ]),
+                  !$props.isView ? (openBlock(), createBlock($setup["DasIcon"], {
+                    key: 0,
+                    icon: "close2",
+                    size: "small",
+                    class: "close-icon",
+                    "icon-color": $setup.getVar("--das-ui-color-secondary"),
+                    onClick: ($event) => $setup.itemRemove(item)
+                  }, null, 8, ["icon-color", "onClick"])) : createCommentVNode("v-if", true)
+                ],
+                2
+                /* CLASS */
+              ))
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 8, ["items", "item-size", "key-field"])) : createCommentVNode("v-if", true)
+        ],
+        2
+        /* CLASS */
+      )) : createCommentVNode("v-if", true),
+      createCommentVNode(" \u5206\u9875\u52A0\u8F7D "),
+      !$props.dragSort && $props.infiniteScroll ? withDirectives((openBlock(), createElementBlock("div", {
+        key: 3,
+        ref: "$list",
+        class: normalizeClass(["selected-container selected-page-container", { "hide-header": $props.hideHeader }]),
+        "infinite-scroll-disabled": $props.infiniteDisabled,
+        style: { "overflow": "overlay" }
+      }, [
+        createElementVNode("div", _hoisted_6, [
+          (openBlock(true), createElementBlock(
+            Fragment,
+            null,
+            renderList($setup.itemGroups, (item) => {
+              return openBlock(), createElementBlock(
+                "div",
+                {
+                  class: normalizeClass(["selected-item", { disabled: !$props.isView && $setup.disabledFlag(item), enable: !$props.isView && !$setup.disabledFlag(item) }]),
+                  key: item[$props.valueKey]
+                },
+                [
+                  createElementVNode("div", _hoisted_7, [
+                    renderSlot(_ctx.$slots, "default", { item }, () => [
+                      withDirectives((openBlock(), createElementBlock("div", null, [
+                        createTextVNode(
+                          toDisplayString(item[$props.labelKey]),
+                          1
+                          /* TEXT */
+                        )
+                      ])), [
+                        [$setup["vDasTooltip"]]
+                      ])
+                    ], true)
+                  ]),
+                  !$props.isView ? (openBlock(), createBlock($setup["DasIcon"], {
+                    key: 0,
+                    icon: "close2",
+                    size: "small",
+                    class: "close-icon",
+                    "icon-color": $setup.getVar("--das-ui-color-secondary"),
+                    onClick: ($event) => $setup.itemRemove(item)
+                  }, null, 8, ["icon-color", "onClick"])) : createCommentVNode("v-if", true)
+                ],
+                2
+                /* CLASS */
+              );
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          ))
+        ])
+      ], 10, _hoisted_5)), [
+        [_directive_infinite_scroll, $setup.infiniteLoad]
+      ]) : createCommentVNode("v-if", true)
+    ],
+    4
+    /* STYLE */
+  );
+}
+var SelectList = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-e1c892f3"], ["__file", "/Users/xiecp/das/das-fe/framework/packages/das-ui/packages/components/select-list/src/Index.vue"]]);
 
 var i18n = {
   "das-select-list-removeAll": { "zh-CN": "\u6E05\u7A7A", en: "test" },