element-ps 2.0.25 → 2.0.28

package/lib/components/radio/src/radio2.js

@@ -3,73 +3,82 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
-require('../../../utils/index.js');
-require('../../../constants/index.js');
-require('../../../tokens/index.js');
 require('../../../hooks/index.js');
-var props = require('../../../utils/vue/props.js');
-var index = require('../../../hooks/use-common-props/index.js');
-var event = require('../../../constants/event.js');
-var shared = require('@vue/shared');
-var core = require('@vueuse/core');
-var radio = require('../../../tokens/radio.js');
+var radio = require('./radio.js');
+var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+var index = require('../../../hooks/use-namespace/index.js');
 
-const radioPropsBase = props.buildProps({
-  size: index.useSizeProp,
-  disabled: Boolean,
-  label: {
-    type: [String, Number, Boolean],
-    default: ""
+const _sfc_main = vue.defineComponent({
+  name: "PsRadio",
+  props: radio.radioProps,
+  setup(props, { emit }) {
+    const ns = index.useNamespace("radio");
+    const { radioRef, isGroup, focus, size, disabled, tabIndex, modelValue } = radio.useRadio(props, emit);
+    return {
+      ns,
+      focus,
+      isGroup,
+      modelValue,
+      tabIndex,
+      size,
+      disabled,
+      radioRef
+    };
   }
 });
-const radioProps = props.buildProps({
-  ...radioPropsBase,
-  modelValue: {
-    type: [String, Number, Boolean],
-    default: ""
-  },
-  name: {
-    type: String,
-    default: ""
-  },
-  border: Boolean
-});
-const radioEmits = {
-  [event.UPDATE_MODEL_EVENT]: (val) => shared.isString(val) || core.isNumber(val) || core.isBoolean(val),
-  change: (val) => shared.isString(val) || core.isNumber(val) || core.isBoolean(val)
-};
-const useRadio = (props, emit) => {
-  const radioRef = vue.ref();
-  const radioGroup = vue.inject(radio.radioGroupKey, void 0);
-  const isGroup = vue.computed(() => !!radioGroup);
-  const modelValue = vue.computed({
-    get() {
-      return isGroup.value ? radioGroup.modelValue : props.modelValue;
-    },
-    set(val) {
-      radioRef.value.checked = props.modelValue === props.label;
-    }
-  });
-  const size = index.useSize(vue.computed(() => radioGroup == null ? void 0 : radioGroup.size));
-  const disabled = index.useDisabled(vue.computed(() => radioGroup == null ? void 0 : radioGroup.disabled));
-  const focus = vue.ref(false);
-  const tabIndex = vue.computed(() => {
-    return disabled.value || isGroup.value && modelValue.value !== props.label ? -1 : 0;
-  });
-  return {
-    radioRef,
-    isGroup,
-    radioGroup,
-    focus,
-    size,
-    disabled,
-    tabIndex,
-    modelValue
-  };
-};
+const _hoisted_1 = ["aria-checked", "aria-disabled", "tabindex"];
+const _hoisted_2 = ["value", "name", "disabled"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("label", {
+    class: vue.normalizeClass([
+      _ctx.ns.b(),
+      _ctx.ns.is("disabled", _ctx.disabled),
+      _ctx.ns.is("focus", _ctx.focus),
+      _ctx.ns.is("bordered", _ctx.border),
+      _ctx.ns.is("checked", _ctx.modelValue === _ctx.label),
+      _ctx.ns.m(_ctx.size)
+    ]),
+    role: "radio",
+    "aria-checked": _ctx.modelValue === _ctx.label,
+    "aria-disabled": _ctx.disabled,
+    tabindex: _ctx.tabIndex
+  }, [
+    vue.createElementVNode("span", {
+      class: vue.normalizeClass([
+        _ctx.ns.e("input"),
+        _ctx.ns.is("disabled", _ctx.disabled),
+        _ctx.ns.is("checked", _ctx.modelValue === _ctx.label)
+      ])
+    }, [
+      vue.createElementVNode("span", {
+        class: vue.normalizeClass(_ctx.ns.e("inner"))
+      }, null, 2),
+      vue.withDirectives(vue.createElementVNode("input", {
+        ref: "radioRef",
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.modelValue = $event),
+        class: vue.normalizeClass(_ctx.ns.e("original")),
+        value: _ctx.label,
+        type: "radio",
+        "aria-hidden": "true",
+        name: _ctx.name,
+        disabled: _ctx.disabled,
+        tabindex: "-1"
+      }, null, 10, _hoisted_2), [
+        [vue.vModelRadio, _ctx.modelValue]
+      ])
+    ], 2),
+    vue.createElementVNode("span", {
+      class: vue.normalizeClass(_ctx.ns.e("label")),
+      onKeydown: _cache[1] || (_cache[1] = vue.withModifiers(() => {
+      }, ["stop"]))
+    }, [
+      vue.renderSlot(_ctx.$slots, "default", {}, () => [
+        vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
+      ])
+    ], 34)
+  ], 10, _hoisted_1);
+}
+var Radio = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "/Users/meng/workspace/element-ps/packages/components/radio/src/radio.vue"]]);
 
