@leaflink/stash 50.4.0 → 50.5.1

package/dist/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../src/components/Textarea/Textarea.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, nextTick, onBeforeUnmount, onMounted, ref, useAttrs, useCssModule, useSlots, watch } from 'vue';\n\n  import { FieldProps } from '../Field/Field.types';\n  import Field from '../Field/Field.vue';\n\n  export interface TextareaResizeOptions {\n    /**\n     * It will automatically scroll the page down when it reaches the bottom of the viewport/element\n     */\n    forceBrowserScroll: boolean;\n  }\n\n  export interface TextAreaProps extends FieldProps {\n    /**\n     * Value for the textarea element.\n     */\n    modelValue?: string;\n\n    /**\n     * Deprecated. Use :model-value or v-model instead of :value.\n     * @deprecated Use :model-value or v-model instead of :value.\n     */\n    value?: string | number | null;\n\n    /**\n     * Allow textarea to be resizable vertically.\n     * Alternatively if you want to disable automatic scroll when resizing, you can set `{ forceBrowserScroll: false }`\n     */\n    resize?: boolean | TextareaResizeOptions;\n\n    /**\n     * Placeholder text for the textarea element.\n     * **Note:** placeholders should be used to display examples; they should not be used as labels because they are not accessible as labels. If a real label cannot be used, use the `aria-label` attribute.\n     */\n    placeholder?: string;\n  }\n\n  defineOptions({\n    name: 'll-textarea',\n  });\n\n  const attrs = useAttrs();\n  const slots = useSlots();\n  const classes = useCssModule();\n\n  const props = withDefaults(defineProps<TextAreaProps>(), {\n    modelValue: '',\n    value: null,\n    resize: false,\n    placeholder: undefined,\n  });\n\n  const emits = defineEmits<{\n    /**\n     * Emitted when the model value changes.\n     */\n    (e: 'update:model-value', value: string): void;\n  }>();\n\n  const textareaRef = ref<HTMLTextAreaElement>();\n  const observer = ref<ResizeObserver>();\n  const isReadOnly = computed(() => props.isReadOnly || ('readonly' in attrs && attrs.readonly !== false));\n\n  const inputAttrs = computed(() => {\n    const allAttrs = { ...attrs };\n\n    delete allAttrs['data-test'];\n    delete allAttrs.class;\n\n    return allAttrs;\n  });\n\n  watch(\n    () => props.resize,\n    (v) => {\n      v ? setupResizeObserver() : observer.value?.disconnect();\n    },\n  );\n\n  const onInput = (event: Event) => {\n    emits('update:model-value', (event.target as HTMLTextAreaElement).value);\n  };\n\n  const setupResizeObserver = () => {\n    if (observer.value || !textareaRef.value) {\n      return;\n    }\n\n    // the ResizeObserver will be in charge to detect if page needs to scroll when resizing the component\n    observer.value = new ResizeObserver(([entry]) => {\n      const { target } = entry;\n      const parent = findParentScrollable(textareaRef.value as HTMLTextAreaElement) || document.documentElement;\n\n      const { scrollTop: scrollPosition } = parent;\n      let offsetDiff = 0;\n\n      // checks if the closest parent element scrollable is the document page\n      if (parent === document.documentElement) {\n        const { top, height } = getOffsetClipRect(target as HTMLElement);\n        const { innerHeight: viewportHeight } = window;\n\n        offsetDiff = Math.max(top + height - (viewportHeight + scrollPosition), 0);\n      } else {\n        const { top, height } = (target as HTMLElement).getBoundingClientRect();\n        const { top: parentTop } = parent.getBoundingClientRect();\n        const { offsetHeight: parentHeight } = parent;\n        const offsetTop = top - parentTop;\n\n        offsetDiff = Math.max(offsetTop + height - parentHeight, 0);\n      }\n\n      if (offsetDiff) {\n        requestAnimationFrame(() => {\n          parent.scrollTop = scrollPosition + offsetDiff;\n        });\n      }\n    });\n\n    observer.value.observe(textareaRef.value);\n  };\n\n  /**\n   * Retrieve the closest parent that has a scroll. Defaults to the document page.\n   */\n  const findParentScrollable = (el: HTMLElement): HTMLElement | null => {\n    const parent = el.parentElement as HTMLElement;\n    if (!parent) {\n      return null;\n    }\n\n    const { overflowY } = getComputedStyle(parent);\n    if (overflowY !== 'visible') {\n      return parent;\n    }\n\n    if (parent === document.body) {\n      return document.documentElement;\n    }\n\n    return findParentScrollable(parent);\n  };\n\n  /**\n   * Retrieve element absolute positioning relative to the page.\n   */\n  const getOffsetClipRect = (el: HTMLElement) => {\n    const { offsetWidth: width, offsetHeight: height } = el;\n\n    let left = 0;\n    let top = 0;\n\n    const findPos = function ({ offsetLeft, offsetTop, offsetParent }: HTMLElement) {\n      left += offsetLeft;\n      top += offsetTop;\n\n      if (offsetParent) {\n        findPos(offsetParent as HTMLElement);\n      }\n    };\n\n    findPos(el);\n\n    return {\n      top,\n      left,\n      width,\n      height,\n    };\n  };\n\n  onMounted(async () => {\n    if (props.value !== null) {\n      throw new Error('ll-input: use :model-value or v-model instead of :value.');\n    }\n\n    if (attrs.onInput) {\n      throw new Error('ll-input: use the @update:model-value event instead of @input');\n    }\n\n    if (\n      (typeof props.resize === 'boolean' && props.resize) ||\n      (props.resize as TextareaResizeOptions)?.forceBrowserScroll\n    ) {\n      await nextTick();\n      setupResizeObserver();\n    }\n  });\n\n  onBeforeUnmount(() => {\n    observer.value?.disconnect();\n  });\n</script>\n\n<template>\n  <Field v-bind=\"props\" class=\"stash-textarea\" :class=\"[classes.root]\" data-test=\"stash-textarea\">\n    <template #default=\"{ fieldId, hasError }\">\n      <textarea\n        :id=\"fieldId\"\n        ref=\"textareaRef\"\n        :class=\"[\n          classes.textarea,\n          { 'stash-textarea--error': hasError, 'tw-resize-y': props.resize, 'tw-resize-none': !props.resize },\n        ]\"\n        :value=\"props.modelValue\"\n        data-test=\"stash-textarea|textarea\"\n        :placeholder=\"props.placeholder\"\n        v-bind=\"inputAttrs\"\n        :disabled=\"props.disabled\"\n        :readonly=\"isReadOnly\"\n        @input=\"onInput\"\n      ></textarea>\n    </template>\n    <template v-if=\"slots.hint\" #hint>\n      <!-- @slot Hint content -->\n      <slot name=\"hint\"></slot>\n    </template>\n  </Field>\n</template>\n\n<style module>\n  .root {\n    position: relative;\n    width: 100%;\n  }\n\n  .textarea {\n    background: var(--color-white);\n    border: 1px solid;\n    border-color: var(--color-ice-500);\n    border-radius: theme('borderRadius.DEFAULT');\n    color: var(--color-ice-700);\n    display: block;\n    min-height: 100px;\n    outline: none;\n    padding: theme('spacing[1.5]');\n    width: 100%;\n\n    &:hover {\n      border-color: var(--color-ice-500);\n    }\n\n    &:focus,\n    &:active {\n      border-color: var(--color-blue-500);\n    }\n\n    &.stash-textarea--error {\n      border-color: var(--color-red-500);\n      color: var(--color-red-500);\n    }\n\n    &::placeholder {\n      color: var(--color-ice-500);\n      opacity: 1;\n    }\n\n    &[disabled] {\n      background-color: var(--color-ice-100);\n      border-color: var(--color-ice-500);\n      color: var(--color-ice-500);\n      pointer-events: none;\n    }\n\n    &[disabled]:active,\n    &[disabled]:focus {\n      box-shadow: none;\n    }\n\n    &[disabled]::placeholder {\n      text-transform: none;\n      color: var(--color-ice-500);\n    }\n\n    &[readonly] {\n      border-color: transparent;\n      background-color: transparent;\n      padding-left: 0;\n      padding-right: 0;\n      min-height: unset;\n    }\n  }\n</style>\n"],"names":["attrs","useAttrs","slots","useSlots","classes","useCssModule","props","__props","emits","__emit","textareaRef","ref","observer","isReadOnly","computed","inputAttrs","allAttrs","watch","v","setupResizeObserver","_a","onInput","event","entry","target","parent","findParentScrollable","scrollPosition","offsetDiff","top","height","getOffsetClipRect","viewportHeight","parentTop","parentHeight","offsetTop","el","overflowY","width","left","findPos","offsetLeft","offsetParent","onMounted","nextTick","onBeforeUnmount"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","sources":["../src/components/Textarea/Textarea.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, nextTick, onBeforeUnmount, onMounted, ref, useAttrs, useCssModule, useSlots, watch } from 'vue';\n\n  import { FieldProps } from '../Field/Field.types';\n  import Field from '../Field/Field.vue';\n\n  export interface TextareaResizeOptions {\n    /**\n     * It will automatically scroll the page down when it reaches the bottom of the viewport/element\n     */\n    forceBrowserScroll: boolean;\n  }\n\n  export interface TextAreaProps extends FieldProps {\n    /**\n     * Value for the textarea element.\n     */\n    modelValue?: string;\n\n    /**\n     * Deprecated. Use :model-value or v-model instead of :value.\n     * @deprecated Use :model-value or v-model instead of :value.\n     */\n    value?: string | number | null;\n\n    /**\n     * Allow textarea to be resizable vertically.\n     * Alternatively if you want to disable automatic scroll when resizing, you can set `{ forceBrowserScroll: false }`\n     */\n    resize?: boolean | TextareaResizeOptions;\n\n    /**\n     * Placeholder text for the textarea element.\n     * **Note:** placeholders should be used to display examples; they should not be used as labels because they are not accessible as labels. If a real label cannot be used, use the `aria-label` attribute.\n     */\n    placeholder?: string;\n  }\n\n  defineOptions({\n    name: 'll-textarea',\n  });\n\n  const attrs = useAttrs();\n  const slots = useSlots();\n  const classes = useCssModule();\n\n  const props = withDefaults(defineProps<TextAreaProps>(), {\n    modelValue: '',\n    value: null,\n    resize: false,\n    placeholder: undefined,\n  });\n\n  const emits = defineEmits<{\n    /**\n     * Emitted when the model value changes.\n     */\n    (e: 'update:model-value', value: string): void;\n  }>();\n\n  const textareaRef = ref<HTMLTextAreaElement>();\n  const observer = ref<ResizeObserver>();\n  const isReadOnly = computed(() => props.isReadOnly || ('readonly' in attrs && attrs.readonly !== false));\n\n  const inputAttrs = computed(() => {\n    const allAttrs = { ...attrs };\n\n    delete allAttrs['data-test'];\n    delete allAttrs.class;\n\n    return allAttrs;\n  });\n\n  watch(\n    () => props.resize,\n    (v) => {\n      v ? setupResizeObserver() : observer.value?.disconnect();\n    },\n  );\n\n  const onInput = (event: Event) => {\n    emits('update:model-value', (event.target as HTMLTextAreaElement).value);\n  };\n\n  const setupResizeObserver = () => {\n    if (observer.value || !textareaRef.value) {\n      return;\n    }\n\n    // the ResizeObserver will be in charge to detect if page needs to scroll when resizing the component\n    observer.value = new ResizeObserver(([entry]) => {\n      const { target } = entry;\n      const parent = findParentScrollable(textareaRef.value as HTMLTextAreaElement) || document.documentElement;\n\n      const { scrollTop: scrollPosition } = parent;\n      let offsetDiff = 0;\n\n      // checks if the closest parent element scrollable is the document page\n      if (parent === document.documentElement) {\n        const { top, height } = getOffsetClipRect(target as HTMLElement);\n        const { innerHeight: viewportHeight } = window;\n\n        offsetDiff = Math.max(top + height - (viewportHeight + scrollPosition), 0);\n      } else {\n        const { top, height } = (target as HTMLElement).getBoundingClientRect();\n        const { top: parentTop } = parent.getBoundingClientRect();\n        const { offsetHeight: parentHeight } = parent;\n        const offsetTop = top - parentTop;\n\n        offsetDiff = Math.max(offsetTop + height - parentHeight, 0);\n      }\n\n      if (offsetDiff) {\n        requestAnimationFrame(() => {\n          parent.scrollTop = scrollPosition + offsetDiff;\n        });\n      }\n    });\n\n    observer.value.observe(textareaRef.value);\n  };\n\n  /**\n   * Retrieve the closest parent that has a scroll. Defaults to the document page.\n   */\n  const findParentScrollable = (el: HTMLElement): HTMLElement | null => {\n    const parent = el.parentElement as HTMLElement;\n    if (!parent) {\n      return null;\n    }\n\n    const { overflowY } = getComputedStyle(parent);\n    if (overflowY !== 'visible') {\n      return parent;\n    }\n\n    if (parent === document.body) {\n      return document.documentElement;\n    }\n\n    return findParentScrollable(parent);\n  };\n\n  /**\n   * Retrieve element absolute positioning relative to the page.\n   */\n  const getOffsetClipRect = (el: HTMLElement) => {\n    const { offsetWidth: width, offsetHeight: height } = el;\n\n    let left = 0;\n    let top = 0;\n\n    const findPos = function ({ offsetLeft, offsetTop, offsetParent }: HTMLElement) {\n      left += offsetLeft;\n      top += offsetTop;\n\n      if (offsetParent) {\n        findPos(offsetParent as HTMLElement);\n      }\n    };\n\n    findPos(el);\n\n    return {\n      top,\n      left,\n      width,\n      height,\n    };\n  };\n\n  onMounted(async () => {\n    if (props.value !== null) {\n      throw new Error('ll-input: use :model-value or v-model instead of :value.');\n    }\n\n    if (attrs.onInput) {\n      throw new Error('ll-input: use the @update:model-value event instead of @input');\n    }\n\n    if (\n      (typeof props.resize === 'boolean' && props.resize) ||\n      (props.resize as TextareaResizeOptions)?.forceBrowserScroll\n    ) {\n      await nextTick();\n      setupResizeObserver();\n    }\n  });\n\n  onBeforeUnmount(() => {\n    observer.value?.disconnect();\n  });\n</script>\n\n<template>\n  <Field v-bind=\"props\" class=\"stash-textarea\" :class=\"[classes.root]\" data-test=\"stash-textarea\">\n    <template #default=\"{ fieldId, hasError }\">\n      <textarea\n        :id=\"fieldId\"\n        ref=\"textareaRef\"\n        :class=\"[\n          classes.textarea,\n          'tw-border tw-border-ice-500',\n          {\n            'stash-textarea--error tw-border-red-500 tw-text-red-500': hasError,\n            'tw-text-ice-700 hover:tw-border-ice-500 focus:tw-border-blue-500 active:tw-border-blue-500':\n              !hasError && !props.disabled,\n            'tw-resize-y': props.resize,\n            'tw-resize-none': !props.resize,\n          },\n        ]\"\n        :value=\"props.modelValue\"\n        data-test=\"stash-textarea|textarea\"\n        :placeholder=\"props.placeholder\"\n        v-bind=\"inputAttrs\"\n        :disabled=\"props.disabled\"\n        :readonly=\"isReadOnly\"\n        @input=\"onInput\"\n      ></textarea>\n    </template>\n    <template v-if=\"slots.hint\" #hint>\n      <!-- @slot Hint content -->\n      <slot name=\"hint\"></slot>\n    </template>\n  </Field>\n</template>\n\n<style module>\n  .root {\n    position: relative;\n    width: 100%;\n  }\n\n  .textarea {\n    background: var(--color-white);\n    border-radius: theme('borderRadius.DEFAULT');\n    display: block;\n    min-height: 100px;\n    outline: none;\n    padding: theme('spacing[1.5]');\n    width: 100%;\n\n    &::placeholder {\n      color: var(--color-ice-500);\n      opacity: 1;\n    }\n\n    &[disabled] {\n      background-color: var(--color-ice-100);\n      border-color: var(--color-ice-500);\n      color: var(--color-ice-500);\n      pointer-events: none;\n    }\n\n    &[disabled]:active,\n    &[disabled]:focus {\n      box-shadow: none;\n    }\n\n    &[disabled]::placeholder {\n      text-transform: none;\n      color: var(--color-ice-500);\n    }\n\n    &[readonly] {\n      border-color: transparent;\n      background-color: transparent;\n      padding-left: 0;\n      padding-right: 0;\n      min-height: unset;\n    }\n  }\n</style>\n"],"names":["attrs","useAttrs","slots","useSlots","classes","useCssModule","props","__props","emits","__emit","textareaRef","ref","observer","isReadOnly","computed","inputAttrs","allAttrs","watch","v","setupResizeObserver","_a","onInput","event","entry","target","parent","findParentScrollable","scrollPosition","offsetDiff","top","height","getOffsetClipRect","viewportHeight","parentTop","parentHeight","offsetTop","el","overflowY","width","left","findPos","offsetLeft","offsetParent","onMounted","nextTick","onBeforeUnmount"],"mappings":"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"}

package/dist/Thumbnail.js

@@ -0,0 +1,91 @@
+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 { 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 j } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const A = ["aria-current", "draggable"], D = /* @__PURE__ */ w({
+  __name: "Thumbnail",
+  props: {
+    thumbnail: {},
+    altText: { default: "" },
+    variant: { default: "opaque" }
+  },
+  emits: ["remove", "click"],
+  setup(_, { emit: f }) {
+    const u = _, r = f, a = q(), { thumbnails: v, activeThumbnail: n, draggable: p, isDragging: m, radius: i, removable: o } = C(
+      d.key,
+      d.defaults
+    ), e = T(() => x(v).findIndex((l) => l === u.thumbnail));
+    function g() {
+      n.value = e.value, r("click", e.value);
+    }
+    function k() {
+      r("remove", e.value), n.value = -1;
+    }
+    return (l, c) => (b(), B("li", {
+      class: s(["stash-thumbnail tw-group tw-relative tw-cursor-pointer focus-visible:tw-outline-none", [
+        {
+          [t(a)["thumbnail-translucent"]]: u.variant === "translucent",
+          [t(a)["thumbnail-opaque"]]: u.variant === "opaque",
+          [t(a)["thumbnail-removable"]]: t(o),
+          [t(a)["thumbnail-circle"]]: t(i) === "circle",
+          [t(a)["thumbnail-rounded"]]: t(i) === "rounded"
+        }
+      ]]),
+      "aria-current": t(n) === e.value,
+      draggable: t(p),
+      "data-test": "stash-thumbnail",
+      tabindex: "0",
+      onClick: c[0] || (c[0] = (L) => g())
+    }, [
+      h(U, {
+        class: s(["stash-thumbnail__img tw-border-ice-200 tw-outline-blue-500/15 tw-transition-colors", [
+          t(a)["thumbnail-img"],
+          {
+            [t(a)["thumbnail-mask"]]: t(o) && t(i) !== "circle",
+            [t(a)["thumbnail-active"]]: t(n) === e.value && !t(m),
+            "group-hover:tw-border-blue-500 group-focus-visible:tw-border-blue-500 group-focus-visible:tw-outline": !t(m)
+          }
+        ]]),
+        "data-test": "stash-thumbnail|img",
+        radius: t(i),
+        src: l.thumbnail.imageUrl,
+        alt: l.altText
+      }, null, 8, ["class", "radius", "src", "alt"]),
+      t(o) ? (b(), I(z, {
+        key: 0,
+        class: s(["stash-thumbnail__remove", [t(a)["thumbnail-remove"]]]),
+        "data-test": "stash-thumbnail|remove",
+        "aria-label": t(V)("ll.thumbnail.removeButton", { index: e.value + 1 }),
+        type: "button",
+        icon: "",
+        onClick: y(k, ["stop", "prevent"])
+      }, {
+        default: M(() => [
+          h(E, {
+            name: "close",
+            size: "small"
+          })
+        ]),
+        _: 1
+      }, 8, ["class", "aria-label"])) : N("", !0),
+      $(l.$slots, "hint")
+    ], 10, A));
+  }
+}), H = {
+  "thumbnail-remove": "_thumbnail-remove_afa4q_2",
+  "thumbnail-img": "_thumbnail-img_afa4q_24",
+  "thumbnail-translucent": "_thumbnail-translucent_afa4q_32",
+  "thumbnail-active": "_thumbnail-active_afa4q_36",
+  "thumbnail-mask": "_thumbnail-mask_afa4q_46",
+  "thumbnail-full": "_thumbnail-full_afa4q_50",
+  "thumbnail-rounded": "_thumbnail-rounded_afa4q_54"
+}, J = {
+  $style: H
+}, Q = /* @__PURE__ */ j(D, [["__cssModules", J]]);
+export {
+  Q as default
+};
+//# sourceMappingURL=Thumbnail.js.map

package/dist/Thumbnail.js.map

@@ -0,0 +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,KAEV,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,OAClCZ,EAAA,SAASY,EAAe,KAAK;AAAA,IACpC;AAEA,aAASK,IAAe;AACjB,MAAAjB,EAAA,UAAUY,EAAe,KAAK,GACnCP,EAAgB,QAAQ;AAAA,IAC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Thumbnail.vue.d.ts

@@ -0,0 +1,63 @@
+import { AllowedComponentProps } from 'vue';
+import { ComponentCustomProps } from 'vue';
+import { RendererElement } from 'vue';
+import { RendererNode } from 'vue';
+import { ShallowUnwrapRef } from 'vue';
+import { VNode } from 'vue';
+import { VNodeProps } from 'vue';
+
+declare const _default: <ThumbnailItem extends ThumbnailDefinition>(__VLS_props: {
+    readonly onClick?: ((index: number) => any) | undefined;
+    readonly onRemove?: ((index: number) => any) | undefined;
+    variant?: ThumbnailVariant | undefined;
+    thumbnail: ThumbnailItem;
+    altText?: string | undefined;
+} & VNodeProps & AllowedComponentProps & ComponentCustomProps, __VLS_ctx?: {
+    attrs: any;
+    slots: {
+        hint?(_: {}): any;
+    };
+    emit: ((evt: "click", index: number) => void) & ((evt: "remove", index: number) => void);
+} | undefined, __VLS_expose?: ((exposed: ShallowUnwrapRef<    {}>) => void) | undefined, __VLS_setup?: Promise<{
+    props: {
+        readonly onClick?: ((index: number) => any) | undefined;
+        readonly onRemove?: ((index: number) => any) | undefined;
+        variant?: ThumbnailVariant | undefined;
+        thumbnail: ThumbnailItem;
+        altText?: string | undefined;
+    } & VNodeProps & AllowedComponentProps & ComponentCustomProps;
+    expose(exposed: ShallowUnwrapRef<    {}>): void;
+    attrs: any;
+    slots: {
+        hint?(_: {}): any;
+    };
+    emit: ((evt: "click", index: number) => void) & ((evt: "remove", index: number) => void);
+}>) => VNode<RendererNode, RendererElement, {
+[key: string]: any;
+}> & {
+    __ctx?: {
+        props: {
+            readonly onClick?: ((index: number) => any) | undefined;
+            readonly onRemove?: ((index: number) => any) | undefined;
+            variant?: ThumbnailVariant | undefined;
+            thumbnail: ThumbnailItem;
+            altText?: string | undefined;
+        } & VNodeProps & AllowedComponentProps & ComponentCustomProps;
+        expose(exposed: ShallowUnwrapRef<    {}>): void;
+        attrs: any;
+        slots: {
+            hint?(_: {}): any;
+        };
+        emit: ((evt: "click", index: number) => void) & ((evt: "remove", index: number) => void);
+    } | undefined;
+};
+export default _default;
+
+export declare interface ThumbnailDefinition {
+    id: number | string;
+    imageUrl: string;
+}
+
+export declare type ThumbnailVariant = 'opaque' | 'translucent';
+
+export { }

package/dist/ThumbnailEmpty.js

@@ -0,0 +1,33 @@
+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 i from "./Icon.js";
+import { T as s } from "./ThumbnailGroup.keys-D6WL5xQ5.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", {
+      class: r(["stash-thumbnail-empty", [
+        t(a)["thumbnail-empty"],
+        {
+          "tw-rounded-full": t(e) === "circle",
+          "tw-rounded": t(e) === "rounded"
+        }
+      ]]),
+      "data-test": "stash-thumbnail-empty"
+    }, [
+      u(i, {
+        name: "image",
+        "data-test": "stash-thumbnail-empty|icon"
+      })
+    ], 2));
+  }
+}), d = {
+  "thumbnail-empty": "_thumbnail-empty_1c6pl_2"
+}, h = {
+  $style: d
+}, M = /* @__PURE__ */ p(_, [["__cssModules", h]]);
+export {
+  M as default
+};
+//# sourceMappingURL=ThumbnailEmpty.js.map

