@veritree/ui 0.27.0 → 0.28.0-1

package/src/components/Button/VTButton.vue

@@ -1,58 +1,21 @@
 <template>
-  <!-- :href="href" -->
   <component
     :is="tag"
     :to="to"
     :href="href || to"
     :type="type"
     :disabled="isDisabled"
-    :class="[
-      // default styles
-      headless
-        ? 'button'
-        : isIcon
-        ? 'inline-flex items-center justify-center rounded-full [&_svg]:max-h-full [&_svg]:max-w-full'
-        : 'relative inline-flex rounded border border-solid px-4 text-sm font-semibold leading-none no-underline transition-all',
-      // variant styles
-      headless
-        ? `button--${variant}`
-        : isPrimary
-        ? 'bg-secondary-400 hover:bg-secondary-500 focus:bg-secondary-600 active:bg-secondary-600 border-transparent text-white disabled:bg-gray-200 disabled:text-gray-400'
-        : isSecondary
-        ? 'border-gray-400 bg-white text-gray-700 hover:bg-gray-100 hover:bg-gray-200 active:bg-gray-200 disabled:border-gray-300 disabled:text-gray-400'
-        : isTertiary
-        ? 'text-secondary-400 hover:text-secondary-500 focus:text-secondary-600 active:text-secondary-600 border-transparent disabled:text-gray-400'
-        : isIcon
-        ? 'text-primary-100 focus-within:bg-gray-200 hover:bg-gray-200 active:bg-gray-300'
-        : null,
-      // sizes styles
-      headless
-        ? `button--${size}`
-        : isLarge
-        ? isIcon
-          ? 'h-8 w-8'
-          : 'h-10'
-        : isSmall
-        ? isIcon
-          ? 'h-6 w-6 p-1'
-          : 'h-8'
-        : null,
-    ]"
-    v-on="$listeners"
+    :class="buttonClasses"
   >
     <VTSpinner v-if="busy" class="absolute inset-0 m-auto" />
-    <span
-      :class="[
-        headless ? null : 'mx-auto inline-flex items-center gap-2 self-center',
-        headless && busy ? 'button--busy' : busy ? 'invisible' : null,
-      ]"
-    >
+    <span :class="spanClasses">
       <slot></slot>
     </span>
   </component>
 </template>
 
 <script>