-exports.radioEmits = radioEmits;
-exports.radioProps = radioProps;
-exports.radioPropsBase = radioPropsBase;
-exports.useRadio = useRadio;
+exports["default"] = Radio;
 //# sourceMappingURL=radio2.js.map

package/lib/components/radio/src/radio2.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio2.js","sources":["../../../../../../packages/components/radio/src/radio.ts"],"sourcesContent":["import { computed, inject, ref } from 'vue'\nimport { buildProps, isBoolean, isNumber, isString } from '@element-ps/utils'\nimport { UPDATE_MODEL_EVENT } from '@element-ps/constants'\nimport { radioGroupKey } from '@element-ps/tokens'\nimport { useDisabled, useSize, useSizeProp } from '@element-ps/hooks'\nimport type { ExtractPropTypes, SetupContext } from 'vue'\n\nexport const radioPropsBase = buildProps({\n  size: useSizeProp,\n  disabled: Boolean,\n  label: {\n    type: [String, Number, Boolean],\n    default: '',\n  },\n})\nexport const radioProps = buildProps({\n  ...radioPropsBase,\n  modelValue: {\n    type: [String, Number, Boolean],\n    default: '',\n  },\n  name: {\n    type: String,\n    default: '',\n  },\n  border: Boolean,\n} as const)\nexport type RadioProps = ExtractPropTypes<typeof radioProps>\n\nexport const radioEmits = {\n  [UPDATE_MODEL_EVENT]: (val: string | number | boolean) =>\n    isString(val) || isNumber(val) || isBoolean(val),\n  change: (val: string | number | boolean) =>\n    isString(val) || isNumber(val) || isBoolean(val),\n}\nexport type RadioEmits = typeof radioEmits\n\nexport const useRadio = (\n  props: { label: RadioProps['label']; modelValue?: RadioProps['modelValue'] },\n  emit: SetupContext<RadioEmits>['emit']\n) => {\n  const radioRef = ref<HTMLInputElement>()\n  const radioGroup = inject(radioGroupKey, undefined)\n  const isGroup = computed(() => !!radioGroup)\n  const modelValue = computed<RadioProps['modelValue']>({\n    get() {\n      return isGroup.value ? radioGroup!.modelValue : props.modelValue!\n    },\n    set(val) {\n      radioRef.value!.checked = props.modelValue === props.label\n    },\n  })\n\n  const size = useSize(computed(() => radioGroup?.size))\n  const disabled = useDisabled(computed(() => radioGroup?.disabled))\n  const focus = ref(false)\n  const tabIndex = computed(() => {\n    return disabled.value || (isGroup.value && modelValue.value !== props.label)\n      ? -1\n      : 0\n  })\n\n  return {\n    radioRef,\n    isGroup,\n    radioGroup,\n    focus,\n    size,\n    disabled,\n    tabIndex,\n    modelValue,\n  }\n}\n"],"names":["buildProps","useSizeProp","UPDATE_MODEL_EVENT","isString","isNumber","isBoolean","ref","inject","radioGroupKey","computed","useSize","useDisabled"],"mappings":";;;;;;;;;;;;;;;;AAKY,MAAC,cAAc,GAAGA,gBAAU,CAAC;AACzC,EAAE,IAAI,EAAEC,iBAAW;AACnB,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC;AACnC,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,CAAC,EAAE;AACS,MAAC,UAAU,GAAGD,gBAAU,CAAC;AACrC,EAAE,GAAG,cAAc;AACnB,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC;AACnC,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,MAAM,EAAE,OAAO;AACjB,CAAC,EAAE;AACS,MAAC,UAAU,GAAG;AAC1B,EAAE,CAACE,wBAAkB,GAAG,CAAC,GAAG,KAAKC,eAAQ,CAAC,GAAG,CAAC,IAAIC,aAAQ,CAAC,GAAG,CAAC,IAAIC,cAAS,CAAC,GAAG,CAAC;AACjF,EAAE,MAAM,EAAE,CAAC,GAAG,KAAKF,eAAQ,CAAC,GAAG,CAAC,IAAIC,aAAQ,CAAC,GAAG,CAAC,IAAIC,cAAS,CAAC,GAAG,CAAC;AACnE,EAAE;AACU,MAAC,QAAQ,GAAG,CAAC,KAAK,EAAE,IAAI,KAAK;AACzC,EAAE,MAAM,QAAQ,GAAGC,OAAG,EAAE,CAAC;AACzB,EAAE,MAAM,UAAU,GAAGC,UAAM,CAACC,mBAAa,EAAE,KAAK,CAAC,CAAC,CAAC;AACnD,EAAE,MAAM,OAAO,GAAGC,YAAQ,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC;AAC/C,EAAE,MAAM,UAAU,GAAGA,YAAQ,CAAC;AAC9B,IAAI,GAAG,GAAG;AACV,MAAM,OAAO,OAAO,CAAC,KAAK,GAAG,UAAU,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC;AACtE,KAAK;AACL,IAAI,GAAG,CAAC,GAAG,EAAE;AACb,MAAM,QAAQ,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,UAAU,KAAK,KAAK,CAAC,KAAK,CAAC;AAChE,KAAK;AACL,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,IAAI,GAAGC,aAAO,CAACD,YAAQ,CAAC,MAAM,UAAU,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;AACtF,EAAE,MAAM,QAAQ,GAAGE,iBAAW,CAACF,YAAQ,CAAC,MAAM,UAAU,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC;AAClG,EAAE,MAAM,KAAK,GAAGH,OAAG,CAAC,KAAK,CAAC,CAAC;AAC3B,EAAE,MAAM,QAAQ,GAAGG,YAAQ,CAAC,MAAM;AAClC,IAAI,OAAO,QAAQ,CAAC,KAAK,IAAI,OAAO,CAAC,KAAK,IAAI,UAAU,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;AACxF,GAAG,CAAC,CAAC;AACL,EAAE,OAAO;AACT,IAAI,QAAQ;AACZ,IAAI,OAAO;AACX,IAAI,UAAU;AACd,IAAI,KAAK;AACT,IAAI,IAAI;AACR,IAAI,QAAQ;AACZ,IAAI,QAAQ;AACZ,IAAI,UAAU;AACd,GAAG,CAAC;AACJ;;;;;;;"}
+{"version":3,"file":"radio2.js","sources":["../../../../../../packages/components/radio/src/radio.vue"],"sourcesContent":["<template>\n  <label\n    :class=\"[\n      ns.b(),\n      ns.is('disabled', disabled),\n      ns.is('focus', focus),\n      ns.is('bordered', border),\n      ns.is('checked', modelValue === label),\n      ns.m(size),\n    ]\"\n    role=\"radio\"\n    :aria-checked=\"modelValue === label\"\n    :aria-disabled=\"disabled\"\n    :tabindex=\"tabIndex\"\n  >\n    <span\n      :class=\"[\n        ns.e('input'),\n        ns.is('disabled', disabled),\n        ns.is('checked', modelValue === label),\n      ]\"\n    >\n      <span :class=\"ns.e('inner')\" />\n      <input\n        ref=\"radioRef\"\n        v-model=\"modelValue\"\n        :class=\"ns.e('original')\"\n        :value=\"label\"\n        type=\"radio\"\n        aria-hidden=\"true\"\n        :name=\"name\"\n        :disabled=\"disabled\"\n        tabindex=\"-1\"\n      />\n    </span>\n    <span :class=\"ns.e('label')\" @keydown.stop>\n      <slot>\n        {{ label }}\n      </slot>\n    </span>\n  </label>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useNamespace } from '@element-ps/hooks'\nimport { radioProps, useRadio } from './radio'\n\nexport default defineComponent({\n  name: 'PsRadio',\n  props: radioProps,\n\n  setup(props, { emit }) {\n    const ns = useNamespace('radio')\n    const { radioRef, isGroup, focus, size, disabled, tabIndex, modelValue } =\n      useRadio(props, emit)\n\n    return {\n      ns,\n      focus,\n      isGroup,\n      modelValue,\n      tabIndex,\n      size,\n      disabled,\n      radioRef,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","radioProps","useNamespace","useRadio","_createElementBlock","_normalizeClass","_createElementVNode","_withModifiers","_renderSlot","_createTextVNode","_toDisplayString"],"mappings":"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"}

