@leaflink/stash 50.12.0 → 50.12.2

package/dist/Textarea.js

@@ -1,5 +1,5 @@
-import { defineComponent as E, useAttrs as M, useSlots as k, useCssModule as H, ref as x, computed as w, watch as A, onMounted as I, nextTick as P, onBeforeUnmount as V, openBlock as $, createBlock as q, mergeProps as y, unref as p, createSlots as D, withCtx as b, createElementVNode as j, renderSlot as F } from "vue";
-import { _ as L } from "./Field.vue_vue_type_script_setup_true_lang-DEizIcDo.js";
+import { defineComponent as E, useAttrs as M, useSlots as k, useCssModule as H, ref as x, computed as w, watch as A, onMounted as I, nextTick as P, onBeforeUnmount as V, createBlock as $, openBlock as q, mergeProps as y, unref as p, createSlots as D, withCtx as b, createElementVNode as j, renderSlot as F } from "vue";
+import { _ as L } from "./Field.vue_vue_type_script_setup_true_lang-DRaKs9Lm.js";
 import { _ as N } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const U = ["id", "maxlength", "value", "placeholder", "disabled", "readonly", "rows"], W = /* @__PURE__ */ E({
   name: "ll-textarea",
@@ -83,7 +83,7 @@ const U = ["id", "maxlength", "value", "placeholder", "disabled", "readonly", "r
     }), V(() => {
       var e;
       (e = r.value) == null || e.disconnect();
-    }), (e, o) => ($(), q(L, y(t, {
+    }), (e, o) => (q(), $(L, y(t, {
       class: ["stash-textarea", [p(m).root]],
       "data-test": "stash-textarea"
     }), D({

package/dist/Thumbnail.js

@@ -1,9 +1,9 @@
-import { defineComponent as w, useCssModule as q, inject as C, computed as T, toValue as x, openBlock as b, createElementBlock as B, normalizeClass as s, unref as t, createVNode as h, createBlock as I, withModifiers as y, withCtx as M, createCommentVNode as N, renderSlot as $ } from "vue";
+import { defineComponent as w, useCssModule as q, inject as C, computed as T, toValue as x, createElementBlock as B, openBlock as b, unref as t, normalizeClass as s, createVNode as h, createBlock as I, createCommentVNode as y, renderSlot as M, withModifiers as N, withCtx as $ } from "vue";
 import { t as V } from "./locale.js";
 import z from "./Button.js";
 import E from "./Icon.js";
-import { _ as U } from "./Image.vue_vue_type_script_setup_true_lang-YUNunj71.js";
-import { T as d } from "./ThumbnailGroup.keys-D6WL5xQ5.js";
+import { _ as U } from "./Image.vue_vue_type_script_setup_true_lang-D5u4av0_.js";
+import { T as d } from "./ThumbnailGroup.keys-EJ4qFNhx.js";
 import { _ as j } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const A = ["aria-current", "draggable"], D = /* @__PURE__ */ w({
   __name: "Thumbnail",
@@ -61,17 +61,17 @@ const A = ["aria-current", "draggable"], D = /* @__PURE__ */ w({
         "aria-label": t(V)("ll.thumbnail.removeButton", { index: e.value + 1 }),
         type: "button",
         icon: "",
-        onClick: y(k, ["stop", "prevent"])
+        onClick: N(k, ["stop", "prevent"])
       }, {
-        default: M(() => [
+        default: $(() => [
           h(E, {
             name: "close",
             size: "small"
           })
         ]),
         _: 1
-      }, 8, ["class", "aria-label"])) : N("", !0),
-      $(l.$slots, "hint")
+      }, 8, ["class", "aria-label"])) : y("", !0),
+      M(l.$slots, "hint")
     ], 10, A));
   }
 }), H = {

package/dist/Thumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"Thumbnail.js","sources":["../src/components/Thumbnail/Thumbnail.vue"],"sourcesContent":["<script lang=\"ts\">\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  import { ThumbnailDefinition, ThumbnailVariant } from './Thumbnail.types';\n\n  interface ThumbnailProps {\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  const props = withDefaults(defineProps<ThumbnailProps>(), {\n    variant: 'opaque',\n    altText: '',\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 tw-group tw-relative tw-cursor-pointer focus-visible:tw-outline-none\"\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 tw-border-ice-200 tw-outline-blue-500/15 tw-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:tw-border-blue-500 group-focus-visible:tw-border-blue-500 group-focus-visible:tw-outline':\n            !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  .thumbnail-remove {\n    position: absolute;\n    top: calc(theme('spacing[1.5]') * -1);\n    right: calc(theme('spacing[1.5]') * -1);\n    padding: 1px;\n    height: auto;\n    width: auto !important;\n    min-width: auto;\n    border-radius: theme('borderRadius.full');\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: theme('spacing.12');\n    width: theme('spacing.12');\n    border-width: 1px;\n    outline-width: theme('borderSpacing.1');\n\n    .thumbnail-translucent & {\n      opacity: theme('opacity.40');\n\n      &:hover,\n      &.thumbnail-active {\n        opacity: theme('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: theme('borderRadius.full');\n  }\n\n  .thumbnail-rounded {\n    border-radius: theme('borderRadius.DEFAULT');\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"],"mappings":";;;;;;;;;;;;;;;;AAiCE,UAAMA,IAAQC,GAKRC,IAAOC,GAYPC,IAAUC,EAAa,GAEvB,EAAE,YAAAC,GAAY,iBAAAC,GAAiB,WAAAC,GAAW,YAAAC,GAAY,QAAAC,GAAQ,WAAAC,MAAcC;AAAA,MAChFC,EAAoB;AAAA,MACpBA,EAAoB;AAAA,IACtB,GAEMC,IAAiBC,EAAS,MAAMC,EAAQV,CAAU,EAAE,UAAU,CAACW,MAAMA,MAAMjB,EAAM,SAAS,CAAC;AAEjG,aAASkB,IAAuB;AAC9B,MAAAX,EAAgB,QAAQO,EAAe,OAClCZ,EAAA,SAASY,EAAe,KAAK;AAAA,IAAA;AAGpC,aAASK,IAAe;AACjB,MAAAjB,EAAA,UAAUY,EAAe,KAAK,GACnCP,EAAgB,QAAQ;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  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 tw-group tw-relative tw-cursor-pointer focus-visible:tw-outline-none\"\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 tw-border-ice-200 tw-outline-blue-500/15 tw-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:tw-border-blue-500 group-focus-visible:tw-border-blue-500 group-focus-visible:tw-outline':\n            !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  .thumbnail-remove {\n    position: absolute;\n    top: calc(theme('spacing[1.5]') * -1);\n    right: calc(theme('spacing[1.5]') * -1);\n    padding: 1px;\n    height: auto;\n    width: auto !important;\n    min-width: auto;\n    border-radius: theme('borderRadius.full');\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: theme('spacing.12');\n    width: theme('spacing.12');\n    border-width: 1px;\n    outline-width: theme('borderSpacing.1');\n\n    .thumbnail-translucent & {\n      opacity: theme('opacity.40');\n\n      &:hover,\n      &.thumbnail-active {\n        opacity: theme('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: theme('borderRadius.full');\n  }\n\n  .thumbnail-rounded {\n    border-radius: theme('borderRadius.DEFAULT');\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"],"mappings":";;;;;;;;;;;;;;;;AAeE,UAAMA,IAAQC,GAyBRC,IAAOC,GAYPC,IAAUC,EAAa,GAEvB,EAAE,YAAAC,GAAY,iBAAAC,GAAiB,WAAAC,GAAW,YAAAC,GAAY,QAAAC,GAAQ,WAAAC,MAAcC;AAAA,MAChFC,EAAoB;AAAA,MACpBA,EAAoB;AAAA,IACtB,GAEMC,IAAiBC,EAAS,MAAMC,EAAQV,CAAU,EAAE,UAAU,CAACW,MAAMA,MAAMjB,EAAM,SAAS,CAAC;AAEjG,aAASkB,IAAuB;AAC9B,MAAAX,EAAgB,QAAQO,EAAe,OAClCZ,EAAA,SAASY,EAAe,KAAK;AAAA,IAAA;AAGpC,aAASK,IAAe;AACjB,MAAAjB,EAAA,UAAUY,EAAe,KAAK,GACnCP,EAAgB,QAAQ;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ThumbnailEmpty.js

@@ -1,12 +1,12 @@
-import { defineComponent as n, useCssModule as o, inject as m, openBlock as l, createElementBlock as c, normalizeClass as r, unref as t, createVNode as u } from "vue";
+import { defineComponent as n, useCssModule as o, inject as m, createElementBlock as l, openBlock as c, normalizeClass as r, unref as t, createVNode as u } from "vue";
 import i from "./Icon.js";
-import { T as s } from "./ThumbnailGroup.keys-D6WL5xQ5.js";
+import { T as s } from "./ThumbnailGroup.keys-EJ4qFNhx.js";
 import { _ as p } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const _ = /* @__PURE__ */ n({
   __name: "ThumbnailEmpty",
   setup(f) {
     const a = o(), { radius: e } = m(s.key, s.defaults);
-    return (y, b) => (l(), c("li", {
+    return (y, b) => (c(), l("li", {
       class: r(["stash-thumbnail-empty", [
         t(a)["thumbnail-empty"],
         {

package/dist/ThumbnailGroup.js

@@ -1,7 +1,7 @@
-import { defineComponent as h, mergeModels as m, useModel as c, computed as l, ref as g, provide as v, openBlock as o, createElementBlock as d, renderSlot as T, normalizeProps as y, guardReactiveProps as _, unref as E, Fragment as x, renderList as w, createBlock as I } from "vue";
+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 w, createBlock as I } from "vue";
 import B, { moveSortableElements as k } from "./useSortable.js";
 import S from "./ThumbnailEmpty.js";
-import { T as C } from "./ThumbnailGroup.keys-D6WL5xQ5.js";
+import { T as C } from "./ThumbnailGroup.keys-EJ4qFNhx.js";
 import { _ as D } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const M = /* @__PURE__ */ h({
   __name: "ThumbnailGroup",
@@ -38,7 +38,7 @@ const M = /* @__PURE__ */ h({
       onDragEnd: (e) => {
         r.value = e.newIndex, k({ list: a, from: e.oldIndex, to: e.newIndex }), n("dragEnd", e);
       }
-    }), f = l(() => {
+    }), b = l(() => {
       if (!t.showEmpty) return 0;
       const { max: e } = t.emptyOptions || {};
       return a.value.length < e ? e - a.value.length : 0;
@@ -60,12 +60,12 @@ const M = /* @__PURE__ */ h({
       "data-test": "stash-thumbnail-group"
     }, [
       T(e.$slots, "default", y(_({ activeThumbnail: r.value, isDragging: E(i) })), void 0, !0),
-      (o(!0), d(x, null, w(f.value, (N, b) => (o(), I(S, {
-        key: `empty_thumb_${b}`
+      (o(!0), d(x, null, w(b.value, (N, f) => (o(), I(S, {
+        key: `empty_thumb_${f}`
       }))), 128))
     ], 512));
   }
-}), $ = /* @__PURE__ */ D(M, [["__scopeId", "data-v-358f73aa"]]);
+}), $ = /* @__PURE__ */ D(M, [["__scopeId", "data-v-d7a887de"]]);
 export {
   $ as default,
   k as moveSortableElements

package/dist/ThumbnailGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThumbnailGroup.js","sources":["../src/components/ThumbnailGroup/ThumbnailGroup.vue"],"sourcesContent":["<script lang=\"ts\">\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  import type { ThumbnailEmptyOptions, ThumbnailRadius } from './ThumbnailGroup.types';\n\n  interface ThumbnailProps {\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  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(defineProps<ThumbnailProps>(), {\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   * 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 tw-flex tw-flex-wrap tw-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  .thumbnail-ghost {\n    .stash-thumbnail-item__img {\n      border: 1px solid var(-color-blue-500);\n      mask-image: none !important;\n      box-shadow: theme('boxShadow.DEFAULT');\n    }\n\n    .stash-thumbnail-item__remove {\n      opacity: 0;\n    }\n  }\n</style>\n\n<style scoped>\n  :deep(.thumbnail-chosen) {\n    opacity: 0 !important;\n  }\n</style>\n"],"names":["emit","__emit","props","__props","activeThumbnail","_useModel","internalThumbnails","computed","value","thumbnailRef","ref","isDragging","useSortable","moveSortableElements","emptyThumbnailsCount","max","provide","THUMBNAIL_INJECTION"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuDE,UAAMA,IAAOC,GAiBPC,IAAQC,GAaRC,IAAkBC,EAAoBF,GAAA,iBAE3C,GAEKG,IAAqBC,EAAS;AAAA,MAClC,MAAM;AACJ,eAAOL,EAAM;AAAA,MACf;AAAA,MACA,IAAIM,GAAO;AACT,QAAAR,EAAK,qBAAqBQ,CAAK;AAAA,MAAA;AAAA,IACjC,CACD,GAEKC,IAAeC,EAAwB,IAAI,GAC3C,EAAE,YAAAC,EAAW,IAAIC,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,UACLS,EAAA,EAAE,MAAMP,GAAoB,MAAM,EAAE,UAAU,IAAI,EAAE,UAAU,GACnFN,EAAK,WAAW,CAAC;AAAA,MAAA;AAAA,IACnB,CACD,GAEKc,IAAuBP,EAAS,MAAM;AACtC,UAAA,CAACL,EAAM,UAAkB,QAAA;AAE7B,YAAM,EAAE,KAAAa,EAAA,IAAQb,EAAM,gBAAgB,CAAC;AAEvC,aAAOI,EAAmB,MAAM,SAASS,IAAMA,IAAMT,EAAmB,MAAM,SAAS;AAAA,IAAA,CACxF;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,MACD,CAAA;AAAA,IACH;;;;;;;;;;;;;"}
+{"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 tw-flex tw-flex-wrap tw-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  .thumbnail-ghost {\n    .stash-thumbnail-item__img {\n      border: 1px solid var(-color-blue-500);\n      mask-image: none !important;\n      box-shadow: theme('boxShadow.DEFAULT');\n    }\n\n    .stash-thumbnail-item__remove {\n      opacity: 0;\n    }\n  }\n</style>\n\n<style scoped>\n  :deep(.thumbnail-chosen) {\n    opacity: 0 !important;\n  }\n</style>\n"],"names":["emit","__emit","props","__props","activeThumbnail","_useModel","internalThumbnails","computed","value","thumbnailRef","ref","isDragging","useSortable","moveSortableElements","emptyThumbnailsCount","max","provide","THUMBNAIL_INJECTION"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAmBE,UAAMA,IAAOC,GAiBPC,IAAQC,GAmDRC,IAAkBC,EAAoBF,GAAA,iBAE3C,GAEKG,IAAqBC,EAAS;AAAA,MAClC,MAAM;AACJ,eAAOL,EAAM;AAAA,MACf;AAAA,MACA,IAAIM,GAAO;AACT,QAAAR,EAAK,qBAAqBQ,CAAK;AAAA,MAAA;AAAA,IACjC,CACD,GAEKC,IAAeC,EAAwB,IAAI,GAC3C,EAAE,YAAAC,EAAW,IAAIC,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,UACLS,EAAA,EAAE,MAAMP,GAAoB,MAAM,EAAE,UAAU,IAAI,EAAE,UAAU,GACnFN,EAAK,WAAW,CAAC;AAAA,MAAA;AAAA,IACnB,CACD,GAEKc,IAAuBP,EAAS,MAAM;AACtC,UAAA,CAACL,EAAM,UAAkB,QAAA;AAE7B,YAAM,EAAE,KAAAa,EAAA,IAAQb,EAAM,gBAAgB,CAAC;AAEvC,aAAOI,EAAmB,MAAM,SAASS,IAAMA,IAAMT,EAAmB,MAAM,SAAS;AAAA,IAAA,CACxF;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,MACD,CAAA;AAAA,IACH;;;;;;;;;;;;;"}

package/dist/{ThumbnailGroup.keys-D6WL5xQ5.js → ThumbnailGroup.keys-EJ4qFNhx.js}

@@ -1,4 +1,4 @@
-import { computed as e, ref as a } from "vue";
+import { ref as a, computed as e } from "vue";
 const l = Object.freeze({
   key: Symbol("THUMBNAIL_INJECTION_KEY"),
   defaults: Object.freeze({
@@ -13,4 +13,4 @@ const l = Object.freeze({
 export {
   l as T
 };
-//# sourceMappingURL=ThumbnailGroup.keys-D6WL5xQ5.js.map
+//# sourceMappingURL=ThumbnailGroup.keys-EJ4qFNhx.js.map

package/dist/{ThumbnailGroup.keys-D6WL5xQ5.js.map → ThumbnailGroup.keys-EJ4qFNhx.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ThumbnailGroup.keys-D6WL5xQ5.js","sources":["../src/components/ThumbnailGroup/ThumbnailGroup.keys.ts"],"sourcesContent":["import { computed, ref } from 'vue';\n\nimport { InjectionWithDefaults } from '../../../types/utils';\nimport { ThumbnailDefinition } from '../Thumbnail/Thumbnail.types';\nimport { ThumbnailInjection, ThumbnailRadius } from './ThumbnailGroup.types';\n\n// See: https://vuejs.org/guide/typescript/composition-api.html#typing-provide-inject\nexport const THUMBNAIL_INJECTION: InjectionWithDefaults<ThumbnailInjection<ThumbnailDefinition>> = Object.freeze({\n  key: Symbol('THUMBNAIL_INJECTION_KEY'),\n  defaults: Object.freeze({\n    radius: 'rounded' as ThumbnailRadius,\n    draggable: computed(() => false),\n    removable: computed(() => false),\n    thumbnails: computed(() => [] as ThumbnailDefinition[]),\n    activeThumbnail: ref(undefined),\n    isDragging: ref(false),\n  }),\n});\n"],"names":["THUMBNAIL_INJECTION","computed","ref"],"mappings":";AAOa,MAAAA,IAAsF,OAAO,OAAO;AAAA,EAC/G,KAAK,OAAO,yBAAyB;AAAA,EACrC,UAAU,OAAO,OAAO;AAAA,IACtB,QAAQ;AAAA,IACR,WAAWC,EAAS,MAAM,EAAK;AAAA,IAC/B,WAAWA,EAAS,MAAM,EAAK;AAAA,IAC/B,YAAYA,EAAS,MAAM,EAA2B;AAAA,IACtD,iBAAiBC,EAAI,MAAS;AAAA,IAC9B,YAAYA,EAAI,EAAK;AAAA,EACtB,CAAA;AACH,CAAC;"}
+{"version":3,"file":"ThumbnailGroup.keys-EJ4qFNhx.js","sources":["../src/components/ThumbnailGroup/ThumbnailGroup.keys.ts"],"sourcesContent":["import { computed, ref } from 'vue';\n\nimport { InjectionWithDefaults } from '../../../types/utils';\nimport { ThumbnailDefinition } from '../Thumbnail/Thumbnail.types';\nimport { ThumbnailInjection, ThumbnailRadius } from './ThumbnailGroup.types';\n\n// See: https://vuejs.org/guide/typescript/composition-api.html#typing-provide-inject\nexport const THUMBNAIL_INJECTION: InjectionWithDefaults<ThumbnailInjection<ThumbnailDefinition>> = Object.freeze({\n  key: Symbol('THUMBNAIL_INJECTION_KEY'),\n  defaults: Object.freeze({\n    radius: 'rounded' as ThumbnailRadius,\n    draggable: computed(() => false),\n    removable: computed(() => false),\n    thumbnails: computed(() => [] as ThumbnailDefinition[]),\n    activeThumbnail: ref(undefined),\n    isDragging: ref(false),\n  }),\n});\n"],"names":["THUMBNAIL_INJECTION","computed","ref"],"mappings":";AAOa,MAAAA,IAAsF,OAAO,OAAO;AAAA,EAC/G,KAAK,OAAO,yBAAyB;AAAA,EACrC,UAAU,OAAO,OAAO;AAAA,IACtB,QAAQ;AAAA,IACR,WAAWC,EAAS,MAAM,EAAK;AAAA,IAC/B,WAAWA,EAAS,MAAM,EAAK;AAAA,IAC/B,YAAYA,EAAS,MAAM,EAA2B;AAAA,IACtD,iBAAiBC,EAAI,MAAS;AAAA,IAC9B,YAAYA,EAAI,EAAK;AAAA,EACtB,CAAA;AACH,CAAC;"}

package/dist/Timeline.js

@@ -1,4 +1,4 @@
-import { defineComponent as o, provide as n, computed as t, openBlock as a, createElementBlock as r, normalizeClass as d, renderSlot as l } from "vue";
+import { defineComponent as o, provide as n, computed as t, createElementBlock as a, openBlock as r, normalizeClass as d, renderSlot as l } from "vue";
 import { T as m } from "./keys-BEdEsanp.js";
 import { _ as p } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const c = /* @__PURE__ */ o({
@@ -12,7 +12,7 @@ const c = /* @__PURE__ */ o({
     return n(m.key, {
       side: t(() => e.side),
       density: t(() => e.density)
-    }), (i, f) => (a(), r("ol", {
+    }), (i, f) => (r(), a("ol", {
       class: d(["stash-timeline tw-grid tw-grid-flow-dense tw-items-start tw-justify-center tw-gap-x-3 tw-gap-y-1.5", [`stash-timeline--${e.side}`, `stash-timeline--${e.density}`]]),
       "data-test": "stash-timeline"
     }, [

package/dist/TimelineItem.js

@@ -1,4 +1,4 @@
-import { defineComponent as w, useSlots as v, inject as f, computed as m, openBlock as c, createElementBlock as r, createElementVNode as e, normalizeClass as p, renderSlot as d, createCommentVNode as h } from "vue";
+import { defineComponent as w, useSlots as v, inject as f, computed as m, createElementBlock as c, openBlock as r, createElementVNode as e, createCommentVNode as h, normalizeClass as p, renderSlot as d } from "vue";
 import { T as _ } from "./keys-BEdEsanp.js";
 const I = {
   class: "stash-timeline-item group tw-contents tw-list-none",
@@ -22,7 +22,7 @@ const I = {
       "tw-mb-3": o.value === "compact",
       "tw-mb-6": o.value === "comfortable"
     }));
-    return (l, a) => (c(), r("li", I, [
+    return (l, a) => (r(), c("li", I, [
       e("div", {
         class: p(["stash-timeline-item__main-content", [n.value.main, i.value]]),
         "data-test": "stash-timeline-item|content"
@@ -36,7 +36,7 @@ const I = {
         e("div", { class: "tw-mt-[5px] tw-rounded-full tw-bg-ice-500 tw-p-1.5" }),
         e("div", { class: "tw-w-[2px] tw-flex-1 tw-bg-ice-500" })
       ], -1)),
-      u.opposite ? (c(), r("div", {
+      u.opposite ? (r(), c("div", {
         key: 0,
         class: p(["stash-timeline-item__opposite-content", [n.value.opposite, i.value]]),
         "data-test": "stash-timeline-item|opposite-content"