@das-fed/ui 1.1.3 → 6.3.0-beta.0

package/packages/components/split-panel/index.css

@@ -1 +1 @@
-.das-ui-split-panel[data-v-68d2bc5a]{border:1px solid var(--das-ui-split-panel-color-line);display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%}.das-ui-split-panel[data-v-68d2bc5a] .das-split-panel-first[data-v-68d2bc5a]{height:100%;overflow:hidden}.das-ui-split-panel[data-v-68d2bc5a] .das-split-panel-second[data-v-68d2bc5a]{flex:1;height:100%;min-width:0;overflow:hidden}.das-ui-split-panel[data-v-68d2bc5a] .das-split-panel-mid[data-v-68d2bc5a]{position:relative}.das-ui-split-panel[data-v-68d2bc5a] .das-split-panel-mid[data-v-68d2bc5a][data-v-68d2bc5a]:hover .das-split-panel-btn[data-v-68d2bc5a]{border-color:var(--das-ui-split-panel-color-btn)}.das-ui-split-panel[data-v-68d2bc5a] .das-split-panel-mid[data-v-68d2bc5a] .das-split-panel-line[data-v-68d2bc5a]{border-right:1px solid transparent;cursor:auto;height:100%}.das-ui-split-panel[data-v-68d2bc5a] .das-split-panel-mid[data-v-68d2bc5a] .das-split-panel-line[data-v-68d2bc5a].hide[data-v-68d2bc5a]{display:none}.das-ui-split-panel[data-v-68d2bc5a] .das-split-panel-mid[data-v-68d2bc5a] .das-split-panel-line[data-v-68d2bc5a] .das-split-panel-divider[data-v-68d2bc5a]{background-color:var(--das-ui-split-panel-color-line);height:100%;position:absolute;width:1px}.das-ui-split-panel[data-v-68d2bc5a] .das-split-panel-mid[data-v-68d2bc5a] .das-split-panel-line[data-v-68d2bc5a].canDrag[data-v-68d2bc5a]{cursor:col-resize}.das-ui-split-panel[data-v-68d2bc5a] .das-split-panel-mid[data-v-68d2bc5a] .das-split-panel-btn[data-v-68d2bc5a]{border:1px solid transparent;box-sizing:border-box;color:var(--das-ui-split-panel-color-btn);cursor:pointer;height:20px;padding:1px 2px;position:absolute;top:50%;transform:translateY(-50%);width:20px;z-index:5}.das-ui-split-panel[data-v-68d2bc5a] .das-split-panel-mid[data-v-68d2bc5a] .das-split-panel-btn[data-v-68d2bc5a][data-v-68d2bc5a]:hover{border-color:var(--das-ui-split-panel-color-primary);color:var(--das-ui-split-panel-color-primary)}.das-ui-split-panel[data-v-68d2bc5a] .das-split-panel-mid[data-v-68d2bc5a] .das-split-panel-btn[data-v-68d2bc5a].left[data-v-68d2bc5a]{border-radius:50% 0 0 50%;border-right:none;right:0}.das-ui-split-panel[data-v-68d2bc5a] .das-split-panel-mid[data-v-68d2bc5a] .das-split-panel-btn[data-v-68d2bc5a].right[data-v-68d2bc5a]{border-left:none;border-radius:0 50% 50% 0;left:0}.das-ui-split-panel[data-v-68d2bc5a] .das-split-panel-mid[data-v-68d2bc5a] .das-split-panel-btn[data-v-68d2bc5a].isBase[data-v-68d2bc5a]{background:var(--das-ui-split-panel-color-btn);color:#fff}
+.das-ui-split-panel[data-v-68d2bc5a]{border:1px solid var(--das-ui-split-panel-color-line);display:flex;flex-direction:row;height:100%;overflow:hidden;position:relative;width:100%}.das-ui-split-panel[data-v-68d2bc5a] .das-split-panel-first[data-v-68d2bc5a]{height:100%;overflow:hidden}.das-ui-split-panel[data-v-68d2bc5a] .das-split-panel-second[data-v-68d2bc5a]{flex:1;height:100%;min-width:0;overflow:hidden}.das-ui-split-panel[data-v-68d2bc5a] .das-split-panel-mid[data-v-68d2bc5a]{height:100%;position:absolute;z-index:20}.das-ui-split-panel[data-v-68d2bc5a] .das-split-panel-mid[data-v-68d2bc5a][data-v-68d2bc5a]:hover .das-split-panel-btn[data-v-68d2bc5a]{border-color:var(--das-ui-split-panel-color-btn)}.das-ui-split-panel[data-v-68d2bc5a] .das-split-panel-mid[data-v-68d2bc5a] .das-split-panel-line[data-v-68d2bc5a]{border-right:1px solid transparent;cursor:auto;height:100%;z-index:20}.das-ui-split-panel[data-v-68d2bc5a] .das-split-panel-mid[data-v-68d2bc5a] .das-split-panel-line[data-v-68d2bc5a].hide[data-v-68d2bc5a]{display:none}.das-ui-split-panel[data-v-68d2bc5a] .das-split-panel-mid[data-v-68d2bc5a] .das-split-panel-line[data-v-68d2bc5a] .das-split-panel-divider[data-v-68d2bc5a]{background-image:linear-gradient(90deg,transparent 0,transparent 45%,var(--das-ui-split-panel-color-line) 45.6%,var(--das-ui-split-panel-color-line) 62.5%,transparent 62.6%,transparent 100%);height:100%;padding:0 2px;position:absolute;transform:translate(-50%);width:1px}.das-ui-split-panel[data-v-68d2bc5a] .das-split-panel-mid[data-v-68d2bc5a] .das-split-panel-line[data-v-68d2bc5a].canDrag[data-v-68d2bc5a]{cursor:col-resize}.das-ui-split-panel[data-v-68d2bc5a] .das-split-panel-mid[data-v-68d2bc5a] .das-split-panel-btn[data-v-68d2bc5a]{border:1px solid transparent;box-sizing:border-box;color:var(--das-ui-split-panel-color-btn);cursor:pointer;height:20px;padding:1px 2px;position:absolute;top:50%;transform:translateY(-50%);width:20px;z-index:5}.das-ui-split-panel[data-v-68d2bc5a] .das-split-panel-mid[data-v-68d2bc5a] .das-split-panel-btn[data-v-68d2bc5a][data-v-68d2bc5a]:hover{border-color:var(--das-ui-split-panel-color-primary);color:var(--das-ui-split-panel-color-primary)}.das-ui-split-panel[data-v-68d2bc5a] .das-split-panel-mid[data-v-68d2bc5a] .das-split-panel-btn[data-v-68d2bc5a].left[data-v-68d2bc5a]{border-radius:50% 0 0 50%;border-right:none;right:0}.das-ui-split-panel[data-v-68d2bc5a] .das-split-panel-mid[data-v-68d2bc5a] .das-split-panel-btn[data-v-68d2bc5a].right[data-v-68d2bc5a]{border-left:none;border-radius:0 50% 50% 0;left:0}.das-ui-split-panel[data-v-68d2bc5a] .das-split-panel-mid[data-v-68d2bc5a] .das-split-panel-btn[data-v-68d2bc5a].isBase[data-v-68d2bc5a]{background:var(--das-ui-split-panel-color-btn);color:#fff}

package/packages/components/split-panel/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref as ref$1, computed, watch as watch$1, onMounted as onMounted$1, openBlock, createElementBlock, normalizeStyle, createElementVNode, renderSlot, normalizeClass, createVNode, unref as unref$1, createCommentVNode, pushScopeId, popScopeId } from 'vue';
+import { defineComponent, ref as ref$1, computed, watch as watch$1, onMounted as onMounted$1, openBlock, createElementBlock, normalizeStyle, createElementVNode, renderSlot, normalizeClass, createVNode, createCommentVNode, withModifiers, pushScopeId, popScopeId } from 'vue';
 import { withInstall } from '@das-fed/utils';
 import { DasIcon } from '@das-fed/ui';
 import { getCurrentScope, onScopeDispose, unref, getCurrentInstance, onMounted, nextTick, ref, watch } from 'vue-demi';
@@ -17348,7 +17348,7 @@ const functionsMap = [
 ];
 function useFullscreen(target, options = {}) {
   const { document = defaultDocument, autoExit = false } = options;
-  const targetRef = target || (document == null ? void 0 : document.querySelector("html"));
+  const targetRef = (document == null ? void 0 : document.querySelector("html"));
   const isFullscreen = ref(false);
   let map = functionsMap[0];
   const isSupported = useSupported(() => {
@@ -17459,15 +17459,6 @@ __spreadValues({
   linear: identity
 }, _TransitionPresets);
 
-const _withScopeId = (n) => (pushScopeId("data-v-68d2bc5a"), n = n(), popScopeId(), n);
-const _hoisted_1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode(
-  "div",
-  { class: "das-split-panel-divider" },
-  null,
-  -1
-  /* HOISTED */
-));
-const _hoisted_2 = { class: "das-split-panel-second" };
 const __default__ = {
   name: "DasSplitPanel"
 };
@@ -17495,11 +17486,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const splitLineWidth = computed(() => {
       console.log("\u5206\u5272\u7EBF\u5BBD\u5EA6");
       console.dir($splitLine?.value);
-      if (!$splitLine?.value)
-        return 1;
+      if (!$splitLine?.value) return 1;
       return Number($splitLine?.value?.offsetWidth) - 2 || 1;
     });
-    computed(() => {
+    const splitLineWidthCSS = computed(() => {
       return splitLineWidth.value + "px";
     });
     const resizeObserver = ref$1(null);
@@ -17515,27 +17505,31 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const firstPanelStyle = computed(() => {
       return { width: currWidthCSS.value };
     });
+    const panelLineStyle = computed(() => {
+      return { left: currWidthCSS.value };
+    });
     const isLeftBase = ref$1(false);
     const isRightBase = ref$1(false);
-    watch$1(currWidth, (newVal, old) => {
-      if (newVal === 0) {
-        isLeftBase.value = true;
-      } else {
-        isLeftBase.value = false;
-      }
-      if (newVal === panelWidth?.value) {
-        isRightBase.value = true;
-      } else {
-        isRightBase.value = false;
-      }
-    });
     watch$1(
-      isFullscreen,
-      (newVal) => {
-        console.log("isFullscreen", newVal);
-        onResize();
-      }
+      currWidth,
+      (newVal, old) => {
+        if (newVal === 0) {
+          isLeftBase.value = true;
+        } else {
+          isLeftBase.value = false;
+        }
+        if (newVal === panelWidth?.value) {
+          isRightBase.value = true;
+        } else {
+          isRightBase.value = false;
+        }
+      },
+      { immediate: true }
     );
+    watch$1(isFullscreen, (newVal) => {
+      console.log("isFullscreen", newVal);
+      onResize();
+    });
     const toLeft = () => {
       if (currWidth.value > defaultWidth.value) {
         currWidth.value = defaultWidth.value;
@@ -17560,8 +17554,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       startWidth: 0
     });
     const lineMouseDown = (e) => {
-      if (!props.canDrag)
-        return;
+      if (!props.canDrag) return;
       mouse.value.mouseFlag = true;
       mouse.value.startX = e.clientX;
       mouse.value.startWidth = currWidth.value;
@@ -17571,8 +17564,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const lineMouseMove = (e) => {
       e.preventDefault();
-      if (!mouse.value.mouseFlag)
-        return;
+      if (!mouse.value.mouseFlag) return;
       let moveX = e.clientX;
       let x = moveX - mouse.value.startX;
       let newX = mouse.value.startWidth + x;
@@ -17626,13 +17618,14 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const reset = () => {
       initWidth();
     };
+    let firstInit = ref$1(true);
     const onResize = () => {
       console.log("onresize");
       let flag = false;
       if (isRightBase.value) {
         flag = true;
       }
-      console.log($splitPanel?.value.offsetWidth);
+      if (!$splitPanel?.value) return;
       panelWidth.value = Number($splitPanel?.value?.offsetWidth - splitLineWidth?.value) || 0;
       currFirstMin.value = getWidth(panelWidth.value, props.firstMin);
       currFirstMax.value = panelWidth.value - getWidth(panelWidth.value, props.secondMin);
@@ -17642,6 +17635,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }
       if (reloadFlag.value === true) {
         initWidth();
+        if (firstInit.value) {
+          firstInit.value = false;
+          return;
+        }
         reloadFlag.value = false;
       }
     };
@@ -17649,122 +17646,144 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       reloadFlag.value = true;
       resizeObserver.value = new ResizeObserver(lodashExports.debounce(onResize, 30));
       resizeObserver.value?.observe($splitPanel?.value);
+      onResize();
     });
     __expose({
       toLeft,
       toRight,
       reset
     });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
+    const __returned__ = { isFullscreen, props, $emit, $splitPanel, $splitLine, splitLineWidth, splitLineWidthCSS, resizeObserver, panelWidth, currFirstMin, currFirstMax, defaultWidth, currWidth, reloadFlag, currWidthCSS, firstPanelStyle, panelLineStyle, isLeftBase, isRightBase, toLeft, toRight, mouse, lineMouseDown, lineMouseMove, lineMouseUp, getWidth, initWidth, reset, get firstInit() {
+      return firstInit;
+    }, set firstInit(v) {
+      firstInit = v;
+    }, onResize, get DasIcon() {
+      return DasIcon;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+
+const _withScopeId = (n) => (pushScopeId("data-v-68d2bc5a"), n = n(), popScopeId(), n);
+const _hoisted_1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode(
+  "div",
+  { class: "das-split-panel-divider" },
+  null,
+  -1
+  /* HOISTED */
+));
+const _hoisted_2 = { class: "das-split-panel-second" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock(
+    "div",
+    {
+      class: "das-ui-split-panel",
+      ref: "$splitPanel",
+      style: normalizeStyle($props.boxStyle)
+    },
+    [
+      createElementVNode(
         "div",
         {
-          class: "das-ui-split-panel",
-          ref_key: "$splitPanel",
-          ref: $splitPanel,
-          style: normalizeStyle(_ctx.boxStyle)
+          class: "das-split-panel-first",
+          style: normalizeStyle($setup.firstPanelStyle)
         },
         [
+          renderSlot(_ctx.$slots, "firstSlot", {}, void 0, true)
+        ],
+        4
+        /* STYLE */
+      ),
+      createElementVNode(
+        "div",
+        {
+          class: "das-split-panel-mid",
+          ref: "$splitLine",
+          style: normalizeStyle($setup.panelLineStyle)
+        },
+        [
+          $props.canFold ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            onClick: $setup.toLeft
+          }, [
+            renderSlot(_ctx.$slots, "leftBtn", {}, () => [
+              createElementVNode(
+                "span",
+                {
+                  class: normalizeClass(["das-split-panel-btn left", [$setup.isRightBase ? "isBase" : ""]])
+                },
+                [
+                  createVNode($setup["DasIcon"], {
+                    icon: "shuzuofanye",
+                    size: "medium"
+                  })
+                ],
+                2
+                /* CLASS */
+              )
+            ], true)
+          ])) : createCommentVNode("v-if", true),
           createElementVNode(
             "div",
             {
-              class: "das-split-panel-first",
-              style: normalizeStyle(firstPanelStyle.value)
+              class: normalizeClass(["das-split-panel-line", { hide: $setup.isLeftBase || $setup.isRightBase, canDrag: $setup.props.canDrag }]),
+              onDragstart: _cache[0] || (_cache[0] = withModifiers(() => {
+              }, ["stop", "prevent"])),
+              onMousedown: withModifiers($setup.lineMouseDown, ["prevent"]),
+              onClick: _cache[1] || (_cache[1] = withModifiers(() => {
+              }, ["stop", "prevent"]))
             },
             [
-              renderSlot(_ctx.$slots, "firstSlot", {}, void 0, true)
+              createCommentVNode(' <slot name="splitLine"> '),
+              _hoisted_1,
+              createCommentVNode(" </slot> ")
             ],
-            4
-            /* STYLE */
+            34
+            /* CLASS, NEED_HYDRATION */
           ),
-          createElementVNode(
-            "div",
-            {
-              class: "das-split-panel-mid",
-              ref_key: "$splitLine",
-              ref: $splitLine
-            },
-            [
-              _ctx.canFold ? (openBlock(), createElementBlock("span", {
-                key: 0,
-                onClick: toLeft
-              }, [
-                renderSlot(_ctx.$slots, "leftBtn", {}, () => [
-                  createElementVNode(
-                    "span",
-                    {
-                      class: normalizeClass(["das-split-panel-btn left", [isRightBase.value ? "isBase" : ""]])
-                    },
-                    [
-                      createVNode(unref$1(DasIcon), {
-                        icon: "shuzuofanye",
-                        size: "medium"
-                      })
-                    ],
-                    2
-                    /* CLASS */
-                  )
-                ], true)
-              ])) : createCommentVNode("v-if", true),
+          $props.canFold ? (openBlock(), createElementBlock("span", {
+            key: 1,
+            onClick: $setup.toRight
+          }, [
+            renderSlot(_ctx.$slots, "rightBtn", {}, () => [
               createElementVNode(
-                "div",
+                "span",
                 {
-                  class: normalizeClass(["das-split-panel-line", { hide: isLeftBase.value || isRightBase.value, canDrag: props.canDrag }]),
-                  onMousedown: lineMouseDown
+                  class: normalizeClass(["das-split-panel-btn right", [$setup.isLeftBase ? "isBase" : ""]])
                 },
                 [
-                  createCommentVNode(' <slot name="splitLine"> '),
-                  _hoisted_1,
-                  createCommentVNode(" </slot> ")
+                  createVNode($setup["DasIcon"], {
+                    icon: "shuyoufanye",
+                    size: "medium"
+                  })
                 ],
-                34
-                /* CLASS, NEED_HYDRATION */
-              ),
-              _ctx.canFold ? (openBlock(), createElementBlock("span", {
-                key: 1,
-                onClick: toRight
-              }, [
-                renderSlot(_ctx.$slots, "rightBtn", {}, () => [
-                  createElementVNode(
-                    "span",
-                    {
-                      class: normalizeClass(["das-split-panel-btn right", [isLeftBase.value ? "isBase" : ""]])
-                    },
-                    [
-                      createVNode(unref$1(DasIcon), {
-                        icon: "shuyoufanye",
-                        size: "medium"
-                      })
-                    ],
-                    2
-                    /* CLASS */
-                  )
-                ], true)
-              ])) : createCommentVNode("v-if", true)
-            ],
-            512
-            /* NEED_PATCH */
-          ),
-          createElementVNode("div", _hoisted_2, [
-            renderSlot(_ctx.$slots, "secondSlot", {}, void 0, true)
-          ])
+                2
+                /* CLASS */
+              )
+            ], true)
+          ])) : createCommentVNode("v-if", true)
         ],
         4
         /* STYLE */
-      );
-    };
-  }
-});
-
-var _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-
-var splitPanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-68d2bc5a"], ["__file", "E:\\company-code\\v6r3\\framework-3\\packages\\das-ui\\packages\\components\\split-panel\\src\\Index.vue"]]);
+      ),
+      createElementVNode("div", _hoisted_2, [
+        renderSlot(_ctx.$slots, "secondSlot", {}, void 0, true)
+      ])
+    ],
+    4
+    /* STYLE */
+  );
+}
+var splitPanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-68d2bc5a"], ["__file", "/Users/xiecp/das/das-fe/framework/packages/das-ui/packages/components/split-panel/src/Index.vue"]]);
 
 var theme = {
   "--das-ui-split-panel-color-primary": "#5582F3",