@leaflink/stash 44.0.0-beta.6 → 44.0.0-beta.8

package/dist/TableRow.js

@@ -1,23 +1,23 @@
-import { defineComponent as A, useAttrs as D, useCssModule as M, useSlots as V, inject as j, ref as P, computed as g, watch as q, openBlock as p, createElementBlock as k, Fragment as z, createElementVNode as F, mergeProps as y, unref as e, createBlock as C, normalizeClass as c, withCtx as m, createVNode as w, createCommentVNode as x, renderSlot as S } from "vue";
+import { defineComponent as A, useAttrs as D, useCssModule as M, useSlots as V, inject as j, ref as P, computed as k, watch as q, openBlock as c, createElementBlock as g, Fragment as z, createElementVNode as F, mergeProps as y, unref as e, createBlock as C, normalizeClass as p, withCtx as m, createVNode as w, createCommentVNode as x, renderSlot as S } from "vue";
 import J from "lodash-es/uniqueId";
-import { t as f } from "./locale.js";
+import { t as b } from "./locale.js";
 import L from "./Checkbox.js";
 import { _ as O } from "./ChevronToggle.vue_vue_type_script_setup_true_lang-1591294c.js";
-import { _ as U } from "./Expand.vue_vue_type_script_setup_true_lang-5fe03d51.js";
+import { _ as U } from "./Expand.vue_vue_type_script_setup_true_lang-1751f4a6.js";
 import "lodash-es/cloneDeep";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-import "./Paginate.vue_used_vue_type_style_index_0_lang.module-1a2084f9.js";
+import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
 import "./DataView.vue_used_vue_type_style_index_0_lang.module-d878ca9a.js";
 import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js";
-import "./Loading.vue_vue_type_style_index_0_scoped_bb8d5f15_lang-4ed993c7.js";
+import "./Loading.vue_used_vue_type_style_index_0_lang.module-ef5a3bc6.js";
 import T from "./TableCell.js";
-import { T as G, a as H } from "./Table.keys-1ebe4ecb.js";
+import { T as G, a as H } from "./Table.keys-cf93df19.js";
 import { _ as K } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/get";
 import "@leaflink/snitch";
