@element-plus/nightly 0.0.20250220 → 0.0.20250222

package/lib/components/progress/src/progress2.js

@@ -2,215 +2,61 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var vue = require('vue');
-var index$1 = require('../../icon/index.js');
-var iconsVue = require('@element-plus/icons-vue');
-var progress = require('./progress.js');
-var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
-var index = require('../../../hooks/use-namespace/index.js');
-var shared = require('@vue/shared');
+var runtime = require('../../../utils/vue/props/runtime.js');
 
-const __default__ = vue.defineComponent({
-  name: "ElProgress"
-});
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  ...__default__,
-  props: progress.progressProps,
-  setup(__props) {
-    const props = __props;
-    const STATUS_COLOR_MAP = {
-      success: "#13ce66",
-      exception: "#ff4949",
-      warning: "#e6a23c",
-      default: "#20a0ff"
-    };
-    const ns = index.useNamespace("progress");
-    const barStyle = vue.computed(() => {
-      const barStyle2 = {
-        width: `${props.percentage}%`,
-        animationDuration: `${props.duration}s`
-      };
-      const color = getCurrentColor(props.percentage);
-      if (color.includes("gradient")) {
-        barStyle2.background = color;
-      } else {
-        barStyle2.backgroundColor = color;
-      }
-      return barStyle2;
-    });
-    const relativeStrokeWidth = vue.computed(() => (props.strokeWidth / props.width * 100).toFixed(1));
-    const radius = vue.computed(() => {
-      if (["circle", "dashboard"].includes(props.type)) {
-        return Number.parseInt(`${50 - Number.parseFloat(relativeStrokeWidth.value) / 2}`, 10);
-      }
-      return 0;
-    });
-    const trackPath = vue.computed(() => {
-      const r = radius.value;
-      const isDashboard = props.type === "dashboard";
-      return `
-          M 50 50
-          m 0 ${isDashboard ? "" : "-"}${r}
-          a ${r} ${r} 0 1 1 0 ${isDashboard ? "-" : ""}${r * 2}
-          a ${r} ${r} 0 1 1 0 ${isDashboard ? "" : "-"}${r * 2}
-          `;
-    });
-    const perimeter = vue.computed(() => 2 * Math.PI * radius.value);
-    const rate = vue.computed(() => props.type === "dashboard" ? 0.75 : 1);
-    const strokeDashoffset = vue.computed(() => {
-      const offset = -1 * perimeter.value * (1 - rate.value) / 2;
-      return `${offset}px`;
-    });
-    const trailPathStyle = vue.computed(() => ({
-      strokeDasharray: `${perimeter.value * rate.value}px, ${perimeter.value}px`,
-      strokeDashoffset: strokeDashoffset.value
-    }));
-    const circlePathStyle = vue.computed(() => ({
-      strokeDasharray: `${perimeter.value * rate.value * (props.percentage / 100)}px, ${perimeter.value}px`,
-      strokeDashoffset: strokeDashoffset.value,
-      transition: "stroke-dasharray 0.6s ease 0s, stroke 0.6s ease, opacity ease 0.6s"
-    }));
-    const stroke = vue.computed(() => {
-      let ret;
-      if (props.color) {
-        ret = getCurrentColor(props.percentage);
-      } else {
-        ret = STATUS_COLOR_MAP[props.status] || STATUS_COLOR_MAP.default;
-      }
-      return ret;
-    });
-    const statusIcon = vue.computed(() => {
-      if (props.status === "warning") {
-        return iconsVue.WarningFilled;
-      }
-      if (props.type === "line") {
-        return props.status === "success" ? iconsVue.CircleCheck : iconsVue.CircleClose;
-      } else {
-        return props.status === "success" ? iconsVue.Check : iconsVue.Close;
-      }
-    });
-    const progressTextSize = vue.computed(() => {
-      return props.type === "line" ? 12 + props.strokeWidth * 0.4 : props.width * 0.111111 + 2;
-    });
-    const content = vue.computed(() => props.format(props.percentage));
-    function getColors(color) {
-      const span = 100 / color.length;
-      const seriesColors = color.map((seriesColor, index) => {
-        if (shared.isString(seriesColor)) {
-          return {
-            color: seriesColor,
-            percentage: (index + 1) * span
-          };
-        }
-        return seriesColor;
-      });
-      return seriesColors.sort((a, b) => a.percentage - b.percentage);
-    }
-    const getCurrentColor = (percentage) => {
-      var _a;
-      const { color } = props;
-      if (shared.isFunction(color)) {
-        return color(percentage);
-      } else if (shared.isString(color)) {
-        return color;
-      } else {
-        const colors = getColors(color);
-        for (const color2 of colors) {
-          if (color2.percentage > percentage)
-            return color2.color;
-        }
-        return (_a = colors[colors.length - 1]) == null ? void 0 : _a.color;
-      }
-    };
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass([
-          vue.unref(ns).b(),
-          vue.unref(ns).m(_ctx.type),
-          vue.unref(ns).is(_ctx.status),
-          {
-            [vue.unref(ns).m("without-text")]: !_ctx.showText,
-            [vue.unref(ns).m("text-inside")]: _ctx.textInside
-          }
-        ]),
-        role: "progressbar",
-        "aria-valuenow": _ctx.percentage,
-        "aria-valuemin": "0",
-        "aria-valuemax": "100"
-      }, [
-        _ctx.type === "line" ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 0,
-          class: vue.normalizeClass(vue.unref(ns).b("bar"))
-        }, [
-          vue.createElementVNode("div", {
-            class: vue.normalizeClass(vue.unref(ns).be("bar", "outer")),
-            style: vue.normalizeStyle({ height: `${_ctx.strokeWidth}px` })
-          }, [
-            vue.createElementVNode("div", {
-              class: vue.normalizeClass([
-                vue.unref(ns).be("bar", "inner"),
-                { [vue.unref(ns).bem("bar", "inner", "indeterminate")]: _ctx.indeterminate },
-                { [vue.unref(ns).bem("bar", "inner", "striped")]: _ctx.striped },
-                { [vue.unref(ns).bem("bar", "inner", "striped-flow")]: _ctx.stripedFlow }
-              ]),
-              style: vue.normalizeStyle(vue.unref(barStyle))
-            }, [
-              (_ctx.showText || _ctx.$slots.default) && _ctx.textInside ? (vue.openBlock(), vue.createElementBlock("div", {
-                key: 0,
-                class: vue.normalizeClass(vue.unref(ns).be("bar", "innerText"))
-              }, [
-                vue.renderSlot(_ctx.$slots, "default", { percentage: _ctx.percentage }, () => [
-                  vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(content)), 1)
-                ])
-              ], 2)) : vue.createCommentVNode("v-if", true)
-            ], 6)
-          ], 6)
-        ], 2)) : (vue.openBlock(), vue.createElementBlock("div", {
-          key: 1,
-          class: vue.normalizeClass(vue.unref(ns).b("circle")),
-          style: vue.normalizeStyle({ height: `${_ctx.width}px`, width: `${_ctx.width}px` })
-        }, [
-          (vue.openBlock(), vue.createElementBlock("svg", { viewBox: "0 0 100 100" }, [
-            vue.createElementVNode("path", {
-              class: vue.normalizeClass(vue.unref(ns).be("circle", "track")),
-              d: vue.unref(trackPath),
-              stroke: `var(${vue.unref(ns).cssVarName("fill-color-light")}, #e5e9f2)`,
-              "stroke-linecap": _ctx.strokeLinecap,
-              "stroke-width": vue.unref(relativeStrokeWidth),
-              fill: "none",
-              style: vue.normalizeStyle(vue.unref(trailPathStyle))
-            }, null, 14, ["d", "stroke", "stroke-linecap", "stroke-width"]),
-            vue.createElementVNode("path", {
-              class: vue.normalizeClass(vue.unref(ns).be("circle", "path")),
-              d: vue.unref(trackPath),
-              stroke: vue.unref(stroke),
-              fill: "none",
-              opacity: _ctx.percentage ? 1 : 0,
-              "stroke-linecap": _ctx.strokeLinecap,
-              "stroke-width": vue.unref(relativeStrokeWidth),
-              style: vue.normalizeStyle(vue.unref(circlePathStyle))
-            }, null, 14, ["d", "stroke", "opacity", "stroke-linecap", "stroke-width"])
-          ]))
-        ], 6)),
-        (_ctx.showText || _ctx.$slots.default) && !_ctx.textInside ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 2,
-          class: vue.normalizeClass(vue.unref(ns).e("text")),
-          style: vue.normalizeStyle({ fontSize: `${vue.unref(progressTextSize)}px` })
-        }, [
-          vue.renderSlot(_ctx.$slots, "default", { percentage: _ctx.percentage }, () => [
-            !_ctx.status ? (vue.openBlock(), vue.createElementBlock("span", { key: 0 }, vue.toDisplayString(vue.unref(content)), 1)) : (vue.openBlock(), vue.createBlock(vue.unref(index$1.ElIcon), { key: 1 }, {
-              default: vue.withCtx(() => [
-                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(statusIcon))))
-              ]),
-              _: 1
-            }))
-          ])
-        ], 6)) : vue.createCommentVNode("v-if", true)
-      ], 10, ["aria-valuenow"]);
-    };
+const progressProps = runtime.buildProps({
+  type: {
+    type: String,
+    default: "line",
+    values: ["line", "circle", "dashboard"]
+  },
+  percentage: {
+    type: Number,
+    default: 0,
+    validator: (val) => val >= 0 && val <= 100
+  },
+  status: {
+    type: String,
+    default: "",
+    values: ["", "success", "exception", "warning"]
+  },
+  indeterminate: Boolean,
+  duration: {
+    type: Number,
+    default: 3
+  },
+  strokeWidth: {
+    type: Number,
+    default: 6
+  },
+  strokeLinecap: {
+    type: runtime.definePropType(String),
+    default: "round"
+  },
+  textInside: Boolean,
+  width: {
+    type: Number,
+    default: 126
+  },
+  showText: {
+    type: Boolean,
+    default: true
+  },
+  color: {
+    type: runtime.definePropType([
+      String,
+      Array,
+      Function
+    ]),
+    default: ""
+  },
+  striped: Boolean,
+  stripedFlow: Boolean,
+  format: {
+    type: runtime.definePropType(Function),
+    default: (percentage) => `${percentage}%`
   }
 });
