{"version":3,"file":"tab-nav.vue2.mjs","sources":["../../../components/tab-nav/tab-nav.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { Icon } from '@/components/icon'\r\nimport { Renderer } from '@/components/renderer'\r\nimport { ResizeObserver } from '@/components/resize-observer'\r\nimport { Scroll } from '@/components/scroll'\r\nimport { TabNavItem } from '@/components/tab-nav-item'\r\n\r\nimport { computed, onMounted, provide, reactive, ref, toRef, watch } from 'vue'\r\n\r\nimport { emitEvent, useIcons, useNameHelper, useProps } from '@vexip-ui/config'\r\nimport { useDisplay } from '@vexip-ui/hooks'\r\nimport { debounceMinor, isNull } from '@vexip-ui/utils'\r\nimport { tabNavProps } from './props'\r\nimport { TAB_NAV_STATE, trackStyleMap } from './symbol'\r\n\r\nimport type { ChangeEvent, ItemState, TabNavSlots } from './symbol'\r\n\r\ndefineOptions({ name: 'TabNav' })\r\n\r\nconst _props = defineProps(tabNavProps)\r\nconst props = useProps('tabNav', _props, {\r\n  active: {\r\n    default: null,\r\n    static: true,\r\n  },\r\n  card: false,\r\n  options: {\r\n    default: () => [],\r\n    static: true,\r\n  },\r\n  align: 'left',\r\n  placement: 'top',\r\n  closable: false,\r\n  showAdd: false,\r\n  slots: () => ({}),\r\n})\r\n\r\nconst emit = defineEmits(['update:active'])\r\n\r\nconst slots = defineSlots<TabNavSlots>()\r\n\r\nconst nh = useNameHelper('tab-nav')\r\nconst icons = useIcons()\r\nconst currentActive = ref(props.active)\r\nconst markerPosition = ref(0)\r\nconst markerSize = ref(0)\r\nconst itemStates = new Set<ItemState>()\r\n\r\nconst wrapper = useDisplay(updateMarkerPosition)\r\nconst scroll = ref<InstanceType<typeof Scroll>>()\r\n\r\nconst className = computed(() => {\r\n  return {\r\n    [nh.b()]: true,\r\n    [nh.bs('vars')]: true,\r\n    [nh.bm('inherit')]: props.inherit,\r\n    [nh.bm(`align-${props.align}`)]: true,\r\n    [nh.bm(props.placement)]: true,\r\n    [nh.bm('card')]: props.card,\r\n  }\r\n})\r\nconst markerStyle = computed(() => {\r\n  const [position, length] = trackStyleMap[props.placement]\r\n\r\n  return {\r\n    [position]: `${markerPosition.value}px`,\r\n    [length]: `${markerSize.value}px`,\r\n  }\r\n})\r\nconst items = computed(() => {\r\n  return props.options.map(item => {\r\n    if (typeof item === 'string' || typeof item === 'number') {\r\n      return { label: item }\r\n    }\r\n\r\n    return item\r\n  })\r\n})\r\nconst scrollMode = computed(() => {\r\n  return props.placement === 'top' || props.placement === 'bottom' ? 'horizontal-exact' : 'vertical'\r\n})\r\n\r\nconst refreshLabels = debounceMinor(() => {\r\n  const total = itemStates.size\r\n\r\n  Array.from(itemStates).forEach((item, index) => {\r\n    item.index = index + 1\r\n    item.total = total\r\n\r\n    if (isNull(item.label)) {\r\n      item.label = index + 1\r\n    }\r\n  })\r\n\r\n  if (itemStates.size >= 1 && isActiveEmpty()) {\r\n    currentActive.value = Array.from(itemStates)[0].label\r\n  }\r\n})\r\n\r\nprovide(\r\n  TAB_NAV_STATE,\r\n  reactive({\r\n    currentActive,\r\n    closable: toRef(props, 'closable'),\r\n    increaseItem,\r\n    decreaseItem,\r\n    handleActive,\r\n    handleClose,\r\n    refreshLabels,\r\n  }),\r\n)\r\n\r\nwatch(\r\n  () => props.active,\r\n  value => {\r\n    currentActive.value = value\r\n    updateMarkerPosition()\r\n  },\r\n)\r\nwatch(\r\n  () => props.placement,\r\n  () => {\r\n    requestAnimationFrame(updateMarkerPosition)\r\n  },\r\n)\r\n\r\nonMounted(updateMarkerPosition)\r\n\r\ndefineExpose({\r\n  items,\r\n  wrapper,\r\n  scroll,\r\n  updateMarkerPosition,\r\n  handleAdd,\r\n})\r\n\r\nfunction isActiveEmpty() {\r\n  return isNull(currentActive.value) || currentActive.value === ''\r\n}\r\n\r\nfunction increaseItem(item: ItemState) {\r\n  itemStates.add(item)\r\n  refreshLabels()\r\n}\r\n\r\nfunction decreaseItem(item: ItemState) {\r\n  itemStates.delete(item)\r\n  refreshLabels()\r\n}\r\n\r\nfunction handleActive(label: string | number) {\r\n  currentActive.value = label\r\n\r\n  updateMarkerPosition()\r\n  emit('update:active', label)\r\n  emitEvent(props.onChange as ChangeEvent, label)\r\n}\r\n\r\nfunction handleAdd() {\r\n  emitEvent(props.onAdd)\r\n}\r\n\r\nfunction handleClose(label: string | number) {\r\n  emitEvent(props.onClose as ChangeEvent, label)\r\n\r\n  requestAnimationFrame(updateMarkerPosition)\r\n}\r\n\r\nfunction updateMarkerPosition() {\r\n  const activeItem = Array.from(itemStates).find(item => item.label === currentActive.value)\r\n\r\n  if (activeItem?.el) {\r\n    if (props.placement === 'top' || props.placement === 'bottom') {\r\n      markerPosition.value = activeItem.el.offsetLeft\r\n      markerSize.value = activeItem.el.offsetWidth\r\n    } else {\r\n      markerPosition.value = activeItem.el.offsetTop\r\n      markerSize.value = activeItem.el.offsetHeight\r\n    }\r\n  } else {\r\n    markerPosition.value = 0\r\n    markerSize.value = 0\r\n  }\r\n}\r\n</script>\r\n\r\n<template>\r\n  <div ref=\"wrapper\" :class=\"className\" tabindex=\"-1\">\r\n    <ResizeObserver :on-resize=\"updateMarkerPosition\">\r\n      <div :class=\"[nh.be('extra'), nh.bem('extra', 'prefix')]\">\r\n        <div v-if=\"slots.prefix || props.slots.prefix\" :class=\"nh.be('prefix')\">\r\n          <slot name=\"prefix\">\r\n            <Renderer :renderer=\"props.slots.prefix\"></Renderer>\r\n          </slot>\r\n        </div>\r\n      </div>\r\n    </ResizeObserver>\r\n    <Scroll\r\n      ref=\"scroll\"\r\n      :class=\"nh.be('scroll')\"\r\n      :mode=\"scrollMode\"\r\n      :delta-x=\"40\"\r\n      :delta-y=\"40\"\r\n      scroll-tag=\"ul\"\r\n      :scroll-class=\"nh.be('list')\"\r\n      :scroll-attrs=\"{ role: 'tablist' }\"\r\n    >\r\n      <slot>\r\n        <TabNavItem\r\n          v-for=\"item in items\"\r\n          :key=\"item.label\"\r\n          :label=\"item.label\"\r\n          :icon=\"item.icon\"\r\n          :disabled=\"item.disabled\"\r\n          :closable=\"item.closable\"\r\n          @toggle=\"item.onToggle\"\r\n        >\r\n          {{ item.content || item.label }}\r\n        </TabNavItem>\r\n      </slot>\r\n      <li v-if=\"props.showAdd || slots.add || props.slots.add\" :class=\"nh.be('item')\" role=\"none\">\r\n        <div :class=\"nh.be('pad')\"></div>\r\n        <button type=\"button\" :class=\"nh.be('add')\" @click=\"handleAdd\">\r\n          <slot name=\"add\">\r\n            <Renderer :renderer=\"props.slots.add\">\r\n              <Icon v-bind=\"icons.plus\" :scale=\"+(icons.plus.scale || 1) * 1.2\"></Icon>\r\n            </Renderer>\r\n          </slot>\r\n        </button>\r\n      </li>\r\n      <div\r\n        v-if=\"!props.card\"\r\n        :class=\"nh.be('track')\"\r\n        role=\"none\"\r\n        :style=\"markerStyle\"\r\n      >\r\n        <slot name=\"marker\">\r\n          <Renderer :renderer=\"props.slots.marker\">\r\n            <div :class=\"nh.be('marker')\"></div>\r\n          </Renderer>\r\n        </slot>\r\n      </div>\r\n    </Scroll>\r\n    <ResizeObserver :on-resize=\"updateMarkerPosition\">\r\n      <div :class=\"[nh.be('extra'), nh.bem('extra', 'suffix')]\">\r\n        <div v-if=\"slots.suffix || props.slots.suffix\" :class=\"nh.be('suffix')\">\r\n          <slot name=\"suffix\">\r\n            <Renderer :renderer=\"props.slots.suffix\"></Renderer>\r\n          </slot>\r\n        </div>\r\n      </div>\r\n    </ResizeObserver>\r\n  </div>\r\n</template>\r\n"],"names":["props","useProps","__props","emit","__emit","slots","_useSlots","nh","useNameHelper","icons","useIcons","currentActive","ref","markerPosition","markerSize","itemStates","wrapper","useDisplay","updateMarkerPosition","scroll","className","computed","markerStyle","position","length","trackStyleMap","items","item","scrollMode","refreshLabels","debounceMinor","total","index","isNull","isActiveEmpty","provide","TAB_NAV_STATE","reactive","toRef","increaseItem","decreaseItem","handleActive","handleClose","watch","value","onMounted","__expose","handleAdd","label","emitEvent","activeItem","_createElementBlock","_createVNode","_unref","ResizeObserver","_createElementVNode","_normalizeClass","_renderSlot","_ctx","Renderer","Scroll","_Fragment","_renderList","_createBlock","TabNavItem","_createTextVNode","_toDisplayString","Icon","_mergeProps"],"mappings":"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"}