@leaflink/stash 53.4.6 → 53.4.8

package/dist/Thumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"Thumbnail.js","sources":["../src/components/Thumbnail/Thumbnail.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { ThumbnailDefinition, ThumbnailVariant } from './Thumbnail.types';\n\n  export * from './Thumbnail.types';\n</script>\n\n<script setup lang=\"ts\" generic=\"ThumbnailItem extends ThumbnailDefinition\">\n  import { computed, inject, toValue, useCssModule } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n  import Image from '../Image/Image.vue';\n  import { THUMBNAIL_INJECTION } from '../ThumbnailGroup/ThumbnailGroup.keys';\n\n  const props = withDefaults(\n    defineProps<{\n      /**\n       * Thumbnail data containing and id and the image url\n       */\n      thumbnail: ThumbnailItem;\n\n      /**\n       * Thumbnail alt text for the image\n       * @default ''\n       */\n      altText?: string;\n\n      /**\n       * Whether the thumbnail has some transparency or is fully opaque\n       * @default 'opaque'\n       */\n      variant?: ThumbnailVariant;\n    }>(),\n    {\n      variant: 'opaque',\n      altText: '',\n    },\n  );\n\n  const emit = defineEmits<{\n    /**\n     * Emits when a thumbnail is removed\n     */\n    remove: [index: number];\n\n    /**\n     * Emits when a thumbnail is clicked\n     */\n    click: [index: number];\n  }>();\n\n  const classes = useCssModule();\n\n  const { thumbnails, activeThumbnail, draggable, isDragging, radius, removable } = inject(\n    THUMBNAIL_INJECTION.key,\n    THUMBNAIL_INJECTION.defaults,\n  );\n\n  const thumbnailIndex = computed(() => toValue(thumbnails).findIndex((t) => t === props.thumbnail));\n\n  function handleThumbnailClick() {\n    activeThumbnail.value = thumbnailIndex.value;\n    emit('click', thumbnailIndex.value);\n  }\n\n  function handleRemove() {\n    emit('remove', thumbnailIndex.value);\n    activeThumbnail.value = -1;\n  }\n</script>\n\n<template>\n  <li\n    class=\"stash-thumbnail focus-visible:outline-hidden group relative cursor-pointer\"\n    :class=\"[\n      {\n        [classes['thumbnail-translucent']]: props.variant === 'translucent',\n        [classes['thumbnail-opaque']]: props.variant === 'opaque',\n        [classes['thumbnail-removable']]: removable,\n        [classes['thumbnail-circle']]: radius === 'circle',\n        [classes['thumbnail-rounded']]: radius === 'rounded',\n      },\n    ]\"\n    :aria-current=\"activeThumbnail === thumbnailIndex\"\n    :draggable=\"draggable\"\n    data-test=\"stash-thumbnail\"\n    tabindex=\"0\"\n    @click=\"handleThumbnailClick()\"\n  >\n    <Image\n      class=\"stash-thumbnail__img border-ice-200 outline-blue-500/15 transition-colors\"\n      :class=\"[\n        classes['thumbnail-img'],\n        {\n          [classes['thumbnail-mask']]: removable && radius !== 'circle',\n          [classes['thumbnail-active']]: activeThumbnail === thumbnailIndex && !isDragging,\n          'group-hover:border-blue-500 group-focus-visible:border-blue-500 group-focus-visible:outline': !isDragging,\n        },\n      ]\"\n      data-test=\"stash-thumbnail|img\"\n      :radius=\"radius\"\n      :src=\"thumbnail.imageUrl\"\n      :alt=\"altText\"\n    />\n\n    <Button\n      v-if=\"removable\"\n      class=\"stash-thumbnail__remove\"\n      :class=\"[classes['thumbnail-remove']]\"\n      data-test=\"stash-thumbnail|remove\"\n      :aria-label=\"t('ll.thumbnail.removeButton', { index: thumbnailIndex + 1 })\"\n      type=\"button\"\n      icon\n      @click.stop.prevent=\"handleRemove\"\n    >\n      <Icon name=\"close\" size=\"small\" />\n    </Button>\n\n    <!-- @slot: Slot to add a hint below the image -->\n    <slot name=\"hint\" />\n  </li>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .thumbnail-remove {\n      position: absolute;\n      top: calc(--spacing(1.5) * -1);\n      right: calc(--spacing(1.5) * -1);\n      padding: 1px;\n      height: auto;\n      width: auto !important;\n      min-width: auto;\n      border-radius: calc(infinity * 1px);\n      background: var(--color-blue-500);\n      color: white;\n\n      &:hover,\n      &:focus {\n        background: var(--color-blue-600);\n      }\n\n      &:focus {\n        outline: none;\n      }\n    }\n\n    .thumbnail-img {\n      border-style: solid;\n      object-fit: cover;\n      height: --spacing(12);\n      width: --spacing(12);\n      border-width: 1px;\n      outline-width: --spacing(1);\n\n      .thumbnail-translucent & {\n        opacity: var(--opacity-40);\n\n        &:hover,\n        &.thumbnail-active {\n          opacity: var(--opacity-100);\n        }\n      }\n    }\n\n    .thumbnail-active {\n      border: 1px solid var(--color-ice-500);\n    }\n\n    .thumbnail-mask {\n      mask-image: radial-gradient(circle at top right, transparent 20%, white 20.5%);\n    }\n\n    .thumbnail-full {\n      border-radius: calc(infinity * 1px);\n    }\n\n    .thumbnail-rounded {\n      border-radius: var(--radius-sm);\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","classes","useCssModule","thumbnails","activeThumbnail","draggable","isDragging","radius","removable","inject","THUMBNAIL_INJECTION","thumbnailIndex","computed","toValue","t","handleThumbnailClick","handleRemove","_createElementBlock","_unref","_createVNode","Image","_createBlock","Button","_normalizeClass","Icon","_renderSlot","_ctx"],"mappings":";;;;;;;;;;;;;;;;AAeE,UAAMA,IAAQC,GAyBRC,IAAOC,GAYPC,IAAUC,EAAA,GAEV,EAAE,YAAAC,GAAY,iBAAAC,GAAiB,WAAAC,GAAW,YAAAC,GAAY,QAAAC,GAAQ,WAAAC,MAAcC;AAAA,MAChFC,EAAoB;AAAA,MACpBA,EAAoB;AAAA,IAAA,GAGhBC,IAAiBC,EAAS,MAAMC,EAAQV,CAAU,EAAE,UAAU,CAACW,MAAMA,MAAMjB,EAAM,SAAS,CAAC;AAEjG,aAASkB,IAAuB;AAC9B,MAAAX,EAAgB,QAAQO,EAAe,OACvCZ,EAAK,SAASY,EAAe,KAAK;AAAA,IACpC;AAEA,aAASK,IAAe;AACtB,MAAAjB,EAAK,UAAUY,EAAe,KAAK,GACnCP,EAAgB,QAAQ;AAAA,IAC1B;2BAIAa,EAgDK,MAAA;AAAA,MA/CH,UAAM,8EAA4E;AAAA;WACvDC,EAAAjB,CAAA,EAAO,uBAAA,CAAA,GAA4BJ,EAAM,YAAO;AAAA,WAA6BqB,EAAAjB,CAAA,EAAO,kBAAA,CAAA,GAAuBJ,EAAM,YAAO;AAAA,UAAwB,CAAAqB,EAAAjB,CAAA,2BAAiCiB,EAAAV,CAAA;AAAA,UAAoB,CAAAU,EAAAjB,CAAA,wBAA8BiB,EAAAX,CAAA,MAAM;AAAA,UAAwB,CAAAW,EAAAjB,CAAA,yBAA+BiB,EAAAX,CAAA,MAAM;AAAA,QAAA;AAAA;MAShU,gBAAcW,EAAAd,CAAA,MAAoBO,EAAA;AAAA,MAClC,WAAWO,EAAAb,CAAA;AAAA,MACZ,aAAU;AAAA,MACV,UAAS;AAAA,MACR,gCAAOU,EAAA;AAAA,IAAoB;MAE5BI,EAcEC,GAAA;AAAA,QAbA,UAAM,6EAA2E;AAAA,UAC/DF,EAAAjB,CAAA,EAAO,eAAA;AAAA;aAAwCiB,EAAAjB,CAAA,EAAO,gBAAA,CAAA,GAAqBiB,EAAAV,CAAA,KAAaU,EAAAX,CAAA,MAAM;AAAA,YAA0B,CAAAW,EAAAjB,CAAA,EAAO,kBAAA,CAAA,GAAuBiB,EAAAd,CAAA,MAAoBO,EAAA,UAAmBO,EAAAZ,CAAA;AAAA,4GAAsHY,EAAAZ,CAAA;AAAA,UAAA;AAAA;QAQrU,aAAU;AAAA,QACT,QAAQY,EAAAX,CAAA;AAAA,QACR,KAAKT,EAAA,UAAU;AAAA,QACf,KAAKA,EAAA;AAAA,MAAA;MAIAoB,EAAAV,CAAA,UADRa,EAWSC,GAAA;AAAA;QATP,OAAKC,EAAA,CAAC,2BAAyB,CACtBL,EAAAjB,CAAA,EAAO,kBAAA,CAAA,CAAA,CAAA;AAAA,QAChB,aAAU;AAAA,QACT,cAAYiB,EAAAJ,CAAA,EAAC,6BAAA,EAAA,OAAuCH,EAAA,QAAc,GAAA;AAAA,QACnE,MAAK;AAAA,QACL,MAAA;AAAA,QACC,WAAoBK,GAAY,CAAA,QAAA,SAAA,CAAA;AAAA,MAAA;mBAEjC,MAAkC;AAAA,UAAlCG,EAAkCK,GAAA;AAAA,YAA5B,MAAK;AAAA,YAAQ,MAAK;AAAA,UAAA;;;;MAI1BC,EAAoBC,EAAA,QAAA,MAAA;AAAA,IAAA;;;;;;;;;;;;;"}
+{"version":3,"file":"Thumbnail.js","sources":["../src/components/Thumbnail/Thumbnail.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { ThumbnailDefinition, ThumbnailVariant } from './Thumbnail.types';\n\n  export * from './Thumbnail.types';\n</script>\n\n<script setup lang=\"ts\" generic=\"ThumbnailItem extends ThumbnailDefinition\">\n  import { computed, inject, toValue, useCssModule } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n  import Image from '../Image/Image.vue';\n  import { THUMBNAIL_INJECTION } from '../ThumbnailGroup/ThumbnailGroup.keys';\n\n  const props = withDefaults(\n    defineProps<{\n      /**\n       * Thumbnail data containing and id and the image url\n       */\n      thumbnail: ThumbnailItem;\n\n      /**\n       * Thumbnail alt text for the image\n       * @default ''\n       */\n      altText?: string;\n\n      /**\n       * Whether the thumbnail has some transparency or is fully opaque\n       * @default 'opaque'\n       */\n      variant?: ThumbnailVariant;\n    }>(),\n    {\n      variant: 'opaque',\n      altText: '',\n    },\n  );\n\n  const emit = defineEmits<{\n    /**\n     * Emits when a thumbnail is removed\n     */\n    remove: [index: number];\n\n    /**\n     * Emits when a thumbnail is clicked\n     */\n    click: [index: number];\n  }>();\n\n  const classes = useCssModule();\n\n  const { thumbnails, activeThumbnail, draggable, isDragging, radius, removable } = inject(\n    THUMBNAIL_INJECTION.key,\n    THUMBNAIL_INJECTION.defaults,\n  );\n\n  const thumbnailIndex = computed(() => toValue(thumbnails).findIndex((t) => t === props.thumbnail));\n\n  const imageUrl = computed(() => props.thumbnail.imageUrl);\n\n  function handleThumbnailClick() {\n    activeThumbnail.value = thumbnailIndex.value;\n    emit('click', thumbnailIndex.value);\n  }\n\n  function handleRemove() {\n    emit('remove', thumbnailIndex.value);\n    activeThumbnail.value = -1;\n  }\n</script>\n\n<template>\n  <li\n    class=\"stash-thumbnail focus-visible:outline-hidden group relative cursor-pointer\"\n    :class=\"[\n      {\n        [classes['thumbnail-translucent']]: props.variant === 'translucent',\n        [classes['thumbnail-opaque']]: props.variant === 'opaque',\n        [classes['thumbnail-removable']]: removable,\n        [classes['thumbnail-circle']]: radius === 'circle',\n        [classes['thumbnail-rounded']]: radius === 'rounded',\n      },\n    ]\"\n    :aria-current=\"activeThumbnail === thumbnailIndex\"\n    :draggable=\"draggable\"\n    data-test=\"stash-thumbnail\"\n    tabindex=\"0\"\n    @click=\"handleThumbnailClick()\"\n  >\n    <Image\n      class=\"stash-thumbnail__img border-ice-200 outline-blue-500/15 transition-colors\"\n      :class=\"[\n        classes['thumbnail-img'],\n        {\n          [classes['thumbnail-mask']]: removable && radius !== 'circle',\n          [classes['thumbnail-active']]: activeThumbnail === thumbnailIndex && !isDragging,\n          'group-hover:border-blue-500 group-focus-visible:border-blue-500 group-focus-visible:outline': !isDragging,\n        },\n      ]\"\n      data-test=\"stash-thumbnail|img\"\n      :radius=\"radius\"\n      :src=\"imageUrl\"\n      :alt=\"altText\"\n    />\n\n    <Button\n      v-if=\"removable\"\n      class=\"stash-thumbnail__remove\"\n      :class=\"[classes['thumbnail-remove']]\"\n      data-test=\"stash-thumbnail|remove\"\n      :aria-label=\"t('ll.thumbnail.removeButton', { index: thumbnailIndex + 1 })\"\n      type=\"button\"\n      icon\n      @click.stop.prevent=\"handleRemove\"\n    >\n      <Icon name=\"close\" size=\"small\" />\n    </Button>\n\n    <!-- @slot: Slot to add a hint below the image -->\n    <slot name=\"hint\" />\n  </li>\n</template>\n\n<style module>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .thumbnail-remove {\n      position: absolute;\n      top: calc(--spacing(1.5) * -1);\n      right: calc(--spacing(1.5) * -1);\n      padding: 1px;\n      height: auto;\n      width: auto !important;\n      min-width: auto;\n      border-radius: calc(infinity * 1px);\n      background: var(--color-blue-500);\n      color: white;\n\n      &:hover,\n      &:focus {\n        background: var(--color-blue-600);\n      }\n\n      &:focus {\n        outline: none;\n      }\n    }\n\n    .thumbnail-img {\n      border-style: solid;\n      object-fit: cover;\n      height: --spacing(12);\n      width: --spacing(12);\n      border-width: 1px;\n      outline-width: --spacing(1);\n\n      .thumbnail-translucent & {\n        opacity: var(--opacity-40);\n\n        &:hover,\n        &.thumbnail-active {\n          opacity: var(--opacity-100);\n        }\n      }\n    }\n\n    .thumbnail-active {\n      border: 1px solid var(--color-ice-500);\n    }\n\n    .thumbnail-mask {\n      mask-image: radial-gradient(circle at top right, transparent 20%, white 20.5%);\n    }\n\n    .thumbnail-full {\n      border-radius: calc(infinity * 1px);\n    }\n\n    .thumbnail-rounded {\n      border-radius: var(--radius-sm);\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","classes","useCssModule","thumbnails","activeThumbnail","draggable","isDragging","radius","removable","inject","THUMBNAIL_INJECTION","thumbnailIndex","computed","toValue","t","imageUrl","handleThumbnailClick","handleRemove","_createElementBlock","_unref","_createVNode","Image","_createBlock","Button","_normalizeClass","Icon","_renderSlot","_ctx"],"mappings":";;;;;;;;;;;;;;;;AAeE,UAAMA,IAAQC,GAyBRC,IAAOC,GAYPC,IAAUC,EAAA,GAEV,EAAE,YAAAC,GAAY,iBAAAC,GAAiB,WAAAC,GAAW,YAAAC,GAAY,QAAAC,GAAQ,WAAAC,MAAcC;AAAA,MAChFC,EAAoB;AAAA,MACpBA,EAAoB;AAAA,IAAA,GAGhBC,IAAiBC,EAAS,MAAMC,EAAQV,CAAU,EAAE,UAAU,CAACW,MAAMA,MAAMjB,EAAM,SAAS,CAAC,GAE3FkB,IAAWH,EAAS,MAAMf,EAAM,UAAU,QAAQ;AAExD,aAASmB,IAAuB;AAC9B,MAAAZ,EAAgB,QAAQO,EAAe,OACvCZ,EAAK,SAASY,EAAe,KAAK;AAAA,IACpC;AAEA,aAASM,IAAe;AACtB,MAAAlB,EAAK,UAAUY,EAAe,KAAK,GACnCP,EAAgB,QAAQ;AAAA,IAC1B;2BAIAc,EAgDK,MAAA;AAAA,MA/CH,UAAM,8EAA4E;AAAA;WACvDC,EAAAlB,CAAA,EAAO,uBAAA,CAAA,GAA4BJ,EAAM,YAAO;AAAA,WAA6BsB,EAAAlB,CAAA,EAAO,kBAAA,CAAA,GAAuBJ,EAAM,YAAO;AAAA,UAAwB,CAAAsB,EAAAlB,CAAA,2BAAiCkB,EAAAX,CAAA;AAAA,UAAoB,CAAAW,EAAAlB,CAAA,wBAA8BkB,EAAAZ,CAAA,MAAM;AAAA,UAAwB,CAAAY,EAAAlB,CAAA,yBAA+BkB,EAAAZ,CAAA,MAAM;AAAA,QAAA;AAAA;MAShU,gBAAcY,EAAAf,CAAA,MAAoBO,EAAA;AAAA,MAClC,WAAWQ,EAAAd,CAAA;AAAA,MACZ,aAAU;AAAA,MACV,UAAS;AAAA,MACR,gCAAOW,EAAA;AAAA,IAAoB;MAE5BI,EAcEC,GAAA;AAAA,QAbA,UAAM,6EAA2E;AAAA,UAC/DF,EAAAlB,CAAA,EAAO,eAAA;AAAA;aAAwCkB,EAAAlB,CAAA,EAAO,gBAAA,CAAA,GAAqBkB,EAAAX,CAAA,KAAaW,EAAAZ,CAAA,MAAM;AAAA,YAA0B,CAAAY,EAAAlB,CAAA,EAAO,kBAAA,CAAA,GAAuBkB,EAAAf,CAAA,MAAoBO,EAAA,UAAmBQ,EAAAb,CAAA;AAAA,4GAAsHa,EAAAb,CAAA;AAAA,UAAA;AAAA;QAQrU,aAAU;AAAA,QACT,QAAQa,EAAAZ,CAAA;AAAA,QACR,KAAKQ,EAAA;AAAA,QACL,KAAKjB,EAAA;AAAA,MAAA;MAIAqB,EAAAX,CAAA,UADRc,EAWSC,GAAA;AAAA;QATP,OAAKC,EAAA,CAAC,2BAAyB,CACtBL,EAAAlB,CAAA,EAAO,kBAAA,CAAA,CAAA,CAAA;AAAA,QAChB,aAAU;AAAA,QACT,cAAYkB,EAAAL,CAAA,EAAC,6BAAA,EAAA,OAAuCH,EAAA,QAAc,GAAA;AAAA,QACnE,MAAK;AAAA,QACL,MAAA;AAAA,QACC,WAAoBM,GAAY,CAAA,QAAA,SAAA,CAAA;AAAA,MAAA;mBAEjC,MAAkC;AAAA,UAAlCG,EAAkCK,GAAA;AAAA,YAA5B,MAAK;AAAA,YAAQ,MAAK;AAAA,UAAA;;;;MAI1BC,EAAoBC,EAAA,QAAA,MAAA;AAAA,IAAA;;;;;;;;;;;;;"}