package/dist/ThumbnailEmpty.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThumbnailEmpty.js","sources":["../src/components/ThumbnailEmpty/ThumbnailEmpty.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject, useCssModule } from 'vue';\n\n  import Icon from '../Icon/Icon.vue';\n  import { THUMBNAIL_INJECTION } from '../ThumbnailGroup/ThumbnailGroup.keys';\n\n  const classes = useCssModule();\n\n  const { radius } = inject(THUMBNAIL_INJECTION.key, THUMBNAIL_INJECTION.defaults);\n</script>\n\n<template>\n  <li\n    class=\"stash-thumbnail-empty\"\n    :class=\"[\n      classes['thumbnail-empty'],\n      {\n        'tw-rounded-full': radius === 'circle',\n        'tw-rounded': radius === 'rounded',\n      },\n    ]\"\n    data-test=\"stash-thumbnail-empty\"\n  >\n    <Icon name=\"image\" data-test=\"stash-thumbnail-empty|icon\" />\n  </li>\n</template>\n\n<style module>\n  .thumbnail-empty {\n    height: theme('spacing.12');\n    width: theme('spacing.12');\n    border-width: 1px;\n    outline-width: theme('borderSpacing.1');\n    border-style: dashed;\n    border-color: var(--colors-ice-500);\n    background-color: var(--colors-ice-100);\n    color: var(--colors-ice-700);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n</style>\n"],"names":["classes","useCssModule","radius","inject","THUMBNAIL_INJECTION"],"mappings":";;;;;;;AAME,UAAMA,IAAUC,KAEV,EAAE,QAAAC,EAAO,IAAIC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ThumbnailEmpty.vue.d.ts