-var Progress = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "progress.vue"]]);
 
-exports["default"] = Progress;
+exports.progressProps = progressProps;
 //# sourceMappingURL=progress2.js.map

package/lib/components/progress/src/progress2.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress2.js","sources":["../../../../../../packages/components/progress/src/progress.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      ns.b(),\n      ns.m(type),\n      ns.is(status),\n      {\n        [ns.m('without-text')]: !showText,\n        [ns.m('text-inside')]: textInside,\n      },\n    ]\"\n    role=\"progressbar\"\n    :aria-valuenow=\"percentage\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <div v-if=\"type === 'line'\" :class=\"ns.b('bar')\">\n      <div\n        :class=\"ns.be('bar', 'outer')\"\n        :style=\"{ height: `${strokeWidth}px` }\"\n      >\n        <div\n          :class=\"[\n            ns.be('bar', 'inner'),\n            { [ns.bem('bar', 'inner', 'indeterminate')]: indeterminate },\n            { [ns.bem('bar', 'inner', 'striped')]: striped },\n            { [ns.bem('bar', 'inner', 'striped-flow')]: stripedFlow },\n          ]\"\n          :style=\"barStyle\"\n        >\n          <div\n            v-if=\"(showText || $slots.default) && textInside\"\n            :class=\"ns.be('bar', 'innerText')\"\n          >\n            <slot :percentage=\"percentage\">\n              <span>{{ content }}</span>\n            </slot>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      v-else\n      :class=\"ns.b('circle')\"\n      :style=\"{ height: `${width}px`, width: `${width}px` }\"\n    >\n      <svg viewBox=\"0 0 100 100\">\n        <path\n          :class=\"ns.be('circle', 'track')\"\n          :d=\"trackPath\"\n          :stroke=\"`var(${ns.cssVarName('fill-color-light')}, #e5e9f2)`\"\n          :stroke-linecap=\"strokeLinecap\"\n          :stroke-width=\"relativeStrokeWidth\"\n          fill=\"none\"\n          :style=\"trailPathStyle\"\n        />\n        <path\n          :class=\"ns.be('circle', 'path')\"\n          :d=\"trackPath\"\n          :stroke=\"stroke\"\n          fill=\"none\"\n          :opacity=\"percentage ? 1 : 0\"\n          :stroke-linecap=\"strokeLinecap\"\n          :stroke-width=\"relativeStrokeWidth\"\n          :style=\"circlePathStyle\"\n        />\n      </svg>\n    </div>\n    <div\n      v-if=\"(showText || $slots.default) && !textInside\"\n      :class=\"ns.e('text')\"\n      :style=\"{ fontSize: `${progressTextSize}px` }\"\n    >\n      <slot :percentage=\"percentage\">\n        <span v-if=\"!status\">{{ content }}</span>\n        <el-icon v-else>\n          <component :is=\"statusIcon\" />\n        </el-icon>\n      </slot>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport {\n  Check,\n  CircleCheck,\n  CircleClose,\n  Close,\n  WarningFilled,\n} from '@element-plus/icons-vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { isFunction, isString } from '@element-plus/utils'\nimport { progressProps } from './progress'\nimport type { CSSProperties } from 'vue'\nimport type { ProgressColor } from './progress'\n\ndefineOptions({\n  name: 'ElProgress',\n})\n\nconst STATUS_COLOR_MAP: Record<string, string> = {\n  success: '#13ce66',\n  exception: '#ff4949',\n  warning: '#e6a23c',\n  default: '#20a0ff',\n}\n\nconst props = defineProps(progressProps)\n\nconst ns = useNamespace('progress')\n\nconst barStyle = computed<CSSProperties>(() => {\n  const barStyle: CSSProperties = {\n    width: `${props.percentage}%`,\n    animationDuration: `${props.duration}s`,\n  }\n  const color = getCurrentColor(props.percentage)\n  if (color.includes('gradient')) {\n    barStyle.background = color\n  } else {\n    barStyle.backgroundColor = color\n  }\n  return barStyle\n})\n\nconst relativeStrokeWidth = computed(() =>\n  ((props.strokeWidth / props.width) * 100).toFixed(1)\n)\n\nconst radius = computed(() => {\n  if (['circle', 'dashboard'].includes(props.type)) {\n    return Number.parseInt(\n      `${50 - Number.parseFloat(relativeStrokeWidth.value) / 2}`,\n      10\n    )\n  }\n  return 0\n})\n\nconst trackPath = computed(() => {\n  const r = radius.value\n  const isDashboard = props.type === 'dashboard'\n  return `\n          M 50 50\n          m 0 ${isDashboard ? '' : '-'}${r}\n          a ${r} ${r} 0 1 1 0 ${isDashboard ? '-' : ''}${r * 2}\n          a ${r} ${r} 0 1 1 0 ${isDashboard ? '' : '-'}${r * 2}\n          `\n})\n\nconst perimeter = computed(() => 2 * Math.PI * radius.value)\n\nconst rate = computed(() => (props.type === 'dashboard' ? 0.75 : 1))\n\nconst strokeDashoffset = computed(() => {\n  const offset = (-1 * perimeter.value * (1 - rate.value)) / 2\n  return `${offset}px`\n})\n\nconst trailPathStyle = computed<CSSProperties>(() => ({\n  strokeDasharray: `${perimeter.value * rate.value}px, ${perimeter.value}px`,\n  strokeDashoffset: strokeDashoffset.value,\n}))\n\nconst circlePathStyle = computed<CSSProperties>(() => ({\n  strokeDasharray: `${\n    perimeter.value * rate.value * (props.percentage / 100)\n  }px, ${perimeter.value}px`,\n  strokeDashoffset: strokeDashoffset.value,\n  transition:\n    'stroke-dasharray 0.6s ease 0s, stroke 0.6s ease, opacity ease 0.6s',\n}))\n\nconst stroke = computed(() => {\n  let ret: string\n  if (props.color) {\n    ret = getCurrentColor(props.percentage)\n  } else {\n    ret = STATUS_COLOR_MAP[props.status] || STATUS_COLOR_MAP.default\n  }\n  return ret\n})\n\nconst statusIcon = computed(() => {\n  if (props.status === 'warning') {\n    return WarningFilled\n  }\n  if (props.type === 'line') {\n    return props.status === 'success' ? CircleCheck : CircleClose\n  } else {\n    return props.status === 'success' ? Check : Close\n  }\n})\n\nconst progressTextSize = computed(() => {\n  return props.type === 'line'\n    ? 12 + props.strokeWidth * 0.4\n    : props.width * 0.111111 + 2\n})\n\nconst content = computed(() => props.format(props.percentage))\n\nfunction getColors(color: ProgressColor[]) {\n  const span = 100 / color.length\n  const seriesColors = color.map((seriesColor, index) => {\n    if (isString(seriesColor)) {\n      return {\n        color: seriesColor,\n        percentage: (index + 1) * span,\n      }\n    }\n    return seriesColor\n  })\n  return seriesColors.sort((a, b) => a.percentage - b.percentage)\n}\n\nconst getCurrentColor = (percentage: number) => {\n  const { color } = props\n  if (isFunction(color)) {\n    return color(percentage)\n  } else if (isString(color)) {\n    return color\n  } else {\n    const colors = getColors(color)\n    for (const color of colors) {\n      if (color.percentage > percentage) return color.color\n    }\n    return colors[colors.length - 1]?.color\n  }\n}\n</script>\n"],"names":["useNamespace","computed","barStyle","WarningFilled","CircleCheck","CircleClose","Check","Close","isString","isFunction","_openBlock","_createElementBlock","_normalizeClass"],"mappings":"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"}
+{"version":3,"file":"progress2.js","sources":["../../../../../../packages/components/progress/src/progress.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\nimport type { ExtractPropTypes, SVGAttributes } from 'vue'\nimport type Progress from './progress.vue'\n\nexport type ProgressColor = { color: string; percentage: number }\nexport type ProgressFn = (percentage: number) => string\n\nexport const progressProps = buildProps({\n  /**\n   * @description type of progress bar\n   */\n  type: {\n    type: String,\n    default: 'line',\n    values: ['line', 'circle', 'dashboard'],\n  },\n  /**\n   * @description percentage, required\n   */\n  percentage: {\n    type: Number,\n    default: 0,\n    validator: (val: number): boolean => val >= 0 && val <= 100,\n  },\n  /**\n   * @description the current status of progress bar\n   */\n  status: {\n    type: String,\n    default: '',\n    values: ['', 'success', 'exception', 'warning'],\n  },\n  /**\n   * @description set indeterminate progress\n   */\n  indeterminate: Boolean,\n  /**\n   * @description control the animation duration of indeterminate progress or striped flow progress\n   */\n  duration: {\n    type: Number,\n    default: 3,\n  },\n  /**\n   * @description the width of progress bar\n   */\n  strokeWidth: {\n    type: Number,\n    default: 6,\n  },\n  /**\n   * @description butt/circle/dashboard type shape at the end path\n   */\n  strokeLinecap: {\n    type: definePropType<NonNullable<SVGAttributes['stroke-linecap']>>(String),\n    default: 'round',\n  },\n  /**\n   * @description whether to place the percentage inside progress bar, only works when `type` is 'line'\n   */\n  textInside: Boolean,\n  /**\n   * @description the canvas width of circle progress bar\n   */\n  width: {\n    type: Number,\n    default: 126,\n  },\n  /**\n   * @description whether to show percentage\n   */\n  showText: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description background color of progress bar. Overrides `status` prop\n   */\n  color: {\n    type: definePropType<string | ProgressColor[] | ProgressFn>([\n      String,\n      Array,\n      Function,\n    ]),\n    default: '',\n  },\n  /**\n   * @description stripe over the progress bar's color\n   */\n  striped: Boolean,\n  /**\n   * @description get the stripes to flow\n   */\n  stripedFlow: Boolean,\n  /**\n   * @description custom text format\n   */\n  format: {\n    type: definePropType<ProgressFn>(Function),\n    default: (percentage: number): string => `${percentage}%`,\n  },\n} as const)\n\nexport type ProgressProps = ExtractPropTypes<typeof progressProps>\nexport type ProgressInstance = InstanceType<typeof Progress>\n"],"names":["buildProps","definePropType"],"mappings":";;;;;;AACY,MAAC,aAAa,GAAGA,kBAAU,CAAC;AACxC,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,MAAM;AACnB,IAAI,MAAM,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,WAAW,CAAC;AAC3C,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,IAAI,SAAS,EAAE,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,GAAG;AAC9C,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,IAAI,MAAM,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,CAAC;AACnD,GAAG;AACH,EAAE,aAAa,EAAE,OAAO;AACxB,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,aAAa,EAAE;AACjB,IAAI,IAAI,EAAEC,sBAAc,CAAC,MAAM,CAAC;AAChC,IAAI,OAAO,EAAE,OAAO;AACpB,GAAG;AACH,EAAE,UAAU,EAAE,OAAO;AACrB,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAEA,sBAAc,CAAC;AACzB,MAAM,MAAM;AACZ,MAAM,KAAK;AACX,MAAM,QAAQ;AACd,KAAK,CAAC;AACN,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,OAAO,EAAE,OAAO;AAClB,EAAE,WAAW,EAAE,OAAO;AACtB,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAEA,sBAAc,CAAC,QAAQ,CAAC;AAClC,IAAI,OAAO,EAAE,CAAC,UAAU,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC;AAC7C,GAAG;AACH,CAAC;;;;"}

