@leaflink/stash 53.4.4 → 53.4.6

package/dist/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","sources":["../src/components/TableRow/TableRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, inject, ref, useAttrs, useCssModule, watch } from 'vue';\n\n  import { StashCommonColor } from '../../../types/colors';\n  import { t } from '../../locale';\n  import Checkbox, { CheckboxProps } from '../Checkbox/Checkbox.vue';\n  import ChevronToggle from '../ChevronToggle/ChevronToggle.vue';\n  import Expand from '../Expand/Expand.vue';\n  import { TABLE_INJECTION } from '../Table/Table.vue';\n  import TableCell from '../TableCell/TableCell.vue';\n\n  defineOptions({ inheritAttrs: false });\n\n  export interface TableRowProps {\n    hideExpansionDivider?: boolean;\n    isExpanded?: boolean;\n    isSelected?: boolean;\n    isSelectDisabled?: boolean;\n    /**\n     * The accent color for the TableRow.\n     */\n    accentColor?: StashCommonColor;\n  }\n\n  const props = withDefaults(defineProps<TableRowProps>(), {\n    /**\n     * If true, hides the divider between the parent row and expansion row\n     */\n    hideExpansionDivider: false,\n    isExpanded: false,\n    isSelected: false,\n    isSelectDisabled: false,\n    accentColor: undefined,\n  });\n\n  const emit = defineEmits<{\n    'update:isSelected': [isChecked: CheckboxProps['checked']];\n    'update:isExpanded': [isExpanded: boolean];\n  }>();\n\n  const attrs = useAttrs();\n  const classes = useCssModule();\n  const slots = defineSlots<{\n    default(props: { isRowExpanded?: boolean; toggleExpand: (value?: boolean) => void }): unknown[];\n    expansion(): unknown[];\n  }>();\n\n  const tableInjection = inject(TABLE_INJECTION.key);\n\n  if (!tableInjection) {\n    throw new Error('TableRow must be used within a Table component');\n  }\n\n  const { hasActions, hasCustomExpandToggle, isExpandable, isSelectable, layout, isLoading } = tableInjection;\n\n  const isRowExpanded = ref(props.isExpanded);\n  const isRowExpandable = computed(() => isExpandable.value && !!slots.expansion);\n\n  const childCellCount = computed(() => {\n    let count = slots.default?.({ toggleExpand }).length ?? 0;\n\n    if (isSelectable.value) {\n      count += 1;\n    }\n\n    if (isRowExpandable.value && !hasCustomExpandToggle.value) {\n      count += 1;\n    }\n\n    return count;\n  });\n  const rowId = uniqueId('table-row-');\n\n  function toggleExpand(value?: boolean) {\n    if (!isRowExpandable.value) {\n      throw new Error('Cannot call `toggleExpand` on a non-expandable row. Provide an `expansion` slot.');\n    }\n\n    const isExpanded = typeof value === 'boolean' ? value : !isRowExpanded.value;\n\n    isRowExpanded.value = isExpanded;\n    emit('update:isExpanded', isExpanded);\n  }\n\n  watch(\n    () => props.isExpanded,\n    () => toggleExpand(props.isExpanded),\n  );\n</script>\n\n<template>\n  <tr\n    class=\"stash-table-row\"\n    :class=\"[\n      classes.root,\n      classes[`layout--${layout}`],\n      {\n        [classes['is-expandable']]: isRowExpandable,\n        [classes['is-expanded']]: isRowExpanded,\n        [classes['root--hidden-divider']]: hideExpansionDivider,\n        'p-gutter': layout === 'stack',\n        'mb-6 shadow lg:mb-0 lg:shadow-none': layout === 'stack' && !isRowExpandable,\n        'pt-[60px]': hasActions && layout === 'stack' && !isSelectable && !isLoading,\n        'stash-table-row--accent': props.accentColor,\n        relative: props.accentColor,\n      },\n    ]\"\n    data-test=\"stash-table-row\"\n    v-bind=\"attrs\"\n  >\n    <TableCell\n      v-if=\"isSelectable\"\n      is-control\n      class=\"stash-table-row__selection-cell min-w-[48px] lg:pl-3\"\n      :class=\"classes['row-control-cell']\"\n      data-test=\"stash-table-row|selection-cell\"\n    >\n      <Checkbox\n        :class=\"classes['row-selection-checkbox']\"\n        :checked=\"props.isSelected\"\n        :disabled=\"props.isSelectDisabled\"\n        :title=\"t('ll.select.self')\"\n        @update:checked=\"emit('update:isSelected', $event)\"\n      />\n    </TableCell>\n    <TableCell\n      v-if=\"isRowExpandable && !hasCustomExpandToggle\"\n      class=\"stash-table-row__toggle-expansion-cell px-0\"\n      data-test=\"stash-table-row|custom-expansion-cell\"\n      is-control\n      :class=\"classes['row-control-cell']\"\n    >\n      <ChevronToggle\n        :aria-controls=\"rowId\"\n        :aria-label=\"isRowExpanded ? t('ll.table.collapseRow') : t('ll.table.expandRow')\"\n        :direction=\"isRowExpanded ? 'up' : 'down'\"\n        :is-expanded=\"isRowExpanded\"\n        @click=\"toggleExpand\"\n      />\n    </TableCell>\n    <!-- @slot default -->\n    <slot :is-row-expanded=\"isRowExpanded\" :toggle-expand=\"toggleExpand\"></slot>\n    <!-- Displays a 4px accent on the left of the table row -->\n    <div\n      v-if=\"props.accentColor\"\n      data-test=\"stash-table-row|accent\"\n      :class=\"{\n        absolute: props.accentColor,\n        [`bg-${props.accentColor}`]: props.accentColor,\n        block: props.accentColor,\n        'h-full': props.accentColor,\n        'w-1': props.accentColor,\n        'top-0': props.accentColor,\n        'left-0': props.accentColor,\n      }\"\n    ></div>\n  </tr>\n  <tr\n    v-if=\"isRowExpandable\"\n    class=\"stash-table-row stash-table-row--expandable\"\n    :class=\"classes['row-expansion']\"\n    data-test=\"stash-table-row|expansion-row\"\n  >\n    <Expand\n      is=\"td\"\n      :id=\"rowId\"\n      class=\"border-none bg-white px-3 py-0\"\n      data-test=\"stash-table-row|expansion-cell\"\n      :class=\"classes['row-expansion-content']\"\n      :colspan=\"childCellCount\"\n      :is-expanded=\"isRowExpanded\"\n    >\n      <!-- @slot expansion, for expandable content -->\n      <slot name=\"expansion\"></slot>\n    </Expand>\n  </tr>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .root {\n      border: 0;\n    }\n\n    /**\n     * Only takes effect when hideExpansionDivider is true, for a softer collapse transition as the bottom border re-appears\n     */\n    .is-expandable > td {\n      border-bottom-color: var(--color-ice-200);\n      transition: border-bottom-color 0.5s;\n    }\n\n    .root--hidden-divider.is-expanded > td {\n      transition: border-bottom-color 0s;\n      /**\n       * Removes the grey cell background for 'control' cells at lower breakpoints, letting the white of the tr come through.\n       */\n      border-bottom-color: transparent;\n    }\n\n    .layout--scroll {\n      border-radius: 0;\n      box-shadow: none !important;\n      margin: 0;\n    }\n\n    .layout--scroll:last-of-type {\n      border: 0;\n    }\n\n    .layout--scroll:last-of-type td {\n      border-bottom: none;\n    }\n\n    .layout--stack {\n      align-items: stretch;\n      background-color: var(--color-white);\n      column-gap: var(--grid-gutter);\n      display: grid;\n      grid-template-columns: repeat(12, 1fr);\n      position: relative;\n      row-gap: var(--grid-gutter);\n    }\n\n    .layout--stack:not(.is-expanded) {\n      border-radius: var(--radius-sm);\n      transition: border-radius 0.5s;\n    }\n\n    .layout--stack.is-expanded {\n      border-top-left-radius: var(--radius-sm);\n      border-top-right-radius: var(--radius-sm);\n    }\n\n    .row-selection-checkbox label {\n      padding: 0;\n      vertical-align: middle;\n    }\n\n    .layout--stack .row-control-cell {\n      display: flex;\n      align-items: center;\n      min-width: 0;\n    }\n\n    /* On mobile, display controls on their own row, pushing other cells below */\n    .row-control-cell + :not(.row-control-cell) {\n      grid-column-start: 1;\n    }\n\n    .row-expansion-content {\n      box-shadow: inset 0 -1px 0 0 var(--color-ice-200);\n    }\n\n    .layout--stack + .row-expansion,\n    .layout--stack + .row-expansion > .row-expansion-content {\n      display: block;\n    }\n\n    .layout--stack + .row-expansion > .row-expansion-content {\n      border-top: 1px solid var(--color-ice-200);\n      border-bottom-left-radius: var(--radius-sm);\n      border-bottom-right-radius: var(--radius-sm);\n      margin-bottom: --spacing(6);\n    }\n\n    .layout--stack.root--hidden-divider + .row-expansion > .row-expansion-content {\n      border-top: none;\n    }\n\n    /* On large screens, match the styles for layout-SCROLL */\n    @media (width >= theme(--breakpoint-lg)) {\n      .layout--stack {\n        align-items: unset;\n        background-color: unset;\n        border: 0;\n        border-bottom: 1px solid var(--color-ice-200);\n        border-radius: 0;\n        box-shadow: none;\n        column-gap: unset;\n        display: table-row;\n        grid-template-columns: unset;\n        row-gap: unset;\n      }\n\n      .layout--stack:last-of-type {\n        border-bottom: 0;\n      }\n\n      .layout--stack .row-control-cell {\n        display: table-cell;\n      }\n\n      .layout--stack + .row-expansion {\n        display: table-row;\n      }\n\n      .layout--stack + .row-expansion > .row-expansion-content {\n        border-top: unset;\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n        display: table-cell;\n        margin-bottom: unset;\n      }\n\n      .row-control-cell + :not(.row-control-cell) {\n        grid-column-start: unset;\n      }\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","attrs","useAttrs","classes","useCssModule","slots","_useSlots","tableInjection","inject","TABLE_INJECTION","hasActions","hasCustomExpandToggle","isExpandable","isSelectable","layout","isLoading","isRowExpanded","ref","isRowExpandable","computed","childCellCount","count","_a","toggleExpand","rowId","uniqueId","value","isExpanded","watch","_createElementVNode","_mergeProps","_unref","_createBlock","TableCell","_normalizeClass","_createVNode","Checkbox","t","_cache","$event","ChevronToggle","_renderSlot","_ctx","_createElementBlock","Expand"],"mappings":"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"}
+{"version":3,"file":"TableRow.js","sources":["../src/components/TableRow/TableRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, Fragment, inject, ref, useAttrs, useCssModule, type VNode, watch } from 'vue';\n\n  import { StashCommonColor } from '../../../types/colors';\n  import { t } from '../../locale';\n  import Checkbox, { CheckboxProps } from '../Checkbox/Checkbox.vue';\n  import ChevronToggle from '../ChevronToggle/ChevronToggle.vue';\n  import Expand from '../Expand/Expand.vue';\n  import { TABLE_INJECTION } from '../Table/Table.vue';\n  import TableCell from '../TableCell/TableCell.vue';\n\n  defineOptions({ inheritAttrs: false });\n\n  export interface TableRowProps {\n    hideExpansionDivider?: boolean;\n    isExpanded?: boolean;\n    isSelected?: boolean;\n    isSelectDisabled?: boolean;\n    /**\n     * The accent color for the TableRow.\n     */\n    accentColor?: StashCommonColor;\n  }\n\n  const props = withDefaults(defineProps<TableRowProps>(), {\n    /**\n     * If true, hides the divider between the parent row and expansion row\n     */\n    hideExpansionDivider: false,\n    isExpanded: false,\n    isSelected: false,\n    isSelectDisabled: false,\n    accentColor: undefined,\n  });\n\n  const emit = defineEmits<{\n    'update:isSelected': [isChecked: CheckboxProps['checked']];\n    'update:isExpanded': [isExpanded: boolean];\n  }>();\n\n  const attrs = useAttrs();\n  const classes = useCssModule();\n  const slots = defineSlots<{\n    default(props: { isRowExpanded?: boolean; toggleExpand: (value?: boolean) => void }): VNode[];\n    expansion(): unknown[];\n  }>();\n\n  const tableInjection = inject(TABLE_INJECTION.key);\n\n  if (!tableInjection) {\n    throw new Error('TableRow must be used within a Table component');\n  }\n\n  const { hasActions, hasCustomExpandToggle, isSchemaDriven, isExpandable, isSelectable, layout, isLoading } =\n    tableInjection;\n\n  const showSelectionCell = computed(() => isSelectable.value && !isSchemaDriven?.value);\n\n  const isRowExpanded = ref(props.isExpanded);\n  const isRowExpandable = computed(() => isExpandable.value && !!slots.expansion);\n\n  function isVNodeArray(children: unknown): children is VNode[] {\n    return (\n      Array.isArray(children) && children.every((c): c is VNode => c != null && typeof c === 'object' && 'type' in c)\n    );\n  }\n\n  // Children passed as part of a for loop have a different shape than children passed normally.\n  function countSlotChildren(vnodes: VNode[]): number {\n    return vnodes.reduce((total, node) => {\n      if (node.type === Fragment && isVNodeArray(node.children)) {\n        return total + countSlotChildren(node.children);\n      }\n      return total + 1;\n    }, 0);\n  }\n\n  const childCellCount = computed(() => {\n    const vnodes = slots.default?.({ toggleExpand }) ?? [];\n    let count = countSlotChildren(vnodes);\n\n    if (showSelectionCell.value) {\n      count += 1;\n    }\n\n    if (isRowExpandable.value && !hasCustomExpandToggle.value) {\n      count += 1;\n    }\n\n    return count;\n  });\n  const rowId = uniqueId('table-row-');\n\n  function toggleExpand(value?: boolean) {\n    if (!isRowExpandable.value) {\n      throw new Error('Cannot call `toggleExpand` on a non-expandable row. Provide an `expansion` slot.');\n    }\n\n    const isExpanded = typeof value === 'boolean' ? value : !isRowExpanded.value;\n\n    isRowExpanded.value = isExpanded;\n    emit('update:isExpanded', isExpanded);\n  }\n\n  watch(\n    () => props.isExpanded,\n    () => toggleExpand(props.isExpanded),\n  );\n</script>\n\n<template>\n  <tr\n    class=\"stash-table-row\"\n    :class=\"[\n      classes.root,\n      classes[`layout--${layout}`],\n      {\n        [classes['is-expandable']]: isRowExpandable,\n        [classes['is-expanded']]: isRowExpanded,\n        [classes['root--hidden-divider']]: hideExpansionDivider,\n        'p-gutter': layout === 'stack',\n        'mb-6 shadow lg:mb-0 lg:shadow-none': layout === 'stack' && !isRowExpandable,\n        'pt-[60px]': hasActions && layout === 'stack' && !showSelectionCell && !isLoading,\n        'stash-table-row--accent': props.accentColor,\n        relative: props.accentColor,\n      },\n    ]\"\n    data-test=\"stash-table-row\"\n    v-bind=\"attrs\"\n  >\n    <TableCell\n      v-if=\"showSelectionCell\"\n      is-control\n      class=\"stash-table-row__selection-cell min-w-12 lg:pl-3\"\n      :class=\"classes['row-control-cell']\"\n      data-test=\"stash-table-row|selection-cell\"\n    >\n      <Checkbox\n        :class=\"classes['row-selection-checkbox']\"\n        :checked=\"props.isSelected\"\n        :disabled=\"props.isSelectDisabled\"\n        :title=\"t('ll.select.self')\"\n        @update:checked=\"emit('update:isSelected', $event)\"\n      />\n    </TableCell>\n    <TableCell\n      v-if=\"isRowExpandable && !hasCustomExpandToggle\"\n      class=\"stash-table-row__toggle-expansion-cell px-0\"\n      data-test=\"stash-table-row|custom-expansion-cell\"\n      is-control\n      :class=\"classes['row-control-cell']\"\n    >\n      <ChevronToggle\n        :aria-controls=\"rowId\"\n        :aria-label=\"isRowExpanded ? t('ll.table.collapseRow') : t('ll.table.expandRow')\"\n        :direction=\"isRowExpanded ? 'up' : 'down'\"\n        :is-expanded=\"isRowExpanded\"\n        @click=\"toggleExpand\"\n      />\n    </TableCell>\n    <!-- @slot default -->\n    <slot :is-row-expanded=\"isRowExpanded\" :toggle-expand=\"toggleExpand\"></slot>\n    <!-- Displays a 4px accent on the left of the table row -->\n    <div\n      v-if=\"props.accentColor\"\n      data-test=\"stash-table-row|accent\"\n      :class=\"{\n        absolute: props.accentColor,\n        [`bg-${props.accentColor}`]: props.accentColor,\n        block: props.accentColor,\n        'h-full': props.accentColor,\n        'w-1': props.accentColor,\n        'top-0': props.accentColor,\n        'left-0': props.accentColor,\n      }\"\n    ></div>\n  </tr>\n  <tr\n    v-if=\"isRowExpandable\"\n    class=\"stash-table-row stash-table-row--expandable\"\n    :class=\"classes['row-expansion']\"\n    data-test=\"stash-table-row|expansion-row\"\n  >\n    <Expand\n      is=\"td\"\n      :id=\"rowId\"\n      class=\"border-none bg-white px-3 py-0\"\n      data-test=\"stash-table-row|expansion-cell\"\n      :class=\"classes['row-expansion-content']\"\n      :colspan=\"childCellCount\"\n      :is-expanded=\"isRowExpanded\"\n    >\n      <!-- @slot expansion, for expandable content -->\n      <slot name=\"expansion\"></slot>\n    </Expand>\n  </tr>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .root {\n      border: 0;\n    }\n\n    /**\n     * Only takes effect when hideExpansionDivider is true, for a softer collapse transition as the bottom border re-appears\n     */\n    .is-expandable > td {\n      border-bottom-color: var(--color-ice-200);\n      transition: border-bottom-color 0.5s;\n    }\n\n    .root--hidden-divider.is-expanded > td {\n      transition: border-bottom-color 0s;\n      /**\n       * Removes the grey cell background for 'control' cells at lower breakpoints, letting the white of the tr come through.\n       */\n      border-bottom-color: transparent;\n    }\n\n    .layout--scroll {\n      border-radius: 0;\n      box-shadow: none !important;\n      margin: 0;\n    }\n\n    .layout--scroll:last-of-type {\n      border: 0;\n    }\n\n    .layout--scroll:last-of-type td {\n      border-bottom: none;\n    }\n\n    .layout--stack {\n      align-items: stretch;\n      background-color: var(--color-white);\n      column-gap: var(--grid-gutter);\n      display: grid;\n      grid-template-columns: repeat(12, 1fr);\n      position: relative;\n      row-gap: var(--grid-gutter);\n    }\n\n    .layout--stack:not(.is-expanded) {\n      border-radius: var(--radius-sm);\n      transition: border-radius 0.5s;\n    }\n\n    .layout--stack.is-expanded {\n      border-top-left-radius: var(--radius-sm);\n      border-top-right-radius: var(--radius-sm);\n    }\n\n    .row-selection-checkbox label {\n      padding: 0;\n      vertical-align: middle;\n    }\n\n    .layout--stack .row-control-cell {\n      display: flex;\n      align-items: center;\n      min-width: 0;\n    }\n\n    /* On mobile, display controls on their own row, pushing other cells below */\n    .row-control-cell + :not(.row-control-cell) {\n      grid-column-start: 1;\n    }\n\n    .row-expansion-content {\n      box-shadow: inset 0 -1px 0 0 var(--color-ice-200);\n    }\n\n    .layout--stack + .row-expansion,\n    .layout--stack + .row-expansion > .row-expansion-content {\n      display: block;\n    }\n\n    .layout--stack + .row-expansion > .row-expansion-content {\n      border-top: 1px solid var(--color-ice-200);\n      border-bottom-left-radius: var(--radius-sm);\n      border-bottom-right-radius: var(--radius-sm);\n      margin-bottom: --spacing(6);\n    }\n\n    .layout--stack.root--hidden-divider + .row-expansion > .row-expansion-content {\n      border-top: none;\n    }\n\n    /* On large screens, match the styles for layout-SCROLL */\n    @media (width >= theme(--breakpoint-lg)) {\n      .layout--stack {\n        align-items: unset;\n        background-color: unset;\n        border: 0;\n        border-bottom: 1px solid var(--color-ice-200);\n        border-radius: 0;\n        box-shadow: none;\n        column-gap: unset;\n        display: table-row;\n        grid-template-columns: unset;\n        row-gap: unset;\n      }\n\n      .layout--stack:last-of-type {\n        border-bottom: 0;\n      }\n\n      .layout--stack .row-control-cell {\n        display: table-cell;\n      }\n\n      .layout--stack + .row-expansion {\n        display: table-row;\n      }\n\n      .layout--stack + .row-expansion > .row-expansion-content {\n        border-top: unset;\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n        display: table-cell;\n        margin-bottom: unset;\n      }\n\n      .row-control-cell + :not(.row-control-cell) {\n        grid-column-start: unset;\n      }\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","attrs","useAttrs","classes","useCssModule","slots","_useSlots","tableInjection","inject","TABLE_INJECTION","hasActions","hasCustomExpandToggle","isSchemaDriven","isExpandable","isSelectable","layout","isLoading","showSelectionCell","computed","isRowExpanded","ref","isRowExpandable","isVNodeArray","children","c","countSlotChildren","vnodes","total","node","Fragment","childCellCount","_a","toggleExpand","count","rowId","uniqueId","value","isExpanded","watch","_createElementVNode","_mergeProps","_unref","_createBlock","TableCell","_normalizeClass","_createVNode","Checkbox","t","_cache","$event","ChevronToggle","_renderSlot","_ctx","_createElementBlock","Expand"],"mappings":"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"}

