@rotki/ui-library 3.0.0-beta.1 → 3.0.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (150) hide show
  1. package/dist/components/accordions/accordion/RuiAccordion.vue_vue_type_script_setup_true_lang.js +3 -3
  2. package/dist/components/accordions/accordion/RuiAccordion.vue_vue_type_script_setup_true_lang.js.map +1 -1
  3. package/dist/components/accordions/accordions/RuiAccordions.vue_vue_type_script_setup_true_lang.js +1 -1
  4. package/dist/components/avatars/RuiAvatar.vue_vue_type_script_setup_true_lang.js +1 -1
  5. package/dist/components/avatars/RuiAvatarGroup.vue_vue_type_script_setup_true_lang.js +1 -1
  6. package/dist/components/buttons/button/RuiButton.js.map +1 -1
  7. package/dist/components/buttons/button/RuiButton.vue_vue_type_script_setup_true_lang.js +10 -10
  8. package/dist/components/buttons/button/RuiButton.vue_vue_type_script_setup_true_lang.js.map +1 -1
  9. package/dist/components/buttons/button/button-styles.js +10 -2
  10. package/dist/components/buttons/button/button-styles.js.map +1 -1
  11. package/dist/components/buttons/button-group/RuiButtonGroup.vue_vue_type_script_setup_true_lang.js +1 -1
  12. package/dist/components/calendar/RuiCalendar.vue_vue_type_script_setup_true_lang.js +1 -1
  13. package/dist/components/calendar/RuiCalendarGrid.vue_vue_type_script_setup_true_lang.js +1 -1
  14. package/dist/components/calendar/RuiCalendarHeader.vue_vue_type_script_setup_true_lang.js +1 -1
  15. package/dist/components/calendar/RuiCalendarMenu.vue_vue_type_script_setup_true_lang.js +1 -1
  16. package/dist/components/chips/RuiChip.vue_vue_type_script_setup_true_lang.js +1 -1
  17. package/dist/components/color-picker/RuiColorBoard.vue_vue_type_script_setup_true_lang.js +1 -1
  18. package/dist/components/color-picker/RuiColorDisplay.vue_vue_type_script_setup_true_lang.js +1 -1
  19. package/dist/components/color-picker/RuiColorHue.vue_vue_type_script_setup_true_lang.js +1 -1
  20. package/dist/components/color-picker/RuiColorInput.vue_vue_type_script_setup_true_lang.js +9 -10
  21. package/dist/components/color-picker/RuiColorInput.vue_vue_type_script_setup_true_lang.js.map +1 -1
  22. package/dist/components/color-picker/RuiColorPicker.vue_vue_type_script_setup_true_lang.js +3 -4
  23. package/dist/components/color-picker/RuiColorPicker.vue_vue_type_script_setup_true_lang.js.map +1 -1
  24. package/dist/components/date-time-picker/RuiDateTimePicker.vue_vue_type_script_setup_true_lang.js +33 -33
  25. package/dist/components/date-time-picker/RuiDateTimePicker.vue_vue_type_script_setup_true_lang.js.map +1 -1
  26. package/dist/components/date-time-picker/use-date-bounds.js +1 -1
  27. package/dist/components/date-time-picker/use-date-time-selection.js +65 -66
  28. package/dist/components/date-time-picker/use-date-time-selection.js.map +1 -1
  29. package/dist/components/date-time-picker/use-input-handler.js +1 -1
  30. package/dist/components/date-time-picker/use-keyboard-handler.js +29 -30
  31. package/dist/components/date-time-picker/use-keyboard-handler.js.map +1 -1
  32. package/dist/components/forms/auto-complete/RuiAutoComplete.vue_vue_type_script_setup_true_lang.js +24 -24
  33. package/dist/components/forms/auto-complete/RuiAutoComplete.vue_vue_type_script_setup_true_lang.js.map +1 -1
  34. package/dist/components/forms/category-picker/RuiCategoryPicker.vue_vue_type_script_setup_true_lang.js +49 -49
  35. package/dist/components/forms/category-picker/RuiCategoryPicker.vue_vue_type_script_setup_true_lang.js.map +1 -1
  36. package/dist/components/forms/checkbox/RuiCheckbox.vue_vue_type_script_setup_true_lang.js +1 -1
  37. package/dist/components/forms/checkbox/checkbox-group/RuiCheckboxGroup.vue_vue_type_script_setup_true_lang.js +1 -1
  38. package/dist/components/forms/file-upload/RuiFileUpload.js.map +1 -1
  39. package/dist/components/forms/file-upload/RuiFileUpload.vue_vue_type_script_setup_true_lang.js +19 -17
  40. package/dist/components/forms/file-upload/RuiFileUpload.vue_vue_type_script_setup_true_lang.js.map +1 -1
  41. package/dist/components/forms/radio-button/radio/RuiRadio.vue_vue_type_script_setup_true_lang.js +1 -1
  42. package/dist/components/forms/select/RuiMenuSelect.vue_vue_type_script_setup_true_lang.js +11 -11
  43. package/dist/components/forms/select/RuiMenuSelect.vue_vue_type_script_setup_true_lang.js.map +1 -1
  44. package/dist/components/forms/slider/RuiSlider.vue_vue_type_script_setup_true_lang.js +17 -17
  45. package/dist/components/forms/slider/RuiSlider.vue_vue_type_script_setup_true_lang.js.map +1 -1
  46. package/dist/components/forms/switch/RuiSwitch.vue_vue_type_script_setup_true_lang.js +1 -1
  47. package/dist/components/forms/text-area/RuiTextArea.vue_vue_type_script_setup_true_lang.js +21 -21
  48. package/dist/components/forms/text-area/RuiTextArea.vue_vue_type_script_setup_true_lang.js.map +1 -1
  49. package/dist/components/forms/text-field/RuiTextField.js.map +1 -1
  50. package/dist/components/forms/text-field/RuiTextField.vue.d.ts +2 -0
  51. package/dist/components/forms/text-field/RuiTextField.vue_vue_type_script_setup_true_lang.js +24 -20
  52. package/dist/components/forms/text-field/RuiTextField.vue_vue_type_script_setup_true_lang.js.map +1 -1
  53. package/dist/components/helpers/RuiFormTextDetail.js.map +1 -1
  54. package/dist/components/helpers/RuiFormTextDetail.vue.d.ts +11 -1
  55. package/dist/components/helpers/RuiFormTextDetail.vue_vue_type_script_setup_true_lang.js +3 -3
  56. package/dist/components/helpers/RuiFormTextDetail.vue_vue_type_script_setup_true_lang.js.map +1 -1
  57. package/dist/components/icons/RuiIcon.vue_vue_type_script_setup_true_lang.js +1 -1
  58. package/dist/components/logos/RuiLogo.vue_vue_type_script_setup_true_lang.js +1 -1
  59. package/dist/components/overlays/badge/RuiBadge.vue_vue_type_script_setup_true_lang.js +1 -1
  60. package/dist/components/overlays/dialog/RuiDialog.vue_vue_type_script_setup_true_lang.js +1 -1
  61. package/dist/components/overlays/menu/RuiMenu.vue_vue_type_script_setup_true_lang.js +17 -17
  62. package/dist/components/overlays/menu/RuiMenu.vue_vue_type_script_setup_true_lang.js.map +1 -1
  63. package/dist/components/overlays/navigation-drawer/RuiNavigationDrawer.js.map +1 -1
  64. package/dist/components/overlays/navigation-drawer/RuiNavigationDrawer.vue_vue_type_script_setup_true_lang.js +9 -9
  65. package/dist/components/overlays/navigation-drawer/RuiNavigationDrawer.vue_vue_type_script_setup_true_lang.js.map +1 -1
  66. package/dist/components/overlays/notification/RuiNotification.vue_vue_type_script_setup_true_lang.js +3 -4
  67. package/dist/components/overlays/notification/RuiNotification.vue_vue_type_script_setup_true_lang.js.map +1 -1
  68. package/dist/components/overlays/tooltip/RuiTooltip.vue_vue_type_script_setup_true_lang.js +1 -1
  69. package/dist/components/progress/RuiProgress.vue_vue_type_script_setup_true_lang.js +1 -1
  70. package/dist/components/steppers/RuiFooterStepper.vue_vue_type_script_setup_true_lang.js +1 -1
  71. package/dist/components/steppers/RuiStepper.js.map +1 -1
  72. package/dist/components/steppers/RuiStepper.vue_vue_type_script_setup_true_lang.js +13 -8
  73. package/dist/components/steppers/RuiStepper.vue_vue_type_script_setup_true_lang.js.map +1 -1
  74. package/dist/components/tables/RuiDataTable.vue_vue_type_script_setup_true_lang.js +27 -27
  75. package/dist/components/tables/RuiDataTable.vue_vue_type_script_setup_true_lang.js.map +1 -1
  76. package/dist/components/tables/RuiTableHead.vue_vue_type_script_setup_true_lang.js +1 -1
  77. package/dist/components/tables/RuiTablePagination.vue_vue_type_script_setup_true_lang.js +1 -1
  78. package/dist/components/tables/data-table/RuiDataTableCell.vue_vue_type_script_setup_true_lang.js +1 -1
  79. package/dist/components/tables/data-table/RuiDataTableGroupRow.vue_vue_type_script_setup_true_lang.js +1 -1
  80. package/dist/components/tables/data-table/RuiDataTableMobileSort.vue_vue_type_script_setup_true_lang.js +1 -1
  81. package/dist/components/tables/data-table/RuiDataTableRow.vue_vue_type_script_setup_true_lang.js +23 -23
  82. package/dist/components/tables/data-table/RuiDataTableRow.vue_vue_type_script_setup_true_lang.js.map +1 -1
  83. package/dist/components/tables/use-pagination-navigation.js +1 -1
  84. package/dist/components/tabs/tab/RuiTab.vue_vue_type_script_setup_true_lang.js +1 -1
  85. package/dist/components/tabs/tab/use-tab-link.js +1 -1
  86. package/dist/components/tabs/tab-items/RuiTabItems.vue_vue_type_script_setup_true_lang.js +6 -6
  87. package/dist/components/tabs/tab-items/RuiTabItems.vue_vue_type_script_setup_true_lang.js.map +1 -1
  88. package/dist/components/tabs/tabs/RuiTabs.vue_vue_type_script_setup_true_lang.js +11 -12
  89. package/dist/components/tabs/tabs/RuiTabs.vue_vue_type_script_setup_true_lang.js.map +1 -1
  90. package/dist/components/tabs/tabs/use-tab-indicator.js +7 -7
  91. package/dist/components/tabs/tabs/use-tab-indicator.js.map +1 -1
  92. package/dist/components/tabs/tabs/use-tab-keyboard.js +1 -1
  93. package/dist/components/tabs/tabs/use-tab-scroll.js +15 -15
  94. package/dist/components/tabs/tabs/use-tab-scroll.js.map +1 -1
  95. package/dist/components/time-picker/RuiTimePicker.vue_vue_type_script_setup_true_lang.js +60 -61
  96. package/dist/components/time-picker/RuiTimePicker.vue_vue_type_script_setup_true_lang.js.map +1 -1
  97. package/dist/composables/breakpoint.js +3 -3
  98. package/dist/composables/breakpoint.js.map +1 -1
  99. package/dist/composables/dropdown-menu.d.ts +9 -9
  100. package/dist/composables/dropdown-menu.js +32 -32
  101. package/dist/composables/dropdown-menu.js.map +1 -1
  102. package/dist/composables/floating.d.ts +1 -1
  103. package/dist/composables/floating.js +11 -11
  104. package/dist/composables/floating.js.map +1 -1
  105. package/dist/composables/forms/auto-complete/focus.js +16 -17
  106. package/dist/composables/forms/auto-complete/focus.js.map +1 -1
  107. package/dist/composables/forms/auto-complete/keyboard-navigation.js +1 -1
  108. package/dist/composables/forms/auto-complete/search.js +6 -7
  109. package/dist/composables/forms/auto-complete/search.js.map +1 -1
  110. package/dist/composables/forms/auto-complete/selection.js +1 -1
  111. package/dist/composables/forms/auto-complete/value.js +1 -1
  112. package/dist/composables/forms/category-picker/use-category-picker.js +1 -1
  113. package/dist/composables/forms/use-prepend-append-width.js +6 -6
  114. package/dist/composables/forms/use-prepend-append-width.js.map +1 -1
  115. package/dist/composables/keyboard-scroll.js +5 -5
  116. package/dist/composables/keyboard-scroll.js.map +1 -1
  117. package/dist/composables/overlay-stack.js +1 -1
  118. package/dist/composables/sticky-header.js +8 -8
  119. package/dist/composables/sticky-header.js.map +1 -1
  120. package/dist/composables/tables/data-table/columns.js +1 -1
  121. package/dist/composables/tables/data-table/expansion.js +1 -1
  122. package/dist/composables/tables/data-table/grouping.js +27 -28
  123. package/dist/composables/tables/data-table/grouping.js.map +1 -1
  124. package/dist/composables/tables/data-table/page-scroll.d.ts +7 -5
  125. package/dist/composables/tables/data-table/page-scroll.js +48 -17
  126. package/dist/composables/tables/data-table/page-scroll.js.map +1 -1
  127. package/dist/composables/tables/data-table/pagination.js +1 -1
  128. package/dist/composables/tables/data-table/selection.js +37 -38
  129. package/dist/composables/tables/data-table/selection.js.map +1 -1
  130. package/dist/composables/tables/data-table/sort.js +1 -1
  131. package/dist/composables/theme.js +12 -12
  132. package/dist/composables/theme.js.map +1 -1
  133. package/dist/composables/timeout-manager.js +1 -1
  134. package/dist/index.d.ts +2 -2
  135. package/dist/index.js +2 -2
  136. package/dist/index.js.map +1 -1
  137. package/dist/style.css +2 -18
  138. package/dist/types/dom.d.ts +9 -0
  139. package/dist/types/theme.d.ts +2 -3
  140. package/dist/types/theme.js.map +1 -1
  141. package/dist/utils/form-text-detail.js +1 -1
  142. package/dist/utils/helpers.js +1 -1
  143. package/dist/vendor/@vueuse/core/dist/index.js +1577 -0
  144. package/dist/vendor/@vueuse/core/dist/index.js.map +1 -0
  145. package/dist/vendor/@vueuse/shared/dist/index.js +563 -0
  146. package/dist/vendor/@vueuse/shared/dist/index.js.map +1 -0
  147. package/dist/vite-plugin/index.js +5 -6
  148. package/dist/vite-plugin/index.js.map +1 -1
  149. package/dist/web-types.json +9 -2
  150. package/package.json +5 -4