@@ -0,0 +1,9 @@
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { DefineComponent } from 'vue';
+import { PublicProps } from 'vue';
+
+declare const _default: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+export default _default;
+
+export { }

package/dist/ThumbnailGroup.js

@@ -0,0 +1,73 @@
+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 B, { moveSortableElements as k } from "./useSortable.js";
+import S from "./ThumbnailEmpty.js";
+import { T as C } from "./ThumbnailGroup.keys-D6WL5xQ5.js";
+import { _ as D } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const M = /* @__PURE__ */ h({
+  __name: "ThumbnailGroup",
+  props: /* @__PURE__ */ m({
+    draggable: { type: Boolean, default: !1 },
+    radius: { default: "rounded" },
+    removable: { type: Boolean, default: !1 },
+    showEmpty: { type: Boolean, default: !1 },
+    emptyOptions: { default: () => ({ max: 6 }) },
+    thumbnails: { default: () => [] }
+  }, {
+    activeThumbnail: {
+      default: -1
+    },
+    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({
+      get() {
+        return t.thumbnails;
+      },
+      set(e) {
+        n("update:thumbnails", e);
+      }
+    }), u = g(null), { isDragging: i } = B({
+      ref: u,
+      list: a,
+      isEnabled: t.draggable,
+      ghostClass: "thumbnail-ghost",
+      chosenClass: "thumbnail-chosen",
+      sortInPlace: !1,
+      onDragStart: (e) => n("dragStart", e),
+      onDragEnd: (e) => {
+        r.value = e.newIndex, k({ list: a, from: e.oldIndex, to: e.newIndex }), n("dragEnd", e);
+      }
+    }), f = 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,
+      Object.freeze({
+        draggable: l(() => t.draggable),
+        removable: l(() => t.removable),
+        thumbnails: a,
+        radius: t.radius,
+        activeThumbnail: r,
+        isDragging: i
+      })
+    ), (e, O) => (o(), d("ul", {
+      ref_key: "thumbnailRef",
+      ref: u,
+      class: "stash-thumbnail-group tw-flex tw-flex-wrap tw-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, w(f.value, (N, b) => (o(), I(S, {
+        key: `empty_thumb_${b}`
+      }))), 128))
+    ], 512));
+  }
+}), $ = /* @__PURE__ */ D(M, [["__scopeId", "data-v-358f73aa"]]);
+export {
+  $ as default,
+  k as moveSortableElements
+};
+//# sourceMappingURL=ThumbnailGroup.js.map