package/lib/components/roving-focus-group/index.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var rovingFocusGroup = require('./src/roving-focus-group.js');
+var rovingFocusGroup = require('./src/roving-focus-group2.js');
 var rovingFocusItem = require('./src/roving-focus-item.js');
 var tokens = require('./src/tokens.js');
 var utils = require('./src/utils.js');
-var rovingFocusGroup$1 = require('./src/roving-focus-group2.js');
+var rovingFocusGroup$1 = require('./src/roving-focus-group.js');
 
 
 

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
-var rovingFocusGroup = require('./roving-focus-group2.js');
+var rovingFocusGroup = require('./roving-focus-group.js');
 var tokens = require('./tokens.js');
 var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
 

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

@@ -2,34 +2,40 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var vue = require('vue');
-var rovingFocusGroupImpl = require('./roving-focus-group-impl.js');
-var rovingFocusGroup = require('./roving-focus-group2.js');
-var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+require('../../../utils/index.js');
+require('../../collection/index.js');
+var props = require('../../../utils/vue/props.js');
+var collection = require('../../collection/src/collection.js');
 
-const _sfc_main = vue.defineComponent({
-  name: "PsRovingFocusGroup",
-  components: {
-    PsFocusGroupCollection: rovingFocusGroup.PsCollection,
-    PsRovingFocusGroupImpl: rovingFocusGroupImpl["default"]
-  }
+const rovingFocusGroupProps = props.buildProps({
+  style: { type: props.definePropType([String, Array, Object]) },
+  currentTabId: {
+    type: props.definePropType(String)
+  },
+  defaultCurrentTabId: String,
+  loop: Boolean,
+  dir: {
+    type: String,
+    values: ["ltr", "rtl"],
+    default: "ltr"
+  },
+  orientation: {
+    type: props.definePropType(String)
+  },
+  onBlur: Function,
+  onFocus: Function,
+  onMousedown: Function
 });
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_ps_roving_focus_group_impl = vue.resolveComponent("ps-roving-focus-group-impl");
-  const _component_ps_focus_group_collection = vue.resolveComponent("ps-focus-group-collection");
-  return vue.openBlock(), vue.createBlock(_component_ps_focus_group_collection, null, {
-    default: vue.withCtx(() => [
-      vue.createVNode(_component_ps_roving_focus_group_impl, vue.normalizeProps(vue.guardReactiveProps(_ctx.$attrs)), {
-        default: vue.withCtx(() => [
-          vue.renderSlot(_ctx.$slots, "default")
-        ]),
-        _: 3
-      }, 16)
-    ]),
-    _: 3
-  });
-}
-var PsRovingFocusGroup = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "/Users/meng/workspace/element-ps/packages/components/roving-focus-group/src/roving-focus-group.vue"]]);
+const {
+  PsCollection,
+  PsCollectionItem,
+  COLLECTION_INJECTION_KEY,
+  COLLECTION_ITEM_INJECTION_KEY
+} = collection.createCollectionWithScope("RovingFocusGroup");
 