+import { resolveComponent } from 'vue';
 import VTSpinner from '../Spinner/VTSpinner.vue';
 
 export default {
@@ -64,64 +27,149 @@ export default {
     variant: {
       type: String,
       default: 'primary',
+      validator(value) {
+        return ['primary', 'secondary', 'tertiary', 'dark', 'icon'].includes(
+          value,
+        );
+      },
     },
+
     size: {
       type: String,
       default: 'large',
+      validator(value) {
+        return ['small', 'large'].includes(value);
+      },
     },
+
     to: {
       type: [String, Object],
       default: null,
     },
+
     href: {
       type: [String, Object],
       default: null,
     },
+
     headless: {
       type: Boolean,
       default: false,
     },
+
     busy: {
       type: Boolean,
       default: false,
     },
+
     disabled: {
       type: Boolean,
       default: false,
     },
+
+    appearance: {
+      type: String,
+      default: 'normal',
+      validator(value) {
+        return ['normal', 'ghost'].includes(value);
+      },
+    },
+
+    version: {
+      type: String,
+      default: '1',
+    },
   },
 
   computed: {
-    isPrimary() {
-      return this.variant === 'primary';
-    },
+    buttonClasses() {
+      const classes = [];
+
+      if (this.headless) {
+        classes.push('button');
+        classes.push(`button--${this.variant}`);
+        classes.push(`button--${this.size}`);
+      } else {
+        if (!this.isIcon) {
+          classes.push('button-base');
+        }
+
+        if (this.variant === 'primary') {
+          classes.push('button--primary');
+        }
 
-    isSecondary() {
-      return this.variant === 'secondary';
+        if (this.variant === 'secondary') {
+          classes.push('button--secondary');
+        }
+
+        if (this.variant === 'tertiary') {
+          classes.push('button--tertiary');
+        }
+
+        if (this.variant === 'dark') {
+          classes.push('button--dark');
+        }
+
+        if (this.isIcon) {
+          classes.push('button--icon');
+        }
+
+        if (this.isGhost) {
+          classes.push('button--ghost');
+        }
+
+        if (this.size === 'large') {
+          classes.push(this.isIcon ? 'h-8 w-8' : 'button--large');
+        } else if (this.size === 'small') {
+          classes.push(this.isIcon ? 'h-6 w-6 p-1' : 'button--small');
+        }
+
+        if (this.version && this.version !== '1') {
+          classes.push(`button--version-${this.version}`);
+        }
+      }
+
+      if (this.isDisabled && this.isIcon) {
+        classes.push('[&_svg]:text-gray-400');
+      }
+
+      return classes.filter(Boolean);
     },
 
-    isTertiary() {
-      return this.variant === 'tertiary';
+    spanClasses() {
+      const classes = [];
+
+      if (!this.headless) {
+        classes.push(
+          'mx-auto inline-flex items-center gap-2 self-center pointer-events-none',
+        );
+      }
+
+      if (this.headless && this.busy) {
+        classes.push('button--busy');
+      } else if (this.busy) {
+        classes.push('invisible');
+      }
+
+      return classes.filter(Boolean);
     },
 
     isIcon() {
       return this.variant === 'icon';
     },
 
-    isLarge() {
-      return this.size === 'large';
-    },
-
-    isSmall() {
-      return this.size === 'small';
+    isDisabled() {
+      return (this.disabled || this.busy) || undefined;
     },
 
-    isDisabled() {
-      return this.disabled || this.busy;
+    isGhost() {
+      return this.appearance === 'ghost';
     },
 
     tag() {
-      return this.href ? 'a' : this.to ? 'NuxtLink' : 'button';
+      if (this.href) return 'a';
+      if (this.to) return resolveComponent('NuxtLink');
+      return 'button';
     },
 
     type() {

package/src/components/Carousel/VTCarousel.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="relative overflow-hidden">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VTCarousel',
+
+  provide() {
+    return {
+      apiCarousel: () => {
+        const registerElTracker = (elTracker) => {
+          if (!elTracker) return;
+          this.elTracker = elTracker;
+        };
+
+        return {
+          elTracker: this.elTracker,
+          hasContentOverflow: this.hasContentOverflow,
+          hasScrolledToLeftEnd: this.hasScrolledToLeftEnd,
+          hasScrolledToLeftStart: this.hasScrolledToLeftStart,
+          isLeftEndReached: this.isLeftEndReached,
+          isLeftStartReached: this.isLeftStartReached,
+          onObserveTracker: this.onObserveTracker,
+          registerElTracker,
+        };
+      },
+    };
+  },
+
+  data() {
+    return {
+      elTracker: null,
+      hasContentOverflow: false,
+      hasScrolledToLeftEnd: false,
+      hasScrolledToLeftStart: true,
+    };
+  },
+
+  mounted() {
+    this.hasContentOverflow = this.isContentOverflowing();
+  },
+
+  methods: {
+    onObserveTracker() {
+      this.hasContentOverflow = this.isContentOverflowing();
+    },
+
+    isLeftEndReached() {
+      const { offsetWidth, scrollLeft, scrollWidth } = this.elTracker;
+      const distanceToLeftEnd = Math.abs(
+        scrollWidth - offsetWidth - scrollLeft,
+      );
+      this.hasScrolledToLeftEnd = distanceToLeftEnd <= 10;
+    },
+
+    isLeftStartReached() {
+      const { scrollLeft } = this.elTracker;
+      this.hasScrolledToLeftStart = scrollLeft === 0;
+    },
+
+    isContentOverflowing() {
+      return this.elTracker.offsetWidth !== this.elTracker.scrollWidth;
+    },
+  },
+};
+</script>

package/src/components/Carousel/VTCarouselBackward.vue

@@ -0,0 +1,36 @@
+<template>
+  <div
+    :class="[visible ? 'pointer-events-none opacity-0' : 'opacity-100']"
+    class="flex items-center justify-start transition-opacity duration-100"
+  >
+    <slot :scroll-backward="scrollBackward" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VTCarouselBackward',
+
+  inject: ['apiCarousel'],
+
+  computed: {
+    carousel() {
+      return this.apiCarousel();
+    },
+
+    elTracker() {
+      return this.carousel.elTracker;
+    },
+
+    visible() {
+      return this.carousel.hasScrolledToLeftStart;
+    },
+  },
+
+  methods: {
+    scrollBackward() {
+      this.elTracker.scrollLeft -= 200;
+    },
+  },
+};
+</script>

package/src/components/Carousel/VTCarouselForward.vue

@@ -0,0 +1,38 @@
+<template>
+  <div
+    :class="[visible ? 'opacity-100' : 'pointer-events-none opacity-0']"
+    class="flex items-center justify-end transition-opacity duration-100"
+  >
+    <slot :scroll-forward="scrollForward" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VTCarouselForward',
+
+  inject: ['apiCarousel'],
+
+  computed: {
+    carousel() {
+      return this.apiCarousel();
+    },
+
+    elTracker() {
+      return this.carousel.elTracker;
+    },
+
+    visible() {
+      return (
+        this.carousel.hasContentOverflow && !this.carousel.hasScrolledToLeftEnd
+      );
+    },
+  },
+
+  methods: {
+    scrollForward() {
+      this.elTracker.scrollLeft += 200;
+    },
+  },
+};
+</script>

package/src/components/Carousel/VTCarouselTracker.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="relative flex snap-start overflow-x-scroll [&>*]:shrink-0">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VTCarouselTracker',
+
+  inject: ['apiCarousel'],
+
+  data() {
+    return {
+      mutationObserver: null,
+      resizeObserver: null,
+    };
+  },
+
+  beforeUnmount() {
+    if (!this.$el) {
+      return;
+    }
+
+    this.$el.removeEventListener('scroll', this.onScroll);
+    this.mutationObserver?.disconnect();
+    this.resizeObserver?.disconnect();
+  },
+
+  mounted() {
+    this.registerElTracker();
+    this.registerMutationObserver();
+    this.registerResizeObserver();
+    this.addEventListeners();
+  },
+
+  methods: {
+    registerElTracker() {
+      this.apiCarousel().registerElTracker(this.$el);
+    },
+
+    registerResizeObserver() {
+      this.resizeObserver = new ResizeObserver(() => {
+        this.apiCarousel().onObserveTracker();
+      });
+
+      this.resizeObserver.observe(this.$el);
+    },
+
+    registerMutationObserver() {
+      this.mutationObserver = new MutationObserver(() => {
+        this.apiCarousel().onObserveTracker();
+      });
+
+      this.mutationObserver.observe(this.$el, {
+        childList: true,
+      });
+    },
+
+    addEventListeners() {
+      this.$el.addEventListener('scroll', this.onScroll);
+    },
+
+    onScroll() {
+      this.apiCarousel().isLeftEndReached();
+      this.apiCarousel().isLeftStartReached();
+    },
+  },
+};
+</script>
+
+<style scoped>
+div {
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+</style>

package/src/components/Checkbox/VTCheckbox.vue

@@ -0,0 +1,134 @@
+<template>
+  <input
+    type="checkbox"
+    v-model="modelValueComputed"
+    :value="value"
+    :checked="checked"
+    :disabled="disabled"
+    :indeterminate="indeterminate"
+    :class="[
+      headless
+        ? 'input-checkbox'
+        : 'h-[18px] w-[18px] shrink-0 appearance-none rounded border border-solid bg-no-repeat align-middle focus-visible:ring-2 focus-visible:ring-white',
+      headless
+        ? `input-checkbox--${variant}`
+        : isError
+        ? 'border-error-300'
+        : 'border-gray-300',
+      checked
+        ? headless
+          ? 'input-checkbox--checked'
+          : 'border-secondary-300 bg-secondary-300'
+        : null,
+      disabled
+        ? headless
+          ? 'input-checkbox--disabled'
+          : 'pointer-events-none bg-gray-100'
+        : null,
+      indeterminate
+        ? headless
+          ? 'input-checkbox--indeterminate'
+          : 'border-secondary-200 bg-secondary-200'
+        : null,
+    ]"
+    v-bind="$attrs"
+    @change="onChange"
+  />
+</template>
+
+<script>
+/**
+ * Notes:
+ * - Not tested with an array yet
+ */
+export default {
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    indeterminate: {
+      type: Boolean,
+      default: false,
+    },
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    modelValue: {
+      type: [Array, Boolean],
+      default: null,
+    },
+    variant: {
+      type: [String, Object, Function],
+      default: '',
+    },
+    value: {
+      type: [Boolean, Object],
+      default: null,
+    },
+  },
+
+  data() {
+    return {
+      checked: false,
+    };
+  },
+
+  computed: {
+    modelValueComputed: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit('update:modelValue', value);
+      },
+    },
+
+    isError() {
+      return this.variant === 'error';
+    },
+  },
+
+  watch: {
+    indeterminate(newVal) {
+      this.checked = !newVal;
+      this.$el.indeterminate = newVal;
+    },
+
+    checked(newVal) {
+      if (newVal) {
+        this.$el.indeterminate = false;
+        this.$emit('update:indeterminate', false);
+      }
+    },
+  },
+
+  mounted() {
+    if (this.indeterminate) {
+      this.$el.indeterminate = this.indeterminate;
+    }
+  },
+
+  methods: {
+    onChange(event) {
+      this.checked = event.target.checked;
+    },
+  },
+};
+</script>
+
+<style scoped>
+input:not(.input-checkbox):checked,
+input:not(.input-checkbox):indeterminate {
+  background-size: cover;
+}
+
+input:not(.input-checkbox):checked {
+  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.00016 16.17L4.83016 12L3.41016 13.41L9.00016 19L21.0002 7.00003L19.5902 5.59003L9.00016 16.17Z' fill='%23ffffff'/%3E%3Cpath d='M9.00016 16.17L4.83016 12L3.41016 13.41L9.00016 19L21.0002 7.00003L19.5902 5.59003L9.00016 16.17Z' fill='%23ffffff' /%3E%3C/svg%3E%0A");
+}
+
+input:not(.input-checkbox):indeterminate {
+  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 13H5V11H19V13Z' fill='%23ffffff'/%3E%3Cpath d='M19 13H5V11H19V13Z' fill='%23ffffff'/%3E%3C/svg%3E%0A");
+}
+</style>