package/dist/ThumbnailGroup.js.map

@@ -0,0 +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,MACjC;AAAA,IAAA,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,SAAA,CAAU,GACnFN,EAAK,WAAW,CAAC;AAAA,MACnB;AAAA,IAAA,CACD,GAEKc,IAAuBP,EAAS,MAAM;AACtC,UAAA,CAACL,EAAM,UAAkB,QAAA;AAE7B,YAAM,EAAE,KAAAa,EAAQ,IAAAb,EAAM,gBAAgB,CAAA;AAEtC,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,MAAA,CACD;AAAA,IAAA;;;;;;;;;;;;;"}

package/dist/ThumbnailGroup.keys-D6WL5xQ5.js

@@ -0,0 +1,16 @@
+import { computed as e, ref as a } from "vue";
+const l = Object.freeze({
+  key: Symbol("THUMBNAIL_INJECTION_KEY"),
+  defaults: Object.freeze({
+    radius: "rounded",
+    draggable: e(() => !1),
+    removable: e(() => !1),
+    thumbnails: e(() => []),
+    activeThumbnail: a(void 0),
+    isDragging: a(!1)
+  })
+});
+export {
+  l as T
+};
+//# sourceMappingURL=ThumbnailGroup.keys-D6WL5xQ5.js.map

