@leaflink/stash 49.4.1 → 50.0.0

package/dist/Tabs.vue_vue_type_script_setup_true_lang-l41hWkV4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.vue_vue_type_script_setup_true_lang-l41hWkV4.js","sources":["../src/components/Tabs/keys.ts","../src/components/Tabs/models.ts","../src/components/Tabs/Tabs.vue"],"sourcesContent":["import { Injection } from '../../../types/utils';\nimport { TabsInjection } from './models';\n\nexport const TABS_INJECTION: Injection<TabsInjection> = Object.freeze({\n  key: Symbol('TABS_INJECTION_KEY'),\n});\n","import { ComputedRef } from 'vue';\n\nexport enum TabVariant {\n  Line = 'line',\n  Enclosed = 'enclosed',\n}\n\nexport type TabVariants = `${TabVariant}`;\n\nexport interface TabsInjection {\n  activeTab: ComputedRef<string>;\n  variant: ComputedRef<TabVariants>;\n  setActiveTab: (newTabValue: string) => void;\n}\n","<script lang=\"ts\">\n  import { TabVariant, TabVariants } from './models';\n\n  export * from './keys';\n  export * from './models';\n\n  export interface TabsProps {\n    /**\n     * The currently active tab value\n     */\n    activeTab: string;\n\n    /**\n     * Tabs variant\n     */\n    variant?: TabVariants;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import debounce from 'lodash-es/debounce';\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, onBeforeUnmount, onDeactivated, onMounted, onUpdated, provide, Ref, ref, useCssModule } from 'vue';\n\n  import { DEBOUNCE } from '../../constants';\n  import { t } from '../../locale';\n  import Dropdown from '../Dropdown/Dropdown.vue';\n  import Icon from '../Icon/Icon.vue';\n  import { TABS_INJECTION } from './keys';\n\n  const emit = defineEmits<{\n    (e: 'update:activeTab', newTabValue: TabsProps['activeTab']): void;\n  }>();\n\n  const props = withDefaults(defineProps<TabsProps>(), {\n    variant: TabVariant.Line,\n  });\n  const classes = useCssModule();\n\n  const tabListEl = ref();\n  const moreDropdownMenuEl = ref();\n  const observer: Ref<IntersectionObserver | undefined> = ref(undefined);\n  const hasIntersectionObserver = 'IntersectionObserver' in window;\n  const overflowIds = ref<Set<string>>(new Set());\n  const moreDropdownWidth = ref(0);\n  const moreDropdownEl = ref<InstanceType<typeof Dropdown>>();\n  const moreMenuId = uniqueId('more-dropdown-menu-');\n  const isMoreMenuOpen = ref(false);\n\n  const currentActiveTab = computed({\n    get() {\n      return props.activeTab;\n    },\n    set(nv: TabsProps['activeTab']) {\n      emit('update:activeTab', nv);\n    },\n  });\n\n  function setActiveTab(newTabValue: TabsProps['activeTab']) {\n    currentActiveTab.value = newTabValue;\n  }\n\n  provide(TABS_INJECTION.key, {\n    activeTab: computed(() => currentActiveTab.value),\n    variant: computed(() => props.variant),\n    setActiveTab,\n  });\n\n  function initObserve() {\n    if (!hasIntersectionObserver) {\n      return;\n    }\n\n    if (!tabListEl.value) {\n      return;\n    }\n\n    const tabs = Array.from(tabListEl.value?.children as HTMLLIElement[]);\n    const options = {\n      root: tabListEl.value,\n      rootMargin: '0px',\n      threshold: Array.from({ length: 100 }).map((v, i) => (i + 1) / 100),\n    };\n\n    observer.value = new IntersectionObserver((entries) => {\n      entries.forEach((entry) => {\n        const dataId = entry.target.getAttribute('id') as string;\n        /**\n         * Check for partial intersection.\n         * Zooming out can result in ratio of approx 0.984\n         * Anything higher will result in nav items disappearing\n         */\n        if (entry.intersectionRatio > 0.94) {\n          // show tab, hide in dropdown\n          if (overflowIds.value.has(dataId)) {\n            overflowIds.value.delete(dataId);\n          }\n        } else {\n          // hide tab, show in dropdown\n          if (dataId && !overflowIds.value.has(dataId)) {\n            overflowIds.value.add(dataId);\n          }\n        }\n      });\n    }, options);\n\n    tabs.forEach((element) => {\n      observer.value?.observe(element);\n      if (overflowIds.value.has(element.getAttribute('id') as string)) {\n        element.classList.add('tw-invisible');\n      } else {\n        element.classList.remove('tw-invisible');\n      }\n    });\n\n    moreDropdownWidth.value = moreDropdownEl.value?.$el?.getBoundingClientRect().width || 0;\n\n    if (!moreDropdownMenuEl.value) {\n      return;\n    }\n\n    const dropdownList = Array.from(moreDropdownMenuEl.value.children as HTMLLIElement[]);\n    dropdownList.forEach((element) => {\n      const firstElementChild = element.firstElementChild as Element;\n      firstElementChild.className = '';\n      element.className = '';\n\n      element.classList.add(\n        classes['menu-tab'],\n        'tw-rounded',\n        'tw-text-sm',\n        'tw-p-1.5',\n        'tw-text-left',\n        'tw-cursor-pointer',\n        'tw-text-ice-700',\n        'hover:tw-text-white',\n        'hover:tw-bg-blue-500',\n        'aria-disabled:tw-text-ice-500',\n        'aria-disabled:tw-pointer-events-none',\n        'aria-disabled:hover:tw-text-ice-500',\n        'aria-disabled:hover:tw-bg-inherit',\n        'aria-disabled:hover:tw-cursor-default',\n        'aria-selected:tw-text-white',\n        'aria-selected:tw-bg-blue-500',\n      );\n\n      if (!overflowIds.value.has(element.getAttribute('id') as string)) {\n        element.classList.add('tw-hidden');\n      } else {\n        element.classList.remove('tw-hidden');\n      }\n\n      element.removeEventListener('click', () => {});\n    });\n  }\n\n  const debouncedInitObserve = debounce(initObserve, DEBOUNCE.FAST, { leading: true });\n\n  function destroyObserver() {\n    if (observer.value) {\n      observer.value.disconnect();\n      observer.value = undefined;\n    }\n  }\n\n  onMounted(() => {\n    initObserve();\n  });\n\n  onUpdated(() => {\n    destroyObserver();\n    debouncedInitObserve();\n  });\n\n  onDeactivated(() => {\n    destroyObserver();\n  });\n\n  onBeforeUnmount(() => {\n    destroyObserver();\n  });\n\n  function onMoreClick(toggleMoreDropdown) {\n    toggleMoreDropdown();\n    isMoreMenuOpen.value = !isMoreMenuOpen.value;\n  }\n</script>\n\n<template>\n  <div class=\"stash-tabs tw-relative\" role=\"tabList\" data-test=\"stash-tabs\">\n    <ul\n      ref=\"tabListEl\"\n      :style=\"{\n        width: `calc(100% - ${moreDropdownWidth}px)`,\n      }\"\n      class=\"stash-tabs-list tw-flex tw-items-end\"\n      :class=\"{\n        'stash-tabs-list--line': variant === 'line',\n        'stash-tabs-list--enclosed': variant === 'enclosed',\n        'tw-gap-6': variant === 'line',\n      }\"\n    >\n      <slot></slot>\n\n      <Dropdown v-if=\"overflowIds.size\" ref=\"moreDropdownEl\" class=\"!tw-absolute tw-right-0 tw-top-0\">\n        <template #toggle=\"{ toggle }\">\n          <button\n            aria-haspopup=\"menu\"\n            :aria-controls=\"moreMenuId\"\n            :aria-expanded=\"isMoreMenuOpen\"\n            class=\"tw-flex tw-cursor-pointer tw-items-center tw-justify-center tw-border-solid tw-px-6 tw-py-1.5 tw-text-sm tw-font-medium tw-text-blue-500 hover:tw-text-blue-700\"\n            :class=\"{ 'tw-border-t-4 tw-border-transparent': props.variant === 'enclosed' }\"\n            type=\"button\"\n            @click=\"onMoreClick(toggle)\"\n          >\n            {{ t('ll.more') }}\n            <Icon name=\"caret-down\" />\n          </button>\n        </template>\n        <template #default>\n          <ul :id=\"moreMenuId\" ref=\"moreDropdownMenuEl\" class=\"tw-space-y-1.5 tw-px-1.5 tw-pb-1.5\" role=\"menu\">\n            <slot></slot>\n          </ul>\n        </template>\n      </Dropdown>\n    </ul>\n  </div>\n</template>\n\n<style module>\n  .menu-tab > a {\n    /* prevents the global link styles to overwrite the overflowed tab styles */\n    &,\n    &:hover,\n    &:focus {\n      color: inherit;\n    }\n  }\n</style>\n"],"names":["TABS_INJECTION","TabVariant","emit","__emit","props","__props","classes","useCssModule","tabListEl","ref","moreDropdownMenuEl","observer","hasIntersectionObserver","overflowIds","moreDropdownWidth","moreDropdownEl","moreMenuId","uniqueId","isMoreMenuOpen","currentActiveTab","computed","nv","setActiveTab","newTabValue","provide","initObserve","tabs","_a","options","v","i","entries","entry","dataId","element","_c","_b","firstElementChild","debouncedInitObserve","debounce","DEBOUNCE","destroyObserver","onMounted","onUpdated","onDeactivated","onBeforeUnmount","onMoreClick","toggleMoreDropdown"],"mappings":"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"}