-import "./Checkbox.vue_vue_type_style_index_0_scoped_dbd26d7f_lang-4ed993c7.js";
+import "./Checkbox.vue_used_vue_type_style_index_0_lang.module-fa8d9c06.js";
 import "./Button.js";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-b2ee90e6.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js";
 import "./Icon.js";
 import "./index-79ce320f.js";
 const Q = /* @__PURE__ */ A({
@@ -30,93 +30,94 @@ const Q = /* @__PURE__ */ A({
     isSelectDisabled: { type: Boolean, default: !1 }
   },
   emits: ["update:isSelected", "update:isExpanded"],
-  setup(B, { emit: b }) {
+  setup(B, { emit: f }) {
     const n = B, h = D(), t = M(), i = V(), E = j(G.key);
     if (!E)
       throw new Error("TableRow must be used within a Table component");
-    const { hasActions: R, hasCustomExpandToggle: v, isExpandable: $, isSelectable: u, layout: r } = E, a = P(n.isExpanded), s = g(() => $ && !!i.expansion), I = g(() => {
-      var l;
-      let o = ((l = i.default) == null ? void 0 : l.call(i, { toggleExpand: d }).length) ?? 0;
-      return u.value && (o += 1), s.value && !v.value && (o += 1), o;
+    const { hasActions: R, hasCustomExpandToggle: v, isExpandable: $, isSelectable: u, layout: r } = E, o = P(n.isExpanded), l = k(() => $ && !!i.expansion), I = k(() => {
+      var s;
+      let a = ((s = i.default) == null ? void 0 : s.call(i, { toggleExpand: d }).length) ?? 0;
+      return u.value && (a += 1), l.value && !v.value && (a += 1), a;
     }), _ = J("table-row-");
-    function d(o) {
-      if (!s.value)
+    function d(a) {
+      if (!l.value)
         throw new Error("Cannot call `toggleExpand` on a non-expandable row. Provide an `expansion` slot.");
-      const l = typeof o == "boolean" ? o : !a.value;
-      a.value = l, b("update:isExpanded", l);
+      const s = typeof a == "boolean" ? a : !o.value;
+      o.value = s, f("update:isExpanded", s);
     }
     return q(
       () => n.isExpanded,
       () => d(n.isExpanded)
-    ), (o, l) => (p(), k(z, null, [
+    ), (a, s) => (c(), g(z, null, [
       F("tr", y({
         class: ["stash-table-row", [
           e(t).root,
           e(t)[`layout--${e(r)}`],
           {
-            [e(t)["is-expandable"]]: s.value,
-            [e(t)["is-expanded"]]: a.value,
-            [e(t)["root--hidden-divider"]]: o.hideExpansionDivider,
+            [e(t)["is-expandable"]]: l.value,
+            [e(t)["is-expanded"]]: o.value,
+            [e(t)["root--hidden-divider"]]: a.hideExpansionDivider,
             "tw-p-gutter": e(r) === "stack",
-            "tw-mb-6 tw-shadow lg:tw-mb-0 lg:tw-shadow-none": e(r) === "stack" && !s.value,
+            "tw-mb-6 tw-shadow lg:tw-mb-0 lg:tw-shadow-none": e(r) === "stack" && !l.value,
             "tw-pt-[60px]": e(R) && e(r) === "stack" && !e(u)
           }
         ]],
         "data-test": "stash-table-row"
       }, e(h)), [
-        e(u) ? (p(), C(T, {
+        e(u) ? (c(), C(T, {
           key: 0,
           "is-control": "",
-          class: c(["stash-table-row__selection-cell tw-min-w-[48px]", e(t)["row-control-cell"]])
+          class: p(["stash-table-row__selection-cell tw-min-w-[48px]", e(t)["row-control-cell"]]),
+          "data-test": "stash-table-row|selection-cell"
         }, {
           default: m(() => [
             w(L, {
-              class: c(e(t)["row-selection-checkbox"]),
+              class: p(e(t)["row-selection-checkbox"]),
               checked: n.isSelected,
               disabled: n.isSelectDisabled,
-              title: e(f)("ll.select.self"),
-              "onUpdate:checked": l[0] || (l[0] = (N) => b("update:isSelected", N))
+              title: e(b)("ll.select.self"),
+              "onUpdate:checked": s[0] || (s[0] = (N) => f("update:isSelected", N))
             }, null, 8, ["class", "checked", "disabled", "title"])
           ]),
           _: 1
         }, 8, ["class"])) : x("", !0),
-        s.value && !e(v) ? (p(), C(T, {
+        l.value && !e(v) ? (c(), C(T, {
           key: 1,
-          class: c(["row-toggle-expansion-cell tw-px-0", e(t)["row-control-cell"]]),
-          "data-test": "table-row-toggle-expansion-cell",
+          class: p(["stash-table-row__toggle-expansion-cell tw-px-0", e(t)["row-control-cell"]]),
+          "data-test": "stash-table-row|custom-expansion-cell",
           "is-control": ""
         }, {
           default: m(() => [
             w(O, {
               "aria-controls": e(_),
-              "aria-label": a.value ? e(f)("ll.table.collapseRow") : e(f)("ll.table.expandRow"),
-              direction: a.value ? "up" : "down",
-              "is-expanded": a.value,
+              "aria-label": o.value ? e(b)("ll.table.collapseRow") : e(b)("ll.table.expandRow"),
+              direction: o.value ? "up" : "down",
+              "is-expanded": o.value,
               onClick: d
             }, null, 8, ["aria-controls", "aria-label", "direction", "is-expanded"])
           ]),
           _: 1
         }, 8, ["class"])) : x("", !0),
-        S(o.$slots, "default", {
-          isRowExpanded: a.value,
+        S(a.$slots, "default", {
+          isRowExpanded: o.value,
           toggleExpand: d
         })
       ], 16),
-      s.value ? (p(), k("tr", y({
+      l.value ? (c(), g("tr", y({
         key: 0,
-        class: ["stash-table-row stash-table-row-expansion", e(t)["row-expansion"]],
+        class: ["stash-table-row stash-table-row--expandable", e(t)["row-expansion"]],
         "data-test": "stash-table-row"
       }, e(h)), [
         w(U, {
           is: "td",
           id: e(_),
-          class: c(["tw-border-none tw-bg-white tw-px-3 tw-py-0", e(t)["row-expansion-content"]]),
-          "data-test": "table-row-expansion-cell",
+          class: p(["tw-border-none tw-bg-white tw-px-3 tw-py-0", e(t)["row-expansion-content"]]),
+          "data-test": "stash-table-row|expansion-cell",
           colspan: I.value,
-          "is-expanded": a.value
+          "is-expanded": o.value
         }, {
           default: m(() => [
-            S(o.$slots, "expansion")
+            S(a.$slots, "expansion")
           ]),
           _: 3
         }, 8, ["id", "class", "colspan", "is-expanded"])

package/dist/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","sources":["../src/components/TableRow/TableRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, inject, ref, useAttrs, useCssModule, useSlots, watch } from 'vue';\n\n  import { t } from '../../locale';\n  import Checkbox, { CheckboxProps } from '../Checkbox/Checkbox.vue';\n  import ChevronToggle from '../ChevronToggle/ChevronToggle.vue';\n  import Expand from '../Expand/Expand.vue';\n  import { TABLE_INJECTION } from '../Table/Table.vue';\n  import TableCell from '../TableCell/TableCell.vue';\n\n  defineOptions({ inheritAttrs: false });\n\n  export interface TableRowProps {\n    hideExpansionDivider?: boolean;\n    isExpanded?: boolean;\n    isSelected?: boolean;\n    isSelectDisabled?: boolean;\n  }\n\n  const props = withDefaults(defineProps<TableRowProps>(), {\n    /**\n     * If true, hides the divider between the parent row and expansion row\n     */\n    hideExpansionDivider: false,\n    isExpanded: false,\n    isSelected: false,\n    isSelectDisabled: false,\n  });\n\n  const emit =\n    defineEmits<{\n      'update:isSelected': [isChecked: CheckboxProps['checked']];\n      'update:isExpanded': [isExpanded: boolean];\n    }>();\n\n  const attrs = useAttrs();\n  const classes = useCssModule();\n  const slots = useSlots();\n\n  const tableInjection = inject(TABLE_INJECTION.key);\n\n  if (!tableInjection) {\n    throw new Error('TableRow must be used within a Table component');\n  }\n\n  const { hasActions, hasCustomExpandToggle, isExpandable, isSelectable, layout } = tableInjection;\n\n  const isRowExpanded = ref(props.isExpanded);\n  const isRowExpandable = computed(() => isExpandable && !!slots.expansion);\n\n  const childCellCount = computed(() => {\n    let count = slots.default?.({ toggleExpand }).length ?? 0;\n\n    if (isSelectable.value) {\n      count += 1;\n    }\n\n    if (isRowExpandable.value && !hasCustomExpandToggle.value) {\n      count += 1;\n    }\n\n    return count;\n  });\n  const rowId = uniqueId('table-row-');\n\n  function toggleExpand(value?: boolean) {\n    if (!isRowExpandable.value) {\n      throw new Error('Cannot call `toggleExpand` on a non-expandable row. Provide an `expansion` slot.');\n    }\n\n    const isExpanded = typeof value === 'boolean' ? value : !isRowExpanded.value;\n\n    isRowExpanded.value = isExpanded;\n    emit('update:isExpanded', isExpanded);\n  }\n\n  watch(\n    () => props.isExpanded,\n    () => toggleExpand(props.isExpanded),\n  );\n</script>\n\n<template>\n  <tr\n    class=\"stash-table-row\"\n    :class=\"[\n      classes.root,\n      classes[`layout--${layout}`],\n      {\n        [classes['is-expandable']]: isRowExpandable,\n        [classes['is-expanded']]: isRowExpanded,\n        [classes['root--hidden-divider']]: hideExpansionDivider,\n        'tw-p-gutter': layout === 'stack',\n        'tw-mb-6 tw-shadow lg:tw-mb-0 lg:tw-shadow-none': layout === 'stack' && !isRowExpandable,\n        'tw-pt-[60px]': hasActions && layout === 'stack' && !isSelectable,\n      },\n    ]\"\n    data-test=\"stash-table-row\"\n    v-bind=\"attrs\"\n  >\n    <TableCell\n      v-if=\"isSelectable\"\n      is-control\n      class=\"stash-table-row__selection-cell tw-min-w-[48px]\"\n      :class=\"classes['row-control-cell']\"\n    >\n      <Checkbox\n        :class=\"classes['row-selection-checkbox']\"\n        :checked=\"props.isSelected\"\n        :disabled=\"props.isSelectDisabled\"\n        :title=\"t('ll.select.self')\"\n        @update:checked=\"emit('update:isSelected', $event)\"\n      />\n    </TableCell>\n    <TableCell\n      v-if=\"isRowExpandable && !hasCustomExpandToggle\"\n      class=\"row-toggle-expansion-cell tw-px-0\"\n      data-test=\"table-row-toggle-expansion-cell\"\n      is-control\n      :class=\"classes['row-control-cell']\"\n    >\n      <ChevronToggle\n        :aria-controls=\"rowId\"\n        :aria-label=\"isRowExpanded ? t('ll.table.collapseRow') : t('ll.table.expandRow')\"\n        :direction=\"isRowExpanded ? 'up' : 'down'\"\n        :is-expanded=\"isRowExpanded\"\n        @click=\"toggleExpand\"\n      />\n    </TableCell>\n    <!-- @slot default -->\n    <slot :is-row-expanded=\"isRowExpanded\" :toggle-expand=\"toggleExpand\"></slot>\n  </tr>\n  <tr\n    v-if=\"isRowExpandable\"\n    class=\"stash-table-row stash-table-row-expansion\"\n    :class=\"classes['row-expansion']\"\n    data-test=\"stash-table-row\"\n    v-bind=\"attrs\"\n  >\n    <Expand\n      is=\"td\"\n      :id=\"rowId\"\n      class=\"tw-border-none tw-bg-white tw-px-3 tw-py-0\"\n      data-test=\"table-row-expansion-cell\"\n      :class=\"classes['row-expansion-content']\"\n      :colspan=\"childCellCount\"\n      :is-expanded=\"isRowExpanded\"\n    >\n      <!-- @slot expansion, for expandable content -->\n      <slot name=\"expansion\"></slot>\n    </Expand>\n  </tr>\n</template>\n\n<style module>\n  .root {\n    border: 0;\n  }\n\n  /**\n   * Only takes effect when hideExpansionDivider is true, for a softer collapse transition as the bottom border re-appears\n   */\n  .is-expandable > td {\n    border-bottom-color: var(--color-ice-200);\n    transition: border-bottom-color 0.5s;\n  }\n\n  .root--hidden-divider.is-expanded > td {\n    transition: border-bottom-color 0s;\n    /**\n     * Removes the grey cell background for 'control' cells at lower breakpoints, letting the white of the tr come through.\n     */\n    border-bottom-color: transparent;\n  }\n\n  .layout--scroll {\n    border-radius: 0;\n    box-shadow: none !important;\n    margin: 0;\n  }\n\n  .layout--scroll:last-of-type {\n    border: 0;\n  }\n\n  .layout--scroll:last-of-type td {\n    border-bottom: none;\n  }\n\n  .layout--stack {\n    align-items: stretch;\n    background-color: var(--color-white);\n    column-gap: var(--grid-gutter);\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n    position: relative;\n    row-gap: var(--grid-gutter);\n  }\n\n  .layout--stack:not(.is-expanded) {\n    border-radius: var(--border-radius);\n    transition: border-radius 0.5s;\n  }\n\n  .layout--stack.is-expanded {\n    border-top-left-radius: var(--border-radius);\n    border-top-right-radius: var(--border-radius);\n  }\n\n  .row-selection-checkbox label {\n    padding: 0;\n    min-height: var(--ll-space-3);\n    vertical-align: middle;\n  }\n\n  .layout--stack .row-control-cell {\n    display: flex;\n    align-items: center;\n    min-width: 0;\n  }\n\n  /* On mobile, display controls on their own row, pushing other cells below */\n  .row-control-cell + :not(.row-control-cell) {\n    grid-column-start: 1;\n  }\n\n  .row-expansion-content {\n    box-shadow: inset 0 -1px 0 0 var(--color-ice-200);\n  }\n\n  .layout--stack + .row-expansion,\n  .layout--stack + .row-expansion > .row-expansion-content {\n    display: block;\n  }\n\n  .layout--stack + .row-expansion > .row-expansion-content {\n    border-top: 1px solid var(--color-ice-200);\n    border-bottom-left-radius: var(--border-radius);\n    border-bottom-right-radius: var(--border-radius);\n    margin-bottom: var(--ll-space-3);\n  }\n\n  .layout--stack.root--hidden-divider + .row-expansion > .row-expansion-content {\n    border-top: none;\n  }\n\n  /* On large screens, match the styles for layout-SCROLL */\n  @media screen(lg) {\n    .layout--stack {\n      align-items: unset;\n      background-color: unset;\n      border: 0;\n      border-bottom: 1px solid var(--color-ice-200);\n      border-radius: 0;\n      box-shadow: none;\n      column-gap: unset;\n      display: table-row;\n      grid-template-columns: unset;\n      row-gap: unset;\n    }\n\n    .layout--stack:last-of-type {\n      border-bottom: 0;\n    }\n\n    .layout--stack .row-control-cell {\n      display: table-cell;\n    }\n\n    .layout--stack + .row-expansion {\n      display: table-row;\n    }\n\n    .layout--stack + .row-expansion > .row-expansion-content {\n      border-top: unset;\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n      display: table-cell;\n      margin-bottom: unset;\n    }\n\n    .row-control-cell + :not(.row-control-cell) {\n      grid-column-start: unset;\n    }\n  }\n</style>\n"],"names":["attrs","useAttrs","classes","useCssModule","slots","useSlots","tableInjection","inject","TABLE_INJECTION","hasActions","hasCustomExpandToggle","isExpandable","isSelectable","layout","isRowExpanded","ref","props","isRowExpandable","computed","childCellCount","count","_a","toggleExpand","rowId","uniqueId","value","isExpanded","emit","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAoCQA,IAAQC,KACRC,IAAUC,KACVC,IAAQC,KAERC,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,gDAAgD;AAGlE,UAAM,EAAE,YAAAG,GAAY,uBAAAC,GAAuB,cAAAC,GAAc,cAAAC,GAAc,QAAAC,EAAW,IAAAP,GAE5EQ,IAAgBC,EAAIC,EAAM,UAAU,GACpCC,IAAkBC,EAAS,MAAMP,KAAgB,CAAC,CAACP,EAAM,SAAS,GAElEe,IAAiBD,EAAS,MAAM;;AACpC,UAAIE,MAAQC,IAAAjB,EAAM,YAAN,gBAAAiB,EAAA,KAAAjB,GAAgB,EAAE,cAAAkB,KAAgB,WAAU;AAExD,aAAIV,EAAa,UACNQ,KAAA,IAGPH,EAAgB,SAAS,CAACP,EAAsB,UACzCU,KAAA,IAGJA;AAAA,IAAA,CACR,GACKG,IAAQC,EAAS,YAAY;AAEnC,aAASF,EAAaG,GAAiB;AACjC,UAAA,CAACR,EAAgB;AACb,cAAA,IAAI,MAAM,kFAAkF;AAGpG,YAAMS,IAAa,OAAOD,KAAU,YAAYA,IAAQ,CAACX,EAAc;AAEvE,MAAAA,EAAc,QAAQY,GACtBC,EAAK,qBAAqBD,CAAU;AAAA,IACtC;AAEA,WAAAE;AAAA,MACE,MAAMZ,EAAM;AAAA,MACZ,MAAMM,EAAaN,EAAM,UAAU;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"TableRow.js","sources":["../src/components/TableRow/TableRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, inject, ref, useAttrs, useCssModule, useSlots, watch } from 'vue';\n\n  import { t } from '../../locale';\n  import Checkbox, { CheckboxProps } from '../Checkbox/Checkbox.vue';\n  import ChevronToggle from '../ChevronToggle/ChevronToggle.vue';\n  import Expand from '../Expand/Expand.vue';\n  import { TABLE_INJECTION } from '../Table/Table.vue';\n  import TableCell from '../TableCell/TableCell.vue';\n\n  defineOptions({ inheritAttrs: false });\n\n  export interface TableRowProps {\n    hideExpansionDivider?: boolean;\n    isExpanded?: boolean;\n    isSelected?: boolean;\n    isSelectDisabled?: boolean;\n  }\n\n  const props = withDefaults(defineProps<TableRowProps>(), {\n    /**\n     * If true, hides the divider between the parent row and expansion row\n     */\n    hideExpansionDivider: false,\n    isExpanded: false,\n    isSelected: false,\n    isSelectDisabled: false,\n  });\n\n  const emit =\n    defineEmits<{\n      'update:isSelected': [isChecked: CheckboxProps['checked']];\n      'update:isExpanded': [isExpanded: boolean];\n    }>();\n\n  const attrs = useAttrs();\n  const classes = useCssModule();\n  const slots = useSlots();\n\n  const tableInjection = inject(TABLE_INJECTION.key);\n\n  if (!tableInjection) {\n    throw new Error('TableRow must be used within a Table component');\n  }\n\n  const { hasActions, hasCustomExpandToggle, isExpandable, isSelectable, layout } = tableInjection;\n\n  const isRowExpanded = ref(props.isExpanded);\n  const isRowExpandable = computed(() => isExpandable && !!slots.expansion);\n\n  const childCellCount = computed(() => {\n    let count = slots.default?.({ toggleExpand }).length ?? 0;\n\n    if (isSelectable.value) {\n      count += 1;\n    }\n\n    if (isRowExpandable.value && !hasCustomExpandToggle.value) {\n      count += 1;\n    }\n\n    return count;\n  });\n  const rowId = uniqueId('table-row-');\n\n  function toggleExpand(value?: boolean) {\n    if (!isRowExpandable.value) {\n      throw new Error('Cannot call `toggleExpand` on a non-expandable row. Provide an `expansion` slot.');\n    }\n\n    const isExpanded = typeof value === 'boolean' ? value : !isRowExpanded.value;\n\n    isRowExpanded.value = isExpanded;\n    emit('update:isExpanded', isExpanded);\n  }\n\n  watch(\n    () => props.isExpanded,\n    () => toggleExpand(props.isExpanded),\n  );\n</script>\n\n<template>\n  <tr\n    class=\"stash-table-row\"\n    :class=\"[\n      classes.root,\n      classes[`layout--${layout}`],\n      {\n        [classes['is-expandable']]: isRowExpandable,\n        [classes['is-expanded']]: isRowExpanded,\n        [classes['root--hidden-divider']]: hideExpansionDivider,\n        'tw-p-gutter': layout === 'stack',\n        'tw-mb-6 tw-shadow lg:tw-mb-0 lg:tw-shadow-none': layout === 'stack' && !isRowExpandable,\n        'tw-pt-[60px]': hasActions && layout === 'stack' && !isSelectable,\n      },\n    ]\"\n    data-test=\"stash-table-row\"\n    v-bind=\"attrs\"\n  >\n    <TableCell\n      v-if=\"isSelectable\"\n      is-control\n      class=\"stash-table-row__selection-cell tw-min-w-[48px]\"\n      :class=\"classes['row-control-cell']\"\n      data-test=\"stash-table-row|selection-cell\"\n    >\n      <Checkbox\n        :class=\"classes['row-selection-checkbox']\"\n        :checked=\"props.isSelected\"\n        :disabled=\"props.isSelectDisabled\"\n        :title=\"t('ll.select.self')\"\n        @update:checked=\"emit('update:isSelected', $event)\"\n      />\n    </TableCell>\n    <TableCell\n      v-if=\"isRowExpandable && !hasCustomExpandToggle\"\n      class=\"stash-table-row__toggle-expansion-cell tw-px-0\"\n      data-test=\"stash-table-row|custom-expansion-cell\"\n      is-control\n      :class=\"classes['row-control-cell']\"\n    >\n      <ChevronToggle\n        :aria-controls=\"rowId\"\n        :aria-label=\"isRowExpanded ? t('ll.table.collapseRow') : t('ll.table.expandRow')\"\n        :direction=\"isRowExpanded ? 'up' : 'down'\"\n        :is-expanded=\"isRowExpanded\"\n        @click=\"toggleExpand\"\n      />\n    </TableCell>\n    <!-- @slot default -->\n    <slot :is-row-expanded=\"isRowExpanded\" :toggle-expand=\"toggleExpand\"></slot>\n  </tr>\n  <tr\n    v-if=\"isRowExpandable\"\n    class=\"stash-table-row stash-table-row--expandable\"\n    :class=\"classes['row-expansion']\"\n    data-test=\"stash-table-row\"\n    v-bind=\"attrs\"\n  >\n    <Expand\n      is=\"td\"\n      :id=\"rowId\"\n      class=\"tw-border-none tw-bg-white tw-px-3 tw-py-0\"\n      data-test=\"stash-table-row|expansion-cell\"\n      :class=\"classes['row-expansion-content']\"\n      :colspan=\"childCellCount\"\n      :is-expanded=\"isRowExpanded\"\n    >\n      <!-- @slot expansion, for expandable content -->\n      <slot name=\"expansion\"></slot>\n    </Expand>\n  </tr>\n</template>\n\n<style module>\n  .root {\n    border: 0;\n  }\n\n  /**\n   * Only takes effect when hideExpansionDivider is true, for a softer collapse transition as the bottom border re-appears\n   */\n  .is-expandable > td {\n    border-bottom-color: var(--color-ice-200);\n    transition: border-bottom-color 0.5s;\n  }\n\n  .root--hidden-divider.is-expanded > td {\n    transition: border-bottom-color 0s;\n    /**\n     * Removes the grey cell background for 'control' cells at lower breakpoints, letting the white of the tr come through.\n     */\n    border-bottom-color: transparent;\n  }\n\n  .layout--scroll {\n    border-radius: 0;\n    box-shadow: none !important;\n    margin: 0;\n  }\n\n  .layout--scroll:last-of-type {\n    border: 0;\n  }\n\n  .layout--scroll:last-of-type td {\n    border-bottom: none;\n  }\n\n  .layout--stack {\n    align-items: stretch;\n    background-color: var(--color-white);\n    column-gap: var(--grid-gutter);\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n    position: relative;\n    row-gap: var(--grid-gutter);\n  }\n\n  .layout--stack:not(.is-expanded) {\n    border-radius: theme('borderRadius.DEFAULT');\n    transition: border-radius 0.5s;\n  }\n\n  .layout--stack.is-expanded {\n    border-top-left-radius: theme('borderRadius.DEFAULT');\n    border-top-right-radius: theme('borderRadius.DEFAULT');\n  }\n\n  .row-selection-checkbox label {\n    padding: 0;\n    min-height: theme('spacing.6');\n    vertical-align: middle;\n  }\n\n  .layout--stack .row-control-cell {\n    display: flex;\n    align-items: center;\n    min-width: 0;\n  }\n\n  /* On mobile, display controls on their own row, pushing other cells below */\n  .row-control-cell + :not(.row-control-cell) {\n    grid-column-start: 1;\n  }\n\n  .row-expansion-content {\n    box-shadow: inset 0 -1px 0 0 var(--color-ice-200);\n  }\n\n  .layout--stack + .row-expansion,\n  .layout--stack + .row-expansion > .row-expansion-content {\n    display: block;\n  }\n\n  .layout--stack + .row-expansion > .row-expansion-content {\n    border-top: 1px solid var(--color-ice-200);\n    border-bottom-left-radius: theme('borderRadius.DEFAULT');\n    border-bottom-right-radius: theme('borderRadius.DEFAULT');\n    margin-bottom: theme('spacing.6');\n  }\n\n  .layout--stack.root--hidden-divider + .row-expansion > .row-expansion-content {\n    border-top: none;\n  }\n\n  /* On large screens, match the styles for layout-SCROLL */\n  @media screen('lg') {\n    .layout--stack {\n      align-items: unset;\n      background-color: unset;\n      border: 0;\n      border-bottom: 1px solid var(--color-ice-200);\n      border-radius: 0;\n      box-shadow: none;\n      column-gap: unset;\n      display: table-row;\n      grid-template-columns: unset;\n      row-gap: unset;\n    }\n\n    .layout--stack:last-of-type {\n      border-bottom: 0;\n    }\n\n    .layout--stack .row-control-cell {\n      display: table-cell;\n    }\n\n    .layout--stack + .row-expansion {\n      display: table-row;\n    }\n\n    .layout--stack + .row-expansion > .row-expansion-content {\n      border-top: unset;\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n      display: table-cell;\n      margin-bottom: unset;\n    }\n\n    .row-control-cell + :not(.row-control-cell) {\n      grid-column-start: unset;\n    }\n  }\n</style>\n"],"names":["attrs","useAttrs","classes","useCssModule","slots","useSlots","tableInjection","inject","TABLE_INJECTION","hasActions","hasCustomExpandToggle","isExpandable","isSelectable","layout","isRowExpanded","ref","props","isRowExpandable","computed","childCellCount","count","_a","toggleExpand","rowId","uniqueId","value","isExpanded","emit","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAoCQA,IAAQC,KACRC,IAAUC,KACVC,IAAQC,KAERC,IAAiBC,EAAOC,EAAgB,GAAG;AAEjD,QAAI,CAACF;AACG,YAAA,IAAI,MAAM,gDAAgD;AAGlE,UAAM,EAAE,YAAAG,GAAY,uBAAAC,GAAuB,cAAAC,GAAc,cAAAC,GAAc,QAAAC,EAAW,IAAAP,GAE5EQ,IAAgBC,EAAIC,EAAM,UAAU,GACpCC,IAAkBC,EAAS,MAAMP,KAAgB,CAAC,CAACP,EAAM,SAAS,GAElEe,IAAiBD,EAAS,MAAM;;AACpC,UAAIE,MAAQC,IAAAjB,EAAM,YAAN,gBAAAiB,EAAA,KAAAjB,GAAgB,EAAE,cAAAkB,KAAgB,WAAU;AAExD,aAAIV,EAAa,UACNQ,KAAA,IAGPH,EAAgB,SAAS,CAACP,EAAsB,UACzCU,KAAA,IAGJA;AAAA,IAAA,CACR,GACKG,IAAQC,EAAS,YAAY;AAEnC,aAASF,EAAaG,GAAiB;AACjC,UAAA,CAACR,EAAgB;AACb,cAAA,IAAI,MAAM,kFAAkF;AAGpG,YAAMS,IAAa,OAAOD,KAAU,YAAYA,IAAQ,CAACX,EAAc;AAEvE,MAAAA,EAAc,QAAQY,GACtBC,EAAK,qBAAqBD,CAAU;AAAA,IACtC;AAEA,WAAAE;AAAA,MACE,MAAMZ,EAAM;AAAA,MACZ,MAAMM,EAAaN,EAAM,UAAU;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Tabs.js

@@ -1,5 +1,5 @@
-import { _ as o, s as t } from "./Tabs.vue_used_vue_type_style_index_0_lang.module-0af1e1cf.js";
-import { T as C, a as E } from "./Tabs.vue_used_vue_type_style_index_0_lang.module-0af1e1cf.js";
+import { _ as o, s as t } from "./Tabs.vue_used_vue_type_style_index_0_lang.module-2a131332.js";
+import { T as C, a as E } from "./Tabs.vue_used_vue_type_style_index_0_lang.module-2a131332.js";
 import { _ as r } from "./_plugin-vue_export-helper-dad06003.js";
 import "vue";
 import "lodash-es/debounce";

package/dist/{Tabs.vue_used_vue_type_style_index_0_lang.module-0af1e1cf.js → Tabs.vue_used_vue_type_style_index_0_lang.module-2a131332.js}

@@ -1,16 +1,16 @@
-import { defineComponent as z, useCssModule as U, ref as r, computed as b, provide as V, onMounted as j, onUpdated as J, onDeactivated as R, onBeforeUnmount as q, openBlock as k, createElementBlock as F, createElementVNode as f, normalizeStyle as K, normalizeClass as I, renderSlot as L, createBlock as W, withCtx as A, unref as p, createTextVNode as Y, toDisplayString as G, createVNode as H, createCommentVNode as P } from "vue";
+import { defineComponent as z, useCssModule as U, ref as a, computed as b, provide as V, onMounted as j, onUpdated as J, onDeactivated as R, onBeforeUnmount as q, openBlock as k, createElementBlock as F, createElementVNode as f, normalizeStyle as K, normalizeClass as I, renderSlot as L, createBlock as W, withCtx as A, unref as p, createTextVNode as Y, toDisplayString as G, createVNode as H, createCommentVNode as P } from "vue";
 import Q from "lodash-es/debounce";
 import X from "lodash-es/uniqueId";
 import { DEBOUNCE as Z } from "./constants.js";
 import { t as ee } from "./locale.js";
 import te from "./Dropdown.js";
 import oe from "./Icon.js";
-const ae = Object.freeze({
+const re = Object.freeze({
   key: Symbol("TABS_INJECTION_KEY")
 });
 var N = /* @__PURE__ */ ((s) => (s.Line = "line", s.Enclosed = "enclosed", s))(N || {});
-const re = {
-  class: "root stash-tabs tw-relative",
+const ae = {
+  class: "stash-tabs tw-relative",
   role: "tabList",
   "data-test": "stash-tabs"
 }, se = ["aria-controls", "aria-expanded", "onClick"], ie = ["id"], be = /* @__PURE__ */ z({
@@ -21,7 +21,7 @@ const re = {
   },
   emits: ["update:activeTab"],
   setup(s, { emit: O }) {
-    const d = s, D = U(), l = r(), c = r(), i = r(void 0), M = "IntersectionObserver" in window, a = r(/* @__PURE__ */ new Set()), m = r(0), h = r(), _ = X("more-dropdown-menu-"), u = r(!1), E = b({
+    const d = s, D = U(), l = a(), c = a(), i = a(void 0), M = "IntersectionObserver" in window, r = a(/* @__PURE__ */ new Set()), m = a(0), h = a(), E = X("more-dropdown-menu-"), u = a(!1), g = b({
       get() {
         return d.activeTab;
       },
@@ -30,18 +30,18 @@ const re = {
       }
     });
     function B(t) {
-      E.value = t;
+      g.value = t;
     }
-    V(ae.key, {
-      activeTab: b(() => E.value),
+    V(re.key, {
+      activeTab: b(() => g.value),
       variant: b(() => d.variant),
       setActiveTab: B
     });
-    function g() {
+    function y() {
       var w, C, T;
       if (!M || !l.value)
         return;
-      const t = Array.from((w = l.value) == null ? void 0 : w.children), y = {
+      const t = Array.from((w = l.value) == null ? void 0 : w.children), _ = {
         root: l.value,
         rootMargin: "0px",
         threshold: Array.from({ length: 100 }).map((e, o) => (o + 1) / 100)
@@ -49,17 +49,17 @@ const re = {
       if (i.value = new IntersectionObserver((e) => {
         e.forEach((o) => {
           const n = o.target.getAttribute("id");
-          o.intersectionRatio > 0.94 ? a.value.has(n) && a.value.delete(n) : n && !a.value.has(n) && a.value.add(n);
+          o.intersectionRatio > 0.94 ? r.value.has(n) && r.value.delete(n) : n && !r.value.has(n) && r.value.add(n);
         });
-      }, y), t.forEach((e) => {
+      }, _), t.forEach((e) => {
         var o;
-        (o = i.value) == null || o.observe(e), a.value.has(e.getAttribute("id")) ? e.classList.add("tw-invisible") : e.classList.remove("tw-invisible");
+        (o = i.value) == null || o.observe(e), r.value.has(e.getAttribute("id")) ? e.classList.add("tw-invisible") : e.classList.remove("tw-invisible");
       }), m.value = (T = (C = h.value) == null ? void 0 : C.$el) == null ? void 0 : T.getBoundingClientRect().width, !c.value)
         return;
       Array.from(c.value.children).forEach((e) => {
         const o = e.firstElementChild;
         o.className = "", e.className = "", e.classList.add(
-          D["tabs__overflowed-tab"],
+          D["menu-tab"],
           "tw-rounded",
           "tw-text-sm",
           "tw-p-1.5",
@@ -75,16 +75,16 @@ const re = {
           "aria-disabled:hover:tw-cursor-default",
           "aria-selected:tw-text-white",
           "aria-selected:tw-bg-blue-500"
-        ), a.value.has(e.getAttribute("id")) ? e.classList.remove("tw-hidden") : e.classList.add("tw-hidden"), e.removeEventListener("click", () => {
+        ), r.value.has(e.getAttribute("id")) ? e.classList.remove("tw-hidden") : e.classList.add("tw-hidden"), e.removeEventListener("click", () => {
         });
       });
     }
-    const S = Q(g, Z.FAST, { leading: !0 });
+    const S = Q(y, Z.FAST, { leading: !0 });
     function v() {
       i.value && (i.value.disconnect(), i.value = void 0);
     }
     j(() => {
-      g();
+      y();
     }), J(() => {
       v(), S();
     }), R(() => {
@@ -95,7 +95,7 @@ const re = {
     function $(t) {
       t(), u.value = !u.value;
     }
-    return (t, y) => (k(), F("div", re, [
+    return (t, _) => (k(), F("div", ae, [
       f("ul", {
         ref_key: "tabListEl",
         ref: l,
@@ -109,7 +109,7 @@ const re = {
         }])
       }, [
         L(t.$slots, "default"),
-        a.value.size ? (k(), W(te, {
+        r.value.size ? (k(), W(te, {
           key: 0,
           ref_key: "moreDropdownEl",
           ref: h,
@@ -118,7 +118,7 @@ const re = {
           toggle: A(({ toggle: x }) => [
             f("button", {
               "aria-haspopup": "menu",
-              "aria-controls": p(_),
+              "aria-controls": p(E),
               "aria-expanded": u.value,
               class: I(["tw-flex tw-cursor-pointer tw-items-center tw-justify-center tw-border-solid tw-px-6 tw-py-1.5 tw-text-sm tw-font-medium tw-text-blue-500 hover:tw-text-blue-700", { "tw-border-t-4 tw-border-transparent": d.variant === "enclosed" }]),
               type: "button",
@@ -130,10 +130,10 @@ const re = {
           ]),
           default: A(() => [
             f("ul", {
-              id: p(_),
+              id: p(E),
               ref_key: "moreDropdownMenuEl",
               ref: c,
-              class: "tabs__dropdown-list tw-space-y-1.5 tw-px-1.5 tw-pb-1.5",
+              class: "tw-space-y-1.5 tw-px-1.5 tw-pb-1.5",
               role: "menu"
             }, [
               L(t.$slots, "default")
@@ -145,12 +145,12 @@ const re = {
     ]));
   }
 }), fe = {
-  "tabs__overflowed-tab": "_tabs__overflowed-tab_luaul_2"
+  "menu-tab": "_menu-tab_frbn6_2"
 };
 export {
-  ae as T,
+  re as T,
   be as _,
   N as a,
   fe as s
 };
-//# sourceMappingURL=Tabs.vue_used_vue_type_style_index_0_lang.module-0af1e1cf.js.map
+//# sourceMappingURL=Tabs.vue_used_vue_type_style_index_0_lang.module-2a131332.js.map

package/dist/Tabs.vue_used_vue_type_style_index_0_lang.module-2a131332.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.vue_used_vue_type_style_index_0_lang.module-2a131332.js","sources":["../src/components/Tabs/keys.ts","../src/components/Tabs/models.ts","../src/components/Tabs/Tabs.vue"],"sourcesContent":["import { Injection } from '../../../types/utils';\nimport { TabsInjection } from './models';\n\nexport const TABS_INJECTION: Injection<TabsInjection> = Object.freeze({\n  key: Symbol('TABS_INJECTION_KEY'),\n});\n","import { ComputedRef } from 'vue';\n\nexport enum TabVariant {\n  Line = 'line',\n  Enclosed = 'enclosed',\n}\n\nexport type TabVariants = `${TabVariant}`;\n\nexport interface TabsInjection {\n  activeTab: ComputedRef<string>;\n  variant: ComputedRef<TabVariants>;\n  setActiveTab: (newTabValue: string) => void;\n}\n","<script lang=\"ts\">\n  import { TabVariant, TabVariants } from './models';\n\n  export * from './keys';\n  export * from './models';\n\n  export interface TabsProps {\n    /**\n     * The currently active tab value\n     */\n    activeTab: string;\n\n    /**\n     * Tabs variant\n     */\n    variant?: TabVariants;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import debounce from 'lodash-es/debounce';\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, onBeforeUnmount, onDeactivated, onMounted, onUpdated, provide, Ref, ref, useCssModule } from 'vue';\n\n  import { DEBOUNCE } from '../../constants';\n  import { t } from '../../locale';\n  import Dropdown from '../Dropdown/Dropdown.vue';\n  import Icon from '../Icon/Icon.vue';\n  import { TABS_INJECTION } from './keys';\n\n  const emit =\n    defineEmits<{\n      (e: 'update:activeTab', newTabValue: TabsProps['activeTab']): void;\n    }>();\n\n  const props = withDefaults(defineProps<TabsProps>(), {\n    variant: TabVariant.Line,\n  });\n  const classes = useCssModule();\n\n  const tabListEl = ref();\n  const moreDropdownMenuEl = ref();\n  const observer: Ref<IntersectionObserver | undefined> = ref(undefined);\n  const hasIntersectionObserver = 'IntersectionObserver' in window;\n  const overflowIds = ref<Set<string>>(new Set());\n  const moreDropdownWidth = ref(0);\n  const moreDropdownEl = ref<InstanceType<typeof Dropdown>>();\n  const moreMenuId = uniqueId('more-dropdown-menu-');\n  const isMoreMenuOpen = ref(false);\n\n  const currentActiveTab = computed({\n    get() {\n      return props.activeTab;\n    },\n    set(nv: TabsProps['activeTab']) {\n      emit('update:activeTab', nv);\n    },\n  });\n\n  function setActiveTab(newTabValue: TabsProps['activeTab']) {\n    currentActiveTab.value = newTabValue;\n  }\n\n  provide(TABS_INJECTION.key, {\n    activeTab: computed(() => currentActiveTab.value),\n    variant: computed(() => props.variant),\n    setActiveTab,\n  });\n\n  function initObserve() {\n    if (!hasIntersectionObserver) {\n      return;\n    }\n\n    if (!tabListEl.value) {\n      return;\n    }\n\n    const tabs = Array.from(tabListEl.value?.children as HTMLLIElement[]);\n    const options = {\n      root: tabListEl.value,\n      rootMargin: '0px',\n      threshold: Array.from({ length: 100 }).map((v, i) => (i + 1) / 100),\n    };\n\n    observer.value = new IntersectionObserver((entries) => {\n      entries.forEach((entry) => {\n        const dataId = entry.target.getAttribute('id') as string;\n        /**\n         * Check for partial intersection.\n         * Zooming out can result in ratio of approx 0.984\n         * Anything higher will result in nav items disappearing\n         */\n        if (entry.intersectionRatio > 0.94) {\n          // show tab, hide in dropdown\n          if (overflowIds.value.has(dataId)) {\n            overflowIds.value.delete(dataId);\n          }\n        } else {\n          // hide tab, show in dropdown\n          if (dataId && !overflowIds.value.has(dataId)) {\n            overflowIds.value.add(dataId);\n          }\n        }\n      });\n    }, options);\n\n    tabs.forEach((element) => {\n      observer.value?.observe(element);\n      if (overflowIds.value.has(element.getAttribute('id') as string)) {\n        element.classList.add('tw-invisible');\n      } else {\n        element.classList.remove('tw-invisible');\n      }\n    });\n\n    moreDropdownWidth.value = moreDropdownEl.value?.$el?.getBoundingClientRect().width;\n\n    if (!moreDropdownMenuEl.value) {\n      return;\n    }\n\n    const dropdownList = Array.from(moreDropdownMenuEl.value.children as HTMLLIElement[]);\n    dropdownList.forEach((element) => {\n      const firstElementChild = element.firstElementChild as Element;\n      firstElementChild.className = '';\n      element.className = '';\n\n      element.classList.add(\n        classes['menu-tab'],\n        'tw-rounded',\n        'tw-text-sm',\n        'tw-p-1.5',\n        'tw-text-left',\n        'tw-cursor-pointer',\n        'tw-text-ice-700',\n        'hover:tw-text-white',\n        'hover:tw-bg-blue-500',\n        'aria-disabled:tw-text-ice-500',\n        'aria-disabled:tw-pointer-events-none',\n        'aria-disabled:hover:tw-text-ice-500',\n        'aria-disabled:hover:tw-bg-inherit',\n        'aria-disabled:hover:tw-cursor-default',\n        'aria-selected:tw-text-white',\n        'aria-selected:tw-bg-blue-500',\n      );\n\n      if (!overflowIds.value.has(element.getAttribute('id') as string)) {\n        element.classList.add('tw-hidden');\n      } else {\n        element.classList.remove('tw-hidden');\n      }\n\n      element.removeEventListener('click', () => {});\n    });\n  }\n\n  const debouncedInitObserve = debounce(initObserve, DEBOUNCE.FAST, { leading: true });\n\n  function destroyObserver() {\n    if (observer.value) {\n      observer.value.disconnect();\n      observer.value = undefined;\n    }\n  }\n\n  onMounted(() => {\n    initObserve();\n  });\n\n  onUpdated(() => {\n    destroyObserver();\n    debouncedInitObserve();\n  });\n\n  onDeactivated(() => {\n    destroyObserver();\n  });\n\n  onBeforeUnmount(() => {\n    destroyObserver();\n  });\n\n  function onMoreClick(toggleMoreDropdown) {\n    toggleMoreDropdown();\n    isMoreMenuOpen.value = !isMoreMenuOpen.value;\n  }\n</script>\n\n<template>\n  <div class=\"stash-tabs tw-relative\" role=\"tabList\" data-test=\"stash-tabs\">\n    <ul\n      ref=\"tabListEl\"\n      :style=\"{\n        width: `calc(100% - ${moreDropdownWidth}px)`,\n      }\"\n      class=\"stash-tabs-list tw-flex tw-items-end tw-overflow-hidden\"\n      :class=\"{\n        'stash-tabs-list--line': variant === 'line',\n        'stash-tabs-list--enclosed': variant === 'enclosed',\n        'tw-gap-6': variant === 'line',\n      }\"\n    >\n      <slot></slot>\n\n      <Dropdown v-if=\"overflowIds.size\" ref=\"moreDropdownEl\" class=\"!tw-absolute tw-right-0 tw-top-0\">\n        <template #toggle=\"{ toggle }\">\n          <button\n            aria-haspopup=\"menu\"\n            :aria-controls=\"moreMenuId\"\n            :aria-expanded=\"isMoreMenuOpen\"\n            class=\"\n              tw-flex\n              tw-cursor-pointer\n              tw-items-center\n              tw-justify-center\n              tw-border-solid\n              tw-px-6\n              tw-py-1.5\n              tw-text-sm\n              tw-font-medium\n              tw-text-blue-500\n              hover:tw-text-blue-700\n            \"\n            :class=\"{ 'tw-border-t-4 tw-border-transparent': props.variant === 'enclosed' }\"\n            type=\"button\"\n            @click=\"onMoreClick(toggle)\"\n          >\n            {{ t('ll.more') }}\n            <Icon name=\"caret-down\" />\n          </button>\n        </template>\n        <template #default>\n          <ul :id=\"moreMenuId\" ref=\"moreDropdownMenuEl\" class=\"tw-space-y-1.5 tw-px-1.5 tw-pb-1.5\" role=\"menu\">\n            <slot></slot>\n          </ul>\n        </template>\n      </Dropdown>\n    </ul>\n  </div>\n</template>\n\n<style module>\n  .menu-tab > a {\n    /* prevents the global link styles to overwrite the overflowed tab styles */\n    &,\n    &:hover,\n    &:focus {\n      color: inherit;\n    }\n  }\n</style>\n"],"names":["TABS_INJECTION","TabVariant","classes","useCssModule","tabListEl","ref","moreDropdownMenuEl","observer","hasIntersectionObserver","overflowIds","moreDropdownWidth","moreDropdownEl","moreMenuId","uniqueId","isMoreMenuOpen","currentActiveTab","computed","props","nv","emit","setActiveTab","newTabValue","provide","initObserve","tabs","_a","options","v","i","entries","entry","dataId","element","_c","_b","firstElementChild","debouncedInitObserve","debounce","DEBOUNCE","destroyObserver","onMounted","onUpdated","onDeactivated","onBeforeUnmount","onMoreClick","toggleMoreDropdown"],"mappings":"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"}

package/dist/Textarea.js

@@ -1,11 +1,11 @@
-import { defineComponent as R, useAttrs as C, useSlots as S, ref as h, computed as k, watch as H, onMounted as I, nextTick as O, onBeforeUnmount as A, openBlock as M, createBlock as P, mergeProps as _, unref as p, createSlots as V, withCtx as x, createElementVNode as q, renderSlot as $ } from "vue";
-import j from "lodash-es/uniqueId";
-import { _ as D } from "./Field.vue_vue_type_script_setup_true_lang-4483019d.js";
-import { _ as F } from "./_plugin-vue_export-helper-dad06003.js";
-import "./Label.vue_vue_type_script_setup_true_lang-2de35913.js";
+import { defineComponent as R, useAttrs as M, useSlots as S, useCssModule as k, ref as h, computed as H, watch as O, onMounted as A, nextTick as I, onBeforeUnmount as P, openBlock as V, createBlock as $, mergeProps as x, unref as f, createSlots as q, withCtx as _, createElementVNode as j, renderSlot as D } from "vue";
+import F from "lodash-es/uniqueId";
+import { _ as L } from "./Field.vue_vue_type_script_setup_true_lang-42ba3c5a.js";
+import { _ as N } from "./_plugin-vue_export-helper-dad06003.js";
+import "./Label.vue_vue_type_script_setup_true_lang-4b02087f.js";
 import "./locale.js";
 import "lodash-es/get";
-const L = ["id", "value"], N = /* @__PURE__ */ R({
+const U = ["id", "value"], W = /* @__PURE__ */ R({
   name: "ll-textarea",
   __name: "Textarea",
   props: {
@@ -19,32 +19,32 @@ const L = ["id", "value"], N = /* @__PURE__ */ R({
   },
   emits: ["update:model-value"],
   setup(g, { emit: w }) {
-    const n = g, b = j("textarea-"), f = C(), y = S(), c = h(), l = h(), z = k(() => {
-      const e = { ...f };
+    const s = g, b = F("textarea-"), p = M(), y = S(), z = k(), c = h(), l = h(), T = H(() => {
+      const e = { ...p };
       return delete e["data-test"], delete e.class, e;
     });
-    H(
-      () => n.resize,
+    O(
+      () => s.resize,
       (e) => {
         var t;
         e ? m() : (t = l.value) == null || t.disconnect();
       }
     );
-    const T = (e) => {
+    const B = (e) => {
       w("update:model-value", e.target.value);
     }, m = () => {
       l.value || !c.value || (l.value = new ResizeObserver(([e]) => {
         const { target: t } = e, o = v(c.value) || document.documentElement, { scrollTop: a } = o;
-        let s = 0;
+        let n = 0;
         if (o === document.documentElement) {
-          const { top: r, height: i } = B(t), { innerHeight: u } = window;
-          s = Math.max(r + i - (u + a), 0);
+          const { top: r, height: i } = C(t), { innerHeight: u } = window;
+          n = Math.max(r + i - (u + a), 0);
         } else {
           const { top: r, height: i } = t.getBoundingClientRect(), { top: u } = o.getBoundingClientRect(), { offsetHeight: d } = o, E = r - u;
-          s = Math.max(E + i - d, 0);
+          n = Math.max(E + i - d, 0);
         }
-        s && requestAnimationFrame(() => {
-          o.scrollTop = a + s;
+        n && requestAnimationFrame(() => {
+          o.scrollTop = a + n;
         });
       }), l.value.observe(c.value));
     }, v = (e) => {
@@ -53,58 +53,66 @@ const L = ["id", "value"], N = /* @__PURE__ */ R({
         return null;
       const { overflowY: o } = getComputedStyle(t);
       return o !== "visible" ? t : t === document.body ? document.documentElement : v(t);
-    }, B = (e) => {
+    }, C = (e) => {
       const { offsetWidth: t, offsetHeight: o } = e;
-      let a = 0, s = 0;
+      let a = 0, n = 0;
       const r = function({ offsetLeft: i, offsetTop: u, offsetParent: d }) {
-        a += i, s += u, d && r(d);
+        a += i, n += u, d && r(d);
       };
       return r(e), {
-        top: s,
+        top: n,
         left: a,
         width: t,
         height: o
       };
     };
-    return I(async () => {
+    return A(async () => {
       var e;
-      if (n.value !== null)
+      if (s.value !== null)
         throw new Error("ll-input: use :model-value or v-model instead of :value.");
-      if (f.onInput)
+      if (p.onInput)
         throw new Error("ll-input: use the @update:model-value event instead of @input");
-      (typeof n.resize == "boolean" && n.resize || (e = n.resize) != null && e.forceBrowserScroll) && (await O(), m());
-    }), A(() => {
+      (typeof s.resize == "boolean" && s.resize || (e = s.resize) != null && e.forceBrowserScroll) && (await I(), m());
+    }), P(() => {
       var e;
       (e = l.value) == null || e.disconnect();
-    }), (e, t) => (M(), P(D, _(n, {
-      id: p(b),
-      class: ["stash-textarea", [p(f).class]],
+    }), (e, t) => (V(), $(L, x(s, {
+      id: f(b),
+      class: ["stash-textarea", f(p).root],
       "data-test": "stash-textarea"
-    }), V({
-      default: x(({ fieldId: o, hasError: a }) => [
-        q("textarea", _({
+    }), q({
+      default: _(({ fieldId: o, hasError: a }) => [
+        j("textarea", x({
           id: o,
           ref_key: "textareaRef",
           ref: c,
-          class: { "stash-textarea--error": a, "tw-resize-y": n.resize, "tw-resize-none": !n.resize },
-          value: n.modelValue,
+          class: [
+            f(z).textarea,
+            { "stash-textarea--error": a, "tw-resize-y": s.resize, "tw-resize-none": !s.resize }
+          ],
+          value: s.modelValue,
           "data-test": "stash-textarea|textarea"
-        }, z.value, { onInput: T }), null, 16, L)
+        }, T.value, { onInput: B }), null, 16, U)
       ]),
       _: 2
     }, [
-      p(y).hint ? {
+      f(y).hint ? {
         name: "hint",
-        fn: x(() => [
-          $(e.$slots, "hint", {}, void 0, !0)
+        fn: _(() => [
+          D(e.$slots, "hint")
         ]),
         key: "0"
       } : void 0
     ]), 1040, ["id", "class"]));
   }
-});
-const X = /* @__PURE__ */ F(N, [["__scopeId", "data-v-ffd4d28e"]]);
+}), Y = "_root_1bv4v_2", G = "_textarea_1bv4v_7", J = {
+  root: Y,
+  textarea: G,
+  "stash-textarea--error": "_stash-textarea--error_1bv4v_28"
+}, K = {
+  $style: J
+}, ae = /* @__PURE__ */ N(W, [["__cssModules", K]]);
 export {
-  X as default
+  ae as default
 };
 //# sourceMappingURL=Textarea.js.map

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 uniqueId from 'lodash-es/uniqueId';\n  import { computed, nextTick, onBeforeUnmount, onMounted, ref, useAttrs, useSlots, watch } from 'vue';\n\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 {\n    /**\n     * Label text for the textarea element.\n     */\n    label?: string;\n    /**\n     * Value for the textarea element.\n     */\n    modelValue?: string;\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     * Error text for the textarea element.\n     */\n    errorText?: string;\n    /**\n     * Hint text for the textarea element.\n     */\n    hintText?: string;\n    /**\n     * Render \"(optional)\" to the right of the label text\n     */\n    showOptionalInLabel?: boolean;\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  defineOptions({\n    name: 'll-textarea',\n  });\n\n  /**\n   * Unique ID for the textarea, required for accessibility purposes\n   */\n  const id = uniqueId('textarea-');\n\n  const attrs = useAttrs();\n  const slots = useSlots();\n\n  const props = withDefaults(defineProps<TextAreaProps>(), {\n    label: ' ',\n    modelValue: '',\n    value: null,\n    errorText: '',\n    hintText: '',\n    showOptionalInLabel: false,\n    resize: false,\n  });\n\n  const emits =\n    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\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\" :id=\"id\" class=\"stash-textarea\" :class=\"[attrs.class]\" data-test=\"stash-textarea\">\n    <template #default=\"{ fieldId, hasError }\">\n      <textarea\n        :id=\"fieldId\"\n        ref=\"textareaRef\"\n        :class=\"{ 'stash-textarea--error': hasError, 'tw-resize-y': props.resize, 'tw-resize-none': !props.resize }\"\n        :value=\"props.modelValue\"\n        data-test=\"stash-textarea|textarea\"\n        v-bind=\"inputAttrs\"\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 scoped>\n  .stash-textarea {\n    position: relative;\n    width: 100%;\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      &[readonly] {\n        background-color: var(--color-ice-200);\n        border-color: var(--color-ice-500);\n        color: var(--color-ice-700);\n        pointer-events: none;\n      }\n\n      &[disabled]:active,\n      &[readonly]:active,\n      &[disabled]:focus,\n      &[readonly]:focus {\n        box-shadow: none;\n      }\n\n      &[disabled]::placeholder,\n      &[readonly]::placeholder {\n        text-transform: none;\n      }\n    }\n  }\n</style>\n"],"names":["id","uniqueId","attrs","useAttrs","slots","useSlots","textareaRef","ref","observer","inputAttrs","computed","allAttrs","watch","props","v","setupResizeObserver","_a","onInput","event","emits","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 uniqueId from 'lodash-es/uniqueId';\n  import { computed, nextTick, onBeforeUnmount, onMounted, ref, useAttrs, useCssModule, useSlots, watch } from 'vue';\n\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 {\n    /**\n     * Label text for the textarea element.\n     */\n    label?: string;\n\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     * Error text for the textarea element.\n     */\n    errorText?: string;\n\n    /**\n     * Hint text for the textarea element.\n     */\n    hintText?: string;\n\n    /**\n     * Render \"(optional)\" to the right of the label text\n     */\n    showOptionalInLabel?: boolean;\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  defineOptions({\n    name: 'll-textarea',\n  });\n\n  /**\n   * Unique ID for the textarea, required for accessibility purposes\n   */\n  const id = uniqueId('textarea-');\n\n  const attrs = useAttrs();\n  const slots = useSlots();\n  const classes = useCssModule();\n\n  const props = withDefaults(defineProps<TextAreaProps>(), {\n    label: ' ',\n    modelValue: '',\n    value: null,\n    errorText: '',\n    hintText: '',\n    showOptionalInLabel: false,\n    resize: false,\n  });\n\n  const emits =\n    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\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\" :id=\"id\" class=\"stash-textarea\" :class=\"attrs.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        v-bind=\"inputAttrs\"\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    &[readonly] {\n      background-color: var(--color-ice-200);\n      border-color: var(--color-ice-500);\n      color: var(--color-ice-700);\n      pointer-events: none;\n    }\n\n    &[disabled]:active,\n    &[readonly]:active,\n    &[disabled]:focus,\n    &[readonly]:focus {\n      box-shadow: none;\n    }\n\n    &[disabled]::placeholder,\n    &[readonly]::placeholder {\n      text-transform: none;\n    }\n  }\n</style>\n"],"names":["id","uniqueId","attrs","useAttrs","slots","useSlots","classes","useCssModule","textareaRef","ref","observer","inputAttrs","computed","allAttrs","watch","props","v","setupResizeObserver","_a","onInput","event","emits","entry","target","parent","findParentScrollable","scrollPosition","offsetDiff","top","height","getOffsetClipRect","viewportHeight","parentTop","parentHeight","offsetTop","el","overflowY","width","left","findPos","offsetLeft","offsetParent","onMounted","nextTick","onBeforeUnmount"],"mappings":";;;;;;;;;;;;;;;;;;;;;iBA2DQA,IAAKC,EAAS,WAAW,GAEzBC,IAAQC,KACRC,IAAQC,KACRC,IAAUC,KAoBVC,IAAcC,KACdC,IAAWD,KAEXE,IAAaC,EAAS,MAAM;AAC1B,YAAAC,IAAW,EAAE,GAAGX;AAEtB,oBAAOW,EAAS,WAAW,GAC3B,OAAOA,EAAS,OAETA;AAAA,IAAA,CACR;AAED,IAAAC;AAAA,MACE,MAAMC,EAAM;AAAA,MACZ,CAACC,MAAM;;AACL,QAAAA,IAAIC,EAAoB,KAAIC,IAAAR,EAAS,UAAT,QAAAQ,EAAgB;AAAA,MAC9C;AAAA,IAAA;AAGI,UAAAC,IAAU,CAACC,MAAiB;AAC1B,MAAAC,EAAA,sBAAuBD,EAAM,OAA+B,KAAK;AAAA,IAAA,GAGnEH,IAAsB,MAAM;AAChC,MAAIP,EAAS,SAAS,CAACF,EAAY,UAKnCE,EAAS,QAAQ,IAAI,eAAe,CAAC,CAACY,CAAK,MAAM;AACzC,cAAA,EAAE,QAAAC,EAAW,IAAAD,GACbE,IAASC,EAAqBjB,EAAY,KAA4B,KAAK,SAAS,iBAEpF,EAAE,WAAWkB,EAAmB,IAAAF;AACtC,YAAIG,IAAa;AAGb,YAAAH,MAAW,SAAS,iBAAiB;AACvC,gBAAM,EAAE,KAAAI,GAAK,QAAAC,EAAO,IAAIC,EAAkBP,CAAqB,GACzD,EAAE,aAAaQ,EAAmB,IAAA;AAExC,UAAAJ,IAAa,KAAK,IAAIC,IAAMC,KAAUE,IAAiBL,IAAiB,CAAC;AAAA,QAAA,OACpE;AACL,gBAAM,EAAE,KAAAE,GAAK,QAAAC,EAAO,IAAKN,EAAuB,sBAAsB,GAChE,EAAE,KAAKS,EAAU,IAAIR,EAAO,sBAAsB,GAClD,EAAE,cAAcS,EAAiB,IAAAT,GACjCU,IAAYN,IAAMI;AAExB,UAAAL,IAAa,KAAK,IAAIO,IAAYL,IAASI,GAAc,CAAC;AAAA,QAC5D;AAEA,QAAIN,KACF,sBAAsB,MAAM;AAC1B,UAAAH,EAAO,YAAYE,IAAiBC;AAAA,QAAA,CACrC;AAAA,MACH,CACD,GAEQjB,EAAA,MAAM,QAAQF,EAAY,KAAK;AAAA,IAAA,GAMpCiB,IAAuB,CAACU,MAAwC;AACpE,YAAMX,IAASW,EAAG;AAClB,UAAI,CAACX;AACI,eAAA;AAGT,YAAM,EAAE,WAAAY,EAAA,IAAc,iBAAiBZ,CAAM;AAC7C,aAAIY,MAAc,YACTZ,IAGLA,MAAW,SAAS,OACf,SAAS,kBAGXC,EAAqBD,CAAM;AAAA,IAAA,GAM9BM,IAAoB,CAACK,MAAoB;AAC7C,YAAM,EAAE,aAAaE,GAAO,cAAcR,MAAWM;AAErD,UAAIG,IAAO,GACPV,IAAM;AAEV,YAAMW,IAAU,SAAU,EAAE,YAAAC,GAAY,WAAAN,GAAW,cAAAO,KAA6B;AACtE,QAAAH,KAAAE,GACDZ,KAAAM,GAEHO,KACFF,EAAQE,CAA2B;AAAA,MACrC;AAGF,aAAAF,EAAQJ,CAAE,GAEH;AAAA,QACL,KAAAP;AAAA,QACA,MAAAU;AAAA,QACA,OAAAD;AAAA,QACA,QAAAR;AAAA,MAAA;AAAA,IACF;AAGF,WAAAa,EAAU,YAAY;;AAChB,UAAA3B,EAAM,UAAU;AACZ,cAAA,IAAI,MAAM,0DAA0D;AAG5E,UAAIb,EAAM;AACF,cAAA,IAAI,MAAM,+DAA+D;AAI9E,OAAA,OAAOa,EAAM,UAAW,aAAaA,EAAM,WAC3CG,IAAAH,EAAM,WAAN,QAAAG,EAAwC,wBAEzC,MAAMyB,EAAS,GACK1B;IACtB,CACD,GAED2B,EAAgB,MAAM;;AACpB,OAAA1B,IAAAR,EAAS,UAAT,QAAAQ,EAAgB;AAAA,IAAW,CAC5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}