@leaflink/stash 48.21.1 → 49.0.0

package/dist/SelectStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectStatus.js","sources":["../src/components/SelectStatus/SelectStatus.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useAttrs, useCssModule } from 'vue';\n\n  import { StashCommonColor, StashPrimaryColorGroup } from '../../../types';\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n  import Select from '../Select/Select.vue';\n\n  defineOptions({\n    name: 'll-select-status',\n  });\n\n  export type SelectStatusOption = {\n    id: number | string;\n    name: string;\n    color?: StashPrimaryColorGroup | StashCommonColor; // todo: just `StashPrimaryColor`?.\n    icon?: IconName;\n  };\n\n  export interface SelectStatusProps {\n    /**\n     * Disables the component, if true\n     */\n    disabled?: boolean;\n    /**\n     * Which key of the prop option to use for display\n     */\n    displayBy?: string;\n    /**\n     * Sets the background color of the component to the color of the selected option\n     */\n    secondary?: boolean;\n    /**\n     * Allows option text to wrap to next line when set to true\n     */\n    noTruncate?: boolean;\n    /**\n     * Placeholder text\n     */\n    placeholder?: string;\n    /**\n     * The list of all options to select the status from\n     * each object must have the following structure: { id: number | string, name: string, color?: string }\n     */\n    statusOptions: Array<SelectStatusOption>;\n    /**\n     * Default field to track the selected status by\n     */\n    trackBy?: string;\n    /**\n     * Sets the currently-selected option for the component\n     */\n    modelValue: number | string | boolean;\n    /**\n     * @deprecated Use `:model-value` or `v-model` instead of `:value`.\n     */\n    value?: number | string | boolean | null;\n  }\n\n  /**\n   * Array containing the available dark fill colors that need a different text color.\n   */\n  const DARK_FILL_COLORS = ['green', 'teal', 'ice', 'yellow', 'seafoam', 'seafoam-700'];\n\n  const attrs = useAttrs();\n  const classes = useCssModule();\n\n  const props = withDefaults(defineProps<SelectStatusProps>(), {\n    disabled: false,\n    displayBy: 'name',\n    secondary: false,\n    noTruncate: false,\n    placeholder: 'Select Status',\n    trackBy: 'id',\n    value: null,\n  });\n\n  if (props.value) {\n    throw new Error('ll-select-status: use :model-value or v-model instead of :value.');\n  }\n\n  if (attrs.onInput) {\n    throw new Error('ll-select-status: use the @update:model-value event instead of @input');\n  }\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the model value changes\n     */\n    (e: 'update:model-value', value: unknown): void;\n  }>();\n\n  const valueOption = computed(() => {\n    return props.statusOptions.find((status) => status[props.trackBy] === props.modelValue);\n  });\n\n  const hasDarkFill = computed(() => {\n    const { color = '' } = valueOption.value || {};\n    return DARK_FILL_COLORS.includes(color);\n  });\n\n  /**\n   * @param {string} color Valid color name\n   * @return {string} tailwind class for given color\n   */\n  function getBgColor(color: SelectStatusOption['color']): string {\n    // if there's no hyphen then it's a color name and has no shade, so we default to 500\n    return color?.includes('-') ? `tw-bg-${color}` : `tw-bg-${color}-500`;\n  }\n\n  /**\n   * @param {string} color Valid color name\n   * @return {string} tailwind class for given color\n   */\n  function getTextColor(color: SelectStatusOption['color']): string {\n    // if there's no hyphen then it's a color name and has no shade, so we default to 500\n    return color?.includes('-') ? `tw-text-${color}` : `tw-text-${color}-500`;\n  }\n\n  function onSelect(value?: SelectStatusOption): void {\n    emit('update:model-value', value?.[props.trackBy] ?? '');\n  }\n</script>\n\n<template>\n  <Select\n    ref=\"select\"\n    hide-search\n    single\n    :class=\"[\n      classes.select,\n      {\n        'stash-select-status--filled': props.secondary,\n        'stash-select-status--filled-dark': props.secondary && hasDarkFill,\n      },\n    ]\"\n    :disabled=\"props.disabled\"\n    :icon=\"!props.disabled && 'caret-down'\"\n    :options=\"props.statusOptions\"\n    :placeholder=\"props.placeholder\"\n    :track-by=\"props.trackBy\"\n    :model-value=\"valueOption\"\n    data-test=\"stash-select-status\"\n    class=\"stash-select-status\"\n    @update:model-value=\"onSelect\"\n  >\n    <template #selected=\"{ option }\">\n      <div\n        v-if=\"props.secondary\"\n        class=\"stash-select-status--selected tw-absolute tw-inset-0 tw-flex tw-h-full tw-w-full tw-items-center tw-rounded tw-pl-3\"\n        data-test=\"select-status|value\"\n        :class=\"[getBgColor(option.color)]\"\n      >\n        <span class=\"tw-mr-6 tw-truncate\">{{ option[props.displayBy] }}</span>\n      </div>\n\n      <div v-else class=\"tw-flex tw-items-center\" data-test=\"select-status|value\">\n        <Icon\n          data-test=\"select-status|value-icon\"\n          :name=\"option.icon || 'circle-status'\"\n          :class=\"[\n            { [getTextColor(option.color)]: option.color },\n            { 'tw-text-ice-700': !option.color && !option.hexCode },\n          ]\"\n          :style=\"{ color: option.hexCode }\"\n        />\n        <span class=\"tw-ml-1.5 tw-mr-6 tw-truncate\">{{ option[props.displayBy] }}</span>\n      </div>\n    </template>\n\n    <template #option=\"{ option }\">\n      <div class=\"tw-flex tw-min-w-0\">\n        <Icon\n          data-test=\"svg|status-color\"\n          :name=\"option.icon || 'circle-status'\"\n          :class=\"[\n            { [getTextColor(option.color)]: option.color },\n            { 'tw-text-ice-700': !option.color && !option.hexCode },\n          ]\"\n          class=\"!tw-shrink-0\"\n          :style=\"{ color: option.hexCode }\"\n        />\n        <span data-test=\"span|option-text\" class=\"tw-ml-1.5\" :class=\"!props.noTruncate && 'tw-truncate'\">\n          {{ option[props.displayBy] }}\n        </span>\n      </div>\n    </template>\n  </Select>\n</template>\n\n<style module>\n  :global(.stash-select-status--filled .stash-select__content) {\n    border: none;\n    padding: 0;\n  }\n\n  :global(\n      .stash-select-status--filled\n        .stash-select--active\n        .stash-select__content:focus-within\n        .stash-select__border-selector\n    ) {\n    box-sizing: content-box;\n    max-width: calc(100% - 2px);\n  }\n\n  :global(.stash-select-status--filled .stash-select-status--selected),\n  :global(.stash-select-status--filled :has(.stash-select-status--selected) .icon--caret-down) {\n    color: theme('colors.white');\n  }\n\n  :global(.stash-select-status--filled-dark .stash-select-status--selected),\n  :global(.stash-select-status--filled-dark :has(.stash-select-status--selected) .icon--caret-down) {\n    color: var(--color-ice-900);\n  }\n\n  .select :global(.stash-select--disabled > .stash-select__content) {\n    background-color: transparent;\n    border-color: transparent;\n  }\n\n  .select :deep(.stash-select__chips) {\n    margin: 0;\n  }\n\n  .select :global(.stash-select__options) {\n    margin: 0;\n    padding: 0;\n  }\n\n  .select ul {\n    position: relative;\n  }\n</style>\n"],"names":["DARK_FILL_COLORS","attrs","useAttrs","classes","useCssModule","props","__props","emit","__emit","valueOption","computed","status","hasDarkFill","color","getBgColor","getTextColor","onSelect","value"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DE,UAAMA,IAAmB,CAAC,SAAS,QAAQ,OAAO,UAAU,WAAW,aAAa,GAE9EC,IAAQC,KACRC,IAAUC,KAEVC,IAAQC;AAUd,QAAID,EAAM;AACF,YAAA,IAAI,MAAM,kEAAkE;AAGpF,QAAIJ,EAAM;AACF,YAAA,IAAI,MAAM,uEAAuE;AAGzF,UAAMM,IAAOC,GAOPC,IAAcC,EAAS,MACpBL,EAAM,cAAc,KAAK,CAACM,MAAWA,EAAON,EAAM,OAAO,MAAMA,EAAM,UAAU,CACvF,GAEKO,IAAcF,EAAS,MAAM;AACjC,YAAM,EAAE,OAAAG,IAAQ,GAAA,IAAOJ,EAAY,SAAS,CAAA;AACrC,aAAAT,EAAiB,SAASa,CAAK;AAAA,IAAA,CACvC;AAMD,aAASC,EAAWD,GAA4C;AAE9D,aAAOA,KAAA,QAAAA,EAAO,SAAS,OAAO,SAASA,MAAU,SAASA;AAAA,IAC5D;AAMA,aAASE,EAAaF,GAA4C;AAEhE,aAAOA,KAAA,QAAAA,EAAO,SAAS,OAAO,WAAWA,MAAU,WAAWA;AAAA,IAChE;AAEA,aAASG,EAASC,GAAkC;AAClD,MAAAV,EAAK,uBAAsBU,KAAA,gBAAAA,EAAQZ,EAAM,aAAY,EAAE;AAAA,IACzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SelectStatus.js","sources":["../src/components/SelectStatus/SelectStatus.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useAttrs, useCssModule } from 'vue';\n\n  import { StashCommonColor, StashPrimaryColorGroup } from '../../../types';\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n  import Select from '../Select/Select.vue';\n\n  defineOptions({\n    name: 'll-select-status',\n  });\n\n  export type SelectStatusOption = {\n    id: number | string;\n    name: string;\n    color?: StashPrimaryColorGroup | StashCommonColor; // todo: just `StashPrimaryColor`?.\n    icon?: IconName;\n  };\n\n  export interface SelectStatusProps {\n    /**\n     * Disables the component, if true\n     */\n    disabled?: boolean;\n    /**\n     * Which key of the prop option to use for display\n     */\n    displayBy?: string;\n    /**\n     * Sets the background color of the component to the color of the selected option\n     */\n    secondary?: boolean;\n    /**\n     * Allows option text to wrap to next line when set to true\n     */\n    noTruncate?: boolean;\n    /**\n     * Placeholder text\n     */\n    placeholder?: string;\n    /**\n     * The list of all options to select the status from\n     * each object must have the following structure: { id: number | string, name: string, color?: string }\n     */\n    statusOptions: Array<SelectStatusOption>;\n    /**\n     * Default field to track the selected status by\n     */\n    trackBy?: string;\n    /**\n     * Sets the currently-selected option for the component\n     */\n    modelValue: number | string | boolean;\n    /**\n     * @deprecated Use `:model-value` or `v-model` instead of `:value`.\n     */\n    value?: number | string | boolean | null;\n  }\n\n  /**\n   * Array containing the available dark fill colors that need a different text color.\n   */\n  const DARK_FILL_COLORS = ['green', 'teal', 'ice', 'yellow', 'seafoam', 'seafoam-700'];\n\n  const attrs = useAttrs();\n  const classes = useCssModule();\n\n  const props = withDefaults(defineProps<SelectStatusProps>(), {\n    disabled: false,\n    displayBy: 'name',\n    secondary: false,\n    noTruncate: false,\n    placeholder: 'Select Status',\n    trackBy: 'id',\n    value: null,\n  });\n\n  if (props.value) {\n    throw new Error('ll-select-status: use :model-value or v-model instead of :value.');\n  }\n\n  if (attrs.onInput) {\n    throw new Error('ll-select-status: use the @update:model-value event instead of @input');\n  }\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the model value changes\n     */\n    (e: 'update:model-value', value: unknown): void;\n  }>();\n\n  const valueOption = computed(() => {\n    return props.statusOptions.find((status) => status[props.trackBy] === props.modelValue);\n  });\n\n  const hasDarkFill = computed(() => {\n    const { color = '' } = valueOption.value || {};\n    return DARK_FILL_COLORS.includes(color);\n  });\n\n  /**\n   * @param {string} color Valid color name\n   * @return {string} tailwind class for given color\n   */\n  function getBgColor(color: SelectStatusOption['color']): string {\n    // if there's no hyphen then it's a color name and has no shade, so we default to 500\n    return color?.includes('-') ? `tw-bg-${color}` : `tw-bg-${color}-500`;\n  }\n\n  /**\n   * @param {string} color Valid color name\n   * @return {string} tailwind class for given color\n   */\n  function getTextColor(color: SelectStatusOption['color']): string {\n    // if there's no hyphen then it's a color name and has no shade, so we default to 500\n    return color?.includes('-') ? `tw-text-${color}` : `tw-text-${color}-500`;\n  }\n\n  function onSelect(value?: SelectStatusOption): void {\n    emit('update:model-value', value?.[props.trackBy] ?? '');\n  }\n</script>\n\n<template>\n  <Select\n    ref=\"select\"\n    hide-search\n    single\n    :class=\"[\n      classes.select,\n      {\n        'stash-select-status--filled': props.secondary,\n        'stash-select-status--filled-dark': props.secondary && hasDarkFill,\n      },\n    ]\"\n    :disabled=\"props.disabled\"\n    :icon=\"!props.disabled && 'caret-down'\"\n    :options=\"props.statusOptions\"\n    :placeholder=\"props.placeholder\"\n    :track-by=\"props.trackBy\"\n    :model-value=\"valueOption\"\n    data-test=\"stash-select-status\"\n    class=\"stash-select-status\"\n    @update:model-value=\"onSelect\"\n  >\n    <template #selected=\"{ option }\">\n      <div\n        v-if=\"props.secondary\"\n        class=\"stash-select-status--selected tw-absolute tw-inset-0 tw-flex tw-h-full tw-w-full tw-items-center tw-rounded tw-pl-3\"\n        data-test=\"select-status|value\"\n        :class=\"[getBgColor(option.color)]\"\n      >\n        <span class=\"tw-mr-6 tw-truncate\">{{ option[props.displayBy] }}</span>\n      </div>\n\n      <div v-else class=\"tw-flex tw-items-center\" data-test=\"select-status|value\">\n        <Icon\n          data-test=\"select-status|value-icon\"\n          :name=\"option.icon || 'circle-status'\"\n          :class=\"[\n            { [getTextColor(option.color)]: option.color },\n            { 'tw-text-ice-700': !option.color && !option.hexCode },\n          ]\"\n          :style=\"{ color: option.hexCode }\"\n        />\n        <span class=\"tw-ml-1.5 tw-mr-6 tw-truncate\">{{ option[props.displayBy] }}</span>\n      </div>\n    </template>\n\n    <template #option=\"{ option }\">\n      <div class=\"tw-flex tw-min-w-0\">\n        <Icon\n          data-test=\"svg|status-color\"\n          :name=\"option.icon || 'circle-status'\"\n          :class=\"[\n            { [getTextColor(option.color)]: option.color },\n            { 'tw-text-ice-700': !option.color && !option.hexCode },\n          ]\"\n          class=\"!tw-shrink-0\"\n          :style=\"{ color: option.hexCode }\"\n        />\n        <span data-test=\"span|option-text\" class=\"tw-ml-1.5\" :class=\"!props.noTruncate && 'tw-truncate'\">\n          {{ option[props.displayBy] }}\n        </span>\n      </div>\n    </template>\n  </Select>\n</template>\n\n<style module>\n  :global(.stash-select-status--filled .stash-select__content) {\n    border: none;\n    padding: 0;\n  }\n\n  :global(\n      .stash-select-status--filled\n        .stash-select--active\n        .stash-select__content:focus-within\n        .stash-select__border-selector\n    ) {\n    box-sizing: content-box;\n    max-width: calc(100% - 2px);\n  }\n\n  :global(.stash-select-status--filled .stash-select-status--selected),\n  :global(.stash-select-status--filled :has(.stash-select-status--selected) .icon--caret-down) {\n    color: theme('colors.white');\n  }\n\n  :global(.stash-select-status--filled-dark .stash-select-status--selected),\n  :global(.stash-select-status--filled-dark :has(.stash-select-status--selected) .icon--caret-down) {\n    color: var(--color-ice-900);\n  }\n\n  .select :global(.stash-select--disabled > .stash-select__content) {\n    background-color: transparent;\n    border-color: transparent;\n  }\n\n  .select :deep(.stash-select__chips) {\n    margin: 0;\n  }\n\n  .select :global(.stash-select__options) {\n    margin: 0;\n    padding: 0;\n  }\n\n  .select ul {\n    position: relative;\n  }\n</style>\n"],"names":["DARK_FILL_COLORS","attrs","useAttrs","classes","useCssModule","props","__props","emit","__emit","valueOption","computed","status","hasDarkFill","color","getBgColor","getTextColor","onSelect","value"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DE,UAAMA,IAAmB,CAAC,SAAS,QAAQ,OAAO,UAAU,WAAW,aAAa,GAE9EC,IAAQC,KACRC,IAAUC,KAEVC,IAAQC;AAUd,QAAID,EAAM;AACF,YAAA,IAAI,MAAM,kEAAkE;AAGpF,QAAIJ,EAAM;AACF,YAAA,IAAI,MAAM,uEAAuE;AAGzF,UAAMM,IAAOC,GAOPC,IAAcC,EAAS,MACpBL,EAAM,cAAc,KAAK,CAACM,MAAWA,EAAON,EAAM,OAAO,MAAMA,EAAM,UAAU,CACvF,GAEKO,IAAcF,EAAS,MAAM;AACjC,YAAM,EAAE,OAAAG,IAAQ,GAAA,IAAOJ,EAAY,SAAS,CAAA;AACrC,aAAAT,EAAiB,SAASa,CAAK;AAAA,IAAA,CACvC;AAMD,aAASC,EAAWD,GAA4C;AAE9D,aAAOA,KAAA,QAAAA,EAAO,SAAS,OAAO,SAASA,MAAU,SAASA;AAAA,IAC5D;AAMA,aAASE,EAAaF,GAA4C;AAEhE,aAAOA,KAAA,QAAAA,EAAO,SAAS,OAAO,WAAWA,MAAU,WAAWA;AAAA,IAChE;AAEA,aAASG,EAASC,GAAkC;AAClD,MAAAV,EAAK,uBAAsBU,KAAA,gBAAAA,EAAQZ,EAAM,aAAY,EAAE;AAAA,IACzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Tab.js

@@ -10,7 +10,7 @@ import "./constants.js";
 import "./locale.js";
 import "lodash-es/get";
 import "./Dropdown.js";
-import "./clickoutside.js";
+import "./directives/clickoutside.js";
 import "./utils/calculateElementOverflow.js";
 import "./utils/helpers.js";
 import "lodash-es/camelCase";

package/dist/Tabs.js

@@ -8,7 +8,7 @@ import "./constants.js";
 import "./locale.js";
 import "lodash-es/get";
 import "./Dropdown.js";
-import "./clickoutside.js";
+import "./directives/clickoutside.js";
 import "./utils/calculateElementOverflow.js";
 import "./utils/helpers.js";
 import "lodash-es/camelCase";

package/dist/ToastsPlugin.js

@@ -1,5 +1,5 @@
-import { createVNode as a, h as n, render as s } from "vue";
-import i from "./Toasts.js";
+import { createVNode as a, h as s, render as n } from "vue";
+import c from "./Toasts.js";
 import "./useToasts.js";
 import "lodash-es/merge";
 import "lodash-es/uniqueId";
@@ -12,19 +12,17 @@ import "./Icon.js";
 import "./index-9e1095ef.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "./_plugin-vue_export-helper-dad06003.js";
-const o = "stash-toasts-mount-node", L = {
+const o = "stash-toasts-mount-node", D = {
   install(r, t) {
     const m = (t == null ? void 0 : t.mountNodeId) || o;
     let e = document.getElementById(m);
-    if (e)
-      return;
-    e = document.createElement("div"), e.id = m, e.dataset.test = o, t != null && t.mountNodeClass && e.classList.add(t.mountNodeClass);
-    const d = a(n(i));
-    document.body.appendChild(e), d.appContext = r._context, s(d, e);
+    e || (e = document.createElement("div"), e.id = m, e.dataset.test = o, document.body.appendChild(e)), t != null && t.mountNodeClass && !e.classList.contains(t.mountNodeClass) && e.classList.add(t.mountNodeClass);
+    const d = a(s(c));
+    d.appContext = r._context, n(d, e);
   }
 };
 export {
   o as DEFAULT_TOASTS_PLUGIN_NODE_ID,
-  L as default
+  D as default
 };
 //# sourceMappingURL=ToastsPlugin.js.map

package/dist/ToastsPlugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastsPlugin.js","sources":["../src/plugins/ToastsPlugin.ts"],"sourcesContent":["import { App, createVNode, h, Plugin, render } from 'vue';\n\nimport Toasts from '../components/Toasts/Toasts.vue';\n\nexport interface ToastsPluginOptions {\n  mountNodeClass?: string;\n  mountNodeId?: string;\n}\n\nexport const DEFAULT_TOASTS_PLUGIN_NODE_ID = 'stash-toasts-mount-node';\n\nexport default <Plugin>{\n  install(app: App, options?: ToastsPluginOptions) {\n    const mountNodeId = options?.mountNodeId || DEFAULT_TOASTS_PLUGIN_NODE_ID;\n    let mountNode = document.getElementById(mountNodeId);\n\n    // If the mount node already exists, do nothing\n    if (mountNode) {\n      return;\n    }\n\n    mountNode = document.createElement('div');\n    mountNode.id = mountNodeId;\n    mountNode.dataset.test = DEFAULT_TOASTS_PLUGIN_NODE_ID;\n\n    if (options?.mountNodeClass) {\n      mountNode.classList.add(options.mountNodeClass);\n    }\n\n    const vNode = createVNode(h(Toasts));\n    document.body.appendChild(mountNode);\n    vNode.appContext = app._context;\n\n    render(vNode, mountNode);\n  },\n};\n"],"names":["DEFAULT_TOASTS_PLUGIN_NODE_ID","ToastsPlugin","app","options","mountNodeId","mountNode","vNode","createVNode","h","Toasts","render"],"mappings":";;;;;;;;;;;;;;AASO,MAAMA,IAAgC,2BAEtBC,IAAA;AAAA,EACrB,QAAQC,GAAUC,GAA+B;AACzC,UAAAC,KAAcD,KAAA,gBAAAA,EAAS,gBAAeH;AACxC,QAAAK,IAAY,SAAS,eAAeD,CAAW;AAGnD,QAAIC;AACF;AAGU,IAAAA,IAAA,SAAS,cAAc,KAAK,GACxCA,EAAU,KAAKD,GACfC,EAAU,QAAQ,OAAOL,GAErBG,KAAA,QAAAA,EAAS,kBACDE,EAAA,UAAU,IAAIF,EAAQ,cAAc;AAGhD,UAAMG,IAAQC,EAAYC,EAAEC,CAAM,CAAC;AAC1B,aAAA,KAAK,YAAYJ,CAAS,GACnCC,EAAM,aAAaJ,EAAI,UAEvBQ,EAAOJ,GAAOD,CAAS;AAAA,EACzB;AACF;"}
+{"version":3,"file":"ToastsPlugin.js","sources":["../src/plugins/ToastsPlugin.ts"],"sourcesContent":["import { App, createVNode, h, Plugin, render } from 'vue';\n\nimport Toasts from '../components/Toasts/Toasts.vue';\n\nexport interface ToastsPluginOptions {\n  mountNodeClass?: string;\n  mountNodeId?: string;\n}\n\nexport const DEFAULT_TOASTS_PLUGIN_NODE_ID = 'stash-toasts-mount-node';\n\nexport default <Plugin>{\n  install(app: App, options?: ToastsPluginOptions) {\n    const mountNodeId = options?.mountNodeId || DEFAULT_TOASTS_PLUGIN_NODE_ID;\n    let mountNode = document.getElementById(mountNodeId);\n\n    if (!mountNode) {\n      mountNode = document.createElement('div');\n      mountNode.id = mountNodeId;\n      mountNode.dataset.test = DEFAULT_TOASTS_PLUGIN_NODE_ID;\n      document.body.appendChild(mountNode);\n    }\n\n    if (options?.mountNodeClass && !mountNode.classList.contains(options.mountNodeClass)) {\n      mountNode.classList.add(options.mountNodeClass);\n    }\n\n    const vNode = createVNode(h(Toasts));\n    vNode.appContext = app._context;\n\n    render(vNode, mountNode);\n  },\n};\n"],"names":["DEFAULT_TOASTS_PLUGIN_NODE_ID","ToastsPlugin","app","options","mountNodeId","mountNode","vNode","createVNode","h","Toasts","render"],"mappings":";;;;;;;;;;;;;;AASO,MAAMA,IAAgC,2BAEtBC,IAAA;AAAA,EACrB,QAAQC,GAAUC,GAA+B;AACzC,UAAAC,KAAcD,KAAA,gBAAAA,EAAS,gBAAeH;AACxC,QAAAK,IAAY,SAAS,eAAeD,CAAW;AAEnD,IAAKC,MACSA,IAAA,SAAS,cAAc,KAAK,GACxCA,EAAU,KAAKD,GACfC,EAAU,QAAQ,OAAOL,GAChB,SAAA,KAAK,YAAYK,CAAS,IAGjCF,KAAA,QAAAA,EAAS,kBAAkB,CAACE,EAAU,UAAU,SAASF,EAAQ,cAAc,KACvEE,EAAA,UAAU,IAAIF,EAAQ,cAAc;AAGhD,UAAMG,IAAQC,EAAYC,EAAEC,CAAM,CAAC;AACnC,IAAAH,EAAM,aAAaJ,EAAI,UAEvBQ,EAAOJ,GAAOD,CAAS;AAAA,EACzB;AACF;"}

package/dist/Tooltip.js

@@ -0,0 +1,199 @@
+import { getCurrentScope as C, onScopeDispose as D, unref as M, ref as p, watch as $, defineComponent as F, computed as A, openBlock as Y, createElementBlock as P, createElementVNode as X, renderSlot as E, createBlock as j, Teleport as I, normalizeStyle as k, createTextVNode as R, toDisplayString as V } from "vue";
+import { u as z, a as L, f as N, o as G, b as U } from "./floating-ui.vue-8d7f7932.js";
+function q(e) {
+  return C() ? (D(e), !0) : !1;
+}
+function B(e) {
+  return typeof e == "function" ? e() : M(e);
+}
+const J = typeof window < "u" && typeof document < "u";
+typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
+const K = Object.prototype.toString, Q = (e) => K.call(e) === "[object Object]", Z = () => {
+}, W = J ? window : void 0;
+function H(e) {
+  var s;
+  const n = B(e);
+  return (s = n == null ? void 0 : n.$el) != null ? s : n;
+}
+function b(...e) {
+  let s, n, l, i;
+  if (typeof e[0] == "string" || Array.isArray(e[0]) ? ([n, l, i] = e, s = W) : [s, n, l, i] = e, !s)
+    return Z;
+  Array.isArray(n) || (n = [n]), Array.isArray(l) || (l = [l]);
+  const c = [], f = () => {
+    c.forEach((o) => o()), c.length = 0;
+  }, y = (o, r, u, a) => (o.addEventListener(r, u, a), () => o.removeEventListener(r, u, a)), d = $(
+    () => [H(s), B(i)],
+    ([o, r]) => {
+      if (f(), !o)
+        return;
+      const u = Q(r) ? { ...r } : r;
+      c.push(
+        ...n.flatMap((a) => l.map((m) => y(o, a, m, u)))
+      );
+    },
+    { immediate: !0, flush: "post" }
+  ), w = () => {
+    d(), f();
+  };
+  return q(w), w;
+}
+const ee = {
+  page: (e) => [e.pageX, e.pageY],
+  client: (e) => [e.clientX, e.clientY],
+  screen: (e) => [e.screenX, e.screenY],
+  movement: (e) => e instanceof Touch ? null : [e.movementX, e.movementY]
+};
+function te(e = {}) {
+  const {
+    type: s = "page",
+    touch: n = !0,
+    resetOnTouchEnds: l = !1,
+    initialValue: i = { x: 0, y: 0 },
+    window: c = W,
+    target: f = c,
+    scroll: y = !0,
+    eventFilter: d
+  } = e;
+  let w = null;
+  const o = p(i.x), r = p(i.y), u = p(null), a = typeof s == "function" ? s : ee[s], m = (t) => {
+    const h = a(t);
+    w = t, h && ([o.value, r.value] = h, u.value = "mouse");
+  }, v = (t) => {
+    if (t.touches.length > 0) {
+      const h = a(t.touches[0]);
+      h && ([o.value, r.value] = h, u.value = "touch");
+    }
+  }, g = () => {
+    if (!w || !c)
+      return;
+    const t = a(w);
+    w instanceof MouseEvent && t && (o.value = t[0] + c.scrollX, r.value = t[1] + c.scrollY);
+  }, x = () => {
+    o.value = i.x, r.value = i.y;
+  }, S = d ? (t) => d(() => m(t), {}) : (t) => m(t), O = d ? (t) => d(() => v(t), {}) : (t) => v(t), _ = d ? () => d(() => g(), {}) : () => g();
+  if (f) {
+    const t = { passive: !0 };
+    b(f, ["mousemove", "dragover"], S, t), n && s !== "movement" && (b(f, ["touchstart", "touchmove"], O, t), l && b(f, "touchend", x, t)), y && s === "page" && b(c, "scroll", _, { passive: !0 });
+  }
+  return {
+    x: o,
+    y: r,
+    sourceType: u
+  };
+}
+function oe(e, s = {}) {
+  const {
+    handleOutside: n = !0,
+    window: l = W
+  } = s, i = s.type || "page", { x: c, y: f, sourceType: y } = te(s), d = p(e ?? (l == null ? void 0 : l.document.body)), w = p(0), o = p(0), r = p(0), u = p(0), a = p(0), m = p(0), v = p(!0);
+  let g = () => {
+  };
+  return l && (g = $(
+    [d, c, f],
+    () => {
+      const x = H(d);
+      if (!x || !(x instanceof Element))
+        return;
+      const {
+        left: S,
+        top: O,
+        width: _,
+        height: t
+      } = x.getBoundingClientRect();
+      r.value = S + (i === "page" ? l.pageXOffset : 0), u.value = O + (i === "page" ? l.pageYOffset : 0), a.value = t, m.value = _;
+      const h = c.value - r.value, T = f.value - u.value;
+      v.value = _ === 0 || t === 0 || h < 0 || T < 0 || h > _ || T > t, (n || !v.value) && (w.value = h, o.value = T);
+    },
+    { immediate: !0 }
+  ), b(document, "mouseleave", () => {
+    v.value = !0;
+  })), {
+    x: c,
+    y: f,
+    sourceType: y,
+    elementX: w,
+    elementY: o,
+    elementPositionX: r,
+    elementPositionY: u,
+    elementHeight: a,
+    elementWidth: m,
+    isOutside: v,
+    stop: g
+  };
+}
+const ne = {
+  ref: "wrapper",
+  class: "stash-tooltip__wrapper tw-relative tw-inline-flex tw-h-fit tw-w-fit"
+}, se = 6, le = 12, ce = /* @__PURE__ */ F({
+  __name: "Tooltip",
+  props: {
+    disableTeleport: { type: Boolean, default: !1 },
+    side: { default: "top" },
+    isOpen: { type: Boolean, default: !1 },
+    teleportTo: { default: "#stash-menus-mount-node" },
+    text: { default: "" }
+  },
+  setup(e) {
+    const s = {
+      top: "bottom",
+      right: "left",
+      bottom: "top",
+      left: "right"
+    }, n = e, l = p(null), i = p(null), c = p(null), { isOutside: f } = oe(l), y = A(() => !f.value || n.isOpen), d = A(() => n.side), { floatingStyles: w, middlewareData: o, placement: r } = z(l, c, {
+      whileElementsMounted: L,
+      placement: d,
+      middleware: [N(), G(le), U({ element: i })]
+    }), u = A(() => {
+      var m, v;
+      const a = s[r.value];
+      return {
+        left: ((m = o.value.arrow) == null ? void 0 : m.x) != null ? `${o.value.arrow.x}px` : "",
+        top: ((v = o.value.arrow) == null ? void 0 : v.y) != null ? `${o.value.arrow.y}px` : "",
+        [a]: `-${se}px`
+      };
+    });
+    return (a, m) => (Y(), P("div", ne, [
+      X("span", {
+        ref_key: "anchor",
+        ref: l,
+        "data-test": "stash-tooltip|anchor",
+        class: "stash-tooltip__anchor"
+      }, [
+        E(a.$slots, "default")
+      ], 512),
+      (Y(), j(I, {
+        to: n.teleportTo,
+        disabled: n.disableTeleport
+      }, [
+        X("div", {
+          ref_key: "tooltip",
+          ref: c,
+          "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: k({
+            ...M(w),
+            opacity: y.value ? 0.95 : 0
+          })
+        }, [
+          E(a.$slots, "icon"),
+          E(a.$slots, "content", {}, () => [
+            R(V(n.text), 1)
+          ]),
+          E(a.$slots, "secondaryIcon"),
+          X("div", {
+            ref_key: "floatingArrow",
+            ref: i,
+            class: "stash-tooltip__arrow tw-absolute tw-z-behind tw-h-[12px] tw-w-[12px] tw-rotate-45 tw-bg-ice-900",
+            style: k(u.value)
+          }, null, 4)
+        ], 4)
+      ], 8, ["to", "disabled"]))
+    ], 512));
+  }
+});
+export {
+  ce as default
+};
+//# sourceMappingURL=Tooltip.js.map