package/dist/TableRow.vue.d.ts

@@ -4,6 +4,9 @@ import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { PropType } from 'vue';
 import { PublicProps } from 'vue';
+import { RendererElement } from 'vue';
+import { RendererNode } from 'vue';
+import { VNode } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
@@ -66,13 +69,17 @@ isSelectDisabled: boolean;
     default(props: {
         isRowExpanded?: boolean | undefined;
         toggleExpand: (value?: boolean | undefined) => void;
-    }): unknown[];
+    }): VNode<RendererNode, RendererElement, {
+        [key: string]: any;
+    }>[];
     expansion(): unknown[];
 }> & {
     default(props: {
         isRowExpanded?: boolean | undefined;
         toggleExpand: (value?: boolean | undefined) => void;
-    }): unknown[];
+    }): VNode<RendererNode, RendererElement, {
+        [key: string]: any;
+    }>[];
     expansion(): unknown[];
 }>;
 export default _default;

package/dist/Tooltip.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./Tooltip.vue_vue_type_script_setup_true_lang-WMPMxzO-.js";
+import { _ as f } from "./Tooltip.vue_vue_type_script_setup_true_lang-CFpM7Ldj.js";
 export {
   f as default
 };

package/dist/{Tooltip.vue_vue_type_script_setup_true_lang-WMPMxzO-.js → Tooltip.vue_vue_type_script_setup_true_lang-CFpM7Ldj.js}

