Running dashboard, help center

2024-01-25 12:32:50 -08:00
parent 1fe3960285
commit a1b6b0c06c
13 changed files with 86 additions and 68 deletions
@@ -0,0 +1,99 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'WootTabs',
+  props: {
+    index: {
+      type: Number,
+      default: 0,
+    },
+    border: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return { hasScroll: false };
+  },
+  created() {
+    window.addEventListener('resize', this.computeScrollWidth);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.computeScrollWidth);
+  },
+  mounted() {
+    this.computeScrollWidth();
+  },
+  methods: {
+    computeScrollWidth() {
+      const tabElement = this.$el.getElementsByClassName('tabs')[0];
+      this.hasScroll = tabElement.scrollWidth > tabElement.clientWidth;
+    },
+    onScrollClick(direction) {
+      const tabElement = this.$el.getElementsByClassName('tabs')[0];
+      let scrollPosition = tabElement.scrollLeft;
+      if (direction === 'left') {
+        scrollPosition -= 100;
+      } else {
+        scrollPosition += 100;
+      }
+      tabElement.scrollTo({
+        top: 0,
+        left: scrollPosition,
+        behavior: 'smooth',
+      });
+    },
+    createScrollButton(createElement, direction) {
+      if (!this.hasScroll) {
+        return false;
+      }
+      return createElement(
+        'button',
+        {
+          class: 'tabs--scroll-button button clear secondary button--only-icon',
+          on: { click: () => this.onScrollClick(direction) },
+        },
+        [
+          createElement('fluent-icon', {
+            props: { icon: `chevron-${direction}`, size: 16 },
+          }),
+        ]
+      );
+    },
+  },
+  render(createElement) {
+    const Tabs = this.$slots.default
+      .filter(
+        node =>
+          node.componentOptions &&
+          node.componentOptions.tag === 'woot-tabs-item'
+      )
+      .map((node, index) => {
+        const data = node.componentOptions.propsData;
+        data.index = index;
+        return node;
+      });
+    const leftButton = this.createScrollButton(createElement, 'left');
+    const rightButton = this.createScrollButton(createElement, 'right');
+    return createElement(
+      'div',
+      {
+        class: {
+          'tabs--container--with-border': this.border,
+          'tabs--container': true,
+        },
+      },
+      [
+        leftButton,
+        createElement(
+          'ul',
+          {
+            class: { tabs: true, 'tabs--with-scroll': this.hasScroll },
+          },
+          Tabs
+        ),
+        rightButton,
+      ]
+    );
+  },
+});