@rotki/ui-library 2.12.2 → 2.13.0

package/dist/components/tabs/tabs/RuiTabs.vue2.js

@@ -1,51 +1,54 @@
-import { defineComponent, toRefs, ref, useSlots, computed, onMounted, watch, openBlock, createElementBlock, normalizeClass, unref, createVNode, withCtx, createCommentVNode, createElementVNode, Fragment, renderList, createBlock, resolveDynamicComponent, isVNode, nextTick } from "vue";
+import { defineComponent, useModel, ref, useTemplateRef, useSlots, getCurrentInstance, toRefs, computed, Fragment, isVNode, nextTick, watch, onMounted, openBlock, createElementBlock, normalizeClass, unref, createVNode, withCtx, createCommentVNode, createElementVNode, renderList, createBlock, resolveDynamicComponent, mergeModels } from "vue";
 import { get, set, throttleFilter } from "@vueuse/shared";
 import { useRoute, useRouter } from "vue-router";
 import RuiButton from "../../buttons/button/RuiButton.vue.js";
 import RuiIcon from "../../icons/RuiIcon.vue.js";
-import { useElementSize, useScroll, watchTriggerable, watchImmediate, useResizeObserver } from "@vueuse/core";
+import { useElementSize, useScroll, useResizeObserver, watchTriggerable, watchImmediate } from "@vueuse/core";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "RuiTabs"
   },
   __name: "RuiTabs",
-  props: {
-    color: { default: void 0 },
+  props: /* @__PURE__ */ mergeModels({
+    color: {},
     vertical: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
     grow: { type: Boolean, default: false },
-    modelValue: { default: void 0 },
     align: { default: "center" },
     indicatorPosition: { default: "end" }
-  },
+  }, {
+    "modelValue": {},
+    "modelModifiers": {}
+  }),
   emits: ["update:modelValue"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const { color, grow, modelValue, disabled, vertical, align, indicatorPosition } = toRefs(props);
+  setup(__props) {
+    const modelValue = useModel(__props, "modelValue");
     const internalModelValue = ref();
-    const bar = ref();
-    const wrapper = ref();
+    const bar = useTemplateRef("bar");
+    const wrapper = useTemplateRef("wrapper");
     const showArrows = ref(false);
-    function getChildrenTabs(children2) {
-      return children2.flatMap((item) => {
-        if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)
-          return getChildrenTabs(item.children.filter(isVNode));
-        return [item];
-      }).flat();
-    }
     const slots = useSlots();
+    const hasRouter = !!getCurrentInstance()?.appContext.config.globalProperties.$router;
+    const route = hasRouter ? useRoute() : void 0;
+    const router = hasRouter ? useRouter() : void 0;
+    const { width, height } = useElementSize(bar);
+    const { width: wrapperWidth, height: wrapperHeight } = useElementSize(wrapper);
+    const { arrivedState, x, y } = useScroll(bar, { behavior: "smooth" });
+    const { top, bottom, left, right } = toRefs(arrivedState);
+    useResizeObserver(bar, () => {
+      keepActiveTabVisible();
+    });
     const children = computed(() => {
       const slotContent = slots.default?.() ?? [];
       const tabs = getChildrenTabs(slotContent);
       const currentModelValue = get(internalModelValue);
       const inheritedProps = {
-        color: get(color),
-        grow: get(grow),
-        disabled: get(disabled),
-        vertical: get(vertical),
-        align: get(align),
-        indicatorPosition: get(indicatorPosition)
+        color: __props.color,
+        grow: __props.grow,
+        disabled: __props.disabled,
+        vertical: __props.vertical,
+        align: __props.align,
+        indicatorPosition: __props.indicatorPosition
       };
       return tabs.map((tab, index) => {
         let tabValue = tab.props?.value ?? index;
@@ -63,12 +66,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         };
       });
     });
+    const prevArrowDisabled = computed(() => {
+      if (!__props.vertical)
+        return get(left);
+      return get(top);
+    });
+    const nextArrowDisabled = computed(() => {
+      if (!__props.vertical)
+        return get(right);
+      return get(bottom);
+    });
+    function getChildrenTabs(children2) {
+      return children2.flatMap((item) => {
+        if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)
+          return getChildrenTabs(item.children.filter(isVNode));
+        return [item];
+      }).flat();
+    }
     function updateModelValue(newModelValue) {
-      emit("update:modelValue", newModelValue);
+      set(modelValue, newModelValue);
       set(internalModelValue, newModelValue);
     }
-    const route = useRoute();
     function isPathMatch(path, { exactPath, exact }) {
+      if (!route)
+        return false;
       const currentRoute = route.fullPath;
       if (exactPath)
         return currentRoute === path;
@@ -111,37 +132,32 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       });
     }
