chore: adjustments from backport and fix for tabs issue

rotki · Jan 12, 2024 · 2c096f5 · 2c096f5
1 parent 64d6d84
commit 2c096f5
Show file tree

Hide file tree

Showing 12 changed files with 148 additions and 85 deletions.
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -29,8 +29,8 @@ const preview: Preview = {
     },
     vueInstance: {
       defaultValue: vueInstance,
-      control: { type: 'object' }
-    }
+      control: { type: 'object' },
+    },
   },
   globalTypes: {
     theme: {
@@ -44,7 +44,7 @@ const preview: Preview = {
         items: [
           { value: 'auto', title: 'Auto' },
           { value: 'light', icon: 'sun', title: 'Light' },
-          { value: 'dark', icon: 'moon', title: 'Dark' }
+          { value: 'dark', icon: 'moon', title: 'Dark' },
         ],
         // Change title based on selected value
         dynamicTitle: true,

diff --git a/example/cypress/e2e/tabs.cy.ts b/example/cypress/e2e/tabs.cy.ts
@@ -27,6 +27,10 @@ describe('Tabs', () => {
 
     // Click third tab
     cy.get('@tablist').find('button:nth-child(3)').click();
+    cy.get('@tabcontent').find('> div > div:nth-child(3)').should('be.visible');
+    cy.get('@tabcontent')
+      .find('> div > div:nth-child(3)')
+      .should('have.class', 'active-tab-item');
     cy.get('@tabcontent').should('have.text', 'Tab 3 Content');
 
     // Click last tab should redirect to stepper page

diff --git a/src/components/alerts/Alert.stories.ts b/src/components/alerts/Alert.stories.ts
@@ -8,7 +8,8 @@ const render: StoryFn<Props> = (args) => ({
   setup() {
     return { args };
   },
-  template: `<Alert v-bind="args" class="w-[400px]" />`,
+  template: `
+    <Alert v-bind="args" class="w-[400px]" />`,
 });
 
 const meta: Meta<Props> = {

diff --git a/src/components/buttons/button/Button.vue b/src/components/buttons/button/Button.vue
@@ -260,6 +260,10 @@ const slots = useSlots();
 
   &.list {
     @apply p-3 rounded-none w-full justify-start text-left;
+
+    &.sm {
+      @apply px-3 py-1;
+    }
   }
 
   &.icon {

diff --git a/src/components/cards/Card.stories.ts b/src/components/cards/Card.stories.ts
@@ -25,27 +25,28 @@ const render: StoryFn<Props> = (args) => ({
     return { cardArgs, args };
   },
   template: `
-  <div>
-    <Card v-bind="cardArgs">
-      <template v-if="args.image" #image><img :src="args.image" alt="card image" /></template>
-      <template v-if="args.prepend" #prepend>{{ args.prepend }}</template>
-      <template v-if="args.header" #header>{{ args.header }}</template>
-      <template v-if="args.customHeader" #custom-header><h5 class="p-4 text-rui-error text-h5">{{ args.customHeader }}</h5></template>
-      <template v-if="args.subheader" #subheader>
-        {{ args.subheader }}
-      </template>
-      <p v-if="args.content">{{ args.content }}</p>
-      <template v-if="args.actions" #footer>
-        <Button
-          v-for="(action, i) in args.actions"
-          v-bind="action"
-          :key="i"
-        >
-          {{ action.text }}
-        </Button>
-      </template>
-    </Card>
-  </div>`,
+      <div>
+        <Card v-bind="cardArgs">
+          <template v-if="args.image" #image><img :src="args.image" alt="card image" /></template>
+          <template v-if="args.prepend" #prepend>{{ args.prepend }}</template>
+          <template v-if="args.header" #header>{{ args.header }}</template>
+          <template v-if="args.customHeader" #custom-header><h5 class="p-4 text-rui-error text-h5">
+            {{ args.customHeader }}</h5></template>
+          <template v-if="args.subheader" #subheader>
+            {{ args.subheader }}
+          </template>
+          <p v-if="args.content">{{ args.content }}</p>
+          <template v-if="args.actions" #footer>
+            <Button
+                v-for="(action, i) in args.actions"
+                v-bind="action"
+                :key="i"
+            >
+              {{ action.text }}
+            </Button>
+          </template>
+        </Card>
+      </div>`,
 });
 
 const meta: Meta<Props> = {
@@ -59,6 +60,11 @@ const meta: Meta<Props> = {
     header: { control: 'text' },
     image: { control: 'text' },
     prepend: { control: 'text' },
+    rounded: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      defaultValue: 'md',
+    },
     elevation: { control: 'number', max: 24, min: 1 },
     subheader: { control: 'text' },
     content: { control: 'text' },

diff --git a/src/components/chips/Chip.vue b/src/components/chips/Chip.vue
@@ -25,7 +25,7 @@ defineOptions({
 });
 
 const props = withDefaults(defineProps<Props>(), {
-  label: false,
+  tile: false,
   size: 'md',
   color: 'grey',
   clickable: false,

diff --git a/src/components/forms/revealable-text-field/RevealableTextField.vue b/src/components/forms/revealable-text-field/RevealableTextField.vue
@@ -50,6 +50,7 @@ const slots = useSlots();
     <template #append>
       <div class="flex items-center">
         <RuiButton
+          :disabled="disabled"
           tabindex="-1"
           variant="text"
           type="button"

diff --git a/src/components/overlays/tooltip/Tooltip.vue b/src/components/overlays/tooltip/Tooltip.vue
@@ -72,7 +72,12 @@ const {
           @before-enter="updatePopper()"
           @after-leave="onPopperLeave()"
         >
-          <div v-if="open" :class="css.base">
+          <div
+            v-if="open"
+            key="tooltip"
+            :class="css.base"
+            role="tooltip-content"
+          >
             <slot>
               {{ text }}
             </slot>
@@ -95,7 +100,7 @@ $arrowSize: 0.625rem;
 }
 
 .tooltip {
-  @apply w-max transform transition-opacity delay-0 z-[999];
+  @apply w-max transform transition-opacity delay-0 z-[9999];
 
   &__fixed {
     @apply fixed;

diff --git a/src/components/steppers/Stepper.vue b/src/components/steppers/Stepper.vue
@@ -142,8 +142,9 @@ watch(step, () => {
             v-if="description"
             :class="[css.subtitle, { [subtitleClass]: custom }]"
             class="text-caption"
-            >{{ description }}</span
           >
+            {{ description }}
+          </span>
         </div>
       </div>
     </template>

diff --git a/src/components/tabs/tabs/Tabs.spec.ts b/src/components/tabs/tabs/Tabs.spec.ts
@@ -52,6 +52,7 @@ describe('Tabs/Tabs', () => {
     await wrapper.setProps({
       vertical: true,
     });
+    await nextTick();
     expect(wrapper.classes()).toMatch(/_tabs--vertical_/);
 
     expect(

diff --git a/src/components/tabs/tabs/Tabs.vue b/src/components/tabs/tabs/Tabs.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { useRoute } from 'vue-router';
+import { throttleFilter } from '@vueuse/shared';
 import { type ContextColorsType } from '@/consts/colors';
 import Button from '@/components/buttons/button/Button.vue';
 import Icon from '@/components/icons/Icon.vue';
@@ -69,11 +70,12 @@ const updateModelValue = (newModelValue: string | number) => {
   set(internalModelValue, newModelValue);
 };
 
+const route = useRoute();
+
 const isPathMatch = (
   path: string,
   { exactPath, exact }: { exactPath?: boolean; exact?: boolean },
 ) => {
-  const route = useRoute();
   const currentRoute = route.fullPath;
 
   if (exactPath) {
@@ -88,24 +90,79 @@ const isPathMatch = (
   return currentRoute.startsWith(routeWithoutQueryParams);
 };
 
-onMounted(() => {
-  if (get(modelValue) !== undefined) {
-    return;
-  }
+const keepActiveTabVisible = () => {
+  nextTick(() => {
+    if (!get(showArrows)) {
+      return;
+    }
+
+    const elem = get(wrapper);
+    const barElem = get(bar);
+    if (elem) {
+      const activeTab = (elem.querySelector('.active-tab') ??
+        elem.querySelector('.active-tab-link')) as HTMLElement;
+
+      if (!activeTab || !barElem) {
+        return;
+      }
+
+      const childLeft = activeTab.offsetLeft - elem.offsetLeft;
+      const childTop = activeTab.offsetTop - elem.offsetTop;
+      const childWidth = activeTab.offsetWidth;
+      const childHeight = activeTab.offsetHeight;
+      const parentScrollLeft = barElem.scrollLeft;
+      const parentScrollTop = barElem.scrollTop;
+      const parentWidth = barElem.offsetWidth;
+      const parentHeight = barElem.offsetHeight;
+
+      const scrollLeft = Math.max(
+        Math.min(parentScrollLeft, childLeft),
+        childLeft + childWidth - parentWidth,
+      );
+
+      const scrollTop = Math.max(
+        Math.min(parentScrollTop, childTop),
+        childTop + childHeight - parentHeight,
+      );
+
+      barElem.scrollTo({
+        left: scrollLeft,
+        top: scrollTop,
+        behavior: 'smooth',
+      });
+    }
+  });
+};
+
+const applyNewValue = (onlyLink = false) => {
   const enabledChildren = get(children).filter(
     (child) => !child.props.disabled,
   );
   if (enabledChildren.length > 0) {
-    let newModelValue: string | number = enabledChildren[0].props.tabValue;
-    enabledChildren.forEach((child) => {
+    let newModelValue: string | number = get(modelValue) || 0;
+    enabledChildren.forEach((child, index) => {
       const props = child.props as TabProps;
+      if (!onlyLink && index === 0 && props.tabValue) {
+        newModelValue = props.tabValue;
+      }
       if (props.link !== false && props.to && isPathMatch(props.to, props)) {
         newModelValue = props.to;
       }
     });
     updateModelValue(newModelValue);
   }
   keepActiveTabVisible();
+};
+
+onMounted(() => {
+  if (get(modelValue) !== undefined) {
+    return;
+  }
+  applyNewValue();
+});
+
+watch(route, () => {
+  applyNewValue(true);
 });
 
 const css = useCssModule();
@@ -119,12 +176,35 @@ const { arrivedState, x, y } = useScroll(bar, { behavior: 'smooth' });
 
 const { top, bottom, left, right } = toRefs(arrivedState);
 
-const showArrows = computed(() => {
-  if (!get(vertical)) {
-    return get(wrapperWidth) > get(width);
+const showArrows: Ref<boolean> = ref(false);
+const { trigger: triggerHorizontal, stop: stopHorizontal } = watchTriggerable(
+  [wrapperWidth, width],
+  ([ww, w]) => {
+    set(showArrows, ww > w);
+  },
+  {
+    eventFilter: throttleFilter(50),
+  },
+);
+
+const { trigger: triggerVertical, stop: stopVertical } = watchTriggerable(
+  [wrapperHeight, height],
+  ([wh, h]) => {
+    set(showArrows, wh > h);
+  },
+  {
+    eventFilter: throttleFilter(500),
+  },
+);
+
+watchImmediate(vertical, (vertical) => {
+  if (vertical) {
+    triggerVertical();
+    stopHorizontal();
+  } else {
+    triggerHorizontal();
+    stopVertical();
   }
-
-  return get(wrapperHeight) > get(height);
 });
 
 const prevArrowDisabled = computed(() => {
@@ -159,50 +239,6 @@ const onNextSliderClick = () => {
   }
 };
 
-const keepActiveTabVisible = () => {
-  nextTick(() => {
-    if (!get(showArrows)) {
-      return;
-    }
-
-    const elem = get(wrapper);
-    const barElem = get(bar);
-    if (elem) {
-      const activeTab = (elem.querySelector('.active-tab') ??
-        elem.querySelector('.active-tab-link')) as HTMLElement;
-
-      if (!activeTab || !barElem) {
-        return;
-      }
-
-      const childLeft = activeTab.offsetLeft - elem.offsetLeft;
-      const childTop = activeTab.offsetTop - elem.offsetTop;
-      const childWidth = activeTab.offsetWidth;
-      const childHeight = activeTab.offsetHeight;
-      const parentScrollLeft = barElem.scrollLeft;
-      const parentScrollTop = barElem.scrollTop;
-      const parentWidth = barElem.offsetWidth;
-      const parentHeight = barElem.offsetHeight;
-
-      const scrollLeft = Math.max(
-        Math.min(parentScrollLeft, childLeft),
-        childLeft + childWidth - parentWidth,
-      );
-
-      const scrollTop = Math.max(
-        Math.min(parentScrollTop, childTop),
-        childTop + childHeight - parentHeight,
-      );
-
-      barElem.scrollTo({
-        left: scrollLeft,
-        top: scrollTop,
-        behavior: 'smooth',
-      });
-    }
-  });
-};
-
 useResizeObserver(bar, () => {
   keepActiveTabVisible();
 });

diff --git a/src/style.scss b/src/style.scss
@@ -18,4 +18,8 @@ html, body, html * {
     -ms-overflow-style: none; /* IE and Edge */
     scrollbar-width: none; /* Firefox */
   }
+
+  .border-default {
+    @apply border-rui-grey-200 dark:border-rui-grey-800;
+  }
 }