@destyler/tabs 0.0.2 → 0.0.4

package/dist/index.cjs

@@ -1,371 +1,23 @@
 'use strict';
 
-const vue = require('vue');
-const composition = require('@destyler/composition');
-const presence = require('@destyler/presence');
-const primitive = require('@destyler/primitive');
-const directives = require('@destyler/directives');
-const shared = require('@destyler/shared');
-const rovingFocus = require('@destyler/roving-focus');
-
-function makeTriggerId(baseId, value) {
-  return `${baseId}-trigger-${value}`;
-}
-function makeContentId(baseId, value) {
-  return `${baseId}-content-${value}`;
-}
-
-const destylerTabsRootProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "div"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  modelValue: {
-    type: String,
-    required: false
-  },
-  defaultValue: {
-    type: String,
-    required: false
-  },
-  activationMode: {
-    type: String,
-    required: false,
-    default: "automatic"
-  },
-  dir: {
-    type: String,
-    required: false
-  },
-  orientation: {
-    type: String,
-    required: false,
-    default: "horizontal"
-  }
-};
-const [injectTabsRootContext, provideTabsRootContext] = shared.createContext("DestylerTabsRoot");
-const DestylerTabsRoot = vue.defineComponent({
-  name: "DestylerTabsRoot",
-  props: destylerTabsRootProps,
-  emits: ["update:modelValue"],
-  setup(props, { emit }) {
-    const { orientation, dir: propDir } = vue.toRefs(props);
-    const dir = composition.useDirection(propDir);
-    composition.useForwardExpose();
-    const modelValue = composition.useVModel(props, "modelValue", emit, {
-      defaultValue: props.defaultValue,
-      passive: props.modelValue === void 0
-    });
-    const tabsList = vue.ref();
-    provideTabsRootContext({
-      modelValue,
-      changeModelValue: (value) => {
-        modelValue.value = value;
-      },
-      orientation,
-      dir,
-      activationMode: props.activationMode,
-      baseId: composition.useId(),
-      tabsList
-    });
-    return {
-      dir,
-      orientation
-    };
-  },
-  render() {
-    return vue.h(primitive.DestylerPrimitive, {
-      "as": this.$props.as,
-      "asChild": this.$props.asChild,
-      "dir": this.dir,
-      "data-orientation": this.orientation
-    }, {
-      default: () => this.$slots.default?.()
-    });
-  }
-});
-
-const destylerTabsContentProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "div"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  value: {
-    type: String,
-    required: true
-  },
-  forceMount: {
-    type: Boolean,
-    required: false
-  }
-};
-const DestylerTabsContent = vue.defineComponent({
-  name: "DestylerTabsContent",
-  props: destylerTabsContentProps,
-  setup(props) {
-    const { forwardRef } = composition.useForwardExpose();
-    const rootContext = injectTabsRootContext();
-    const triggerId = vue.computed(() => makeTriggerId(rootContext.baseId, props.value));
-    const contentId = vue.computed(() => makeContentId(rootContext.baseId, props.value));
-    const isSelected = vue.computed(() => props.value === rootContext.modelValue.value);
-    const isMountAnimationPreventedRef = vue.ref(isSelected.value);
-    vue.onMounted(() => {
-      requestAnimationFrame(() => {
-        isMountAnimationPreventedRef.value = false;
-      });
-    });
-    return {
-      forwardRef,
-      rootContext,
-      triggerId,
-      contentId,
-      isSelected,
-      isMountAnimationPreventedRef
-    };
-  },
-  render() {
-    return vue.h(presence.DestylerPresence, {
-      present: this.isSelected,
-      forceMount: false
-    }, {
-      default: ({ present }) => {
-        return [
-          vue.withDirectives(vue.h(primitive.DestylerPrimitive, {
-            "ref": (el) => this.forwardRef(el),
-            "as": this.$props.as,
-            "asChild": this.$props.asChild,
-            "role": "tabpanel",
-            "data-state": this.isSelected ? "active" : "inactive",
-            "data-orientation": this.rootContext.orientation.value,
-            "aria-labelledby": this.triggerId,
-            "hidden": !present.value,
-            "tabindex": "0",
-            "style": {
-              animationDuration: this.isMountAnimationPreventedRef ? "0s" : void 0
-            }
-          }, {
-            default: () => {
-              return [
-                this.$props.forceMount || this.isSelected ? this.$slots.default?.() : null
-              ];
-            }
-          }), [
-            [directives.BindOnceDirective, { id: this.contentId }]
-          ])
-        ];
-      }
-    });
-  }
-});
-
-const destylerTabsIndicatorProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "button"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
-};
-const DestylerTabsIndicator = vue.defineComponent({
-  name: "DestylerTabsIndicator",
-  props: destylerTabsIndicatorProps,
-  setup() {
-    const context = injectTabsRootContext();
-    composition.useForwardExpose();
-    const indicatorStyle = vue.ref({
-      size: null,
-      position: null
-    });
-    vue.watch(() => context.modelValue.value, async () => {
-      await vue.nextTick();
-      updateIndicatorStyle();
-    }, { immediate: true });
-    composition.useResizeObserver(context.tabsList, updateIndicatorStyle);
-    function updateIndicatorStyle() {
-      const activeTab = context.tabsList.value?.querySelector('[role="tab"][data-state="active"]');
-      if (!activeTab)
-        return;
-      if (context.orientation.value === "horizontal") {
-        indicatorStyle.value = {
-          size: activeTab.offsetWidth,
-          position: activeTab.offsetLeft
-        };
-      } else {
-        indicatorStyle.value = {
-          size: activeTab.offsetHeight,
-          position: activeTab.offsetTop
-        };
-      }
-    }
-    return {
-      indicatorStyle
-    };
-  },
-  render() {
-    return [
-      typeof this.indicatorStyle.size === "number" ? vue.h(primitive.DestylerPrimitive, vue.mergeProps(this.$props, {
-        style: {
-          "--destyler_tabs_indicator_size": `${this.indicatorStyle.size}px`,
-          "--destyler_tabs_indicator_position": `${this.indicatorStyle.position}px`
-        }
-      }), {
-        default: () => this.$slots.default?.()
-      }) : null
-    ];
-  }
-});
-
-const destylerTabsListProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "div"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  loop: {
-    type: Boolean,
-    required: false,
-    default: true
-  }
-};
-const DestylerTabsList = vue.defineComponent({
-  name: "DestylerTabsList",
-  props: destylerTabsListProps,
-  setup(props) {
-    const { loop } = vue.toRefs(props);
-    const { forwardRef, currentElement } = composition.useForwardExpose();
-    const context = injectTabsRootContext();
-    context.tabsList = currentElement;
-    return {
-      forwardRef,
-      loop,
-      context
-    };
-  },
-  render() {
-    return vue.h(rovingFocus.DestylerRovingFocusGroup, {
-      asChild: true,
-      loop: this.loop,
-      dir: this.context.dir.value,
-      orientation: this.context.orientation.value
-    }, {
-      default: () => {
-        return vue.h(primitive.DestylerPrimitive, {
-          "ref": (el) => this.forwardRef(el),
-          "role": "tablist",
-          "asChild": this.$props.asChild,
-          "as": this.$props.as,
-          "aria-orientation": this.context.orientation.value
-        }, {
-          default: () => this.$slots.default?.()
-        });
-      }
-    });
-  }
-});
-
-const destylerTabsTriggerProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "button"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  value: {
-    type: String,
-    required: true
-  },
-  disabled: {
-    type: Boolean,
-    required: false
-  }
-};
-const DestylerTabsTrigger = vue.defineComponent({
-  name: "DestylerTabsTrigger",
-  props: destylerTabsTriggerProps,
-  setup(props) {
-    const { forwardRef } = composition.useForwardExpose();
-    const rootContext = injectTabsRootContext();
-    const triggerId = vue.computed(() => makeTriggerId(rootContext.baseId, props.value));
-    const contentId = vue.computed(() => makeContentId(rootContext.baseId, props.value));
-    const isSelected = vue.computed(() => props.value === rootContext.modelValue.value);
-    return {
-      forwardRef,
-      rootContext,
-      triggerId,
-      contentId,
-      isSelected
-    };
-  },
-  render() {
-    return vue.h(rovingFocus.DestylerRovingFocusItem, {
-      asChild: true,
-      focusable: !this.$props.disabled,
-      active: this.isSelected
-    }, {
-      default: () => {
-        return vue.withDirectives(vue.h(primitive.DestylerPrimitive, {
-          "ref": (el) => this.forwardRef(el),
-          "role": "tab",
-          "type": this.$props.as === "button" ? "button" : void 0,
-          "as": this.$props.as,
-          "asChild": this.$props.asChild,
-          "aria-selected": this.isSelected ? "true" : "false",
-          "aria-controls": this.contentId,
-          "data-state": this.isSelected ? "active" : "inactive",
-          "disabled": this.$props.disabled,
-          "data-disabled": this.$props.disabled ? "" : void 0,
-          "data-orientation": this.rootContext.orientation.value,
-          "onMousedown": vue.withModifiers((event) => {
-            if (!this.$props.disabled && event.ctrlKey === false)
-              this.rootContext.changeModelValue(this.$props.value);
-            else
-              event.preventDefault();
-          }, ["left"]),
-          "onKeydown": vue.withModifiers(() => {
-            this.rootContext.changeModelValue(this.$props.value);
-          }, ["enter", "space"]),
-          "onFocus": () => {
-            const isAutomaticActivation = this.rootContext.activationMode !== "manual";
-            if (!this.isSelected && !this.$props.disabled && isAutomaticActivation)
-              this.rootContext.changeModelValue(this.$props.value);
-          }
-        }, {
-          default: () => this.$slots.default?.()
-        }), [
-          [directives.BindOnceDirective, { id: this.triggerId }]
-        ]);
-      }
-    });
-  }
-});
-
-exports.DestylerTabsContent = DestylerTabsContent;
-exports.DestylerTabsIndicator = DestylerTabsIndicator;
-exports.DestylerTabsList = DestylerTabsList;
-exports.DestylerTabsRoot = DestylerTabsRoot;
-exports.DestylerTabsTrigger = DestylerTabsTrigger;
+const index = require('./component.cjs');
+require('vue');
+require('@destyler/composition');
+require('@destyler/presence');
+require('@destyler/primitive');
+require('@destyler/directives');
+require('@destyler/shared');
+require('@destyler/roving-focus');
+
+
+
+exports.TabsContent = index.TabsContent;
+exports.TabsIndicator = index.TabsIndicator;
+exports.TabsList = index.TabsList;
+exports.TabsRoot = index.TabsRoot;
+exports.TabsTrigger = index.TabsTrigger;
+exports.tabsContentProps = index.tabsContentProps;
+exports.tabsIndicatorProps = index.tabsIndicatorProps;
+exports.tabsListProps = index.tabsListProps;
+exports.tabsRootProps = index.tabsRootProps;
+exports.tabsTriggerProps = index.tabsTriggerProps;