@veritree/ui 0.27.0 → 0.28.0-1

package/src/components/ProgressBar/VTProgressBar.vue

@@ -3,22 +3,21 @@
     :class="[
       headless
         ? 'progress-bar'
-        : 'relative min-h-[10px] w-full overflow-hidden rounded-full bg-gray-200',
+        : 'relative min-h-[12px] w-full flex items-stretch overflow-hidden rounded bg-gray-200',
     ]"
     role="progressbar"
     aria-valuemin="0"
-    aria-valuemax="100"
+    :aria-valuemax="max"
     :aria-valuenow="value"
     :aria-label="label"
   >
-    <div
-      :class="[
-        headless
-          ? 'progress-bar__indicator'
-          : 'absolute left-0 h-full bg-secondary-300 transition-all',
-      ]"
-      :style="{ width: `${value}%` }"
-    ></div>
+    <slot>
+      <VTProgressBarIndicator
+        :headless="headless"
+        :percentage="percentageComputed"
+        :variant="variant"
+      />
+    </slot>
   </div>
 </template>
 
@@ -37,6 +36,32 @@ export default {
       type: [String, Number],
       default: 0,
     },
+    max: {
+      type: [String, Number],
+      default: 100,
+    },
+    percentage: {
+      type: [String, Number],
+      default: null,
+    },
+    rounded: {
+      type: String,
+      default: 'rounded-full',
+    },
+    variant: {
+      type: String,
+      default: 'default',
+    },
+  },
+
+  computed: {
+    percentageComputed() {
+      if (typeof this.percentage !== 'undefined' && this.percentage !== null) {
+        return this.percentage;
+      }
+
+      return (this.value / this.max) * 100;
+    },
   },
 };
 </script>

package/src/components/ProgressBar/VTProgressBarIndicator.vue

@@ -0,0 +1,53 @@
+<template>
+  <div
+    :class="[
+      headless
+        ? 'progress-bar__indicator'
+        : `${backgroundComputed} min-h-min transition-all duration-500`,
+    ]"
+    :style="{ width: `${percentage}%` }"
+  ></div>
+</template>
+
+<script>
+export default {
+  name: 'VTProgressBarIndicator',
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    percentage: {
+      type: [String, Number],
+      default: null,
+    },
+    variant: {
+      type: String,
+      default: 'default',
+    },
+  },
+
+  computed: {
+    backgroundComputed() {
+      if (this.variant === 'default') {
+        return 'bg-secondary-300';
+      }
+
+      if (this.variant === 'error') {
+        return 'bg-error-500';
+      }
+
+      if (this.variant === 'warning') {
+        return 'bg-warning-500';
+      }
+
+      if (this.variant === 'dark') {
+        return 'bg-gray-800';
+      }
+
+      return 'bg-secondary-300';
+    },
+  },
+};
+</script>

package/src/components/ScrollShadows/VTScrollShadows.vue

@@ -0,0 +1,76 @@
+<template>
+  <component :is="tag" :class="`scroll-shadows-${orientation}`">
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'VTScrollShadows',
+
+  props: {
+    tag: {
+      type: String,
+      default: 'div',
+    },
+    orientation: {
+      type: String,
+      default: 'vertical', // horizontal
+    },
+  },
+};
+</script>
+
+<style scoped>
+.scroll-shadows-vertical {
+  background:
+    /* Shadow Cover TOP */
+    linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top,
+    /* Shadow Cover BOTTOM */ linear-gradient(rgba(255, 255, 255, 0), white 70%)
+      center bottom,
+    /* Shadow TOP */
+      radial-gradient(
+        farthest-side at 50% 0,
+        rgba(0, 0, 0, 0.1),
+        rgba(0, 0, 0, 0)
+      )
+      center top,
+    /* Shadow BOTTOM */
+      radial-gradient(
+        farthest-side at 50% 100%,
+        rgba(0, 0, 0, 0.1),
+        rgba(0, 0, 0, 0)
+      )
+      center bottom;
+
+  background-repeat: no-repeat;
+  background-size:
+    100% 30px,
+    100% 30px,
+    100% 8px,
+    100% 8px;
+  background-attachment: local, local, scroll, scroll;
+}
+
+.scroll-shadows-horizontal {
+  background:
+    linear-gradient(90deg, white 30%, rgba(255, 255, 255, 0)),
+    linear-gradient(90deg, rgba(255, 255, 255, 0), white 70%) 0 100%,
+    radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.2), white),
+    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), white) 0 100%;
+
+  background-repeat: no-repeat;
+  background-color: white;
+  background-position:
+    top left,
+    top right,
+    top left,
+    top right;
+  background-size:
+    10px 100%,
+    10px 100%,
+    5px 100%,
+    5px 100%;
+  background-attachment: local, local, scroll, scroll;
+}
+</style>

