{"version":3,"file":"TabsTrigger.js","sources":["../../src/Tabs/TabsTrigger.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { StringOrNumber } from '@/shared/types'\nimport { useForwardExpose } from '@/shared'\n\nexport interface TabsTriggerProps extends PrimitiveProps {\n  /** A unique value that associates the trigger with a content. */\n  value: StringOrNumber\n  /** When `true`, prevents the user from interacting with the tab. */\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Primitive } from '@/Primitive'\nimport { RovingFocusItem } from '@/RovingFocus'\nimport { injectTabsRootContext } from './TabsRoot.vue'\nimport { makeContentId, makeTriggerId } from './utils'\n\nconst props = withDefaults(defineProps<TabsTriggerProps>(), {\n  disabled: false,\n  as: 'button',\n})\n\nconst { forwardRef } = useForwardExpose()\nconst rootContext = injectTabsRootContext()\n\nconst triggerId = computed(() => makeTriggerId(rootContext.baseId, props.value))\nconst contentId = computed(() => makeContentId(rootContext.baseId, props.value))\n\nconst isSelected = computed(() => props.value === rootContext.modelValue.value)\n</script>\n\n<template>\n  <RovingFocusItem\n    as-child\n    :focusable=\"!disabled\"\n    :active=\"isSelected\"\n  >\n    <Primitive\n      :id=\"triggerId\"\n      :ref=\"forwardRef\"\n      role=\"tab\"\n      :type=\"as === 'button' ? 'button' : undefined\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :aria-selected=\"isSelected ? 'true' : 'false'\"\n      :aria-controls=\"contentId\"\n      :data-state=\"isSelected ? 'active' : 'inactive'\"\n      :disabled=\"disabled\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      :data-orientation=\"rootContext.orientation.value\"\n      @mousedown.left=\"(event) => {\n        // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n        // but not when the control key is pressed (avoiding MacOS right click)\n        if (!disabled && event.ctrlKey === false) {\n          rootContext.changeModelValue(value);\n        }\n        else {\n          // prevent focus to avoid accidental activation\n          event.preventDefault();\n        }\n      }\"\n      @keydown.enter.space=\"rootContext.changeModelValue(value)\"\n      @focus=\"() => {\n        // handle 'automatic' activation if necessary\n        // ie. activate tab following focus\n        const isAutomaticActivation = rootContext.activationMode !== 'manual';\n        if (!isSelected && !disabled && isAutomaticActivation) {\n          rootContext.changeModelValue(value);\n        }\n      }\"\n    >\n      <slot />\n    </Primitive>\n  </RovingFocusItem>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAoBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAKd,IAAM,MAAA,EAAE,UAAW,EAAA,GAAI,gBAAiB,EAAA;AACxC,IAAA,MAAM,cAAc,qBAAsB,EAAA;AAE1C,IAAM,MAAA,SAAA,GAAY,SAAS,MAAM,aAAA,CAAc,YAAY,MAAQ,EAAA,KAAA,CAAM,KAAK,CAAC,CAAA;AAC/E,IAAM,MAAA,SAAA,GAAY,SAAS,MAAM,aAAA,CAAc,YAAY,MAAQ,EAAA,KAAA,CAAM,KAAK,CAAC,CAAA;AAE/E,IAAA,MAAM,aAAa,QAAS,CAAA,MAAM,MAAM,KAAU,KAAA,WAAA,CAAY,WAAW,KAAK,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}