package/dist/ThumbnailGroup.js

@@ -1,11 +1,11 @@
-import { defineComponent as h, mergeModels as m, useModel as c, computed as l, ref as g, provide as v, createElementBlock as d, openBlock as o, renderSlot as T, normalizeProps as y, guardReactiveProps as _, unref as E, Fragment as x, renderList as I, createBlock as B } from "vue";
-import k, { moveSortableElements as S } from "./useSortable.js";
-import w from "./ThumbnailEmpty.js";
-import { T as C } from "./ThumbnailGroup.keys-EJ4qFNhx.js";
-import { _ as D } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const M = /* @__PURE__ */ h({
+import { defineComponent as f, mergeModels as i, useModel as h, computed as l, ref as g, provide as v, createElementBlock as d, openBlock as s, renderSlot as y, normalizeProps as T, guardReactiveProps as _, unref as E, Fragment as x, renderList as B, createBlock as I } from "vue";
+import k, { moveSortableElements as M } from "./useSortable.js";
+import S from "./ThumbnailEmpty.js";
+import { T as w } from "./ThumbnailGroup.keys-EJ4qFNhx.js";
+import { _ as C } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const D = /* @__PURE__ */ f({
   __name: "ThumbnailGroup",
-  props: /* @__PURE__ */ m({
+  props: /* @__PURE__ */ i({
     draggable: { type: Boolean, default: !1 },
     radius: { default: "rounded" },
     removable: { type: Boolean, default: !1 },
@@ -18,16 +18,16 @@ const M = /* @__PURE__ */ h({
     },
     activeThumbnailModifiers: {}
   }),
-  emits: /* @__PURE__ */ m(["dragStart", "dragEnd", "update:thumbnails"], ["update:activeThumbnail"]),
-  setup(s, { emit: p }) {
-    const n = p, t = s, r = c(s, "activeThumbnail"), a = l({
+  emits: /* @__PURE__ */ i(["dragStart", "dragEnd", "update:thumbnails"], ["update:activeThumbnail"]),
+  setup(o, { emit: p }) {
+    const n = p, t = o, r = h(o, "activeThumbnail"), a = l({
       get() {
         return t.thumbnails;
       },
       set(e) {
         n("update:thumbnails", e);
       }
-    }), u = g(null), { isDragging: i } = k({
+    }), u = g(null), { isDragging: m } = k({
       ref: u,
       list: a,
       isEnabled: t.draggable,
@@ -36,38 +36,40 @@ const M = /* @__PURE__ */ h({
       sortInPlace: !1,
       onDragStart: (e) => n("dragStart", e),
       onDragEnd: (e) => {
-        r.value = e.newIndex, S({ list: a, from: e.oldIndex, to: e.newIndex }), n("dragEnd", e);
+        r.value = e.newIndex, M({ list: a, from: e.oldIndex, to: e.newIndex }), n("dragEnd", e);
       }
-    }), b = l(() => {
+    }), c = l(() => {
       if (!t.showEmpty) return 0;
       const { max: e } = t.emptyOptions || {};
       return a.value.length < e ? e - a.value.length : 0;
     });
     return v(
-      C.key,
+      w.key,
       Object.freeze({
         draggable: l(() => t.draggable),
         removable: l(() => t.removable),
         thumbnails: a,
         radius: t.radius,
         activeThumbnail: r,
-        isDragging: i
+        isDragging: m
       })
-    ), (e, O) => (o(), d("ul", {
+    ), (e, P) => (s(), d("ul", {
       ref_key: "thumbnailRef",
       ref: u,
       class: "stash-thumbnail-group flex flex-wrap gap-3",
       "data-test": "stash-thumbnail-group"
     }, [
-      T(e.$slots, "default", y(_({ activeThumbnail: r.value, isDragging: E(i) })), void 0, !0),
-      (o(!0), d(x, null, I(b.value, (N, f) => (o(), B(w, {
-        key: `empty_thumb_${f}`
+      y(e.$slots, "default", T(_({ activeThumbnail: r.value, isDragging: E(m) }))),
+      (s(!0), d(x, null, B(c.value, (R, b) => (s(), I(S, {
+        key: `empty_thumb_${b}`
       }))), 128))
     ], 512));
   }
-}), $ = /* @__PURE__ */ D(M, [["__scopeId", "data-v-2507f5b5"]]);
+}), O = {}, N = {
+  $style: O
+}, A = /* @__PURE__ */ C(D, [["__cssModules", N]]);
 export {
-  $ as default,
-  S as moveSortableElements
+  A as default,
+  M as moveSortableElements
 };
 //# sourceMappingURL=ThumbnailGroup.js.map

package/dist/ThumbnailGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThumbnailGroup.js","sources":["../src/components/ThumbnailGroup/ThumbnailGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n  import type { ThumbnailEmptyOptions, ThumbnailRadius } from './ThumbnailGroup.types';\n\n  export * from '../../composables/useSortable/useSortable';\n  export * from './ThumbnailGroup.types';\n</script>\n\n<script setup lang=\"ts\" generic=\"Thumbnail extends ThumbnailDefinition\">\n  import { computed, provide, ref } from 'vue';\n\n  import useSortable, {\n    moveSortableElements,\n    type SortableOnDragEndEvent,\n    type SortableOnDragStartEvent,\n  } from '../../composables/useSortable/useSortable';\n  import { ThumbnailDefinition } from '../Thumbnail/Thumbnail.types';\n  import ThumbnailEmpty from '../ThumbnailEmpty/ThumbnailEmpty.vue';\n  import { THUMBNAIL_INJECTION } from './ThumbnailGroup.keys';\n\n  const emit = defineEmits<{\n    /**\n     * Emits when a thumbnail starts dragging\n     */\n    dragStart: [event: SortableOnDragStartEvent];\n\n    /**\n     * Emits when a thumbnail stops dragging\n     */\n    dragEnd: [event: SortableOnDragEndEvent];\n\n    /**\n     * Emits when the thumbnails are updated\n     */\n    'update:thumbnails': [thumbnails: Thumbnail[]];\n  }>();\n\n  const props = withDefaults(\n    defineProps<{\n      /**\n       * Enable drag and drop functionality\n       * @default false\n       */\n      draggable?: boolean;\n\n      /**\n       * Thumbnail radius. Can be 'rounded' or 'circle'\n       * @default 'rounded'\n       */\n      radius?: ThumbnailRadius;\n\n      /**\n       * Shows a close button on the thumbnail when set to true\n       * @default false\n       */\n      removable?: boolean;\n\n      /**\n       * Shows empty thumbnails when set to true\n       */\n      showEmpty?: boolean;\n\n      /**\n       * Empty thumbnail options. Only applicable when `showEmpty` is true\n       * @default { max: 6 }\n       */\n      emptyOptions?: ThumbnailEmptyOptions;\n\n      /**\n       * List of thumbnails to display\n       * @default []\n       */\n      thumbnails?: Thumbnail[];\n    }>(),\n    {\n      thumbnails: () => [],\n      draggable: false,\n      radius: 'rounded',\n      variant: 'opaque',\n      removable: false,\n      showEmpty: false,\n      emptyOptions: () => ({ max: 6 }),\n    },\n  );\n\n  /**\n   * The active thumbnail index\n   */\n  const activeThumbnail = defineModel<number>('activeThumbnail', {\n    default: -1,\n  });\n\n  const internalThumbnails = computed({\n    get() {\n      return props.thumbnails;\n    },\n    set(value) {\n      emit('update:thumbnails', value);\n    },\n  });\n\n  const thumbnailRef = ref<HTMLElement | null>(null);\n  const { isDragging } = useSortable({\n    ref: thumbnailRef,\n    list: internalThumbnails,\n    isEnabled: props.draggable,\n    ghostClass: 'thumbnail-ghost',\n    chosenClass: 'thumbnail-chosen',\n    sortInPlace: false,\n    onDragStart: (e) => emit('dragStart', e),\n    onDragEnd: (e) => {\n      activeThumbnail.value = e.newIndex;\n      moveSortableElements({ list: internalThumbnails, from: e.oldIndex, to: e.newIndex });\n      emit('dragEnd', e);\n    },\n  });\n\n  const emptyThumbnailsCount = computed(() => {\n    if (!props.showEmpty) return 0;\n\n    const { max } = props.emptyOptions || {};\n\n    return internalThumbnails.value.length < max ? max - internalThumbnails.value.length : 0;\n  });\n\n  provide(\n    THUMBNAIL_INJECTION.key,\n    Object.freeze({\n      draggable: computed(() => props.draggable),\n      removable: computed(() => props.removable),\n      thumbnails: internalThumbnails,\n      radius: props.radius,\n      activeThumbnail,\n      isDragging,\n    }),\n  );\n</script>\n\n<template>\n  <ul ref=\"thumbnailRef\" class=\"stash-thumbnail-group flex flex-wrap gap-3\" data-test=\"stash-thumbnail-group\">\n    <slot v-bind=\"{ activeThumbnail, isDragging }\"></slot>\n\n    <ThumbnailEmpty v-for=\"(_, index) in emptyThumbnailsCount\" :key=\"`empty_thumb_${index}`\" />\n  </ul>\n</template>\n\n<style>\n  @layer utilities {\n    .thumbnail-ghost {\n      .stash-thumbnail-item__img {\n        border: 1px solid var(--color-blue-500);\n        mask-image: none !important;\n        box-shadow: var(--shadow-sm);\n      }\n\n      .stash-thumbnail-item__remove {\n        opacity: 0;\n      }\n    }\n  }\n</style>\n\n<style scoped>\n  @layer utilities {\n    :deep(.thumbnail-chosen) {\n      opacity: 0 !important;\n    }\n  }\n</style>\n"],"names":["emit","__emit","props","__props","activeThumbnail","_useModel","internalThumbnails","computed","value","thumbnailRef","ref","isDragging","useSortable","moveSortableElements","emptyThumbnailsCount","max","provide","THUMBNAIL_INJECTION","_createElementBlock","_renderSlot","_ctx","_normalizeProps","_guardReactiveProps","_unref","_openBlock","_Fragment","_renderList","_","index","_createBlock","ThumbnailEmpty"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAmBE,UAAMA,IAAOC,GAiBPC,IAAQC,GAmDRC,IAAkBC,EAAmBF,GAAC,iBAE3C,GAEKG,IAAqBC,EAAS;AAAA,MAClC,MAAM;AACJ,eAAOL,EAAM;AAAA,MACf;AAAA,MACA,IAAIM,GAAO;AACT,QAAAR,EAAK,qBAAqBQ,CAAK;AAAA,MACjC;AAAA,IAAA,CACD,GAEKC,IAAeC,EAAwB,IAAI,GAC3C,EAAE,YAAAC,EAAA,IAAeC,EAAY;AAAA,MACjC,KAAKH;AAAA,MACL,MAAMH;AAAA,MACN,WAAWJ,EAAM;AAAA,MACjB,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa,CAAC,MAAMF,EAAK,aAAa,CAAC;AAAA,MACvC,WAAW,CAAC,MAAM;AAChB,QAAAI,EAAgB,QAAQ,EAAE,UAC1BS,EAAqB,EAAE,MAAMP,GAAoB,MAAM,EAAE,UAAU,IAAI,EAAE,UAAU,GACnFN,EAAK,WAAW,CAAC;AAAA,MACnB;AAAA,IAAA,CACD,GAEKc,IAAuBP,EAAS,MAAM;AAC1C,UAAI,CAACL,EAAM,UAAW,QAAO;AAE7B,YAAM,EAAE,KAAAa,EAAA,IAAQb,EAAM,gBAAgB,CAAA;AAEtC,aAAOI,EAAmB,MAAM,SAASS,IAAMA,IAAMT,EAAmB,MAAM,SAAS;AAAA,IACzF,CAAC;AAED,WAAAU;AAAA,MACEC,EAAoB;AAAA,MACpB,OAAO,OAAO;AAAA,QACZ,WAAWV,EAAS,MAAML,EAAM,SAAS;AAAA,QACzC,WAAWK,EAAS,MAAML,EAAM,SAAS;AAAA,QACzC,YAAYI;AAAA,QACZ,QAAQJ,EAAM;AAAA,QACd,iBAAAE;AAAA,QACA,YAAAO;AAAA,MAAA,CACD;AAAA,IAAA,mBAKHO,EAIK,MAAA;AAAA,eAJG;AAAA,MAAJ,KAAIT;AAAA,MAAe,OAAM;AAAA,MAA6C,aAAU;AAAA,IAAA;MAClFU,EAAsDC,EAAA,QAAA,WAAAC,EAAAC,EAAA,EAAA,iBAAtClB,EAAA,OAAe,YAAEmB,EAAAZ,CAAA,EAAA,CAAU,CAAA,GAAA,QAAA,EAAA;AAAA,OAE3Ca,EAAA,EAAA,GAAAN,EAA2FO,GAAA,MAAAC,EAAtDZ,EAAA,OAAoB,CAAjCa,GAAGC,YAA3BC,EAA2FC,GAAA;AAAA,QAA/B,oBAAoBF,CAAK;AAAA,MAAA;;;;"}
+{"version":3,"file":"ThumbnailGroup.js","sources":["../src/components/ThumbnailGroup/ThumbnailGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n  import type { ThumbnailEmptyOptions, ThumbnailRadius } from './ThumbnailGroup.types';\n\n  export * from '../../composables/useSortable/useSortable';\n  export * from './ThumbnailGroup.types';\n</script>\n\n<script setup lang=\"ts\" generic=\"Thumbnail extends ThumbnailDefinition\">\n  import { computed, provide, ref } from 'vue';\n\n  import useSortable, {\n    moveSortableElements,\n    type SortableOnDragEndEvent,\n    type SortableOnDragStartEvent,\n  } from '../../composables/useSortable/useSortable';\n  import { ThumbnailDefinition } from '../Thumbnail/Thumbnail.types';\n  import ThumbnailEmpty from '../ThumbnailEmpty/ThumbnailEmpty.vue';\n  import { THUMBNAIL_INJECTION } from './ThumbnailGroup.keys';\n\n  const emit = defineEmits<{\n    /**\n     * Emits when a thumbnail starts dragging\n     */\n    dragStart: [event: SortableOnDragStartEvent];\n\n    /**\n     * Emits when a thumbnail stops dragging\n     */\n    dragEnd: [event: SortableOnDragEndEvent];\n\n    /**\n     * Emits when the thumbnails are updated\n     */\n    'update:thumbnails': [thumbnails: Thumbnail[]];\n  }>();\n\n  const props = withDefaults(\n    defineProps<{\n      /**\n       * Enable drag and drop functionality\n       * @default false\n       */\n      draggable?: boolean;\n\n      /**\n       * Thumbnail radius. Can be 'rounded' or 'circle'\n       * @default 'rounded'\n       */\n      radius?: ThumbnailRadius;\n\n      /**\n       * Shows a close button on the thumbnail when set to true\n       * @default false\n       */\n      removable?: boolean;\n\n      /**\n       * Shows empty thumbnails when set to true\n       */\n      showEmpty?: boolean;\n\n      /**\n       * Empty thumbnail options. Only applicable when `showEmpty` is true\n       * @default { max: 6 }\n       */\n      emptyOptions?: ThumbnailEmptyOptions;\n\n      /**\n       * List of thumbnails to display\n       * @default []\n       */\n      thumbnails?: Thumbnail[];\n    }>(),\n    {\n      thumbnails: () => [],\n      draggable: false,\n      radius: 'rounded',\n      variant: 'opaque',\n      removable: false,\n      showEmpty: false,\n      emptyOptions: () => ({ max: 6 }),\n    },\n  );\n\n  /**\n   * The active thumbnail index\n   */\n  const activeThumbnail = defineModel<number>('activeThumbnail', {\n    default: -1,\n  });\n\n  const internalThumbnails = computed({\n    get() {\n      return props.thumbnails;\n    },\n    set(value) {\n      emit('update:thumbnails', value);\n    },\n  });\n\n  const thumbnailRef = ref<HTMLElement | null>(null);\n  const { isDragging } = useSortable({\n    ref: thumbnailRef,\n    list: internalThumbnails,\n    isEnabled: props.draggable,\n    ghostClass: 'thumbnail-ghost',\n    chosenClass: 'thumbnail-chosen',\n    sortInPlace: false,\n    onDragStart: (e) => emit('dragStart', e),\n    onDragEnd: (e) => {\n      activeThumbnail.value = e.newIndex;\n      moveSortableElements({ list: internalThumbnails, from: e.oldIndex, to: e.newIndex });\n      emit('dragEnd', e);\n    },\n  });\n\n  const emptyThumbnailsCount = computed(() => {\n    if (!props.showEmpty) return 0;\n\n    const { max } = props.emptyOptions || {};\n\n    return internalThumbnails.value.length < max ? max - internalThumbnails.value.length : 0;\n  });\n\n  provide(\n    THUMBNAIL_INJECTION.key,\n    Object.freeze({\n      draggable: computed(() => props.draggable),\n      removable: computed(() => props.removable),\n      thumbnails: internalThumbnails,\n      radius: props.radius,\n      activeThumbnail,\n      isDragging,\n    }),\n  );\n</script>\n\n<template>\n  <ul ref=\"thumbnailRef\" class=\"stash-thumbnail-group flex flex-wrap gap-3\" data-test=\"stash-thumbnail-group\">\n    <slot v-bind=\"{ activeThumbnail, isDragging }\"></slot>\n\n    <ThumbnailEmpty v-for=\"(_, index) in emptyThumbnailsCount\" :key=\"`empty_thumb_${index}`\" />\n  </ul>\n</template>\n\n<style>\n  @layer utilities {\n    /* Ghost is cloned to document.body (see createGhostElement); must not require .stash-thumbnail-group ancestor */\n    .thumbnail-ghost {\n      .stash-thumbnail-item__img {\n        border: 1px solid var(--color-blue-500);\n        mask-image: none !important;\n        box-shadow: var(--shadow-sm);\n      }\n\n      .stash-thumbnail-item__remove {\n        opacity: 0;\n      }\n    }\n  }\n</style>\n\n<style module>\n  @layer utilities {\n    :global(:where(.stash-thumbnail-group) .thumbnail-chosen) {\n      opacity: 0 !important;\n    }\n  }\n</style>\n"],"names":["emit","__emit","props","__props","activeThumbnail","_useModel","internalThumbnails","computed","value","thumbnailRef","ref","isDragging","useSortable","moveSortableElements","emptyThumbnailsCount","max","provide","THUMBNAIL_INJECTION","_createElementBlock","_renderSlot","_ctx","_normalizeProps","_guardReactiveProps","_unref","_openBlock","_Fragment","_renderList","_","index","_createBlock","ThumbnailEmpty"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAmBE,UAAMA,IAAOC,GAiBPC,IAAQC,GAmDRC,IAAkBC,EAAmBF,GAAC,iBAE3C,GAEKG,IAAqBC,EAAS;AAAA,MAClC,MAAM;AACJ,eAAOL,EAAM;AAAA,MACf;AAAA,MACA,IAAIM,GAAO;AACT,QAAAR,EAAK,qBAAqBQ,CAAK;AAAA,MACjC;AAAA,IAAA,CACD,GAEKC,IAAeC,EAAwB,IAAI,GAC3C,EAAE,YAAAC,EAAA,IAAeC,EAAY;AAAA,MACjC,KAAKH;AAAA,MACL,MAAMH;AAAA,MACN,WAAWJ,EAAM;AAAA,MACjB,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa,CAAC,MAAMF,EAAK,aAAa,CAAC;AAAA,MACvC,WAAW,CAAC,MAAM;AAChB,QAAAI,EAAgB,QAAQ,EAAE,UAC1BS,EAAqB,EAAE,MAAMP,GAAoB,MAAM,EAAE,UAAU,IAAI,EAAE,UAAU,GACnFN,EAAK,WAAW,CAAC;AAAA,MACnB;AAAA,IAAA,CACD,GAEKc,IAAuBP,EAAS,MAAM;AAC1C,UAAI,CAACL,EAAM,UAAW,QAAO;AAE7B,YAAM,EAAE,KAAAa,EAAA,IAAQb,EAAM,gBAAgB,CAAA;AAEtC,aAAOI,EAAmB,MAAM,SAASS,IAAMA,IAAMT,EAAmB,MAAM,SAAS;AAAA,IACzF,CAAC;AAED,WAAAU;AAAA,MACEC,EAAoB;AAAA,MACpB,OAAO,OAAO;AAAA,QACZ,WAAWV,EAAS,MAAML,EAAM,SAAS;AAAA,QACzC,WAAWK,EAAS,MAAML,EAAM,SAAS;AAAA,QACzC,YAAYI;AAAA,QACZ,QAAQJ,EAAM;AAAA,QACd,iBAAAE;AAAA,QACA,YAAAO;AAAA,MAAA,CACD;AAAA,IAAA,mBAKHO,EAIK,MAAA;AAAA,eAJG;AAAA,MAAJ,KAAIT;AAAA,MAAe,OAAM;AAAA,MAA6C,aAAU;AAAA,IAAA;MAClFU,EAAsDC,EAAA,QAAA,WAAAC,EAAAC,EAAA,EAAA,iBAAtClB,EAAA,OAAe,YAAEmB,EAAAZ,CAAA,EAAA,CAAU,CAAA,CAAA;AAAA,OAE3Ca,EAAA,EAAA,GAAAN,EAA2FO,GAAA,MAAAC,EAAtDZ,EAAA,OAAoB,CAAjCa,GAAGC,YAA3BC,EAA2FC,GAAA;AAAA,QAA/B,oBAAoBF,CAAK;AAAA,MAAA;;;;;;"}

package/dist/Timeline.js

@@ -1,26 +1,28 @@
-import { defineComponent as o, provide as a, computed as t, createElementBlock as n, openBlock as r, normalizeClass as d, renderSlot as l } from "vue";
+import { defineComponent as o, provide as n, computed as s, createElementBlock as l, openBlock as a, normalizeClass as r, renderSlot as d } from "vue";
 import { T as m } from "./keys-BEdEsanp.js";
-import { _ as p } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const c = /* @__PURE__ */ o({
+import { _ as c } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const p = /* @__PURE__ */ o({
   __name: "Timeline",
   props: {
     side: { default: "end" },
     density: { default: "comfortable" }
   },
-  setup(s) {
-    const e = s;
-    return a(m.key, {
-      side: t(() => e.side),
-      density: t(() => e.density)
-    }), (i, f) => (r(), n("ol", {
-      class: d(["stash-timeline grid grid-flow-dense items-start justify-center gap-x-3 gap-y-1.5", [`stash-timeline--${e.side}`, `stash-timeline--${e.density}`]]),
+  setup(t) {
+    const e = t;
+    return n(m.key, {
+      side: s(() => e.side),
+      density: s(() => e.density)
+    }), (i, _) => (a(), l("ol", {
+      class: r(["stash-timeline grid grid-flow-dense items-start justify-center gap-x-3 gap-y-1.5", [`stash-timeline--${e.side}`, `stash-timeline--${e.density}`]]),
       "data-test": "stash-timeline"
     }, [
-      l(i.$slots, "default", {}, void 0, !0)
+      d(i.$slots, "default")
     ], 2));
   }
-}), h = /* @__PURE__ */ p(c, [["__scopeId", "data-v-a5c666f3"]]);
+}), f = {}, u = {
+  $style: f
+}, g = /* @__PURE__ */ c(p, [["__cssModules", u]]);
 export {
-  h as default
+  g as default
 };
 //# sourceMappingURL=Timeline.js.map

package/dist/Timeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.js","sources":["../src/components/Timeline/Timeline.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, provide } from 'vue';\n\n  import { SpacingDensities } from '../../../types/misc';\n  import { TIMELINE_INJECTION } from './keys';\n\n  export interface TimelineProps {\n    /**\n     * Sets which side of the timeline the main and opposed content is going to be displayed.\n     */\n    side?: 'start' | 'end';\n\n    /**\n     * Sets the size of each timeline item.\n     */\n    density?: SpacingDensities;\n  }\n\n  const props = withDefaults(defineProps<TimelineProps>(), {\n    side: 'end',\n    density: 'comfortable',\n  });\n\n  provide(TIMELINE_INJECTION.key, {\n    side: computed(() => props.side),\n    density: computed(() => props.density),\n  });\n</script>\n\n<template>\n  <ol\n    class=\"stash-timeline grid grid-flow-dense items-start justify-center gap-x-3 gap-y-1.5\"\n    :class=\"[`stash-timeline--${props.side}`, `stash-timeline--${props.density}`]\"\n    data-test=\"stash-timeline\"\n  >\n    <slot></slot>\n  </ol>\n</template>\n\n<style scoped>\n  @layer utilities {\n    .stash-timeline {\n      grid-template-columns: auto min-content auto;\n    }\n  }\n</style>\n"],"names":["props","__props","provide","TIMELINE_INJECTION","computed","_createElementBlock","_normalizeClass","_renderSlot","_ctx"],"mappings":";;;;;;;;;;AAkBE,UAAMA,IAAQC;AAKd,WAAAC,EAAQC,EAAmB,KAAK;AAAA,MAC9B,MAAMC,EAAS,MAAMJ,EAAM,IAAI;AAAA,MAC/B,SAASI,EAAS,MAAMJ,EAAM,OAAO;AAAA,IAAA,CACtC,mBAIDK,EAMK,MAAA;AAAA,MALH,OAAKC,EAAA,CAAC,oFAAkF,CAAA,mBAC5DN,EAAM,IAAI,IAAA,mBAAuBA,EAAM,OAAO,EAAA,CAAA,CAAA;AAAA,MAC1E,aAAU;AAAA,IAAA;MAEVO,EAAaC,EAAA,QAAA,WAAA,CAAA,GAAA,QAAA,EAAA;AAAA,IAAA;;;"}
+{"version":3,"file":"Timeline.js","sources":["../src/components/Timeline/Timeline.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, provide } from 'vue';\n\n  import { SpacingDensities } from '../../../types/misc';\n  import { TIMELINE_INJECTION } from './keys';\n\n  export interface TimelineProps {\n    /**\n     * Sets which side of the timeline the main and opposed content is going to be displayed.\n     */\n    side?: 'start' | 'end';\n\n    /**\n     * Sets the size of each timeline item.\n     */\n    density?: SpacingDensities;\n  }\n\n  const props = withDefaults(defineProps<TimelineProps>(), {\n    side: 'end',\n    density: 'comfortable',\n  });\n\n  provide(TIMELINE_INJECTION.key, {\n    side: computed(() => props.side),\n    density: computed(() => props.density),\n  });\n</script>\n\n<template>\n  <ol\n    class=\"stash-timeline grid grid-flow-dense items-start justify-center gap-x-3 gap-y-1.5\"\n    :class=\"[`stash-timeline--${props.side}`, `stash-timeline--${props.density}`]\"\n    data-test=\"stash-timeline\"\n  >\n    <slot></slot>\n  </ol>\n</template>\n\n<style module>\n  @layer utilities {\n    :global(:where(.stash-timeline)) {\n      grid-template-columns: auto min-content auto;\n    }\n  }\n</style>\n"],"names":["props","__props","provide","TIMELINE_INJECTION","computed","_createElementBlock","_normalizeClass","_renderSlot","_ctx"],"mappings":";;;;;;;;;;AAkBE,UAAMA,IAAQC;AAKd,WAAAC,EAAQC,EAAmB,KAAK;AAAA,MAC9B,MAAMC,EAAS,MAAMJ,EAAM,IAAI;AAAA,MAC/B,SAASI,EAAS,MAAMJ,EAAM,OAAO;AAAA,IAAA,CACtC,mBAIDK,EAMK,MAAA;AAAA,MALH,OAAKC,EAAA,CAAC,oFAAkF,CAAA,mBAC5DN,EAAM,IAAI,IAAA,mBAAuBA,EAAM,OAAO,EAAA,CAAA,CAAA;AAAA,MAC1E,aAAU;AAAA,IAAA;MAEVO,EAAaC,EAAA,QAAA,SAAA;AAAA,IAAA;;;;;"}

package/dist/Toast.vue.d.ts

@@ -34,8 +34,8 @@ status: string;
 offsetTop: undefined;
 status: string;
 }>>> & Readonly<{}>, {
-offsetTop: string;
 status: "error" | "warning" | "info" | "success";
+offsetTop: string;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 export default _default;
 

package/dist/Tooltip.js

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

package/dist/{Tooltip.vue_vue_type_script_setup_true_lang-CFpM7Ldj.js → Tooltip.vue_vue_type_script_setup_true_lang-UUjw5O1x.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-DA70nQCT.js";
+import { u as P } from "./index-t9tXBnql.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-CFpM7Ldj.js.map
+//# sourceMappingURL=Tooltip.vue_vue_type_script_setup_true_lang-UUjw5O1x.js.map

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

@@ -1 +1 @@
-{"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;;;;;;"}
+{"version":3,"file":"Tooltip.vue_vue_type_script_setup_true_lang-UUjw5O1x.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;;;;;;"}