-    const router = useRouter();
     function applyNewValue(onlyLink = false) {
-      const enabledChildren = get(children).filter(
-        (child) => !child.props.disabled
-      );
+      const enabledChildren = get(children).filter((child) => !child.props?.disabled);
       if (enabledChildren.length > 0) {
         let newModelValue = get(modelValue) || 0;
         enabledChildren.forEach((child, index) => {
-          const props2 = child.props;
-          if (!onlyLink && index === 0 && props2.value)
-            newModelValue = props2.value;
-          const to = props2.to ? router.resolve(props2.to) : void 0;
-          if (props2.link !== false && to && isPathMatch(to.fullPath, props2))
+          const props = child.props;
+          if (!onlyLink && index === 0 && props.value)
+            newModelValue = props.value;
+          const to = props.to && router ? router.resolve(props.to) : void 0;
+          if (props.link !== false && to && isPathMatch(to.fullPath, props))
             newModelValue = to.fullPath;
         });
         updateModelValue(newModelValue);
       }
       keepActiveTabVisible();
     }
-    onMounted(() => {
-      if (get(modelValue) !== void 0)
-        return;
-      applyNewValue();
-    });
-    watch(route, () => {
-      applyNewValue(true);
-    });
-    const { width, height } = useElementSize(bar);
-    const { width: wrapperWidth, height: wrapperHeight } = useElementSize(wrapper);
-    const { arrivedState, x, y } = useScroll(bar, { behavior: "smooth" });
-    const { top, bottom, left, right } = toRefs(arrivedState);
+    function onPrevSliderClick() {
+      if (!__props.vertical)
+        set(x, get(x) - get(width));
+      else set(y, get(y) - get(height));
+    }
+    function onNextSliderClick() {
+      if (!__props.vertical)
+        set(x, get(x) + get(width));
+      else set(y, get(y) + get(height));
+    }
     const { trigger: triggerHorizontal, stop: stopHorizontal } = watchTriggerable(
       [wrapperWidth, width],
       ([ww, w]) => {
@@ -162,64 +178,55 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         eventFilter: throttleFilter(500)
       }
     );