package/dist/ThumbnailGroup.keys-D6WL5xQ5.js.map

@@ -0,0 +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,EAAA,CACtB;AACH,CAAC;"}

package/dist/ThumbnailGroup.vue.d.ts

@@ -0,0 +1,191 @@
+import { AllowedComponentProps } from 'vue';
+import { ComponentCustomProps } from 'vue';
+import { ComputedRef } from 'vue';
+import { MaybeRefOrGetter } from 'vue';
+import { Ref } from 'vue';
+import { RendererElement } from 'vue';
+import { RendererNode } from 'vue';
+import { ShallowUnwrapRef } from 'vue';
+import { VNode } from 'vue';
+import { VNodeProps } from 'vue';
+
+declare const _default: <Thumbnail extends ThumbnailDefinition>(__VLS_props: {
+    radius?: ThumbnailRadius | undefined;
+    draggable?: boolean | undefined;
+    removable?: boolean | undefined;
+    thumbnails?: Thumbnail[] | undefined;
+    activeThumbnail?: number | undefined;
+    readonly onDragStart?: ((event: SortableOnDragStartEvent) => any) | undefined;
+    readonly onDragEnd?: ((event: SortableDragEvent) => any) | undefined;
+    readonly "onUpdate:thumbnails"?: ((thumbnails: Thumbnail[]) => any) | undefined;
+    showEmpty?: boolean | undefined;
+    emptyOptions?: ThumbnailEmptyOptions | undefined;
+} & VNodeProps & AllowedComponentProps & ComponentCustomProps, __VLS_ctx?: {
+    attrs: any;
+    slots: {
+        default?(_: {
+            activeThumbnail: number;
+            isDragging: boolean;
+        }): any;
+    };
+    emit: ((evt: "dragStart", event: SortableOnDragStartEvent) => void) & ((evt: "dragEnd", event: SortableDragEvent) => void) & ((evt: "update:thumbnails", thumbnails: Thumbnail[]) => void);
+} | undefined, __VLS_expose?: ((exposed: ShallowUnwrapRef<    {}>) => void) | undefined, __VLS_setup?: Promise<{
+    props: {
+        radius?: ThumbnailRadius | undefined;
+        draggable?: boolean | undefined;
+        removable?: boolean | undefined;
+        thumbnails?: Thumbnail[] | undefined;
+        activeThumbnail?: number | undefined;
+        readonly onDragStart?: ((event: SortableOnDragStartEvent) => any) | undefined;
+        readonly onDragEnd?: ((event: SortableDragEvent) => any) | undefined;
+        readonly "onUpdate:thumbnails"?: ((thumbnails: Thumbnail[]) => any) | undefined;
+        showEmpty?: boolean | undefined;
+        emptyOptions?: ThumbnailEmptyOptions | undefined;
+    } & VNodeProps & AllowedComponentProps & ComponentCustomProps;
+    expose(exposed: ShallowUnwrapRef<    {}>): void;
+    attrs: any;
+    slots: {
+        default?(_: {
+            activeThumbnail: number;
+            isDragging: boolean;
+        }): any;
+    };
+    emit: ((evt: "dragStart", event: SortableOnDragStartEvent) => void) & ((evt: "dragEnd", event: SortableDragEvent) => void) & ((evt: "update:thumbnails", thumbnails: Thumbnail[]) => void);
+}>) => VNode<RendererNode, RendererElement, {
+[key: string]: any;
+}> & {
+    __ctx?: {
+        props: {
+            radius?: ThumbnailRadius | undefined;
+            draggable?: boolean | undefined;
+            removable?: boolean | undefined;
+            thumbnails?: Thumbnail[] | undefined;
+            activeThumbnail?: number | undefined;
+            readonly onDragStart?: ((event: SortableOnDragStartEvent) => any) | undefined;
+            readonly onDragEnd?: ((event: SortableDragEvent) => any) | undefined;
+            readonly "onUpdate:thumbnails"?: ((thumbnails: Thumbnail[]) => any) | undefined;
+            showEmpty?: boolean | undefined;
+            emptyOptions?: ThumbnailEmptyOptions | undefined;
+        } & VNodeProps & AllowedComponentProps & ComponentCustomProps;
+        expose(exposed: ShallowUnwrapRef<    {}>): void;
+        attrs: any;
+        slots: {
+            default?(_: {
+                activeThumbnail: number;
+                isDragging: boolean;
+            }): any;
+        };
+        emit: ((evt: "dragStart", event: SortableOnDragStartEvent) => void) & ((evt: "dragEnd", event: SortableDragEvent) => void) & ((evt: "update:thumbnails", thumbnails: Thumbnail[]) => void);
+    } | undefined;
+};
+export default _default;
+
+/**
+ * Move sortable elements in the list
+ * @param list List of sortable elements
+ * @param from Original element position
+ * @param to New element position
+ */
+export declare function moveSortableElements<ListItem>({ list, from, to }: MoveSortableElementsOptions<ListItem>): void;
+
+export declare interface MoveSortableElementsOptions<T> {
+    list: RefOrGetter<T[]>;
+    from: number;
+    to: number;
+}
+
+/**
+ * Like the MaybeRefOrGetter type from Vue, but without the Maybe. Can be used to ensure the most up-to-date value is available.
+ */
+declare type RefOrGetter<T> = Ref<T> | (() => T);
+
+export declare interface SortableDragEvent extends DragEvent {
+    /**
+     * The old index of the dragged element
+     */
+    oldIndex: number;
+    /**
+     * The new index of the dragged element
+     */
+    newIndex: number;
+}
+
+export declare type SortableOnDragEndEvent = SortableDragEvent;
+
+export declare type SortableOnDragStartEvent = Omit<SortableDragEvent, 'newIndex'>;
+
+declare interface ThumbnailDefinition {
+    id: number | string;
+    imageUrl: string;
+}
+
+export declare interface ThumbnailEmptyOptions {
+    max: number;
+}
+
+export declare interface ThumbnailInjection<Thumbnail> {
+    isDragging: MaybeRefOrGetter<boolean>;
+    radius: ThumbnailRadius;
+    draggable: ComputedRef<boolean>;
+    removable: MaybeRefOrGetter<boolean>;
+    thumbnails: MaybeRefOrGetter<Thumbnail[]>;
+    activeThumbnail: Ref<number | undefined>;
+}
+
+export declare type ThumbnailRadius = 'rounded' | 'circle';
+
+export declare interface UseSortableOptions<SortableItem> {
+    /**
+     * The parent element of the sortable elements
+     */
+    ref: Ref<HTMLElement | null>;
+    /**
+     * The list of sortable elements to be sorted
+     */
+    list: Ref<SortableItem[]>;
+    /**
+     * Enables/Disables drag and drop sorting
+     * @default true
+     */
+    isEnabled?: boolean;
+    /**
+     * Class name for the ghost element
+     * @default ''
+     */
+    ghostClass?: string;
+    /**
+     * Class name for the chosen element
+     * @default ''
+     */
+    chosenClass?: string;
+    /**
+     * Sort the list in place
+     * @default true
+     */
+    sortInPlace?: boolean;
+    /**
+     * Callback when the dragging starts
+     */
+    onDragStart?: (e: SortableOnDragStartEvent) => void;
+    /**
+     * Callback when the dragging ends
+     */
+    onDragEnd?: (e: SortableOnDragEndEvent) => void;
+}
+
+export declare interface UseSortableReturn {
+    /**
+     * Whether the element is currently being dragged
+     */
+    isDragging: Ref<boolean>;
+    /**
+     * The new position of the dragged element
+     */
+    newIndex: Ref<number>;
+    /**
+     * The original position of the dragged element
+     */
+    oldIndex: Ref<number>;
+}
+
+export { }