-exports["default"] = PsRovingFocusGroup;
+exports.PsCollection = PsCollection;
+exports.PsCollectionItem = PsCollectionItem;
+exports.ROVING_FOCUS_COLLECTION_INJECTION_KEY = COLLECTION_INJECTION_KEY;
+exports.ROVING_FOCUS_ITEM_COLLECTION_INJECTION_KEY = COLLECTION_ITEM_INJECTION_KEY;
+exports.rovingFocusGroupProps = rovingFocusGroupProps;
 //# sourceMappingURL=roving-focus-group.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"roving-focus-group.js","sources":["../../../../../../packages/components/roving-focus-group/src/roving-focus-group.vue"],"sourcesContent":["<template>\n  <ps-focus-group-collection>\n    <ps-roving-focus-group-impl v-bind=\"$attrs\">\n      <slot />\n    </ps-roving-focus-group-impl>\n  </ps-focus-group-collection>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport PsRovingFocusGroupImpl from './roving-focus-group-impl.vue'\nimport { PsCollection as PsFocusGroupCollection } from './roving-focus-group'\n\nexport default defineComponent({\n  name: 'PsRovingFocusGroup',\n  components: {\n    PsFocusGroupCollection,\n    PsRovingFocusGroupImpl,\n  },\n})\n</script>\n"],"names":["defineComponent","PsFocusGroupCollection","PsRovingFocusGroupImpl","_createBlock","_withCtx","_createVNode","_renderSlot"],"mappings":";;;;;;;;;AAaA,MAAK,YAAaA,mBAAa,CAAA;AAAA,EAC7B,IAAM,EAAA,oBAAA;AAAA,EACN,UAAY,EAAA;AAAA,4BACVC,6BAAA;AAAA,4BACAC,+BAAA;AAAA,GACF;AACF,CAAC,CAAA,CAAA;;;;0BAlBCC,eAI4B,CAAA,oCAAA,EAAA,IAAA,EAAA;AAAA,IAAA,OAAA,EAAAC,WAAA,CAH1B,MAE6B;AAAA,MAF7BC,eAAA,CAE6B,iFAFO,IAAM,CAAA,MAAA,CAAA,CAAA,EAAA;AAAA,QAAA,OAAA,EAAAD,WAAA,CACxC,MAAQ;AAAA,UAARE,cAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,SAAA,CAAA;;;;;;;;;;;"}
