@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.
- package/dist/components/accordions/accordion/RuiAccordion.vue_vue_type_script_setup_true_lang.js +3 -3
- package/dist/components/accordions/accordion/RuiAccordion.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/accordions/accordions/RuiAccordions.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/avatars/RuiAvatar.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/avatars/RuiAvatarGroup.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/buttons/button/RuiButton.js.map +1 -1
- package/dist/components/buttons/button/RuiButton.vue_vue_type_script_setup_true_lang.js +10 -10
- package/dist/components/buttons/button/RuiButton.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/buttons/button/button-styles.js +10 -2
- package/dist/components/buttons/button/button-styles.js.map +1 -1
- package/dist/components/buttons/button-group/RuiButtonGroup.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/calendar/RuiCalendar.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/calendar/RuiCalendarGrid.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/calendar/RuiCalendarHeader.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/calendar/RuiCalendarMenu.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/chips/RuiChip.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/color-picker/RuiColorBoard.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/color-picker/RuiColorDisplay.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/color-picker/RuiColorHue.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/color-picker/RuiColorInput.vue_vue_type_script_setup_true_lang.js +9 -10
- package/dist/components/color-picker/RuiColorInput.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/color-picker/RuiColorPicker.vue_vue_type_script_setup_true_lang.js +3 -4
- package/dist/components/color-picker/RuiColorPicker.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/date-time-picker/RuiDateTimePicker.vue_vue_type_script_setup_true_lang.js +33 -33
- package/dist/components/date-time-picker/RuiDateTimePicker.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/date-time-picker/use-date-bounds.js +1 -1
- package/dist/components/date-time-picker/use-date-time-selection.js +65 -66
- package/dist/components/date-time-picker/use-date-time-selection.js.map +1 -1
- package/dist/components/date-time-picker/use-input-handler.js +1 -1
- package/dist/components/date-time-picker/use-keyboard-handler.js +29 -30
- package/dist/components/date-time-picker/use-keyboard-handler.js.map +1 -1
- package/dist/components/forms/auto-complete/RuiAutoComplete.vue_vue_type_script_setup_true_lang.js +24 -24
- package/dist/components/forms/auto-complete/RuiAutoComplete.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/forms/category-picker/RuiCategoryPicker.vue_vue_type_script_setup_true_lang.js +49 -49
- package/dist/components/forms/category-picker/RuiCategoryPicker.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/forms/checkbox/RuiCheckbox.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/forms/checkbox/checkbox-group/RuiCheckboxGroup.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/forms/file-upload/RuiFileUpload.js.map +1 -1
- package/dist/components/forms/file-upload/RuiFileUpload.vue_vue_type_script_setup_true_lang.js +19 -17
- package/dist/components/forms/file-upload/RuiFileUpload.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/forms/radio-button/radio/RuiRadio.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/forms/select/RuiMenuSelect.vue_vue_type_script_setup_true_lang.js +11 -11
- package/dist/components/forms/select/RuiMenuSelect.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/forms/slider/RuiSlider.vue_vue_type_script_setup_true_lang.js +17 -17
- package/dist/components/forms/slider/RuiSlider.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/forms/switch/RuiSwitch.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/forms/text-area/RuiTextArea.vue_vue_type_script_setup_true_lang.js +21 -21
- package/dist/components/forms/text-area/RuiTextArea.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/forms/text-field/RuiTextField.js.map +1 -1
- package/dist/components/forms/text-field/RuiTextField.vue.d.ts +2 -0
- package/dist/components/forms/text-field/RuiTextField.vue_vue_type_script_setup_true_lang.js +24 -20
- package/dist/components/forms/text-field/RuiTextField.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/helpers/RuiFormTextDetail.js.map +1 -1
- package/dist/components/helpers/RuiFormTextDetail.vue.d.ts +11 -1
- package/dist/components/helpers/RuiFormTextDetail.vue_vue_type_script_setup_true_lang.js +3 -3
- package/dist/components/helpers/RuiFormTextDetail.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/icons/RuiIcon.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/logos/RuiLogo.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/overlays/badge/RuiBadge.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/overlays/dialog/RuiDialog.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/overlays/menu/RuiMenu.vue_vue_type_script_setup_true_lang.js +17 -17
- package/dist/components/overlays/menu/RuiMenu.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/overlays/navigation-drawer/RuiNavigationDrawer.js.map +1 -1
- package/dist/components/overlays/navigation-drawer/RuiNavigationDrawer.vue_vue_type_script_setup_true_lang.js +9 -9
- package/dist/components/overlays/navigation-drawer/RuiNavigationDrawer.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/overlays/notification/RuiNotification.vue_vue_type_script_setup_true_lang.js +3 -4
- package/dist/components/overlays/notification/RuiNotification.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/overlays/tooltip/RuiTooltip.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/progress/RuiProgress.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/steppers/RuiFooterStepper.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/steppers/RuiStepper.js.map +1 -1
- package/dist/components/steppers/RuiStepper.vue_vue_type_script_setup_true_lang.js +13 -8
- package/dist/components/steppers/RuiStepper.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/tables/RuiDataTable.vue_vue_type_script_setup_true_lang.js +27 -27
- package/dist/components/tables/RuiDataTable.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/tables/RuiTableHead.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/tables/RuiTablePagination.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/tables/data-table/RuiDataTableCell.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/tables/data-table/RuiDataTableGroupRow.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/tables/data-table/RuiDataTableMobileSort.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/tables/data-table/RuiDataTableRow.vue_vue_type_script_setup_true_lang.js +23 -23
- package/dist/components/tables/data-table/RuiDataTableRow.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/tables/use-pagination-navigation.js +1 -1
- package/dist/components/tabs/tab/RuiTab.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/tabs/tab/use-tab-link.js +1 -1
- package/dist/components/tabs/tab-items/RuiTabItems.vue_vue_type_script_setup_true_lang.js +6 -6
- package/dist/components/tabs/tab-items/RuiTabItems.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/tabs/tabs/RuiTabs.vue_vue_type_script_setup_true_lang.js +11 -12
- package/dist/components/tabs/tabs/RuiTabs.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/tabs/tabs/use-tab-indicator.js +7 -7
- package/dist/components/tabs/tabs/use-tab-indicator.js.map +1 -1
- package/dist/components/tabs/tabs/use-tab-keyboard.js +1 -1
- package/dist/components/tabs/tabs/use-tab-scroll.js +15 -15
- package/dist/components/tabs/tabs/use-tab-scroll.js.map +1 -1
- package/dist/components/time-picker/RuiTimePicker.vue_vue_type_script_setup_true_lang.js +60 -61
- package/dist/components/time-picker/RuiTimePicker.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/composables/breakpoint.js +3 -3
- package/dist/composables/breakpoint.js.map +1 -1
- package/dist/composables/dropdown-menu.d.ts +9 -9
- package/dist/composables/dropdown-menu.js +32 -32
- package/dist/composables/dropdown-menu.js.map +1 -1
- package/dist/composables/floating.d.ts +1 -1
- package/dist/composables/floating.js +11 -11
- package/dist/composables/floating.js.map +1 -1
- package/dist/composables/forms/auto-complete/focus.js +16 -17
- package/dist/composables/forms/auto-complete/focus.js.map +1 -1
- package/dist/composables/forms/auto-complete/keyboard-navigation.js +1 -1
- package/dist/composables/forms/auto-complete/search.js +6 -7
- package/dist/composables/forms/auto-complete/search.js.map +1 -1
- package/dist/composables/forms/auto-complete/selection.js +1 -1
- package/dist/composables/forms/auto-complete/value.js +1 -1
- package/dist/composables/forms/category-picker/use-category-picker.js +1 -1
- package/dist/composables/forms/use-prepend-append-width.js +6 -6
- package/dist/composables/forms/use-prepend-append-width.js.map +1 -1
- package/dist/composables/keyboard-scroll.js +5 -5
- package/dist/composables/keyboard-scroll.js.map +1 -1
- package/dist/composables/overlay-stack.js +1 -1
- package/dist/composables/sticky-header.js +8 -8
- package/dist/composables/sticky-header.js.map +1 -1
- package/dist/composables/tables/data-table/columns.js +1 -1
- package/dist/composables/tables/data-table/expansion.js +1 -1
- package/dist/composables/tables/data-table/grouping.js +27 -28
- package/dist/composables/tables/data-table/grouping.js.map +1 -1
- package/dist/composables/tables/data-table/page-scroll.d.ts +7 -5
- package/dist/composables/tables/data-table/page-scroll.js +48 -17
- package/dist/composables/tables/data-table/page-scroll.js.map +1 -1
- package/dist/composables/tables/data-table/pagination.js +1 -1
- package/dist/composables/tables/data-table/selection.js +37 -38
- package/dist/composables/tables/data-table/selection.js.map +1 -1
- package/dist/composables/tables/data-table/sort.js +1 -1
- package/dist/composables/theme.js +12 -12
- package/dist/composables/theme.js.map +1 -1
- package/dist/composables/timeout-manager.js +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/style.css +2 -18
- package/dist/types/dom.d.ts +9 -0
- package/dist/types/theme.d.ts +2 -3
- package/dist/types/theme.js.map +1 -1
- package/dist/utils/form-text-detail.js +1 -1
- package/dist/utils/helpers.js +1 -1
- package/dist/vendor/@vueuse/core/dist/index.js +1577 -0
- package/dist/vendor/@vueuse/core/dist/index.js.map +1 -0
- package/dist/vendor/@vueuse/shared/dist/index.js +563 -0
- package/dist/vendor/@vueuse/shared/dist/index.js.map +1 -0
- package/dist/vite-plugin/index.js +5 -6
- package/dist/vite-plugin/index.js.map +1 -1
- package/dist/web-types.json +9 -2
- 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,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
|
|
35
|
+
if (get(modelValue) === value) {
|
|
36
36
|
anyActive = true;
|
|
37
|
-
if (index !== get
|
|
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
|
|
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
|
|
65
|
+
set(activeIndex, index);
|
|
66
66
|
});
|
|
67
67
|
});
|
|
68
68
|
return (_ctx, _cache) => {
|
package/dist/components/tabs/tab-items/RuiTabItems.vue_vue_type_script_setup_true_lang.js.map
CHANGED
|
@@ -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,
|
|
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
|
|
207
|
+
layout: get(layout),
|
|
209
208
|
indicatorPosition: __props.indicatorPosition,
|
|
210
209
|
color: __props.color,
|
|
211
210
|
wide: __props.vertical || __props.grow,
|
|
212
|
-
animated: get
|
|
211
|
+
animated: get(animated)
|
|
213
212
|
}));
|
|
214
213
|
const children = computed(() => {
|
|
215
214
|
const tabs = getChildrenTabs(slots.default?.() ?? []);
|
|
216
|
-
const currentModelValue = get
|
|
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
|
|
256
|
-
set
|
|
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
|
|
266
|
+
const enabledChildren = get(children).filter((child) => !child.props?.disabled);
|
|
268
267
|
if (enabledChildren.length === 0) return void 0;
|
|
269
|
-
let result = get
|
|
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
|
|
284
|
-
set
|
|
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
|
|
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
|
|
16
|
+
const tab = get(bar)?.querySelector("[role=tab][data-active-tab]");
|
|
17
17
|
if (!tab) {
|
|
18
|
-
set
|
|
18
|
+
set(rect, void 0);
|
|
19
19
|
return;
|
|
20
20
|
}
|
|
21
|
-
set
|
|
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
|
|
27
|
+
if (!get(animated)) requestAnimationFrame(() => set(animated, true));
|
|
28
28
|
}
|
|
29
29
|
const style = computed(() => {
|
|
30
|
-
const box = get
|
|
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,
|
|
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
|
|
16
|
-
const barElem = get
|
|
15
|
+
const elem = get(wrapper);
|
|
16
|
+
const barElem = get(bar);
|
|
17
17
|
if (!elem || !barElem) {
|
|
18
|
-
set
|
|
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
|
|
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
|
|
30
|
-
const nextArrowDisabled = computed(() => toValue(vertical) ? get
|
|
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
|
|
33
|
-
const elem = get
|
|
34
|
-
const barElem = get
|
|
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
|
|
51
|
-
else set
|
|
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
|
|
55
|
-
else set
|
|
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,
|
|
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"}
|