package/src/components/Separator/VTSeparator.vue

@@ -0,0 +1,13 @@
+<template>
+  <div
+    class="h-px bg-border bg-gray-200 shrink-0 w-full"
+    data-orientation="horizontal"
+    role="separator"
+  />
+</template>
+
+<script>
+export default {
+  name: 'VTSeparator',
+};
+</script>

package/src/components/Switch/VTSwitch.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="relative flex w-11 h-6 px-0.5 items-center">
+    <input
+      ref="input"
+      :id="id"
+      :checked="checkedComputed"
+      :disabled="disabled"
+      :value="valueComputed"
+      class="absolute inset-0 appearance-none peer rounded-full transition-colors bg-gray-400 checked:bg-secondary-300 disabled:bg-gray-200"
+      role="switch"
+      type="checkbox"
+      @change="onChange"
+    />
+    <span
+      class="size-5 rounded-full bg-white transition-transform translate-x-0 peer-checked:translate-x-full pointer-events-none peer-disabled:bg-gray-400"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VTSwitch',
+
+  props: {
+    id: {
+      type: String,
+      default: null,
+    },
+    disabled: {
+      type: Boolean,
+      default: null,
+    },
+    modelValue: {
+      type: [Array, Boolean, Number, String],
+      default: false,
+    },
+  },
+
+  computed: {
+    checkedComputed() {
+      return this.modelValue;
+    },
+
+    valueComputed: {
+      get() {
+        return this.modelValue;
+      },
+      set(newVal) {
+        this.$emit('update:modelValue', newVal);
+      },
+    },
+  },
+
+  methods: {
+    onChange(event) {
+      this.valueComputed = !Boolean(this.valueComputed);
+      this.$emit('change', event);
+    },
+  },
+};
+</script>

package/src/components/Tabs/VTTab.vue

@@ -18,11 +18,11 @@
     ]"
     role="tab"
     type="button"
-    @click.stop="onClick"
+    @click.prevent.stop="onClick"
     @keydown="onKeyDown"
     @blur="onBlur"
   >
-    <slot></slot>
+    <slot :selected="selected"></slot>
   </button>
 </template>
 
