@leaflink/stash 43.5.2 → 44.0.0-beta.10

package/dist/ButtonGroup.js

@@ -1,10 +1,10 @@
-import { defineComponent as m, computed as r, ref as b, openBlock as n, createElementBlock as s, normalizeClass as p, Fragment as g, renderList as $, withModifiers as y, toDisplayString as B } from "vue";
+import { defineComponent as b, computed as r, ref as m, openBlock as o, createElementBlock as s, normalizeClass as p, Fragment as g, renderList as $, withModifiers as y, toDisplayString as B } from "vue";
 import h from "lodash-es/uniqueId";
-import { _ as k } from "./_plugin-vue_export-helper-dad06003.js";
-const C = ["data-test"], G = ["data-test", "disabled", "onClick"], w = {
+import { _ as w } from "./_plugin-vue_export-helper-dad06003.js";
+const z = ["data-test"], k = ["data-test", "disabled", "onClick"], C = {
   name: "ll-button-group"
-}, D = /* @__PURE__ */ m({
-  ...w,
+}, G = /* @__PURE__ */ b({
+  ...C,
   props: {
     groupName: { default: h() },
     options: {},
@@ -14,43 +14,43 @@ const C = ["data-test"], G = ["data-test", "disabled", "onClick"], w = {
   },
   emits: ["input"],
   setup(v, { emit: _ }) {
-    const e = v, u = r(() => e.options.length === 1), i = r(() => e.allowDeactivate || u.value), a = b(e.options.find((t) => t.active) || null);
+    const e = v, u = r(() => e.options.length === 1), i = r(() => e.allowDeactivate || u.value), a = m(e.options.find((t) => t.active) || null);
     function f(t) {
-      var o;
-      i.value && ((o = a.value) == null ? void 0 : o.id) === t.id ? a.value = null : a.value = t, _("input", a.value);
+      var l;
+      i.value && ((l = a.value) == null ? void 0 : l.id) === t.id ? a.value = null : a.value = t, _("input", a.value);
     }
-    return (t, o) => (n(), s("div", {
+    return (t, l) => (o(), s("div", {
       class: p([
-        "flex",
+        "tw-flex",
         t.$style.buttonGroup,
-        { "w-full": e.fullWidth },
+        { "tw-w-full": e.fullWidth },
         { [t.$style.single]: u.value },
         { [t.$style["can-deactivate"]]: i.value }
       ]),
       "data-test": `button-group-${t.$props.groupName}`
     }, [
-      (n(!0), s(g, null, $(e.options, (l) => {
+      (o(!0), s(g, null, $(e.options, (n) => {
         var c, d;
-        return n(), s("button", {
-          key: `${e.groupName}-${l.id}`,
-          class: p([t.$style.button, { [t.$style.active]: ((c = a.value) == null ? void 0 : c.id) === l.id }]),
-          "data-test": `${e.groupName}-button-${((d = a.value) == null ? void 0 : d.id) === l.id ? "active" : "inactive"}`,
+        return o(), s("button", {
+          key: `${e.groupName}-${n.id}`,
+          class: p([t.$style.button, { [t.$style.active]: ((c = a.value) == null ? void 0 : c.id) === n.id }]),
+          "data-test": `${e.groupName}-button-${((d = a.value) == null ? void 0 : d.id) === n.id ? "active" : "inactive"}`,
           tabindex: 0,
           disabled: e.disabled,
-          onClick: y((E) => f(l), ["prevent"])
-        }, B(l.text), 11, G);
+          onClick: y((E) => f(n), ["prevent"])
+        }, B(n.text), 11, k);
       }), 128))
-    ], 10, C));
+    ], 10, z));
   }
-}), N = "_buttonGroup_15lt7_176", M = "_button_15lt7_176", S = "_single_15lt7_190", W = "_active_15lt7_202", q = {
-  buttonGroup: N,
-  button: M,
-  single: S,
-  active: W,
-  "can-deactivate": "_can-deactivate_15lt7_215"
-}, z = {
-  $style: q
-}, j = /* @__PURE__ */ k(D, [["__cssModules", z]]);
+}), D = "_buttonGroup_1bnlz_3", N = "_button_1bnlz_3", M = "_single_1bnlz_17", S = "_active_1bnlz_29", W = {
+  buttonGroup: D,
+  button: N,
+  single: M,
+  active: S,
+  "can-deactivate": "_can-deactivate_1bnlz_42"
+}, q = {
+  $style: W
+}, j = /* @__PURE__ */ w(G, [["__cssModules", q]]);
 export {
   j as default
 };

package/dist/ButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.js","sources":["../src/components/ButtonGroup/ButtonGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * @deprecated use RadioGroup instead with `variant=\"button\"`.\n   * RadioGroup uses pretty much the same API as the ButtonGroup,\n   * but every button is a radio element which makes more sense semantically.\n   */\n  export default {\n    name: 'll-button-group',\n  };\n</script>\n\n<script lang=\"ts\" setup>\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, ref } from 'vue';\n\n  export interface ButtonGroupOption {\n    id: string;\n    active?: boolean;\n    text: string;\n  }\n\n  export interface ButtonGroupProps {\n    /**\n     * A name for the group, useful when multiple ButtonGroups exist on the page\n     */\n    groupName?: string;\n\n    /**\n     * The list of buttons to render\n     */\n    options: ButtonGroupOption[];\n\n    /**\n     * Whether the group should expand to the parent's width\n     */\n    fullWidth?: boolean;\n\n    /**\n     * Whether the entire group should be disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether the active button can be deactivated\n     */\n    allowDeactivate?: boolean;\n  }\n\n  const props = withDefaults(defineProps<ButtonGroupProps>(), {\n    groupName: uniqueId(),\n    fullWidth: false,\n    disabled: false,\n    allowDeactivate: false,\n  });\n\n  const emit =\n    defineEmits<{\n      (e: 'input', activeButton: ButtonGroupOption | null): void;\n    }>();\n\n  const isSingleButton = computed(() => props.options.length === 1);\n\n  const canDeactivate = computed(() => props.allowDeactivate || isSingleButton.value);\n\n  const activeButton = ref(props.options.find((o) => o.active) || null);\n\n  function onClick(clickedOption: ButtonGroupOption) {\n    if (canDeactivate.value && activeButton.value?.id === clickedOption.id) {\n      activeButton.value = null;\n    } else {\n      activeButton.value = clickedOption;\n    }\n\n    emit('input', activeButton.value);\n  }\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'flex',\n      $style.buttonGroup,\n      { 'w-full': props.fullWidth },\n      { [$style.single]: isSingleButton },\n      { [$style['can-deactivate']]: canDeactivate },\n    ]\"\n    :data-test=\"`button-group-${$props.groupName}`\"\n  >\n    <button\n      v-for=\"option in props.options\"\n      :key=\"`${props.groupName}-${option.id}`\"\n      :class=\"[$style.button, { [$style.active]: activeButton?.id === option.id }]\"\n      :data-test=\"`${props.groupName}-button-${activeButton?.id === option.id ? 'active' : 'inactive'}`\"\n      :tabindex=\"0\"\n      :disabled=\"props.disabled\"\n      @click.prevent=\"onClick(option)\"\n    >\n      {{ option.text }}\n    </button>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n  // full width buttons\n  .buttonGroup:global(.w-full) > button {\n    flex: 1 1 50%;\n    max-width: 100%;\n  }\n\n  .button {\n    border: 1px solid var(--color-ice);\n    border-radius: 0;\n    font-weight: var(--font-weight-semibold);\n    line-height: var(--line-height-body);\n    min-width: 100px;\n    padding: 7px 8px;\n  }\n\n  .single .button {\n    border: 1px solid var(--color-ice-700);\n    color: var(--color-ice-700);\n  }\n\n  .button:focus,\n  .button:hover {\n    border: 1px solid var(--color-blue) !important;\n    color: var(--color-blue);\n    z-index: 1;\n  }\n\n  .button.active {\n    background-color: var(--color-blue-100);\n    border: 1px solid var(--color-blue) !important;\n    color: var(--color-blue);\n    cursor: default;\n    z-index: 1;\n  }\n\n  .button.active + button {\n    border-left: 1px solid transparent;\n  }\n\n  .single .button.active,\n  .can-deactivate .button.active {\n    cursor: pointer;\n  }\n\n  .button[disabled] {\n    color: var(--color-ice);\n    cursor: default;\n    pointer-events: none;\n  }\n\n  .button:focus {\n    box-shadow: none;\n    outline: 0;\n  }\n\n  .button:not(:first-child) {\n    margin-left: -1px;\n  }\n\n  .button:not(:last-child) {\n    border-right: 1px solid transparent;\n  }\n\n  .button:first-child {\n    border-bottom-left-radius: var(--border-radius);\n    border-top-left-radius: var(--border-radius);\n  }\n\n  .button:last-child {\n    border-bottom-right-radius: var(--border-radius);\n    border-top-right-radius: var(--border-radius);\n  }\n</style>\n"],"names":["isSingleButton","computed","props","canDeactivate","activeButton","ref","o","onClick","clickedOption","_a","emit"],"mappings":";;;uEAMiB;AAAA,EACb,MAAM;AACR;;;;;;;;;;;iBAoDMA,IAAiBC,EAAS,MAAMC,EAAM,QAAQ,WAAW,CAAC,GAE1DC,IAAgBF,EAAS,MAAMC,EAAM,mBAAmBF,EAAe,KAAK,GAE5EI,IAAeC,EAAIH,EAAM,QAAQ,KAAK,CAACI,MAAMA,EAAE,MAAM,KAAK,IAAI;AAEpE,aAASC,EAAQC,GAAkC;;AACjD,MAAIL,EAAc,WAASM,IAAAL,EAAa,UAAb,gBAAAK,EAAoB,QAAOD,EAAc,KAClEJ,EAAa,QAAQ,OAErBA,EAAa,QAAQI,GAGlBE,EAAA,SAASN,EAAa,KAAK;AAAA,IAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ButtonGroup.js","sources":["../src/components/ButtonGroup/ButtonGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * @deprecated use RadioGroup instead with `variant=\"button\"`.\n   * RadioGroup uses pretty much the same API as the ButtonGroup,\n   * but every button is a radio element which makes more sense semantically.\n   */\n  export default {\n    name: 'll-button-group',\n  };\n</script>\n\n<script lang=\"ts\" setup>\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, ref } from 'vue';\n\n  export interface ButtonGroupOption {\n    id: string;\n    active?: boolean;\n    text: string;\n  }\n\n  export interface ButtonGroupProps {\n    /**\n     * A name for the group, useful when multiple ButtonGroups exist on the page\n     */\n    groupName?: string;\n\n    /**\n     * The list of buttons to render\n     */\n    options: ButtonGroupOption[];\n\n    /**\n     * Whether the group should expand to the parent's width\n     */\n    fullWidth?: boolean;\n\n    /**\n     * Whether the entire group should be disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether the active button can be deactivated\n     */\n    allowDeactivate?: boolean;\n  }\n\n  const props = withDefaults(defineProps<ButtonGroupProps>(), {\n    groupName: uniqueId(),\n    fullWidth: false,\n    disabled: false,\n    allowDeactivate: false,\n  });\n\n  const emit =\n    defineEmits<{\n      (e: 'input', activeButton: ButtonGroupOption | null): void;\n    }>();\n\n  const isSingleButton = computed(() => props.options.length === 1);\n\n  const canDeactivate = computed(() => props.allowDeactivate || isSingleButton.value);\n\n  const activeButton = ref(props.options.find((o) => o.active) || null);\n\n  function onClick(clickedOption: ButtonGroupOption) {\n    if (canDeactivate.value && activeButton.value?.id === clickedOption.id) {\n      activeButton.value = null;\n    } else {\n      activeButton.value = clickedOption;\n    }\n\n    emit('input', activeButton.value);\n  }\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'tw-flex',\n      $style.buttonGroup,\n      { 'tw-w-full': props.fullWidth },\n      { [$style.single]: isSingleButton },\n      { [$style['can-deactivate']]: canDeactivate },\n    ]\"\n    :data-test=\"`button-group-${$props.groupName}`\"\n  >\n    <button\n      v-for=\"option in props.options\"\n      :key=\"`${props.groupName}-${option.id}`\"\n      :class=\"[$style.button, { [$style.active]: activeButton?.id === option.id }]\"\n      :data-test=\"`${props.groupName}-button-${activeButton?.id === option.id ? 'active' : 'inactive'}`\"\n      :tabindex=\"0\"\n      :disabled=\"props.disabled\"\n      @click.prevent=\"onClick(option)\"\n    >\n      {{ option.text }}\n    </button>\n  </div>\n</template>\n\n<style module>\n  /* full width buttons */\n  .buttonGroup:global(.w-full) > button {\n    flex: 1 1 50%;\n    max-width: 100%;\n  }\n\n  .button {\n    border: 1px solid var(--color-ice-500);\n    border-radius: 0;\n    font-weight: theme('fontWeight.semibold');\n    line-height: theme('lineHeight.body');\n    min-width: 100px;\n    padding: 7px 8px;\n  }\n\n  .single .button {\n    border: 1px solid var(--color-ice-700);\n    color: var(--color-ice-700);\n  }\n\n  .button:focus,\n  .button:hover {\n    border: 1px solid var(--color-blue-500) !important;\n    color: var(--color-blue-500);\n    z-index: 1;\n  }\n\n  .button.active {\n    background-color: var(--color-blue-100);\n    border: 1px solid var(--color-blue-500) !important;\n    color: var(--color-blue-500);\n    cursor: default;\n    z-index: 1;\n  }\n\n  .button.active + button {\n    border-left: 1px solid transparent;\n  }\n\n  .single .button.active,\n  .can-deactivate .button.active {\n    cursor: pointer;\n  }\n\n  .button[disabled] {\n    color: var(--color-ice-500);\n    cursor: default;\n    pointer-events: none;\n  }\n\n  .button:focus {\n    box-shadow: none;\n    outline: 0;\n  }\n\n  .button:not(:first-child) {\n    margin-left: -1px;\n  }\n\n  .button:not(:last-child) {\n    border-right: 1px solid transparent;\n  }\n\n  .button:first-child {\n    border-bottom-left-radius: theme('borderRadius.DEFAULT');\n    border-top-left-radius: theme('borderRadius.DEFAULT');\n  }\n\n  .button:last-child {\n    border-bottom-right-radius: theme('borderRadius.DEFAULT');\n    border-top-right-radius: theme('borderRadius.DEFAULT');\n  }\n</style>\n"],"names":["isSingleButton","computed","props","canDeactivate","activeButton","ref","o","onClick","clickedOption","_a","emit"],"mappings":";;;uEAMiB;AAAA,EACb,MAAM;AACR;;;;;;;;;;;iBAoDMA,IAAiBC,EAAS,MAAMC,EAAM,QAAQ,WAAW,CAAC,GAE1DC,IAAgBF,EAAS,MAAMC,EAAM,mBAAmBF,EAAe,KAAK,GAE5EI,IAAeC,EAAIH,EAAM,QAAQ,KAAK,CAACI,MAAMA,EAAE,MAAM,KAAK,IAAI;AAEpE,aAASC,EAAQC,GAAkC;;AACjD,MAAIL,EAAc,WAASM,IAAAL,EAAa,UAAb,gBAAAK,EAAoB,QAAOD,EAAc,KAClEJ,EAAa,QAAQ,OAErBA,EAAa,QAAQI,GAGlBE,EAAA,SAASN,EAAa,KAAK;AAAA,IAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Card.js

@@ -1,6 +1,6 @@
 import { defineComponent as w, useSlots as i, openBlock as a, createElementBlock as r, unref as s, normalizeClass as n, createElementVNode as l, renderSlot as o, createCommentVNode as f } from "vue";
 const p = {
-  class: "stash-card tw-border tw-rounded tw-shadow-md tw-inline-block tw-relative tw-bg-white",
+  class: "stash-card tw-relative tw-inline-block tw-rounded tw-border tw-bg-white tw-shadow-md",
   "data-test": "stash-card"
 }, h = /* @__PURE__ */ w({
   __name: "Card",
@@ -13,7 +13,7 @@ const p = {
       s(t)["top-left"] || s(t)["top-right"] ? (a(), r("div", {
         key: 0,
         "data-test": "card-actions",
-        class: n([{ "tw-absolute tw-top-0 tw-w-full": c.detachActions }, "tw-flex tw-justify-between tw-items-start tw-flex-wrap tw-p-6"])
+        class: n([{ "tw-absolute tw-top-0 tw-w-full": c.detachActions }, "tw-flex tw-flex-wrap tw-items-start tw-justify-between tw-p-6"])
       }, [
         l("div", null, [
           o(e.$slots, "top-left")
@@ -23,7 +23,7 @@ const p = {
         ])
       ], 2)) : f("", !0),
       l("div", {
-        class: n({ "tw-flex tw-flex-col tw-gap-y-6 tw-h-full tw-mb-6": s(t).default })
+        class: n({ "tw-mb-6 tw-flex tw-h-full tw-flex-col tw-gap-y-6": s(t).default })
       }, [
         o(e.$slots, "default")
       ], 2)

package/dist/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../src/components/Card/Card.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { useSlots } from 'vue';\n\n  export interface CardProps {\n    /**\n     * Detach the actions from the top of the card, making them absolute-positioned.\n     * @default false\n     */\n    detachActions?: boolean;\n  }\n\n  const props = withDefaults(defineProps<CardProps>(), {\n    detachActions: false,\n  });\n\n  const slots = useSlots();\n</script>\n\n<template>\n  <article\n    class=\"stash-card tw-border tw-rounded tw-shadow-md tw-inline-block tw-relative tw-bg-white\"\n    data-test=\"stash-card\"\n  >\n    <div\n      v-if=\"slots['top-left'] || slots['top-right']\"\n      data-test=\"card-actions\"\n      :class=\"{ 'tw-absolute tw-top-0 tw-w-full': props.detachActions }\"\n      class=\"tw-flex tw-justify-between tw-items-start tw-flex-wrap tw-p-6\"\n    >\n      <div>\n        <!-- @slot Top left actions slot, for rendering content on the card top-left -->\n        <slot name=\"top-left\"></slot>\n      </div>\n      <div>\n        <!-- @slot Top right actions slot, for rendering content on the card top-right -->\n        <slot name=\"top-right\"></slot>\n      </div>\n    </div>\n\n    <div :class=\"{ 'tw-flex tw-flex-col tw-gap-y-6 tw-h-full tw-mb-6': slots['default'] }\">\n      <!-- @slot Default slot, for rendering card subcomponents -->\n      <slot></slot>\n    </div>\n  </article>\n</template>\n"],"names":["slots","useSlots"],"mappings":";;;;;;;;;;iBAeQA,IAAQC;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Card.js","sources":["../src/components/Card/Card.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { useSlots } from 'vue';\n\n  export interface CardProps {\n    /**\n     * Detach the actions from the top of the card, making them absolute-positioned.\n     * @default false\n     */\n    detachActions?: boolean;\n  }\n\n  const props = withDefaults(defineProps<CardProps>(), {\n    detachActions: false,\n  });\n\n  const slots = useSlots();\n</script>\n\n<template>\n  <article\n    class=\"stash-card tw-relative tw-inline-block tw-rounded tw-border tw-bg-white tw-shadow-md\"\n    data-test=\"stash-card\"\n  >\n    <div\n      v-if=\"slots['top-left'] || slots['top-right']\"\n      data-test=\"card-actions\"\n      :class=\"{ 'tw-absolute tw-top-0 tw-w-full': props.detachActions }\"\n      class=\"tw-flex tw-flex-wrap tw-items-start tw-justify-between tw-p-6\"\n    >\n      <div>\n        <!-- @slot Top left actions slot, for rendering content on the card top-left -->\n        <slot name=\"top-left\"></slot>\n      </div>\n      <div>\n        <!-- @slot Top right actions slot, for rendering content on the card top-right -->\n        <slot name=\"top-right\"></slot>\n      </div>\n    </div>\n\n    <div :class=\"{ 'tw-mb-6 tw-flex tw-h-full tw-flex-col tw-gap-y-6': slots['default'] }\">\n      <!-- @slot Default slot, for rendering card subcomponents -->\n      <slot></slot>\n    </div>\n  </article>\n</template>\n"],"names":["slots","useSlots"],"mappings":";;;;;;;;;;iBAeQA,IAAQC;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/CardHeader.js

@@ -1,13 +1,13 @@
 import { defineComponent as r, openBlock as e, createElementBlock as s, createElementVNode as n, toDisplayString as a, createCommentVNode as o } from "vue";
 const d = {
-  class: "stash-card-header tw-px-6 tw-text-ice-900 tw-font-medium",
+  class: "stash-card-header tw-px-6 tw-font-medium tw-text-ice-900",
   "data-test": "stash-card-header"
 }, i = { class: "tw-text-base" }, l = {
   key: 0,
-  class: "tw-mt-1.5 tw-mb-0"
+  class: "tw-mb-0 tw-mt-1.5"
 }, m = {
   key: 1,
-  class: "tw-text-ice-700 tw-mt-1.5"
+  class: "tw-mt-1.5 tw-text-ice-700"
 }, u = /* @__PURE__ */ r({
   __name: "CardHeader",
   props: {

package/dist/CardMedia.js

@@ -18,7 +18,7 @@ const h = {
     return (E, e) => (l(), c("div", h, [
       s.value || o.value ? (l(), c("div", {
         key: 0,
-        class: n([d(r).placeholder, "tw-bg-ice-200 tw-flex tw-items-center tw-justify-center tw-rounded-t tw-w-full"])
+        class: n([d(r).placeholder, "tw-flex tw-w-full tw-items-center tw-justify-center tw-rounded-t tw-bg-ice-200"])
       }, [
         p(w, {
           name: "image",

package/dist/CardMedia.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardMedia.js","sources":["../src/components/CardMedia/CardMedia.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { ref, useCssModule } from 'vue';\n\n  import Icon from '../Icon/Icon.vue';\n\n  export interface CardMediaProps {\n    /**\n     * The image source.\n     */\n    src: string;\n    /**\n     * The image alternative text.\n     */\n    alt?: string;\n  }\n\n  const isLoading = ref(true);\n\n  const hasErrored = ref(false);\n\n  const props = defineProps<CardMediaProps>();\n\n  const classes = useCssModule();\n</script>\n\n<template>\n  <div class=\"stash-card-media\" data-test=\"stash-card-media\">\n    <div\n      v-if=\"isLoading || hasErrored\"\n      :class=\"classes.placeholder\"\n      class=\"tw-bg-ice-200 tw-flex tw-items-center tw-justify-center tw-rounded-t tw-w-full\"\n    >\n      <Icon name=\"image\" :class=\"classes.iconSize\" />\n    </div>\n    <img\n      :src=\"props.src\"\n      class=\"tw-w-full tw-rounded-t\"\n      :alt=\"props.alt\"\n      @load=\"() => (isLoading = false)\"\n      @error=\"() => (hasErrored = true)\"\n    />\n  </div>\n</template>\n\n<style module>\n  .placeholder {\n    height: 300px;\n    width: 100%;\n  }\n\n  .iconSize {\n    width: 189px;\n    height: 189px;\n  }\n</style>\n"],"names":["isLoading","ref","hasErrored","classes","useCssModule"],"mappings":";;;;;;;;;;;;;;;;iBAgBQA,IAAYC,EAAI,EAAI,GAEpBC,IAAaD,EAAI,EAAK,GAItBE,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"CardMedia.js","sources":["../src/components/CardMedia/CardMedia.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { ref, useCssModule } from 'vue';\n\n  import Icon from '../Icon/Icon.vue';\n\n  export interface CardMediaProps {\n    /**\n     * The image source.\n     */\n    src: string;\n    /**\n     * The image alternative text.\n     */\n    alt?: string;\n  }\n\n  const isLoading = ref(true);\n\n  const hasErrored = ref(false);\n\n  const props = defineProps<CardMediaProps>();\n\n  const classes = useCssModule();\n</script>\n\n<template>\n  <div class=\"stash-card-media\" data-test=\"stash-card-media\">\n    <div\n      v-if=\"isLoading || hasErrored\"\n      :class=\"classes.placeholder\"\n      class=\"tw-flex tw-w-full tw-items-center tw-justify-center tw-rounded-t tw-bg-ice-200\"\n    >\n      <Icon name=\"image\" :class=\"classes.iconSize\" />\n    </div>\n    <img\n      :src=\"props.src\"\n      class=\"tw-w-full tw-rounded-t\"\n      :alt=\"props.alt\"\n      @load=\"() => (isLoading = false)\"\n      @error=\"() => (hasErrored = true)\"\n    />\n  </div>\n</template>\n\n<style module>\n  .placeholder {\n    height: 300px;\n    width: 100%;\n  }\n\n  .iconSize {\n    width: 189px;\n    height: 189px;\n  }\n</style>\n"],"names":["isLoading","ref","hasErrored","classes","useCssModule"],"mappings":";;;;;;;;;;;;;;;;iBAgBQA,IAAYC,EAAI,EAAI,GAEpBC,IAAaD,EAAI,EAAK,GAItBE,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;"}