@holyer-lib/ui 0.0.11 → 0.2.0

package/dist/ui.esm.js

@@ -10,6 +10,527 @@ function __$styleInject(css) {
     return css;
 }
 
+function __$styleInject$3(css) {
+    if (!css) return;
+
+    if (typeof window == 'undefined') return;
+    var style = document.createElement('style');
+    style.setAttribute('media', 'screen');
+
+    style.innerHTML = css;
+    document.head.appendChild(style);
+    return css;
+}
+
+__$styleInject$3(".hi-expand-panel {\n  position: relative;\n  display: flex;\n  transition: flex 0.3s ease;\n}\n.hi-expand-panel:hover .hi-expand-panel--control-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.hi-expand-panel--content {\n  height: 100%;\n  width: 100%;\n  overflow: auto;\n  padding: 16px;\n  box-sizing: border-box;\n}\n.hi-expand-panel--control-draggable:hover {\n  cursor: var(--control-draggable-cursor);\n}\n.hi-expand-panel--control-dragging {\n  background-color: var(--control-dragging-bg-color) !important;\n}\n.hi-expand-panel--right .hi-expand-panel--control,\n.hi-expand-panel--left .hi-expand-panel--control {\n  position: absolute;\n  height: 100%;\n  width: 1px;\n  background-color: var(--td-gray-color-4);\n}\n.hi-expand-panel--right .hi-expand-panel--control-trigger,\n.hi-expand-panel--left .hi-expand-panel--control-trigger {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  cursor: pointer;\n  background-color: var(--td-font-white-1);\n  border: 1px solid var(--td-gray-color-4);\n  width: 12px;\n  height: 56px;\n  display: none;\n  border-radius: 6px;\n}\n.hi-expand-panel--right {\n  flex-direction: row;\n}\n.hi-expand-panel--right .hi-expand-panel--control {\n  right: 0;\n}\n.hi-expand-panel--right .hi-expand-panel--control-trigger {\n  right: -6px;\n}\n.hi-expand-panel--left {\n  flex-direction: row-reverse;\n}\n.hi-expand-panel--left .hi-expand-panel--control {\n  left: 0;\n}\n.hi-expand-panel--left .hi-expand-panel--control-trigger {\n  left: -6px;\n}\n.hi-expand-panel--top .hi-expand-panel--control,\n.hi-expand-panel--bottom .hi-expand-panel--control {\n  position: absolute;\n  width: 100%;\n  height: 1px;\n  background-color: var(--td-gray-color-4);\n}\n.hi-expand-panel--top .hi-expand-panel--control-trigger,\n.hi-expand-panel--bottom .hi-expand-panel--control-trigger {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  cursor: pointer;\n  background-color: var(--td-font-white-1);\n  border: 1px solid var(--td-gray-color-4);\n  width: 56px;\n  height: 12px;\n  display: none;\n  border-radius: 6px;\n}\n.hi-expand-panel--top {\n  flex-direction: column-reverse;\n}\n.hi-expand-panel--top .hi-expand-panel--control {\n  top: 0;\n}\n.hi-expand-panel--top .hi-expand-panel--control-trigger {\n  top: -6px;\n}\n.hi-expand-panel--bottom {\n  flex-direction: column;\n}\n.hi-expand-panel--bottom .hi-expand-panel--control {\n  bottom: 0;\n}\n.hi-expand-panel--bottom .hi-expand-panel--control-trigger {\n  bottom: -6px;\n}\n");
+
+/**
+ * 类型判断工具
+ */
+
+/**
+ * 将数值或字符串转换为合法的 CSS 长度值（用于 style 绑定）
+ * - 若为 number，自动追加 'px' 单位
+ * - 若为 string，原样返回（假定用户已提供合法 CSS 长度值）
+ * @param {number|string} value - 输入值（如 100, '100%', '50vh', 'auto'）
+ * @returns {string} 合法的 CSS 长度字符串 默认值为 0
+ * @example
+ * formatSize(100)        // '100px'
+ * formatSize('100%')     // '100%'
+ * formatSize('50vh')     // '50vh'
+ * formatSize(null)       // 0
+ * formatSize(undefined)  // 0
+ */
+function formatSize$1(value) {
+  if (typeof value === 'number') {
+    return `${value}px`;
+  }
+  if (typeof value === 'string') {
+    if (value.trim() === '') {
+      return 0;
+    }
+    return value;
+  }
+  return 0;
+}
+
+//
+
+const validateSize = val => {
+  if (typeof val === 'number') {
+    return val >= 0;
+  }
+  return true;
+};
+
+var script$3 = {
+  name: 'HiExpandPanel',
+  model: {
+    prop: 'expanded',
+    event: 'update:expanded'
+  },
+  props: {
+    // 支持受控和非受控两种模式
+    expanded: {
+      type: Boolean,
+      default: undefined
+    },
+
+    placement: {
+      type: String,
+      default: 'right',
+      validator: v => ['left', 'right', 'top', 'bottom'].includes(v)
+    },
+
+    size: {
+      type: [Number, String],
+      default: 280,
+      validator: validateSize
+    },
+
+    minSize: {
+      type: [Number, String],
+      default: 240,
+      validator: validateSize
+    },
+
+    maxSize: {
+      type: [Number, String],
+      default: 480,
+      validator: validateSize
+    },
+
+    collapsedSize: {
+      type: [String, Number],
+      default: 24,
+      validator: validateSize
+    },
+
+    draggable: {
+      type: Boolean,
+      default: true
+    },
+
+    showTrigger: {
+      type: Boolean,
+      default: true
+    },
+
+    cacheKey: {
+      type: String,
+      default: ''
+    },
+
+    cacheVersion: {
+      type: String,
+      default: ''
+    },
+
+    draggingBgColor: {
+      type: String,
+      default: 'var(--td-gray-color-6)'
+    }
+  },
+  data() {
+    let cachedData = {};
+    if (this.cacheKey) {
+      try {
+        const stored = localStorage.getItem(`${this.cacheKey}${this.cacheVersion}`);
+        if (stored) {
+          cachedData = JSON.parse(stored);
+        }
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.warn(`HiExpandPanel: Failed to parse cache for key "${this.cacheKey}"`, e);
+        cachedData = {};
+      }
+    }
+
+    // 核心逻辑：有外部控制就用外部控制，否则用缓存
+    const useExternal = this.expanded !== undefined;
+    const initialExpanded = useExternal
+      ? this.expanded
+      : cachedData.cachedExpanded !== undefined
+      ? cachedData.cachedExpanded
+      : true;
+    const initialSize = useExternal
+      ? this.size
+      : cachedData.cachedSize !== undefined
+      ? cachedData.cachedSize
+      : this.size;
+
+    return {
+      innerExpanded: initialExpanded,
+      clientSize: initialSize,
+      isDragging: false,
+      startX: 0,
+      startY: 0,
+      startWidth: 0,
+      startHeight: 0,
+      hasExternalControl: useExternal
+    };
+  },
+  computed: {
+    isHorizontal() {
+      return ['left', 'right'].includes(this.placement);
+    },
+
+    // 根据展开状态和方向动态计算面板尺寸限制
+    getContainerStyles() {
+      // 如果未展开，直接返回空对象，不设置min/max尺寸
+      if (!this.innerExpanded) return {};
+      // 展开时根据方向设置对应的min/max尺寸
+      return this.isHorizontal
+        ? {
+            minWidth: formatSize$1(this.minSize),
+            maxWidth: formatSize$1(this.maxSize)
+          }
+        : {
+            minHeight: formatSize$1(this.minSize),
+            maxHeight: formatSize$1(this.maxSize)
+          };
+    },
+    panelStyle() {
+      const getWidth = () => {
+        if (this.isHorizontal) {
+          return this.innerExpanded ? formatSize$1(this.clientSize) : formatSize$1(this.collapsedSize) || 0;
+        }
+        return '100%';
+      };
+
+      const getHeight = () => {
+        if (this.isHorizontal) {
+          return '100%';
+        }
+        return this.innerExpanded ? formatSize$1(this.clientSize) : formatSize$1(this.collapsedSize) || 0;
+      };
+
+      return {
+        width: getWidth(),
+        height: getHeight(),
+        ...this.getContainerStyles,
+        transition: this.isDragging ? 'none' : 'flex 0.3s ease',
+        '--control-draggable-cursor': this.isHorizontal ? 'col-resize' : 'row-resize',
+        '--control-dragging-bg-color': this.draggingBgColor
+      };
+    }
+  },
+  watch: {
+    expanded(newVal) {
+      // 只有在组件是受控时才更新状态
+      if (this.hasExternalControl) {
+        if (newVal !== this.innerExpanded) {
+          this.innerExpanded = newVal;
+        }
+      }
+    },
+
+    innerExpanded(newVal) {
+      this.$emit('update:expanded', newVal);
+      this.$emit('expand-change', newVal);
+      if (this.cacheKey) {
+        this.handleSaveCache();
+      }
+    }
+  },
+  methods: {
+    handleToggle() {
+      this.innerExpanded = !this.innerExpanded;
+    },
+
+    handleSaveCache() {
+      if (this.cacheKey) {
+        localStorage.setItem(
+          `${this.cacheKey}${this.cacheVersion}`,
+          JSON.stringify({
+            cachedSize: this.clientSize,
+            cachedExpanded: this.innerExpanded
+          })
+        );
+      }
+    },
+
+    handleDragMousedown(e) {
+      if (!this.draggable) return;
+      e.preventDefault();
+      this.isDragging = true;
+      this.startX = e.clientX;
+      this.startY = e.clientY;
+
+      const panelRect = this.$refs.hiExpandPanelRef.getBoundingClientRect();
+      this.startWidth = panelRect.width;
+      this.startHeight = panelRect.height;
+
+      this.handleCreateMousemoveListener();
+      // 添加全局样式防止选中文本
+      document.body.style.userSelect = 'none';
+    },
+
+    // 核心逻辑：根据鼠标移动计算新的尺寸
+    handleDragMousemove(e) {
+      if (!this.isDragging) return;
+      // 只在需要阻止默认行为时调用 preventDefault
+      e.preventDefault();
+
+      let newSize;
+      if (this.isHorizontal) {
+        // 根据放置位置决定宽度变化的方向
+        const moveWidth = this.placement === 'left' ? this.startX - e.clientX : e.clientX - this.startX;
+        newSize = this.startWidth + moveWidth;
+      } else {
+        // 根据放置位置决定高度变化的方向
+        const moveHeight = this.placement === 'top' ? this.startY - e.clientY : e.clientY - this.startY;
+        newSize = this.startHeight + moveHeight;
+      }
+
+      // minSize 和 maxSize 已经限制了最大宽高，直接取 newSize 设置 clientSize 即可
+      this.clientSize = newSize;
+    },
+
+    // 鼠标松开结束拖动
+    handleDragMouseup() {
+      if (!this.isDragging) return;
+      this.isDragging = false;
+      this.handleSaveCache();
+      // 清理事件监听
+      this.handleClearMousemoveListener();
+      this.$emit('drag-end', {
+        size: this.clientSize,
+        expanded: this.innerExpanded
+      });
+
+      // 恢复全局样式
+      document.body.style.userSelect = '';
+    },
+
+    // 添加拖拽事件监听
+    handleCreateMousemoveListener() {
+      document.addEventListener('mousemove', this.handleDragMousemove);
+      document.addEventListener('mouseup', this.handleDragMouseup);
+    },
+
+    // 移除拖拽事件监听
+    handleClearMousemoveListener() {
+      document.removeEventListener('mousemove', this.handleDragMousemove);
+      document.removeEventListener('mouseup', this.handleDragMouseup);
+    }
+  }
+};
+
+function normalizeComponent$3(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
+    if (typeof shadowMode !== 'boolean') {
+        createInjectorSSR = createInjector;
+        createInjector = shadowMode;
+        shadowMode = false;
+    }
+    // Vue.extend constructor export interop.
+    const options = typeof script === 'function' ? script.options : script;
+    // render functions
+    if (template && template.render) {
+        options.render = template.render;
+        options.staticRenderFns = template.staticRenderFns;
+        options._compiled = true;
+        // functional template
+        if (isFunctionalTemplate) {
+            options.functional = true;
+        }
+    }
+    // scopedId
+    if (scopeId) {
+        options._scopeId = scopeId;
+    }
+    let hook;
+    if (moduleIdentifier) {
+        // server build
+        hook = function (context) {
+            // 2.3 injection
+            context =
+                context || // cached call
+                    (this.$vnode && this.$vnode.ssrContext) || // stateful
+                    (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
+            // 2.2 with runInNewContext: true
+            if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+                context = __VUE_SSR_CONTEXT__;
+            }
+            // inject component styles
+            if (style) {
+                style.call(this, createInjectorSSR(context));
+            }
+            // register component module identifier for async chunk inference
+            if (context && context._registeredComponents) {
+                context._registeredComponents.add(moduleIdentifier);
+            }
+        };
+        // used by ssr in case component is cached and beforeCreate
+        // never gets called
+        options._ssrRegister = hook;
+    }
+    else if (style) {
+        hook = shadowMode
+            ? function (context) {
+                style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
+            }
+            : function (context) {
+                style.call(this, createInjector(context));
+            };
+    }
+    if (hook) {
+        if (options.functional) {
+            // register for functional component in vue file
+            const originalRender = options.render;
+            options.render = function renderWithStyleInjection(h, context) {
+                hook.call(context);
+                return originalRender(h, context);
+            };
+        }
+        else {
+            // inject component registration as beforeCreate hook
+            const existing = options.beforeCreate;
+            options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+        }
+    }
+    return script;
+}
+
+/* script */
+const __vue_script__$3 = script$3;
+
+/* template */
+var __vue_render__$3 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c(
+    "div",
+    {
+      ref: "hiExpandPanelRef",
+      class: ["hi-expand-panel", "hi-expand-panel--" + _vm.placement],
+      style: _vm.panelStyle,
+    },
+    [
+      _c(
+        "div",
+        {
+          directives: [
+            {
+              name: "show",
+              rawName: "v-show",
+              value: _vm.innerExpanded,
+              expression: "innerExpanded",
+            },
+          ],
+          staticClass: "hi-expand-panel--content",
+        },
+        [_vm._t("default")],
+        2
+      ),
+      _vm._v(" "),
+      _c(
+        "div",
+        {
+          class: [
+            "hi-expand-panel--control",
+            {
+              "hi-expand-panel--control-draggable":
+                _vm.draggable && _vm.innerExpanded,
+              "hi-expand-panel--control-dragging":
+                _vm.isDragging && _vm.innerExpanded,
+            },
+          ],
+          on: {
+            mousedown: _vm.handleDragMousedown,
+            mousemove: _vm.handleDragMousemove,
+            mouseup: _vm.handleDragMouseup,
+          },
+        },
+        [
+          _vm.$slots.trigger || _vm.showTrigger
+            ? _c(
+                "div",
+                {
+                  staticClass: "hi-expand-panel--control-trigger",
+                  on: {
+                    click: function ($event) {
+                      $event.stopPropagation();
+                      return _vm.handleToggle.apply(null, arguments)
+                    },
+                    mousedown: function ($event) {
+                      $event.stopPropagation();
+                    },
+                  },
+                },
+                [
+                  _vm._t("trigger", function () {
+                    return [
+                      _vm.isHorizontal
+                        ? [
+                            _vm.placement === "right"
+                              ? _c("span", [
+                                  _vm._v(_vm._s(_vm.innerExpanded ? "◂" : "▸")),
+                                ])
+                              : _c("span", [
+                                  _vm._v(_vm._s(_vm.innerExpanded ? "▸" : "◂")),
+                                ]),
+                          ]
+                        : [
+                            _vm.placement === "top"
+                              ? _c("span", [
+                                  _vm._v(_vm._s(_vm.innerExpanded ? "▾" : "▴")),
+                                ])
+                              : _c("span", [
+                                  _vm._v(_vm._s(_vm.innerExpanded ? "▴" : "▾")),
+                                ]),
+                          ],
+                    ]
+                  }),
+                ],
+                2
+              )
+            : _vm._e(),
+        ]
+      ),
+    ]
+  )
+};
+var __vue_staticRenderFns__$3 = [];
+__vue_render__$3._withStripped = true;
+
+  /* style */
+  const __vue_inject_styles__$3 = undefined;
+  /* scoped */
+  const __vue_scope_id__$3 = undefined;
+  /* module identifier */
+  const __vue_module_identifier__$3 = undefined;
+  /* functional template */
+  const __vue_is_functional_template__$3 = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__$3 = /*#__PURE__*/normalizeComponent$3(
+    { render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 },
+    __vue_inject_styles__$3,
+    __vue_script__$3,
+    __vue_scope_id__$3,
+    __vue_is_functional_template__$3,
+    __vue_module_identifier__$3,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+__vue_component__$3.name = 'HiExpandPanel';
+
+// 添加 install
+__vue_component__$3.install = Vue => {
+  Vue.component(__vue_component__$3.name, __vue_component__$3);
+};
+
 function __$styleInject$2(css) {
     if (!css) return;
 
@@ -1037,6 +1558,7 @@ __vue_component__.install = Vue => {
 
 // eslint-disable-next-line prettier/prettier
 const components = [
+  __vue_component__$3,
   __vue_component__$2,
   __vue_component__$1,
   __vue_component__
@@ -1050,6 +1572,7 @@ const install = function (Vue) {
 
 var index = {
   install,
+  HiExpandPanel: __vue_component__$3,
   HiExpandText: __vue_component__$2,
   HiTitle: __vue_component__$1,
   HiVirtualList: __vue_component__