@destyler/tabs 0.0.1-beta.13

package/dist/index.mjs

@@ -0,0 +1,365 @@
+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
+    }, {
+      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 = 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": "forwardRef",
+            "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
+              ];
+            }
+          }), [
+            [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`
+        }
+      }), {
+        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 = 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
+    }, {
+      default: () => {
+        return h(DestylerPrimitive, {
+          "ref": "forwardRef",
+          "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
+    }, {
+      default: () => {
+        return withDirectives(h(DestylerPrimitive, {
+          "ref": "forwardRef",
+          "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);
+          }
+        }, {
+          default: () => this.$slots.default?.()
+        }), [
+          [BindOnceDirective, { id: this.triggerId }]
+        ]);
+      }
+    });
+  }
+});
+
+export { DestylerTabsContent, DestylerTabsIndicator, DestylerTabsList, DestylerTabsRoot, DestylerTabsTrigger };

package/dist/resolver.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+const name = "@destyler/tabs";
+
+const packageName = name;
+const destylerComponentName = [
+  "DestylerTemplate"
+];
+function DestylerTemplateResolver() {
+  return {
+    type: "component",
+    resolve: (name2) => {
+      if (destylerComponentName.includes(name2))
+        return { name: name2, from: packageName };
+    }
+  };
+}
+
+exports.DestylerTemplateResolver = DestylerTemplateResolver;
+exports.destylerComponentName = destylerComponentName;

package/dist/resolver.d.cts

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

package/dist/resolver.d.mts

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

package/dist/resolver.d.ts

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

package/dist/resolver.mjs

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

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@destyler/tabs",
+  "version": "0.0.1-beta.13",
+  "description": "unstyled tabs component for vue",
+  "author": "Elone Hoo <elonehoo@gmail.com>",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./resolver": {
+      "types": "./dist/resolver.d.ts",
+      "import": "./dist/resolver.mjs",
+      "require": "./dist/resolver.cjs"
+    },
+    "./component": {
+      "types": "./dist/component.d.ts",
+      "import": "./dist/component.mjs",
+      "require": "./dist/component.cjs"
+    },
+    "./*": "./*"
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "*.d.ts",
+    "dist"
+  ],
+  "peerDependencies": {
+    "vue": ">=3.3.4"
+  },
+  "dependencies": {
+    "@destyler/composition": "0.0.1-beta.13",
+    "@destyler/directives": "0.0.1-beta.13",
+    "@destyler/presence": "0.0.1-beta.13",
+    "@destyler/roving-focus": "0.0.1-beta.13",
+    "@destyler/shared": "0.0.1-beta.13",
+    "@destyler/primitive": "0.0.1-beta.13"
+  },
+  "scripts": {
+    "clear": "rimraf ./dist",
+    "build": "pnpm run clear && unbuild"
+  }
+}