@destyler/tabs 0.0.6 → 0.0.7-beta.1

package/dist/component.mjs

@@ -1,371 +0,0 @@
-import { defineComponent, toRefs, ref, h, computed, onMounted, withDirectives, watch, nextTick, mergeProps, withModifiers } from 'vue';
-import { useDirection, useForwardExpose, useVModel, useId, useResizeObserver } from '@destyler/composition';
-import { Presence } from '@destyler/presence';
-import { primitiveProps, Primitive } from '@destyler/primitive';
-import { BindOnceDirective } from '@destyler/directives';
-import { createContext } from '@destyler/shared';
-import { RovingFocusGroup, RovingFocusItem } from '@destyler/roving-focus';
-
-function makeTriggerId(baseId, value) {
-  return `${baseId}-trigger-${value}`;
-}
-function makeContentId(baseId, value) {
-  return `${baseId}-content-${value}`;
-}
-
-const tabsRootProps = {
-  ...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] = createContext("DestylerTabsRoot");
-const TabsRoot = defineComponent({
-  name: "DestylerTabsRoot",
-  props: tabsRootProps,
-  emits: tabsRootEmits,
-  setup(props, { emit }) {
-    const { orientation, dir: propDir } = toRefs(props);
-    const dir = useDirection(propDir);
-    useForwardExpose();
-    const modelValue = useVModel(props, "modelValue", emit, {
-      defaultValue: props.defaultValue,
-      passive: props.modelValue === void 0
-    });
-    const tabsList = ref();
-    provideTabsRootContext({
-      modelValue,
-      changeModelValue: (value) => {
-        modelValue.value = value;
-      },
-      orientation,
-      dir,
-      activationMode: props.activationMode,
-      baseId: useId(),
-      tabsList
-    });
-    return {
-      dir,
-      orientation
-    };
-  },
-  render() {
-    return h(Primitive, {
-      "as": this.$props.as,
-      "asChild": this.$props.asChild,
-      "dir": this.dir,
-      "data-orientation": this.orientation
-    }, () => this.$slots.default?.());
-  }
-});
-
-const tabsContentProps = {
-  ...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 = defineComponent({
-  name: "DestylerTabsContent",
-  props: tabsContentProps,
-  setup(props) {
-    const { forwardRef } = useForwardExpose();
-    const rootContext = injectTabsRootContext();
-    const triggerId = computed(
-      () => makeTriggerId(rootContext.baseId, props.value)
-    );
-    const contentId = computed(
-      () => makeContentId(rootContext.baseId, props.value)
-    );
-    const isSelected = computed(
-      () => props.value === rootContext.modelValue.value
-    );
-    const isMountAnimationPreventedRef = ref(isSelected.value);
-    onMounted(() => {
-      requestAnimationFrame(() => {
-        isMountAnimationPreventedRef.value = false;
-      });
-    });
-    return {
-      forwardRef,
-      rootContext,
-      triggerId,
-      contentId,
-      isSelected,
-      isMountAnimationPreventedRef
-    };
-  },
-  render() {
-    return h(
-      Presence,
-      {
-        present: this.isSelected,
-        forceMount: false
-      },
-      {
-        default: ({ present }) => [
-          withDirectives(
-            h(
-              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
-              ]
-            ),
-            [[BindOnceDirective, { id: this.contentId }]]
-          )
-        ]
-      }
-    );
-  }
-});
-
-const tabsIndicatorProps = {
-  ...primitiveProps,
-  /**
-   * @default button
-   */
-  as: {
-    ...primitiveProps.as,
-    default: "button"
-  }
-};
-const TabsIndicator = defineComponent({
-  name: "DestylerTabsIndicator",
-  props: tabsIndicatorProps,
-  setup() {
-    const context = injectTabsRootContext();
-    useForwardExpose();
-    const indicatorStyle = ref({
-      size: null,
-      position: null
-    });
-    watch(() => context.modelValue.value, async () => {
-      await nextTick();
-      updateIndicatorStyle();
-    }, { immediate: true });
-    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 h(Primitive, 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 = {
-  ...primitiveProps,
-  /**
-   * When `true`, keyboard navigation will loop from last tab to first, and vice versa.
-   */
-  loop: {
-    type: Boolean,
-    required: false,
-    default: true
-  }
-};
-const TabsList = defineComponent({
-  name: "DestylerTabsList",
-  props: tabsListProps,
-  setup(props) {
-    const { loop } = toRefs(props);
-    const { forwardRef, currentElement } = useForwardExpose();
-    const context = injectTabsRootContext();
-    context.tabsList = currentElement;
-    return {
-      forwardRef,
-      loop,
-      context
-    };
-  },
-  render() {
-    return h(RovingFocusGroup, {
-      asChild: true,
-      loop: this.loop,
-      dir: this.context.dir.value,
-      orientation: this.context.orientation.value
-    }, () => h(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 = {
-  ...primitiveProps,
-  /**
-   * @default button
-   */
-  as: {
-    ...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 = defineComponent({
-  name: "DestylerTabsTrigger",
-  props: tabsTriggerProps,
-  setup(props) {
-    const { forwardRef } = useForwardExpose();
-    const rootContext = injectTabsRootContext();
-    const triggerId = computed(() => makeTriggerId(rootContext.baseId, props.value));
-    const contentId = computed(() => makeContentId(rootContext.baseId, props.value));
-    const isSelected = computed(() => props.value === rootContext.modelValue.value);
-    return {
-      forwardRef,
-      rootContext,
-      triggerId,
-      contentId,
-      isSelected
-    };
-  },
-  render() {
-    return h(RovingFocusItem, {
-      asChild: true,
-      focusable: !this.$props.disabled,
-      active: this.isSelected
-    }, () => withDirectives(h(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": withModifiers((event) => {
-        if (!this.$props.disabled && event.ctrlKey === false)
-          this.rootContext.changeModelValue(this.$props.value);
-        else
-          event.preventDefault();
-      }, ["left"]),
-      "onKeydown": 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?.()), [
-      [BindOnceDirective, { id: this.triggerId }]
-    ]));
-  }
-});
-
-export { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger, tabsContentProps, tabsIndicatorProps, tabsListProps, tabsRootEmits, tabsRootProps, tabsTriggerProps };

package/dist/resolver.cjs

@@ -1,24 +0,0 @@
-'use strict';
-
-const name = "@destyler/tabs";
-
-const packageName = name;
-const tabsComponentName = [
-  "TabsContent",
-  "TabsIndicator",
-  "TabsList",
-  "TabsRoot",
-  "TabsTrigger"
-];
-function TabsResolver() {
-  return {
-    type: "component",
-    resolve: (name2) => {
-      if (tabsComponentName.includes(name2))
-        return { name: name2, from: packageName };
-    }
-  };
-}
-
-exports.TabsResolver = TabsResolver;
-exports.tabsComponentName = tabsComponentName;

package/dist/resolver.d.cts

@@ -1,6 +0,0 @@
-import { ComponentResolver } from 'unplugin-vue-components';
-
-declare const tabsComponentName: string[];
-declare function TabsResolver(): ComponentResolver;
-
-export { TabsResolver, tabsComponentName };

package/dist/resolver.d.mts

@@ -1,6 +0,0 @@
-import { ComponentResolver } from 'unplugin-vue-components';
-
-declare const tabsComponentName: string[];
-declare function TabsResolver(): ComponentResolver;
-
-export { TabsResolver, tabsComponentName };

package/dist/resolver.d.ts

@@ -1,6 +0,0 @@
-import { ComponentResolver } from 'unplugin-vue-components';
-
-declare const tabsComponentName: string[];
-declare function TabsResolver(): ComponentResolver;
-
-export { TabsResolver, tabsComponentName };

package/dist/resolver.mjs

@@ -1,21 +0,0 @@
-const name = "@destyler/tabs";
-
-const packageName = name;
-const tabsComponentName = [
-  "TabsContent",
-  "TabsIndicator",
-  "TabsList",
-  "TabsRoot",
-  "TabsTrigger"
-];
-function TabsResolver() {
-  return {
-    type: "component",
-    resolve: (name2) => {
-      if (tabsComponentName.includes(name2))
-        return { name: name2, from: packageName };
-    }
-  };
-}
-
-export { TabsResolver, tabsComponentName };