-    watchImmediate(vertical, (vertical2) => {
-      if (vertical2) {
-        triggerVertical();
-        stopHorizontal();
-      } else {
-        triggerHorizontal();
-        stopVertical();
+    watchImmediate(
+      () => __props.vertical,
+      (vertical) => {
+        if (vertical) {
+          triggerVertical();
+          stopHorizontal();
+        } else {
+          triggerHorizontal();
+          stopVertical();
+        }
       }
-    });
-    const prevArrowDisabled = computed(() => {
-      if (!get(vertical))
-        return get(left);
-      return get(top);
-    });
-    const nextArrowDisabled = computed(() => {
-      if (!get(vertical))
-        return get(right);
-      return get(bottom);
-    });
-    function onPrevSliderClick() {
-      if (!get(vertical))
-        set(x, get(x) - get(width));
-      else
-        set(y, get(y) - get(height));
-    }
-    function onNextSliderClick() {
-      if (!get(vertical))
-        set(x, get(x) + get(width));
-      else
-        set(y, get(y) + get(height));
+    );
+    if (route) {
+      watch(route, () => {
+        applyNewValue(true);
+      });
     }
-    useResizeObserver(bar, () => {
-      keepActiveTabVisible();
-    });
-    watchImmediate(modelValue, (modelValue2) => {
-      set(internalModelValue, modelValue2);
-    });
+    watchImmediate(
+      () => get(modelValue),
+      (modelValue2) => {
+        set(internalModelValue, modelValue2);
+      }
+    );
     watch(internalModelValue, () => {
       keepActiveTabVisible();
     });
+    onMounted(() => {
+      if (get(modelValue) !== void 0)
+        return;
+      applyNewValue();
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass([_ctx.$style.tabs, { [_ctx.$style["tabs--vertical"] ?? ""]: unref(vertical) }])
+        class: normalizeClass([_ctx.$style.tabs, { [_ctx.$style["tabs--vertical"] ?? ""]: __props.vertical }])
       }, [
         unref(showArrows) ? (openBlock(), createElementBlock("div", {
           key: 0,
-          class: normalizeClass([_ctx.$style.arrow, { [_ctx.$style["arrow--vertical"] ?? ""]: unref(vertical) }])
+          class: normalizeClass([_ctx.$style.arrow, { [_ctx.$style["arrow--vertical"] ?? ""]: __props.vertical }])
         }, [
           createVNode(RuiButton, {
             class: "w-full h-full !rounded-none",
             variant: "text",
-            color: unref(color),
+            color: __props.color,
             disabled: unref(prevArrowDisabled),
             onClick: _cache[0] || (_cache[0] = ($event) => onPrevSliderClick())
           }, {
             default: withCtx(() => [
               createVNode(RuiIcon, {
-                name: unref(vertical) ? "lu-chevron-up" : "lu-chevron-left"
+                name: __props.vertical ? "lu-chevron-up" : "lu-chevron-left"
               }, null, 8, ["name"])
             ]),
             _: 1
@@ -230,8 +237,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ref: bar,
           class: normalizeClass(["no-scrollbar", [
             _ctx.$style["tabs-bar"],
-            { [_ctx.$style["tabs-bar--vertical"] ?? ""]: unref(vertical) },
-            { [_ctx.$style["tabs-bar--grow"] ?? ""]: unref(grow) }
+            { [_ctx.$style["tabs-bar--vertical"] ?? ""]: __props.vertical },
+            { [_ctx.$style["tabs-bar--grow"] ?? ""]: __props.grow }
           ]])
         }, [
           createElementVNode("div", {
@@ -240,8 +247,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             role: "tablist",
             class: normalizeClass([
               _ctx.$style["tabs-wrapper"],
-              { [_ctx.$style["tabs-wrapper--vertical"] ?? ""]: unref(vertical) },
-              { [_ctx.$style["tabs-wrapper--grow"] ?? ""]: unref(grow) }
+              { [_ctx.$style["tabs-wrapper--vertical"] ?? ""]: __props.vertical },
+              { [_ctx.$style["tabs-wrapper--grow"] ?? ""]: __props.grow }
             ])
           }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(children), (child, i) => {
@@ -254,18 +261,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ], 2),
         unref(showArrows) ? (openBlock(), createElementBlock("div", {
           key: 1,
-          class: normalizeClass([_ctx.$style.arrow, { [_ctx.$style["arrow--vertical"] ?? ""]: unref(vertical) }])
+          class: normalizeClass([_ctx.$style.arrow, { [_ctx.$style["arrow--vertical"] ?? ""]: __props.vertical }])
         }, [
           createVNode(RuiButton, {
             class: "w-full h-full !rounded-none",
             variant: "text",
-            color: unref(color),
+            color: __props.color,
             disabled: unref(nextArrowDisabled),
             onClick: _cache[2] || (_cache[2] = ($event) => onNextSliderClick())
           }, {
             default: withCtx(() => [
               createVNode(RuiIcon, {
-                name: unref(vertical) ? "lu-chevron-down" : "lu-chevron-right"
+                name: __props.vertical ? "lu-chevron-down" : "lu-chevron-right"
               }, null, 8, ["name"])
             ]),
             _: 1

package/dist/components/tabs/tabs/RuiTabs.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTabs.vue2.js","sources":["../../../../src/components/tabs/tabs/RuiTabs.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Props as TabProps } from '@/components/tabs/tab/RuiTab.vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport { throttleFilter } from '@vueuse/shared';\nimport { Fragment, isVNode, type VNode } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\n\nexport interface Props {\n  color?: ContextColorsType;\n  vertical?: boolean;\n  disabled?: boolean;\n  grow?: boolean;\n  modelValue?: number | string;\n  align?: 'start' | 'center' | 'end';\n  indicatorPosition?: 'start' | 'end';\n}\n\ndefineOptions({\n  name: 'RuiTabs',\n});\n\nconst props = withDefaults(defineProps<Props>(), {\n  color: undefined,\n  vertical: false,\n  disabled: false,\n  grow: false,\n  modelValue: undefined,\n  align: 'center',\n  indicatorPosition: 'end',\n});\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', modelValue: number | string): void;\n}>();\n\nconst { color, grow, modelValue, disabled, vertical, align, indicatorPosition } = toRefs(props);\n\nconst internalModelValue = ref();\nconst bar = ref<HTMLDivElement>();\nconst wrapper = ref<HTMLDivElement>();\nconst showArrows: Ref<boolean> = ref(false);\n\n// When using dynamic content with v-for the slot content can contain fragment,\n// Go through the fragment and always return RuiTab only\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\nconst slots = useSlots();\nconst children = computed(() => {\n  const slotContent = slots.default?.() ?? [];\n\n  const tabs = getChildrenTabs(slotContent);\n\n  const currentModelValue = get(internalModelValue);\n  const inheritedProps = {\n    color: get(color),\n    grow: get(grow),\n    disabled: get(disabled),\n    vertical: get(vertical),\n    align: get(align),\n    indicatorPosition: get(indicatorPosition),\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\nfunction updateModelValue(newModelValue: string | number) {\n  emit('update:modelValue', newModelValue);\n  set(internalModelValue, newModelValue);\n}\n\nconst route = useRoute();\n\nfunction isPathMatch(path: string, { exactPath, exact }: { exactPath?: boolean; exact?: boolean }) {\n  const currentRoute = route.fullPath;\n\n  if (exactPath)\n    return currentRoute === path;\n\n  const routeWithoutQueryParams = new URL(path, window.location.origin)\n    .pathname;\n\n  if (exact)\n    return currentRoute === routeWithoutQueryParams;\n\n  return currentRoute.startsWith(routeWithoutQueryParams);\n}\n\nfunction keepActiveTabVisible() {\n  nextTick(() => {\n    if (!get(showArrows))\n      return;\n\n    const elem = get(wrapper);\n    const barElem = get(bar);\n    if (elem) {\n      const activeTab = (elem.querySelector('.active-tab')\n        ?? elem.querySelector('.active-tab-link')) as HTMLElement;\n\n      if (!activeTab || !barElem)\n        return;\n\n      const childLeft = activeTab.offsetLeft - elem.offsetLeft;\n      const childTop = activeTab.offsetTop - elem.offsetTop;\n      const childWidth = activeTab.offsetWidth;\n      const childHeight = activeTab.offsetHeight;\n      const parentScrollLeft = barElem.scrollLeft;\n      const parentScrollTop = barElem.scrollTop;\n      const parentWidth = barElem.offsetWidth;\n      const parentHeight = barElem.offsetHeight;\n\n      const scrollLeft = Math.max(\n        Math.min(parentScrollLeft, childLeft),\n        childLeft + childWidth - parentWidth,\n      );\n\n      const scrollTop = Math.max(\n        Math.min(parentScrollTop, childTop),\n        childTop + childHeight - parentHeight,\n      );\n\n      barElem.scrollTo({\n        left: scrollLeft,\n        top: scrollTop,\n        behavior: 'smooth',\n      });\n    }\n  });\n}\n\nconst router = useRouter();\n\nfunction applyNewValue(onlyLink = false) {\n  const enabledChildren = get(children).filter(\n    child => !child.props.disabled,\n  );\n  if (enabledChildren.length > 0) {\n    let newModelValue: string | number = get(modelValue) || 0;\n    enabledChildren.forEach((child, index) => {\n      const props = child.props as TabProps;\n      if (!onlyLink && index === 0 && props.value)\n        newModelValue = props.value;\n\n      const to = props.to ? router.resolve(props.to) : undefined;\n\n      if (props.link !== false && to && isPathMatch(to.fullPath, props))\n        newModelValue = to.fullPath;\n    });\n    updateModelValue(newModelValue);\n  }\n  keepActiveTabVisible();\n}\n\nonMounted(() => {\n  if (get(modelValue) !== undefined)\n    return;\n\n  applyNewValue();\n});\n\nwatch(route, () => {\n  applyNewValue(true);\n});\n\nconst { width, height } = useElementSize(bar);\nconst { width: wrapperWidth, height: wrapperHeight } = useElementSize(wrapper);\nconst { arrivedState, x, y } = useScroll(bar, { behavior: 'smooth' });\n\nconst { top, bottom, left, right } = toRefs(arrivedState);\n\nconst { trigger: triggerHorizontal, stop: stopHorizontal } = watchTriggerable(\n  [wrapperWidth, width],\n  ([ww, w]) => {\n    if (w > 0)\n      set(showArrows, ww > w);\n  },\n  {\n    eventFilter: throttleFilter(50),\n  },\n);\n\nconst { trigger: triggerVertical, stop: stopVertical } = watchTriggerable(\n  [wrapperHeight, height],\n  ([wh, h]) => {\n    if (h > 0)\n      set(showArrows, wh > h);\n  },\n  {\n    eventFilter: throttleFilter(500),\n  },\n);\n\nwatchImmediate(vertical, (vertical) => {\n  if (vertical) {\n    triggerVertical();\n    stopHorizontal();\n  }\n  else {\n    triggerHorizontal();\n    stopVertical();\n  }\n});\n\nconst prevArrowDisabled = computed(() => {\n  if (!get(vertical))\n    return get(left);\n\n  return get(top);\n});\n\nconst nextArrowDisabled = computed(() => {\n  if (!get(vertical))\n    return get(right);\n\n  return get(bottom);\n});\n\nfunction onPrevSliderClick() {\n  if (!get(vertical))\n    set(x, get(x) - get(width));\n  else\n    set(y, get(y) - get(height));\n}\n\nfunction onNextSliderClick() {\n  if (!get(vertical))\n    set(x, get(x) + get(width));\n  else\n    set(y, get(y) + get(height));\n}\n\nuseResizeObserver(bar, () => {\n  keepActiveTabVisible();\n});\n\nwatchImmediate(modelValue, (modelValue) => {\n  set(internalModelValue, modelValue);\n});\n\nwatch(internalModelValue, () => {\n  keepActiveTabVisible();\n});\n</script>\n\n<template>\n  <div :class=\"[$style.tabs, { [$style['tabs--vertical'] ?? '']: vertical }]\">\n    <div\n      v-if=\"showArrows\"\n      :class=\"[$style.arrow, { [$style['arrow--vertical'] ?? '']: vertical }]\"\n    >\n      <RuiButton\n        class=\"w-full h-full !rounded-none\"\n        variant=\"text\"\n        :color=\"color\"\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=\"no-scrollbar\"\n      :class=\"[\n        $style['tabs-bar'],\n        { [$style['tabs-bar--vertical'] ?? '']: vertical },\n        { [$style['tabs-bar--grow'] ?? '']: grow },\n      ]\"\n    >\n      <div\n        ref=\"wrapper\"\n        role=\"tablist\"\n        :class=\"[\n          $style['tabs-wrapper'],\n          { [$style['tabs-wrapper--vertical'] ?? '']: vertical },\n          { [$style['tabs-wrapper--grow'] ?? '']: grow },\n        ]\"\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=\"[$style.arrow, { [$style['arrow--vertical'] ?? '']: vertical }]\"\n    >\n      <RuiButton\n        class=\"w-full h-full !rounded-none\"\n        variant=\"text\"\n        :color=\"color\"\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\n<style lang=\"scss\" module>\n.tabs {\n  @apply flex h-[2.625rem];\n\n  &--vertical {\n    @apply h-auto max-h-full flex-col;\n  }\n\n  &-bar {\n    @apply max-h-full overflow-auto;\n\n    &--vertical,\n    &--grow {\n      @apply w-full;\n    }\n  }\n\n  &-wrapper {\n    @apply h-full inline-flex max-w-none;\n\n    &--vertical {\n      @apply flex-col h-auto;\n    }\n\n    &--vertical,\n    &--grow {\n      @apply min-w-full;\n    }\n  }\n}\n\n.arrow {\n  @apply h-full w-10;\n\n  &--vertical {\n    @apply min-h-[2.625rem] w-full h-auto;\n  }\n}\n</style>\n"],"names":["children","props","vertical","modelValue","_createElementBlock","$style","_unref","_createVNode","_createElementVNode","_normalizeClass","_openBlock","_Fragment","_renderList","_createBlock","_resolveDynamicComponent"],"mappings":"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"}
+{"version":3,"file":"RuiTabs.vue2.js","sources":["../../../../src/components/tabs/tabs/RuiTabs.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Props as TabProps } from '@/components/tabs/tab/RuiTab.vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport { throttleFilter } from '@vueuse/shared';\nimport { Fragment, getCurrentInstance, isVNode, type VNode } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\n\nexport interface Props {\n  color?: ContextColorsType;\n  vertical?: boolean;\n  disabled?: boolean;\n  grow?: boolean;\n  align?: 'start' | 'center' | 'end';\n  indicatorPosition?: 'start' | 'end';\n}\n\ndefineOptions({\n  name: 'RuiTabs',\n});\n\nconst modelValue = defineModel<number | string>();\n\nconst {\n  color,\n  vertical = false,\n  disabled = false,\n  grow = false,\n  align = 'center',\n  indicatorPosition = 'end',\n} = defineProps<Props>();\n\nconst internalModelValue = ref<string | number>();\nconst bar = useTemplateRef<HTMLDivElement>('bar');\nconst wrapper = useTemplateRef<HTMLDivElement>('wrapper');\nconst showArrows: Ref<boolean> = ref(false);\n\nconst slots = useSlots();\nconst hasRouter = !!getCurrentInstance()?.appContext.config.globalProperties.$router;\nconst route = hasRouter ? useRoute() : undefined;\nconst router = hasRouter ? useRouter() : undefined;\nconst { width, height } = useElementSize(bar);\nconst { width: wrapperWidth, height: wrapperHeight } = useElementSize(wrapper);\nconst { arrivedState, x, y } = useScroll(bar, { behavior: 'smooth' });\nconst { top, bottom, left, right } = toRefs(arrivedState);\n\nuseResizeObserver(bar, () => {\n  keepActiveTabVisible();\n});\n\nconst children = computed<(VNode & { props: Record<string, any> })[]>(() => {\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  };\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\nconst prevArrowDisabled = computed<boolean>(() => {\n  if (!vertical)\n    return get(left);\n\n  return get(top);\n});\n\nconst nextArrowDisabled = computed<boolean>(() => {\n  if (!vertical)\n    return get(right);\n\n  return get(bottom);\n});\n\n// When using dynamic content with v-for the slot content can contain fragment,\n// Go through the fragment and always return RuiTab only\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\nfunction updateModelValue(newModelValue: string | number): void {\n  set(modelValue, newModelValue);\n  set(internalModelValue, newModelValue);\n}\n\nfunction isPathMatch(\n  path: string,\n  { exactPath, exact }: { exactPath?: boolean; exact?: boolean },\n): boolean {\n  if (!route)\n    return false;\n\n  const currentRoute = route.fullPath;\n\n  if (exactPath)\n    return currentRoute === path;\n\n  const routeWithoutQueryParams = new URL(path, window.location.origin).pathname;\n\n  if (exact)\n    return currentRoute === routeWithoutQueryParams;\n\n  return currentRoute.startsWith(routeWithoutQueryParams);\n}\n\nfunction keepActiveTabVisible(): void {\n  nextTick(() => {\n    if (!get(showArrows))\n      return;\n\n    const elem = get(wrapper);\n    const barElem = get(bar);\n    if (elem) {\n      const activeTab = (elem.querySelector('.active-tab') ??\n        elem.querySelector('.active-tab-link')) as HTMLElement;\n\n      if (!activeTab || !barElem)\n        return;\n\n      const childLeft = activeTab.offsetLeft - elem.offsetLeft;\n      const childTop = activeTab.offsetTop - elem.offsetTop;\n      const childWidth = activeTab.offsetWidth;\n      const childHeight = activeTab.offsetHeight;\n      const parentScrollLeft = barElem.scrollLeft;\n      const parentScrollTop = barElem.scrollTop;\n      const parentWidth = barElem.offsetWidth;\n      const parentHeight = barElem.offsetHeight;\n\n      const scrollLeft = Math.max(\n        Math.min(parentScrollLeft, childLeft),\n        childLeft + childWidth - parentWidth,\n      );\n\n      const scrollTop = Math.max(\n        Math.min(parentScrollTop, childTop),\n        childTop + childHeight - parentHeight,\n      );\n\n      barElem.scrollTo({\n        left: scrollLeft,\n        top: scrollTop,\n        behavior: 'smooth',\n      });\n    }\n  });\n}\n\nfunction applyNewValue(onlyLink = false): void {\n  const enabledChildren = get(children).filter(child => !child.props?.disabled);\n  if (enabledChildren.length > 0) {\n    let newModelValue: string | number = get(modelValue) || 0;\n    enabledChildren.forEach((child, index) => {\n      const props = child.props as TabProps;\n      if (!onlyLink && index === 0 && props.value)\n        newModelValue = props.value;\n\n      const to = props.to && router ? router.resolve(props.to) : undefined;\n\n      if (props.link !== false && to && isPathMatch(to.fullPath, props))\n        newModelValue = to.fullPath;\n    });\n    updateModelValue(newModelValue);\n  }\n  keepActiveTabVisible();\n}\n\nfunction onPrevSliderClick(): void {\n  if (!vertical)\n    set(x, get(x) - get(width));\n  else set(y, get(y) - get(height));\n}\n\nfunction onNextSliderClick(): void {\n  if (!vertical)\n    set(x, get(x) + get(width));\n  else set(y, get(y) + get(height));\n}\n\nconst { trigger: triggerHorizontal, stop: stopHorizontal } = watchTriggerable(\n  [wrapperWidth, width],\n  ([ww, w]) => {\n    if (w > 0)\n      set(showArrows, ww > w);\n  },\n  {\n    eventFilter: throttleFilter(50),\n  },\n);\n\nconst { trigger: triggerVertical, stop: stopVertical } = watchTriggerable(\n  [wrapperHeight, height],\n  ([wh, h]) => {\n    if (h > 0)\n      set(showArrows, wh > h);\n  },\n  {\n    eventFilter: throttleFilter(500),\n  },\n);\n\nwatchImmediate(\n  () => vertical,\n  (vertical) => {\n    if (vertical) {\n      triggerVertical();\n      stopHorizontal();\n    }\n    else {\n      triggerHorizontal();\n      stopVertical();\n    }\n  },\n);\n\nif (route) {\n  watch(route, () => {\n    applyNewValue(true);\n  });\n}\n\nwatchImmediate(\n  () => get(modelValue),\n  (modelValue) => {\n    set(internalModelValue, modelValue);\n  },\n);\n\nwatch(internalModelValue, () => {\n  keepActiveTabVisible();\n});\n\nonMounted(() => {\n  if (get(modelValue) !== undefined)\n    return;\n\n  applyNewValue();\n});\n</script>\n\n<template>\n  <div :class=\"[$style.tabs, { [$style['tabs--vertical'] ?? '']: vertical }]\">\n    <div\n      v-if=\"showArrows\"\n      :class=\"[$style.arrow, { [$style['arrow--vertical'] ?? '']: vertical }]\"\n    >\n      <RuiButton\n        class=\"w-full h-full !rounded-none\"\n        variant=\"text\"\n        :color=\"color\"\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=\"no-scrollbar\"\n      :class=\"[\n        $style['tabs-bar'],\n        { [$style['tabs-bar--vertical'] ?? '']: vertical },\n        { [$style['tabs-bar--grow'] ?? '']: grow },\n      ]\"\n    >\n      <div\n        ref=\"wrapper\"\n        role=\"tablist\"\n        :class=\"[\n          $style['tabs-wrapper'],\n          { [$style['tabs-wrapper--vertical'] ?? '']: vertical },\n          { [$style['tabs-wrapper--grow'] ?? '']: grow },\n        ]\"\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=\"[$style.arrow, { [$style['arrow--vertical'] ?? '']: vertical }]\"\n    >\n      <RuiButton\n        class=\"w-full h-full !rounded-none\"\n        variant=\"text\"\n        :color=\"color\"\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\n<style lang=\"scss\" module>\n.tabs {\n  @apply flex h-[2.625rem];\n\n  &--vertical {\n    @apply h-auto max-h-full flex-col;\n  }\n\n  &-bar {\n    @apply max-h-full overflow-auto;\n\n    &--vertical,\n    &--grow {\n      @apply w-full;\n    }\n  }\n\n  &-wrapper {\n    @apply h-full inline-flex max-w-none;\n\n    &--vertical {\n      @apply flex-col h-auto;\n    }\n\n    &--vertical,\n    &--grow {\n      @apply min-w-full;\n    }\n  }\n}\n\n.arrow {\n  @apply h-full w-10;\n\n  &--vertical {\n    @apply min-h-[2.625rem] w-full h-auto;\n  }\n}\n</style>\n"],"names":["_useModel","children","modelValue","_createElementBlock","$style","_unref","_createVNode","_createElementVNode","_normalizeClass","_openBlock","_Fragment","_renderList","_createBlock","_resolveDynamicComponent"],"mappings":"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"}

package/dist/components/time-picker/RuiTimePicker.vue.d.ts

@@ -28,9 +28,6 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:second"?: ((value: number | undefined) => any) | undefined;
     "onUpdate:millisecond"?: ((value: number | undefined) => any) | undefined;
     "onUpdate:selection"?: ((value: TimePickerSelection) => any) | undefined;
-}>, {
-    borderless: boolean;
-    accuracy: TimeAccuracy;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/time-picker/RuiTimePicker.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent, useModel, ref, useTemplateRef, computed, onMounted, watch, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, createCommentVNode, normalizeStyle, Fragment, renderList, mergeModels, nextTick } from "vue";
+import { defineComponent, useModel, ref, useTemplateRef, computed, watch, onMounted, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, createCommentVNode, normalizeStyle, Fragment, renderList, mergeModels, nextTick } from "vue";
 import { TimeAccuracy } from "../../consts/time-accuracy.js";
 import { assert } from "../../utils/assert.js";
 import { isDefined } from "@vueuse/core";
@@ -20,7 +20,7 @@ const TWELVE_HOURS = 12;
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "RuiTimePicker",
   props: /* @__PURE__ */ mergeModels({
-    accuracy: { default: TimeAccuracy.MINUTE },
+    accuracy: { default: () => TimeAccuracy.MINUTE },
     borderless: { type: Boolean, default: false }
   }, {
     "modelValue": { required: true },
@@ -44,7 +44,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const selectedSecond = useModel(__props, "second");
     const selectedMillisecond = useModel(__props, "millisecond");
     const editMode = useModel(__props, "selection");
-    const props = __props;
     const totalItemsPerMode = {
       hour: 12,
       minute: 60,
@@ -59,9 +58,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const isDragging = ref(false);
     const clockFace = useTemplateRef("clockFace");
-    const showSecond = computed(() => props.accuracy === TimeAccuracy.SECOND || props.accuracy === TimeAccuracy.MILLISECOND);
-    const showMillisecond = computed(() => props.accuracy === TimeAccuracy.MILLISECOND);
-    const period = computed(() => isDefined(selectedHour) && get(selectedHour) >= TWELVE_HOURS ? "PM" : "AM");
+    const showSecond = computed(
+      () => __props.accuracy === TimeAccuracy.SECOND || __props.accuracy === TimeAccuracy.MILLISECOND
+    );
+    const showMillisecond = computed(() => __props.accuracy === TimeAccuracy.MILLISECOND);
+    const period = computed(
+      () => isDefined(selectedHour) && get(selectedHour) >= TWELVE_HOURS ? "PM" : "AM"
+    );
     const displayHour = computed(() => {
       if (!isDefined(selectedHour)) {
         return void 0;
@@ -153,10 +156,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function getModelSeconds() {
       const acceptedAccuracy = [TimeAccuracy.SECOND, TimeAccuracy.MILLISECOND];
-      return acceptedAccuracy.includes(props.accuracy) && isDefined(modelValue) ? new Date(get(modelValue)).getSeconds() : void 0;
+      return acceptedAccuracy.includes(__props.accuracy) && isDefined(modelValue) ? new Date(get(modelValue)).getSeconds() : void 0;
     }
     function getModelMilliseconds() {
-      return props.accuracy === TimeAccuracy.MILLISECOND && isDefined(modelValue) ? new Date(get(modelValue)).getMilliseconds() : void 0;
+      return __props.accuracy === TimeAccuracy.MILLISECOND && isDefined(modelValue) ? new Date(get(modelValue)).getMilliseconds() : void 0;
     }
     function generateNumbers(total, interval) {
       const numbers = [];
@@ -208,32 +211,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function startDrag(event) {
       event.preventDefault();
       set(isDragging, true);
-      const handleMove = (moveEvent) => {
-        if (!get(isDragging) || !isDefined(clockFace))
-          return;
-        const rect = get(clockFace).getBoundingClientRect();
-        const centerX = rect.left + rect.width / 2;
-        const centerY = rect.top + rect.height / 2;
-        let clientX, clientY;
-        if ("touches" in moveEvent) {
-          const touch = moveEvent.touches[0];
-          assert(touch);
-          clientX = touch.clientX;
-          clientY = touch.clientY;
-        } else {
-          clientX = moveEvent.clientX;
-          clientY = moveEvent.clientY;
-        }
-        const x = clientX - centerX;
-        const y = clientY - centerY;
+      if (!isDefined(clockFace))
+        return;
+      const rect = get(clockFace).getBoundingClientRect();
+      const centerX = rect.left + rect.width / 2;
+      const centerY = rect.top + rect.height / 2;
+      let rafId = null;
+      const applyMove = (clientX2, clientY2) => {
+        const x = clientX2 - centerX;
+        const y = clientY2 - centerY;
         let angle = Math.atan2(y, x) * (180 / Math.PI) + 90;
         if (angle < 0)
           angle += FULL_CIRCLE;
         const mode = get(editMode);
         const unit = Math.round(angle / (FULL_CIRCLE / totalItemsPerMode[mode])) % totalItemsPerMode[mode];
         if (mode === "hour") {
-          let hour;
-          hour = unit;
+          let hour = unit;
           if (hour === 0)
             hour = TWELVE_HOURS;
           if (get(period) === "PM" && hour < TWELVE_HOURS) {
@@ -251,7 +244,32 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
         updateModelValue();
       };
+      const handleMove = (moveEvent) => {
+        if (!get(isDragging))
+          return;
+        if (rafId !== null)
+          return;
+        let clientX2;
+        let clientY2;
+        if ("touches" in moveEvent) {
+          const touch = moveEvent.touches[0];
+          assert(touch);
+          clientX2 = touch.clientX;
+          clientY2 = touch.clientY;
+        } else {
+          clientX2 = moveEvent.clientX;
+          clientY2 = moveEvent.clientY;
+        }
+        rafId = requestAnimationFrame(() => {
+          applyMove(clientX2, clientY2);
+          rafId = null;
+        });
+      };
       const handleEnd = () => {
+        if (rafId !== null) {
+          cancelAnimationFrame(rafId);
+          rafId = null;
+        }
         set(isDragging, false);
         document.removeEventListener("mousemove", handleMove);
         document.removeEventListener("touchmove", handleMove);
@@ -269,7 +287,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       document.addEventListener("touchmove", handleMove);
       document.addEventListener("mouseup", handleEnd);
       document.addEventListener("touchend", handleEnd);
-      handleMove(event);
+      const initialEvent = event;
+      let clientX;
+      let clientY;
+      if ("touches" in initialEvent) {
+        const touch = initialEvent.touches[0];
+        assert(touch);
+        clientX = touch.clientX;
+        clientY = touch.clientY;
+      } else {
+        clientX = initialEvent.clientX;
+        clientY = initialEvent.clientY;
+      }
+      applyMove(clientX, clientY);
     }
     function selectByClick(num) {
       const mode = get(editMode);
@@ -307,18 +337,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         set(modelValue, date);
       });
     }
+    watch(
+      modelValue,
+      () => {
+        set(selectedHour, getModelHours());
+        set(selectedMinute, getModelMinutes());
+        set(selectedSecond, getModelSeconds());
+        set(selectedMillisecond, getModelMilliseconds());
+      }
+    );
     onMounted(() => {
       set(selectedHour, getModelHours());
       set(selectedMinute, getModelMinutes());
       set(selectedSecond, getModelSeconds());
       set(selectedMillisecond, getModelMilliseconds());
     });
-    watch(modelValue, () => {
-      set(selectedHour, getModelHours());
-      set(selectedMinute, getModelMinutes());
-      set(selectedSecond, getModelSeconds());
-      set(selectedMillisecond, getModelMilliseconds());
-    }, { deep: true });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         role: "group",