+{"version":3,"file":"roving-focus-group.js","sources":["../../../../../../packages/components/roving-focus-group/src/roving-focus-group.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-ps/utils'\nimport { createCollectionWithScope } from '@element-ps/components/collection'\nimport type { ExtractPropTypes, HTMLAttributes, StyleValue } from 'vue'\n\nexport const rovingFocusGroupProps = buildProps({\n  style: { type: definePropType<StyleValue>([String, Array, Object]) },\n  currentTabId: {\n    type: definePropType<string | null>(String),\n  },\n  defaultCurrentTabId: String,\n  loop: Boolean,\n  dir: {\n    type: String, // left for direction support\n    values: ['ltr', 'rtl'],\n    default: 'ltr',\n  },\n  orientation: {\n    // left for orientation support\n    type: definePropType<HTMLAttributes['aria-orientation']>(String),\n  },\n\n  onBlur: Function,\n  onFocus: Function,\n  onMousedown: Function,\n})\n\nexport type PsRovingFocusGroupProps = ExtractPropTypes<\n  typeof rovingFocusGroupProps\n>\n\nconst {\n  PsCollection,\n  PsCollectionItem,\n  COLLECTION_INJECTION_KEY,\n  COLLECTION_ITEM_INJECTION_KEY,\n} = createCollectionWithScope('RovingFocusGroup')\n\nexport {\n  PsCollection,\n  PsCollectionItem,\n  COLLECTION_INJECTION_KEY as ROVING_FOCUS_COLLECTION_INJECTION_KEY,\n  COLLECTION_ITEM_INJECTION_KEY as ROVING_FOCUS_ITEM_COLLECTION_INJECTION_KEY,\n}\n"],"names":["buildProps","definePropType","createCollectionWithScope"],"mappings":";;;;;;;;;AAEY,MAAC,qBAAqB,GAAGA,gBAAU,CAAC;AAChD,EAAE,KAAK,EAAE,EAAE,IAAI,EAAEC,oBAAc,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,EAAE;AAC1D,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAEA,oBAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,mBAAmB,EAAE,MAAM;AAC7B,EAAE,IAAI,EAAE,OAAO;AACf,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC;AAC1B,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAEA,oBAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,MAAM,EAAE,QAAQ;AAClB,EAAE,OAAO,EAAE,QAAQ;AACnB,EAAE,WAAW,EAAE,QAAQ;AACvB,CAAC,EAAE;AACE,MAAC;AACN,EAAE,YAAY;AACd,EAAE,gBAAgB;AAClB,EAAE,wBAAwB;AAC1B,EAAE,6BAA6B;AAC/B,CAAC,GAAGC,oCAAyB,CAAC,kBAAkB;;;;;;;;"}

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

@@ -2,40 +2,34 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../../utils/index.js');
-require('../../collection/index.js');
-var props = require('../../../utils/vue/props.js');
-var collection = require('../../collection/src/collection.js');
+var vue = require('vue');
+var rovingFocusGroupImpl = require('./roving-focus-group-impl.js');
+var rovingFocusGroup = require('./roving-focus-group.js');
+var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
 
-const rovingFocusGroupProps = props.buildProps({
-  style: { type: props.definePropType([String, Array, Object]) },
-  currentTabId: {
-    type: props.definePropType(String)
-  },
-  defaultCurrentTabId: String,
-  loop: Boolean,
-  dir: {
-    type: String,
-    values: ["ltr", "rtl"],
-    default: "ltr"
-  },
-  orientation: {
-    type: props.definePropType(String)
-  },
-  onBlur: Function,
-  onFocus: Function,
-  onMousedown: Function
+const _sfc_main = vue.defineComponent({
+  name: "PsRovingFocusGroup",
+  components: {
+    PsFocusGroupCollection: rovingFocusGroup.PsCollection,
+    PsRovingFocusGroupImpl: rovingFocusGroupImpl["default"]
+  }
 });
-const {
-  PsCollection,
-  PsCollectionItem,
-  COLLECTION_INJECTION_KEY,
-  COLLECTION_ITEM_INJECTION_KEY
-} = collection.createCollectionWithScope("RovingFocusGroup");
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ps_roving_focus_group_impl = vue.resolveComponent("ps-roving-focus-group-impl");
+  const _component_ps_focus_group_collection = vue.resolveComponent("ps-focus-group-collection");
+  return vue.openBlock(), vue.createBlock(_component_ps_focus_group_collection, null, {
+    default: vue.withCtx(() => [
+      vue.createVNode(_component_ps_roving_focus_group_impl, vue.normalizeProps(vue.guardReactiveProps(_ctx.$attrs)), {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16)
+    ]),
+    _: 3
+  });
+}
+var PsRovingFocusGroup = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "/Users/meng/workspace/element-ps/packages/components/roving-focus-group/src/roving-focus-group.vue"]]);
 