@@ -1,6 +1,6 @@
 import { defineComponent as g, ref as n, computed as r, createElementBlock as S, openBlock as u, createElementVNode as i, createBlock as T, renderSlot as s, Teleport as E, normalizeStyle as f, unref as $, createTextVNode as k, toDisplayString as B } from "vue";
 import { u as D, a as O, f as z, s as A, o as F, b as I } from "./floating-ui.vue-CuGrC-z8.js";
-import { u as P } from "./index-B1Gkwuxd.js";
+import { u as P } from "./index-DA70nQCT.js";
 const M = { class: "stash-tooltip__wrapper relative inline-flex size-fit" }, N = 6, C = 12, U = /* @__PURE__ */ g({
   __name: "Tooltip",
   props: {
@@ -78,4 +78,4 @@ const M = { class: "stash-tooltip__wrapper relative inline-flex size-fit" }, N =
 export {
   U as _
 };
-//# sourceMappingURL=Tooltip.vue_vue_type_script_setup_true_lang-WMPMxzO-.js.map
+//# sourceMappingURL=Tooltip.vue_vue_type_script_setup_true_lang-CFpM7Ldj.js.map

package/dist/{Tooltip.vue_vue_type_script_setup_true_lang-WMPMxzO-.js.map → Tooltip.vue_vue_type_script_setup_true_lang-CFpM7Ldj.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.vue_vue_type_script_setup_true_lang-WMPMxzO-.js","sources":["../src/components/Tooltip/Tooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { arrow, autoUpdate, flip, offset, shift, type Side, useFloating } from '@floating-ui/vue';\n  import { useMouseInElement } from '@vueuse/core';\n  import { computed, ref } from 'vue';\n\n  export type TooltipSide = Side;\n\n  const ARROW_OFFSET_PX = 6;\n  const OFFSET_DISTANCE_PX = 12;\n\n  const SIDE_MAP: Record<TooltipSide, TooltipSide> = {\n    top: 'bottom',\n    right: 'left',\n    bottom: 'top',\n    left: 'right',\n  };\n\n  export interface TooltipSlots {\n    /**\n     * The content to display in the tooltip. This may be text node, an element, or a component.\n     */\n    content: any;\n    /**\n     * The default slot is the element or component to which the tooltip will be anchored.\n     */\n    default: any;\n    /**\n     * A slot for the primary icon. This icon will be displayed before the text or content.\n     */\n    icon: any;\n    /**\n     * A slot for the secondary icon. This icon will be displayed after the text or content.\n     */\n    secondaryIcon: any;\n  }\n\n  defineSlots<TooltipSlots>();\n\n  export interface TooltipProps {\n    /**\n     * Disables teleporting the popover menu to an external element\n     * @default false\n     */\n    disableTeleport?: boolean;\n    /**\n     * Sets the placement of the menu\n     * @default 'top'\n     */\n    side?: TooltipSide;\n    /**\n     * Disables the tooltip\n     * @default false\n     */\n    isDisabled?: boolean;\n    /**\n     * Sets if the menu is open. If not set from the parent context, the menu will be controlled internally.\n     * @default false\n     */\n    isOpen?: boolean;\n    /**\n     * The query selector where the tooltip should be teleported\n     * @default '#stash-menus-mount-node'\n     */\n    teleportTo?: string | HTMLElement;\n    /**\n     * String content to display within the tooltip\n     * @default ''\n     */\n    text?: string;\n  }\n\n  const props = withDefaults(defineProps<TooltipProps>(), {\n    disableTeleport: false,\n    isDisabled: false,\n    isOpen: false,\n    side: 'top',\n    teleportTo: '#stash-menus-mount-node',\n    text: '',\n  });\n\n  const anchor = ref<HTMLElement | null>(null);\n  const floatingArrow = ref<HTMLElement | null>(null);\n  const tooltip = ref<HTMLElement | null>(null);\n\n  const { isOutside } = useMouseInElement(anchor);\n\n  const open = computed(() => !props.isDisabled && (!isOutside.value || props.isOpen));\n  const placementSetting = computed(() => props.side);\n\n  const { floatingStyles, middlewareData, placement } = useFloating(anchor, tooltip, {\n    whileElementsMounted: autoUpdate,\n    placement: placementSetting,\n    middleware: [\n      flip(),\n      shift({ padding: 8 }),\n      offset(OFFSET_DISTANCE_PX),\n      arrow({ element: floatingArrow, padding: 8 }),\n    ],\n  });\n\n  const arrowStyles = computed(() => {\n    const arrowPosition = SIDE_MAP[placement.value];\n\n    return {\n      left: middlewareData.value.arrow?.x != null ? `${middlewareData.value.arrow.x}px` : '',\n      top: middlewareData.value.arrow?.y != null ? `${middlewareData.value.arrow.y}px` : '',\n      [arrowPosition]: `-${ARROW_OFFSET_PX}px`,\n    };\n  });\n</script>\n\n<template>\n  <div class=\"stash-tooltip__wrapper relative inline-flex size-fit\">\n    <span ref=\"anchor\" data-test=\"stash-tooltip|anchor\" class=\"stash-tooltip__anchor\">\n      <slot></slot>\n    </span>\n    <Teleport :to=\"props.teleportTo\" :disabled=\"props.disableTeleport\">\n      <div\n        ref=\"tooltip\"\n        data-test=\"stash-tooltip\"\n        class=\"stash-tooltip pointer-events-none z-screen flex w-[148px] flex-col items-center whitespace-normal rounded bg-ice-900 p-3 text-center text-xs text-white opacity-0 shadow transition-opacity\"\n        role=\"tooltip\"\n        :style=\"{\n          ...floatingStyles,\n          opacity: open ? 0.95 : 0,\n        }\"\n      >\n        <slot name=\"icon\"></slot>\n        <slot name=\"content\">{{ props.text }}</slot>\n        <slot name=\"secondaryIcon\"></slot>\n        <div\n          ref=\"floatingArrow\"\n          class=\"stash-tooltip__arrow absolute z-behind size-[12px] rotate-45 bg-ice-900\"\n          :style=\"arrowStyles\"\n        ></div>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"names":["ARROW_OFFSET_PX","OFFSET_DISTANCE_PX","SIDE_MAP","props","__props","anchor","ref","floatingArrow","tooltip","isOutside","useMouseInElement","open","computed","placementSetting","floatingStyles","middlewareData","placement","useFloating","autoUpdate","flip","shift","offset","arrow","arrowStyles","arrowPosition","_a","_b","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_renderSlot","_ctx","_createBlock","_Teleport","_normalizeStyle","_unref","_createTextVNode","_toDisplayString"],"mappings":";;;6EAOQA,IAAkB,GAClBC,IAAqB;;;;;;;;;;;AAE3B,UAAMC,IAA6C;AAAA,MACjD,KAAK;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,MAAM;AAAA,IAAA,GAyDFC,IAAQC,GASRC,IAASC,EAAwB,IAAI,GACrCC,IAAgBD,EAAwB,IAAI,GAC5CE,IAAUF,EAAwB,IAAI,GAEtC,EAAE,WAAAG,EAAA,IAAcC,EAAkBL,CAAM,GAExCM,IAAOC,EAAS,MAAM,CAACT,EAAM,eAAe,CAACM,EAAU,SAASN,EAAM,OAAO,GAC7EU,IAAmBD,EAAS,MAAMT,EAAM,IAAI,GAE5C,EAAE,gBAAAW,GAAgB,gBAAAC,GAAgB,WAAAC,MAAcC,EAAYZ,GAAQG,GAAS;AAAA,MACjF,sBAAsBU;AAAA,MACtB,WAAWL;AAAA,MACX,YAAY;AAAA,QACVM,EAAA;AAAA,QACAC,EAAM,EAAE,SAAS,GAAG;AAAA,QACpBC,EAAOpB,CAAkB;AAAA,QACzBqB,EAAM,EAAE,SAASf,GAAe,SAAS,GAAG;AAAA,MAAA;AAAA,IAC9C,CACD,GAEKgB,IAAcX,EAAS,MAAM;;AACjC,YAAMY,IAAgBtB,EAASc,EAAU,KAAK;AAE9C,aAAO;AAAA,QACL,QAAMS,IAAAV,EAAe,MAAM,UAArB,gBAAAU,EAA4B,MAAK,OAAO,GAAGV,EAAe,MAAM,MAAM,CAAC,OAAO;AAAA,QACpF,OAAKW,IAAAX,EAAe,MAAM,UAArB,gBAAAW,EAA4B,MAAK,OAAO,GAAGX,EAAe,MAAM,MAAM,CAAC,OAAO;AAAA,QACnF,CAACS,CAAa,GAAG,IAAIxB,CAAe;AAAA,MAAA;AAAA,IAExC,CAAC;sBAID2B,EAAA,GAAAC,EAyBM,OAzBNC,GAyBM;AAAA,MAxBJC,EAEO,QAAA;AAAA,iBAFG;AAAA,QAAJ,KAAIzB;AAAA,QAAS,aAAU;AAAA,QAAuB,OAAM;AAAA,MAAA;QACxD0B,EAAaC,EAAA,QAAA,SAAA;AAAA,MAAA;YAEfC,EAoBWC,GAAA;AAAA,QApBA,IAAI/B,EAAM;AAAA,QAAa,UAAUA,EAAM;AAAA,MAAA;QAChD2B,EAkBM,OAAA;AAAA,mBAjBA;AAAA,UAAJ,KAAItB;AAAA,UACJ,aAAU;AAAA,UACV,OAAM;AAAA,UACN,MAAK;AAAA,UACJ,OAAK2B,EAAA;AAAA,eAAiBC,EAAAtB,CAAA;AAAA,qBAAmCH,EAAA,QAAI,OAAA;AAAA,UAAA;;UAK9DoB,EAAyBC,EAAA,QAAA,MAAA;AAAA,UACzBD,EAA4CC,yBAA5C,MAA4C;AAAA,YAApBK,EAAAC,EAAAnC,EAAM,IAAI,GAAA,CAAA;AAAA,UAAA;UAClC4B,EAAkCC,EAAA,QAAA,eAAA;AAAA,UAClCF,EAIO,OAAA;AAAA,qBAHD;AAAA,YAAJ,KAAIvB;AAAA,YACJ,OAAM;AAAA,YACL,SAAOgB,EAAA,KAAW;AAAA,UAAA;;;;;;"}
+{"version":3,"file":"Tooltip.vue_vue_type_script_setup_true_lang-CFpM7Ldj.js","sources":["../src/components/Tooltip/Tooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { arrow, autoUpdate, flip, offset, shift, type Side, useFloating } from '@floating-ui/vue';\n  import { useMouseInElement } from '@vueuse/core';\n  import { computed, ref } from 'vue';\n\n  export type TooltipSide = Side;\n\n  const ARROW_OFFSET_PX = 6;\n  const OFFSET_DISTANCE_PX = 12;\n\n  const SIDE_MAP: Record<TooltipSide, TooltipSide> = {\n    top: 'bottom',\n    right: 'left',\n    bottom: 'top',\n    left: 'right',\n  };\n\n  export interface TooltipSlots {\n    /**\n     * The content to display in the tooltip. This may be text node, an element, or a component.\n     */\n    content: any;\n    /**\n     * The default slot is the element or component to which the tooltip will be anchored.\n     */\n    default: any;\n    /**\n     * A slot for the primary icon. This icon will be displayed before the text or content.\n     */\n    icon: any;\n    /**\n     * A slot for the secondary icon. This icon will be displayed after the text or content.\n     */\n    secondaryIcon: any;\n  }\n\n  defineSlots<TooltipSlots>();\n\n  export interface TooltipProps {\n    /**\n     * Disables teleporting the popover menu to an external element\n     * @default false\n     */\n    disableTeleport?: boolean;\n    /**\n     * Sets the placement of the menu\n     * @default 'top'\n     */\n    side?: TooltipSide;\n    /**\n     * Disables the tooltip\n     * @default false\n     */\n    isDisabled?: boolean;\n    /**\n     * Sets if the menu is open. If not set from the parent context, the menu will be controlled internally.\n     * @default false\n     */\n    isOpen?: boolean;\n    /**\n     * The query selector where the tooltip should be teleported\n     * @default '#stash-menus-mount-node'\n     */\n    teleportTo?: string | HTMLElement;\n    /**\n     * String content to display within the tooltip\n     * @default ''\n     */\n    text?: string;\n  }\n\n  const props = withDefaults(defineProps<TooltipProps>(), {\n    disableTeleport: false,\n    isDisabled: false,\n    isOpen: false,\n    side: 'top',\n    teleportTo: '#stash-menus-mount-node',\n    text: '',\n  });\n\n  const anchor = ref<HTMLElement | null>(null);\n  const floatingArrow = ref<HTMLElement | null>(null);\n  const tooltip = ref<HTMLElement | null>(null);\n\n  const { isOutside } = useMouseInElement(anchor);\n\n  const open = computed(() => !props.isDisabled && (!isOutside.value || props.isOpen));\n  const placementSetting = computed(() => props.side);\n\n  const { floatingStyles, middlewareData, placement } = useFloating(anchor, tooltip, {\n    whileElementsMounted: autoUpdate,\n    placement: placementSetting,\n    middleware: [\n      flip(),\n      shift({ padding: 8 }),\n      offset(OFFSET_DISTANCE_PX),\n      arrow({ element: floatingArrow, padding: 8 }),\n    ],\n  });\n\n  const arrowStyles = computed(() => {\n    const arrowPosition = SIDE_MAP[placement.value];\n\n    return {\n      left: middlewareData.value.arrow?.x != null ? `${middlewareData.value.arrow.x}px` : '',\n      top: middlewareData.value.arrow?.y != null ? `${middlewareData.value.arrow.y}px` : '',\n      [arrowPosition]: `-${ARROW_OFFSET_PX}px`,\n    };\n  });\n</script>\n\n<template>\n  <div class=\"stash-tooltip__wrapper relative inline-flex size-fit\">\n    <span ref=\"anchor\" data-test=\"stash-tooltip|anchor\" class=\"stash-tooltip__anchor\">\n      <slot></slot>\n    </span>\n    <Teleport :to=\"props.teleportTo\" :disabled=\"props.disableTeleport\">\n      <div\n        ref=\"tooltip\"\n        data-test=\"stash-tooltip\"\n        class=\"stash-tooltip pointer-events-none z-screen flex w-[148px] flex-col items-center whitespace-normal rounded bg-ice-900 p-3 text-center text-xs text-white opacity-0 shadow transition-opacity\"\n        role=\"tooltip\"\n        :style=\"{\n          ...floatingStyles,\n          opacity: open ? 0.95 : 0,\n        }\"\n      >\n        <slot name=\"icon\"></slot>\n        <slot name=\"content\">{{ props.text }}</slot>\n        <slot name=\"secondaryIcon\"></slot>\n        <div\n          ref=\"floatingArrow\"\n          class=\"stash-tooltip__arrow absolute z-behind size-[12px] rotate-45 bg-ice-900\"\n          :style=\"arrowStyles\"\n        ></div>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"names":["ARROW_OFFSET_PX","OFFSET_DISTANCE_PX","SIDE_MAP","props","__props","anchor","ref","floatingArrow","tooltip","isOutside","useMouseInElement","open","computed","placementSetting","floatingStyles","middlewareData","placement","useFloating","autoUpdate","flip","shift","offset","arrow","arrowStyles","arrowPosition","_a","_b","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_renderSlot","_ctx","_createBlock","_Teleport","_normalizeStyle","_unref","_createTextVNode","_toDisplayString"],"mappings":";;;6EAOQA,IAAkB,GAClBC,IAAqB;;;;;;;;;;;AAE3B,UAAMC,IAA6C;AAAA,MACjD,KAAK;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,MAAM;AAAA,IAAA,GAyDFC,IAAQC,GASRC,IAASC,EAAwB,IAAI,GACrCC,IAAgBD,EAAwB,IAAI,GAC5CE,IAAUF,EAAwB,IAAI,GAEtC,EAAE,WAAAG,EAAA,IAAcC,EAAkBL,CAAM,GAExCM,IAAOC,EAAS,MAAM,CAACT,EAAM,eAAe,CAACM,EAAU,SAASN,EAAM,OAAO,GAC7EU,IAAmBD,EAAS,MAAMT,EAAM,IAAI,GAE5C,EAAE,gBAAAW,GAAgB,gBAAAC,GAAgB,WAAAC,MAAcC,EAAYZ,GAAQG,GAAS;AAAA,MACjF,sBAAsBU;AAAA,MACtB,WAAWL;AAAA,MACX,YAAY;AAAA,QACVM,EAAA;AAAA,QACAC,EAAM,EAAE,SAAS,GAAG;AAAA,QACpBC,EAAOpB,CAAkB;AAAA,QACzBqB,EAAM,EAAE,SAASf,GAAe,SAAS,GAAG;AAAA,MAAA;AAAA,IAC9C,CACD,GAEKgB,IAAcX,EAAS,MAAM;;AACjC,YAAMY,IAAgBtB,EAASc,EAAU,KAAK;AAE9C,aAAO;AAAA,QACL,QAAMS,IAAAV,EAAe,MAAM,UAArB,gBAAAU,EAA4B,MAAK,OAAO,GAAGV,EAAe,MAAM,MAAM,CAAC,OAAO;AAAA,QACpF,OAAKW,IAAAX,EAAe,MAAM,UAArB,gBAAAW,EAA4B,MAAK,OAAO,GAAGX,EAAe,MAAM,MAAM,CAAC,OAAO;AAAA,QACnF,CAACS,CAAa,GAAG,IAAIxB,CAAe;AAAA,MAAA;AAAA,IAExC,CAAC;sBAID2B,EAAA,GAAAC,EAyBM,OAzBNC,GAyBM;AAAA,MAxBJC,EAEO,QAAA;AAAA,iBAFG;AAAA,QAAJ,KAAIzB;AAAA,QAAS,aAAU;AAAA,QAAuB,OAAM;AAAA,MAAA;QACxD0B,EAAaC,EAAA,QAAA,SAAA;AAAA,MAAA;YAEfC,EAoBWC,GAAA;AAAA,QApBA,IAAI/B,EAAM;AAAA,QAAa,UAAUA,EAAM;AAAA,MAAA;QAChD2B,EAkBM,OAAA;AAAA,mBAjBA;AAAA,UAAJ,KAAItB;AAAA,UACJ,aAAU;AAAA,UACV,OAAM;AAAA,UACN,MAAK;AAAA,UACJ,OAAK2B,EAAA;AAAA,eAAiBC,EAAAtB,CAAA;AAAA,qBAAmCH,EAAA,QAAI,OAAA;AAAA,UAAA;;UAK9DoB,EAAyBC,EAAA,QAAA,MAAA;AAAA,UACzBD,EAA4CC,yBAA5C,MAA4C;AAAA,YAApBK,EAAAC,EAAAnC,EAAM,IAAI,GAAA,CAAA;AAAA,UAAA;UAClC4B,EAAkCC,EAAA,QAAA,eAAA;AAAA,UAClCF,EAIO,OAAA;AAAA,qBAHD;AAAA,YAAJ,KAAIvB;AAAA,YACJ,OAAM;AAAA,YACL,SAAOgB,EAAA,KAAW;AAAA,UAAA;;;;;;"}