@leaflink/stash 42.4.4 → 42.5.1

package/dist/PageNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageNavigation.js","sources":["../src/components/PageNavigation/components/NavItem.vue","../src/components/PageNavigation/PageNavigation.vue"],"sourcesContent":["<script>\n  import isFunction from 'lodash-es/isFunction';\n\n  import Chip from '../../Chip/Chip.vue';\n\n  export default {\n    name: 'nav-item',\n\n    components: {\n      'll-chip': Chip,\n    },\n\n    inheritAttrs: false,\n\n    props: {\n      /**\n       * Used to display the bubble count, i.e. orders, messages\n       */\n      badge: {\n        type: [Number, String],\n        default: 0,\n      },\n\n      /**\n       * The background color of the badge.\n       * Currently limited to a subset of brand colors.\n       */\n      badgeColor: {\n        type: String,\n        default: 'blue',\n        validator: (value) => ['blue', 'red'].includes(value),\n      },\n\n      /**\n       * Private/inherited - Item index.\n       */\n      index: {\n        type: Number,\n        required: true,\n      },\n      /**\n       * Private/inherited - Whether the current tab `index` matches `activeIndex`\n       */\n      isActive: Boolean,\n      /**\n       * Private/inherited - Whether the item is inside the dropdown\n       */\n      isDropdown: Boolean,\n      /**\n       * Used to render an `<a>` tag. Denotes the target href of the link.\n       */\n      href: {\n        default: '',\n        type: String,\n      },\n      /**\n       * The nav item label\n       */\n      label: {\n        default: '',\n        type: String,\n      },\n      /**\n       * Used to render a `<router-link>`. Denotes the target route of the link.\n       * See: https://router.vuejs.org/api/#router-link\n       */\n      to: {\n        default: '',\n        type: [Object, String],\n      },\n      /**\n       * Will render a plain text item if true.\n       * Accepts a function to ensure the value is up-to-date, such as when it comes from vuex\n       */\n      disabled: {\n        default: false,\n        type: [Boolean, Function],\n      },\n    },\n\n    computed: {\n      isDisabled() {\n        if (isFunction(this.disabled)) {\n          return this.disabled();\n        }\n\n        return this.disabled;\n      },\n    },\n\n    methods: {\n      /**\n       * Customer Active Class matcher.\n       *\n       * This attempts to match the URL ignoring the path params.\n       */\n      hasActiveClass(path) {\n        if (path === this.$route.path) {\n          return true;\n        } else if (this.$route.path.includes(path)) {\n          const sliceIndex = (this.$route.path.length - this.$route.path.lastIndexOf('/')) * -1;\n          const parentPath = this.$route.path.slice(0, sliceIndex);\n\n          return path === parentPath;\n        }\n      },\n    },\n  };\n</script>\n\n<template>\n  <li v-if=\"isDisabled\" aria-disabled=\"true\" :data-id=\"index\" v-bind=\"$attrs\">\n    <span :class=\"[$style.link, { [$style['dropdown-link']]: isDropdown }, $style['is-disabled']]\">{{ label }}</span>\n  </li>\n  <template v-else>\n    <router-link v-if=\"to\" v-slot=\"{ route, navigate }\" custom :to=\"to\">\n      <li\n        role=\"tab\"\n        :data-id=\"index\"\n        :class=\"[{ [$style['is-active']]: hasActiveClass(route.path) }, 'cursor-pointer']\"\n        v-bind=\"$attrs\"\n        @click=\"navigate\"\n      >\n        <a :class=\"[$style.link, { [$style['dropdown-link']]: isDropdown }]\" :href=\"to?.name || to\">\n          {{ label }}\n          <ll-chip v-if=\"badge\" radius=\"pill\" shade=\"main\" size=\"small\" :class=\"$style.badge\" :color=\"badgeColor\">{{\n            badge\n          }}</ll-chip>\n        </a>\n      </li>\n    </router-link>\n    <li\n      v-else\n      role=\"tab\"\n      :aria-selected=\"isActive || null\"\n      :class=\"{ [$style['is-active']]: isActive }\"\n      :data-id=\"index\"\n      v-bind=\"$attrs\"\n    >\n      <a :class=\"[$style.link, { [$style['dropdown-link']]: isDropdown }]\" :href=\"href\">\n        {{ label }}\n        <ll-chip v-if=\"badge\" radius=\"pill\" shade=\"main\" size=\"small\" :class=\"$style.badge\" :color=\"badgeColor\">{{\n          badge\n        }}</ll-chip>\n      </a>\n    </li>\n  </template>\n</template>\n\n<style lang=\"scss\" module>\n  .link {\n    border-bottom: border(medium, transparent);\n    color: var(--color-ice-700);\n    display: block;\n    font-family: $font-family-primary;\n    font-weight: typo('h3', 'weight');\n    line-height: 1.75em;\n    padding: space(1) 0;\n    transition: color $primary-transition;\n    white-space: nowrap;\n\n    &:hover,\n    &:focus {\n      color: var(--color-blue);\n      outline: 0;\n      text-decoration: none;\n    }\n\n    .is-active & {\n      color: var(--color-blue);\n\n      &,\n      &:hover,\n      &:focus {\n        background-color: transparent;\n        border-bottom-color: var(--color-blue);\n      }\n\n      &:focus {\n        color: var(--color-blue);\n      }\n    }\n\n    &.is-disabled {\n      pointer-events: none;\n      color: var(--color-ice-500);\n    }\n  }\n\n  .dropdown-link {\n    border-bottom: 0;\n    border-radius: $border-radius;\n    font-size: typo('button', 'size');\n    height: space(4);\n    line-height: space(4);\n    padding: 0 space(1);\n    transition: none;\n\n    &:hover,\n    &:focus,\n    &:active {\n      background: var(--color-blue);\n      color: var(--color-white);\n      text-decoration: none;\n    }\n\n    .is-active &,\n    .is-active &:hover,\n    .is-active &:focus {\n      color: var(--color-blue);\n    }\n  }\n\n  .badge {\n    margin-left: 2px;\n  }\n</style>\n","<script>\n  import { t } from '../../locale';\n  import Dropdown from '../Dropdown/Dropdown.vue';\n  import Icon from '../Icon/Icon.vue';\n  import NavItem from './components/NavItem.vue';\n\n  export { default as NavItem } from './components/NavItem.vue';\n\n  export default {\n    name: 'll-page-navigation',\n\n    components: {\n      'll-dropdown': Dropdown,\n      'll-icon': Icon,\n      NavItem,\n    },\n\n    props: {\n      /**\n       * Index of active tab (zero-based)\n       */\n      activeIndex: {\n        type: Number,\n        default: 0,\n      },\n      /**\n       * Array of tabs. A `tab` is an object containing a `label` and either an `href` | `to`\n       */\n      items: {\n        type: Array,\n        default: () => [],\n      },\n    },\n\n    data() {\n      return {\n        hasIntersectionObserver: 'IntersectionObserver' in window,\n        observer: undefined,\n        overflowIds: [],\n        toggleWidth: 0,\n        moreText: t('ll.pageNavigation.more'),\n      };\n    },\n\n    watch: {\n      items() {\n        this.destroyObserver();\n        this.observe();\n      },\n    },\n\n    mounted() {\n      this.observe();\n    },\n\n    activated() {\n      this.observe();\n    },\n\n    deactivated() {\n      this.destroyObserver();\n    },\n\n    beforeUnmount() {\n      this.destroyObserver();\n    },\n\n    methods: {\n      /**\n       * Event emitted when a tab is clicked, with the target tab index.\n       */\n      observe() {\n        if (this.hasIntersectionObserver) {\n          const tabs = Array.from(this.$refs.tabList.children);\n\n          const options = {\n            root: this.$refs.tabList,\n            rootMargin: '0px 0px 0px 0px',\n            threshold: Array.from({ length: 100 }).map((v, i) => (i + 1) / 100),\n          };\n\n          this.observer = new IntersectionObserver((entries) => {\n            entries.forEach((entry) => {\n              const dataId = entry.target.getAttribute('data-id');\n\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.96) {\n                // show tab, hide in dropdown\n                if (this.overflowIds.includes(dataId)) {\n                  this.overflowIds.splice(this.overflowIds.indexOf(dataId), 1);\n                }\n              } else {\n                // hide tab, show in dropdown\n                if (!this.overflowIds.includes(dataId)) {\n                  this.overflowIds.push(dataId);\n                }\n              }\n            });\n          }, options);\n\n          tabs.forEach((element) => {\n            this.observer.observe(element);\n          });\n\n          this.toggleWidth = this.$refs.toggle.$el?.getBoundingClientRect().width;\n        }\n      },\n\n      destroyObserver() {\n        if (this.observer) {\n          this.observer.disconnect();\n          this.observer = undefined;\n        }\n      },\n    },\n  };\n</script>\n\n<template>\n  <div class=\"container\">\n    <nav :class=\"[$style.tabs, { [$style['is-scrollable']]: !hasIntersectionObserver }]\">\n      <ul\n        ref=\"tabList\"\n        :class=\"$style.list\"\n        :style=\"{\n          width: `calc(100% - ${toggleWidth}px)`,\n        }\"\n      >\n        <NavItem\n          v-for=\"(item, index) in items\"\n          :key=\"index\"\n          :class=\"[$style.item, { [$style['is-invisible']]: overflowIds.includes(`${index}`) }]\"\n          :badge=\"item.badge\"\n          :badge-color=\"item.badgeColor\"\n          :data-id=\"index\"\n          :href=\"item.href\"\n          :index=\"index\"\n          :is-active=\"index === activeIndex\"\n          :label=\"item.label\"\n          :to=\"item.to\"\n          :disabled=\"item.disabled\"\n        />\n      </ul>\n      <ll-dropdown\n        ref=\"toggle\"\n        :class=\"[$style.dropdown, { [$style['is-visible']]: overflowIds.length }]\"\n        :offset=\"{ x: -1 }\"\n      >\n        <template #toggle=\"{ toggle }\">\n          <button\n            aria-haspopup=\"true\"\n            :class=\"[$style.link, $style['dropdown-toggle']]\"\n            type=\"button\"\n            aria-expanded=\"false\"\n            @click=\"toggle\"\n          >\n            {{ moreText }}\n            <ll-icon name=\"caret-down\" :class=\"$style['dropdown-icon']\" />\n          </button>\n        </template>\n\n        <template #default>\n          <ul :class=\"$style['dropdown-list']\">\n            <NavItem\n              v-for=\"(item, index) in items\"\n              :key=\"index\"\n              :class=\"{ hidden: !overflowIds.includes(`${index}`) }\"\n              :href=\"item.href\"\n              :index=\"index\"\n              :is-active=\"index === activeIndex\"\n              :is-dropdown=\"true\"\n              :label=\"item.label\"\n              :to=\"item.to\"\n              :disabled=\"item?.disabled ?? false\"\n            />\n          </ul>\n        </template>\n      </ll-dropdown>\n    </nav>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n  .link {\n    border-bottom: border(medium, transparent);\n    color: var(--color-ice-700);\n    display: block;\n    font-family: $font-family-primary;\n    font-weight: typo('h3', 'weight');\n    line-height: 1.75em;\n    padding: space(1) 0;\n    transition: color $secondary-transition;\n    white-space: nowrap;\n\n    &:hover,\n    &:focus {\n      color: var(--color-blue);\n      outline: 0;\n      text-decoration: none;\n    }\n\n    .is-active & {\n      color: var(--color-blue);\n\n      &,\n      &:hover,\n      &:focus {\n        background-color: transparent;\n        border-bottom-color: var(--color-blue);\n      }\n\n      &:focus {\n        color: var(--color-blue);\n      }\n    }\n  }\n\n  .tabs {\n    position: relative;\n\n    &.is-scrollable {\n      margin-right: 0;\n      max-width: 100%;\n      overflow: auto;\n    }\n  }\n\n  .list {\n    display: inline-flex;\n    list-style: none;\n    overflow: hidden;\n    padding: 0;\n    position: relative;\n  }\n\n  .item {\n    padding: 0 space(2) 0 0;\n\n    @include breakpoint('md') {\n      padding-right: space(3);\n    }\n\n    &.is-active {\n      transition: none !important;\n    }\n  }\n\n  .is-invisible {\n    visibility: hidden;\n  }\n\n  .tabs .dropdown {\n    display: inline-flex;\n    height: 100%;\n    position: absolute;\n    right: 0;\n    top: 0;\n    visibility: hidden;\n\n    &.is-visible {\n      visibility: visible;\n    }\n  }\n\n  .dropdown-list {\n    @include elevation('high');\n\n    background: var(--color-white);\n    border: none;\n    border-radius: $border-radius;\n    display: block;\n    list-style: none;\n    margin-top: 0;\n    min-width: 140px;\n    padding: space(1);\n    position: static;\n    right: -(space(1));\n    top: 100%;\n    z-index: z-index(control);\n\n    .is-open & {\n      display: block;\n    }\n\n    &::before {\n      @include corner;\n\n      border-left: border(thin, var(--color-blue));\n      border-top: border(thin, var(--color-blue));\n      content: '';\n      display: none;\n      right: space(2);\n    }\n  }\n\n  .dropdown-toggle {\n    background: transparent;\n    border: 0;\n    border-bottom: border(medium, transparent);\n    color: var(--color-blue);\n    display: flex;\n    padding-left: space(1);\n\n    &:hover,\n    &:focus {\n      color: var(--color-blue-hover);\n    }\n\n    .has-active & {\n      border-bottom-color: var(--color-blue);\n    }\n  }\n\n  .dropdown-icon {\n    height: icon('default', 'height');\n    position: relative;\n    top: 1px;\n    vertical-align: bottom;\n    width: icon('default', 'width');\n  }\n</style>\n"],"names":["_sfc_main","Chip","value","isFunction","path","sliceIndex","parentPath","$options","_openBlock","_createElementBlock","_mergeProps","$props","_ctx","_createElementVNode","_normalizeClass","_Fragment","_createBlock","_component_router_link","route","navigate","_a","_createTextVNode","_toDisplayString","_component_ll_chip","Dropdown","Icon","NavItem","t","tabs","options","v","i","entries","entry","dataId","element","_hoisted_1","$data","_normalizeStyle","_renderList","item","index","_component_NavItem","_createVNode","_component_ll_dropdown","_withCtx","toggle","_component_ll_icon"],"mappings":"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"}
+{"version":3,"file":"PageNavigation.js","sources":["../src/components/PageNavigation/components/NavItem.vue","../src/components/PageNavigation/PageNavigation.vue"],"sourcesContent":["<script>\n  import isFunction from 'lodash-es/isFunction';\n\n  import Chip from '../../Chip/Chip.vue';\n\n  export default {\n    name: 'nav-item',\n\n    components: {\n      'll-chip': Chip,\n    },\n\n    inheritAttrs: false,\n\n    props: {\n      /**\n       * Used to display the bubble count, i.e. orders, messages\n       */\n      badge: {\n        type: [Number, String],\n        default: 0,\n      },\n\n      /**\n       * The background color of the badge.\n       * Currently limited to a subset of brand colors.\n       */\n      badgeColor: {\n        type: String,\n        default: 'blue',\n        validator: (value) => ['blue', 'red'].includes(value),\n      },\n\n      /**\n       * Private/inherited - Item index.\n       */\n      index: {\n        type: Number,\n        required: true,\n      },\n      /**\n       * Private/inherited - Whether the current tab `index` matches `activeIndex`\n       */\n      isActive: Boolean,\n      /**\n       * Private/inherited - Whether the item is inside the dropdown\n       */\n      isDropdown: Boolean,\n      /**\n       * Used to render an `<a>` tag. Denotes the target href of the link.\n       */\n      href: {\n        default: '',\n        type: String,\n      },\n      /**\n       * The nav item label\n       */\n      label: {\n        default: '',\n        type: String,\n      },\n      /**\n       * Used to render a `<router-link>`. Denotes the target route of the link.\n       * See: https://router.vuejs.org/api/#router-link\n       */\n      to: {\n        default: '',\n        type: [Object, String],\n      },\n      /**\n       * Will render a plain text item if true.\n       * Accepts a function to ensure the value is up-to-date, such as when it comes from vuex\n       */\n      disabled: {\n        default: false,\n        type: [Boolean, Function],\n      },\n    },\n\n    computed: {\n      isDisabled() {\n        if (isFunction(this.disabled)) {\n          return this.disabled();\n        }\n\n        return this.disabled;\n      },\n    },\n\n    methods: {\n      /**\n       * Customer Active Class matcher.\n       *\n       * This attempts to match the URL ignoring the path params.\n       */\n      hasActiveClass(path) {\n        if (path === this.$route.path) {\n          return true;\n        } else if (this.$route.path.includes(path)) {\n          const sliceIndex = (this.$route.path.length - this.$route.path.lastIndexOf('/')) * -1;\n          const parentPath = this.$route.path.slice(0, sliceIndex);\n\n          return path === parentPath;\n        }\n      },\n    },\n  };\n</script>\n\n<template>\n  <li v-if=\"isDisabled\" aria-disabled=\"true\" :data-id=\"index\" v-bind=\"$attrs\">\n    <span :class=\"[$style.link, { [$style['dropdown-link']]: isDropdown }, $style['is-disabled']]\">{{ label }}</span>\n  </li>\n  <template v-else>\n    <router-link v-if=\"to\" v-slot=\"{ route, navigate }\" custom :to=\"to\">\n      <li\n        role=\"tab\"\n        :data-id=\"index\"\n        :class=\"[{ [$style['is-active']]: hasActiveClass(route.path) }, 'cursor-pointer']\"\n        v-bind=\"$attrs\"\n        @click=\"navigate\"\n      >\n        <a :class=\"[$style.link, { [$style['dropdown-link']]: isDropdown }]\" :href=\"to?.name || to\">\n          {{ label }}\n          <ll-chip v-if=\"badge\" radius=\"pill\" shade=\"main\" size=\"small\" :class=\"$style.badge\" :color=\"badgeColor\">{{\n            badge\n          }}</ll-chip>\n        </a>\n      </li>\n    </router-link>\n    <li\n      v-else\n      role=\"tab\"\n      :aria-selected=\"isActive || null\"\n      :class=\"{ [$style['is-active']]: isActive }\"\n      :data-id=\"index\"\n      v-bind=\"$attrs\"\n    >\n      <a :class=\"[$style.link, { [$style['dropdown-link']]: isDropdown }]\" :href=\"href\">\n        {{ label }}\n        <ll-chip v-if=\"badge\" radius=\"pill\" shade=\"main\" size=\"small\" :class=\"$style.badge\" :color=\"badgeColor\">{{\n          badge\n        }}</ll-chip>\n      </a>\n    </li>\n  </template>\n</template>\n\n<style lang=\"scss\" module>\n  .link {\n    border-bottom: border(medium, transparent);\n    color: var(--color-ice-700);\n    display: block;\n    font-family: $font-family-primary;\n    font-weight: typo('h3', 'weight');\n    line-height: 1.75em;\n    padding: space(1) 0;\n    transition: color $primary-transition;\n    white-space: nowrap;\n\n    &:hover,\n    &:focus {\n      color: var(--color-blue);\n      outline: 0;\n      text-decoration: none;\n    }\n\n    .is-active & {\n      color: var(--color-blue);\n\n      &,\n      &:hover,\n      &:focus {\n        background-color: transparent;\n        border-bottom-color: var(--color-blue);\n      }\n\n      &:focus {\n        color: var(--color-blue);\n      }\n    }\n\n    &.is-disabled {\n      pointer-events: none;\n      color: var(--color-ice-500);\n    }\n  }\n\n  .dropdown-link {\n    border-bottom: 0;\n    border-radius: $border-radius;\n    font-size: typo('button', 'size');\n    height: space(4);\n    line-height: space(4);\n    padding: 0 space(1);\n    transition: none;\n\n    &:hover,\n    &:focus,\n    &:active {\n      background: var(--color-blue);\n      color: var(--color-white);\n      text-decoration: none;\n    }\n\n    .is-active &,\n    .is-active &:hover,\n    .is-active &:focus {\n      color: var(--color-blue);\n    }\n  }\n\n  .badge {\n    margin-left: 2px;\n  }\n</style>\n","<script>\n  import { t } from '../../locale';\n  import Dropdown from '../Dropdown/Dropdown.vue';\n  import Icon from '../Icon/Icon.vue';\n  import NavItem from './components/NavItem.vue';\n\n  export { default as NavItem } from './components/NavItem.vue';\n\n  export default {\n    name: 'll-page-navigation',\n\n    components: {\n      'll-dropdown': Dropdown,\n      'll-icon': Icon,\n      NavItem,\n    },\n\n    props: {\n      /**\n       * Index of active tab (zero-based)\n       */\n      activeIndex: {\n        type: Number,\n        default: 0,\n      },\n      /**\n       * Array of tabs. A `tab` is an object containing a `label` and either an `href` | `to`\n       */\n      items: {\n        type: Array,\n        default: () => [],\n      },\n    },\n\n    data() {\n      return {\n        hasIntersectionObserver: 'IntersectionObserver' in window,\n        observer: undefined,\n        overflowIds: [],\n        toggleWidth: 0,\n        moreText: t('ll.pageNavigation.more'),\n      };\n    },\n\n    watch: {\n      items() {\n        this.destroyObserver();\n        this.observe();\n      },\n    },\n\n    mounted() {\n      this.observe();\n    },\n\n    activated() {\n      this.observe();\n    },\n\n    deactivated() {\n      this.destroyObserver();\n    },\n\n    beforeUnmount() {\n      this.destroyObserver();\n    },\n\n    methods: {\n      /**\n       * Event emitted when a tab is clicked, with the target tab index.\n       */\n      observe() {\n        if (this.hasIntersectionObserver) {\n          const tabs = Array.from(this.$refs.tabList.children);\n\n          const options = {\n            root: this.$refs.tabList,\n            rootMargin: '0px 0px 0px 0px',\n            threshold: Array.from({ length: 100 }).map((v, i) => (i + 1) / 100),\n          };\n\n          this.observer = new IntersectionObserver((entries) => {\n            entries.forEach((entry) => {\n              const dataId = entry.target.getAttribute('data-id');\n\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.96) {\n                // show tab, hide in dropdown\n                if (this.overflowIds.includes(dataId)) {\n                  this.overflowIds.splice(this.overflowIds.indexOf(dataId), 1);\n                }\n              } else {\n                // hide tab, show in dropdown\n                if (!this.overflowIds.includes(dataId)) {\n                  this.overflowIds.push(dataId);\n                }\n              }\n            });\n          }, options);\n\n          tabs.forEach((element) => {\n            this.observer.observe(element);\n          });\n\n          this.toggleWidth = this.$refs.toggle.$el?.getBoundingClientRect().width;\n        }\n      },\n\n      destroyObserver() {\n        if (this.observer) {\n          this.observer.disconnect();\n          this.observer = undefined;\n        }\n      },\n    },\n  };\n</script>\n\n<template>\n  <div class=\"container\">\n    <nav :class=\"[$style.tabs, { [$style['is-scrollable']]: !hasIntersectionObserver }]\">\n      <ul\n        ref=\"tabList\"\n        :class=\"$style.list\"\n        :style=\"{\n          width: `calc(100% - ${toggleWidth}px)`,\n        }\"\n      >\n        <NavItem\n          v-for=\"(item, index) in items\"\n          :key=\"index\"\n          :class=\"[$style.item, { [$style['is-invisible']]: overflowIds.includes(`${index}`) }]\"\n          :badge=\"item.badge\"\n          :badge-color=\"item.badgeColor\"\n          :data-id=\"index\"\n          :href=\"item.href\"\n          :index=\"index\"\n          :is-active=\"index === activeIndex\"\n          :label=\"item.label\"\n          :to=\"item.to\"\n          :disabled=\"item.disabled\"\n        />\n      </ul>\n      <ll-dropdown\n        ref=\"toggle\"\n        :class=\"[$style.dropdown, { [$style['is-visible']]: overflowIds.length }]\"\n        :offset=\"{ x: -1 }\"\n      >\n        <template #toggle=\"{ toggle }\">\n          <button\n            aria-haspopup=\"true\"\n            :class=\"[$style.link, $style['dropdown-toggle']]\"\n            type=\"button\"\n            aria-expanded=\"false\"\n            @click=\"toggle\"\n          >\n            {{ moreText }}\n            <ll-icon name=\"caret-down\" :class=\"$style['dropdown-icon']\" />\n          </button>\n        </template>\n\n        <template #default>\n          <ul :class=\"$style['dropdown-list']\">\n            <NavItem\n              v-for=\"(item, index) in items\"\n              :key=\"index\"\n              :class=\"{ hidden: !overflowIds.includes(`${index}`) }\"\n              :href=\"item.href\"\n              :index=\"index\"\n              :is-active=\"index === activeIndex\"\n              :is-dropdown=\"true\"\n              :label=\"item.label\"\n              :to=\"item.to\"\n              :disabled=\"item?.disabled ?? false\"\n            />\n          </ul>\n        </template>\n      </ll-dropdown>\n    </nav>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n  .link {\n    border-bottom: border(medium, transparent);\n    color: var(--color-ice-700);\n    display: block;\n    font-family: $font-family-primary;\n    font-weight: typo('h3', 'weight');\n    line-height: 1.75em;\n    padding: space(1) 0;\n    transition: color $secondary-transition;\n    white-space: nowrap;\n\n    &:hover,\n    &:focus {\n      color: var(--color-blue);\n      outline: 0;\n      text-decoration: none;\n    }\n\n    .is-active & {\n      color: var(--color-blue);\n\n      &,\n      &:hover,\n      &:focus {\n        background-color: transparent;\n        border-bottom-color: var(--color-blue);\n      }\n\n      &:focus {\n        color: var(--color-blue);\n      }\n    }\n  }\n\n  .tabs {\n    position: relative;\n\n    &.is-scrollable {\n      margin-right: 0;\n      max-width: 100%;\n      overflow: auto;\n    }\n  }\n\n  .list {\n    display: inline-flex;\n    list-style: none;\n    overflow: hidden;\n    padding: 0;\n    position: relative;\n  }\n\n  .item {\n    padding: 0 space(2) 0 0;\n\n    @include breakpoint('md') {\n      padding-right: space(3);\n    }\n\n    &.is-active {\n      transition: none !important;\n    }\n  }\n\n  .is-invisible {\n    visibility: hidden;\n  }\n\n  .tabs .dropdown {\n    display: inline-flex;\n    height: 100%;\n    position: absolute;\n    right: 0;\n    top: 0;\n    visibility: hidden;\n\n    &.is-visible {\n      visibility: visible;\n    }\n  }\n\n  .dropdown-list {\n    @include elevation('high');\n\n    background: var(--color-white);\n    border: none;\n    border-radius: $border-radius;\n    display: block;\n    list-style: none;\n    margin-top: 0;\n    min-width: 140px;\n    padding: space(1);\n    position: static;\n    right: -(space(1));\n    top: 100%;\n    z-index: z-index(control);\n\n    .is-open & {\n      display: block;\n    }\n\n    &::before {\n      @include corner;\n\n      border-left: border(thin, var(--color-blue));\n      border-top: border(thin, var(--color-blue));\n      content: '';\n      display: none;\n      right: space(2);\n    }\n  }\n\n  .dropdown-toggle {\n    background: transparent;\n    border: 0;\n    border-bottom: border(medium, transparent);\n    color: var(--color-blue);\n    display: flex;\n    padding-left: space(1);\n\n    &:hover,\n    &:focus {\n      color: var(--color-blue-hover);\n    }\n\n    .has-active & {\n      border-bottom-color: var(--color-blue);\n    }\n  }\n\n  .dropdown-icon {\n    height: icon('default', 'height');\n    position: relative;\n    top: 1px;\n    vertical-align: bottom;\n    width: icon('default', 'width');\n  }\n</style>\n"],"names":["_sfc_main","Chip","value","isFunction","path","sliceIndex","parentPath","$options","_openBlock","_createElementBlock","_mergeProps","$props","_ctx","_createElementVNode","_normalizeClass","_Fragment","_createBlock","_component_router_link","route","navigate","_a","_createTextVNode","_toDisplayString","_component_ll_chip","Dropdown","Icon","NavItem","t","tabs","options","v","i","entries","entry","dataId","element","_hoisted_1","$data","_normalizeStyle","_renderList","item","index","_component_NavItem","_createVNode","_component_ll_dropdown","_withCtx","toggle","_component_ll_icon"],"mappings":"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"}

