@destyler/tabs 0.0.3 → 0.0.4

package/dist/index.mjs

@@ -1,347 +1,8 @@
-import { defineComponent, toRefs, ref, h, computed, onMounted, withDirectives, watch, nextTick, mergeProps, withModifiers } from 'vue';
-import { useDirection, useForwardExpose, useVModel, useId, useResizeObserver } from '@destyler/composition';
-import { DestylerPresence } from '@destyler/presence';
-import { DestylerPrimitive } from '@destyler/primitive';
-import { BindOnceDirective } from '@destyler/directives';
-import { createContext } from '@destyler/shared';
-import { DestylerRovingFocusGroup, DestylerRovingFocusItem } from '@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] = createContext("DestylerTabsRoot");
-const DestylerTabsRoot = defineComponent({
-  name: "DestylerTabsRoot",
-  props: destylerTabsRootProps,
-  emits: ["update:modelValue"],
-  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(DestylerPrimitive, {
-      "as": this.$props.as,
-      "asChild": this.$props.asChild,
-      "dir": this.dir,
-      "data-orientation": this.orientation
-    }, () => 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 = defineComponent({
-  name: "DestylerTabsContent",
-  props: destylerTabsContentProps,
-  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(DestylerPresence, {
-      present: this.isSelected,
-      forceMount: false
-    }, {
-      default: ({ present }) => {
-        return [
-          withDirectives(h(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
-            }
-          }, () => [
-            this.$props.forceMount || this.isSelected ? this.$slots.default?.() : null
-          ]), [
-            [BindOnceDirective, { id: this.contentId }]
-          ])
-        ];
-      }
-    });
-  }
-});
-
-const destylerTabsIndicatorProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "button"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
-};
-const DestylerTabsIndicator = defineComponent({
-  name: "DestylerTabsIndicator",
-  props: destylerTabsIndicatorProps,
-  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() {
-    return [
-      typeof this.indicatorStyle.size === "number" ? h(DestylerPrimitive, mergeProps(this.$props, {
-        style: {
-          "--destyler_tabs_indicator_size": `${this.indicatorStyle.size}px`,
-          "--destyler_tabs_indicator_position": `${this.indicatorStyle.position}px`
-        }
-      }), () => 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 = defineComponent({
-  name: "DestylerTabsList",
-  props: destylerTabsListProps,
-  setup(props) {
-    const { loop } = toRefs(props);
-    const { forwardRef, currentElement } = useForwardExpose();
-    const context = injectTabsRootContext();
-    context.tabsList = currentElement;
-    return {
-      forwardRef,
-      loop,
-      context
-    };
-  },
-  render() {
-    return h(DestylerRovingFocusGroup, {
-      asChild: true,
-      loop: this.loop,
-      dir: this.context.dir.value,
-      orientation: this.context.orientation.value
-    }, () => h(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 = defineComponent({
-  name: "DestylerTabsTrigger",
-  props: destylerTabsTriggerProps,
-  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(DestylerRovingFocusItem, {
-      asChild: true,
-      focusable: !this.$props.disabled,
-      active: this.isSelected
-    }, () => withDirectives(h(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": 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 { DestylerTabsContent, DestylerTabsIndicator, DestylerTabsList, DestylerTabsRoot, DestylerTabsTrigger };
+export { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger, tabsContentProps, tabsIndicatorProps, tabsListProps, tabsRootProps, tabsTriggerProps } from './component.mjs';
+import 'vue';
+import '@destyler/composition';
+import '@destyler/presence';
+import '@destyler/primitive';
+import '@destyler/directives';
+import '@destyler/shared';
+import '@destyler/roving-focus';

package/dist/resolver.cjs

@@ -3,18 +3,22 @@
 const name = "@destyler/tabs";
 
 const packageName = name;
-const destylerComponentName = [
-  "DestylerTemplate"
+const tabsComponentName = [
+  "TabsContent",
+  "TabsIndicator",
+  "TabsList",
+  "TabsRoot",
+  "TabsTrigger"
 ];
-function DestylerTemplateResolver() {
+function TabsResolver() {
   return {
     type: "component",
     resolve: (name2) => {
-      if (destylerComponentName.includes(name2))
+      if (tabsComponentName.includes(name2))
         return { name: name2, from: packageName };
     }
   };
 }
 
-exports.DestylerTemplateResolver = DestylerTemplateResolver;
-exports.destylerComponentName = destylerComponentName;
+exports.TabsResolver = TabsResolver;
+exports.tabsComponentName = tabsComponentName;

package/dist/resolver.d.cts

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

package/dist/resolver.d.mts

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

package/dist/resolver.d.ts

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

package/dist/resolver.mjs

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

package/package.json

@@ -1,25 +1,22 @@
 {
   "name": "@destyler/tabs",
   "type": "module",
-  "version": "0.0.3",
-  "description": "unstyled tabs component for vue",
+  "version": "0.0.4",
+  "description": "a set of layered sections of content—known as tab panels—that are displayed one at a time.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
     },
     "./resolver": {
-      "types": "./dist/resolver.d.ts",
-      "import": "./dist/resolver.mjs",
-      "require": "./dist/resolver.cjs"
+      "types": "./dist/resolver.d.mts",
+      "default": "./dist/resolver.mjs"
     },
     "./component": {
-      "types": "./dist/component.d.ts",
-      "import": "./dist/component.mjs",
-      "require": "./dist/component.cjs"
+      "types": "./dist/component.d.mts",
+      "default": "./dist/component.mjs"
     },
     "./*": "./*"
   },
@@ -31,18 +28,19 @@
     "dist"
   ],
   "peerDependencies": {
-    "vue": ">=3.3.4"
+    "vue": ">=3.4.21"
   },
   "dependencies": {
-    "@destyler/composition": "0.0.3",
-    "@destyler/directives": "0.0.3",
-    "@destyler/shared": "0.0.3",
-    "@destyler/roving-focus": "0.0.3",
-    "@destyler/primitive": "0.0.3",
-    "@destyler/presence": "0.0.3"
+    "@destyler/directives": "0.0.4",
+    "@destyler/presence": "0.0.4",
+    "@destyler/primitive": "0.0.4",
+    "@destyler/composition": "0.0.4",
+    "@destyler/shared": "0.0.4",
+    "@destyler/roving-focus": "0.0.4"
   },
   "scripts": {
     "clear": "rimraf ./dist",
-    "build": "pnpm run clear && unbuild"
+    "build": "pnpm run clear && unbuild",
+    "stub": "unbuild --stub"
   }
 }