package/src/components/Checkbox/VTCheckboxLabel.vue

@@ -0,0 +1,3 @@
+<template>
+  <label class="flex items-start gap-2"><slot /></label>
+</template>

package/src/components/Checkbox/VTCheckboxText.vue

@@ -0,0 +1,20 @@
+<template>
+  <component :is="as" :class="[headless ? 'input-checkbox-text' : 'text-sm']"
+    ><slot />
+  </component>
+</template>
+
+<script>
+export default {
+  props: {
+    as: {
+      type: String,
+      default: 'div',
+    },
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>

package/src/components/Chip/VTChip.vue

@@ -0,0 +1,29 @@
+<template>
+  <div
+    class="Chip flex shrink-0 items-center gap-2 rounded-full bg-gray-200 py-0.5 pl-2 pr-[3px] text-sm text-gray-800"
+  >
+    <span class="Chip-text truncate whitespace-nowrap"><slot></slot></span>
+    <button
+      class="Chip-button shrink-0 text-gray-500 hover:text-gray-600"
+      @click.stop.prevent="onCancel"
+    >
+      <IconCancel class="Chip-button__icon h-5 w-5" />
+    </button>
+  </div>
+</template>
+
+<script>
+import { IconCancel } from '@veritree/icons';
+
+export default {
+  name: 'VTChip',
+
+  components: { IconCancel },
+
+  methods: {
+    onCancel() {
+      this.$emit('cancel');
+    },
+  },
+};
+</script>