package/dist/Paginate.js

@@ -1,12 +1,10 @@
-import { defineComponent as w, useCssModule as y, computed as S, openBlock as r, createElementBlock as i, createElementVNode as c, normalizeClass as o, unref as l, createVNode as f, Fragment as m, renderList as x, createCommentVNode as p, toDisplayString as z } from "vue";
-import g from "./Icon.js";
+import { defineComponent as w, useCssModule as y, computed as S, openBlock as r, createElementBlock as l, createElementVNode as c, normalizeClass as o, unref as i, createVNode as f, Fragment as g, renderList as x, createCommentVNode as p, toDisplayString as z } from "vue";
+import m from "./Icon.js";
 import { s as M } from "./Paginate.vue_used_vue_type_style_index_0_lang.module-e579235f.js";
 import { _ as E } from "./_plugin-vue_export-helper-dad06003.js";
-import "./Icon.vue_used_vue_type_style_index_0_lang.module-d2507af3.js";
-import "./uniqueId-847efe53.js";
-import "./toString-7d5bf363.js";
-import "./isObjectLike-54341556.js";
+import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
+import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 const L = {
   class: "stash-paginate tw-flex tw-justify-center",
   "data-test": "stash-paginate"
@@ -20,63 +18,63 @@ const L = {
   },
   emits: ["set-page"],
   setup(h, { emit: v }) {
-    const e = h, n = y(), s = S(() => Math.ceil(e.listLength / e.pageSize));
-    function u(t) {
-      v("set-page", t);
+    const t = h, n = y(), s = S(() => Math.ceil(t.listLength / t.pageSize));
+    function u(e) {
+      v("set-page", e);
     }
     function P() {
-      e.currentPage < s.value && u(e.currentPage + 1);
+      t.currentPage < s.value && u(t.currentPage + 1);
     }
     function _() {
-      e.currentPage > 1 && u(e.currentPage - 1);
+      t.currentPage > 1 && u(t.currentPage - 1);
     }
-    function b(t) {
-      const d = Math.abs(e.currentPage - t);
-      return s.value < 10 || t === 1 || t === s.value || e.currentPage < 6 && t < 8 || s.value - e.currentPage < 5 && s.value - t < 7 || d < 3;
+    function b(e) {
+      const d = Math.abs(t.currentPage - e);
+      return s.value < 10 || e === 1 || e === s.value || t.currentPage < 6 && e < 8 || s.value - t.currentPage < 5 && s.value - e < 7 || d < 3;
     }
-    function k(t) {
-      return s.value > 9 && e.currentPage > 5 && t === 2;
+    function k(e) {
+      return s.value > 9 && t.currentPage > 5 && e === 2;
     }
-    function C(t) {
-      return s.value > 9 && s.value - e.currentPage > 4 && t === s.value - 1;
+    function C(e) {
+      return s.value > 9 && s.value - t.currentPage > 4 && e === s.value - 1;
     }
-    return (t, d) => (r(), i("div", L, [
+    return (e, d) => (r(), l("div", L, [
       c("ul", {
-        class: o(["stash-paginate__list tw-flex", l(n).pagination]),
+        class: o(["stash-paginate__list tw-flex", i(n).pagination]),
         "data-test": "stash-paginate|list"
       }, [
         c("button", {
           "data-test": "stash-paginate|prev-page",
-          class: o([l(n).prev, { [l(n)["is-disabled"]]: t.currentPage === 1 }]),
+          class: o([i(n).prev, { [i(n)["is-disabled"]]: e.currentPage === 1 }]),
           onClick: _
         }, [
-          f(g, {
+          f(m, {
             size: "small",
             name: "chevron-left"
           })
         ], 2),
-        (r(!0), i(m, null, x(s.value, (a) => (r(), i(m, null, [
-          k(a) ? (r(), i("button", {
+        (r(!0), l(g, null, x(s.value, (a) => (r(), l(g, null, [
+          k(a) ? (r(), l("button", {
             key: `${a}-ellipsis`,
             "data-test": "stash-paginate|first-ellipsis"
           }, " … ")) : p("", !0),
-          b(a) ? (r(), i("button", {
+          b(a) ? (r(), l("button", {
             key: a,
             "data-test": "stash-paginate|page-number",
-            class: o({ [l(n)["is-active"]]: t.currentPage === a }),
+            class: o({ [i(n)["is-active"]]: e.currentPage === a }),
             onClick: (B) => u(a)
           }, z(a), 11, $)) : p("", !0),
-          C(a) ? (r(), i("button", {
+          C(a) ? (r(), l("button", {
             key: `${a}-ellipsis`,
             "data-test": "stash-paginate|last-ellipsis"
           }, " … ")) : p("", !0)
         ], 64))), 256)),
         c("button", {
           "data-test": "stash-paginate|next-page",
-          class: o([l(n).next, { [l(n)["is-disabled"]]: t.currentPage === s.value }]),
+          class: o([i(n).next, { [i(n)["is-disabled"]]: e.currentPage === s.value }]),
           onClick: P
         }, [
-          f(g, {
+          f(m, {
             size: "small",
             class: "tw-rotate-180",
             name: "chevron-left"
@@ -87,8 +85,8 @@ const L = {
   }
 }), V = {
   $style: M
-}, K = /* @__PURE__ */ E(N, [["__cssModules", V]]);
+}, H = /* @__PURE__ */ E(N, [["__cssModules", V]]);
 export {
-  K as default
+  H as default
 };
 //# sourceMappingURL=Paginate.js.map

package/dist/Paginate.js.map

@@ -1 +1 @@
-{"version":3,"file":"Paginate.js","sources":["../src/components/Paginate/Paginate.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, useCssModule } from 'vue';\n\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({\n    name: 'll-paginate',\n  });\n\n  export interface PaginateProps {\n    /**\n     * Current page number\n     */\n    currentPage?: number;\n    /**\n     * Total number of items in list\n     */\n    listLength?: number;\n    /**\n     * Number of items per page\n     */\n    pageSize?: number;\n  }\n\n  const props = withDefaults(defineProps<PaginateProps>(), {\n    currentPage: 1,\n    listLength: 1,\n    pageSize: 50,\n  });\n\n  const emit =\n    defineEmits<{\n      /**\n       * Emitted when the page number changes.\n       */\n      (e: 'set-page', pageNumber: number): void;\n    }>();\n\n  const classes = useCssModule();\n\n  const pages = computed(() => Math.ceil(props.listLength / props.pageSize));\n\n  /**\n   * Emits current page to list view.\n   */\n  function updatePage(currentPage: number) {\n    emit('set-page', currentPage);\n  }\n\n  /**\n   * Sets current page to next page\n   */\n  function next() {\n    if (props.currentPage < pages.value) {\n      updatePage(props.currentPage + 1);\n    }\n  }\n\n  /**\n   * Sets current page to previous page\n   */\n  function prev() {\n    if (props.currentPage > 1) {\n      updatePage(props.currentPage - 1);\n    }\n  }\n\n  /**\n   * Determines whether to show page\n   * @returns {boolean} - should show page in pagination component\n   */\n  function shouldShowPage(page: number): boolean {\n    const pageDiff = Math.abs(props.currentPage - page);\n\n    if (\n      pages.value < 10 ||\n      page === 1 ||\n      page === pages.value ||\n      (props.currentPage < 6 && page < 8) ||\n      (pages.value - props.currentPage < 5 && pages.value - page < 7) ||\n      pageDiff < 3\n    ) {\n      return true;\n    }\n\n    return false;\n  }\n\n  /**\n   * Determines whether to show the leading ellipsis\n   * @returns {boolean} should show or not\n   */\n  function shouldShowFirstEllipsis(page: number): boolean {\n    return pages.value > 9 && props.currentPage > 5 && page === 2;\n  }\n\n  /**\n   * Determines whether to show the trailing ellipsis\n   * @returns {boolean} should show or not\n   */\n  function shouldShowLastEllipsis(page: number): boolean {\n    return pages.value > 9 && pages.value - props.currentPage > 4 && page === pages.value - 1;\n  }\n</script>\n\n<template>\n  <div class=\"stash-paginate tw-flex tw-justify-center\" data-test=\"stash-paginate\">\n    <ul class=\"stash-paginate__list tw-flex\" :class=\"classes.pagination\" data-test=\"stash-paginate|list\">\n      <button\n        data-test=\"stash-paginate|prev-page\"\n        :class=\"[classes.prev, { [classes['is-disabled']]: currentPage === 1 }]\"\n        @click=\"prev\"\n      >\n        <Icon size=\"small\" name=\"chevron-left\" />\n      </button>\n      <template v-for=\"page in pages\">\n        <button\n          v-if=\"shouldShowFirstEllipsis(page)\"\n          :key=\"`${page}-ellipsis`\"\n          data-test=\"stash-paginate|first-ellipsis\"\n        >\n          &#x2026;\n        </button>\n        <button\n          v-if=\"shouldShowPage(page)\"\n          :key=\"page\"\n          data-test=\"stash-paginate|page-number\"\n          :class=\"{ [classes['is-active']]: currentPage === page }\"\n          @click=\"updatePage(page)\"\n        >\n          {{ page }}\n        </button>\n        <button v-if=\"shouldShowLastEllipsis(page)\" :key=\"`${page}-ellipsis`\" data-test=\"stash-paginate|last-ellipsis\">\n          &#x2026;\n        </button>\n      </template>\n      <button\n        data-test=\"stash-paginate|next-page\"\n        :class=\"[classes.next, { [classes['is-disabled']]: currentPage === pages }]\"\n        @click=\"next\"\n      >\n        <Icon size=\"small\" class=\"tw-rotate-180\" name=\"chevron-left\" />\n      </button>\n    </ul>\n  </div>\n</template>\n\n<style module>\n  .pagination {\n    /* Todo: We shouldn't really be making assumptions about the outer spacing of the pagination component */\n    margin-top: theme(spacing.12);\n    z-index: 0;\n\n    a,\n    button {\n      @apply tw-border tw-border-solid tw-border-ice-200;\n      align-items: center;\n      background-color: theme(colors.white);\n      color: theme(colors.blue.DEFAULT);\n      cursor: pointer;\n      display: flex;\n      height: theme(height.input);\n      justify-content: center;\n      margin: 0 0 0 -1px;\n      width: theme(height.input);\n\n      &.prev {\n        border-bottom-left-radius: theme(borderRadius.DEFAULT);\n        border-top-left-radius: theme(borderRadius.DEFAULT);\n      }\n\n      &.next {\n        border-bottom-right-radius: theme(borderRadius.DEFAULT);\n        border-top-right-radius: theme(borderRadius.DEFAULT);\n      }\n\n      &:focus {\n        outline: none;\n      }\n\n      &:hover {\n        text-decoration: none;\n      }\n\n      &.is-active {\n        background-color: theme(colors.blue.DEFAULT);\n        color: theme(colors.white);\n        pointer-events: none;\n        z-index: theme(zIndex.control);\n      }\n\n      &:hover,\n      &.is-active {\n        @apply tw-border tw-border-solid tw-border-blue;\n        position: relative;\n      }\n\n      &.is-disabled {\n        cursor: not-allowed;\n        opacity: 0.5;\n      }\n    }\n  }\n</style>\n"],"names":["classes","useCssModule","pages","computed","props","updatePage","currentPage","emit","next","prev","shouldShowPage","page","pageDiff","shouldShowFirstEllipsis","shouldShowLastEllipsis"],"mappings":";;;;;;;;;;;;;;;;;;;;;;iBAsCQA,IAAUC,KAEVC,IAAQC,EAAS,MAAM,KAAK,KAAKC,EAAM,aAAaA,EAAM,QAAQ,CAAC;AAKzE,aAASC,EAAWC,GAAqB;AACvC,MAAAC,EAAK,YAAYD,CAAW;AAAA,IAC9B;AAKA,aAASE,IAAO;AACV,MAAAJ,EAAM,cAAcF,EAAM,SACjBG,EAAAD,EAAM,cAAc,CAAC;AAAA,IAEpC;AAKA,aAASK,IAAO;AACV,MAAAL,EAAM,cAAc,KACXC,EAAAD,EAAM,cAAc,CAAC;AAAA,IAEpC;AAMA,aAASM,EAAeC,GAAuB;AAC7C,YAAMC,IAAW,KAAK,IAAIR,EAAM,cAAcO,CAAI;AAGhD,aAAAT,EAAM,QAAQ,MACdS,MAAS,KACTA,MAAST,EAAM,SACdE,EAAM,cAAc,KAAKO,IAAO,KAChCT,EAAM,QAAQE,EAAM,cAAc,KAAKF,EAAM,QAAQS,IAAO,KAC7DC,IAAW;AAAA,IAMf;AAMA,aAASC,EAAwBF,GAAuB;AACtD,aAAOT,EAAM,QAAQ,KAAKE,EAAM,cAAc,KAAKO,MAAS;AAAA,IAC9D;AAMA,aAASG,EAAuBH,GAAuB;AAC9C,aAAAT,EAAM,QAAQ,KAAKA,EAAM,QAAQE,EAAM,cAAc,KAAKO,MAAST,EAAM,QAAQ;AAAA,IAC1F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Paginate.js","sources":["../src/components/Paginate/Paginate.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, useCssModule } from 'vue';\n\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({\n    name: 'll-paginate',\n  });\n\n  export interface PaginateProps {\n    /**\n     * Current page number\n     */\n    currentPage?: number;\n    /**\n     * Total number of items in list\n     */\n    listLength?: number;\n    /**\n     * Number of items per page\n     */\n    pageSize?: number;\n  }\n\n  const props = withDefaults(defineProps<PaginateProps>(), {\n    currentPage: 1,\n    listLength: 1,\n    pageSize: 50,\n  });\n\n  const emit =\n    defineEmits<{\n      /**\n       * Emitted when the page number changes.\n       */\n      (e: 'set-page', pageNumber: number): void;\n    }>();\n\n  const classes = useCssModule();\n\n  const pages = computed(() => Math.ceil(props.listLength / props.pageSize));\n\n  /**\n   * Emits current page to list view.\n   */\n  function updatePage(currentPage: number) {\n    emit('set-page', currentPage);\n  }\n\n  /**\n   * Sets current page to next page\n   */\n  function next() {\n    if (props.currentPage < pages.value) {\n      updatePage(props.currentPage + 1);\n    }\n  }\n\n  /**\n   * Sets current page to previous page\n   */\n  function prev() {\n    if (props.currentPage > 1) {\n      updatePage(props.currentPage - 1);\n    }\n  }\n\n  /**\n   * Determines whether to show page\n   * @returns {boolean} - should show page in pagination component\n   */\n  function shouldShowPage(page: number): boolean {\n    const pageDiff = Math.abs(props.currentPage - page);\n\n    if (\n      pages.value < 10 ||\n      page === 1 ||\n      page === pages.value ||\n      (props.currentPage < 6 && page < 8) ||\n      (pages.value - props.currentPage < 5 && pages.value - page < 7) ||\n      pageDiff < 3\n    ) {\n      return true;\n    }\n\n    return false;\n  }\n\n  /**\n   * Determines whether to show the leading ellipsis\n   * @returns {boolean} should show or not\n   */\n  function shouldShowFirstEllipsis(page: number): boolean {\n    return pages.value > 9 && props.currentPage > 5 && page === 2;\n  }\n\n  /**\n   * Determines whether to show the trailing ellipsis\n   * @returns {boolean} should show or not\n   */\n  function shouldShowLastEllipsis(page: number): boolean {\n    return pages.value > 9 && pages.value - props.currentPage > 4 && page === pages.value - 1;\n  }\n</script>\n\n<template>\n  <div class=\"stash-paginate tw-flex tw-justify-center\" data-test=\"stash-paginate\">\n    <ul class=\"stash-paginate__list tw-flex\" :class=\"classes.pagination\" data-test=\"stash-paginate|list\">\n      <button\n        data-test=\"stash-paginate|prev-page\"\n        :class=\"[classes.prev, { [classes['is-disabled']]: currentPage === 1 }]\"\n        @click=\"prev\"\n      >\n        <Icon size=\"small\" name=\"chevron-left\" />\n      </button>\n      <template v-for=\"page in pages\">\n        <button\n          v-if=\"shouldShowFirstEllipsis(page)\"\n          :key=\"`${page}-ellipsis`\"\n          data-test=\"stash-paginate|first-ellipsis\"\n        >\n          &#x2026;\n        </button>\n        <button\n          v-if=\"shouldShowPage(page)\"\n          :key=\"page\"\n          data-test=\"stash-paginate|page-number\"\n          :class=\"{ [classes['is-active']]: currentPage === page }\"\n          @click=\"updatePage(page)\"\n        >\n          {{ page }}\n        </button>\n        <button v-if=\"shouldShowLastEllipsis(page)\" :key=\"`${page}-ellipsis`\" data-test=\"stash-paginate|last-ellipsis\">\n          &#x2026;\n        </button>\n      </template>\n      <button\n        data-test=\"stash-paginate|next-page\"\n        :class=\"[classes.next, { [classes['is-disabled']]: currentPage === pages }]\"\n        @click=\"next\"\n      >\n        <Icon size=\"small\" class=\"tw-rotate-180\" name=\"chevron-left\" />\n      </button>\n    </ul>\n  </div>\n</template>\n\n<style module>\n  .pagination {\n    /* Todo: We shouldn't really be making assumptions about the outer spacing of the pagination component */\n    margin-top: theme(spacing.12);\n    z-index: 0;\n\n    a,\n    button {\n      @apply tw-border tw-border-solid tw-border-ice-200;\n      align-items: center;\n      background-color: theme(colors.white);\n      color: theme(colors.blue.DEFAULT);\n      cursor: pointer;\n      display: flex;\n      height: theme(height.input);\n      justify-content: center;\n      margin: 0 0 0 -1px;\n      width: theme(height.input);\n\n      &.prev {\n        border-bottom-left-radius: theme(borderRadius.DEFAULT);\n        border-top-left-radius: theme(borderRadius.DEFAULT);\n      }\n\n      &.next {\n        border-bottom-right-radius: theme(borderRadius.DEFAULT);\n        border-top-right-radius: theme(borderRadius.DEFAULT);\n      }\n\n      &:focus {\n        outline: none;\n      }\n\n      &:hover {\n        text-decoration: none;\n      }\n\n      &.is-active {\n        background-color: theme(colors.blue.DEFAULT);\n        color: theme(colors.white);\n        pointer-events: none;\n        z-index: theme(zIndex.control);\n      }\n\n      &:hover,\n      &.is-active {\n        @apply tw-border tw-border-solid tw-border-blue;\n        position: relative;\n      }\n\n      &.is-disabled {\n        cursor: not-allowed;\n        opacity: 0.5;\n      }\n    }\n  }\n</style>\n"],"names":["classes","useCssModule","pages","computed","props","updatePage","currentPage","emit","next","prev","shouldShowPage","page","pageDiff","shouldShowFirstEllipsis","shouldShowLastEllipsis"],"mappings":";;;;;;;;;;;;;;;;;;;;iBAsCQA,IAAUC,KAEVC,IAAQC,EAAS,MAAM,KAAK,KAAKC,EAAM,aAAaA,EAAM,QAAQ,CAAC;AAKzE,aAASC,EAAWC,GAAqB;AACvC,MAAAC,EAAK,YAAYD,CAAW;AAAA,IAC9B;AAKA,aAASE,IAAO;AACV,MAAAJ,EAAM,cAAcF,EAAM,SACjBG,EAAAD,EAAM,cAAc,CAAC;AAAA,IAEpC;AAKA,aAASK,IAAO;AACV,MAAAL,EAAM,cAAc,KACXC,EAAAD,EAAM,cAAc,CAAC;AAAA,IAEpC;AAMA,aAASM,EAAeC,GAAuB;AAC7C,YAAMC,IAAW,KAAK,IAAIR,EAAM,cAAcO,CAAI;AAGhD,aAAAT,EAAM,QAAQ,MACdS,MAAS,KACTA,MAAST,EAAM,SACdE,EAAM,cAAc,KAAKO,IAAO,KAChCT,EAAM,QAAQE,EAAM,cAAc,KAAKF,EAAM,QAAQS,IAAO,KAC7DC,IAAW;AAAA,IAMf;AAMA,aAASC,EAAwBF,GAAuB;AACtD,aAAOT,EAAM,QAAQ,KAAKE,EAAM,cAAc,KAAKO,MAAS;AAAA,IAC9D;AAMA,aAASG,EAAuBH,GAAuB;AAC9C,aAAAT,EAAM,QAAQ,KAAKA,EAAM,QAAQE,EAAM,cAAc,KAAKO,MAAST,EAAM,QAAQ;AAAA,IAC1F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/QuickAction.js

@@ -1,11 +1,9 @@
-import { defineComponent as l, computed as o, openBlock as u, createBlock as _, resolveDynamicComponent as p, mergeProps as m, withCtx as d, createElementVNode as e, createVNode as s, toDisplayString as r } from "vue";
-import n from "./Icon.js";
-import { _ as f } from "./_plugin-vue_export-helper-dad06003.js";
-import "./Icon.vue_used_vue_type_style_index_0_lang.module-d2507af3.js";
-import "./uniqueId-847efe53.js";
-import "./toString-7d5bf363.js";
-import "./isObjectLike-54341556.js";
+import { defineComponent as l, computed as o, openBlock as u, createBlock as _, resolveDynamicComponent as d, mergeProps as p, withCtx as f, createElementVNode as e, createVNode as s, toDisplayString as n } from "vue";
+import r from "./Icon.js";
+import { _ as m } from "./_plugin-vue_export-helper-dad06003.js";
+import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
+import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 const w = { class: "content tw-flex tw-items-center" }, h = { class: "tw-flex tw-items-center tw-justify-center tw-rounded tw-bg-blue-100 tw-p-3" }, x = { class: "tw-flex-1" }, b = { class: "tw-text-blue" }, v = { class: "subtitle tw-text-xs lg:tw-mb-0 tw-text-ice-700 tw-font-normal" }, k = /* @__PURE__ */ l({
   __name: "QuickAction",
   props: {
@@ -21,23 +19,23 @@ const w = { class: "content tw-flex tw-items-center" }, h = { class: "tw-flex tw
     } : t.href ? {
       href: t.href
     } : {});
-    return (g, y) => (u(), _(p(i.value), m(a.value, {
+    return (g, y) => (u(), _(d(i.value), p(a.value, {
       class: "stash-quick-action root tw-p-3 tw-shadow tw-rounded",
       "data-test": "stash-quick-action"
     }), {
-      default: d(() => [
+      default: f(() => [
         e("div", w, [
           e("div", h, [
-            s(n, {
+            s(r, {
               name: t.icon,
               class: "tw-text-blue"
             }, null, 8, ["name"])
           ]),
           e("div", x, [
-            e("h4", b, r(t.title), 1),
-            e("p", v, r(t.subtitle), 1)
+            e("h4", b, n(t.title), 1),
+            e("p", v, n(t.subtitle), 1)
           ]),
-          s(n, {
+          s(r, {
             name: "arrow-right",
             class: "tw-text-blue"
           })
@@ -47,8 +45,8 @@ const w = { class: "content tw-flex tw-items-center" }, h = { class: "tw-flex tw
     }, 16));
   }
 });
-const V = /* @__PURE__ */ f(k, [["__scopeId", "data-v-704bf5c4"]]);
+const I = /* @__PURE__ */ m(k, [["__scopeId", "data-v-704bf5c4"]]);
 export {
-  V as default
+  I as default
 };
 //# sourceMappingURL=QuickAction.js.map

package/dist/QuickAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickAction.js","sources":["../src/components/QuickAction/QuickAction.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed } from 'vue';\n  import { type RouteLocationRaw } from 'vue-router';\n\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface QuickActionProps {\n    /**\n     * The title prop will show the first line of text\n     */\n    title: string;\n\n    /**\n     * The subtitle prop will show the second line of text\n     */\n    subtitle: string;\n\n    /**\n     * The `to` prop for vue-router's `RouterLink` component\n     */\n    to?: RouteLocationRaw;\n    /**\n     * If defined, the quick action will render as an `<a />` tag.\n     */\n    href?: string;\n    /**\n     * Icon to render on the left side\n     */\n    icon: IconName;\n  }\n\n  const props = defineProps<QuickActionProps>();\n\n  const is = computed(() => {\n    if (props.to) {\n      return 'router-link';\n    }\n\n    if (props.href) {\n      return 'a';\n    }\n\n    return 'div';\n  });\n\n  const linkAttrs = computed(() => {\n    if (props.to) {\n      return {\n        to: props.to,\n      };\n    }\n\n    if (props.href) {\n      return {\n        href: props.href\n      };\n    }\n\n    return {};\n  });\n</script>\n\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"linkAttrs\"\n    class=\"stash-quick-action root tw-p-3 tw-shadow tw-rounded\"\n    data-test=\"stash-quick-action\"\n  >\n    <div class=\"content tw-flex tw-items-center\">\n      <div class=\"tw-flex tw-items-center tw-justify-center tw-rounded tw-bg-blue-100 tw-p-3\">\n        <Icon :name=\"props.icon\" class=\"tw-text-blue\" />\n      </div>\n      <div class=\"tw-flex-1\">\n        <h4 class=\"tw-text-blue\">{{ props.title }}</h4>\n        <p class=\"subtitle tw-text-xs lg:tw-mb-0 tw-text-ice-700 tw-font-normal\">\n          {{ props.subtitle }}\n        </p>\n      </div>\n      <Icon name=\"arrow-right\" class=\"tw-text-blue\" />\n    </div>\n  </component>\n</template>\n\n<style scoped>\n  .root {\n    background-color: #fff;\n    border: 1px solid transparent; /* it prevents layout size shifting of extra height/width when hover */\n    cursor: pointer;\n    display: inline-block;\n  }\n\n  .root:hover,\n  .root:active,\n  .root:focus {\n    border: 1px solid var(--color-blue-500);\n    text-decoration: none;\n  }\n\n  .content {\n    gap: 12px;\n  }\n</style>\n"],"names":["is","computed","props","linkAttrs"],"mappings":";;;;;;;;;;;;;;;;;;iBAkCQA,IAAKC,EAAS,MACdC,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,KACR,GAEKC,IAAYF,EAAS,MACrBC,EAAM,KACD;AAAA,MACL,IAAIA,EAAM;AAAA,IAAA,IAIVA,EAAM,OACD;AAAA,MACL,MAAMA,EAAM;AAAA,IAAA,IAIT,EACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"QuickAction.js","sources":["../src/components/QuickAction/QuickAction.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed } from 'vue';\n  import { type RouteLocationRaw } from 'vue-router';\n\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface QuickActionProps {\n    /**\n     * The title prop will show the first line of text\n     */\n    title: string;\n\n    /**\n     * The subtitle prop will show the second line of text\n     */\n    subtitle: string;\n\n    /**\n     * The `to` prop for vue-router's `RouterLink` component\n     */\n    to?: RouteLocationRaw;\n    /**\n     * If defined, the quick action will render as an `<a />` tag.\n     */\n    href?: string;\n    /**\n     * Icon to render on the left side\n     */\n    icon: IconName;\n  }\n\n  const props = defineProps<QuickActionProps>();\n\n  const is = computed(() => {\n    if (props.to) {\n      return 'router-link';\n    }\n\n    if (props.href) {\n      return 'a';\n    }\n\n    return 'div';\n  });\n\n  const linkAttrs = computed(() => {\n    if (props.to) {\n      return {\n        to: props.to,\n      };\n    }\n\n    if (props.href) {\n      return {\n        href: props.href\n      };\n    }\n\n    return {};\n  });\n</script>\n\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"linkAttrs\"\n    class=\"stash-quick-action root tw-p-3 tw-shadow tw-rounded\"\n    data-test=\"stash-quick-action\"\n  >\n    <div class=\"content tw-flex tw-items-center\">\n      <div class=\"tw-flex tw-items-center tw-justify-center tw-rounded tw-bg-blue-100 tw-p-3\">\n        <Icon :name=\"props.icon\" class=\"tw-text-blue\" />\n      </div>\n      <div class=\"tw-flex-1\">\n        <h4 class=\"tw-text-blue\">{{ props.title }}</h4>\n        <p class=\"subtitle tw-text-xs lg:tw-mb-0 tw-text-ice-700 tw-font-normal\">\n          {{ props.subtitle }}\n        </p>\n      </div>\n      <Icon name=\"arrow-right\" class=\"tw-text-blue\" />\n    </div>\n  </component>\n</template>\n\n<style scoped>\n  .root {\n    background-color: #fff;\n    border: 1px solid transparent; /* it prevents layout size shifting of extra height/width when hover */\n    cursor: pointer;\n    display: inline-block;\n  }\n\n  .root:hover,\n  .root:active,\n  .root:focus {\n    border: 1px solid var(--color-blue-500);\n    text-decoration: none;\n  }\n\n  .content {\n    gap: 12px;\n  }\n</style>\n"],"names":["is","computed","props","linkAttrs"],"mappings":";;;;;;;;;;;;;;;;iBAkCQA,IAAKC,EAAS,MACdC,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,KACR,GAEKC,IAAYF,EAAS,MACrBC,EAAM,KACD;AAAA,MACL,IAAIA,EAAM;AAAA,IAAA,IAIVA,EAAM,OACD;AAAA,MACL,MAAMA,EAAM;AAAA,IAAA,IAIT,EACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/RadioGroup.js

@@ -1,40 +1,37 @@
-import { defineComponent as y, inject as x, openBlock as r, createElementBlock as n, Fragment as w, renderList as V, unref as e, normalizeClass as f, createElementVNode as o, toDisplayString as h, provide as g, computed as v, createBlock as B, withCtx as T, renderSlot as R, resolveDynamicComponent as C } from "vue";
-import { u as E } from "./uniqueId-847efe53.js";
-import { _ as G } from "./Field.vue_vue_type_script_setup_true_lang-c864abd3.js";
+import { defineComponent as y, inject as x, openBlock as d, createElementBlock as n, Fragment as w, renderList as V, unref as e, normalizeClass as f, createElementVNode as o, toDisplayString as h, provide as g, computed as v, createBlock as B, withCtx as T, renderSlot as R, resolveDynamicComponent as C } from "vue";
+import E from "lodash-es/uniqueId";
+import { _ as G } from "./Field.vue_vue_type_script_setup_true_lang-475832fe.js";
 import { R as $ } from "./RadioGroup.keys-974818d6.js";
 import { _ as k } from "./_plugin-vue_export-helper-dad06003.js";
-import "./toString-7d5bf363.js";
-import "./isObjectLike-54341556.js";
 import "./Label.vue_vue_type_script_setup_true_lang-1d29d98a.js";
 import "./locale.js";
-import "./get-27d90892.js";
-import "./_MapCache-65811284.js";
+import "lodash-es/get";
 const O = { class: "root flex" }, W = ["id", "name", "value", "checked", "disabled"], j = ["for"], q = /* @__PURE__ */ y({
   __name: "VariantButton",
   setup(u) {
-    const d = x($.key);
-    if (!d)
+    const r = x($.key);
+    if (!r)
       throw new Error("VariantButton must be used with a RadioGroup instance.");
-    const { name: t, disabled: _, fullWidth: p, modelValue: l, options: i, update: s } = d;
-    return (I, c) => (r(), n("div", O, [
-      (r(!0), n(w, null, V(e(i), (a) => (r(), n("div", {
-        key: `${e(t)}-${a.id}`,
+    const { name: a, disabled: _, fullWidth: p, modelValue: l, options: i, update: s } = r;
+    return (I, c) => (d(), n("div", O, [
+      (d(!0), n(w, null, V(e(i), (t) => (d(), n("div", {
+        key: `${e(a)}-${t.id}`,
         class: f([{ "w-full": e(p) }])
       }, [
         o("input", {
-          id: `${e(t)}-${a.id}`,
+          id: `${e(a)}-${t.id}`,
           class: "sr-only",
           type: "radio",
-          name: e(t),
-          value: a.value,
-          checked: e(l) === a.value,
-          disabled: e(_) || a.disabled,
+          name: e(a),
+          value: t.value,
+          checked: e(l) === t.value,
+          disabled: e(_) || t.disabled,
           onInput: c[0] || (c[0] = //@ts-ignore
           (...m) => e(s) && e(s)(...m))
         }, null, 40, W),
         o("label", {
-          for: `${e(t)}-${a.id}`
-        }, h(a.text), 9, j)
+          for: `${e(a)}-${t.id}`
+        }, h(t.text), 9, j)
       ], 2))), 128))
     ]));
   }
@@ -42,29 +39,29 @@ const O = { class: "root flex" }, W = ["id", "name", "value", "checked", "disabl
 const S = /* @__PURE__ */ k(q, [["__scopeId", "data-v-e8a24f17"]]), D = { class: "root flex flex-wrap tw-my-1.5" }, L = ["id", "name", "value", "checked", "disabled"], N = ["for"], z = /* @__PURE__ */ y({
   __name: "VariantChip",
   setup(u) {
-    const d = x($.key);
-    if (!d)
+    const r = x($.key);
+    if (!r)
       throw new Error("VariantChip must be used with a RadioGroup instance.");
-    const { name: t, disabled: _, fullWidth: p, modelValue: l, options: i, update: s } = d;
-    return (I, c) => (r(), n("div", D, [
-      (r(!0), n(w, null, V(e(i), (a) => (r(), n("div", {
-        key: `${e(t)}-${a.id}`,
+    const { name: a, disabled: _, fullWidth: p, modelValue: l, options: i, update: s } = r;
+    return (I, c) => (d(), n("div", D, [
+      (d(!0), n(w, null, V(e(i), (t) => (d(), n("div", {
+        key: `${e(a)}-${t.id}`,
         class: f([{ "w-full": e(p) }])
       }, [
         o("input", {
-          id: `${e(t)}-${a.id}`,
+          id: `${e(a)}-${t.id}`,
           class: "sr-only",
           type: "radio",
-          name: e(t),
-          value: a.value,
-          checked: e(l) === a.value,
-          disabled: e(_) || a.disabled,
+          name: e(a),
+          value: t.value,
+          checked: e(l) === t.value,
+          disabled: e(_) || t.disabled,
           onInput: c[0] || (c[0] = //@ts-ignore
           (...m) => e(s) && e(s)(...m))
         }, null, 40, L),
         o("label", {
-          for: `${e(t)}-${a.id}`
-        }, h(a.text), 9, N)
+          for: `${e(a)}-${t.id}`
+        }, h(t.text), 9, N)
       ], 2))), 128))
     ]));
   }
@@ -72,28 +69,28 @@ const S = /* @__PURE__ */ k(q, [["__scopeId", "data-v-e8a24f17"]]), D = { class:
 const A = /* @__PURE__ */ k(z, [["__scopeId", "data-v-b4b020c6"]]), F = { class: "root flex flex-wrap" }, J = ["id", "name", "value", "checked", "disabled"], M = ["for"], P = /* @__PURE__ */ y({
   __name: "VariantRadio",
   setup(u) {
-    const d = x($.key);
-    if (!d)
+    const r = x($.key);
+    if (!r)
       throw new Error("VariantRadio must be used with a RadioGroup instance.");
-    const { name: t, disabled: _, fullWidth: p, modelValue: l, options: i, update: s } = d;
-    return (I, c) => (r(), n("div", F, [
-      (r(!0), n(w, null, V(e(i), (a) => (r(), n("div", {
-        key: `${e(t)}-${a.id}`,
+    const { name: a, disabled: _, fullWidth: p, modelValue: l, options: i, update: s } = r;
+    return (I, c) => (d(), n("div", F, [
+      (d(!0), n(w, null, V(e(i), (t) => (d(), n("div", {
+        key: `${e(a)}-${t.id}`,
         class: f([{ "w-full": e(p) }])
       }, [
         o("input", {
-          id: `${e(t)}-${a.id}`,
+          id: `${e(a)}-${t.id}`,
           type: "radio",
-          name: e(t),
-          value: a.value,
-          checked: e(l) === a.value,
-          disabled: e(_) || a.disabled,
+          name: e(a),
+          value: t.value,
+          checked: e(l) === t.value,
+          disabled: e(_) || t.disabled,
           onInput: c[0] || (c[0] = //@ts-ignore
           (...m) => e(s) && e(s)(...m))
         }, null, 40, J),
         o("label", {
-          for: `${e(t)}-${a.id}`
-        }, h(a.text), 9, M)
+          for: `${e(a)}-${t.id}`
+        }, h(t.text), 9, M)
       ], 2))), 128))
     ]));
   }
@@ -101,45 +98,45 @@ const A = /* @__PURE__ */ k(z, [["__scopeId", "data-v-b4b020c6"]]), F = { class:
 const U = /* @__PURE__ */ k(P, [["__scopeId", "data-v-1962fcc7"]]), H = { class: "root flex flex-wrap" }, K = ["for"], Q = ["id", "name", "value", "checked", "disabled"], X = { class: "color-ice-900 tw-m-0" }, Y = { class: "color-ice-700 tw-m-0" }, Z = /* @__PURE__ */ y({
   __name: "VariantTile",
   setup(u) {
-    const d = x($.key);
-    if (!d)
+    const r = x($.key);
+    if (!r)
       throw new Error("VariantTile must be used with a RadioGroup instance.");
-    const { name: t, disabled: _, fullWidth: p, modelValue: l, options: i, update: s } = d;
-    return (I, c) => (r(), n("div", H, [
-      (r(!0), n(w, null, V(e(i), (a) => (r(), n("label", {
-        key: `${e(t)}-${a.id}`,
+    const { name: a, disabled: _, fullWidth: p, modelValue: l, options: i, update: s } = r;
+    return (I, c) => (d(), n("div", H, [
+      (d(!0), n(w, null, V(e(i), (t) => (d(), n("label", {
+        key: `${e(a)}-${t.id}`,
         class: f(["tile-container", { "w-full": e(p) }]),
-        for: `${e(t)}-${a.id}`
+        for: `${e(a)}-${t.id}`
       }, [
         o("div", {
           class: f(["tile-header border flex", {
-            "border-blue-500 bg-blue-100 color-ice-900": e(l) === a.value,
-            "border-ice-500 bg-ice-100 color-ice-700": e(l) !== a.value
+            "border-blue-500 bg-blue-100 color-ice-900": e(l) === t.value,
+            "border-ice-500 bg-ice-100 color-ice-700": e(l) !== t.value
           }])
         }, [
           o("input", {
-            id: `${e(t)}-${a.id}`,
+            id: `${e(a)}-${t.id}`,
             class: "sr-only",
             type: "radio",
-            name: e(t),
-            value: a.value,
-            checked: e(l) === a.value,
-            disabled: e(_) || a.disabled,
+            name: e(a),
+            value: t.value,
+            checked: e(l) === t.value,
+            disabled: e(_) || t.disabled,
             onInput: c[0] || (c[0] = //@ts-ignore
             (...m) => e(s) && e(s)(...m))
           }, null, 40, Q),
           o("div", null, [
-            o("span", null, h(a.text), 1)
+            o("span", null, h(t.text), 1)
           ])
         ], 2),
         o("div", {
           class: f(["tile-body border-r border-b border-l", {
-            "border-ice-500": e(l) !== a.value,
-            "border-blue-500": e(l) === a.value
+            "border-ice-500": e(l) !== t.value,
+            "border-blue-500": e(l) === t.value
           }])
         }, [
-          o("p", X, h(a.subTitle), 1),
-          o("p", Y, h(a.subText), 1)
+          o("p", X, h(t.subTitle), 1),
+          o("p", Y, h(t.subText), 1)
         ], 2)
       ], 10, K))), 128))
     ]));
@@ -147,7 +144,7 @@ const U = /* @__PURE__ */ k(P, [["__scopeId", "data-v-1962fcc7"]]), H = { class:
 });
 const ee = /* @__PURE__ */ k(Z, [["__scopeId", "data-v-e6997760"]]);
 var b = /* @__PURE__ */ ((u) => (u.Radio = "radio", u.Button = "button", u.Chip = "chip", u.Tile = "tile", u))(b || {});
-const _e = /* @__PURE__ */ y({
+const ne = /* @__PURE__ */ y({
   __name: "RadioGroup",
   props: {
     name: { default: void 0 },
@@ -165,48 +162,48 @@ const _e = /* @__PURE__ */ y({
     showOptionalInLabel: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(u, { emit: d }) {
-    const t = u, _ = {
+  setup(u, { emit: r }) {
+    const a = u, _ = {
       [b.Button]: S,
       [b.Chip]: A,
       [b.Radio]: U,
       [b.Tile]: ee
     };
     function p(i) {
-      d("update:modelValue", i.target.value);
+      r("update:modelValue", i.target.value);
     }
     const l = E("radio-group-field-error-");
     return g($.key, {
-      name: v(() => t.name),
-      disabled: v(() => t.disabled),
-      fullWidth: v(() => t.fullWidth),
-      modelValue: v(() => t.modelValue),
-      options: v(() => t.options),
-      variant: v(() => t.variant),
+      name: v(() => a.name),
+      disabled: v(() => a.disabled),
+      fullWidth: v(() => a.fullWidth),
+      modelValue: v(() => a.modelValue),
+      options: v(() => a.options),
+      variant: v(() => a.variant),
       update: p
-    }), (i, s) => (r(), B(G, {
+    }), (i, s) => (d(), B(G, {
       class: f([
         {
-          "tw-flex": !t.options,
-          "tw-gap-6": !t.options && t.variant !== e(b).Button
+          "tw-flex": !a.options,
+          "tw-gap-6": !a.options && a.variant !== e(b).Button
         }
       ]),
       "aria-errormessage": e(l),
-      "aria-invalid": !!t.errorText,
+      "aria-invalid": !!a.errorText,
       role: "radiogroup",
       fieldset: "",
-      label: t.label,
-      "add-bottom-space": t.addBottomSpace,
+      label: a.label,
+      "add-bottom-space": a.addBottomSpace,
       "error-id": e(l),
-      "error-text": t.errorText,
-      "hint-text": t.hintText,
-      "show-optional-in-label": t.showOptionalInLabel,
-      "is-required": t.isRequired,
-      "is-read-only": t.isReadOnly
+      "error-text": a.errorText,
+      "hint-text": a.hintText,
+      "show-optional-in-label": a.showOptionalInLabel,
+      "is-required": a.isRequired,
+      "is-read-only": a.isReadOnly
     }, {
       default: T(() => [
-        t.options ? R(i.$slots, "default", { key: 0 }, () => [
-          (r(), B(C(_[t.variant])))
+        a.options ? R(i.$slots, "default", { key: 0 }, () => [
+          (d(), B(C(_[a.variant])))
         ]) : R(i.$slots, "default", { key: 1 })
       ]),
       _: 3
@@ -216,6 +213,6 @@ const _e = /* @__PURE__ */ y({
 export {
   $ as RADIO_GROUP_INJECTION,
   b as RadioGroupVariant,
-  _e as default
+  ne as default
 };
 //# sourceMappingURL=RadioGroup.js.map