package/dist/Tooltip.js

@@ -1,6 +1,6 @@
-import { defineComponent as g, ref as n, computed as r, openBlock as d, createElementBlock as S, createElementVNode as i, renderSlot as l, createBlock as T, Teleport as E, normalizeStyle as u, unref as $, createTextVNode as k, toDisplayString as O } from "vue";
+import { defineComponent as g, ref as n, computed as r, openBlock as d, createElementBlock as S, createElementVNode as i, renderSlot as l, createBlock as T, Teleport as E, normalizeStyle as f, unref as $, createTextVNode as k, toDisplayString as O } from "vue";
 import { u as A, a as B, f as F, o as D, b as I } from "./floating-ui.vue-BmfQDqE-.js";
-import { u as P } from "./index-Ck3Dl09q.js";
+import { a as P } from "./index-Bbc2pg2X.js";
 const z = {
   ref: "wrapper",
   class: "stash-tooltip__wrapper tw-relative tw-inline-flex tw-h-fit tw-w-fit"
@@ -13,13 +13,13 @@ const z = {
     teleportTo: { default: "#stash-menus-mount-node" },
     text: { default: "" }
   },
-  setup(f) {
+  setup(u) {
     const m = {
       top: "bottom",
       right: "left",
       bottom: "top",
       left: "right"
-    }, e = f, a = n(null), p = n(null), c = n(null), { isOutside: h } = P(a), _ = r(() => !h.value || e.isOpen), y = r(() => e.side), { floatingStyles: x, middlewareData: o, placement: v } = A(a, c, {
+    }, e = u, a = n(null), p = n(null), c = n(null), { isOutside: h } = P(a), _ = r(() => !h.value || e.isOpen), y = r(() => e.side), { floatingStyles: x, middlewareData: o, placement: v } = A(a, c, {
       whileElementsMounted: B,
       placement: y,
       middleware: [F(), D(N), I({ element: p })]
@@ -51,7 +51,7 @@ const z = {
           "data-test": "stash-tooltip",
           class: "stash-tooltip tw-pointer-events-none tw-z-screen tw-flex tw-w-[148px] tw-flex-col tw-items-center tw-whitespace-normal tw-rounded tw-bg-ice-900 tw-p-3 tw-text-center tw-text-xs tw-text-white tw-opacity-0 tw-shadow tw-transition-opacity",
           role: "tooltip",
-          style: u({
+          style: f({
             ...$(x),
             opacity: _.value ? 0.95 : 0
           })
@@ -65,7 +65,7 @@ const z = {
             ref_key: "floatingArrow",
             ref: p,
             class: "stash-tooltip__arrow tw-absolute tw-z-behind tw-h-[12px] tw-w-[12px] tw-rotate-45 tw-bg-ice-900",
-            style: u(b.value)
+            style: f(b.value)
           }, null, 4)
         ], 4)
       ], 8, ["to", "disabled"]))