@rotki/ui-library 3.2.0 → 3.3.0

package/dist/components/progress/RuiProgress.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiProgress.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_createCommentVNode","_createElementVNode","_toDisplayString"],"sources":["../../../src/components/progress/RuiProgress.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { ProgressVariant } from '@/components/progress/progress-props';\nimport { progressStyles } from './progress-styles';\n\nexport interface Props {\n  /**\n   * in percentage value, required when variant === determinate or buffer\n   * Ranges from 0 to 100.\n   */\n  value?: number;\n  /**\n   * in percentage value, required when variant === buffer\n   * Ranges from 0 to 100.\n   */\n  bufferValue?: number;\n  variant?: ProgressVariant;\n  color?: ContextColorsType | 'inherit';\n  circular?: boolean;\n  showLabel?: boolean;\n  /**\n   * Sets the stroke thickness in pixels\n   */\n  thickness?: number | string;\n  /**\n   * only used for circular progress\n   */\n  size?: number | string;\n  /**\n   * What is loading, as the progress bar's accessible name (\"Loading\" when not given)\n   */\n  ariaLabel?: string;\n}\n\ndefineOptions({\n  name: 'RuiProgress',\n});\n\nconst {\n  value = 0,\n  bufferValue = 0,\n  variant = ProgressVariant.determinate,\n  color = 'inherit',\n  circular = false,\n  showLabel = false,\n  thickness = 4,\n  size = 40,\n  ariaLabel = 'Loading',\n} = defineProps<Props>();\n\ndefineSlots<Record<string, never>>();\n\nconst CIRCLE_RADIUS = 20;\nconst CIRCLE_CIRCUMFERENCE = 2 * Math.PI * CIRCLE_RADIUS; // ~125.66\n/** width of `100%` in ems, measured with tabular figures */\nconst LABEL_WIDTH_EM = 2.95;\n/** keeps the label off the stroke rather than merely inside it */\nconst LABEL_BREATHING_ROOM = 0.9;\n/** below this font size a label inside the ring is unreadable, so the ring drops it rather than change its footprint */\nconst MIN_INSIDE_LABEL_PX = 9;\n\nfunction clampPercent(val: number | undefined): number {\n  return Math.max(0, Math.min(val ?? 100, 100));\n}\n\nconst hasLabel = computed<boolean>(() => showLabel && variant !== ProgressVariant.indeterminate);\n\n/**\n * The font size that fits the widest label (`100%`) inside the ring, solved against the chord\n * it spans. Always computed for that widest label so the text does not resize as the value climbs.\n */\nconst insideLabelFit = computed<number>(() => {\n  const innerRadius = Math.max((+size - 2 * +thickness) / 2, 0);\n  return (LABEL_BREATHING_ROOM * 2 * innerRadius) / Math.sqrt(LABEL_WIDTH_EM ** 2 + 1);\n});\n\nconst labelFits = computed<boolean>(() => get(insideLabelFit) >= MIN_INSIDE_LABEL_PX);\n\nconst ui = computed<ReturnType<typeof progressStyles>>(() => progressStyles({\n  color,\n  variant,\n  circular,\n  hasLabel: get(hasLabel),\n}));\n\nconst currentValue = computed<number>(() => clampPercent(value));\n\n/** An indeterminate bar has no value to report, so it leaves `aria-valuenow` off. */\nconst ariaValueNow = computed<number | undefined>(() =>\n  variant === ProgressVariant.indeterminate ? undefined : get(currentValue));\n\nconst label = computed<string>(() => `${Math.floor(get(currentValue))}%`);\n\nconst progress = computed<number>(() => -100 + get(currentValue));\n\nconst barStyle = computed<Record<string, string>>(() => ({\n  transform: `translateX(${get(progress)}%)`,\n}));\n\nconst bufferRailStyle = computed<Record<string, string>>(() => ({\n  transform: `translateX(${-100 + clampPercent(bufferValue)}%)`,\n}));\n\nconst linearStyle = computed<Record<string, string>>(() => ({\n  height: `${+thickness}px`,\n}));\n\nconst circularSize = computed<Record<string, string>>(() => ({\n  width: `${+size}px`,\n  height: `${+size}px`,\n}));\n\nconst circularGeometry = computed<{ scaledThickness: number; viewSize: number }>(() => {\n  const scaledThickness = (+thickness * 32) / +size;\n  return { scaledThickness, viewSize: 40 + scaledThickness };\n});\n\n/**\n * The label inside the ring scales with both `size` and `thickness`. The fit is capped by\n * a sublinear curve so large rings do not end up with an oversized number in the middle.\n */\nconst circularLabelStyle = computed<Record<string, string>>(() => ({\n  fontSize: `${Math.min(get(insideLabelFit), +size * 0.15 + 6)}px`,\n}));\n\nconst circularStrokeStyle = computed<Record<string, string>>(() => ({\n  strokeDasharray: `${CIRCLE_CIRCUMFERENCE}`,\n  strokeDashoffset: `${(get(progress) / 100) * -CIRCLE_CIRCUMFERENCE}`,\n  // the library's own motion, not Material's standard curve\n  transition: 'stroke-dashoffset 200ms ease-out',\n}));\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <!-- Circular progress (not supported for buffer variant) -->\n    <div\n      v-if=\"circular && variant !== ProgressVariant.buffer\"\n      :aria-valuenow=\"ariaValueNow\"\n      :class=\"ui.circularContainer()\"\n      :style=\"circularSize\"\n      :data-variant=\"variant\"\n      :data-color=\"color\"\n      :aria-label=\"ariaLabel\"\n      :title=\"hasLabel && !labelFits ? label : undefined\"\n      aria-valuemax=\"100\"\n      aria-valuemin=\"0\"\n      role=\"progressbar\"\n    >\n      <svg\n        :class=\"ui.svg()\"\n        :viewBox=\"`0 0 ${circularGeometry.viewSize} ${circularGeometry.viewSize}`\"\n      >\n        <!-- Track behind the arc, mirroring the linear rail. Indeterminate spins, so it gets no track. -->\n        <circle\n          v-if=\"variant === ProgressVariant.determinate\"\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\n          :r=\"CIRCLE_RADIUS\"\n          :class=\"ui.circleTrack()\"\n          :stroke-width=\"circularGeometry.scaledThickness\"\n        />\n        <circle\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\n          :r=\"CIRCLE_RADIUS\"\n          :class=\"ui.circle()\"\n          :style=\"variant === ProgressVariant.determinate ? circularStrokeStyle : undefined\"\n          :stroke-width=\"circularGeometry.scaledThickness\"\n        />\n      </svg>\n      <div\n        v-if=\"hasLabel && labelFits\"\n        :class=\"ui.label()\"\n        :style=\"circularLabelStyle\"\n        aria-hidden=\"true\"\n      >\n        {{ label }}\n      </div>\n    </div>\n\n    <!-- Linear progress (also used as fallback for circular + buffer) -->\n    <div\n      v-else\n      :aria-valuenow=\"ariaValueNow\"\n      :class=\"ui.progressbar()\"\n      :style=\"linearStyle\"\n      :data-variant=\"variant\"\n      :data-color=\"color\"\n      :aria-label=\"ariaLabel\"\n      aria-valuemax=\"100\"\n      aria-valuemin=\"0\"\n      role=\"progressbar\"\n    >\n      <div\n        v-if=\"variant === ProgressVariant.buffer\"\n        :class=\"ui.bufferDots()\"\n      />\n      <div\n        :class=\"variant === ProgressVariant.buffer ? [ui.rail(), ui.bufferRail()] : ui.rail()\"\n        :style=\"variant === ProgressVariant.buffer ? bufferRailStyle : undefined\"\n        data-id=\"progress-rail\"\n      />\n      <div\n        v-if=\"variant === ProgressVariant.indeterminate\"\n        :class=\"ui.indeterminateBar()\"\n      />\n      <div\n        v-else\n        :class=\"ui.bar()\"\n        :style=\"barStyle\"\n      />\n    </div>\n\n    <!-- Linear label -->\n    <div\n      v-if=\"hasLabel && !circular\"\n      :class=\"ui.label()\"\n    >\n      {{ label }}\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiProgress.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_createCommentVNode","_createElementVNode","_toDisplayString"],"sources":["../../../src/components/progress/RuiProgress.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport { ProgressVariant } from '@/components/progress/progress-props';\nimport { progressStyles } from './progress-styles';\n\nexport interface Props {\n  /**\n   * in percentage value, required when variant === determinate or buffer\n   * Ranges from 0 to 100.\n   */\n  value?: number;\n  /**\n   * in percentage value, required when variant === buffer\n   * Ranges from 0 to 100.\n   */\n  bufferValue?: number;\n  variant?: ProgressVariant;\n  color?: ContextColorsType | 'inherit';\n  circular?: boolean;\n  showLabel?: boolean;\n  /**\n   * Sets the stroke thickness in pixels\n   */\n  thickness?: number | string;\n  /**\n   * only used for circular progress\n   */\n  size?: number | string;\n  /**\n   * What is loading, as the progress bar's accessible name (\"Loading\" when not given)\n   */\n  ariaLabel?: string;\n}\n\ndefineOptions({\n  name: 'RuiProgress',\n});\n\nconst {\n  value = 0,\n  bufferValue = 0,\n  variant = ProgressVariant.determinate,\n  color = 'inherit',\n  circular = false,\n  showLabel = false,\n  thickness = 4,\n  size = 40,\n  ariaLabel = 'Loading',\n} = defineProps<Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>>();\n\ndefineSlots<Record<string, never>>();\n\nconst CIRCLE_RADIUS = 20;\nconst CIRCLE_CIRCUMFERENCE = 2 * Math.PI * CIRCLE_RADIUS; // ~125.66\n/** width of `100%` in ems, measured with tabular figures */\nconst LABEL_WIDTH_EM = 2.95;\n/** keeps the label off the stroke rather than merely inside it */\nconst LABEL_BREATHING_ROOM = 0.9;\n/** below this font size a label inside the ring is unreadable, so the ring drops it rather than change its footprint */\nconst MIN_INSIDE_LABEL_PX = 9;\n\nfunction clampPercent(val: number | undefined): number {\n  return Math.max(0, Math.min(val ?? 100, 100));\n}\n\nconst hasLabel = computed<boolean>(() => showLabel && variant !== ProgressVariant.indeterminate);\n\n/**\n * The font size that fits the widest label (`100%`) inside the ring, solved against the chord\n * it spans. Always computed for that widest label so the text does not resize as the value climbs.\n */\nconst insideLabelFit = computed<number>(() => {\n  const innerRadius = Math.max((+size - 2 * +thickness) / 2, 0);\n  return (LABEL_BREATHING_ROOM * 2 * innerRadius) / Math.sqrt(LABEL_WIDTH_EM ** 2 + 1);\n});\n\nconst labelFits = computed<boolean>(() => get(insideLabelFit) >= MIN_INSIDE_LABEL_PX);\n\nconst ui = computed<ReturnType<typeof progressStyles>>(() => progressStyles({\n  color,\n  variant,\n  circular,\n  hasLabel: get(hasLabel),\n}));\n\nconst currentValue = computed<number>(() => clampPercent(value));\n\n/** An indeterminate bar has no value to report, so it leaves `aria-valuenow` off. */\nconst ariaValueNow = computed<number | undefined>(() =>\n  variant === ProgressVariant.indeterminate ? undefined : get(currentValue));\n\nconst label = computed<string>(() => `${Math.floor(get(currentValue))}%`);\n\nconst progress = computed<number>(() => -100 + get(currentValue));\n\nconst barStyle = computed<Record<string, string>>(() => ({\n  transform: `translateX(${get(progress)}%)`,\n}));\n\nconst bufferRailStyle = computed<Record<string, string>>(() => ({\n  transform: `translateX(${-100 + clampPercent(bufferValue)}%)`,\n}));\n\nconst linearStyle = computed<Record<string, string>>(() => ({\n  height: `${+thickness}px`,\n}));\n\nconst circularSize = computed<Record<string, string>>(() => ({\n  width: `${+size}px`,\n  height: `${+size}px`,\n}));\n\nconst circularGeometry = computed<{ scaledThickness: number; viewSize: number }>(() => {\n  const scaledThickness = (+thickness * 32) / +size;\n  return { scaledThickness, viewSize: 40 + scaledThickness };\n});\n\n/**\n * The label inside the ring scales with both `size` and `thickness`. The fit is capped by\n * a sublinear curve so large rings do not end up with an oversized number in the middle.\n */\nconst circularLabelStyle = computed<Record<string, string>>(() => ({\n  fontSize: `${Math.min(get(insideLabelFit), +size * 0.15 + 6)}px`,\n}));\n\nconst circularStrokeStyle = computed<Record<string, string>>(() => ({\n  strokeDasharray: `${CIRCLE_CIRCUMFERENCE}`,\n  strokeDashoffset: `${(get(progress) / 100) * -CIRCLE_CIRCUMFERENCE}`,\n  // the library's own motion, not Material's standard curve\n  transition: 'stroke-dashoffset 200ms ease-out',\n}));\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <!-- Circular progress (not supported for buffer variant) -->\n    <div\n      v-if=\"circular && variant !== ProgressVariant.buffer\"\n      :aria-valuenow=\"ariaValueNow\"\n      :class=\"ui.circularContainer()\"\n      :style=\"circularSize\"\n      :data-variant=\"variant\"\n      :data-color=\"color\"\n      :aria-label=\"ariaLabel\"\n      :title=\"hasLabel && !labelFits ? label : undefined\"\n      aria-valuemax=\"100\"\n      aria-valuemin=\"0\"\n      role=\"progressbar\"\n    >\n      <svg\n        :class=\"ui.svg()\"\n        :viewBox=\"`0 0 ${circularGeometry.viewSize} ${circularGeometry.viewSize}`\"\n      >\n        <!-- Track behind the arc, mirroring the linear rail. Indeterminate spins, so it gets no track. -->\n        <circle\n          v-if=\"variant === ProgressVariant.determinate\"\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\n          :r=\"CIRCLE_RADIUS\"\n          :class=\"ui.circleTrack()\"\n          :stroke-width=\"circularGeometry.scaledThickness\"\n        />\n        <circle\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\n          :r=\"CIRCLE_RADIUS\"\n          :class=\"ui.circle()\"\n          :style=\"variant === ProgressVariant.determinate ? circularStrokeStyle : undefined\"\n          :stroke-width=\"circularGeometry.scaledThickness\"\n        />\n      </svg>\n      <div\n        v-if=\"hasLabel && labelFits\"\n        :class=\"ui.label()\"\n        :style=\"circularLabelStyle\"\n        aria-hidden=\"true\"\n      >\n        {{ label }}\n      </div>\n    </div>\n\n    <!-- Linear progress (also used as fallback for circular + buffer) -->\n    <div\n      v-else\n      :aria-valuenow=\"ariaValueNow\"\n      :class=\"ui.progressbar()\"\n      :style=\"linearStyle\"\n      :data-variant=\"variant\"\n      :data-color=\"color\"\n      :aria-label=\"ariaLabel\"\n      aria-valuemax=\"100\"\n      aria-valuemin=\"0\"\n      role=\"progressbar\"\n    >\n      <div\n        v-if=\"variant === ProgressVariant.buffer\"\n        :class=\"ui.bufferDots()\"\n      />\n      <div\n        :class=\"variant === ProgressVariant.buffer ? [ui.rail(), ui.bufferRail()] : ui.rail()\"\n        :style=\"variant === ProgressVariant.buffer ? bufferRailStyle : undefined\"\n        data-id=\"progress-rail\"\n      />\n      <div\n        v-if=\"variant === ProgressVariant.indeterminate\"\n        :class=\"ui.indeterminateBar()\"\n      />\n      <div\n        v-else\n        :class=\"ui.bar()\"\n        :style=\"barStyle\"\n      />\n    </div>\n\n    <!-- Linear label -->\n    <div\n      v-if=\"hasLabel && !circular\"\n      :class=\"ui.label()\"\n    >\n      {{ label }}\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqDA,IAAM,gBAAgB;AAGtB,IAAM,iBAAiB;;AAEvB,IAAM,uBAAuB;;AAE7B,IAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;EAN5B,MAAM,uBAAuB,IAAI,KAAK,KAAK;;EAQ3C,SAAS,aAAa,KAAiC;GACrD,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,KAAK,GAAG,CAAC;EAC9C;EAEA,MAAM,WAAW,eAAwB,QAAA,aAAa,QAAA,YAAY,gBAAgB,aAAa;;;;;EAM/F,MAAM,iBAAiB,eAAuB;GAC5C,MAAM,cAAc,KAAK,KAAK,CAAC,QAAA,OAAO,IAAI,CAAC,QAAA,aAAa,GAAG,CAAC;GAC5D,OAAQ,uBAAuB,IAAI,cAAe,KAAK,KAAK,kBAAkB,IAAI,CAAC;EACrF,CAAC;EAED,MAAM,YAAY,eAAwB,IAAI,cAAc,KAAK,mBAAmB;EAEpF,MAAM,KAAK,eAAkD,eAAe;GAC1E,OAAI,QAAA;GACJ,SAAM,QAAA;GACN,UAAO,QAAA;GACP,UAAU,IAAI,QAAQ;EACxB,CAAC,CAAC;EAEF,MAAM,eAAe,eAAuB,aAAa,QAAA,KAAK,CAAC;;EAG/D,MAAM,eAAe,eACnB,QAAA,YAAY,gBAAgB,gBAAgB,KAAA,IAAY,IAAI,YAAY,CAAC;EAE3E,MAAM,QAAQ,eAAuB,GAAG,KAAK,MAAM,IAAI,YAAY,CAAC,EAAE,EAAE;EAExE,MAAM,WAAW,eAAuB,OAAO,IAAI,YAAY,CAAC;EAEhE,MAAM,WAAW,gBAAwC,EACvD,WAAW,cAAc,IAAI,QAAQ,EAAE,IACzC,EAAE;EAEF,MAAM,kBAAkB,gBAAwC,EAC9D,WAAW,cAAc,OAAO,aAAa,QAAA,WAAW,EAAE,IAC5D,EAAE;EAEF,MAAM,cAAc,gBAAwC,EAC1D,QAAQ,GAAG,CAAC,QAAA,UAAU,IACxB,EAAE;EAEF,MAAM,eAAe,gBAAwC;GAC3D,OAAO,GAAG,CAAC,QAAA,KAAK;GAChB,QAAQ,GAAG,CAAC,QAAA,KAAK;EACnB,EAAE;EAEF,MAAM,mBAAmB,eAA8D;GACrF,MAAM,kBAAmB,CAAC,QAAA,YAAY,KAAM,CAAC,QAAA;GAC7C,OAAO;IAAE;IAAiB,UAAU,KAAK;GAAgB;EAC3D,CAAC;;;;;EAMD,MAAM,qBAAqB,gBAAwC,EACjE,UAAU,GAAG,KAAK,IAAI,IAAI,cAAc,GAAG,CAAC,QAAA,OAAO,MAAO,CAAC,EAAE,IAC/D,EAAE;EAEF,MAAM,sBAAsB,gBAAwC;GAClE,iBAAiB,GAAG;GACpB,kBAAkB,GAAI,IAAI,QAAQ,IAAI,MAAO,CAAC;GAE9C,YAAY;EACd,EAAE;;GAIA,OAAAA,UAAA,GAAAC,mBAyFM,OAAA,EAzFA,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA,EAAA,GAAA,CAGb,QAAA,YAAY,QAAA,YAAYA,MAAA,eAAA,CAAe,CAAC,UADhDH,UAAA,GAAAC,mBA6CM,OAAA;;IA3CH,iBAAeE,MAAA,YAAA;IACf,OAAKD,eAAEC,MAAA,EAAA,CAAE,CAAC,kBAAiB,CAAA;IAC3B,OAAKC,eAAED,MAAA,YAAA,CAAY;IACnB,gBAAc,QAAA;IACd,cAAY,QAAA;IACZ,cAAY,QAAA;IACZ,OAAOA,MAAA,QAAA,KAAQ,CAAKA,MAAA,SAAA,IAAYA,MAAA,KAAA,IAAQ,KAAA;IACzC,iBAAc;IACd,iBAAc;IACd,MAAK;GAELH,GAAAA,EAAAA,UAAA,GAAAC,mBAuBM,OAAA;IAtBH,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,IAAG,CAAA;IACb,SAAO,OAASA,MAAA,gBAAA,CAAgB,CAAC,SAAQ,GAAIA,MAAA,gBAAA,CAAgB,CAAC;GAIvD,GAAA,CAAA,QAAA,YAAYA,MAAA,eAAA,CAAe,CAAC,eADpCH,UAAA,GAAAC,mBAQE,UAAA;;IANA,IAAG;IACH,IAAG;IACH,MAAK;IACJ,GAAG;IACH,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,YAAW,CAAA;IACrB,gBAAcA,MAAA,gBAAA,CAAgB,CAAC;GAElCG,GAAAA,MAAAA,IAAAA,UAAAA,KAAAA,mBAAAA,IAAAA,IAAAA,GAAAA,mBAQE,UAAA;IAPA,IAAG;IACH,IAAG;IACH,MAAK;IACJ,GAAG;IACH,OAAKJ,eAAEC,MAAA,EAAA,CAAE,CAAC,OAAM,CAAA;IAChB,OAAKC,eAAE,QAAA,YAAYD,MAAA,eAAA,CAAe,CAAC,cAAcA,MAAA,mBAAA,IAAsB,KAAA,CAAS;IAChF,gBAAcA,MAAA,gBAAA,CAAgB,CAAC;GAI5BA,GAAAA,MAAAA,IAAAA,UAAAA,CAAAA,GAAAA,IAAAA,UAAAA,IAAAA,MAAA,QAAA,KAAYA,MAAA,SAAA,KADpBH,UAAA,GAAAC,mBAOM,OAAA;;IALH,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;IACf,OAAKC,eAAED,MAAA,kBAAA,CAAkB;IAC1B,eAAY;GAET,GAAAI,gBAAAJ,MAAA,KAAA,CAAK,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,IAAA,UAAA,MAKZH,UAAA,GAAAC,mBA8BM,OAAA;;IA5BH,iBAAeE,MAAA,YAAA;IACf,OAAKD,eAAEC,MAAA,EAAA,CAAE,CAAC,YAAW,CAAA;IACrB,OAAKC,eAAED,MAAA,WAAA,CAAW;IAClB,gBAAc,QAAA;IACd,cAAY,QAAA;IACZ,cAAY,QAAA;IACb,iBAAc;IACd,iBAAc;IACd,MAAK;;IAGG,QAAA,YAAYA,MAAA,eAAA,CAAe,CAAC,UADpCH,UAAA,GAAAC,mBAGE,OAAA;;KADC,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,WAAU,CAAA;;IAEvBG,mBAIE,OAAA;KAHC,OAAKJ,eAAE,QAAA,YAAYC,MAAA,eAAA,CAAe,CAAC,SAAM,CAAIA,MAAA,EAAA,CAAE,CAAC,KAAI,GAAIA,MAAA,EAAA,CAAE,CAAC,WAAU,CAAA,IAAMA,MAAA,EAAA,CAAE,CAAC,KAAI,CAAA;KAClF,OAAKC,eAAE,QAAA,YAAYD,MAAA,eAAA,CAAe,CAAC,SAASA,MAAA,eAAA,IAAkB,KAAA,CAAS;KACxE,WAAQ;;IAGF,QAAA,YAAYA,MAAA,eAAA,CAAe,CAAC,iBADpCH,UAAA,GAAAC,mBAGE,OAAA;;KADC,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,iBAAgB,CAAA;IAE7BH,GAAAA,MAAAA,CAAAA,MAAAA,UAAA,GAAAC,mBAIE,OAAA;;KAFC,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,IAAG,CAAA;KACb,OAAKC,eAAED,MAAA,QAAA,CAAQ;;GAMZA,GAAAA,IAAAA,UAAAA,IAAAA,MAAA,QAAA,KAAQ,CAAK,QAAA,YADrBH,UAAA,GAAAC,mBAKM,OAAA;;IAHH,OAAKC,eAAEC,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;GAEb,GAAAI,gBAAAJ,MAAA,KAAA,CAAK,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA"}