-exports.PsCollection = PsCollection;
-exports.PsCollectionItem = PsCollectionItem;
-exports.ROVING_FOCUS_COLLECTION_INJECTION_KEY = COLLECTION_INJECTION_KEY;
-exports.ROVING_FOCUS_ITEM_COLLECTION_INJECTION_KEY = COLLECTION_ITEM_INJECTION_KEY;
-exports.rovingFocusGroupProps = rovingFocusGroupProps;
+exports["default"] = PsRovingFocusGroup;
 //# sourceMappingURL=roving-focus-group2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"roving-focus-group2.js","sources":["../../../../../../packages/components/roving-focus-group/src/roving-focus-group.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-ps/utils'\nimport { createCollectionWithScope } from '@element-ps/components/collection'\nimport type { ExtractPropTypes, HTMLAttributes, StyleValue } from 'vue'\n\nexport const rovingFocusGroupProps = buildProps({\n  style: { type: definePropType<StyleValue>([String, Array, Object]) },\n  currentTabId: {\n    type: definePropType<string | null>(String),\n  },\n  defaultCurrentTabId: String,\n  loop: Boolean,\n  dir: {\n    type: String, // left for direction support\n    values: ['ltr', 'rtl'],\n    default: 'ltr',\n  },\n  orientation: {\n    // left for orientation support\n    type: definePropType<HTMLAttributes['aria-orientation']>(String),\n  },\n\n  onBlur: Function,\n  onFocus: Function,\n  onMousedown: Function,\n})\n\nexport type PsRovingFocusGroupProps = ExtractPropTypes<\n  typeof rovingFocusGroupProps\n>\n\nconst {\n  PsCollection,\n  PsCollectionItem,\n  COLLECTION_INJECTION_KEY,\n  COLLECTION_ITEM_INJECTION_KEY,\n} = createCollectionWithScope('RovingFocusGroup')\n\nexport {\n  PsCollection,\n  PsCollectionItem,\n  COLLECTION_INJECTION_KEY as ROVING_FOCUS_COLLECTION_INJECTION_KEY,\n  COLLECTION_ITEM_INJECTION_KEY as ROVING_FOCUS_ITEM_COLLECTION_INJECTION_KEY,\n}\n"],"names":["buildProps","definePropType","createCollectionWithScope"],"mappings":";;;;;;;;;AAEY,MAAC,qBAAqB,GAAGA,gBAAU,CAAC;AAChD,EAAE,KAAK,EAAE,EAAE,IAAI,EAAEC,oBAAc,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,EAAE;AAC1D,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAEA,oBAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,mBAAmB,EAAE,MAAM;AAC7B,EAAE,IAAI,EAAE,OAAO;AACf,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC;AAC1B,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAEA,oBAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,MAAM,EAAE,QAAQ;AAClB,EAAE,OAAO,EAAE,QAAQ;AACnB,EAAE,WAAW,EAAE,QAAQ;AACvB,CAAC,EAAE;AACE,MAAC;AACN,EAAE,YAAY;AACd,EAAE,gBAAgB;AAClB,EAAE,wBAAwB;AAC1B,EAAE,6BAA6B;AAC/B,CAAC,GAAGC,oCAAyB,CAAC,kBAAkB;;;;;;;;"}
+{"version":3,"file":"roving-focus-group2.js","sources":["../../../../../../packages/components/roving-focus-group/src/roving-focus-group.vue"],"sourcesContent":["<template>\n  <ps-focus-group-collection>\n    <ps-roving-focus-group-impl v-bind=\"$attrs\">\n      <slot />\n    </ps-roving-focus-group-impl>\n  </ps-focus-group-collection>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport PsRovingFocusGroupImpl from './roving-focus-group-impl.vue'\nimport { PsCollection as PsFocusGroupCollection } from './roving-focus-group'\n\nexport default defineComponent({\n  name: 'PsRovingFocusGroup',\n  components: {\n    PsFocusGroupCollection,\n    PsRovingFocusGroupImpl,\n  },\n})\n</script>\n"],"names":["defineComponent","PsFocusGroupCollection","PsRovingFocusGroupImpl","_createBlock","_withCtx","_createVNode","_renderSlot"],"mappings":";;;;;;;;;AAaA,MAAK,YAAaA,mBAAa,CAAA;AAAA,EAC7B,IAAM,EAAA,oBAAA;AAAA,EACN,UAAY,EAAA;AAAA,4BACVC,6BAAA;AAAA,4BACAC,+BAAA;AAAA,GACF;AACF,CAAC,CAAA,CAAA;;;;0BAlBCC,eAI4B,CAAA,oCAAA,EAAA,IAAA,EAAA;AAAA,IAAA,OAAA,EAAAC,WAAA,CAH1B,MAE6B;AAAA,MAF7BC,eAAA,CAE6B,iFAFO,IAAM,CAAA,MAAA,CAAA,CAAA,EAAA;AAAA,QAAA,OAAA,EAAAD,WAAA,CACxC,MAAQ;AAAA,UAARE,cAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,SAAA,CAAA;;;;;;;;;;;"}

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
 require('../../../hooks/index.js');
-var rovingFocusGroup = require('./roving-focus-group2.js');
+var rovingFocusGroup = require('./roving-focus-group.js');
 var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
 var index = require('../../../hooks/use-id/index.js');
 

package/lib/components/scrollbar/index.js

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

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

@@ -2,52 +2,122 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var vue = require('vue');
 require('../../../utils/index.js');
-var props = require('../../../utils/vue/props.js');
+require('../../../tokens/index.js');
+require('../../../hooks/index.js');
+var bar = require('./bar.js');
+var scrollbar = require('./scrollbar2.js');
+var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+var index = require('../../../hooks/use-namespace/index.js');
+var style = require('../../../utils/dom/style.js');
+var scrollbar$1 = require('../../../tokens/scrollbar.js');
 