@@ -1,8 +1,8 @@
1
+ import { get } from "../../../vendor/@vueuse/shared/dist/index.js";
1
2
  import { cn, tv } from "../../../utils/tv.js";
2
3
  import { TabAlignment, TabIndicatorPosition, TabLayout, TabVariant } from "../tab-props.js";
3
4
  import { useTabLink } from "./use-tab-link.js";
4
5
  import { computed, createBlock, createCommentVNode, createElementVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, unref, useId, useSlots, withCtx } from "vue";
5
- import { get } from "@vueuse/shared";
6
6
  //#region src/components/tabs/tab/RuiTab.vue?vue&type=script&setup=true&lang.ts
7
7
  var RuiTab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
8
8
  name: "RuiTab",
@@ -1,5 +1,5 @@
1
+ import { get } from "../../../vendor/@vueuse/shared/dist/index.js";
1
2
  import { computed, getCurrentInstance, toValue } from "vue";
2
- import { get } from "@vueuse/shared";
3
3
  import { useLink } from "vue-router";
4
4
  //#region src/components/tabs/tab/use-tab-link.ts
5
5
  /**
@@ -1,6 +1,6 @@
1
+ import { get, set } from "../../../vendor/@vueuse/shared/dist/index.js";
2
+ import { useElementSize } from "../../../vendor/@vueuse/core/dist/index.js";
1
3
  import { Fragment, computed, createBlock, createElementBlock, createElementVNode, defineComponent, isVNode, mergeProps, nextTick, openBlock, ref, renderList, resolveDynamicComponent, unref, useModel, useSlots, useTemplateRef, watch } from "vue";
2
- import { useElementSize } from "@vueuse/core";
3
- import { get as get$1, set as set$1 } from "@vueuse/shared";
4
4
  //#region src/components/tabs/tab-items/RuiTabItems.vue?vue&type=script&setup=true&lang.ts
5
5
  var RuiTabItems_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
6
6
  name: "RuiTabItems",
@@ -32,9 +32,9 @@ var RuiTabItems_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
32
32
  let anyActive = false;
33
33
  const children = tabs.map((tab, index) => {
34
34
  const value = tab.props?.value ?? index;
35
- if (get$1(modelValue) === value) {
35
+ if (get(modelValue) === value) {
36
36
  anyActive = true;
37
- if (index !== get$1(currIndex)) set$1(currIndex, index);
37
+ if (index !== get(currIndex)) set(currIndex, index);
38
38
  }
39
39
  return {
40
40
  ...tab,
@@ -44,7 +44,7 @@ var RuiTabItems_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
44
44
  }
45
45
  };
46
46
  });
47
- if (!anyActive) set$1(currIndex, -1);
47
+ if (!anyActive) set(currIndex, -1);
48
48
  return children;
49
49
  });
50
50
  /**
@@ -62,7 +62,7 @@ var RuiTabItems_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
62
62
  }
63
63
  watch(currIndex, (index) => {
64
64
  nextTick(() => {
65
- set$1(activeIndex, index);
65
+ set(activeIndex, index);
66
66
  });
67
67
  });
68
68
  return (_ctx, _cache) => {
@@ -1 +1 @@
1
- {"version":3,"file":"RuiTabItems.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/tabs/tab-items/RuiTabItems.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends string | number\">\nimport { Fragment, isVNode } from 'vue';\n\ndefineOptions({\n name: 'RuiTabItems',\n inheritAttrs: false,\n});\n\n/**\n * The tab whose panel is showing.\n *\n * The default matches RuiTabs. Without one, binding both components to the\n * same ref that starts as `undefined` leaves this component with\n * `modelValue === undefined`, so the `active = modelValue === value` check\n * fails for every tab: the panel renders but stays at height 0, which reads as\n * an element with no content.\n */\nconst modelValue = defineModel<T>({ default: () => 0 as T });\n\nconst slots = useSlots();\n\nconst currIndex = ref<number>(-1);\nconst activeIndex = ref<number>(-1);\nconst inner = useTemplateRef<HTMLDivElement>('inner');\n\nconst { height: innerHeight } = useElementSize(inner);\n\nconst children = computed<VNode[]>(() => {\n const slotContent = slots.default?.() ?? [];\n\n const tabs = getChildrenTabs(slotContent);\n\n let anyActive = false;\n const children = tabs.map((tab, index) => {\n const value = tab.props?.value ?? index;\n const active = get(modelValue) === value;\n if (active) {\n anyActive = true;\n if (index !== get(currIndex))\n set(currIndex, index);\n }\n\n return {\n ...tab,\n props: {\n value,\n ...tab.props,\n },\n };\n });\n\n if (!anyActive)\n set(currIndex, -1);\n\n return children;\n});\n\n/**\n * Unwraps the fragments a `v-for` in the slot produces, so only tab items come\n * back.\n *\n * @param children - the slot's vnodes\n * @returns the tab items among them\n */\nfunction getChildrenTabs(children: VNode[]): VNode[] {\n return children\n .flatMap((item) => {\n if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)\n return getChildrenTabs(item.children.filter(isVNode));\n\n return [item];\n })\n .flat();\n}\n\nwatch(currIndex, (index) => {\n nextTick(() => {\n set(activeIndex, index);\n });\n});\n</script>\n\n<template>\n <div\n class=\"grow transition-[height] duration-200 ease-out overflow-hidden motion-reduce:transition-none\"\n :style=\"{ height: `${innerHeight}px` }\"\n v-bind=\"$attrs\"\n >\n <div ref=\"inner\">\n <Component\n :is=\"child\"\n v-for=\"(child, i) in children\"\n :key=\"i\"\n :active=\"i === activeIndex\"\n />\n </div>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,aAAa,SAAc,SAAA,YAA0B;EAE3D,MAAM,QAAQ,SAAS;EAEvB,MAAM,YAAY,IAAY,EAAE;EAChC,MAAM,cAAc,IAAY,EAAE;EAClC,MAAM,QAAQ,eAA+B,OAAO;EAEpD,MAAM,EAAE,QAAQ,gBAAgB,eAAe,KAAK;EAEpD,MAAM,WAAW,eAAwB;GAGvC,MAAM,OAAO,gBAFO,MAAM,UAAU,KAAK,CAAC,CAEF;GAExC,IAAI,YAAY;GAChB,MAAM,WAAW,KAAK,KAAK,KAAK,UAAU;IACxC,MAAM,QAAQ,IAAI,OAAO,SAAS;IAElC,IADe,MAAI,UAAU,MAAM,OACvB;KACV,YAAY;KACZ,IAAI,UAAU,MAAI,SAAS,GACzB,MAAI,WAAW,KAAK;IACxB;IAEA,OAAO;KACL,GAAG;KACH,OAAO;MACL;MACA,GAAG,IAAI;KACT;IACF;GACF,CAAC;GAED,IAAI,CAAC,WACH,MAAI,WAAW,EAAE;GAEnB,OAAO;EACT,CAAC;;;;;;;;EASD,SAAS,gBAAgB,UAA4B;GACnD,OAAO,SACJ,SAAS,SAAS;IACjB,IAAI,KAAK,SAAS,YAAY,MAAM,QAAQ,KAAK,QAAQ,KAAK,KAAK,SAAS,SAAS,GACnF,OAAO,gBAAgB,KAAK,SAAS,OAAO,OAAO,CAAC;IAEtD,OAAO,CAAC,IAAI;GACd,CAAC,CAAA,CACA,KAAK;EACV;EAEA,MAAM,YAAY,UAAU;GAC1B,eAAe;IACb,MAAI,aAAa,KAAK;GACxB,CAAC;EACH,CAAC;;GAIC,OAAA,UAAA,GAAA,mBAaM,OAbN,WAaM;IAZJ,OAAM;IACL,OAAK,EAAA,QAAA,GAAe,MAAA,WAAA,EAAW,IAAA;GACxBA,GAAAA,KAAAA,MAAM,GAAA,CAEd,mBAOM,OAAA;IAPG,SAAA;IAAJ,KAAI;GACP,GAAA,EAAA,UAAA,IAAA,GAAA,mBAKE,UAAA,MAAA,WAHqB,MAAA,QAAA,IAAb,OAAO,MAAC;IAFlB,OAAA,UAAA,GAAA,YAKE,wBAJK,KAAK,GAAA;KAET,KAAK;KACL,QAAQ,MAAM,MAAA,WAAA"}
1
+ {"version":3,"file":"RuiTabItems.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/tabs/tab-items/RuiTabItems.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends string | number\">\nimport { Fragment, isVNode } from 'vue';\n\ndefineOptions({\n name: 'RuiTabItems',\n inheritAttrs: false,\n});\n\n/**\n * The tab whose panel is showing.\n *\n * The default matches RuiTabs. Without one, binding both components to the\n * same ref that starts as `undefined` leaves this component with\n * `modelValue === undefined`, so the `active = modelValue === value` check\n * fails for every tab: the panel renders but stays at height 0, which reads as\n * an element with no content.\n */\nconst modelValue = defineModel<T>({ default: () => 0 as T });\n\nconst slots = useSlots();\n\nconst currIndex = ref<number>(-1);\nconst activeIndex = ref<number>(-1);\nconst inner = useTemplateRef<HTMLDivElement>('inner');\n\nconst { height: innerHeight } = useElementSize(inner);\n\nconst children = computed<VNode[]>(() => {\n const slotContent = slots.default?.() ?? [];\n\n const tabs = getChildrenTabs(slotContent);\n\n let anyActive = false;\n const children = tabs.map((tab, index) => {\n const value = tab.props?.value ?? index;\n const active = get(modelValue) === value;\n if (active) {\n anyActive = true;\n if (index !== get(currIndex))\n set(currIndex, index);\n }\n\n return {\n ...tab,\n props: {\n value,\n ...tab.props,\n },\n };\n });\n\n if (!anyActive)\n set(currIndex, -1);\n\n return children;\n});\n\n/**\n * Unwraps the fragments a `v-for` in the slot produces, so only tab items come\n * back.\n *\n * @param children - the slot's vnodes\n * @returns the tab items among them\n */\nfunction getChildrenTabs(children: VNode[]): VNode[] {\n return children\n .flatMap((item) => {\n if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)\n return getChildrenTabs(item.children.filter(isVNode));\n\n return [item];\n })\n .flat();\n}\n\nwatch(currIndex, (index) => {\n nextTick(() => {\n set(activeIndex, index);\n });\n});\n</script>\n\n<template>\n <div\n class=\"grow transition-[height] duration-200 ease-out overflow-hidden motion-reduce:transition-none\"\n :style=\"{ height: `${innerHeight}px` }\"\n v-bind=\"$attrs\"\n >\n <div ref=\"inner\">\n <Component\n :is=\"child\"\n v-for=\"(child, i) in children\"\n :key=\"i\"\n :active=\"i === activeIndex\"\n />\n </div>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,aAAa,SAAc,SAAA,YAA0B;EAE3D,MAAM,QAAQ,SAAS;EAEvB,MAAM,YAAY,IAAY,EAAE;EAChC,MAAM,cAAc,IAAY,EAAE;EAClC,MAAM,QAAQ,eAA+B,OAAO;EAEpD,MAAM,EAAE,QAAQ,gBAAgB,eAAe,KAAK;EAEpD,MAAM,WAAW,eAAwB;GAGvC,MAAM,OAAO,gBAFO,MAAM,UAAU,KAAK,CAAC,CAEF;GAExC,IAAI,YAAY;GAChB,MAAM,WAAW,KAAK,KAAK,KAAK,UAAU;IACxC,MAAM,QAAQ,IAAI,OAAO,SAAS;IAElC,IADe,IAAI,UAAU,MAAM,OACvB;KACV,YAAY;KACZ,IAAI,UAAU,IAAI,SAAS,GACzB,IAAI,WAAW,KAAK;IACxB;IAEA,OAAO;KACL,GAAG;KACH,OAAO;MACL;MACA,GAAG,IAAI;KACT;IACF;GACF,CAAC;GAED,IAAI,CAAC,WACH,IAAI,WAAW,EAAE;GAEnB,OAAO;EACT,CAAC;;;;;;;;EASD,SAAS,gBAAgB,UAA4B;GACnD,OAAO,SACJ,SAAS,SAAS;IACjB,IAAI,KAAK,SAAS,YAAY,MAAM,QAAQ,KAAK,QAAQ,KAAK,KAAK,SAAS,SAAS,GACnF,OAAO,gBAAgB,KAAK,SAAS,OAAO,OAAO,CAAC;IAEtD,OAAO,CAAC,IAAI;GACd,CAAC,CAAA,CACA,KAAK;EACV;EAEA,MAAM,YAAY,UAAU;GAC1B,eAAe;IACb,IAAI,aAAa,KAAK;GACxB,CAAC;EACH,CAAC;;GAIC,OAAA,UAAA,GAAA,mBAaM,OAbN,WAaM;IAZJ,OAAM;IACL,OAAK,EAAA,QAAA,GAAe,MAAA,WAAA,EAAW,IAAA;GACxBA,GAAAA,KAAAA,MAAM,GAAA,CAEd,mBAOM,OAAA;IAPG,SAAA;IAAJ,KAAI;GACP,GAAA,EAAA,UAAA,IAAA,GAAA,mBAKE,UAAA,MAAA,WAHqB,MAAA,QAAA,IAAb,OAAO,MAAC;IAFlB,OAAA,UAAA,GAAA,YAKE,wBAJK,KAAK,GAAA;KAET,KAAK;KACL,QAAQ,MAAM,MAAA,WAAA"}
@@ -1,3 +1,4 @@
1
+ import { get, set, watchImmediate } from "../../../vendor/@vueuse/shared/dist/index.js";
1
2
  import { tv } from "../../../utils/tv.js";