@@ -32,7 +32,7 @@ import { keys } from '../../utils/keyboard';
 export default {
   name: 'VTTabItem',
 
-  inject: ['api'],
+  inject: ['apiTabs'],
 
   props: {
     headless: {
@@ -43,7 +43,7 @@ export default {
 
   data() {
     return {
-      api: this.api(),
+      api: this.apiTabs(),
       index: null,
       indexFocus: null,
       selected: false,
@@ -60,7 +60,7 @@ export default {
     this.api.registerTab(this);
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.api.unregisterTab(this.index);
   },
 
@@ -106,6 +106,7 @@ export default {
     onClick() {
       this.api.selectTab(this.index);
       this.$emit('change');
+      this.$emit('click');
     },
 
     onKeyDown(event) {

package/src/components/Tabs/VTTabGroup.vue

@@ -5,10 +5,10 @@
 </template>
 
 <style scoped>
-.TabGroup.vertical{
+.TabGroup.vertical {
   display: flex;
 }
-.TabGroup.vertical .TabList{
+.TabGroup.vertical .TabList {
   display: flex;
   flex-direction: column;
 }
@@ -17,29 +17,87 @@
 <script>
 export default {
   name: 'VTTabGroup',
+
   props: {
-      vertical: {
-          type: Boolean,
-          default: false
-      }
+    activeIndex: {
+      type: Number,
+      default: null,
+    },
+    vertical: {
+      type: Boolean,
+      default: false,
+    },
   },
+
   provide() {
     return {
-      api: () => {
+      apiTabs: () => {
+        /**
+         * Registers a tab.
+         * This function adds a tab to the list of tabs managed by the provider.
+         * If there is an active index set, it checks if the newly registered tab matches the active index,
+         * and if so, selects the tab.
+         * If no active index is set, it selects the tab if its index is 0.
+         * @param {VueComponent} tab - The tab to register.
+         * @returns {void}
+         */
         const registerTab = (tab) => {
           _register(this.tabs, tab);
-          if (tab.index === 0) tab.select();
+
+          if (this.activeIndex) {
+            if (tab.index === this.activeIndex) {
+              tab.select();
+            }
+
+            return;
+          }
+
+          if (tab.index === 0) {
+            tab.select();
+          }
         };
 
+        /**
+         * Registers a tab panel.
+         * This function adds a tab panel to the list of tab panels managed by the provider.
+         * If there is an active index set, it checks if the newly registered tab panel matches the active index,
+         * and if so, shows the tab panel.
+         * If no active index is set, it shows the tab panel if its index is 0.
+         * @param {VueComponent} tabPanel - The tab panel to register.
+         * @returns {void}
+         */
         const registerTabPanel = (tabPanel) => {
           _register(this.tabPanels, tabPanel);
-          if (tabPanel.index === 0) tabPanel.show();
+
+          if (this.activeIndex) {
+            if (tabPanel.index === this.activeIndex) {
+              tabPanel.show();
+            }
+
+            return;
+          }
+
+          if (tabPanel.index === 0) {
+            tabPanel.show();
+          }
         };
 
+        /**
+         * Unregisters a tab.
+         * This function removes a tab from the list of tabs managed by the provider.
+         * @param {string} id - The ID of the tab to unregister.
+         * @returns {void}
+         */
         const unregisterTab = (id) => {
           _unregister(this.tabs, id);
         };
 
+        /**
+         * Unregisters a tab panel.
+         * This function removes a tab panel from the list of tab panels managed by the provider.
+         * @param {string} id - The ID of the tab panel to unregister.
+         * @returns {void}
+         */
         const unregisterTabPanel = (id) => {
           _unregister(this.tabPanels, id);
         };
@@ -111,5 +169,26 @@ export default {
       return this.tabs.length;
     },
   },
+
+  watch: {
+    activeIndex(newVal, oldVal) {
+      const newTab = this.tabs.find((tab) => tab.index === newVal);
+      const newTabPanel = this.tabPanels.find(
+        (tabPanel) => tabPanel.index === newVal
+      );
+      const oldTab = this.tabs.find((tab) => tab.index === oldVal);
+      const oldTabPanel = this.tabPanels.find(
+        (tabPanel) => tabPanel.index === oldVal
+      );
+
+      if (newTab && newTabPanel && oldTab && oldTabPanel) {
+        oldTab.unselect();
+        oldTabPanel.hide();
+
+        newTab.select();
+        newTabPanel.show();
+      }
+    },
+  },
 };
 </script>

package/src/components/Tabs/VTTabPanel.vue

@@ -14,11 +14,10 @@
 export default {
   name: 'VTTabPanel',
 
-  inject: ['api'],
+  inject: ['apiTabs'],
 
   data() {
     return {
-      api: this.api(),
       index: null,
       visible: false,
     };
@@ -31,11 +30,11 @@ export default {
   },
 
   mounted() {
-    this.api.registerTabPanel(this);
+    this.apiTabs().registerTabPanel(this);
   },
 
-  beforeDestroy() {
-    this.api.unregisterTabPanel(this.id);
+  beforeUnmount() {
+    this.apiTabs().unregisterTabPanel(this.id);
   },
 
   methods: {