-const scrollbarProps = props.buildProps({
-  height: {
-    type: [String, Number],
-    default: ""
+const _sfc_main = vue.defineComponent({
+  name: "PsScrollbar",
+  components: {
+    Bar: bar["default"]
   },
-  maxHeight: {
-    type: [String, Number],
-    default: ""
-  },
-  native: {
-    type: Boolean,
-    default: false
-  },
-  wrapStyle: {
-    type: props.definePropType([String, Object, Array]),
-    default: ""
-  },
-  wrapClass: {
-    type: [String, Array],
-    default: ""
-  },
-  viewClass: {
-    type: [String, Array],
-    default: ""
-  },
-  viewStyle: {
-    type: [String, Array, Object],
-    default: ""
-  },
-  noresize: Boolean,
-  tag: {
-    type: String,
-    default: "div"
-  },
-  always: {
-    type: Boolean,
-    default: false
-  },
-  minSize: {
-    type: Number,
-    default: 20
+  props: scrollbar.scrollbarProps,
+  setup(props) {
+    const ns = index.useNamespace("scrollbar");
+    const scrollbar$ = vue.ref();
+    const wrap$ = vue.ref();
+    const resize$ = vue.ref();
+    const sizeWidth = vue.ref("0");
+    const sizeHeight = vue.ref("0");
+    const barRef = vue.ref();
+    const moveX = vue.ref(0);
+    const moveY = vue.ref(0);
+    const ratioY = vue.ref(1);
+    const ratioX = vue.ref(1);
+    const GAP = 4;
+    const style$1 = vue.computed(() => {
+      const style2 = {};
+      if (props.height)
+        style2.height = style.addUnit(props.height);
+      if (props.maxHeight)
+        style2.maxHeight = style.addUnit(props.maxHeight);
+      return [props.wrapStyle, style2];
+    });
+    const update = () => {
+      if (!wrap$.value)
+        return;
+      const offsetHeight = wrap$.value.offsetHeight - GAP;
+      const offsetWidth = wrap$.value.offsetWidth - GAP;
+      const originalHeight = offsetHeight ** 2 / wrap$.value.scrollHeight;
+      const originalWidth = offsetWidth ** 2 / wrap$.value.scrollWidth;
+      const height = Math.max(originalHeight, props.minSize);
+      const width = Math.max(originalWidth, props.minSize);
+      ratioY.value = originalHeight / (offsetHeight - originalHeight) / (height / (offsetHeight - height));
+      ratioX.value = originalWidth / (offsetWidth - originalWidth) / (width / (offsetWidth - width));
+      sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : "";
+      sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : "";
+    };
+    vue.provide(scrollbar$1.scrollbarContextKey, vue.reactive({
+      scrollbarElement: scrollbar$,
+      wrapElement: wrap$
+    }));
+    vue.onMounted(() => {
+      if (!props.native)
+        vue.nextTick(() => update());
+    });
+    vue.onUpdated(() => update());
+    return {
+      ns,
+      scrollbar$,
+      wrap$,
+      resize$,
+      barRef,
+      moveX,
+      moveY,
+      ratioX,
+      ratioY,
+      sizeWidth,
+      sizeHeight,
+      style: style$1,
+      update
+    };
   }
 });
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_bar = vue.resolveComponent("bar");
+  return vue.openBlock(), vue.createElementBlock("div", {
+    ref: "scrollbar$",
+    class: vue.normalizeClass(_ctx.ns.b())
+  }, [
+    vue.createElementVNode("div", {
+      ref: "wrap$",
+      class: vue.normalizeClass([
+        _ctx.wrapClass,
+        _ctx.ns.e("wrap"),
+        { [_ctx.ns.em("wrap", "hidden-default")]: !_ctx.native }
+      ]),
+      style: vue.normalizeStyle(_ctx.style)
+    }, [
+      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag), {
+        ref: "resize$",
+        class: vue.normalizeClass([_ctx.ns.e("view"), _ctx.viewClass]),
+        style: vue.normalizeStyle(_ctx.viewStyle)
+      }, {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["class", "style"]))
+    ], 6),
+    !_ctx.native ? (vue.openBlock(), vue.createBlock(_component_bar, {
+      key: 0,
+      ref: "barRef",
+      height: _ctx.sizeHeight,
+      width: _ctx.sizeWidth,
+      always: _ctx.always,
+      "ratio-x": _ctx.ratioX,
+      "ratio-y": _ctx.ratioY
+    }, null, 8, ["height", "width", "always", "ratio-x", "ratio-y"])) : vue.createCommentVNode("v-if", true)
+  ], 2);
+}
+var Scrollbar = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "/Users/meng/workspace/element-ps/packages/components/scrollbar/src/scrollbar.vue"]]);
 
-exports.scrollbarProps = scrollbarProps;
+exports["default"] = Scrollbar;
 //# sourceMappingURL=scrollbar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"scrollbar.js","sources":["../../../../../../packages/components/scrollbar/src/scrollbar.ts"],"sourcesContent":["import { buildProps, definePropType, isNumber } from '@element-ps/utils'\nimport type { ExtractPropTypes, StyleValue } from 'vue'\n\nexport const scrollbarProps = buildProps({\n  height: {\n    type: [String, Number],\n    default: '',\n  },\n  maxHeight: {\n    type: [String, Number],\n    default: '',\n  },\n  native: {\n    type: Boolean,\n    default: false,\n  },\n  wrapStyle: {\n    type: definePropType<StyleValue>([String, Object, Array]),\n    default: '',\n  },\n  wrapClass: {\n    type: [String, Array],\n    default: '',\n  },\n  viewClass: {\n    type: [String, Array],\n    default: '',\n  },\n  viewStyle: {\n    type: [String, Array, Object],\n    default: '',\n  },\n  noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能\n  tag: {\n    type: String,\n    default: 'div',\n  },\n  always: {\n    type: Boolean,\n    default: false,\n  },\n  minSize: {\n    type: Number,\n    default: 20,\n  },\n} as const)\n\nexport type ScrollbarProps = ExtractPropTypes<typeof scrollbarProps>\n"],"names":["buildProps","definePropType"],"mappings":";;;;;;;AACY,MAAC,cAAc,GAAGA,gBAAU,CAAC;AACzC,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAEC,oBAAc,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;AACjD,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;AACzB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;AACzB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC;AACjC,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,CAAC;;;;"}