2
3
  import RuiIcon_default from "../../icons/RuiIcon.js";
3
4
  import RuiButton_default from "../../buttons/button/RuiButton.js";
@@ -8,8 +9,6 @@ import { useTabKeyboard } from "./use-tab-keyboard.js";
8
9
  import { useTabRouting } from "./use-tab-routing.js";
9
10
  import { useTabScroll } from "./use-tab-scroll.js";
10
11
  import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, isVNode, mergeModels, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, resolveDynamicComponent, unref, useModel, useSlots, useTemplateRef, watch, withCtx } from "vue";
11
- import { watchImmediate } from "@vueuse/core";
12
- import { get as get$1, set as set$1 } from "@vueuse/shared";
13
12
  //#region src/components/tabs/tabs/RuiTabs.vue?vue&type=script&setup=true&lang.ts
14
13
  var _hoisted_1 = ["data-vertical"];
15
14
  var _hoisted_2 = ["tabindex"];
@@ -205,15 +204,15 @@ var RuiTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
205
204
  const layout = computed(() => __props.vertical ? TabLayout.vertical : TabLayout.horizontal);
206
205
  const ui = computed(() => tabs({
207
206
  variant: __props.variant,
208
- layout: get$1(layout),
207
+ layout: get(layout),
209
208
  indicatorPosition: __props.indicatorPosition,
210
209
  color: __props.color,
211
210
  wide: __props.vertical || __props.grow,
212
- animated: get$1(animated)
211
+ animated: get(animated)
213
212
  }));
214
213
  const children = computed(() => {
215
214
  const tabs = getChildrenTabs(slots.default?.() ?? []);
216
- const currentModelValue = get$1(internalModelValue);
215
+ const currentModelValue = get(internalModelValue);
217
216
  const inheritedProps = {
218
217
  color: __props.color,
219
218
  grow: __props.grow,
@@ -252,8 +251,8 @@ var RuiTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
252
251
  }).flat();
253
252
  }
254
253
  function updateModelValue(newModelValue) {
255
- set$1(modelValue, newModelValue);
256
- set$1(internalModelValue, newModelValue);
254
+ set(modelValue, newModelValue);
255
+ set(internalModelValue, newModelValue);
257
256
  }
258
257
  function getTabRouteProps(props) {
259
258
  return {
@@ -264,9 +263,9 @@ var RuiTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
264
263
  };
265
264
  }
