@holyer-lib/ui 0.0.11 → 0.2.0

package/dist/ui.umd.js

@@ -16,6 +16,527 @@
       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;
 
@@ -1043,6 +1564,7 @@
 
   // eslint-disable-next-line prettier/prettier
   const components = [
+    __vue_component__$3,
     __vue_component__$2,
     __vue_component__$1,
     __vue_component__
@@ -1056,6 +1578,7 @@
 
   var index = {
     install,
+    HiExpandPanel: __vue_component__$3,
     HiExpandText: __vue_component__$2,
     HiTitle: __vue_component__$1,
     HiVirtualList: __vue_component__

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@holyer-lib/ui",
-  "version": "0.0.11",
+  "version": "0.2.0",
   "main": "dist/ui.cjs.js",
   "module": "dist/ui.esm.js",
   "unpkg": "dist/ui.umd.js",