+{"version":3,"file":"scrollbar.js","sources":["../../../../../../packages/components/scrollbar/src/scrollbar.vue"],"sourcesContent":["<template>\n  <div ref=\"scrollbar$\" :class=\"ns.b()\">\n    <div\n      ref=\"wrap$\"\n      :class=\"[\n        wrapClass,\n        ns.e('wrap'),\n        { [ns.em('wrap', 'hidden-default')]: !native },\n      ]\"\n      :style=\"style\"\n    >\n      <component\n        :is=\"tag\"\n        ref=\"resize$\"\n        :class=\"[ns.e('view'), viewClass]\"\n        :style=\"viewStyle\"\n      >\n        <slot />\n      </component>\n    </div>\n    <template v-if=\"!native\">\n      <bar\n        ref=\"barRef\"\n        :height=\"sizeHeight\"\n        :width=\"sizeWidth\"\n        :always=\"always\"\n        :ratio-x=\"ratioX\"\n        :ratio-y=\"ratioY\"\n      />\n    </template>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  nextTick,\n  onMounted,\n  onUpdated,\n  provide,\n  reactive,\n  ref,\n} from 'vue'\nimport { addUnit } from '@element-ps/utils'\nimport { scrollbarContextKey } from '@element-ps/tokens'\nimport { useNamespace } from '@element-ps/hooks'\nimport Bar from './bar.vue'\n\nimport { scrollbarProps } from './scrollbar'\nimport type { CSSProperties, StyleValue } from 'vue'\n\nexport default defineComponent({\n  name: 'PsScrollbar',\n  components: {\n    Bar,\n  },\n  props: scrollbarProps,\n\n  setup(props) {\n    const ns = useNamespace('scrollbar')\n\n    const scrollbar$ = ref<HTMLDivElement>()\n    const wrap$ = ref<HTMLDivElement>()\n    const resize$ = ref<HTMLElement>()\n\n    const sizeWidth = ref('0')\n    const sizeHeight = ref('0')\n    const barRef = ref()\n    const moveX = ref(0)\n    const moveY = ref(0)\n    const ratioY = ref(1)\n    const ratioX = ref(1)\n    const GAP = 4 // top 2 + bottom 2 of bar instance\n\n    const style = computed<StyleValue>(() => {\n      const style: CSSProperties = {}\n      if (props.height) style.height = addUnit(props.height)\n      if (props.maxHeight) style.maxHeight = addUnit(props.maxHeight)\n      return [props.wrapStyle, style]\n    })\n\n    const update = () => {\n      if (!wrap$.value) return\n      const offsetHeight = wrap$.value.offsetHeight - GAP\n      const offsetWidth = wrap$.value.offsetWidth - GAP\n\n      const originalHeight = offsetHeight ** 2 / wrap$.value.scrollHeight\n      const originalWidth = offsetWidth ** 2 / wrap$.value.scrollWidth\n      const height = Math.max(originalHeight, props.minSize)\n      const width = Math.max(originalWidth, props.minSize)\n\n      ratioY.value =\n        originalHeight /\n        (offsetHeight - originalHeight) /\n        (height / (offsetHeight - height))\n      ratioX.value =\n        originalWidth /\n        (offsetWidth - originalWidth) /\n        (width / (offsetWidth - width))\n\n      sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : ''\n      sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : ''\n    }\n\n    provide(\n      scrollbarContextKey,\n      reactive({\n        scrollbarElement: scrollbar$,\n        wrapElement: wrap$,\n      })\n    )\n\n    onMounted(() => {\n      if (!props.native) nextTick(() => update())\n    })\n    onUpdated(() => update())\n\n    return {\n      ns,\n      scrollbar$,\n      wrap$,\n      resize$,\n      barRef,\n      moveX,\n      moveY,\n      ratioX,\n      ratioY,\n      sizeWidth,\n      sizeHeight,\n      style,\n      update,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","Bar","scrollbarProps","useNamespace","ref","style","computed","addUnit","provide","scrollbarContextKey","reactive","onMounted","nextTick","onUpdated","_createElementBlock","_normalizeClass","_createElementVNode","_normalizeStyle","_openBlock","_createBlock","_resolveDynamicComponent","_renderSlot","_createCommentVNode"],"mappings":"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"}