266
265
  function resolveActiveValue(onlyLink) {
267
- const enabledChildren = get$1(children).filter((child) => !child.props?.disabled);
266
+ const enabledChildren = get(children).filter((child) => !child.props?.disabled);
268
267
  if (enabledChildren.length === 0) return void 0;
269
- let result = get$1(modelValue) || 0;
268
+ let result = get(modelValue) || 0;
270
269
  enabledChildren.forEach((child, index) => {
271
270
  const tabProps = getTabRouteProps(child.props);
272
271
  if (!onlyLink && index === 0 && tabProps.value) result = tabProps.value;
@@ -280,8 +279,8 @@ var RuiTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
280
279
  if (value !== void 0) updateModelValue(value);
281
280
  keepActiveTabVisible();
282
281
  }
283
- watchImmediate(() => get$1(modelValue), (modelValue) => {
284
- set$1(internalModelValue, modelValue);
282
+ watchImmediate(() => get(modelValue), (modelValue) => {
283
+ set(internalModelValue, modelValue);
285
284
  });
286
285
  watch(internalModelValue, () => {
287
286
  keepActiveTabVisible();
@@ -293,7 +292,7 @@ var RuiTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
293
292
  __props.align
294
293
  ], () => nextTick(updateIndicator), { flush: "post" });
295
294
  onMounted(() => {
296
- if (get$1(modelValue) !== void 0) return;
295
+ if (get(modelValue) !== void 0) return;
297
296
  applyNewValue();
298
297
  });
299
298
  return (_ctx, _cache) => {
@@ -1 +1 @@
1
- {"version":3,"file":"RuiTabs.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/tabs/tabs/RuiTabs.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { Fragment, isVNode, type VNode } from 'vue';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type TabAlignment, type TabIndicatorPosition, TabLayout, TabVariant } from '@/components/tabs/tab-props';\nimport { useTabIndicator } from '@/components/tabs/tabs/use-tab-indicator';\nimport { useTabKeyboard } from '@/components/tabs/tabs/use-tab-keyboard';\nimport { useTabRouting } from '@/components/tabs/tabs/use-tab-routing';\nimport { useTabScroll } from '@/components/tabs/tabs/use-tab-scroll';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { tv } from '@/utils/tv';\n\ntype ChildNode = VNode & { props: Record<string, any> };\n\ninterface ResolvedTabProps {\n value?: string | number;\n to?: unknown;\n link?: boolean;\n exact?: boolean;\n}\n\nexport interface Props {\n color?: ContextColorsType;\n vertical?: boolean;\n disabled?: boolean;\n grow?: boolean;\n align?: TabAlignment;\n indicatorPosition?: TabIndicatorPosition;\n variant?: TabVariant;\n}\n\ndefineOptions({\n name: 'RuiTabs',\n});\n\n/**\n * The selected tab, defaulting to the first one. The default also narrows the\n * `update:modelValue` payload to `number | string`, so a consumer's handler\n * needs no undefined in its signature.\n */\nconst modelValue = defineModel<number | string>({ default: 0 });\n\nconst {\n color,\n vertical = false,\n disabled = false,\n grow = false,\n align = 'center',\n indicatorPosition = 'end',\n variant = TabVariant.underline,\n} = defineProps<Props>();\n\nconst internalModelValue = ref<string | number>();\nconst bar = useTemplateRef<HTMLDivElement>('bar');\nconst wrapper = useTemplateRef<HTMLDivElement>('wrapper');\nconst barTabindex = useKeyboardScroll(bar);\n\n/**\n * The bar. The underline variant draws its 1px track as a `before` line along\n * the whole root, so the arrows sit on it too, and the 2px indicator, a layer\n * above, covers it under the active tab.\n */\nconst tabs = tv({\n slots: {\n root: '',\n arrow: 'flex shrink-0 items-center justify-center',\n // a tab stop only when it scrolls with every tab disabled (useKeyboardScroll)\n bar: 'no-scrollbar relative max-h-full overflow-auto outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2',\n wrapper: 'inline-flex max-w-none',\n indicator: 'pointer-events-none absolute',\n },\n variants: {\n variant: {\n [TabVariant.underline]: {\n root: `relative before:pointer-events-none before:absolute before:bg-rui-divider before:content-['']`,\n indicator: 'z-1 bg-rui-primary',\n },\n [TabVariant.segmented]: {\n // neutral-200, not 100: on a near-white page (`#fafafa`) the lighter track all but disappeared\n root: 'rounded-rui-panel bg-rui-neutral-200 p-0.5 dark:bg-rui-neutral-800',\n wrapper: 'gap-0.5',\n indicator: 'rounded-rui-control bg-rui-surface shadow-rui-control dark:bg-rui-neutral-700',\n },\n },\n layout: {\n [TabLayout.horizontal]: { root: 'flex h-fit', arrow: 'w-8' },\n [TabLayout.vertical]: { root: 'inline-flex flex-col', arrow: 'h-8 w-full', wrapper: 'flex-col w-full' },\n },\n indicatorPosition: {\n start: {},\n end: {},\n },\n color: {\n primary: {},\n secondary: {},\n error: {},\n warning: {},\n info: {},\n success: {},\n },\n wide: {\n true: { bar: 'w-full', wrapper: 'min-w-full' },\n false: {},\n },\n animated: {\n true: { indicator: 'transition-[left,top,width,height] duration-200 ease-out motion-reduce:transition-none' },\n false: {},\n },\n },\n compoundVariants: [\n { variant: TabVariant.underline, layout: TabLayout.horizontal, indicatorPosition: 'end', class: { root: 'before:inset-x-0 before:bottom-0 before:h-px', indicator: 'bottom-0 h-0.5 rounded-t-full' } },\n { variant: TabVariant.underline, layout: TabLayout.horizontal, indicatorPosition: 'start', class: { root: 'before:inset-x-0 before:top-0 before:h-px', indicator: 'top-0 h-0.5 rounded-b-full' } },\n { variant: TabVariant.underline, layout: TabLayout.vertical, indicatorPosition: 'end', class: { root: 'before:inset-y-0 before:right-0 before:w-px', indicator: 'right-0 w-0.5 rounded-l-full' } },\n { variant: TabVariant.underline, layout: TabLayout.vertical, indicatorPosition: 'start', class: { root: 'before:inset-y-0 before:left-0 before:w-px', indicator: 'left-0 w-0.5 rounded-r-full' } },\n // the underline track spans its row, while a segmented control hugs its options unless it grows\n { variant: TabVariant.segmented, layout: TabLayout.horizontal, wide: false, class: { root: 'w-fit max-w-full' } },\n // `color` picks the underline's color; the segmented pill stays a neutral surface\n { variant: TabVariant.underline, color: 'secondary', class: { indicator: 'bg-rui-secondary' } },\n { variant: TabVariant.underline, color: 'error', class: { indicator: 'bg-rui-error' } },\n { variant: TabVariant.underline, color: 'warning', class: { indicator: 'bg-rui-warning' } },\n { variant: TabVariant.underline, color: 'info', class: { indicator: 'bg-rui-info' } },\n { variant: TabVariant.underline, color: 'success', class: { indicator: 'bg-rui-success' } },\n ],\n defaultVariants: { variant: TabVariant.underline, layout: TabLayout.horizontal, indicatorPosition: 'end' },\n});\n\nconst slots = useSlots();\n\nconst {\n showArrows,\n prevArrowDisabled,\n nextArrowDisabled,\n onPrevSliderClick,\n onNextSliderClick,\n keepActiveTabVisible,\n} = useTabScroll({ bar, wrapper, vertical: () => vertical });\n\nconst { resolveRoute, isPathMatch } = useTabRouting({\n onRouteChange: () => applyNewValue(true),\n});\n\nconst { onKeydown } = useTabKeyboard({ wrapper, vertical: () => vertical });\n\nconst { style: indicatorStyle, animated, update: updateIndicator } = useTabIndicator({\n bar,\n wrapper,\n vertical: () => vertical,\n variant: () => variant,\n});\n\nconst layout = computed<TabLayout>(() => vertical ? TabLayout.vertical : TabLayout.horizontal);\nconst ui = computed<ReturnType<typeof tabs>>(() => tabs({\n variant,\n layout: get(layout),\n indicatorPosition,\n color,\n wide: vertical || grow,\n animated: get(animated),\n}));\n\nconst children = computed<ChildNode[]>(() => {\n const slotContent = slots.default?.() ?? [];\n\n const tabs = getChildrenTabs(slotContent);\n\n const currentModelValue = get(internalModelValue);\n const inheritedProps = {\n color,\n grow,\n disabled,\n vertical,\n align,\n indicatorPosition,\n variant,\n };\n\n return tabs.map((tab, index) => {\n let tabValue = tab.props?.value ?? index;\n if (tab.props?.link !== false && tab.props?.to)\n tabValue = tab.props.to;\n\n const active = currentModelValue === tabValue;\n return {\n ...tab,\n props: {\n value: tabValue,\n active,\n ...inheritedProps,\n ...tab.props,\n },\n };\n });\n});\n\n/**\n * Unwraps the fragments a `v-for` in the slot produces, so only tabs come\n * back.\n *\n * @param children - the slot's vnodes\n * @returns the tabs among them\n */\nfunction getChildrenTabs(children: VNode[]): VNode[] {\n return children.flatMap((item) => {\n if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)\n return getChildrenTabs(item.children.filter(isVNode));\n\n return [item];\n }).flat();\n}\n\nfunction updateModelValue(newModelValue: string | number): void {\n set(modelValue, newModelValue);\n set(internalModelValue, newModelValue);\n}\n\nfunction getTabRouteProps(props: Record<string, unknown>): ResolvedTabProps {\n return {\n value: typeof props.value === 'string' || typeof props.value === 'number' ? props.value : undefined,\n to: props.to ?? undefined,\n link: typeof props.link === 'boolean' ? props.link : undefined,\n exact: typeof props.exact === 'boolean' ? props.exact : undefined,\n };\n}\n\nfunction resolveActiveValue(onlyLink: boolean): string | number | undefined {\n const enabledChildren = get(children).filter(child => !child.props?.disabled);\n if (enabledChildren.length === 0)\n return undefined;\n\n let result: string | number = get(modelValue) || 0;\n enabledChildren.forEach((child, index) => {\n const tabProps = getTabRouteProps(child.props);\n if (!onlyLink && index === 0 && tabProps.value)\n result = tabProps.value;\n\n const fullPath = resolveRoute(tabProps.to);\n\n if (tabProps.link !== false && fullPath && isPathMatch(fullPath, tabProps))\n result = fullPath;\n });\n return result;\n}\n\nfunction applyNewValue(onlyLink = false): void {\n const value = resolveActiveValue(onlyLink);\n if (value !== undefined)\n updateModelValue(value);\n\n keepActiveTabVisible();\n}\n\nwatchImmediate(() => get(modelValue), (modelValue) => {\n set(internalModelValue, modelValue);\n});\n\nwatch(internalModelValue, () => {\n keepActiveTabVisible();\n});\n\nwatch(() => [vertical, variant, grow, align], () => nextTick(updateIndicator), { flush: 'post' });\n\nonMounted(() => {\n if (get(modelValue) !== undefined)\n return;\n\n applyNewValue();\n});\n</script>\n\n<template>\n <div\n :class=\"ui.root()\"\n :data-vertical=\"vertical || undefined\"\n >\n <div\n v-if=\"showArrows\"\n :class=\"ui.arrow()\"\n >\n <RuiButton\n variant=\"text\"\n icon\n size=\"sm\"\n tabindex=\"-1\"\n aria-label=\"Scroll tabs back\"\n :disabled=\"prevArrowDisabled\"\n @click=\"onPrevSliderClick()\"\n >\n <RuiIcon :name=\"vertical ? 'lu-chevron-up' : 'lu-chevron-left'\" />\n </RuiButton>\n </div>\n <div\n ref=\"bar\"\n :class=\"ui.bar()\"\n :tabindex=\"barTabindex\"\n >\n <span\n v-if=\"indicatorStyle\"\n aria-hidden=\"true\"\n data-id=\"tabs-indicator\"\n :class=\"ui.indicator()\"\n :style=\"indicatorStyle\"\n />\n <div\n ref=\"wrapper\"\n role=\"tablist\"\n data-id=\"tabs-wrapper\"\n :aria-orientation=\"vertical ? 'vertical' : undefined\"\n :class=\"ui.wrapper()\"\n @keydown=\"onKeydown($event)\"\n >\n <Component\n :is=\"child\"\n v-for=\"(child, i) in children\"\n :key=\"i\"\n @click=\"updateModelValue($event)\"\n />\n </div>\n </div>\n <div\n v-if=\"showArrows\"\n :class=\"ui.arrow()\"\n >\n <RuiButton\n variant=\"text\"\n icon\n size=\"sm\"\n tabindex=\"-1\"\n aria-label=\"Scroll tabs forward\"\n :disabled=\"nextArrowDisabled\"\n @click=\"onNextSliderClick()\"\n >\n <RuiIcon :name=\"vertical ? 'lu-chevron-down' : 'lu-chevron-right'\" />\n </RuiButton>\n </div>\n </div>\n</template>\n"],"mappings":"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"}
1
+ {"version":3,"file":"RuiTabs.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/tabs/tabs/RuiTabs.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { Fragment, isVNode, type VNode } from 'vue';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type TabAlignment, type TabIndicatorPosition, TabLayout, TabVariant } from '@/components/tabs/tab-props';\nimport { useTabIndicator } from '@/components/tabs/tabs/use-tab-indicator';\nimport { useTabKeyboard } from '@/components/tabs/tabs/use-tab-keyboard';\nimport { useTabRouting } from '@/components/tabs/tabs/use-tab-routing';\nimport { useTabScroll } from '@/components/tabs/tabs/use-tab-scroll';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { tv } from '@/utils/tv';\n\ntype ChildNode = VNode & { props: Record<string, any> };\n\ninterface ResolvedTabProps {\n value?: string | number;\n to?: unknown;\n link?: boolean;\n exact?: boolean;\n}\n\nexport interface Props {\n color?: ContextColorsType;\n vertical?: boolean;\n disabled?: boolean;\n grow?: boolean;\n align?: TabAlignment;\n indicatorPosition?: TabIndicatorPosition;\n variant?: TabVariant;\n}\n\ndefineOptions({\n name: 'RuiTabs',\n});\n\n/**\n * The selected tab, defaulting to the first one. The default also narrows the\n * `update:modelValue` payload to `number | string`, so a consumer's handler\n * needs no undefined in its signature.\n */\nconst modelValue = defineModel<number | string>({ default: 0 });\n\nconst {\n color,\n vertical = false,\n disabled = false,\n grow = false,\n align = 'center',\n indicatorPosition = 'end',\n variant = TabVariant.underline,\n} = defineProps<Props>();\n\nconst internalModelValue = ref<string | number>();\nconst bar = useTemplateRef<HTMLDivElement>('bar');\nconst wrapper = useTemplateRef<HTMLDivElement>('wrapper');\nconst barTabindex = useKeyboardScroll(bar);\n\n/**\n * The bar. The underline variant draws its 1px track as a `before` line along\n * the whole root, so the arrows sit on it too, and the 2px indicator, a layer\n * above, covers it under the active tab.\n */\nconst tabs = tv({\n slots: {\n root: '',\n arrow: 'flex shrink-0 items-center justify-center',\n // a tab stop only when it scrolls with every tab disabled (useKeyboardScroll)\n bar: 'no-scrollbar relative max-h-full overflow-auto outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2',\n wrapper: 'inline-flex max-w-none',\n indicator: 'pointer-events-none absolute',\n },\n variants: {\n variant: {\n [TabVariant.underline]: {\n root: `relative before:pointer-events-none before:absolute before:bg-rui-divider before:content-['']`,\n indicator: 'z-1 bg-rui-primary',\n },\n [TabVariant.segmented]: {\n // neutral-200, not 100: on a near-white page (`#fafafa`) the lighter track all but disappeared\n root: 'rounded-rui-panel bg-rui-neutral-200 p-0.5 dark:bg-rui-neutral-800',\n wrapper: 'gap-0.5',\n indicator: 'rounded-rui-control bg-rui-surface shadow-rui-control dark:bg-rui-neutral-700',\n },\n },\n layout: {\n [TabLayout.horizontal]: { root: 'flex h-fit', arrow: 'w-8' },\n [TabLayout.vertical]: { root: 'inline-flex flex-col', arrow: 'h-8 w-full', wrapper: 'flex-col w-full' },\n },\n indicatorPosition: {\n start: {},\n end: {},\n },\n color: {\n primary: {},\n secondary: {},\n error: {},\n warning: {},\n info: {},\n success: {},\n },\n wide: {\n true: { bar: 'w-full', wrapper: 'min-w-full' },\n false: {},\n },\n animated: {\n true: { indicator: 'transition-[left,top,width,height] duration-200 ease-out motion-reduce:transition-none' },\n false: {},\n },\n },\n compoundVariants: [\n { variant: TabVariant.underline, layout: TabLayout.horizontal, indicatorPosition: 'end', class: { root: 'before:inset-x-0 before:bottom-0 before:h-px', indicator: 'bottom-0 h-0.5 rounded-t-full' } },\n { variant: TabVariant.underline, layout: TabLayout.horizontal, indicatorPosition: 'start', class: { root: 'before:inset-x-0 before:top-0 before:h-px', indicator: 'top-0 h-0.5 rounded-b-full' } },\n { variant: TabVariant.underline, layout: TabLayout.vertical, indicatorPosition: 'end', class: { root: 'before:inset-y-0 before:right-0 before:w-px', indicator: 'right-0 w-0.5 rounded-l-full' } },\n { variant: TabVariant.underline, layout: TabLayout.vertical, indicatorPosition: 'start', class: { root: 'before:inset-y-0 before:left-0 before:w-px', indicator: 'left-0 w-0.5 rounded-r-full' } },\n // the underline track spans its row, while a segmented control hugs its options unless it grows\n { variant: TabVariant.segmented, layout: TabLayout.horizontal, wide: false, class: { root: 'w-fit max-w-full' } },\n // `color` picks the underline's color; the segmented pill stays a neutral surface\n { variant: TabVariant.underline, color: 'secondary', class: { indicator: 'bg-rui-secondary' } },\n { variant: TabVariant.underline, color: 'error', class: { indicator: 'bg-rui-error' } },\n { variant: TabVariant.underline, color: 'warning', class: { indicator: 'bg-rui-warning' } },\n { variant: TabVariant.underline, color: 'info', class: { indicator: 'bg-rui-info' } },\n { variant: TabVariant.underline, color: 'success', class: { indicator: 'bg-rui-success' } },\n ],\n defaultVariants: { variant: TabVariant.underline, layout: TabLayout.horizontal, indicatorPosition: 'end' },\n});\n\nconst slots = useSlots();\n\nconst {\n showArrows,\n prevArrowDisabled,\n nextArrowDisabled,\n onPrevSliderClick,\n onNextSliderClick,\n keepActiveTabVisible,\n} = useTabScroll({ bar, wrapper, vertical: () => vertical });\n\nconst { resolveRoute, isPathMatch } = useTabRouting({\n onRouteChange: () => applyNewValue(true),\n});\n\nconst { onKeydown } = useTabKeyboard({ wrapper, vertical: () => vertical });\n\nconst { style: indicatorStyle, animated, update: updateIndicator } = useTabIndicator({\n bar,\n wrapper,\n vertical: () => vertical,\n variant: () => variant,\n});\n\nconst layout = computed<TabLayout>(() => vertical ? TabLayout.vertical : TabLayout.horizontal);\nconst ui = computed<ReturnType<typeof tabs>>(() => tabs({\n variant,\n layout: get(layout),\n indicatorPosition,\n color,\n wide: vertical || grow,\n animated: get(animated),\n}));\n\nconst children = computed<ChildNode[]>(() => {\n const slotContent = slots.default?.() ?? [];\n\n const tabs = getChildrenTabs(slotContent);\n\n const currentModelValue = get(internalModelValue);\n const inheritedProps = {\n color,\n grow,\n disabled,\n vertical,\n align,\n indicatorPosition,\n variant,\n };\n\n return tabs.map((tab, index) => {\n let tabValue = tab.props?.value ?? index;\n if (tab.props?.link !== false && tab.props?.to)\n tabValue = tab.props.to;\n\n const active = currentModelValue === tabValue;\n return {\n ...tab,\n props: {\n value: tabValue,\n active,\n ...inheritedProps,\n ...tab.props,\n },\n };\n });\n});\n\n/**\n * Unwraps the fragments a `v-for` in the slot produces, so only tabs come\n * back.\n *\n * @param children - the slot's vnodes\n * @returns the tabs among them\n */\nfunction getChildrenTabs(children: VNode[]): VNode[] {\n return children.flatMap((item) => {\n if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)\n return getChildrenTabs(item.children.filter(isVNode));\n\n return [item];\n }).flat();\n}\n\nfunction updateModelValue(newModelValue: string | number): void {\n set(modelValue, newModelValue);\n set(internalModelValue, newModelValue);\n}\n\nfunction getTabRouteProps(props: Record<string, unknown>): ResolvedTabProps {\n return {\n value: typeof props.value === 'string' || typeof props.value === 'number' ? props.value : undefined,\n to: props.to ?? undefined,\n link: typeof props.link === 'boolean' ? props.link : undefined,\n exact: typeof props.exact === 'boolean' ? props.exact : undefined,\n };\n}\n\nfunction resolveActiveValue(onlyLink: boolean): string | number | undefined {\n const enabledChildren = get(children).filter(child => !child.props?.disabled);\n if (enabledChildren.length === 0)\n return undefined;\n\n let result: string | number = get(modelValue) || 0;\n enabledChildren.forEach((child, index) => {\n const tabProps = getTabRouteProps(child.props);\n if (!onlyLink && index === 0 && tabProps.value)\n result = tabProps.value;\n\n const fullPath = resolveRoute(tabProps.to);\n\n if (tabProps.link !== false && fullPath && isPathMatch(fullPath, tabProps))\n result = fullPath;\n });\n return result;\n}\n\nfunction applyNewValue(onlyLink = false): void {\n const value = resolveActiveValue(onlyLink);\n if (value !== undefined)\n updateModelValue(value);\n\n keepActiveTabVisible();\n}\n\nwatchImmediate(() => get(modelValue), (modelValue) => {\n set(internalModelValue, modelValue);\n});\n\nwatch(internalModelValue, () => {\n keepActiveTabVisible();\n});\n\nwatch(() => [vertical, variant, grow, align], () => nextTick(updateIndicator), { flush: 'post' });\n\nonMounted(() => {\n if (get(modelValue) !== undefined)\n return;\n\n applyNewValue();\n});\n</script>\n\n<template>\n <div\n :class=\"ui.root()\"\n :data-vertical=\"vertical || undefined\"\n >\n <div\n v-if=\"showArrows\"\n :class=\"ui.arrow()\"\n >\n <RuiButton\n variant=\"text\"\n icon\n size=\"sm\"\n tabindex=\"-1\"\n aria-label=\"Scroll tabs back\"\n :disabled=\"prevArrowDisabled\"\n @click=\"onPrevSliderClick()\"\n >\n <RuiIcon :name=\"vertical ? 'lu-chevron-up' : 'lu-chevron-left'\" />\n </RuiButton>\n </div>\n <div\n ref=\"bar\"\n :class=\"ui.bar()\"\n :tabindex=\"barTabindex\"\n >\n <span\n v-if=\"indicatorStyle\"\n aria-hidden=\"true\"\n data-id=\"tabs-indicator\"\n :class=\"ui.indicator()\"\n :style=\"indicatorStyle\"\n />\n <div\n ref=\"wrapper\"\n role=\"tablist\"\n data-id=\"tabs-wrapper\"\n :aria-orientation=\"vertical ? 'vertical' : undefined\"\n :class=\"ui.wrapper()\"\n @keydown=\"onKeydown($event)\"\n >\n <Component\n :is=\"child\"\n v-for=\"(child, i) in children\"\n :key=\"i\"\n @click=\"updateModelValue($event)\"\n />\n </div>\n </div>\n <div\n v-if=\"showArrows\"\n :class=\"ui.arrow()\"\n >\n <RuiButton\n variant=\"text\"\n icon\n size=\"sm\"\n tabindex=\"-1\"\n aria-label=\"Scroll tabs forward\"\n :disabled=\"nextArrowDisabled\"\n @click=\"onNextSliderClick()\"\n >\n <RuiIcon :name=\"vertical ? 'lu-chevron-down' : 'lu-chevron-right'\" />\n </RuiButton>\n </div>\n </div>\n</template>\n"],"mappings":"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"}
@@ -1,7 +1,7 @@
1
+ import { get, set } from "../../../vendor/@vueuse/shared/dist/index.js";
2
+ import { useMutationObserver, useResizeObserver } from "../../../vendor/@vueuse/core/dist/index.js";
1
3
  import { TabVariant } from "../tab-props.js";
2
4
  import { computed, onMounted, readonly, shallowRef, toValue } from "vue";
3
- import { useMutationObserver, useResizeObserver } from "@vueuse/core";
4
- import { get as get$1, set as set$1 } from "@vueuse/shared";
5
5
  //#region src/components/tabs/tabs/use-tab-indicator.ts
6
6
  /**
7
7
  * Tracks the active tab's box so one indicator can slide between tabs. It lives
@@ -13,21 +13,21 @@ function useTabIndicator({ bar, wrapper, vertical, variant }) {
13
13
  const rect = shallowRef();
14
14
  const animated = shallowRef(false);
15
15
  function update() {
16
- const tab = get$1(bar)?.querySelector("[role=tab][data-active-tab]");
16
+ const tab = get(bar)?.querySelector("[role=tab][data-active-tab]");
17
17
  if (!tab) {
18
- set$1(rect, void 0);
18
+ set(rect, void 0);
19
19
  return;
20
20
  }
21
- set$1(rect, {
21
+ set(rect, {
22
22
  left: tab.offsetLeft,
23
23
  top: tab.offsetTop,
24
24
  width: tab.offsetWidth,
25
25
  height: tab.offsetHeight
26
26
  });
27
- if (!get$1(animated)) requestAnimationFrame(() => set$1(animated, true));
27
+ if (!get(animated)) requestAnimationFrame(() => set(animated, true));
28
28
  }
29
29
  const style = computed(() => {
30
- const box = get$1(rect);
30
+ const box = get(rect);
31
31
  if (!box) return void 0;
32
32
  const px = (value) => `${value}px`;
33
33
  if (toValue(variant) === TabVariant.segmented) return {
@@ -1 +1 @@
1
- {"version":3,"file":"use-tab-indicator.js","names":[],"sources":["../../../../src/components/tabs/tabs/use-tab-indicator.ts"],"sourcesContent":["import type { ComputedRef, CSSProperties, MaybeRefOrGetter, Ref, ShallowRef } from 'vue';\nimport { TabVariant } from '@/components/tabs/tab-props';\n\ninterface UseTabIndicatorOptions {\n /** The scrolling bar, the indicator's positioning context */\n bar: Readonly<ShallowRef<HTMLDivElement | null>>;\n /** The tablist inside the bar */\n wrapper: Readonly<ShallowRef<HTMLDivElement | null>>;\n /** Whether the tabs run top to bottom, so the underline follows their height */\n vertical: MaybeRefOrGetter<boolean>;\n /** The bar's look, which decides whether the indicator is a line or a pill */\n variant: MaybeRefOrGetter<TabVariant>;\n}\n\ninterface UseTabIndicatorReturn {\n /** The indicator's box, or undefined while no tab is active */\n style: ComputedRef<CSSProperties | undefined>;\n /** False until the first placement, so the indicator appears in place rather than sliding in */\n animated: Readonly<Ref<boolean>>;\n update: () => void;\n}\n\ninterface TabRect {\n left: number;\n top: number;\n width: number;\n height: number;\n}\n\n/**\n * Tracks the active tab's box so one indicator can slide between tabs. It lives\n * in the bar, next to the tablist, so it scrolls with the tabs while the\n * tablist holds only tabs. The underline takes the tab's span along the bar;\n * the segmented pill takes its whole box.\n */\nexport function useTabIndicator({ bar, wrapper, vertical, variant }: UseTabIndicatorOptions): UseTabIndicatorReturn {\n const rect = shallowRef<TabRect>();\n const animated = shallowRef<boolean>(false);\n\n function update(): void {\n const tab = get(bar)?.querySelector<HTMLElement>('[role=tab][data-active-tab]');\n if (!tab) {\n set(rect, undefined);\n return;\n }\n\n set(rect, { left: tab.offsetLeft, top: tab.offsetTop, width: tab.offsetWidth, height: tab.offsetHeight });\n\n if (!get(animated))\n requestAnimationFrame(() => set(animated, true));\n }\n\n const style = computed<CSSProperties | undefined>(() => {\n const box = get(rect);\n if (!box)\n return undefined;\n\n const px = (value: number): string => `${value}px`;\n if (toValue(variant) === TabVariant.segmented)\n return { left: px(box.left), top: px(box.top), width: px(box.width), height: px(box.height) };\n\n return toValue(vertical)\n ? { top: px(box.top), height: px(box.height) }\n : { left: px(box.left), width: px(box.width) };\n });\n\n useResizeObserver(wrapper, update);\n useMutationObserver(wrapper, update, { subtree: true, attributes: true, attributeFilter: ['data-active-tab'], childList: true });\n\n onMounted(() => {\n update();\n // a web font that loads later changes every label's width\n document.fonts?.ready.then(update).catch(() => {});\n });\n\n return { style, animated: readonly(animated), update };\n}\n"],"mappings":";;;;;;;;;;;AAmCA,SAAgB,gBAAgB,EAAE,KAAK,SAAS,UAAU,WAA0D;CAClH,MAAM,OAAO,WAAoB;CACjC,MAAM,WAAW,WAAoB,KAAK;CAE1C,SAAS,SAAe;EACtB,MAAM,MAAM,MAAI,GAAG,CAAC,EAAE,cAA2B,6BAA6B;EAC9E,IAAI,CAAC,KAAK;GACR,MAAI,MAAM,KAAA,CAAS;GACnB;EACF;EAEA,MAAI,MAAM;GAAE,MAAM,IAAI;GAAY,KAAK,IAAI;GAAW,OAAO,IAAI;GAAa,QAAQ,IAAI;EAAa,CAAC;EAExG,IAAI,CAAC,MAAI,QAAQ,GACf,4BAA4B,MAAI,UAAU,IAAI,CAAC;CACnD;CAEA,MAAM,QAAQ,eAA0C;EACtD,MAAM,MAAM,MAAI,IAAI;EACpB,IAAI,CAAC,KACH,OAAO,KAAA;EAET,MAAM,MAAM,UAA0B,GAAG,MAAM;EAC/C,IAAI,QAAQ,OAAO,MAAM,WAAW,WAClC,OAAO;GAAE,MAAM,GAAG,IAAI,IAAI;GAAG,KAAK,GAAG,IAAI,GAAG;GAAG,OAAO,GAAG,IAAI,KAAK;GAAG,QAAQ,GAAG,IAAI,MAAM;EAAE;EAE9F,OAAO,QAAQ,QAAQ,IACnB;GAAE,KAAK,GAAG,IAAI,GAAG;GAAG,QAAQ,GAAG,IAAI,MAAM;EAAE,IAC3C;GAAE,MAAM,GAAG,IAAI,IAAI;GAAG,OAAO,GAAG,IAAI,KAAK;EAAE;CACjD,CAAC;CAED,kBAAkB,SAAS,MAAM;CACjC,oBAAoB,SAAS,QAAQ;EAAE,SAAS;EAAM,YAAY;EAAM,iBAAiB,CAAC,iBAAiB;EAAG,WAAW;CAAK,CAAC;CAE/H,gBAAgB;EACd,OAAO;EAEP,SAAS,OAAO,MAAM,KAAK,MAAM,CAAC,CAAC,YAAY,CAAC,CAAC;CACnD,CAAC;CAED,OAAO;EAAE;EAAO,UAAU,SAAS,QAAQ;EAAG;CAAO;AACvD"}
1
+ {"version":3,"file":"use-tab-indicator.js","names":[],"sources":["../../../../src/components/tabs/tabs/use-tab-indicator.ts"],"sourcesContent":["import type { ComputedRef, CSSProperties, MaybeRefOrGetter, Ref, ShallowRef } from 'vue';\nimport { TabVariant } from '@/components/tabs/tab-props';\n\ninterface UseTabIndicatorOptions {\n /** The scrolling bar, the indicator's positioning context */\n bar: Readonly<ShallowRef<HTMLDivElement | null>>;\n /** The tablist inside the bar */\n wrapper: Readonly<ShallowRef<HTMLDivElement | null>>;\n /** Whether the tabs run top to bottom, so the underline follows their height */\n vertical: MaybeRefOrGetter<boolean>;\n /** The bar's look, which decides whether the indicator is a line or a pill */\n variant: MaybeRefOrGetter<TabVariant>;\n}\n\ninterface UseTabIndicatorReturn {\n /** The indicator's box, or undefined while no tab is active */\n style: ComputedRef<CSSProperties | undefined>;\n /** False until the first placement, so the indicator appears in place rather than sliding in */\n animated: Readonly<Ref<boolean>>;\n update: () => void;\n}\n\ninterface TabRect {\n left: number;\n top: number;\n width: number;\n height: number;\n}\n\n/**\n * Tracks the active tab's box so one indicator can slide between tabs. It lives\n * in the bar, next to the tablist, so it scrolls with the tabs while the\n * tablist holds only tabs. The underline takes the tab's span along the bar;\n * the segmented pill takes its whole box.\n */\nexport function useTabIndicator({ bar, wrapper, vertical, variant }: UseTabIndicatorOptions): UseTabIndicatorReturn {\n const rect = shallowRef<TabRect>();\n const animated = shallowRef<boolean>(false);\n\n function update(): void {\n const tab = get(bar)?.querySelector<HTMLElement>('[role=tab][data-active-tab]');\n if (!tab) {\n set(rect, undefined);\n return;\n }\n\n set(rect, { left: tab.offsetLeft, top: tab.offsetTop, width: tab.offsetWidth, height: tab.offsetHeight });\n\n if (!get(animated))\n requestAnimationFrame(() => set(animated, true));\n }\n\n const style = computed<CSSProperties | undefined>(() => {\n const box = get(rect);\n if (!box)\n return undefined;\n\n const px = (value: number): string => `${value}px`;\n if (toValue(variant) === TabVariant.segmented)\n return { left: px(box.left), top: px(box.top), width: px(box.width), height: px(box.height) };\n\n return toValue(vertical)\n ? { top: px(box.top), height: px(box.height) }\n : { left: px(box.left), width: px(box.width) };\n });\n\n useResizeObserver(wrapper, update);\n useMutationObserver(wrapper, update, { subtree: true, attributes: true, attributeFilter: ['data-active-tab'], childList: true });\n\n onMounted(() => {\n update();\n // a web font that loads later changes every label's width\n document.fonts?.ready.then(update).catch(() => {});\n });\n\n return { style, animated: readonly(animated), update };\n}\n"],"mappings":";;;;;;;;;;;AAmCA,SAAgB,gBAAgB,EAAE,KAAK,SAAS,UAAU,WAA0D;CAClH,MAAM,OAAO,WAAoB;CACjC,MAAM,WAAW,WAAoB,KAAK;CAE1C,SAAS,SAAe;EACtB,MAAM,MAAM,IAAI,GAAG,CAAC,EAAE,cAA2B,6BAA6B;EAC9E,IAAI,CAAC,KAAK;GACR,IAAI,MAAM,KAAA,CAAS;GACnB;EACF;EAEA,IAAI,MAAM;GAAE,MAAM,IAAI;GAAY,KAAK,IAAI;GAAW,OAAO,IAAI;GAAa,QAAQ,IAAI;EAAa,CAAC;EAExG,IAAI,CAAC,IAAI,QAAQ,GACf,4BAA4B,IAAI,UAAU,IAAI,CAAC;CACnD;CAEA,MAAM,QAAQ,eAA0C;EACtD,MAAM,MAAM,IAAI,IAAI;EACpB,IAAI,CAAC,KACH,OAAO,KAAA;EAET,MAAM,MAAM,UAA0B,GAAG,MAAM;EAC/C,IAAI,QAAQ,OAAO,MAAM,WAAW,WAClC,OAAO;GAAE,MAAM,GAAG,IAAI,IAAI;GAAG,KAAK,GAAG,IAAI,GAAG;GAAG,OAAO,GAAG,IAAI,KAAK;GAAG,QAAQ,GAAG,IAAI,MAAM;EAAE;EAE9F,OAAO,QAAQ,QAAQ,IACnB;GAAE,KAAK,GAAG,IAAI,GAAG;GAAG,QAAQ,GAAG,IAAI,MAAM;EAAE,IAC3C;GAAE,MAAM,GAAG,IAAI,IAAI;GAAG,OAAO,GAAG,IAAI,KAAK;EAAE;CACjD,CAAC;CAED,kBAAkB,SAAS,MAAM;CACjC,oBAAoB,SAAS,QAAQ;EAAE,SAAS;EAAM,YAAY;EAAM,iBAAiB,CAAC,iBAAiB;EAAG,WAAW;CAAK,CAAC;CAE/H,gBAAgB;EACd,OAAO;EAEP,SAAS,OAAO,MAAM,KAAK,MAAM,CAAC,CAAC,YAAY,CAAC,CAAC;CACnD,CAAC;CAED,OAAO;EAAE;EAAO,UAAU,SAAS,QAAQ;EAAG;CAAO;AACvD"}
@@ -1,5 +1,5 @@
1
+ import { get } from "../../../vendor/@vueuse/shared/dist/index.js";
1
2
  import { toValue } from "vue";
2
- import { get } from "@vueuse/shared";
3
3
  //#region src/components/tabs/tabs/use-tab-keyboard.ts
4
4
  /**
5
5
  * The index a key moves to among `count` tabs, wrapping at both ends.
@@ -1,6 +1,6 @@
1
+ import { get, set } from "../../../vendor/@vueuse/shared/dist/index.js";
2
+ import { useElementSize, useResizeObserver, useScroll } from "../../../vendor/@vueuse/core/dist/index.js";
1
3
  import { computed, nextTick, readonly, shallowRef, toRefs, toValue } from "vue";
2
- import { useElementSize, useResizeObserver, useScroll } from "@vueuse/core";
3
- import { get as get$1, set as set$1 } from "@vueuse/shared";
4
4
  //#region src/components/tabs/tabs/use-tab-scroll.ts
5
5
  /**
6
6
  * Composable that manages tab scroll behavior, overflow arrow visibility,
@@ -12,26 +12,26 @@ function useTabScroll({ bar, wrapper, vertical }) {
12
12
  const { arrivedState, x, y } = useScroll(bar, { behavior: "smooth" });
13
13
  const { top, bottom, left, right } = toRefs(arrivedState);
14
14
  function checkOverflow() {
15
- const elem = get$1(wrapper);
16
- const barElem = get$1(bar);
15
+ const elem = get(wrapper);
16
+ const barElem = get(bar);
17
17
  if (!elem || !barElem) {
18
- set$1(showArrows, false);
18
+ set(showArrows, false);
19
19
  return;
20
20
  }
21
21
  const overflows = toValue(vertical) ? elem.scrollHeight > barElem.offsetHeight : elem.scrollWidth > barElem.offsetWidth;
22
- set$1(showArrows, overflows);
22
+ set(showArrows, overflows);
23
23
  }
24
24
  useResizeObserver(bar, checkOverflow);
25
25
  useResizeObserver(wrapper, () => {
26
26
  checkOverflow();
27
27
  keepActiveTabVisible();
28
28
  });
29
- const prevArrowDisabled = computed(() => toValue(vertical) ? get$1(top) : get$1(left));
30
- const nextArrowDisabled = computed(() => toValue(vertical) ? get$1(bottom) : get$1(right));
29
+ const prevArrowDisabled = computed(() => toValue(vertical) ? get(top) : get(left));
30
+ const nextArrowDisabled = computed(() => toValue(vertical) ? get(bottom) : get(right));
31
31
  function scrollToActiveTab() {
32
- if (!get$1(showArrows)) return;
33
- const elem = get$1(wrapper);
34
- const barElem = get$1(bar);
32
+ if (!get(showArrows)) return;
33
+ const elem = get(wrapper);
34
+ const barElem = get(bar);
35
35
  if (!elem || !barElem) return;
36
36
  const activeTab = elem.querySelector("[data-active-tab]");
37
37
  if (!activeTab) return;
@@ -47,12 +47,12 @@ function useTabScroll({ bar, wrapper, vertical }) {
47
47
  nextTick(scrollToActiveTab);
48
48
  }
49
49
  function onPrevSliderClick() {
50
- if (!toValue(vertical)) set$1(x, get$1(x) - get$1(barWidth));
51
- else set$1(y, get$1(y) - get$1(barHeight));
50
+ if (!toValue(vertical)) set(x, get(x) - get(barWidth));
51
+ else set(y, get(y) - get(barHeight));
52
52
  }
53
53
  function onNextSliderClick() {
54
- if (!toValue(vertical)) set$1(x, get$1(x) + get$1(barWidth));
55
- else set$1(y, get$1(y) + get$1(barHeight));
54
+ if (!toValue(vertical)) set(x, get(x) + get(barWidth));
55
+ else set(y, get(y) + get(barHeight));
56
56
  }
57
57
  return {
58
58
  showArrows: readonly(showArrows),
@@ -1 +1 @@
1
- {"version":3,"file":"use-tab-scroll.js","names":[],"sources":["../../../../src/components/tabs/tabs/use-tab-scroll.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref, ShallowRef } from 'vue';\n\ninterface UseTabScrollOptions {\n /** The scrollable bar container element */\n bar: Readonly<ShallowRef<HTMLDivElement | null>>;\n /** The wrapper element containing the tab buttons */\n wrapper: Readonly<ShallowRef<HTMLDivElement | null>>;\n /** Getter for the current vertical orientation state */\n vertical: MaybeRefOrGetter<boolean>;\n}\n\ninterface UseTabScrollReturn {\n showArrows: Readonly<Ref<boolean>>;\n prevArrowDisabled: ComputedRef<boolean>;\n nextArrowDisabled: ComputedRef<boolean>;\n onPrevSliderClick: () => void;\n onNextSliderClick: () => void;\n keepActiveTabVisible: () => void;\n}\n\n/**\n * Composable that manages tab scroll behavior, overflow arrow visibility,\n * and active tab auto-scrolling for the RuiTabs component.\n */\nexport function useTabScroll({ bar, wrapper, vertical }: UseTabScrollOptions): UseTabScrollReturn {\n const showArrows = shallowRef<boolean>(false);\n\n const { width: barWidth, height: barHeight } = useElementSize(bar);\n const { arrivedState, x, y } = useScroll(bar, { behavior: 'smooth' });\n const { top, bottom, left, right } = toRefs(arrivedState);\n\n function checkOverflow(): void {\n const elem = get(wrapper);\n const barElem = get(bar);\n if (!elem || !barElem) {\n set(showArrows, false);\n return;\n }\n\n const overflows = toValue(vertical)\n ? elem.scrollHeight > barElem.offsetHeight\n : elem.scrollWidth > barElem.offsetWidth;\n\n set(showArrows, overflows);\n }\n\n useResizeObserver(bar, checkOverflow);\n useResizeObserver(wrapper, () => {\n checkOverflow();\n keepActiveTabVisible();\n });\n\n const prevArrowDisabled = computed<boolean>(() => toValue(vertical) ? get(top) : get(left));\n\n const nextArrowDisabled = computed<boolean>(() => toValue(vertical) ? get(bottom) : get(right));\n\n function scrollToActiveTab(): void {\n if (!get(showArrows))\n return;\n\n const elem = get(wrapper);\n const barElem = get(bar);\n\n if (!elem || !barElem)\n return;\n\n const activeTab = elem.querySelector<HTMLElement>('[data-active-tab]');\n\n if (!activeTab)\n return;\n\n const childLeft = activeTab.offsetLeft - elem.offsetLeft;\n const childTop = activeTab.offsetTop - elem.offsetTop;\n\n barElem.scrollTo({\n left: Math.max(Math.min(barElem.scrollLeft, childLeft), childLeft + activeTab.offsetWidth - barElem.offsetWidth),\n top: Math.max(Math.min(barElem.scrollTop, childTop), childTop + activeTab.offsetHeight - barElem.offsetHeight),\n behavior: 'smooth',\n });\n }\n\n function keepActiveTabVisible(): void {\n nextTick(scrollToActiveTab);\n }\n\n function onPrevSliderClick(): void {\n if (!toValue(vertical))\n set(x, get(x) - get(barWidth));\n else\n set(y, get(y) - get(barHeight));\n }\n\n function onNextSliderClick(): void {\n if (!toValue(vertical))\n set(x, get(x) + get(barWidth));\n else\n set(y, get(y) + get(barHeight));\n }\n\n return {\n showArrows: readonly(showArrows),\n prevArrowDisabled,\n nextArrowDisabled,\n onPrevSliderClick,\n onNextSliderClick,\n keepActiveTabVisible,\n };\n}\n"],"mappings":";;;;;;;;AAwBA,SAAgB,aAAa,EAAE,KAAK,SAAS,YAAqD;CAChG,MAAM,aAAa,WAAoB,KAAK;CAE5C,MAAM,EAAE,OAAO,UAAU,QAAQ,cAAc,eAAe,GAAG;CACjE,MAAM,EAAE,cAAc,GAAG,MAAM,UAAU,KAAK,EAAE,UAAU,SAAS,CAAC;CACpE,MAAM,EAAE,KAAK,QAAQ,MAAM,UAAU,OAAO,YAAY;CAExD,SAAS,gBAAsB;EAC7B,MAAM,OAAO,MAAI,OAAO;EACxB,MAAM,UAAU,MAAI,GAAG;EACvB,IAAI,CAAC,QAAQ,CAAC,SAAS;GACrB,MAAI,YAAY,KAAK;GACrB;EACF;EAEA,MAAM,YAAY,QAAQ,QAAQ,IAC9B,KAAK,eAAe,QAAQ,eAC5B,KAAK,cAAc,QAAQ;EAE/B,MAAI,YAAY,SAAS;CAC3B;CAEA,kBAAkB,KAAK,aAAa;CACpC,kBAAkB,eAAe;EAC/B,cAAc;EACd,qBAAqB;CACvB,CAAC;CAED,MAAM,oBAAoB,eAAwB,QAAQ,QAAQ,IAAI,MAAI,GAAG,IAAI,MAAI,IAAI,CAAC;CAE1F,MAAM,oBAAoB,eAAwB,QAAQ,QAAQ,IAAI,MAAI,MAAM,IAAI,MAAI,KAAK,CAAC;CAE9F,SAAS,oBAA0B;EACjC,IAAI,CAAC,MAAI,UAAU,GACjB;EAEF,MAAM,OAAO,MAAI,OAAO;EACxB,MAAM,UAAU,MAAI,GAAG;EAEvB,IAAI,CAAC,QAAQ,CAAC,SACZ;EAEF,MAAM,YAAY,KAAK,cAA2B,mBAAmB;EAErE,IAAI,CAAC,WACH;EAEF,MAAM,YAAY,UAAU,aAAa,KAAK;EAC9C,MAAM,WAAW,UAAU,YAAY,KAAK;EAE5C,QAAQ,SAAS;GACf,MAAM,KAAK,IAAI,KAAK,IAAI,QAAQ,YAAY,SAAS,GAAG,YAAY,UAAU,cAAc,QAAQ,WAAW;GAC/G,KAAK,KAAK,IAAI,KAAK,IAAI,QAAQ,WAAW,QAAQ,GAAG,WAAW,UAAU,eAAe,QAAQ,YAAY;GAC7G,UAAU;EACZ,CAAC;CACH;CAEA,SAAS,uBAA6B;EACpC,SAAS,iBAAiB;CAC5B;CAEA,SAAS,oBAA0B;EACjC,IAAI,CAAC,QAAQ,QAAQ,GACnB,MAAI,GAAG,MAAI,CAAC,IAAI,MAAI,QAAQ,CAAC;OAE7B,MAAI,GAAG,MAAI,CAAC,IAAI,MAAI,SAAS,CAAC;CAClC;CAEA,SAAS,oBAA0B;EACjC,IAAI,CAAC,QAAQ,QAAQ,GACnB,MAAI,GAAG,MAAI,CAAC,IAAI,MAAI,QAAQ,CAAC;OAE7B,MAAI,GAAG,MAAI,CAAC,IAAI,MAAI,SAAS,CAAC;CAClC;CAEA,OAAO;EACL,YAAY,SAAS,UAAU;EAC/B;EACA;EACA;EACA;EACA;CACF;AACF"}
1
+ {"version":3,"file":"use-tab-scroll.js","names":[],"sources":["../../../../src/components/tabs/tabs/use-tab-scroll.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref, ShallowRef } from 'vue';\n\ninterface UseTabScrollOptions {\n /** The scrollable bar container element */\n bar: Readonly<ShallowRef<HTMLDivElement | null>>;\n /** The wrapper element containing the tab buttons */\n wrapper: Readonly<ShallowRef<HTMLDivElement | null>>;\n /** Getter for the current vertical orientation state */\n vertical: MaybeRefOrGetter<boolean>;\n}\n\ninterface UseTabScrollReturn {\n showArrows: Readonly<Ref<boolean>>;\n prevArrowDisabled: ComputedRef<boolean>;\n nextArrowDisabled: ComputedRef<boolean>;\n onPrevSliderClick: () => void;\n onNextSliderClick: () => void;\n keepActiveTabVisible: () => void;\n}\n\n/**\n * Composable that manages tab scroll behavior, overflow arrow visibility,\n * and active tab auto-scrolling for the RuiTabs component.\n */\nexport function useTabScroll({ bar, wrapper, vertical }: UseTabScrollOptions): UseTabScrollReturn {\n const showArrows = shallowRef<boolean>(false);\n\n const { width: barWidth, height: barHeight } = useElementSize(bar);\n const { arrivedState, x, y } = useScroll(bar, { behavior: 'smooth' });\n const { top, bottom, left, right } = toRefs(arrivedState);\n\n function checkOverflow(): void {\n const elem = get(wrapper);\n const barElem = get(bar);\n if (!elem || !barElem) {\n set(showArrows, false);\n return;\n }\n\n const overflows = toValue(vertical)\n ? elem.scrollHeight > barElem.offsetHeight\n : elem.scrollWidth > barElem.offsetWidth;\n\n set(showArrows, overflows);\n }\n\n useResizeObserver(bar, checkOverflow);\n useResizeObserver(wrapper, () => {\n checkOverflow();\n keepActiveTabVisible();\n });\n\n const prevArrowDisabled = computed<boolean>(() => toValue(vertical) ? get(top) : get(left));\n\n const nextArrowDisabled = computed<boolean>(() => toValue(vertical) ? get(bottom) : get(right));\n\n function scrollToActiveTab(): void {\n if (!get(showArrows))\n return;\n\n const elem = get(wrapper);\n const barElem = get(bar);\n\n if (!elem || !barElem)\n return;\n\n const activeTab = elem.querySelector<HTMLElement>('[data-active-tab]');\n\n if (!activeTab)\n return;\n\n const childLeft = activeTab.offsetLeft - elem.offsetLeft;\n const childTop = activeTab.offsetTop - elem.offsetTop;\n\n barElem.scrollTo({\n left: Math.max(Math.min(barElem.scrollLeft, childLeft), childLeft + activeTab.offsetWidth - barElem.offsetWidth),\n top: Math.max(Math.min(barElem.scrollTop, childTop), childTop + activeTab.offsetHeight - barElem.offsetHeight),\n behavior: 'smooth',\n });\n }\n\n function keepActiveTabVisible(): void {\n nextTick(scrollToActiveTab);\n }\n\n function onPrevSliderClick(): void {\n if (!toValue(vertical))\n set(x, get(x) - get(barWidth));\n else\n set(y, get(y) - get(barHeight));\n }\n\n function onNextSliderClick(): void {\n if (!toValue(vertical))\n set(x, get(x) + get(barWidth));\n else\n set(y, get(y) + get(barHeight));\n }\n\n return {\n showArrows: readonly(showArrows),\n prevArrowDisabled,\n nextArrowDisabled,\n onPrevSliderClick,\n onNextSliderClick,\n keepActiveTabVisible,\n };\n}\n"],"mappings":";;;;;;;;AAwBA,SAAgB,aAAa,EAAE,KAAK,SAAS,YAAqD;CAChG,MAAM,aAAa,WAAoB,KAAK;CAE5C,MAAM,EAAE,OAAO,UAAU,QAAQ,cAAc,eAAe,GAAG;CACjE,MAAM,EAAE,cAAc,GAAG,MAAM,UAAU,KAAK,EAAE,UAAU,SAAS,CAAC;CACpE,MAAM,EAAE,KAAK,QAAQ,MAAM,UAAU,OAAO,YAAY;CAExD,SAAS,gBAAsB;EAC7B,MAAM,OAAO,IAAI,OAAO;EACxB,MAAM,UAAU,IAAI,GAAG;EACvB,IAAI,CAAC,QAAQ,CAAC,SAAS;GACrB,IAAI,YAAY,KAAK;GACrB;EACF;EAEA,MAAM,YAAY,QAAQ,QAAQ,IAC9B,KAAK,eAAe,QAAQ,eAC5B,KAAK,cAAc,QAAQ;EAE/B,IAAI,YAAY,SAAS;CAC3B;CAEA,kBAAkB,KAAK,aAAa;CACpC,kBAAkB,eAAe;EAC/B,cAAc;EACd,qBAAqB;CACvB,CAAC;CAED,MAAM,oBAAoB,eAAwB,QAAQ,QAAQ,IAAI,IAAI,GAAG,IAAI,IAAI,IAAI,CAAC;CAE1F,MAAM,oBAAoB,eAAwB,QAAQ,QAAQ,IAAI,IAAI,MAAM,IAAI,IAAI,KAAK,CAAC;CAE9F,SAAS,oBAA0B;EACjC,IAAI,CAAC,IAAI,UAAU,GACjB;EAEF,MAAM,OAAO,IAAI,OAAO;EACxB,MAAM,UAAU,IAAI,GAAG;EAEvB,IAAI,CAAC,QAAQ,CAAC,SACZ;EAEF,MAAM,YAAY,KAAK,cAA2B,mBAAmB;EAErE,IAAI,CAAC,WACH;EAEF,MAAM,YAAY,UAAU,aAAa,KAAK;EAC9C,MAAM,WAAW,UAAU,YAAY,KAAK;EAE5C,QAAQ,SAAS;GACf,MAAM,KAAK,IAAI,KAAK,IAAI,QAAQ,YAAY,SAAS,GAAG,YAAY,UAAU,cAAc,QAAQ,WAAW;GAC/G,KAAK,KAAK,IAAI,KAAK,IAAI,QAAQ,WAAW,QAAQ,GAAG,WAAW,UAAU,eAAe,QAAQ,YAAY;GAC7G,UAAU;EACZ,CAAC;CACH;CAEA,SAAS,uBAA6B;EACpC,SAAS,iBAAiB;CAC5B;CAEA,SAAS,oBAA0B;EACjC,IAAI,CAAC,QAAQ,QAAQ,GACnB,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC;OAE7B,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,SAAS,CAAC;CAClC;CAEA,SAAS,oBAA0B;EACjC,IAAI,CAAC,QAAQ,QAAQ,GACnB,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC;OAE7B,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,SAAS,CAAC;CAClC;CAEA,OAAO;EACL,YAAY,SAAS,UAAU;EAC/B;EACA;EACA;EACA;EACA;CACF;AACF"}