package/dist/components/steppers/RuiFooterStepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiFooterStepper.js","names":["_sfc_main"],"sources":["../../../src/components/steppers/RuiFooterStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { FooterStepperVariant } from '@/components/steppers/footer-stepper-variant';\nimport { footerStepperStyles } from './footer-stepper-styles';\n\nexport interface Props {\n  pages: number;\n  variant?: FooterStepperVariant;\n  arrowButtons?: boolean;\n  hideButtons?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiFooterStepper',\n});\n\nconst modelValue = defineModel<number>({ default: 1 });\n\nconst {\n  pages,\n  variant: variantProp = FooterStepperVariant.numeric,\n  arrowButtons = false,\n  hideButtons = false,\n} = defineProps<Props>();\n\nfunction onChange(delta: number): void {\n  set(modelValue, get(modelValue) + delta);\n}\n\nfunction onPrev(): void {\n  if (get(modelValue) > 1)\n    onChange(-1);\n}\n\nfunction onNext(): void {\n  if (get(modelValue) < pages)\n    onChange(1);\n}\n\nfunction onClick(index: number): void {\n  onChange(index - get(modelValue));\n}\n</script>\n\n<template>\n  <div\n    role=\"navigation\"\n    aria-label=\"Step navigation\"\n    class=\"flex items-center justify-between gap-x-4 transition-all duration-150\"\n    :data-variant=\"variantProp\"\n  >\n    <template v-if=\"variantProp === FooterStepperVariant.pill\">\n      <div\n        data-id=\"pills\"\n        class=\"flex w-full gap-x-3\"\n      >\n        <span\n          v-for=\"i in pages\"\n          :key=\"i\"\n          :aria-current=\"modelValue === i ? 'step' : undefined\"\n          :class=\"footerStepperStyles.pill({ active: modelValue === i })\"\n        />\n      </div>\n    </template>\n    <template v-else>\n      <RuiButton\n        v-if=\"!hideButtons\"\n        data-id=\"prev\"\n        :aria-label=\"arrowButtons ? 'Previous' : undefined\"\n        :disabled=\"modelValue <= 1\"\n        :icon=\"arrowButtons\"\n        :size=\"arrowButtons ? 'sm' : undefined\"\n        :variant=\"arrowButtons ? 'outlined' : 'text'\"\n        :color=\"arrowButtons ? undefined : 'primary'\"\n        @click=\"onPrev()\"\n      >\n        <template\n          v-if=\"!arrowButtons\"\n          #prepend\n        >\n          <RuiIcon name=\"lu-chevron-left\" />\n        </template>\n        <span v-if=\"!arrowButtons\">Back</span>\n        <RuiIcon\n          v-else\n          name=\"lu-chevron-left\"\n        />\n      </RuiButton>\n      <span\n        v-if=\"variantProp === FooterStepperVariant.numeric\"\n        data-id=\"numeric\"\n        class=\"text-sm tabular-nums text-rui-text-secondary\"\n      >\n        {{ modelValue }}/{{ pages }}\n      </span>\n      <div\n        v-else-if=\"variantProp === FooterStepperVariant.bullet\"\n        data-id=\"bullets\"\n        class=\"flex items-center gap-x-1.5\"\n      >\n        <button\n          v-for=\"i in pages\"\n          :key=\"i\"\n          type=\"button\"\n          :aria-label=\"`Step ${i}`\"\n          :aria-current=\"modelValue === i ? 'step' : undefined\"\n          :class=\"footerStepperStyles.bullet({ active: modelValue === i })\"\n          @click=\"onClick(i)\"\n        />\n      </div>\n      <RuiProgress\n        v-else-if=\"variantProp === FooterStepperVariant.progress\"\n        class=\"max-w-[60%]\"\n        color=\"primary\"\n        :value=\"(modelValue / pages) * 100\"\n      />\n      <RuiButton\n        v-if=\"!hideButtons\"\n        data-id=\"next\"\n        :aria-label=\"arrowButtons ? 'Next' : undefined\"\n        :disabled=\"modelValue >= pages\"\n        :icon=\"arrowButtons\"\n        :size=\"arrowButtons ? 'sm' : undefined\"\n        :variant=\"arrowButtons ? 'outlined' : 'text'\"\n        :color=\"arrowButtons ? undefined : 'primary'\"\n        @click=\"onNext()\"\n      >\n        <span v-if=\"!arrowButtons\">Next</span>\n        <RuiIcon\n          v-else\n          name=\"lu-chevron-right\"\n        />\n        <template\n          v-if=\"!arrowButtons\"\n          #append\n        >\n          <RuiIcon name=\"lu-chevron-right\" />\n        </template>\n      </RuiButton>\n    </template>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiFooterStepper.js","names":["_sfc_main"],"sources":["../../../src/components/steppers/RuiFooterStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { FooterStepperVariant } from '@/components/steppers/footer-stepper-variant';\nimport { footerStepperStyles } from './footer-stepper-styles';\n\nexport interface Props {\n  pages: number;\n  variant?: FooterStepperVariant;\n  arrowButtons?: boolean;\n  hideButtons?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiFooterStepper',\n});\n\nconst modelValue = defineModel<number>({ default: 1 });\n\nconst {\n  pages,\n  variant: variantProp = FooterStepperVariant.numeric,\n  arrowButtons = false,\n  hideButtons = false,\n} = defineProps<Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>>();\n\nfunction onChange(delta: number): void {\n  set(modelValue, get(modelValue) + delta);\n}\n\nfunction onPrev(): void {\n  if (get(modelValue) > 1)\n    onChange(-1);\n}\n\nfunction onNext(): void {\n  if (get(modelValue) < pages)\n    onChange(1);\n}\n\nfunction onClick(index: number): void {\n  onChange(index - get(modelValue));\n}\n</script>\n\n<template>\n  <div\n    role=\"navigation\"\n    aria-label=\"Step navigation\"\n    class=\"flex items-center justify-between gap-x-4 transition-all duration-150\"\n    :data-variant=\"variantProp\"\n  >\n    <template v-if=\"variantProp === FooterStepperVariant.pill\">\n      <div\n        data-id=\"pills\"\n        class=\"flex w-full gap-x-3\"\n      >\n        <span\n          v-for=\"i in pages\"\n          :key=\"i\"\n          :aria-current=\"modelValue === i ? 'step' : undefined\"\n          :class=\"footerStepperStyles.pill({ active: modelValue === i })\"\n        />\n      </div>\n    </template>\n    <template v-else>\n      <RuiButton\n        v-if=\"!hideButtons\"\n        data-id=\"prev\"\n        :aria-label=\"arrowButtons ? 'Previous' : undefined\"\n        :disabled=\"modelValue <= 1\"\n        :icon=\"arrowButtons\"\n        :size=\"arrowButtons ? 'sm' : undefined\"\n        :variant=\"arrowButtons ? 'outlined' : 'text'\"\n        :color=\"arrowButtons ? undefined : 'primary'\"\n        @click=\"onPrev()\"\n      >\n        <template\n          v-if=\"!arrowButtons\"\n          #prepend\n        >\n          <RuiIcon name=\"lu-chevron-left\" />\n        </template>\n        <span v-if=\"!arrowButtons\">Back</span>\n        <RuiIcon\n          v-else\n          name=\"lu-chevron-left\"\n        />\n      </RuiButton>\n      <span\n        v-if=\"variantProp === FooterStepperVariant.numeric\"\n        data-id=\"numeric\"\n        class=\"text-sm tabular-nums text-rui-text-secondary\"\n      >\n        {{ modelValue }}/{{ pages }}\n      </span>\n      <div\n        v-else-if=\"variantProp === FooterStepperVariant.bullet\"\n        data-id=\"bullets\"\n        class=\"flex items-center gap-x-1.5\"\n      >\n        <button\n          v-for=\"i in pages\"\n          :key=\"i\"\n          type=\"button\"\n          :aria-label=\"`Step ${i}`\"\n          :aria-current=\"modelValue === i ? 'step' : undefined\"\n          :class=\"footerStepperStyles.bullet({ active: modelValue === i })\"\n          @click=\"onClick(i)\"\n        />\n      </div>\n      <RuiProgress\n        v-else-if=\"variantProp === FooterStepperVariant.progress\"\n        class=\"max-w-[60%]\"\n        color=\"primary\"\n        :value=\"(modelValue / pages) * 100\"\n      />\n      <RuiButton\n        v-if=\"!hideButtons\"\n        data-id=\"next\"\n        :aria-label=\"arrowButtons ? 'Next' : undefined\"\n        :disabled=\"modelValue >= pages\"\n        :icon=\"arrowButtons\"\n        :size=\"arrowButtons ? 'sm' : undefined\"\n        :variant=\"arrowButtons ? 'outlined' : 'text'\"\n        :color=\"arrowButtons ? undefined : 'primary'\"\n        @click=\"onNext()\"\n      >\n        <span v-if=\"!arrowButtons\">Next</span>\n        <RuiIcon\n          v-else\n          name=\"lu-chevron-right\"\n        />\n        <template\n          v-if=\"!arrowButtons\"\n          #append\n        >\n          <RuiIcon name=\"lu-chevron-right\" />\n        </template>\n      </RuiButton>\n    </template>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/steppers/RuiFooterStepper.vue.d.ts

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from 'vue';
 import { FooterStepperVariant } from './footer-stepper-variant.js';
 export interface Props {
     pages: number;
@@ -5,7 +6,7 @@ export interface Props {
     arrowButtons?: boolean;
     hideButtons?: boolean;
 }
-type __VLS_Props = Props;
+type __VLS_Props = Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>;
 type __VLS_ModelProps = {
     modelValue?: number;
 };

package/dist/components/steppers/RuiFooterStepper.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiFooterStepper.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_unref","_Fragment","_renderList","_normalizeClass","_createBlock","RuiButton","_createSlots","_withCtx","RuiIcon","_createVNode","_createCommentVNode","_toDisplayString","RuiProgress"],"sources":["../../../src/components/steppers/RuiFooterStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { FooterStepperVariant } from '@/components/steppers/footer-stepper-variant';\nimport { footerStepperStyles } from './footer-stepper-styles';\n\nexport interface Props {\n  pages: number;\n  variant?: FooterStepperVariant;\n  arrowButtons?: boolean;\n  hideButtons?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiFooterStepper',\n});\n\nconst modelValue = defineModel<number>({ default: 1 });\n\nconst {\n  pages,\n  variant: variantProp = FooterStepperVariant.numeric,\n  arrowButtons = false,\n  hideButtons = false,\n} = defineProps<Props>();\n\nfunction onChange(delta: number): void {\n  set(modelValue, get(modelValue) + delta);\n}\n\nfunction onPrev(): void {\n  if (get(modelValue) > 1)\n    onChange(-1);\n}\n\nfunction onNext(): void {\n  if (get(modelValue) < pages)\n    onChange(1);\n}\n\nfunction onClick(index: number): void {\n  onChange(index - get(modelValue));\n}\n</script>\n\n<template>\n  <div\n    role=\"navigation\"\n    aria-label=\"Step navigation\"\n    class=\"flex items-center justify-between gap-x-4 transition-all duration-150\"\n    :data-variant=\"variantProp\"\n  >\n    <template v-if=\"variantProp === FooterStepperVariant.pill\">\n      <div\n        data-id=\"pills\"\n        class=\"flex w-full gap-x-3\"\n      >\n        <span\n          v-for=\"i in pages\"\n          :key=\"i\"\n          :aria-current=\"modelValue === i ? 'step' : undefined\"\n          :class=\"footerStepperStyles.pill({ active: modelValue === i })\"\n        />\n      </div>\n    </template>\n    <template v-else>\n      <RuiButton\n        v-if=\"!hideButtons\"\n        data-id=\"prev\"\n        :aria-label=\"arrowButtons ? 'Previous' : undefined\"\n        :disabled=\"modelValue <= 1\"\n        :icon=\"arrowButtons\"\n        :size=\"arrowButtons ? 'sm' : undefined\"\n        :variant=\"arrowButtons ? 'outlined' : 'text'\"\n        :color=\"arrowButtons ? undefined : 'primary'\"\n        @click=\"onPrev()\"\n      >\n        <template\n          v-if=\"!arrowButtons\"\n          #prepend\n        >\n          <RuiIcon name=\"lu-chevron-left\" />\n        </template>\n        <span v-if=\"!arrowButtons\">Back</span>\n        <RuiIcon\n          v-else\n          name=\"lu-chevron-left\"\n        />\n      </RuiButton>\n      <span\n        v-if=\"variantProp === FooterStepperVariant.numeric\"\n        data-id=\"numeric\"\n        class=\"text-sm tabular-nums text-rui-text-secondary\"\n      >\n        {{ modelValue }}/{{ pages }}\n      </span>\n      <div\n        v-else-if=\"variantProp === FooterStepperVariant.bullet\"\n        data-id=\"bullets\"\n        class=\"flex items-center gap-x-1.5\"\n      >\n        <button\n          v-for=\"i in pages\"\n          :key=\"i\"\n          type=\"button\"\n          :aria-label=\"`Step ${i}`\"\n          :aria-current=\"modelValue === i ? 'step' : undefined\"\n          :class=\"footerStepperStyles.bullet({ active: modelValue === i })\"\n          @click=\"onClick(i)\"\n        />\n      </div>\n      <RuiProgress\n        v-else-if=\"variantProp === FooterStepperVariant.progress\"\n        class=\"max-w-[60%]\"\n        color=\"primary\"\n        :value=\"(modelValue / pages) * 100\"\n      />\n      <RuiButton\n        v-if=\"!hideButtons\"\n        data-id=\"next\"\n        :aria-label=\"arrowButtons ? 'Next' : undefined\"\n        :disabled=\"modelValue >= pages\"\n        :icon=\"arrowButtons\"\n        :size=\"arrowButtons ? 'sm' : undefined\"\n        :variant=\"arrowButtons ? 'outlined' : 'text'\"\n        :color=\"arrowButtons ? undefined : 'primary'\"\n        @click=\"onNext()\"\n      >\n        <span v-if=\"!arrowButtons\">Next</span>\n        <RuiIcon\n          v-else\n          name=\"lu-chevron-right\"\n        />\n        <template\n          v-if=\"!arrowButtons\"\n          #append\n        >\n          <RuiIcon name=\"lu-chevron-right\" />\n        </template>\n      </RuiButton>\n    </template>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiFooterStepper.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_unref","_Fragment","_renderList","_normalizeClass","_createBlock","RuiButton","_createSlots","_withCtx","RuiIcon","_createVNode","_createCommentVNode","_toDisplayString","RuiProgress"],"sources":["../../../src/components/steppers/RuiFooterStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { FooterStepperVariant } from '@/components/steppers/footer-stepper-variant';\nimport { footerStepperStyles } from './footer-stepper-styles';\n\nexport interface Props {\n  pages: number;\n  variant?: FooterStepperVariant;\n  arrowButtons?: boolean;\n  hideButtons?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiFooterStepper',\n});\n\nconst modelValue = defineModel<number>({ default: 1 });\n\nconst {\n  pages,\n  variant: variantProp = FooterStepperVariant.numeric,\n  arrowButtons = false,\n  hideButtons = false,\n} = defineProps<Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>>();\n\nfunction onChange(delta: number): void {\n  set(modelValue, get(modelValue) + delta);\n}\n\nfunction onPrev(): void {\n  if (get(modelValue) > 1)\n    onChange(-1);\n}\n\nfunction onNext(): void {\n  if (get(modelValue) < pages)\n    onChange(1);\n}\n\nfunction onClick(index: number): void {\n  onChange(index - get(modelValue));\n}\n</script>\n\n<template>\n  <div\n    role=\"navigation\"\n    aria-label=\"Step navigation\"\n    class=\"flex items-center justify-between gap-x-4 transition-all duration-150\"\n    :data-variant=\"variantProp\"\n  >\n    <template v-if=\"variantProp === FooterStepperVariant.pill\">\n      <div\n        data-id=\"pills\"\n        class=\"flex w-full gap-x-3\"\n      >\n        <span\n          v-for=\"i in pages\"\n          :key=\"i\"\n          :aria-current=\"modelValue === i ? 'step' : undefined\"\n          :class=\"footerStepperStyles.pill({ active: modelValue === i })\"\n        />\n      </div>\n    </template>\n    <template v-else>\n      <RuiButton\n        v-if=\"!hideButtons\"\n        data-id=\"prev\"\n        :aria-label=\"arrowButtons ? 'Previous' : undefined\"\n        :disabled=\"modelValue <= 1\"\n        :icon=\"arrowButtons\"\n        :size=\"arrowButtons ? 'sm' : undefined\"\n        :variant=\"arrowButtons ? 'outlined' : 'text'\"\n        :color=\"arrowButtons ? undefined : 'primary'\"\n        @click=\"onPrev()\"\n      >\n        <template\n          v-if=\"!arrowButtons\"\n          #prepend\n        >\n          <RuiIcon name=\"lu-chevron-left\" />\n        </template>\n        <span v-if=\"!arrowButtons\">Back</span>\n        <RuiIcon\n          v-else\n          name=\"lu-chevron-left\"\n        />\n      </RuiButton>\n      <span\n        v-if=\"variantProp === FooterStepperVariant.numeric\"\n        data-id=\"numeric\"\n        class=\"text-sm tabular-nums text-rui-text-secondary\"\n      >\n        {{ modelValue }}/{{ pages }}\n      </span>\n      <div\n        v-else-if=\"variantProp === FooterStepperVariant.bullet\"\n        data-id=\"bullets\"\n        class=\"flex items-center gap-x-1.5\"\n      >\n        <button\n          v-for=\"i in pages\"\n          :key=\"i\"\n          type=\"button\"\n          :aria-label=\"`Step ${i}`\"\n          :aria-current=\"modelValue === i ? 'step' : undefined\"\n          :class=\"footerStepperStyles.bullet({ active: modelValue === i })\"\n          @click=\"onClick(i)\"\n        />\n      </div>\n      <RuiProgress\n        v-else-if=\"variantProp === FooterStepperVariant.progress\"\n        class=\"max-w-[60%]\"\n        color=\"primary\"\n        :value=\"(modelValue / pages) * 100\"\n      />\n      <RuiButton\n        v-if=\"!hideButtons\"\n        data-id=\"next\"\n        :aria-label=\"arrowButtons ? 'Next' : undefined\"\n        :disabled=\"modelValue >= pages\"\n        :icon=\"arrowButtons\"\n        :size=\"arrowButtons ? 'sm' : undefined\"\n        :variant=\"arrowButtons ? 'outlined' : 'text'\"\n        :color=\"arrowButtons ? undefined : 'primary'\"\n        @click=\"onNext()\"\n      >\n        <span v-if=\"!arrowButtons\">Next</span>\n        <RuiIcon\n          v-else\n          name=\"lu-chevron-right\"\n        />\n        <template\n          v-if=\"!arrowButtons\"\n          #append\n        >\n          <RuiIcon name=\"lu-chevron-right\" />\n        </template>\n      </RuiButton>\n    </template>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/steppers/RuiStepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiStepper.js","names":["_sfc_main"],"sources":["../../../src/components/steppers/RuiStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport RuiStepperIcon from '@/components/steppers/RuiStepperIcon.vue';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { StepperOrientation, StepperState, type StepperStep } from '@/types/stepper';\nimport { cn } from '@/utils/tv';\nimport { stepperStyles } from './stepper-styles';\n\nexport interface RuiStepperClassNames {\n  root?: VueClassValue;\n  title?: VueClassValue;\n  subtitle?: VueClassValue;\n}\n\nexport interface Props {\n  step?: number;\n  steps: StepperStep[];\n  iconTop?: boolean;\n  custom?: boolean;\n  classNames?: RuiStepperClassNames;\n  orientation?: StepperOrientation;\n  keepActiveVisible?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiStepper',\n  inheritAttrs: false,\n});\n\nconst {\n  step,\n  steps,\n  iconTop = false,\n  custom = false,\n  classNames,\n  orientation = StepperOrientation.horizontal,\n  keepActiveVisible = true,\n} = defineProps<Props>();\n\ndefineSlots<{\n  icon?: (props: { state: StepperState | undefined; index: number }) => any;\n}>();\n\nconst wrapperRef = useTemplateRef<HTMLDivElement>('wrapperRef');\nconst scrollTabindex = useKeyboardScroll(wrapperRef);\n\n// Shared UI for layout props (no per-item state)\nconst ui = computed<ReturnType<typeof stepperStyles>>(() => stepperStyles({ orientation, custom, iconTop }));\n\n/**\n * Resolves the stepper's classes for one step, which vary with the state that\n * step is in, which the shared `ui` above cannot carry because it resolves\n * once for the whole stepper.\n *\n * @param state - the state that step is in\n * @returns the stepper's classes with that state applied\n */\nfunction stepUi(state: StepperState): ReturnType<typeof stepperStyles> {\n  return stepperStyles({ orientation, custom, iconTop, state });\n}\n\n// automatically set step state to stepper.\nconst renderedStep = computed<StepperStep[]>(() => {\n  if (step === undefined)\n    return steps;\n\n  return steps.map((item, index) => {\n    let stepStatus: StepperState = StepperState.inactive;\n\n    if (index + 1 === step)\n      stepStatus = StepperState.active;\n\n    if (index + 1 < step)\n      stepStatus = StepperState.done;\n\n    return {\n      ...item,\n      state: stepStatus,\n    };\n  });\n});\n\nfunction resolveState(state: StepperState | undefined): StepperState {\n  return state ?? StepperState.inactive;\n}\n\nwatch(() => step, () => {\n  if (!keepActiveVisible || orientation !== StepperOrientation.horizontal) {\n    return;\n  }\n\n  nextTick(() => {\n    const elem = get(wrapperRef);\n    if (!elem) {\n      return;\n    }\n    const activeStep = elem.querySelector('[data-active]');\n    activeStep?.scrollIntoView?.({\n      behavior: 'smooth',\n      inline: 'center',\n    });\n  });\n});\n</script>\n\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :tabindex=\"scrollTabindex\"\n    role=\"list\"\n    aria-label=\"Progress steps\"\n    :class=\"ui.root({ class: cn([classNames?.root, $attrs.class]) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    :data-orientation=\"orientation\"\n    :data-icon-top=\"iconTop || undefined\"\n    :data-custom=\"custom || undefined\"\n  >\n    <template\n      v-for=\"({ title, description, state, loading }, index) in renderedStep\"\n      :key=\"index\"\n    >\n      <!-- a list may hold only its items, so the connector is drawn but kept out of the accessibility tree -->\n      <hr\n        v-if=\"index > 0\"\n        aria-hidden=\"true\"\n        :class=\"ui.divider()\"\n      />\n      <div\n        role=\"listitem\"\n        :aria-current=\"state === StepperState.active ? 'step' : undefined\"\n        :data-state=\"resolveState(state)\"\n        :data-active=\"state === StepperState.active || undefined\"\n        :class=\"stepUi(resolveState(state)).step()\"\n      >\n        <slot\n          name=\"icon\"\n          v-bind=\"{ state, index: index + 1 }\"\n        >\n          <div class=\"relative flex py-2\">\n            <RuiStepperIcon\n              :index=\"index + 1\"\n              :state=\"state\"\n              :size=\"custom ? 'lg' : 'md'\"\n            />\n            <RuiProgress\n              v-if=\"loading\"\n              class=\"absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2\"\n              :size=\"custom ? 40 : 32\"\n              variant=\"indeterminate\"\n              circular\n              thickness=\"2\"\n              color=\"primary\"\n            />\n          </div>\n        </slot>\n        <div\n          v-if=\"title || description\"\n          :class=\"ui.label()\"\n          data-id=\"stepper-label\"\n        >\n          <span\n            v-if=\"title\"\n            :class=\"[stepUi(resolveState(state)).title(), custom && classNames?.title]\"\n            class=\"text-subtitle-2\"\n          >\n            {{ title }}\n          </span>\n          <span\n            v-if=\"description\"\n            :class=\"[stepUi(resolveState(state)).subtitle(), custom && classNames?.subtitle]\"\n            class=\"text-caption\"\n          >\n            {{ description }}\n          </span>\n        </div>\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiStepper.js","names":["_sfc_main"],"sources":["../../../src/components/steppers/RuiStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue';\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport RuiStepperIcon from '@/components/steppers/RuiStepperIcon.vue';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { StepperOrientation, StepperState, type StepperStep } from '@/types/stepper';\nimport { cn } from '@/utils/tv';\nimport { stepperStyles } from './stepper-styles';\n\nexport interface RuiStepperClassNames {\n  root?: VueClassValue;\n  title?: VueClassValue;\n  subtitle?: VueClassValue;\n}\n\nexport interface Props {\n  step?: number;\n  steps: StepperStep[];\n  iconTop?: boolean;\n  custom?: boolean;\n  classNames?: RuiStepperClassNames;\n  orientation?: StepperOrientation;\n  keepActiveVisible?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiStepper',\n  inheritAttrs: false,\n});\n\nconst {\n  step,\n  steps,\n  iconTop = false,\n  custom = false,\n  classNames,\n  orientation = StepperOrientation.horizontal,\n  keepActiveVisible = true,\n} = defineProps<Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>>();\n\ndefineSlots<{\n  icon?: (props: { state: StepperState | undefined; index: number }) => any;\n}>();\n\nconst wrapperRef = useTemplateRef<HTMLDivElement>('wrapperRef');\nconst scrollTabindex = useKeyboardScroll(wrapperRef);\n\n// Shared UI for layout props (no per-item state)\nconst ui = computed<ReturnType<typeof stepperStyles>>(() => stepperStyles({ orientation, custom, iconTop }));\n\n/**\n * Resolves the stepper's classes for one step, which vary with the state that\n * step is in, which the shared `ui` above cannot carry because it resolves\n * once for the whole stepper.\n *\n * @param state - the state that step is in\n * @returns the stepper's classes with that state applied\n */\nfunction stepUi(state: StepperState): ReturnType<typeof stepperStyles> {\n  return stepperStyles({ orientation, custom, iconTop, state });\n}\n\n// automatically set step state to stepper.\nconst renderedStep = computed<StepperStep[]>(() => {\n  if (step === undefined)\n    return steps;\n\n  return steps.map((item, index) => {\n    let stepStatus: StepperState = StepperState.inactive;\n\n    if (index + 1 === step)\n      stepStatus = StepperState.active;\n\n    if (index + 1 < step)\n      stepStatus = StepperState.done;\n\n    return {\n      ...item,\n      state: stepStatus,\n    };\n  });\n});\n\nfunction resolveState(state: StepperState | undefined): StepperState {\n  return state ?? StepperState.inactive;\n}\n\nwatch(() => step, () => {\n  if (!keepActiveVisible || orientation !== StepperOrientation.horizontal) {\n    return;\n  }\n\n  nextTick(() => {\n    const elem = get(wrapperRef);\n    if (!elem) {\n      return;\n    }\n    const activeStep = elem.querySelector('[data-active]');\n    activeStep?.scrollIntoView?.({\n      behavior: 'smooth',\n      inline: 'center',\n    });\n  });\n});\n</script>\n\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :tabindex=\"scrollTabindex\"\n    role=\"list\"\n    aria-label=\"Progress steps\"\n    :class=\"ui.root({ class: cn([classNames?.root, $attrs.class]) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    :data-orientation=\"orientation\"\n    :data-icon-top=\"iconTop || undefined\"\n    :data-custom=\"custom || undefined\"\n  >\n    <template\n      v-for=\"({ title, description, state, loading }, index) in renderedStep\"\n      :key=\"index\"\n    >\n      <!-- a list may hold only its items, so the connector is drawn but kept out of the accessibility tree -->\n      <hr\n        v-if=\"index > 0\"\n        aria-hidden=\"true\"\n        :class=\"ui.divider()\"\n      />\n      <div\n        role=\"listitem\"\n        :aria-current=\"state === StepperState.active ? 'step' : undefined\"\n        :data-state=\"resolveState(state)\"\n        :data-active=\"state === StepperState.active || undefined\"\n        :class=\"stepUi(resolveState(state)).step()\"\n      >\n        <slot\n          name=\"icon\"\n          v-bind=\"{ state, index: index + 1 }\"\n        >\n          <div class=\"relative flex py-2\">\n            <RuiStepperIcon\n              :index=\"index + 1\"\n              :state=\"state\"\n              :size=\"custom ? 'lg' : 'md'\"\n            />\n            <RuiProgress\n              v-if=\"loading\"\n              class=\"absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2\"\n              :size=\"custom ? 40 : 32\"\n              variant=\"indeterminate\"\n              circular\n              thickness=\"2\"\n              color=\"primary\"\n            />\n          </div>\n        </slot>\n        <div\n          v-if=\"title || description\"\n          :class=\"ui.label()\"\n          data-id=\"stepper-label\"\n        >\n          <span\n            v-if=\"title\"\n            :class=\"[stepUi(resolveState(state)).title(), custom && classNames?.title]\"\n            class=\"text-subtitle-2\"\n          >\n            {{ title }}\n          </span>\n          <span\n            v-if=\"description\"\n            :class=\"[stepUi(resolveState(state)).subtitle(), custom && classNames?.subtitle]\"\n            class=\"text-caption\"\n          >\n            {{ description }}\n          </span>\n        </div>\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/steppers/RuiStepper.vue.d.ts

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from 'vue';
 import type { VueClassValue } from '../../types/class-value.js';
 import { StepperOrientation, StepperState, type StepperStep } from '../../types/stepper.js';
 export interface RuiStepperClassNames {
@@ -14,13 +15,14 @@ export interface Props {
     orientation?: StepperOrientation;
     keepActiveVisible?: boolean;
 }
+type __VLS_Props = Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>;
 type __VLS_Slots = {
     icon?: (props: {
         state: StepperState | undefined;
         index: number;
     }) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/steppers/RuiStepper.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiStepper.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createElementBlock","_mergeProps","_unref","_Fragment","_renderList","_normalizeClass","_createCommentVNode","_createElementVNode","_renderSlot","_createVNode","RuiStepperIcon","_createBlock","RuiProgress","_toDisplayString"],"sources":["../../../src/components/steppers/RuiStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport RuiStepperIcon from '@/components/steppers/RuiStepperIcon.vue';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { StepperOrientation, StepperState, type StepperStep } from '@/types/stepper';\nimport { cn } from '@/utils/tv';\nimport { stepperStyles } from './stepper-styles';\n\nexport interface RuiStepperClassNames {\n  root?: VueClassValue;\n  title?: VueClassValue;\n  subtitle?: VueClassValue;\n}\n\nexport interface Props {\n  step?: number;\n  steps: StepperStep[];\n  iconTop?: boolean;\n  custom?: boolean;\n  classNames?: RuiStepperClassNames;\n  orientation?: StepperOrientation;\n  keepActiveVisible?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiStepper',\n  inheritAttrs: false,\n});\n\nconst {\n  step,\n  steps,\n  iconTop = false,\n  custom = false,\n  classNames,\n  orientation = StepperOrientation.horizontal,\n  keepActiveVisible = true,\n} = defineProps<Props>();\n\ndefineSlots<{\n  icon?: (props: { state: StepperState | undefined; index: number }) => any;\n}>();\n\nconst wrapperRef = useTemplateRef<HTMLDivElement>('wrapperRef');\nconst scrollTabindex = useKeyboardScroll(wrapperRef);\n\n// Shared UI for layout props (no per-item state)\nconst ui = computed<ReturnType<typeof stepperStyles>>(() => stepperStyles({ orientation, custom, iconTop }));\n\n/**\n * Resolves the stepper's classes for one step, which vary with the state that\n * step is in, which the shared `ui` above cannot carry because it resolves\n * once for the whole stepper.\n *\n * @param state - the state that step is in\n * @returns the stepper's classes with that state applied\n */\nfunction stepUi(state: StepperState): ReturnType<typeof stepperStyles> {\n  return stepperStyles({ orientation, custom, iconTop, state });\n}\n\n// automatically set step state to stepper.\nconst renderedStep = computed<StepperStep[]>(() => {\n  if (step === undefined)\n    return steps;\n\n  return steps.map((item, index) => {\n    let stepStatus: StepperState = StepperState.inactive;\n\n    if (index + 1 === step)\n      stepStatus = StepperState.active;\n\n    if (index + 1 < step)\n      stepStatus = StepperState.done;\n\n    return {\n      ...item,\n      state: stepStatus,\n    };\n  });\n});\n\nfunction resolveState(state: StepperState | undefined): StepperState {\n  return state ?? StepperState.inactive;\n}\n\nwatch(() => step, () => {\n  if (!keepActiveVisible || orientation !== StepperOrientation.horizontal) {\n    return;\n  }\n\n  nextTick(() => {\n    const elem = get(wrapperRef);\n    if (!elem) {\n      return;\n    }\n    const activeStep = elem.querySelector('[data-active]');\n    activeStep?.scrollIntoView?.({\n      behavior: 'smooth',\n      inline: 'center',\n    });\n  });\n});\n</script>\n\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :tabindex=\"scrollTabindex\"\n    role=\"list\"\n    aria-label=\"Progress steps\"\n    :class=\"ui.root({ class: cn([classNames?.root, $attrs.class]) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    :data-orientation=\"orientation\"\n    :data-icon-top=\"iconTop || undefined\"\n    :data-custom=\"custom || undefined\"\n  >\n    <template\n      v-for=\"({ title, description, state, loading }, index) in renderedStep\"\n      :key=\"index\"\n    >\n      <!-- a list may hold only its items, so the connector is drawn but kept out of the accessibility tree -->\n      <hr\n        v-if=\"index > 0\"\n        aria-hidden=\"true\"\n        :class=\"ui.divider()\"\n      />\n      <div\n        role=\"listitem\"\n        :aria-current=\"state === StepperState.active ? 'step' : undefined\"\n        :data-state=\"resolveState(state)\"\n        :data-active=\"state === StepperState.active || undefined\"\n        :class=\"stepUi(resolveState(state)).step()\"\n      >\n        <slot\n          name=\"icon\"\n          v-bind=\"{ state, index: index + 1 }\"\n        >\n          <div class=\"relative flex py-2\">\n            <RuiStepperIcon\n              :index=\"index + 1\"\n              :state=\"state\"\n              :size=\"custom ? 'lg' : 'md'\"\n            />\n            <RuiProgress\n              v-if=\"loading\"\n              class=\"absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2\"\n              :size=\"custom ? 40 : 32\"\n              variant=\"indeterminate\"\n              circular\n              thickness=\"2\"\n              color=\"primary\"\n            />\n          </div>\n        </slot>\n        <div\n          v-if=\"title || description\"\n          :class=\"ui.label()\"\n          data-id=\"stepper-label\"\n        >\n          <span\n            v-if=\"title\"\n            :class=\"[stepUi(resolveState(state)).title(), custom && classNames?.title]\"\n            class=\"text-subtitle-2\"\n          >\n            {{ title }}\n          </span>\n          <span\n            v-if=\"description\"\n            :class=\"[stepUi(resolveState(state)).subtitle(), custom && classNames?.subtitle]\"\n            class=\"text-caption\"\n          >\n            {{ description }}\n          </span>\n        </div>\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiStepper.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createElementBlock","_mergeProps","_unref","_Fragment","_renderList","_normalizeClass","_createCommentVNode","_createElementVNode","_renderSlot","_createVNode","RuiStepperIcon","_createBlock","RuiProgress","_toDisplayString"],"sources":["../../../src/components/steppers/RuiStepper.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue';\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport RuiStepperIcon from '@/components/steppers/RuiStepperIcon.vue';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { StepperOrientation, StepperState, type StepperStep } from '@/types/stepper';\nimport { cn } from '@/utils/tv';\nimport { stepperStyles } from './stepper-styles';\n\nexport interface RuiStepperClassNames {\n  root?: VueClassValue;\n  title?: VueClassValue;\n  subtitle?: VueClassValue;\n}\n\nexport interface Props {\n  step?: number;\n  steps: StepperStep[];\n  iconTop?: boolean;\n  custom?: boolean;\n  classNames?: RuiStepperClassNames;\n  orientation?: StepperOrientation;\n  keepActiveVisible?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiStepper',\n  inheritAttrs: false,\n});\n\nconst {\n  step,\n  steps,\n  iconTop = false,\n  custom = false,\n  classNames,\n  orientation = StepperOrientation.horizontal,\n  keepActiveVisible = true,\n} = defineProps<Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>>();\n\ndefineSlots<{\n  icon?: (props: { state: StepperState | undefined; index: number }) => any;\n}>();\n\nconst wrapperRef = useTemplateRef<HTMLDivElement>('wrapperRef');\nconst scrollTabindex = useKeyboardScroll(wrapperRef);\n\n// Shared UI for layout props (no per-item state)\nconst ui = computed<ReturnType<typeof stepperStyles>>(() => stepperStyles({ orientation, custom, iconTop }));\n\n/**\n * Resolves the stepper's classes for one step, which vary with the state that\n * step is in, which the shared `ui` above cannot carry because it resolves\n * once for the whole stepper.\n *\n * @param state - the state that step is in\n * @returns the stepper's classes with that state applied\n */\nfunction stepUi(state: StepperState): ReturnType<typeof stepperStyles> {\n  return stepperStyles({ orientation, custom, iconTop, state });\n}\n\n// automatically set step state to stepper.\nconst renderedStep = computed<StepperStep[]>(() => {\n  if (step === undefined)\n    return steps;\n\n  return steps.map((item, index) => {\n    let stepStatus: StepperState = StepperState.inactive;\n\n    if (index + 1 === step)\n      stepStatus = StepperState.active;\n\n    if (index + 1 < step)\n      stepStatus = StepperState.done;\n\n    return {\n      ...item,\n      state: stepStatus,\n    };\n  });\n});\n\nfunction resolveState(state: StepperState | undefined): StepperState {\n  return state ?? StepperState.inactive;\n}\n\nwatch(() => step, () => {\n  if (!keepActiveVisible || orientation !== StepperOrientation.horizontal) {\n    return;\n  }\n\n  nextTick(() => {\n    const elem = get(wrapperRef);\n    if (!elem) {\n      return;\n    }\n    const activeStep = elem.querySelector('[data-active]');\n    activeStep?.scrollIntoView?.({\n      behavior: 'smooth',\n      inline: 'center',\n    });\n  });\n});\n</script>\n\n<template>\n  <div\n    ref=\"wrapperRef\"\n    :tabindex=\"scrollTabindex\"\n    role=\"list\"\n    aria-label=\"Progress steps\"\n    :class=\"ui.root({ class: cn([classNames?.root, $attrs.class]) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    :data-orientation=\"orientation\"\n    :data-icon-top=\"iconTop || undefined\"\n    :data-custom=\"custom || undefined\"\n  >\n    <template\n      v-for=\"({ title, description, state, loading }, index) in renderedStep\"\n      :key=\"index\"\n    >\n      <!-- a list may hold only its items, so the connector is drawn but kept out of the accessibility tree -->\n      <hr\n        v-if=\"index > 0\"\n        aria-hidden=\"true\"\n        :class=\"ui.divider()\"\n      />\n      <div\n        role=\"listitem\"\n        :aria-current=\"state === StepperState.active ? 'step' : undefined\"\n        :data-state=\"resolveState(state)\"\n        :data-active=\"state === StepperState.active || undefined\"\n        :class=\"stepUi(resolveState(state)).step()\"\n      >\n        <slot\n          name=\"icon\"\n          v-bind=\"{ state, index: index + 1 }\"\n        >\n          <div class=\"relative flex py-2\">\n            <RuiStepperIcon\n              :index=\"index + 1\"\n              :state=\"state\"\n              :size=\"custom ? 'lg' : 'md'\"\n            />\n            <RuiProgress\n              v-if=\"loading\"\n              class=\"absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2\"\n              :size=\"custom ? 40 : 32\"\n              variant=\"indeterminate\"\n              circular\n              thickness=\"2\"\n              color=\"primary\"\n            />\n          </div>\n        </slot>\n        <div\n          v-if=\"title || description\"\n          :class=\"ui.label()\"\n          data-id=\"stepper-label\"\n        >\n          <span\n            v-if=\"title\"\n            :class=\"[stepUi(resolveState(state)).title(), custom && classNames?.title]\"\n            class=\"text-subtitle-2\"\n          >\n            {{ title }}\n          </span>\n          <span\n            v-if=\"description\"\n            :class=\"[stepUi(resolveState(state)).subtitle(), custom && classNames?.subtitle]\"\n            class=\"text-caption\"\n          >\n            {{ description }}\n          </span>\n        </div>\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6CA,MAAM,aAAa,eAA+B,YAAY;EAC9D,MAAM,iBAAiB,kBAAkB,UAAU;EAGnD,MAAM,KAAK,eAAiD,cAAc;GAAE,aAAU,QAAA;GAAG,QAAK,QAAA;GAAG,SAAM,QAAA;EAAE,CAAC,CAAC;;;;;;;;;EAU3G,SAAS,OAAO,OAAuD;GACrE,OAAO,cAAc;IAAE,aAAU,QAAA;IAAG,QAAK,QAAA;IAAG,SAAM,QAAA;IAAG;GAAM,CAAC;EAC9D;EAGA,MAAM,eAAe,eAA8B;GACjD,IAAI,QAAA,SAAS,KAAA,GACX,OAAO,QAAA;GAET,OAAO,QAAA,MAAM,KAAK,MAAM,UAAU;IAChC,IAAI,aAA2B,aAAa;IAE5C,IAAI,QAAQ,MAAM,QAAA,MAChB,aAAa,aAAa;IAE5B,IAAI,QAAQ,IAAI,QAAA,MACd,aAAa,aAAa;IAE5B,OAAO;KACL,GAAG;KACH,OAAO;IACT;GACF,CAAC;EACH,CAAC;EAED,SAAS,aAAa,OAA+C;GACnE,OAAO,SAAS,aAAa;EAC/B;EAEA,YAAY,QAAA,YAAY;GACtB,IAAI,CAAC,QAAA,qBAAqB,QAAA,gBAAgB,mBAAmB,YAC3D;GAGF,eAAe;IACb,MAAM,OAAO,IAAI,UAAU;IAC3B,IAAI,CAAC,MACH;IAGF,KADwB,cAAc,eACtC,CAAA,EAAY,iBAAiB;KAC3B,UAAU;KACV,QAAQ;IACV,CAAC;GACH,CAAC;EACH,CAAC;;GAIC,OAAAC,UAAA,GAAAC,mBAuEM,OAvENC,WAuEM;IAtEA,SAAA;IAAJ,KAAI;IACH,UAAUC,MAAA,cAAA;IACX,MAAK;IACL,cAAW;IACV,OAAOA,MAAA,EAAA,CAAE,CAAC,KAAI,EAAA,OAAUA,MAAA,EAAA,CAAE,CAAA,CAAE,QAAA,YAAY,MAAMJ,KAAAA,OAAO,KAAK,CAAA,EAAA,CAAA;GAC9CA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,GAAA;IACpC,oBAAkB,QAAA;IAClB,iBAAe,QAAA,WAAW,KAAA;IAC1B,eAAa,QAAA,UAAU,KAAA;GAExBC,CAAAA,GAAAA,EAAAA,UAAA,IAAA,GAAAC,mBA2DWG,UAAA,MAAAC,WA1DiDF,MAAA,YAAA,IAAY,EAA5D,OAAO,aAAa,OAAO,WAAW,UAAK;IAC/C,OAAAH,UAAA,GAAAC,mBAAAG,UAAA,EAAA,KAAA,MAAK,GAAA,CAIH,QAAK,KADbJ,UAAA,GAAAC,mBAIE,MAAA;;KAFA,eAAY;KACX,OAAKK,eAAEH,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;IAEpBK,GAAAA,MAAAA,CAAAA,KAAAA,mBAAAA,IAAAA,IAAAA,GAAAA,mBAgDM,OAAA;KA/CJ,MAAK;KACJ,gBAAc,UAAUL,MAAA,YAAA,CAAY,CAAC,SAAM,SAAY,KAAA;KACvD,cAAY,aAAa,KAAK;KAC9B,eAAa,UAAUA,MAAA,YAAA,CAAY,CAAC,UAAU,KAAA;KAC9C,OAAKG,eAAE,OAAO,aAAa,KAAK,CAAA,CAAA,CAAG,KAAI,CAAA;IAExCG,GAAAA,CAAAA,WAoBO,KAAA,QAAA,QApBPP,WAoBO,EAAA,SAAA,KAAA,GAAA;KAlBK;KAAK,OAAS,QAAK;IAAA,CAAA,SAkBxB,CAhBLM,mBAeM,OAfN,YAeM,CAdJE,YAIEC,wBAAA;KAHC,OAAO,QAAK;KACL;KACP,MAAM,QAAA,SAAM,OAAA;;;;;IAGP,CAAA,GAAA,WADRX,UAAA,GAAAY,YAQEC,qBAAA;;KANA,OAAM;KACL,MAAM,QAAA,SAAM,KAAA;KACb,SAAQ;KACR,UAAA;KACA,WAAU;KACV,OAAM;IAKJ,GAAA,MAAA,GAAA,CAAA,MAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,CAAA,CAAA,GAAA,SAAS,eADjBb,UAAA,GAAAC,mBAmBM,OAAA;;KAjBH,OAAKK,eAAEH,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;KAChB,WAAQ;IAGA,GAAA,CAAA,SADRH,UAAA,GAAAC,mBAMO,QAAA;;KAJJ,OAAKK,eAAA,CAAA,CAAG,OAAO,aAAa,KAAK,CAAA,CAAA,CAAG,MAAK,GAAI,QAAA,UAAU,QAAA,YAAY,KAAK,GACnE,iBAAiB,CAAA;IAEpB,GAAAQ,gBAAA,KAAK,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAGF,eADRd,UAAA,GAAAC,mBAMO,QAAA;;KAJJ,OAAKK,eAAA,CAAA,CAAG,OAAO,aAAa,KAAK,CAAA,CAAA,CAAG,SAAQ,GAAI,QAAA,UAAU,QAAA,YAAY,QAAQ,GACzE,cAAc,CAAA;IAEjB,GAAAQ,gBAAA,WAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,IAAA,UAAA,CAAA,GAAA,EAAA"}

package/dist/components/tables/RuiDataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiDataTable.js","names":["_sfc_main"],"sources":["../../../src/components/tables/RuiDataTable.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object, IdType extends keyof T = keyof T\">\nimport type { GroupHeader } from '@/composables/tables/data-table/types';\nimport { dataTableStyles } from '@/components/tables/data-table-styles';\nimport { type DataTableClasses, type DataTableGroupLabel, provideDataTableContext, provideDataTableNested, useDataTableNested } from '@/components/tables/data-table/context';\nimport RuiDataTableBody from '@/components/tables/data-table/RuiDataTableBody.vue';\nimport RuiDataTableMobileSort from '@/components/tables/data-table/RuiDataTableMobileSort.vue';\nimport RuiTableHead, {\n  type GroupData,\n  type TableColumn,\n  type TableRowKeyData,\n  type TableSortData,\n} from '@/components/tables/RuiTableHead.vue';\nimport RuiTablePagination, {\n  type TablePaginationData,\n} from '@/components/tables/RuiTablePagination.vue';\nimport { GroupExpandButtonPosition } from '@/components/tables/table-props';\nimport { useTable } from '@/composables/defaults/table';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { useStickyBlockerWarning } from '@/composables/sticky-blocker';\nimport { useStickyTableHeader } from '@/composables/sticky-header';\nimport { useTableColumns } from '@/composables/tables/data-table/columns';\nimport { useTableExpansion } from '@/composables/tables/data-table/expansion';\nimport { useTableGrouping } from '@/composables/tables/data-table/grouping';\nimport { usePageScroll, useStickyBottomInset, useStickyPaginationBar } from '@/composables/tables/data-table/page-scroll';\nimport { useTablePagination } from '@/composables/tables/data-table/pagination';\nimport { useTableSelection } from '@/composables/tables/data-table/selection';\nimport { useTableSort } from '@/composables/tables/data-table/sort';\n\nexport type { GroupedTableRow, GroupHeader, TableOptions } from '@/composables/tables/data-table/types';\n\nexport interface Props<T, K extends keyof T> {\n  /**\n   * list of items for each row\n   */\n  rows: readonly T[];\n  /**\n   * the attribute used to identify each row uniquely for selection, usually `id`\n   */\n  rowAttr: K;\n  /**\n   * model for internal searching\n   */\n  search?: string;\n  /**\n   * model for items per page\n   * will be used if the `pagination` model isn't specified\n   */\n  itemsPerPage?: number;\n  /**\n   * list of column definitions\n   */\n  cols?: TableColumn<T>[];\n  /**\n   * attribute to use from column definitions to display column titles\n   */\n  columnAttr?: keyof TableColumn<T>;\n  /**\n   * flag to show a more or less spacious table\n   */\n  dense?: boolean;\n  /**\n   * flag to outline the flag with a border\n   */\n  outlined?: boolean;\n  /**\n   * should add zebra-striping to the table row\n   */\n  striped?: boolean;\n  /**\n   * flag to show loading state of the table\n   * triggers indefinite progress at the bottom of the table header\n   */\n  loading?: boolean;\n  disablePerPage?: boolean;\n  /**\n   * Maximum number of pages before the jump-to-page dropdown is replaced with\n   * a numeric input. Defaults to `500`. Forwarded to `RuiTablePagination`.\n   */\n  rangesThreshold?: number;\n  /**\n   * The text and icon shown when there are no rows, e.g.\n   * `:empty=\"\\{ icon: 'transactions-line', label: 'No transactions found' \\}\"`\n   */\n  empty?: {\n    label?: string;\n    description?: string;\n  };\n  /**\n   * Why the last read failed. Shown above any rows kept from an earlier read,\n   * or in place of the empty state; `loading` still takes precedence.\n   */\n  error?: string;\n  /** Heading for that failure. */\n  errorTitle?: string;\n  /** Label for the retry control; without one, no control is offered. */\n  retryText?: string;\n  /**\n   * Hide the pagination bar. The bar sits under the table and sticks to the bottom of the view\n   * while the table runs past it.\n   */\n  hidePagination?: boolean;\n\n  rounded?: 'sm' | 'md' | 'lg';\n  /**\n   * make expansion work like accordion\n   */\n  singleExpand?: boolean;\n  /**\n   * make table head stick to top on scroll\n   */\n  stickyHeader?: boolean;\n  stickyOffset?: number;\n  /**\n   * keep the pagination bar at the table's end instead of pinning it to the bottom of the view while\n   * the rows run past it, for a table that is one section of a longer page\n   */\n  disableStickyPagination?: boolean;\n  /**\n   * Affects how the items per page work across the app.\n   * When true, changing the items per page setting in one table will affect other tables.\n   */\n  globalItemsPerPage?: boolean;\n  groupExpandButtonPosition?: GroupExpandButtonPosition;\n  disabledRows?: readonly T[];\n  multiPageSelect?: boolean;\n  itemClass?: ((item: T) => string) | string;\n  /**\n   * Render each row as a stacked card instead of a table row once the measured\n   * width is narrower than this width (in pixels). Columns flagged with\n   * `mobileHidden` are dropped in this layout. Falls back to the global\n   * `mobileBreakpoint` table default; leave both unset to keep the default table\n   * layout at every width.\n   */\n  mobileBreakpoint?: number;\n  /**\n   * What the `mobileBreakpoint` is measured against: the browser `viewport`\n   * (default) or this table's own `container` width. Use `container` when the\n   * table lives in a narrow region of a wider window. Falls back to the global\n   * `mobileBreakpointBasis` table default.\n   */\n  mobileBreakpointBasis?: 'viewport' | 'container';\n  /**\n   * Force the stacked mobile card layout on (`true`) or off (`false`),\n   * regardless of `mobileBreakpoint`. Leave unset to derive it from the width.\n   */\n  mobile?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiDataTable',\n});\n\nconst selectedData = defineModel<T[IdType][]>();\n\nconst expanded = defineModel<T[]>('expanded');\n\nconst [pagination, paginationModifiers] = defineModel<TablePaginationData, 'external'>('pagination');\n\nconst [sort, sortModifiers] = defineModel<TableSortData<T>, 'external'>('sort');\n\nconst group = defineModel<TableRowKeyData<T>>('group');\n\nconst collapsed = defineModel<T[]>('collapsed');\n\nconst {\n  rows,\n  rowAttr,\n  search = '',\n  itemsPerPage = 10,\n  cols,\n  columnAttr = 'label',\n  dense = false,\n  outlined = false,\n  striped = false,\n  loading = false,\n  disablePerPage = false,\n  rangesThreshold = 500,\n  empty = { label: 'No item found' },\n  error = '',\n  errorTitle = '',\n  retryText = '',\n  hidePagination = false,\n  rounded = 'md',\n  singleExpand = false,\n  stickyHeader = false,\n  stickyOffset,\n  disableStickyPagination = false,\n  globalItemsPerPage = undefined,\n  groupExpandButtonPosition = GroupExpandButtonPosition.start,\n  disabledRows,\n  multiPageSelect = false,\n  itemClass = '',\n  mobileBreakpoint,\n  mobileBreakpointBasis,\n  mobile,\n} = defineProps<Props<T, IdType>>();\n\nconst emit = defineEmits<{\n  'update:options': [value: { pagination?: TablePaginationData; sort?: TableSortData<T> }];\n  'copy:group': [value: GroupData<T>];\n  'retry': [];\n}>();\n\nconst slots = defineSlots<Partial<\n  Record<`header.${string}`, (props: { column: TableColumn<T> }) => any> &\n  Record<`item.${string}`, (props: { column: TableColumn<T>; row: T; index: number }) => any> & {\n    'body.prepend': (props: { colspan: number }) => any;\n    'body.append': (props: { colspan: number }) => any;\n    'group.header': (props: {\n      colspan: number;\n      header: GroupHeader<T>;\n      isOpen: boolean;\n      toggle: () => void;\n    }) => any;\n    'group.header.content': (props: { header: GroupHeader<T>; groupKey: string }) => any;\n    'expanded-item': (props: { row: T; index: number }) => any;\n    /**\n     * A full-width row after every row, read as the second half of the same item: no divider between\n     * them, one hover, the row's selected or open shade and stripe. For a long field, such as notes,\n     * that would otherwise widen the table. It comes before an open expanded panel.\n     */\n    'row-append': (props: { row: T; index: number }) => any;\n    'no-data': () => any;\n    'empty-description': () => any;\n    'error': () => any;\n    /**\n     * Rows under the body, such as a total, rendered in `<tfoot>`. Its cells take the body cells'\n     * padding, height (dense included) and text, under `:where()`, so a cell's own classes still win.\n     */\n    'tfoot': () => any;\n  }\n>>();\n\nconst tableDefaults = useTable();\n\nconst tableWrapper = useTemplateRef<HTMLElement>('tableWrapper');\nconst paginationSentinel = useTemplateRef<HTMLElement>('paginationSentinel');\nconst paginationBar = useTemplateRef<InstanceType<typeof RuiTablePagination>>('paginationBar');\nconst { width: windowWidth } = useWindowSize();\nconst { width: containerWidth } = useElementSize(tableWrapper);\n\n// Per-table props win, then the global table defaults.\nconst resolvedMobileBreakpoint = computed<number | undefined>(() => {\n  if (mobileBreakpoint !== undefined)\n    return mobileBreakpoint;\n  const globalBreakpoint = tableDefaults.mobileBreakpoint;\n  return globalBreakpoint === undefined ? undefined : get(globalBreakpoint);\n});\nconst resolvedMobileBasis = computed<'viewport' | 'container'>(() => {\n  if (mobileBreakpointBasis !== undefined)\n    return mobileBreakpointBasis;\n  const globalBasis = tableDefaults.mobileBreakpointBasis;\n  return globalBasis === undefined ? 'viewport' : get(globalBasis);\n});\n\n/**\n * Whether the stacked card layout is showing.\n *\n * Vue coerces an absent Boolean prop to `false`, so `mobile` cannot say\n * \"unset\": with no breakpoint configured it is the manual switch, defaulting\n * to desktop, and with one configured the breakpoint drives the layout while\n * `mobile === true` can still force the stacked layout on.\n */\nconst isMobile = computed<boolean>(() => {\n  const breakpoint = get(resolvedMobileBreakpoint);\n  if (breakpoint === undefined)\n    return mobile;\n  if (mobile)\n    return true;\n  // `containerWidth` is 0 until measured; the viewport keeps the first paint off mobile\n  const width = get(resolvedMobileBasis) === 'container'\n    ? (get(containerWidth) || get(windowWidth))\n    : get(windowWidth);\n  return width < breakpoint;\n});\n\nconst stickyHeaderOffset = computed<number | undefined>(() =>\n  stickyOffset !== undefined ? stickyOffset : get(tableDefaults.stickyOffset),\n);\n\n/**\n * A table rendered inside an expanded row must not pin its own toolbar: only\n * the outermost table sticks, otherwise the bars stack and collide.\n */\nconst isNestedTable = useDataTableNested();\nprovideDataTableNested();\n\n/**\n * On mobile there is no column header to pin, so `stickyHeader` pins the\n * pagination and sort toolbar instead while the card list scrolls.\n */\nconst stickyMobileToolbar = computed<boolean>(() => stickyHeader && get(isMobile) && !isNestedTable);\n\nconst table = useTemplateRef<HTMLTableElement>('table');\nconst tableScroller = useTemplateRef<HTMLElement>('tableScroller');\nconst scrollerTabindex = useKeyboardScroll(tableScroller);\n\nconst { stick } = useStickyTableHeader(\n  () => stickyHeader,\n  stickyHeaderOffset,\n  { table },\n);\n\nconst { width: scrollerWidth } = useElementSize(tableScroller);\n\n/**\n * The visible width of the table, which an expanded row caps its content to.\n * Without the cap a wide panel, such as a nested table, sets the minimum width\n * of the whole table and pushes every column past the scroller. `initial`\n * resets the variable, so a nested table never inherits its parent's width.\n */\nconst viewportStyle = computed<Record<string, string>>(() => {\n  const width = get(scrollerWidth);\n  return { '--rui-table-viewport': width > 0 && !get(isMobile) ? `${width}px` : 'initial' };\n});\n\nconst { expandable, isExpanded, onToggleExpand } = useTableExpansion<T, IdType>(\n  { rowAttr, singleExpand },\n  { expanded },\n);\n\nfunction emitUpdateOptions(opts: { sort?: TableSortData<T>; pagination?: TablePaginationData }): void {\n  emit('update:options', opts);\n}\n\nconst {\n  sortData,\n  sortedMap,\n  sorted,\n  onSort: applySort,\n} = useTableSort<T>(\n  { rows: () => rows, search: () => search, sortModifiersExternal: sortModifiers.external },\n  {\n    sort,\n    pagination,\n    emitUpdateOptions,\n  },\n);\n\nconst {\n  groupKeys,\n  groupKey,\n  grouped,\n  mappedGroups,\n  isExpandedGroup,\n  isHiddenRow,\n  onToggleExpandGroup,\n  onUngroup,\n} = useTableGrouping<T, IdType>(\n  { rowAttr },\n  {\n    group,\n    collapsed,\n    sorted,\n  },\n);\n\nconst {\n  paginationData,\n  filtered,\n  setInternalTotal,\n  resetPagination,\n} = useTablePagination<T>(\n  {\n    itemsPerPage,\n    paginationModifiersExternal: paginationModifiers.external,\n    globalItemsPerPage,\n  },\n  {\n    pagination,\n    grouped,\n    isHiddenRow,\n    sort,\n    emitUpdateOptions,\n    tableDefaults,\n  },\n);\n\nconst noData = computed<boolean>(() => get(filtered).length === 0);\n\n// one loader at a time: the header bar marks a refetch over rows, and an empty table shows only its spinner row\nconst headerLoading = computed<boolean>(() => loading && !get(noData));\n\n/**\n * A nested table (a breakdown in an expanded row) that pages its own rows drops the bar when they all fit\n * the smallest page size: no control on it could change what shows, and in a breakdown it is pure noise.\n * A top-level table keeps it as a summary; a server-paged one keeps it, since only the server knows the total.\n */\nconst fitsSmallestPage = computed<boolean>(() => {\n  if (!isNestedTable || paginationModifiers.external)\n    return false;\n  const { limits } = get(paginationData);\n  const sizes = limits ?? toValue(tableDefaults.limits);\n  // the rows themselves, not the pagination total, which is only filled in after mount\n  return sizes.length > 0 && get(sorted).length <= Math.min(...sizes);\n});\n\nconst showPagination = computed<boolean>(() => !!get(paginationData) && !hidePagination && !get(fitsSmallestPage));\n\n/**\n * The one pagination bar sticks to the bottom of the view, so a long page can be turned without\n * scrolling down to it. `position: sticky` keeps it inside this table, so stacked and side-by-side\n * tables each hold their own bar. A nested table's bar stays in place, since two stuck bars would\n * stack, as does the bar of a table with `disableStickyPagination`.\n */\nconst paginationMayStick = computed<boolean>(() => !disableStickyPagination && !isNestedTable);\nconst canStickPagination = useStickyPaginationBar(tableWrapper, () => get(paginationMayStick) && get(showPagination));\nconst paginationStuck = computed<boolean>(() => get(paginationMayStick) && get(canStickPagination));\n\nconst paginationBarElement = computed<HTMLElement | undefined>(() => {\n  const element: unknown = get(paginationBar)?.$el;\n  return element instanceof HTMLElement ? element : undefined;\n});\n\n// while the bar is stuck to the page, `--rui-sticky-bottom` tells the page's floating parts to rise above it\nuseStickyBottomInset(paginationSentinel, paginationBarElement, paginationStuck);\n\nuseStickyBlockerWarning(paginationBarElement, () => get(paginationMayStick) && get(showPagination), 'The RuiDataTable pagination bar');\n\n/**\n * Grouped columns leave the column list, so their labels come from `cols`.\n */\nconst groupLabels = computed<DataTableGroupLabel[]>(() => get(groupKeys).map((key) => {\n  const label = cols?.find(column => column.key === key)?.[columnAttr];\n  return {\n    key: String(key),\n    label: label === undefined || label === null ? String(key) : String(label),\n  };\n}));\n\n/** Each group's list starts with its header entry, which is not a row. */\nfunction getGroupSize(identifier: string): number {\n  return Math.max((get(mappedGroups)[identifier]?.length ?? 0) - 1, 0);\n}\n\nconst ui = computed<ReturnType<typeof dataTableStyles>>(() => dataTableStyles({\n  outlined,\n  rounded,\n  dense,\n  striped,\n  mobile: get(isMobile),\n}));\n\nconst { columns, colspan, headerSlots, cellValue } = useTableColumns<T, IdType>({\n  cols: () => cols,\n  columnAttr,\n  rows: () => rows,\n  expandable,\n  groupKeys,\n  selectedData,\n  slots,\n  isMobile,\n  tdResolver: options => get(ui).td(options),\n});\n\nconst showMobileSort = computed<boolean>(() =>\n  get(isMobile) && !!get(sortData) && get(columns).some(column => column.sortable),\n);\n\nconst ITEM_SLOT_PREFIX = 'item.';\n\n// Slot keys are static for the component lifetime, so no reactivity is needed\nconst itemSlotKeys: Set<string> = new Set(\n  Object.keys(slots)\n    .filter((key): key is `item.${string}` => key.startsWith(ITEM_SLOT_PREFIX))\n    .map(key => key.slice(ITEM_SLOT_PREFIX.length)),\n);\n\nconst {\n  isAllSelected,\n  indeterminate,\n  isSelected,\n  isDisabledRow,\n  onToggleAll,\n  onSelect,\n  onCheckboxClick,\n  deselectRemovedRows,\n  resetCheckboxShiftState,\n} = useTableSelection<T, IdType>(\n  { rowAttr, multiPageSelect, disabledRows: () => disabledRows },\n  { selectedData, filtered },\n);\n\n/**\n * Sorting clears the selection. That lives here rather than in either\n * composable, which would make sort and selection depend on each other.\n */\nfunction onSort(payload: Parameters<typeof applySort>[0]): void {\n  applySort(payload);\n  if (!multiPageSelect)\n    onToggleAll(false);\n  resetCheckboxShiftState();\n}\n\nconst { revealTableTop } = usePageScroll(tableWrapper, stickyHeaderOffset);\n\nasync function onPaginate(): Promise<void> {\n  if ((get(expanded)?.length ?? 0) > 0)\n    set(expanded, []);\n  if (!multiPageSelect)\n    onToggleAll(false);\n  resetCheckboxShiftState();\n  await revealTableTop();\n}\n\n// Reset pagination page to 1 on search query change\nwatch(() => search, () => {\n  resetPagination();\n  onToggleAll(false);\n  resetCheckboxShiftState();\n});\n\nwatch(sorted, (items) => {\n  if (!multiPageSelect)\n    deselectRemovedRows();\n  setInternalTotal(items);\n});\n\nonMounted(() => {\n  setInternalTotal(get(sorted));\n});\n\nconst classes = computed<DataTableClasses>(() => {\n  const s = get(ui);\n  return {\n    td: s.td(),\n    tr: s.tr(),\n    trSelected: s.tr({ rowVariant: 'selected' }),\n    trExpandable: s.tr({ rowVariant: 'expandable' }),\n    trExpandedParent: s.tr({ rowVariant: 'expandedParent' }),\n    trGroup: s.tr({ rowVariant: 'group' }),\n    trEmpty: s.tr({ rowVariant: 'empty' }),\n    checkbox: s.checkbox(),\n    tbody: s.tbody(),\n    tbodyLoader: s.tbodyLoader(),\n  };\n});\n\nprovideDataTableContext<T, IdType>({\n  // Reactive (ComputedRef/Ref): destructuring preserves reactivity via Vue template auto-unwrap\n  classes,\n  columns,\n  colspan,\n  expandable,\n  groupKey,\n  groupLabels,\n  isMobile,\n  selectedData,\n  // Static values\n  cellValue,\n  columnAttr,\n  dense,\n  getGroupSize,\n  getRowId: (row: T) => row[rowAttr],\n  itemSlotKeys,\n  groupExpandButtonPosition,\n  isDisabledRow,\n  isExpanded,\n  isExpandedGroup,\n  isSelected,\n  itemClass,\n  onCheckboxClick,\n  onCopyGroup: (header: GroupHeader<T>) => emit('copy:group', { key: get(groupKey) ?? '', value: header.group }),\n  onSelect,\n  onToggleExpand,\n  onToggleExpandGroup,\n  onUngroup,\n});\n</script>\n\n<template>\n  <div\n    ref=\"tableWrapper\"\n    :class=\"ui.wrapper()\"\n    data-id=\"table-wrapper\"\n  >\n    <div\n      v-if=\"showMobileSort\"\n      :class=\"stickyMobileToolbar ? 'sticky z-rui-raised bg-rui-background pt-2' : 'contents'\"\n      :style=\"stickyMobileToolbar ? { top: `${stickyHeaderOffset ?? 0}px` } : undefined\"\n      data-id=\"table-mobile-toolbar-sticky\"\n    >\n      <div\n        class=\"flex justify-end p-2\"\n        data-id=\"table-mobile-toolbar\"\n      >\n        <RuiDataTableMobileSort\n          :columns=\"columns\"\n          :column-attr=\"columnAttr\"\n          :sorted-map=\"sortedMap\"\n          :dense=\"dense\"\n          @sort=\"onSort($event)\"\n        />\n      </div>\n    </div>\n    <div\n      ref=\"tableScroller\"\n      :class=\"[ui.scroller(), isMobile && !showMobileSort ? 'pt-2' : '']\"\n      :tabindex=\"scrollerTabindex\"\n      data-id=\"table-scroller\"\n    >\n      <table\n        ref=\"table\"\n        :class=\"ui.table()\"\n        :style=\"viewportStyle\"\n        :aria-busy=\"loading\"\n      >\n        <RuiTableHead\n          v-if=\"!isMobile\"\n          :loading=\"headerLoading\"\n          :indeterminate=\"indeterminate\"\n          :capitalize-headers=\"!cols\"\n          :colspan=\"colspan\"\n          :column-attr=\"columnAttr\"\n          :columns=\"columns\"\n          :dense=\"dense\"\n          :disable-check-all=\"!filtered?.length\"\n          :is-all-selected=\"isAllSelected\"\n          :selectable=\"!!selectedData\"\n          :sort-data=\"sortData\"\n          :sorted-map=\"sortedMap\"\n          :stick=\"stick\"\n          :sticky-header=\"stickyHeader\"\n          @sort=\"onSort($event)\"\n          @select:all=\"onToggleAll($event)\"\n        >\n          <template\n            v-for=\"headerSlot in headerSlots\"\n            #[headerSlot]=\"slotData\"\n          >\n            <slot\n              :name=\"headerSlot\"\n              v-bind=\"slotData\"\n            />\n          </template>\n        </RuiTableHead>\n        <RuiTableHead\n          v-if=\"stickyHeader && !isMobile\"\n          :loading=\"headerLoading\"\n          :capitalize-headers=\"!cols\"\n          :colspan=\"colspan\"\n          :column-attr=\"columnAttr\"\n          :columns=\"columns\"\n          :dense=\"dense\"\n          :selectable=\"!!selectedData\"\n          :sort-data=\"sortData\"\n          :sorted-map=\"sortedMap\"\n          data-id=\"head-clone\"\n          class=\"opacity-0 invisible\"\n        >\n          <template\n            v-for=\"headerSlot in headerSlots\"\n            #[headerSlot]=\"slotData\"\n          >\n            <slot\n              :name=\"headerSlot\"\n              v-bind=\"slotData\"\n            />\n          </template>\n        </RuiTableHead>\n        <RuiDataTableBody\n          :filtered=\"filtered\"\n          :loading=\"loading\"\n          :no-data=\"noData\"\n          :empty=\"empty\"\n          :error=\"error\"\n          :error-title=\"errorTitle\"\n          :retry-text=\"retryText\"\n          @retry=\"emit('retry')\"\n        >\n          <template\n            v-if=\"slots.error\"\n            #error\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot name=\"error\" />\n          </template>\n          <template\n            v-if=\"slots['body.prepend']\"\n            #body.prepend=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              name=\"body.prepend\"\n              v-bind=\"slotData\"\n            />\n          </template>\n          <template\n            v-if=\"slots['group.header']\"\n            #group.header=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              name=\"group.header\"\n              v-bind=\"slotData\"\n            />\n          </template>\n          <template\n            v-if=\"slots['group.header.content']\"\n            #group.header.content=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              name=\"group.header.content\"\n              v-bind=\"slotData\"\n            />\n          </template>\n          <template\n            v-for=\"key in itemSlotKeys\"\n            #[`item.${key}`]=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              :name=\"`item.${key}`\"\n              v-bind=\"slotData\"\n            />\n          </template>\n          <template\n            v-if=\"slots['expanded-item']\"\n            #expanded-item=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              name=\"expanded-item\"\n              v-bind=\"slotData\"\n            />\n          </template>\n          <template\n            v-if=\"slots['row-append']\"\n            #row-append=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              name=\"row-append\"\n              v-bind=\"slotData\"\n            />\n          </template>\n          <template\n            v-if=\"slots['no-data']\"\n            #no-data\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot name=\"no-data\" />\n          </template>\n          <template\n            v-if=\"slots['empty-description']\"\n            #empty-description\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot name=\"empty-description\" />\n          </template>\n          <template\n            v-if=\"slots['body.append']\"\n            #body.append=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              name=\"body.append\"\n              v-bind=\"slotData\"\n            />\n          </template>\n        </RuiDataTableBody>\n        <tfoot\n          v-if=\"slots.tfoot\"\n          :class=\"ui.tfoot()\"\n          data-id=\"table-tfoot\"\n        >\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot name=\"tfoot\" />\n        </tfoot>\n      </table>\n    </div>\n    <!-- the bar's own place after the rows: below the view, the bar is stuck; no divider of its own -->\n    <div\n      v-if=\"paginationData && showPagination && !isNestedTable\"\n      ref=\"paginationSentinel\"\n      class=\"border-0!\"\n      aria-hidden=\"true\"\n      data-id=\"table-pagination-sentinel\"\n    />\n    <RuiTablePagination\n      v-if=\"paginationData && showPagination\"\n      ref=\"paginationBar\"\n      v-model=\"paginationData\"\n      :class=\"ui.pagination({ sticky: paginationStuck })\"\n      :dense=\"dense\"\n      :loading=\"loading\"\n      :mobile=\"isMobile\"\n      :disable-per-page=\"disablePerPage\"\n      :ranges-threshold=\"rangesThreshold\"\n      :data-sticky=\"paginationStuck || undefined\"\n      data-id=\"table-pagination\"\n      @update:model-value=\"onPaginate()\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiDataTable.js","names":["_sfc_main"],"sources":["../../../src/components/tables/RuiDataTable.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends object, IdType extends keyof T = keyof T, TSort extends TableSortData<T> = TableSortData<T>\">\nimport type { HTMLAttributes } from 'vue';\nimport type { DataTableModelEmits, DataTableModels, GroupHeader } from '@/composables/tables/data-table/types';\nimport { dataTableStyles } from '@/components/tables/data-table-styles';\nimport { type DataTableClasses, type DataTableGroupLabel, provideDataTableContext, provideDataTableNested, useDataTableNested } from '@/components/tables/data-table/context';\nimport RuiDataTableBody from '@/components/tables/data-table/RuiDataTableBody.vue';\nimport RuiDataTableMobileSort from '@/components/tables/data-table/RuiDataTableMobileSort.vue';\nimport RuiTableHead, {\n  type GroupData,\n  type TableColumn,\n  type TableRowKeyData,\n  type TableSortData,\n} from '@/components/tables/RuiTableHead.vue';\nimport RuiTablePagination, { type TablePaginationData } from '@/components/tables/RuiTablePagination.vue';\nimport { getColumnLabel, GroupExpandButtonPosition } from '@/components/tables/table-props';\nimport { useTable } from '@/composables/defaults/table';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { usePropModel } from '@/composables/prop-model';\nimport { useStickyBlockerWarning } from '@/composables/sticky-blocker';\nimport { useStickyTableHeader } from '@/composables/sticky-header';\nimport { useTableColumns } from '@/composables/tables/data-table/columns';\nimport { useTableExpansion } from '@/composables/tables/data-table/expansion';\nimport { useTableGrouping } from '@/composables/tables/data-table/grouping';\nimport { usePageScroll, useStickyBottomInset, useStickyPaginationBar } from '@/composables/tables/data-table/page-scroll';\nimport { useTablePagination } from '@/composables/tables/data-table/pagination';\nimport { useTableSelection } from '@/composables/tables/data-table/selection';\nimport { useTableSort } from '@/composables/tables/data-table/sort';\n\nexport type { GroupedTableRow, GroupHeader, TableOptions } from '@/composables/tables/data-table/types';\n\nexport interface Props<T, K extends keyof T> {\n  /**\n   * list of items for each row\n   */\n  rows: readonly T[];\n  /**\n   * the attribute used to identify each row uniquely for selection, usually `id`\n   */\n  rowAttr: K;\n  /**\n   * model for internal searching\n   */\n  search?: string;\n  /**\n   * model for items per page\n   * will be used if the `pagination` model isn't specified\n   */\n  itemsPerPage?: number;\n  /**\n   * list of column definitions\n   */\n  cols?: TableColumn<T>[];\n  /**\n   * The column property holding the header text. Defaults to `label`; a property of the app's\n   * own goes on its column type, e.g. `TableColumn<Row> & { title: string }`.\n   */\n  columnAttr?: string;\n  /**\n   * flag to show a more or less spacious table\n   */\n  dense?: boolean;\n  /**\n   * flag to outline the flag with a border\n   */\n  outlined?: boolean;\n  /**\n   * should add zebra-striping to the table row\n   */\n  striped?: boolean;\n  /**\n   * flag to show loading state of the table\n   * triggers indefinite progress at the bottom of the table header\n   */\n  loading?: boolean;\n  disablePerPage?: boolean;\n  /**\n   * Maximum number of pages before the jump-to-page dropdown is replaced with\n   * a numeric input. Defaults to `500`. Forwarded to `RuiTablePagination`.\n   */\n  rangesThreshold?: number;\n  /**\n   * The text and icon shown when there are no rows, e.g.\n   * `:empty=\"\\{ icon: 'transactions-line', label: 'No transactions found' \\}\"`\n   */\n  empty?: {\n    label?: string;\n    description?: string;\n  };\n  /**\n   * Why the last read failed. Shown above any rows kept from an earlier read,\n   * or in place of the empty state; `loading` still takes precedence.\n   */\n  error?: string;\n  /** Heading for that failure. */\n  errorTitle?: string;\n  /** Label for the retry control; without one, no control is offered. */\n  retryText?: string;\n  /**\n   * Hide the pagination bar. The bar sits under the table and sticks to the bottom of the view\n   * while the table runs past it.\n   */\n  hidePagination?: boolean;\n\n  rounded?: 'sm' | 'md' | 'lg';\n  /**\n   * make expansion work like accordion\n   */\n  singleExpand?: boolean;\n  /**\n   * make table head stick to top on scroll\n   */\n  stickyHeader?: boolean;\n  stickyOffset?: number;\n  /**\n   * keep the pagination bar at the table's end instead of pinning it to the bottom of the view while\n   * the rows run past it, for a table that is one section of a longer page\n   */\n  disableStickyPagination?: boolean;\n  /**\n   * Affects how the items per page work across the app.\n   * When true, changing the items per page setting in one table will affect other tables.\n   */\n  globalItemsPerPage?: boolean;\n  groupExpandButtonPosition?: GroupExpandButtonPosition;\n  disabledRows?: readonly T[];\n  multiPageSelect?: boolean;\n  itemClass?: ((item: T) => string) | string;\n  /**\n   * Render each row as a stacked card instead of a table row once the measured\n   * width is narrower than this width (in pixels). Columns flagged with\n   * `mobileHidden` are dropped in this layout. Falls back to the global\n   * `mobileBreakpoint` table default; leave both unset to keep the default table\n   * layout at every width.\n   */\n  mobileBreakpoint?: number;\n  /**\n   * What the `mobileBreakpoint` is measured against: the browser `viewport`\n   * (default) or this table's own `container` width. Use `container` when the\n   * table lives in a narrow region of a wider window. Falls back to the global\n   * `mobileBreakpointBasis` table default.\n   */\n  mobileBreakpointBasis?: 'viewport' | 'container';\n  /**\n   * Force the stacked mobile card layout on (`true`) or off (`false`),\n   * regardless of `mobileBreakpoint`. Leave unset to derive it from the width.\n   */\n  mobile?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiDataTable',\n});\n\nconst group = defineModel<TableRowKeyData<T>>('group');\n\nconst {\n  rows,\n  rowAttr,\n  search = '',\n  itemsPerPage = 10,\n  cols,\n  columnAttr = 'label',\n  dense = false,\n  outlined = false,\n  striped = false,\n  loading = false,\n  disablePerPage = false,\n  rangesThreshold = 500,\n  empty = { label: 'No item found' },\n  error = '',\n  errorTitle = '',\n  retryText = '',\n  hidePagination = false,\n  rounded = 'md',\n  singleExpand = false,\n  stickyHeader = false,\n  stickyOffset,\n  disableStickyPagination = false,\n  globalItemsPerPage = undefined,\n  groupExpandButtonPosition = GroupExpandButtonPosition.start,\n  disabledRows,\n  multiPageSelect = false,\n  itemClass = '',\n  mobileBreakpoint,\n  mobileBreakpointBasis,\n  mobile,\n  modelValue: selectedProp,\n  expanded: expandedProp,\n  pagination: paginationProp,\n  paginationModifiers: paginationModifiersProp,\n  sort: sortProp,\n  sortModifiers: sortModifiersProp,\n  collapsed: collapsedProp,\n} = defineProps<Props<T, IdType> & DataTableModels<T, IdType, TSort> & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props<T, IdType>>>();\n\nconst emit = defineEmits<DataTableModelEmits<T, IdType, TSort> & {\n  'update:options': [value: { pagination?: TablePaginationData; sort?: TableSortData<T> }];\n  'copy:group': [value: GroupData<T>];\n  'retry': [];\n}>();\n\nconst slots = defineSlots<Partial<\n  Record<`header.${string}`, (props: { column: TableColumn<T> }) => any> &\n  Record<`item.${string}`, (props: { column: TableColumn<T>; row: T; index: number }) => any> & {\n    'body.prepend': (props: { colspan: number }) => any;\n    'body.append': (props: { colspan: number }) => any;\n    'group.header': (props: {\n      colspan: number;\n      header: GroupHeader<T>;\n      isOpen: boolean;\n      toggle: () => void;\n    }) => any;\n    'group.header.content': (props: { header: GroupHeader<T>; groupKey: string }) => any;\n    'expanded-item': (props: { row: T; index: number }) => any;\n    /**\n     * A full-width row after every row, read as the second half of the same item: no divider between\n     * them, one hover, the row's selected or open shade and stripe. For a long field, such as notes,\n     * that would otherwise widen the table. It comes before an open expanded panel.\n     */\n    'row-append': (props: { row: T; index: number }) => any;\n    'no-data': () => any;\n    'empty-description': () => any;\n    'error': () => any;\n    /**\n     * Rows under the body, such as a total, rendered in `<tfoot>`. Its cells take the body cells'\n     * padding, height (dense included) and text, under `:where()`, so a cell's own classes still win.\n     */\n    'tfoot': () => any;\n  }\n>>();\n\nconst selectedData = usePropModel('modelValue', () => selectedProp);\nconst expanded = usePropModel('expanded', () => expandedProp);\nconst [pagination, paginationModifiers] = usePropModel<TablePaginationData, 'external'>('pagination', () => paginationProp, () => paginationModifiersProp);\nconst [sort, sortModifiers] = usePropModel<TableSortData<T>, 'external'>('sort', () => sortProp, () => sortModifiersProp);\nconst collapsed = usePropModel('collapsed', () => collapsedProp);\n\nconst tableDefaults = useTable();\n\nconst tableWrapper = useTemplateRef<HTMLElement>('tableWrapper');\nconst paginationSentinel = useTemplateRef<HTMLElement>('paginationSentinel');\nconst paginationBar = useTemplateRef<InstanceType<typeof RuiTablePagination>>('paginationBar');\nconst { width: windowWidth } = useWindowSize();\nconst { width: containerWidth } = useElementSize(tableWrapper);\n\n// Per-table props win, then the global table defaults.\nconst resolvedMobileBreakpoint = computed<number | undefined>(() => {\n  if (mobileBreakpoint !== undefined)\n    return mobileBreakpoint;\n  const globalBreakpoint = tableDefaults.mobileBreakpoint;\n  return globalBreakpoint === undefined ? undefined : get(globalBreakpoint);\n});\nconst resolvedMobileBasis = computed<'viewport' | 'container'>(() => {\n  if (mobileBreakpointBasis !== undefined)\n    return mobileBreakpointBasis;\n  const globalBasis = tableDefaults.mobileBreakpointBasis;\n  return globalBasis === undefined ? 'viewport' : get(globalBasis);\n});\n\n/**\n * Whether the stacked card layout is showing.\n *\n * Vue coerces an absent Boolean prop to `false`, so `mobile` cannot say\n * \"unset\": with no breakpoint configured it is the manual switch, defaulting\n * to desktop, and with one configured the breakpoint drives the layout while\n * `mobile === true` can still force the stacked layout on.\n */\nconst isMobile = computed<boolean>(() => {\n  const breakpoint = get(resolvedMobileBreakpoint);\n  if (breakpoint === undefined)\n    return mobile;\n  if (mobile)\n    return true;\n  // `containerWidth` is 0 until measured; the viewport keeps the first paint off mobile\n  const width = get(resolvedMobileBasis) === 'container'\n    ? (get(containerWidth) || get(windowWidth))\n    : get(windowWidth);\n  return width < breakpoint;\n});\n\nconst stickyHeaderOffset = computed<number | undefined>(() =>\n  stickyOffset !== undefined ? stickyOffset : get(tableDefaults.stickyOffset),\n);\n\n/**\n * A table rendered inside an expanded row must not pin its own toolbar: only\n * the outermost table sticks, otherwise the bars stack and collide.\n */\nconst isNestedTable = useDataTableNested();\nprovideDataTableNested();\n\n/**\n * On mobile there is no column header to pin, so `stickyHeader` pins the\n * pagination and sort toolbar instead while the card list scrolls.\n */\nconst stickyMobileToolbar = computed<boolean>(() => stickyHeader && get(isMobile) && !isNestedTable);\n\nconst table = useTemplateRef<HTMLTableElement>('table');\nconst tableScroller = useTemplateRef<HTMLElement>('tableScroller');\nconst scrollerTabindex = useKeyboardScroll(tableScroller);\n\nconst { stick } = useStickyTableHeader(\n  () => stickyHeader,\n  stickyHeaderOffset,\n  { table },\n);\n\nconst { width: scrollerWidth } = useElementSize(tableScroller);\n\n/**\n * The visible width of the table, which an expanded row caps its content to.\n * Without the cap a wide panel, such as a nested table, sets the minimum width\n * of the whole table and pushes every column past the scroller. `initial`\n * resets the variable, so a nested table never inherits its parent's width.\n */\nconst viewportStyle = computed<Record<string, string>>(() => {\n  const width = get(scrollerWidth);\n  return { '--rui-table-viewport': width > 0 && !get(isMobile) ? `${width}px` : 'initial' };\n});\n\nconst { expandable, isExpanded, onToggleExpand } = useTableExpansion<T, IdType>(\n  { rowAttr, singleExpand },\n  { expanded },\n);\n\nfunction emitUpdateOptions(opts: { sort?: TableSortData<T>; pagination?: TablePaginationData }): void {\n  emit('update:options', opts);\n}\n\nconst {\n  sortData,\n  sortedMap,\n  sorted,\n  onSort: applySort,\n} = useTableSort<T>(\n  { rows: () => rows, search: () => search, sortModifiersExternal: sortModifiers.external },\n  {\n    sort,\n    pagination,\n    emitUpdateOptions,\n  },\n);\n\nconst {\n  groupKeys,\n  groupKey,\n  grouped,\n  mappedGroups,\n  isExpandedGroup,\n  isHiddenRow,\n  onToggleExpandGroup,\n  onUngroup,\n} = useTableGrouping<T, IdType>(\n  { rowAttr },\n  {\n    group,\n    collapsed,\n    sorted,\n  },\n);\n\nconst {\n  paginationData,\n  filtered,\n  setInternalTotal,\n  resetPagination,\n} = useTablePagination<T>(\n  {\n    itemsPerPage,\n    paginationModifiersExternal: paginationModifiers.external,\n    globalItemsPerPage,\n  },\n  {\n    pagination,\n    grouped,\n    isHiddenRow,\n    sort,\n    emitUpdateOptions,\n    tableDefaults,\n  },\n);\n\nconst noData = computed<boolean>(() => get(filtered).length === 0);\n\n// one loader at a time: the header bar marks a refetch over rows, and an empty table shows only its spinner row\nconst headerLoading = computed<boolean>(() => loading && !get(noData));\n\n/**\n * A nested table (a breakdown in an expanded row) that pages its own rows drops the bar when they all fit\n * the smallest page size: no control on it could change what shows, and in a breakdown it is pure noise.\n * A top-level table keeps it as a summary; a server-paged one keeps it, since only the server knows the total.\n */\nconst fitsSmallestPage = computed<boolean>(() => {\n  if (!isNestedTable || paginationModifiers.external)\n    return false;\n  const { limits } = get(paginationData);\n  const sizes = limits ?? toValue(tableDefaults.limits);\n  // the rows themselves, not the pagination total, which is only filled in after mount\n  return sizes.length > 0 && get(sorted).length <= Math.min(...sizes);\n});\n\nconst showPagination = computed<boolean>(() => !!get(paginationData) && !hidePagination && !get(fitsSmallestPage));\n\n/**\n * The one pagination bar sticks to the bottom of the view, so a long page can be turned without\n * scrolling down to it. `position: sticky` keeps it inside this table, so stacked and side-by-side\n * tables each hold their own bar. A nested table's bar stays in place, since two stuck bars would\n * stack, as does the bar of a table with `disableStickyPagination`.\n */\nconst paginationMayStick = computed<boolean>(() => !disableStickyPagination && !isNestedTable);\nconst canStickPagination = useStickyPaginationBar(tableWrapper, () => get(paginationMayStick) && get(showPagination));\nconst paginationStuck = computed<boolean>(() => get(paginationMayStick) && get(canStickPagination));\n\nconst paginationBarElement = computed<HTMLElement | undefined>(() => {\n  const element: unknown = get(paginationBar)?.$el;\n  return element instanceof HTMLElement ? element : undefined;\n});\n\n// while the bar is stuck to the page, `--rui-sticky-bottom` tells the page's floating parts to rise above it\nuseStickyBottomInset(paginationSentinel, paginationBarElement, paginationStuck);\n\nuseStickyBlockerWarning(paginationBarElement, () => get(paginationMayStick) && get(showPagination), 'The RuiDataTable pagination bar');\n\n/**\n * Grouped columns leave the column list, so their labels come from `cols`.\n */\nconst groupLabels = computed<DataTableGroupLabel[]>(() => get(groupKeys).map((key) => {\n  const column = cols?.find(column => column.key === key);\n  return {\n    key: String(key),\n    label: (column && getColumnLabel(column, columnAttr)) ?? String(key),\n  };\n}));\n\n/** Each group's list starts with its header entry, which is not a row. */\nfunction getGroupSize(identifier: string): number {\n  return Math.max((get(mappedGroups)[identifier]?.length ?? 0) - 1, 0);\n}\n\nconst ui = computed<ReturnType<typeof dataTableStyles>>(() => dataTableStyles({\n  outlined,\n  rounded,\n  dense,\n  striped,\n  mobile: get(isMobile),\n}));\n\nconst { columns, colspan, headerSlots, cellValue } = useTableColumns<T, IdType>({\n  cols: () => cols,\n  columnAttr,\n  rows: () => rows,\n  expandable,\n  groupKeys,\n  selectedData,\n  slots,\n  isMobile,\n  tdResolver: options => get(ui).td(options),\n});\n\nconst showMobileSort = computed<boolean>(() =>\n  get(isMobile) && !!get(sortData) && get(columns).some(column => column.sortable),\n);\n\nconst ITEM_SLOT_PREFIX = 'item.';\n\n// Slot keys are static for the component lifetime, so no reactivity is needed\nconst itemSlotKeys: Set<string> = new Set(\n  Object.keys(slots)\n    .filter((key): key is `item.${string}` => key.startsWith(ITEM_SLOT_PREFIX))\n    .map(key => key.slice(ITEM_SLOT_PREFIX.length)),\n);\n\nconst {\n  isAllSelected,\n  indeterminate,\n  isSelected,\n  isDisabledRow,\n  onToggleAll,\n  onSelect,\n  onCheckboxClick,\n  deselectRemovedRows,\n  resetCheckboxShiftState,\n} = useTableSelection<T, IdType>(\n  { rowAttr, multiPageSelect, disabledRows: () => disabledRows },\n  { selectedData, filtered },\n);\n\n/**\n * Sorting clears the selection. That lives here rather than in either\n * composable, which would make sort and selection depend on each other.\n */\nfunction onSort(payload: Parameters<typeof applySort>[0]): void {\n  applySort(payload);\n  if (!multiPageSelect)\n    onToggleAll(false);\n  resetCheckboxShiftState();\n}\n\nconst { revealTableTop } = usePageScroll(tableWrapper, stickyHeaderOffset);\n\nasync function onPaginate(): Promise<void> {\n  if ((get(expanded)?.length ?? 0) > 0)\n    set(expanded, []);\n  if (!multiPageSelect)\n    onToggleAll(false);\n  resetCheckboxShiftState();\n  await revealTableTop();\n}\n\n// Reset pagination page to 1 on search query change\nwatch(() => search, () => {\n  resetPagination();\n  onToggleAll(false);\n  resetCheckboxShiftState();\n});\n\nwatch(sorted, (items) => {\n  if (!multiPageSelect)\n    deselectRemovedRows();\n  setInternalTotal(items);\n});\n\nonMounted(() => {\n  setInternalTotal(get(sorted));\n});\n\nconst classes = computed<DataTableClasses>(() => {\n  const s = get(ui);\n  return {\n    td: s.td(),\n    tr: s.tr(),\n    trSelected: s.tr({ rowVariant: 'selected' }),\n    trExpandable: s.tr({ rowVariant: 'expandable' }),\n    trExpandedParent: s.tr({ rowVariant: 'expandedParent' }),\n    trGroup: s.tr({ rowVariant: 'group' }),\n    trEmpty: s.tr({ rowVariant: 'empty' }),\n    checkbox: s.checkbox(),\n    tbody: s.tbody(),\n    tbodyLoader: s.tbodyLoader(),\n  };\n});\n\nprovideDataTableContext<T, IdType>({\n  // Reactive (ComputedRef/Ref): destructuring preserves reactivity via Vue template auto-unwrap\n  classes,\n  columns,\n  colspan,\n  expandable,\n  groupKey,\n  groupLabels,\n  isMobile,\n  selectedData,\n  // Static values\n  cellValue,\n  columnAttr,\n  dense,\n  getGroupSize,\n  getRowId: (row: T) => row[rowAttr],\n  itemSlotKeys,\n  groupExpandButtonPosition,\n  isDisabledRow,\n  isExpanded,\n  isExpandedGroup,\n  isSelected,\n  itemClass,\n  onCheckboxClick,\n  onCopyGroup: (header: GroupHeader<T>) => emit('copy:group', { key: get(groupKey) ?? '', value: header.group }),\n  onSelect,\n  onToggleExpand,\n  onToggleExpandGroup,\n  onUngroup,\n});\n</script>\n\n<template>\n  <div\n    ref=\"tableWrapper\"\n    :class=\"ui.wrapper()\"\n    data-id=\"table-wrapper\"\n  >\n    <div\n      v-if=\"showMobileSort\"\n      :class=\"stickyMobileToolbar ? 'sticky z-rui-raised bg-rui-background pt-2' : 'contents'\"\n      :style=\"stickyMobileToolbar ? { top: `${stickyHeaderOffset ?? 0}px` } : undefined\"\n      data-id=\"table-mobile-toolbar-sticky\"\n    >\n      <div\n        class=\"flex justify-end p-2\"\n        data-id=\"table-mobile-toolbar\"\n      >\n        <RuiDataTableMobileSort\n          :columns=\"columns\"\n          :column-attr=\"columnAttr\"\n          :sorted-map=\"sortedMap\"\n          :dense=\"dense\"\n          @sort=\"onSort($event)\"\n        />\n      </div>\n    </div>\n    <div\n      ref=\"tableScroller\"\n      :class=\"[ui.scroller(), isMobile && !showMobileSort ? 'pt-2' : '']\"\n      :tabindex=\"scrollerTabindex\"\n      data-id=\"table-scroller\"\n    >\n      <table\n        ref=\"table\"\n        :class=\"ui.table()\"\n        :style=\"viewportStyle\"\n        :aria-busy=\"loading\"\n      >\n        <RuiTableHead\n          v-if=\"!isMobile\"\n          :loading=\"headerLoading\"\n          :indeterminate=\"indeterminate\"\n          :capitalize-headers=\"!cols\"\n          :colspan=\"colspan\"\n          :column-attr=\"columnAttr\"\n          :columns=\"columns\"\n          :dense=\"dense\"\n          :disable-check-all=\"!filtered?.length\"\n          :is-all-selected=\"isAllSelected\"\n          :selectable=\"!!selectedData\"\n          :sort-data=\"sortData\"\n          :sorted-map=\"sortedMap\"\n          :stick=\"stick\"\n          :sticky-header=\"stickyHeader\"\n          @sort=\"onSort($event)\"\n          @select:all=\"onToggleAll($event)\"\n        >\n          <template\n            v-for=\"headerSlot in headerSlots\"\n            #[headerSlot]=\"slotData\"\n          >\n            <slot\n              :name=\"headerSlot\"\n              v-bind=\"slotData\"\n            />\n          </template>\n        </RuiTableHead>\n        <RuiTableHead\n          v-if=\"stickyHeader && !isMobile\"\n          :loading=\"headerLoading\"\n          :capitalize-headers=\"!cols\"\n          :colspan=\"colspan\"\n          :column-attr=\"columnAttr\"\n          :columns=\"columns\"\n          :dense=\"dense\"\n          :selectable=\"!!selectedData\"\n          :sort-data=\"sortData\"\n          :sorted-map=\"sortedMap\"\n          data-id=\"head-clone\"\n          class=\"opacity-0 invisible\"\n        >\n          <template\n            v-for=\"headerSlot in headerSlots\"\n            #[headerSlot]=\"slotData\"\n          >\n            <slot\n              :name=\"headerSlot\"\n              v-bind=\"slotData\"\n            />\n          </template>\n        </RuiTableHead>\n        <RuiDataTableBody\n          :filtered=\"filtered\"\n          :loading=\"loading\"\n          :no-data=\"noData\"\n          :empty=\"empty\"\n          :error=\"error\"\n          :error-title=\"errorTitle\"\n          :retry-text=\"retryText\"\n          @retry=\"emit('retry')\"\n        >\n          <template\n            v-if=\"slots.error\"\n            #error\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot name=\"error\" />\n          </template>\n          <template\n            v-if=\"slots['body.prepend']\"\n            #body.prepend=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              name=\"body.prepend\"\n              v-bind=\"slotData\"\n            />\n          </template>\n          <template\n            v-if=\"slots['group.header']\"\n            #group.header=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              name=\"group.header\"\n              v-bind=\"slotData\"\n            />\n          </template>\n          <template\n            v-if=\"slots['group.header.content']\"\n            #group.header.content=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              name=\"group.header.content\"\n              v-bind=\"slotData\"\n            />\n          </template>\n          <template\n            v-for=\"key in itemSlotKeys\"\n            #[`item.${key}`]=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              :name=\"`item.${key}`\"\n              v-bind=\"slotData\"\n            />\n          </template>\n          <template\n            v-if=\"slots['expanded-item']\"\n            #expanded-item=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              name=\"expanded-item\"\n              v-bind=\"slotData\"\n            />\n          </template>\n          <template\n            v-if=\"slots['row-append']\"\n            #row-append=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              name=\"row-append\"\n              v-bind=\"slotData\"\n            />\n          </template>\n          <template\n            v-if=\"slots['no-data']\"\n            #no-data\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot name=\"no-data\" />\n          </template>\n          <template\n            v-if=\"slots['empty-description']\"\n            #empty-description\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot name=\"empty-description\" />\n          </template>\n          <template\n            v-if=\"slots['body.append']\"\n            #body.append=\"slotData\"\n          >\n            <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n            <slot\n              name=\"body.append\"\n              v-bind=\"slotData\"\n            />\n          </template>\n        </RuiDataTableBody>\n        <tfoot\n          v-if=\"slots.tfoot\"\n          :class=\"ui.tfoot()\"\n          data-id=\"table-tfoot\"\n        >\n          <!-- eslint-disable-next-line vue/require-explicit-slots -- defined via Partial<Record<...>> in defineSlots -->\n          <slot name=\"tfoot\" />\n        </tfoot>\n      </table>\n    </div>\n    <!-- the bar's own place after the rows: below the view, the bar is stuck; no divider of its own -->\n    <div\n      v-if=\"paginationData && showPagination && !isNestedTable\"\n      ref=\"paginationSentinel\"\n      class=\"border-0!\"\n      aria-hidden=\"true\"\n      data-id=\"table-pagination-sentinel\"\n    />\n    <RuiTablePagination\n      v-if=\"paginationData && showPagination\"\n      ref=\"paginationBar\"\n      v-model=\"paginationData\"\n      :class=\"ui.pagination({ sticky: paginationStuck })\"\n      :dense=\"dense\"\n      :loading=\"loading\"\n      :mobile=\"isMobile\"\n      :disable-per-page=\"disablePerPage\"\n      :ranges-threshold=\"rangesThreshold\"\n      :data-sticky=\"paginationStuck || undefined\"\n      data-id=\"table-pagination\"\n      @update:model-value=\"onPaginate()\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/tables/RuiDataTable.vue.d.ts

@@ -1,4 +1,5 @@
-import type { GroupHeader } from '../../composables/tables/data-table/types.js';
+import type { HTMLAttributes } from 'vue';
+import type { DataTableModels, GroupHeader } from '../../composables/tables/data-table/types.js';
 import { type GroupData, type TableColumn, type TableRowKeyData, type TableSortData } from './RuiTableHead.vue.js';
 import { type TablePaginationData } from './RuiTablePagination.vue.js';
 import { GroupExpandButtonPosition } from './table-props.js';
@@ -26,9 +27,10 @@ export interface Props<T, K extends keyof T> {
      */
     cols?: TableColumn<T>[];
     /**
-     * attribute to use from column definitions to display column titles
+     * The column property holding the header text. Defaults to `label`; a property of the app's
+     * own goes on its column type, e.g. `TableColumn<Row> & { title: string }`.
      */
-    columnAttr?: keyof TableColumn<T>;
+    columnAttr?: string;
     /**
      * flag to show a more or less spacious table
      */
@@ -119,29 +121,22 @@ export interface Props<T, K extends keyof T> {
      */
     mobile?: boolean;
 }
-declare const __VLS_export: <T extends object, IdType extends keyof T = keyof T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<(Props<T, IdType> & {
-        modelValue?: T[IdType][];
-        expanded?: T[];
-        pagination?: TablePaginationData;
-        paginationModifiers?: Partial<Record<"external", true>>;
-        sort?: TableSortData<T>;
-        sortModifiers?: Partial<Record<"external", true>>;
+declare const __VLS_export: <T extends object, IdType extends keyof T = keyof T, TSort extends TableSortData<T> = TableSortData<T>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(Props<T, IdType> & DataTableModels<T, IdType, TSort> & Omit<HTMLAttributes, keyof Props<T, IdType>> & {
         group?: TableRowKeyData<T>;
-        collapsed?: T[];
     }) & {
-        "onUpdate:modelValue"?: ((value: T[IdType][] | undefined) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T[IdType][]) => any) | undefined;
         onRetry?: (() => any) | undefined;
+        "onUpdate:expanded"?: ((value: T[]) => any) | undefined;
+        "onUpdate:pagination"?: ((value: TablePaginationData) => any) | undefined;
+        "onUpdate:sort"?: ((value: NonNullable<TSort>) => any) | undefined;
+        "onUpdate:collapsed"?: ((value: T[]) => any) | undefined;
         "onUpdate:options"?: ((value: {
             pagination?: TablePaginationData;
             sort?: TableSortData<T>;
         }) => any) | undefined;
         "onCopy:group"?: ((value: GroupData<T>) => any) | undefined;
-        "onUpdate:expanded"?: ((value: T[] | undefined) => any) | undefined;
-        "onUpdate:pagination"?: ((value: TablePaginationData | undefined) => any) | undefined;
-        "onUpdate:sort"?: ((value: TableSortData<T>) => any) | undefined;
         "onUpdate:group"?: ((value: TableRowKeyData<T>) => any) | undefined;
-        "onUpdate:collapsed"?: ((value: T[] | undefined) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -192,10 +187,10 @@ declare const __VLS_export: <T extends object, IdType extends keyof T = keyof T>
          */
         tfoot: () => any;
     }>;
-    emit: (((evt: "retry") => void) & ((evt: "update:options", value: {
+    emit: (((evt: "update:modelValue", value: T[IdType][]) => void) & ((evt: "retry") => void) & ((evt: "update:expanded", value: T[]) => void) & ((evt: "update:pagination", value: TablePaginationData) => void) & ((evt: "update:sort", value: NonNullable<TSort>) => void) & ((evt: "update:collapsed", value: T[]) => void) & ((evt: "update:options", value: {
         pagination?: TablePaginationData;
         sort?: TableSortData<T>;
-    }) => void) & ((evt: "copy:group", value: GroupData<T>) => void)) & (((event: "update:modelValue", value: T[IdType][] | undefined) => void) & ((event: "update:expanded", value: T[] | undefined) => void) & ((event: "update:pagination", value: TablePaginationData | undefined) => void) & ((event: "update:sort", value: TableSortData<T>) => void) & ((event: "update:group", value: TableRowKeyData<T>) => void) & ((event: "update:collapsed", value: T[] | undefined) => void));
+    }) => void) & ((evt: "copy:group", value: GroupData<T>) => void)) & ((event: "update:group", value: TableRowKeyData<T>) => void);
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

package/dist/components/tables/RuiDataTable.vue_vue_type_script_setup_true_lang.js

@@ -1,10 +1,11 @@
 import { useTable } from "../../composables/defaults/table.js";
 import { get, set } from "../../vendor/@vueuse/shared/dist/index.js";
 import { useElementSize, useWindowSize } from "../../vendor/@vueuse/core/dist/index.js";
+import { usePropModel } from "../../composables/prop-model.js";
 import { useKeyboardScroll } from "../../composables/keyboard-scroll.js";
 import { dataTableStyles } from "./data-table-styles.js";
 import { provideDataTableContext, provideDataTableNested, useDataTableNested } from "./data-table/context.js";
-import { GroupExpandButtonPosition } from "./table-props.js";
+import { GroupExpandButtonPosition, getColumnLabel } from "./table-props.js";
 import RuiDataTableBody_default from "./data-table/RuiDataTableBody.js";
 import RuiDataTableMobileSort_default from "./data-table/RuiDataTableMobileSort.js";
 import RuiTableHead_default from "./RuiTableHead.js";
@@ -96,42 +97,37 @@ var RuiDataTable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		},
 		mobileBreakpoint: {},
 		mobileBreakpointBasis: {},
-		mobile: { type: Boolean }
+		mobile: { type: Boolean },
+		modelValue: {},
+		expanded: {},
+		pagination: {},
+		paginationModifiers: {},
+		sort: {},
+		sortModifiers: {},
+		collapsed: {}
 	}, {
-		"modelValue": {},
-		"modelModifiers": {},
-		"expanded": {},
-		"expandedModifiers": {},
-		"pagination": {},
-		"paginationModifiers": {},
-		"sort": {},
-		"sortModifiers": {},
 		"group": {},
-		"groupModifiers": {},
-		"collapsed": {},
-		"collapsedModifiers": {}
+		"groupModifiers": {}
 	}),
 	emits: /*@__PURE__*/ mergeModels([
-		"update:options",
-		"copy:group",
-		"retry"
-	], [
 		"update:modelValue",
 		"update:expanded",
 		"update:pagination",
 		"update:sort",
-		"update:group",
-		"update:collapsed"
-	]),
+		"update:collapsed",
+		"update:options",
+		"copy:group",
+		"retry"
+	], ["update:group"]),
 	setup(__props, { emit: __emit }) {
-		const selectedData = useModel(__props, "modelValue");
-		const expanded = useModel(__props, "expanded");
-		const [pagination, paginationModifiers] = useModel(__props, "pagination");
-		const [sort, sortModifiers] = useModel(__props, "sort");
 		const group = useModel(__props, "group");
-		const collapsed = useModel(__props, "collapsed");
 		const emit = __emit;
 		const slots = useSlots();
+		const selectedData = usePropModel("modelValue", () => __props.modelValue);
+		const expanded = usePropModel("expanded", () => __props.expanded);
+		const [pagination, paginationModifiers] = usePropModel("pagination", () => __props.pagination, () => __props.paginationModifiers);
+		const [sort, sortModifiers] = usePropModel("sort", () => __props.sort, () => __props.sortModifiers);
+		const collapsed = usePropModel("collapsed", () => __props.collapsed);
 		const tableDefaults = useTable();
 		const tableWrapper = useTemplateRef("tableWrapper");
 		const paginationSentinel = useTemplateRef("paginationSentinel");
@@ -255,10 +251,10 @@ var RuiDataTable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		* Grouped columns leave the column list, so their labels come from `cols`.
 		*/
 		const groupLabels = computed(() => get(groupKeys).map((key) => {
-			const label = __props.cols?.find((column) => column.key === key)?.[__props.columnAttr];
+			const column = __props.cols?.find((column) => column.key === key);
 			return {
 				key: String(key),
-				label: label === void 0 || label === null ? String(key) : String(label)
+				label: (column && getColumnLabel(column, __props.columnAttr)) ?? String(key)
 			};
 		}));
 		/** Each group's list starts with its header entry, which is not a row. */
@@ -415,7 +411,7 @@ var RuiDataTable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 						dense: __props.dense,
 						"disable-check-all": !unref(filtered)?.length,
 						"is-all-selected": unref(isAllSelected),
-						selectable: !!selectedData.value,
+						selectable: !!unref(selectedData),
 						"sort-data": unref(sortData),
 						"sorted-map": unref(sortedMap),
 						stick: unref(stick),
@@ -451,7 +447,7 @@ var RuiDataTable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 						"column-attr": __props.columnAttr,
 						columns: unref(columns),
 						dense: __props.dense,
-						selectable: !!selectedData.value,
+						selectable: !!unref(selectedData),
 						"sort-data": unref(sortData),
 						"sorted-map": unref(sortedMap),
 						"data-id": "head-clone",