package/lib/components/roving-focus-group/src/roving-focus-group-impl.js

@@ -23,7 +23,7 @@ const _sfc_main = vue.defineComponent({
     const currentTabbedId = vue.ref((_a = props.currentTabId || props.defaultCurrentTabId) != null ? _a : null);
     const isBackingOut = vue.ref(false);
     const isClickFocus = vue.ref(false);
-    const rovingFocusGroupRef = vue.ref(null);
+    const rovingFocusGroupRef = vue.ref();
     const { getItems } = vue.inject(rovingFocusGroup.ROVING_FOCUS_COLLECTION_INJECTION_KEY, void 0);
     const rovingFocusGroupRootStyle = vue.computed(() => {
       return [

package/lib/components/roving-focus-group/src/roving-focus-group-impl.js.map

@@ -1 +1 @@
-{"version":3,"file":"roving-focus-group-impl.js","sources":["../../../../../../packages/components/roving-focus-group/src/roving-focus-group-impl.vue"],"sourcesContent":["<template>\n  <slot />\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  provide,\n  readonly,\n  ref,\n  toRef,\n  unref,\n  watch,\n} from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport { composeEventHandlers } from '@element-plus/utils'\nimport {\n  ROVING_FOCUS_COLLECTION_INJECTION_KEY,\n  rovingFocusGroupProps,\n} from './roving-focus-group'\nimport { ROVING_FOCUS_GROUP_INJECTION_KEY } from './tokens'\nimport { focusFirst } from './utils'\n\nimport type { StyleValue } from 'vue'\n\nconst CURRENT_TAB_ID_CHANGE_EVT = 'currentTabIdChange'\n\nconst ENTRY_FOCUS_EVT = 'rovingFocusGroup.entryFocus'\nconst EVT_OPTS: EventInit = { bubbles: false, cancelable: true }\nexport default defineComponent({\n  name: 'ElRovingFocusGroupImpl',\n  inheritAttrs: false,\n  props: rovingFocusGroupProps,\n  emits: [CURRENT_TAB_ID_CHANGE_EVT, 'entryFocus'],\n  setup(props, { emit }) {\n    const currentTabbedId = ref<string | null>(\n      (props.currentTabId || props.defaultCurrentTabId) ?? null\n    )\n    const isBackingOut = ref(false)\n    const isClickFocus = ref(false)\n    const rovingFocusGroupRef = ref<HTMLElement | null>(null)\n    const { getItems } = inject(\n      ROVING_FOCUS_COLLECTION_INJECTION_KEY,\n      undefined\n    )!\n    const rovingFocusGroupRootStyle = computed(() => {\n      // casting to any for fix compiler error since HTMLElement.StyleValue does not\n      // support CSSProperties\n      return [\n        {\n          outline: 'none',\n        },\n        props.style as StyleValue,\n      ] as any\n    })\n\n    const onItemFocus = (tabbedId: string) => {\n      emit(CURRENT_TAB_ID_CHANGE_EVT, tabbedId)\n    }\n\n    const onItemShiftTab = () => {\n      isBackingOut.value = true\n    }\n\n    const onMousedown = composeEventHandlers(\n      (e: Event) => {\n        props.onMousedown?.(e)\n      },\n      () => {\n        isClickFocus.value = true\n      }\n    )\n\n    const onFocus = composeEventHandlers(\n      (e: FocusEvent) => {\n        props.onFocus?.(e)\n      },\n      (e) => {\n        const isKeyboardFocus = !unref(isClickFocus)\n        const { target, currentTarget } = e\n        if (\n          target === currentTarget &&\n          isKeyboardFocus &&\n          !unref(isBackingOut)\n        ) {\n          const entryFocusEvt = new Event(ENTRY_FOCUS_EVT, EVT_OPTS)\n          currentTarget?.dispatchEvent(entryFocusEvt)\n\n          if (!entryFocusEvt.defaultPrevented) {\n            const items = getItems<{\n              id: string\n              focusable: boolean\n              active: boolean\n            }>().filter((item) => item.focusable)\n            const activeItem = items.find((item) => item.active)\n            const currentItem = items.find(\n              (item) => item.id === unref(currentTabbedId)\n            )\n            const candidates = [activeItem!, currentItem!, ...items].filter(\n              Boolean\n            )\n            const candidateNodes = candidates.map((item) => item.ref!)\n            focusFirst(candidateNodes)\n          }\n        }\n\n        isClickFocus.value = false\n      }\n    )\n\n    const onBlur = composeEventHandlers(\n      (e: Event) => {\n        props.onBlur?.(e)\n      },\n      () => {\n        isBackingOut.value = false\n      }\n    )\n\n    const handleEntryFocus = (...args: any[]) => {\n      emit('entryFocus', ...args)\n    }\n\n    provide(ROVING_FOCUS_GROUP_INJECTION_KEY, {\n      currentTabbedId: readonly(currentTabbedId),\n      loop: toRef(props, 'loop'),\n      tabIndex: computed(() => {\n        return unref(isBackingOut) ? -1 : 0\n      }),\n      rovingFocusGroupRef,\n      rovingFocusGroupRootStyle,\n      orientation: toRef(props, 'orientation'),\n      dir: toRef(props, 'dir'),\n      onItemFocus,\n      onItemShiftTab,\n      onBlur,\n      onFocus,\n      onMousedown,\n    })\n\n    watch(\n      () => props.currentTabId,\n      (val) => {\n        currentTabbedId.value = val ?? null\n      }\n    )\n\n    useEventListener(rovingFocusGroupRef, ENTRY_FOCUS_EVT, handleEntryFocus)\n  },\n})\n</script>\n"],"names":["defineComponent","rovingFocusGroupProps","ref","inject","ROVING_FOCUS_COLLECTION_INJECTION_KEY","computed","composeEventHandlers","unref","focusFirst","provide","ROVING_FOCUS_GROUP_INJECTION_KEY","readonly","toRef","watch","useEventListener","_renderSlot","_export_sfc"],"mappings":"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"}
+{"version":3,"file":"roving-focus-group-impl.js","sources":["../../../../../../packages/components/roving-focus-group/src/roving-focus-group-impl.vue"],"sourcesContent":["<template>\n  <slot />\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  provide,\n  readonly,\n  ref,\n  toRef,\n  unref,\n  watch,\n} from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport { composeEventHandlers } from '@element-plus/utils'\nimport {\n  ROVING_FOCUS_COLLECTION_INJECTION_KEY,\n  rovingFocusGroupProps,\n} from './roving-focus-group'\nimport { ROVING_FOCUS_GROUP_INJECTION_KEY } from './tokens'\nimport { focusFirst } from './utils'\n\nimport type { StyleValue } from 'vue'\n\nconst CURRENT_TAB_ID_CHANGE_EVT = 'currentTabIdChange'\n\nconst ENTRY_FOCUS_EVT = 'rovingFocusGroup.entryFocus'\nconst EVT_OPTS: EventInit = { bubbles: false, cancelable: true }\nexport default defineComponent({\n  name: 'ElRovingFocusGroupImpl',\n  inheritAttrs: false,\n  props: rovingFocusGroupProps,\n  emits: [CURRENT_TAB_ID_CHANGE_EVT, 'entryFocus'],\n  setup(props, { emit }) {\n    const currentTabbedId = ref<string | null>(\n      (props.currentTabId || props.defaultCurrentTabId) ?? null\n    )\n    const isBackingOut = ref(false)\n    const isClickFocus = ref(false)\n    const rovingFocusGroupRef = ref<HTMLElement>()\n    const { getItems } = inject(\n      ROVING_FOCUS_COLLECTION_INJECTION_KEY,\n      undefined\n    )!\n    const rovingFocusGroupRootStyle = computed(() => {\n      // casting to any for fix compiler error since HTMLElement.StyleValue does not\n      // support CSSProperties\n      return [\n        {\n          outline: 'none',\n        },\n        props.style as StyleValue,\n      ] as any\n    })\n\n    const onItemFocus = (tabbedId: string) => {\n      emit(CURRENT_TAB_ID_CHANGE_EVT, tabbedId)\n    }\n\n    const onItemShiftTab = () => {\n      isBackingOut.value = true\n    }\n\n    const onMousedown = composeEventHandlers(\n      (e: Event) => {\n        props.onMousedown?.(e)\n      },\n      () => {\n        isClickFocus.value = true\n      }\n    )\n\n    const onFocus = composeEventHandlers(\n      (e: FocusEvent) => {\n        props.onFocus?.(e)\n      },\n      (e) => {\n        const isKeyboardFocus = !unref(isClickFocus)\n        const { target, currentTarget } = e\n        if (\n          target === currentTarget &&\n          isKeyboardFocus &&\n          !unref(isBackingOut)\n        ) {\n          const entryFocusEvt = new Event(ENTRY_FOCUS_EVT, EVT_OPTS)\n          currentTarget?.dispatchEvent(entryFocusEvt)\n\n          if (!entryFocusEvt.defaultPrevented) {\n            const items = getItems<{\n              id: string\n              focusable: boolean\n              active: boolean\n            }>().filter((item) => item.focusable)\n            const activeItem = items.find((item) => item.active)\n            const currentItem = items.find(\n              (item) => item.id === unref(currentTabbedId)\n            )\n            const candidates = [activeItem!, currentItem!, ...items].filter(\n              Boolean\n            )\n            const candidateNodes = candidates.map((item) => item.ref!)\n            focusFirst(candidateNodes)\n          }\n        }\n\n        isClickFocus.value = false\n      }\n    )\n\n    const onBlur = composeEventHandlers(\n      (e: Event) => {\n        props.onBlur?.(e)\n      },\n      () => {\n        isBackingOut.value = false\n      }\n    )\n\n    const handleEntryFocus = (...args: any[]) => {\n      emit('entryFocus', ...args)\n    }\n\n    provide(ROVING_FOCUS_GROUP_INJECTION_KEY, {\n      currentTabbedId: readonly(currentTabbedId),\n      loop: toRef(props, 'loop'),\n      tabIndex: computed(() => {\n        return unref(isBackingOut) ? -1 : 0\n      }),\n      rovingFocusGroupRef,\n      rovingFocusGroupRootStyle,\n      orientation: toRef(props, 'orientation'),\n      dir: toRef(props, 'dir'),\n      onItemFocus,\n      onItemShiftTab,\n      onBlur,\n      onFocus,\n      onMousedown,\n    })\n\n    watch(\n      () => props.currentTabId,\n      (val) => {\n        currentTabbedId.value = val ?? null\n      }\n    )\n\n    useEventListener(rovingFocusGroupRef, ENTRY_FOCUS_EVT, handleEntryFocus)\n  },\n})\n</script>\n"],"names":["defineComponent","rovingFocusGroupProps","ref","ROVING_FOCUS_COLLECTION_INJECTION_KEY","computed","composeEventHandlers","unref","focusFirst","provide","ROVING_FOCUS_GROUP_INJECTION_KEY","readonly","toRef","watch","useEventListener","_renderSlot","_export_sfc"],"mappings":"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"}

package/lib/components/roving-focus-group/src/roving-focus-item.js

@@ -30,7 +30,7 @@ const _sfc_main = vue.defineComponent({
     const { currentTabbedId, loop, onItemFocus, onItemShiftTab } = vue.inject(tokens.ROVING_FOCUS_GROUP_INJECTION_KEY, void 0);
     const { getItems } = vue.inject(rovingFocusGroup.ROVING_FOCUS_COLLECTION_INJECTION_KEY, void 0);
     const id = index.useId();
-    const rovingFocusGroupItemRef = vue.ref(null);
+    const rovingFocusGroupItemRef = vue.ref();
     const handleMousedown = event.composeEventHandlers((e) => {
       emit("mousedown", e);
     }, (e) => {

package/lib/components/roving-focus-group/src/roving-focus-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"roving-focus-item.js","sources":["../../../../../../packages/components/roving-focus-group/src/roving-focus-item.vue"],"sourcesContent":["<template>\n  <el-roving-focus-collection-item\n    :id=\"id\"\n    :focusable=\"focusable\"\n    :active=\"active\"\n  >\n    <slot />\n  </el-roving-focus-collection-item>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  nextTick,\n  provide,\n  ref,\n  unref,\n} from 'vue'\nimport { useId } from '@element-plus/hooks'\nimport { composeEventHandlers } from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport {\n  ElCollectionItem as ElRovingFocusCollectionItem,\n  ROVING_FOCUS_COLLECTION_INJECTION_KEY,\n} from './roving-focus-group'\nimport {\n  ROVING_FOCUS_GROUP_INJECTION_KEY,\n  ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY,\n} from './tokens'\nimport { focusFirst, getFocusIntent, reorderArray } from './utils'\n\nexport default defineComponent({\n  components: {\n    ElRovingFocusCollectionItem,\n  },\n  props: {\n    focusable: {\n      type: Boolean,\n      default: true,\n    },\n    active: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: ['mousedown', 'focus', 'keydown'],\n  setup(props, { emit }) {\n    const { currentTabbedId, loop, onItemFocus, onItemShiftTab } = inject(\n      ROVING_FOCUS_GROUP_INJECTION_KEY,\n      undefined\n    )!\n\n    const { getItems } = inject(\n      ROVING_FOCUS_COLLECTION_INJECTION_KEY,\n      undefined\n    )!\n\n    const id = useId()\n    const rovingFocusGroupItemRef = ref<HTMLElement | null>(null)\n\n    const handleMousedown = composeEventHandlers(\n      (e: Event) => {\n        emit('mousedown', e)\n      },\n      (e) => {\n        if (!props.focusable) {\n          e.preventDefault()\n        } else {\n          onItemFocus(unref(id))\n        }\n      }\n    )\n\n    const handleFocus = composeEventHandlers(\n      (e: Event) => {\n        emit('focus', e)\n      },\n      () => {\n        onItemFocus(unref(id))\n      }\n    )\n\n    const handleKeydown = composeEventHandlers(\n      (e: Event) => {\n        emit('keydown', e)\n      },\n      (e) => {\n        const { code, shiftKey, target, currentTarget } = e as KeyboardEvent\n        if (code === EVENT_CODE.tab && shiftKey) {\n          onItemShiftTab()\n          return\n        }\n        if (target !== currentTarget) return\n        const focusIntent = getFocusIntent(e as KeyboardEvent)\n\n        if (focusIntent) {\n          e.preventDefault()\n          const items = getItems<typeof props>().filter(\n            (item) => item.focusable\n          )\n\n          let elements = items.map((item) => item.ref!)\n\n          switch (focusIntent) {\n            case 'last': {\n              elements.reverse()\n              break\n            }\n            case 'prev':\n            case 'next': {\n              if (focusIntent === 'prev') {\n                elements.reverse()\n              }\n              const currentIdx = elements.indexOf(currentTarget as HTMLElement)\n              elements = loop.value\n                ? reorderArray(elements, currentIdx + 1)\n                : elements.slice(currentIdx + 1)\n              break\n            }\n            default: {\n              break\n            }\n          }\n\n          nextTick(() => {\n            focusFirst(elements)\n          })\n        }\n      }\n    )\n\n    const isCurrentTab = computed(() => currentTabbedId.value === unref(id))\n\n    provide(ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY, {\n      rovingFocusGroupItemRef,\n      tabIndex: computed(() => (unref(isCurrentTab) ? 0 : -1)),\n      handleMousedown,\n      handleFocus,\n      handleKeydown,\n    })\n\n    return {\n      id,\n      handleKeydown,\n      handleFocus,\n      handleMousedown,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElRovingFocusCollectionItem","inject","ROVING_FOCUS_GROUP_INJECTION_KEY","ROVING_FOCUS_COLLECTION_INJECTION_KEY","useId","ref","composeEventHandlers","unref","EVENT_CODE","getFocusIntent","reorderArray","nextTick","focusFirst","computed","provide","ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY","_resolveComponent","_createBlock","_withCtx","_renderSlot","_export_sfc"],"mappings":"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"}
+{"version":3,"file":"roving-focus-item.js","sources":["../../../../../../packages/components/roving-focus-group/src/roving-focus-item.vue"],"sourcesContent":["<template>\n  <el-roving-focus-collection-item\n    :id=\"id\"\n    :focusable=\"focusable\"\n    :active=\"active\"\n  >\n    <slot />\n  </el-roving-focus-collection-item>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  nextTick,\n  provide,\n  ref,\n  unref,\n} from 'vue'\nimport { useId } from '@element-plus/hooks'\nimport { composeEventHandlers } from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport {\n  ElCollectionItem as ElRovingFocusCollectionItem,\n  ROVING_FOCUS_COLLECTION_INJECTION_KEY,\n} from './roving-focus-group'\nimport {\n  ROVING_FOCUS_GROUP_INJECTION_KEY,\n  ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY,\n} from './tokens'\nimport { focusFirst, getFocusIntent, reorderArray } from './utils'\n\nexport default defineComponent({\n  components: {\n    ElRovingFocusCollectionItem,\n  },\n  props: {\n    focusable: {\n      type: Boolean,\n      default: true,\n    },\n    active: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: ['mousedown', 'focus', 'keydown'],\n  setup(props, { emit }) {\n    const { currentTabbedId, loop, onItemFocus, onItemShiftTab } = inject(\n      ROVING_FOCUS_GROUP_INJECTION_KEY,\n      undefined\n    )!\n\n    const { getItems } = inject(\n      ROVING_FOCUS_COLLECTION_INJECTION_KEY,\n      undefined\n    )!\n\n    const id = useId()\n    const rovingFocusGroupItemRef = ref<HTMLElement>()\n\n    const handleMousedown = composeEventHandlers(\n      (e: Event) => {\n        emit('mousedown', e)\n      },\n      (e) => {\n        if (!props.focusable) {\n          e.preventDefault()\n        } else {\n          onItemFocus(unref(id))\n        }\n      }\n    )\n\n    const handleFocus = composeEventHandlers(\n      (e: Event) => {\n        emit('focus', e)\n      },\n      () => {\n        onItemFocus(unref(id))\n      }\n    )\n\n    const handleKeydown = composeEventHandlers(\n      (e: Event) => {\n        emit('keydown', e)\n      },\n      (e) => {\n        const { code, shiftKey, target, currentTarget } = e as KeyboardEvent\n        if (code === EVENT_CODE.tab && shiftKey) {\n          onItemShiftTab()\n          return\n        }\n        if (target !== currentTarget) return\n        const focusIntent = getFocusIntent(e as KeyboardEvent)\n\n        if (focusIntent) {\n          e.preventDefault()\n          const items = getItems<typeof props>().filter(\n            (item) => item.focusable\n          )\n\n          let elements = items.map((item) => item.ref!)\n\n          switch (focusIntent) {\n            case 'last': {\n              elements.reverse()\n              break\n            }\n            case 'prev':\n            case 'next': {\n              if (focusIntent === 'prev') {\n                elements.reverse()\n              }\n              const currentIdx = elements.indexOf(currentTarget as HTMLElement)\n              elements = loop.value\n                ? reorderArray(elements, currentIdx + 1)\n                : elements.slice(currentIdx + 1)\n              break\n            }\n            default: {\n              break\n            }\n          }\n\n          nextTick(() => {\n            focusFirst(elements)\n          })\n        }\n      }\n    )\n\n    const isCurrentTab = computed(() => currentTabbedId.value === unref(id))\n\n    provide(ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY, {\n      rovingFocusGroupItemRef,\n      tabIndex: computed(() => (unref(isCurrentTab) ? 0 : -1)),\n      handleMousedown,\n      handleFocus,\n      handleKeydown,\n    })\n\n    return {\n      id,\n      handleKeydown,\n      handleFocus,\n      handleMousedown,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElRovingFocusCollectionItem","inject","ROVING_FOCUS_GROUP_INJECTION_KEY","ROVING_FOCUS_COLLECTION_INJECTION_KEY","useId","ref","composeEventHandlers","unref","EVENT_CODE","getFocusIntent","reorderArray","nextTick","focusFirst","computed","provide","ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY","_resolveComponent","_createBlock","_withCtx","_renderSlot","_export_sfc"],"mappings":"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"}

package/lib/components/roving-focus-group/src/tokens.d.ts

@@ -7,7 +7,7 @@ export type RovingGroupInjectionContext = {
     loop: Ref<ElRovingFocusGroupProps['loop']>;
     orientation: Ref<ElRovingFocusGroupProps['orientation']>;
     tabIndex: Ref<number>;
-    rovingFocusGroupRef: Ref<HTMLElement | null>;
+    rovingFocusGroupRef: Ref<HTMLElement | undefined>;
     rovingFocusGroupRootStyle: Ref<StyleValue>;
     onBlur: EventHandler;
     onFocus: EventHandler<FocusEvent>;
@@ -16,7 +16,7 @@ export type RovingGroupInjectionContext = {
     onItemShiftTab: () => void;
 };
 export type RovingFocusGroupItemInjectionContext = {
-    rovingFocusGroupItemRef: Ref<HTMLElement | null>;
+    rovingFocusGroupItemRef: Ref<HTMLElement | undefined>;
     tabIndex: Ref<number>;
     handleMousedown: EventHandler;
     handleFocus: EventHandler;

package/lib/components/roving-focus-group/src/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sources":["../../../../../../packages/components/roving-focus-group/src/tokens.ts"],"sourcesContent":["import type { InjectionKey, Ref, StyleValue } from 'vue'\nimport type { ElRovingFocusGroupProps } from './roving-focus-group'\n\ntype EventHandler<T = Event> = (e: T) => void\n\nexport type RovingGroupInjectionContext = {\n  currentTabbedId: Ref<string | null>\n  dir: Ref<ElRovingFocusGroupProps['dir']>\n  loop: Ref<ElRovingFocusGroupProps['loop']>\n  orientation: Ref<ElRovingFocusGroupProps['orientation']>\n  tabIndex: Ref<number>\n  rovingFocusGroupRef: Ref<HTMLElement | null>\n  rovingFocusGroupRootStyle: Ref<StyleValue>\n  onBlur: EventHandler\n  onFocus: EventHandler<FocusEvent>\n  onMousedown: EventHandler\n  onItemFocus: (id: string) => void\n  onItemShiftTab: () => void\n}\n\nexport type RovingFocusGroupItemInjectionContext = {\n  rovingFocusGroupItemRef: Ref<HTMLElement | null>\n  tabIndex: Ref<number>\n  handleMousedown: EventHandler\n  handleFocus: EventHandler\n  handleKeydown: EventHandler\n}\n\nexport const ROVING_FOCUS_GROUP_INJECTION_KEY: InjectionKey<RovingGroupInjectionContext> =\n  Symbol('elRovingFocusGroup')\n\nexport const ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY: InjectionKey<RovingFocusGroupItemInjectionContext> =\n  Symbol('elRovingFocusGroupItem')\n"],"names":[],"mappings":";;;;AAAY,MAAC,gCAAgC,GAAG,MAAM,CAAC,oBAAoB,EAAE;AACjE,MAAC,qCAAqC,GAAG,MAAM,CAAC,wBAAwB;;;;;"}
+{"version":3,"file":"tokens.js","sources":["../../../../../../packages/components/roving-focus-group/src/tokens.ts"],"sourcesContent":["import type { InjectionKey, Ref, StyleValue } from 'vue'\nimport type { ElRovingFocusGroupProps } from './roving-focus-group'\n\ntype EventHandler<T = Event> = (e: T) => void\n\nexport type RovingGroupInjectionContext = {\n  currentTabbedId: Ref<string | null>\n  dir: Ref<ElRovingFocusGroupProps['dir']>\n  loop: Ref<ElRovingFocusGroupProps['loop']>\n  orientation: Ref<ElRovingFocusGroupProps['orientation']>\n  tabIndex: Ref<number>\n  rovingFocusGroupRef: Ref<HTMLElement | undefined>\n  rovingFocusGroupRootStyle: Ref<StyleValue>\n  onBlur: EventHandler\n  onFocus: EventHandler<FocusEvent>\n  onMousedown: EventHandler\n  onItemFocus: (id: string) => void\n  onItemShiftTab: () => void\n}\n\nexport type RovingFocusGroupItemInjectionContext = {\n  rovingFocusGroupItemRef: Ref<HTMLElement | undefined>\n  tabIndex: Ref<number>\n  handleMousedown: EventHandler\n  handleFocus: EventHandler\n  handleKeydown: EventHandler\n}\n\nexport const ROVING_FOCUS_GROUP_INJECTION_KEY: InjectionKey<RovingGroupInjectionContext> =\n  Symbol('elRovingFocusGroup')\n\nexport const ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY: InjectionKey<RovingFocusGroupItemInjectionContext> =\n  Symbol('elRovingFocusGroupItem')\n"],"names":[],"mappings":";;;;AAAY,MAAC,gCAAgC,GAAG,MAAM,CAAC,oBAAoB,EAAE;AACjE,MAAC,qCAAqC,GAAG,MAAM,CAAC,wBAAwB;;;;;"}

package/lib/components/scrollbar/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var scrollbar$1 = require('./src/scrollbar2.js');
 var util = require('./src/util.js');
 var scrollbar = require('./src/scrollbar.js');
-var thumb = require('./src/thumb.js');
+var thumb = require('./src/thumb2.js');
 var constants = require('./src/constants.js');
 var install = require('../../utils/vue/install.js');
 

package/lib/components/scrollbar/src/bar2.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
 var util = require('./util.js');
-var thumb = require('./thumb2.js');
+var thumb = require('./thumb.js');
 var bar = require('./bar.js');
 var constants = require('./constants.js');
 var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');

package/lib/components/scrollbar/src/thumb.js

@@ -2,18 +2,136 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var runtime = require('../../../utils/vue/props/runtime.js');
+var vue = require('vue');
+var core = require('@vueuse/core');
+var constants = require('./constants.js');
+var util = require('./util.js');
+var thumb = require('./thumb2.js');
+var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+var index = require('../../../hooks/use-namespace/index.js');
+var error = require('../../../utils/error.js');
 
-const thumbProps = runtime.buildProps({
-  vertical: Boolean,
-  size: String,
-  move: Number,
-  ratio: {
-    type: Number,
-    required: true
-  },
-  always: Boolean
+const COMPONENT_NAME = "Thumb";
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "thumb",
+  props: thumb.thumbProps,
+  setup(__props) {
+    const props = __props;
+    const scrollbar = vue.inject(constants.scrollbarContextKey);
+    const ns = index.useNamespace("scrollbar");
+    if (!scrollbar)
+      error.throwError(COMPONENT_NAME, "can not inject scrollbar context");
+    const instance = vue.ref();
+    const thumb = vue.ref();
+    const thumbState = vue.ref({});
+    const visible = vue.ref(false);
+    let cursorDown = false;
+    let cursorLeave = false;
+    let originalOnSelectStart = core.isClient ? document.onselectstart : null;
+    const bar = vue.computed(() => util.BAR_MAP[props.vertical ? "vertical" : "horizontal"]);
+    const thumbStyle = vue.computed(() => util.renderThumbStyle({
+      size: props.size,
+      move: props.move,
+      bar: bar.value
+    }));
+    const offsetRatio = vue.computed(() => instance.value[bar.value.offset] ** 2 / scrollbar.wrapElement[bar.value.scrollSize] / props.ratio / thumb.value[bar.value.offset]);
+    const clickThumbHandler = (e) => {
+      var _a;
+      e.stopPropagation();
+      if (e.ctrlKey || [1, 2].includes(e.button))
+        return;
+      (_a = window.getSelection()) == null ? void 0 : _a.removeAllRanges();
+      startDrag(e);
+      const el = e.currentTarget;
+      if (!el)
+        return;
+      thumbState.value[bar.value.axis] = el[bar.value.offset] - (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction]);
+    };
+    const clickTrackHandler = (e) => {
+      if (!thumb.value || !instance.value || !scrollbar.wrapElement)
+        return;
+      const offset = Math.abs(e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]);
+      const thumbHalf = thumb.value[bar.value.offset] / 2;
+      const thumbPositionPercentage = (offset - thumbHalf) * 100 * offsetRatio.value / instance.value[bar.value.offset];
+      scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 100;
+    };
+    const startDrag = (e) => {
+      e.stopImmediatePropagation();
+      cursorDown = true;
+      document.addEventListener("mousemove", mouseMoveDocumentHandler);
+      document.addEventListener("mouseup", mouseUpDocumentHandler);
+      originalOnSelectStart = document.onselectstart;
+      document.onselectstart = () => false;
+    };
+    const mouseMoveDocumentHandler = (e) => {
+      if (!instance.value || !thumb.value)
+        return;
+      if (cursorDown === false)
+        return;
+      const prevPage = thumbState.value[bar.value.axis];
+      if (!prevPage)
+        return;
+      const offset = (instance.value.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1;
+      const thumbClickPosition = thumb.value[bar.value.offset] - prevPage;
+      const thumbPositionPercentage = (offset - thumbClickPosition) * 100 * offsetRatio.value / instance.value[bar.value.offset];
+      scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 100;
+    };
+    const mouseUpDocumentHandler = () => {
+      cursorDown = false;
+      thumbState.value[bar.value.axis] = 0;
+      document.removeEventListener("mousemove", mouseMoveDocumentHandler);
+      document.removeEventListener("mouseup", mouseUpDocumentHandler);
+      restoreOnselectstart();
+      if (cursorLeave)
+        visible.value = false;
+    };
+    const mouseMoveScrollbarHandler = () => {
+      cursorLeave = false;
+      visible.value = !!props.size;
+    };
+    const mouseLeaveScrollbarHandler = () => {
+      cursorLeave = true;
+      visible.value = cursorDown;
+    };
+    vue.onBeforeUnmount(() => {
+      restoreOnselectstart();
+      document.removeEventListener("mouseup", mouseUpDocumentHandler);
+    });
+    const restoreOnselectstart = () => {
+      if (document.onselectstart !== originalOnSelectStart)
+        document.onselectstart = originalOnSelectStart;
+    };
+    core.useEventListener(vue.toRef(scrollbar, "scrollbarElement"), "mousemove", mouseMoveScrollbarHandler);
+    core.useEventListener(vue.toRef(scrollbar, "scrollbarElement"), "mouseleave", mouseLeaveScrollbarHandler);
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.Transition, {
+        name: vue.unref(ns).b("fade"),
+        persisted: ""
+      }, {
+        default: vue.withCtx(() => [
+          vue.withDirectives(vue.createElementVNode("div", {
+            ref_key: "instance",
+            ref: instance,
+            class: vue.normalizeClass([vue.unref(ns).e("bar"), vue.unref(ns).is(vue.unref(bar).key)]),
+            onMousedown: clickTrackHandler
+          }, [
+            vue.createElementVNode("div", {
+              ref_key: "thumb",
+              ref: thumb,
+              class: vue.normalizeClass(vue.unref(ns).e("thumb")),
+              style: vue.normalizeStyle(vue.unref(thumbStyle)),
+              onMousedown: clickThumbHandler
+            }, null, 38)
+          ], 34), [
+            [vue.vShow, _ctx.always || visible.value]
+          ])
+        ]),
+        _: 1
+      }, 8, ["name"]);
+    };
+  }
 });
+var Thumb = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "thumb.vue"]]);
 
-exports.thumbProps = thumbProps;
+exports["default"] = Thumb;
 //# sourceMappingURL=thumb.js.map