@destyler/tabs 0.0.3 → 0.0.4

package/README.md

@@ -0,0 +1,7 @@
+# @destyler/tabs
+
+[![NPM version](https://img.shields.io/npm/v/@destyler/tabs?color=a1b858&tabs=)](https://www.npmjs.com/package/@destyler/tabs)
+
+> a set of layered sections of content—known as tab panels—that are displayed one at a time.
+
+[GitHub](https://github.com/destyler/destyler) | [Documentation](https://destyler-dev.zeabur.app/)

package/dist/component.cjs

@@ -1,18 +1,383 @@
 'use strict';
 
-const index = require('./index.cjs');
-require('vue');
-require('@destyler/composition');
-require('@destyler/presence');
-require('@destyler/primitive');
-require('@destyler/directives');
-require('@destyler/shared');
-require('@destyler/roving-focus');
-
-
-
-exports.DestylerTabsContent = index.DestylerTabsContent;
-exports.DestylerTabsIndicator = index.DestylerTabsIndicator;
-exports.DestylerTabsList = index.DestylerTabsList;
-exports.DestylerTabsRoot = index.DestylerTabsRoot;
-exports.DestylerTabsTrigger = index.DestylerTabsTrigger;
+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 tabsRootProps = {
+  ...primitive.primitiveProps,
+  /**
+   * The controlled value of the tab to activate. Can be bind as `v-model`.
+   */
+  modelValue: {
+    type: String,
+    required: false
+  },
+  /**
+   * The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs
+   */
+  defaultValue: {
+    type: String,
+    required: false
+  },
+  /**
+   * Whether a tab is activated automatically or manually.
+   *
+   * @default automatic
+   */
+  activationMode: {
+    type: String,
+    required: false,
+    default: "automatic"
+  },
+  /**
+   * The reading direction of the combobox when applicable.
+   */
+  dir: {
+    type: String,
+    required: false
+  },
+  /**
+   * The orientation the tabs are layed out.
+   * Mainly so arrow navigation is done accordingly (left & right vs. up & down)
+   *
+   * @default horizontal
+   */
+  orientation: {
+    type: String,
+    required: false,
+    default: "horizontal"
+  }
+};
+const tabsRootEmits = {
+  /**
+   * Event handler called when the value changes
+   */
+  "update:modelValue": (_value) => true
+};
+const [injectTabsRootContext, provideTabsRootContext] = shared.createContext("DestylerTabsRoot");
+const TabsRoot = vue.defineComponent({
+  name: "DestylerTabsRoot",
+  props: tabsRootProps,
+  emits: tabsRootEmits,
+  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.Primitive, {
+      "as": this.$props.as,
+      "asChild": this.$props.asChild,
+      "dir": this.dir,
+      "data-orientation": this.orientation
+    }, () => this.$slots.default?.());
+  }
+});
+
+const tabsContentProps = {
+  ...primitive.primitiveProps,
+  /**
+   * A unique value that associates the content with a trigger.
+   */
+  value: {
+    type: String,
+    required: true
+  },
+  /**
+   * Used to force mounting when more control is needed. Useful when
+   * controlling animation with Vue animation libraries.
+   */
+  forceMount: {
+    type: Boolean,
+    required: false
+  }
+};
+const TabsContent = vue.defineComponent({
+  name: "DestylerTabsContent",
+  props: tabsContentProps,
+  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.Presence,
+      {
+        present: this.isSelected,
+        forceMount: false
+      },
+      {
+        default: ({ present }) => [
+          vue.withDirectives(
+            vue.h(
+              primitive.Primitive,
+              {
+                "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
+                }
+              },
+              () => [
+                this.$props.forceMount || this.isSelected ? this.$slots.default?.() : null
+              ]
+            ),
+            [[directives.BindOnceDirective, { id: this.contentId }]]
+          )
+        ]
+      }
+    );
+  }
+});
+
+const tabsIndicatorProps = {
+  ...primitive.primitiveProps,
+  /**
+   * @default button
+   */
+  as: {
+    ...primitive.primitiveProps.as,
+    default: "button"
+  }
+};
+const TabsIndicator = vue.defineComponent({
+  name: "DestylerTabsIndicator",
+  props: tabsIndicatorProps,
+  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() {
+    if (typeof this.indicatorStyle.size === "number") {
+      return vue.h(primitive.Primitive, vue.mergeProps(this.$props, this.$attrs, {
+        style: {
+          "--destyler-tabs-indicator-size": `${this.indicatorStyle.size}px`,
+          "--destyler-tabs-indicator-position": `${this.indicatorStyle.position}px`
+        }
+      }), () => this.$slots.default?.());
+    }
+  }
+});
+
+const tabsListProps = {
+  ...primitive.primitiveProps,
+  /**
+   * When `true`, keyboard navigation will loop from last tab to first, and vice versa.
+   */
+  loop: {
+    type: Boolean,
+    required: false,
+    default: true
+  }
+};
+const TabsList = vue.defineComponent({
+  name: "DestylerTabsList",
+  props: tabsListProps,
+  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.RovingFocusGroup, {
+      asChild: true,
+      loop: this.loop,
+      dir: this.context.dir.value,
+      orientation: this.context.orientation.value
+    }, () => vue.h(primitive.Primitive, {
+      "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 tabsTriggerProps = {
+  ...primitive.primitiveProps,
+  /**
+   * @default button
+   */
+  as: {
+    ...primitive.primitiveProps.as,
+    default: "button"
+  },
+  /**
+   * A unique value that associates the trigger with a content.
+   */
+  value: {
+    type: String,
+    required: true
+  },
+  /**
+   * When `true`, prevents the user from interacting with the tab.
+   */
+  disabled: {
+    type: Boolean,
+    required: false
+  }
+};
+const TabsTrigger = vue.defineComponent({
+  name: "DestylerTabsTrigger",
+  props: tabsTriggerProps,
+  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.RovingFocusItem, {
+      asChild: true,
+      focusable: !this.$props.disabled,
+      active: this.isSelected
+    }, () => vue.withDirectives(vue.h(primitive.Primitive, {
+      "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);
+      }
+    }, () => this.$slots.default?.()), [
+      [directives.BindOnceDirective, { id: this.triggerId }]
+    ]));
+  }
+});
+
+exports.TabsContent = TabsContent;
+exports.TabsIndicator = TabsIndicator;
+exports.TabsList = TabsList;
+exports.TabsRoot = TabsRoot;
+exports.TabsTrigger = TabsTrigger;
+exports.tabsContentProps = tabsContentProps;
+exports.tabsIndicatorProps = tabsIndicatorProps;
+exports.tabsListProps = tabsListProps;
+exports.tabsRootEmits = tabsRootEmits;
+exports.tabsRootProps = tabsRootProps;
+exports.tabsTriggerProps = tabsTriggerProps;