@veritree/ui 0.27.0 → 0.28.0-1

package/src/components/Toast/VTToastItem.vue

@@ -0,0 +1,180 @@
+<template>
+  <transition
+    appear
+    :appear-class="enterClass"
+    appear-active-class="duration-300 ease-out"
+    appear-to-class="translate-y-0 opacity-100"
+    enter-active-class="duration-300 ease-out"
+    :enter-class="enterClass"
+    enter-to-class="translate-y-0 opacity-100"
+    leave-active-class="duration-300 ease-in"
+    :leave-to-class="leaveClass"
+    @after-leave="onAfterLeave"
+  >
+    <component
+      :is="as"
+      v-if="visible"
+      :id="id"
+      :class="[
+        headless
+          ? 'toast-item'
+          : 'grid grid-cols-[auto_1fr_auto] items-center gap-3 rounded border border-solid pt-2 pb-2.5 px-3 shadow-lg bg-gray-800 ',
+        headless ? `toast-item--${variant}` : null,
+      ]"
+      role="alert"
+      aria-live="polite"
+      @mouseenter="pauseTimer"
+      @mouseleave="resumeTimer"
+    >
+      <slot></slot>
+    </component>
+  </transition>
+</template>
+
+<script>
+import { genId } from '../../utils/ids';
+
+export default {
+  name: 'VTToastItem',
+
+  inject: ['apiToast'],
+
+  provide() {
+    return {
+      apiToastItem: () => {
+        return {
+          componentId: this.componentId,
+          variant: this.variant,
+          close: this.dismiss,
+        };
+      },
+    };
+  },
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    variant: {
+      type: String,
+      default: 'default',
+      validator: (value) => {
+        return ['default', 'success', 'error', 'warning'].includes(value);
+      },
+    },
+    duration: {
+      type: Number,
+      default: 5000,
+    },
+    as: {
+      type: String,
+      default: 'div',
+    },
+  },
+
+  data() {
+    return {
+      componentId: genId(),
+      visible: true,
+      timer: null,
+    };
+  },
+
+  computed: {
+    id() {
+      return `toast-item-${this.componentId}`;
+    },
+
+    isSuccess() {
+      return this.variant === 'success';
+    },
+
+    isError() {
+      return this.variant === 'error';
+    },
+
+    isWarning() {
+      return this.variant === 'warning';
+    },
+
+    position() {
+      return this.apiToast().position;
+    },
+
+    enterClass() {
+      // Slide from top/bottom edge based on position
+      if (this.position.includes('top')) {
+        return '-translate-y-full opacity-0';
+      } else if (this.position.includes('bottom')) {
+        return 'translate-y-full opacity-0';
+      }
+
+      return 'opacity-0';
+    },
+
+    leaveClass() {
+      // Slide to top/bottom edge based on position
+      if (this.position.includes('top')) {
+        return '-translate-y-full opacity-0';
+      } else if (this.position.includes('bottom')) {
+        return 'translate-y-full opacity-0';
+      }
+
+      return 'opacity-0';
+    },
+  },
+
+  mounted() {
+    this.apiToast().registerItem(this);
+
+    if (this.duration > 0) {
+      this.startTimer();
+    }
+  },
+
+  beforeDestroy() {
+    this.clearTimer();
+
+    // Only unregister if not already hidden (avoid double unregister)
+    if (this.visible) {
+      this.apiToast().unregisterItem(this);
+    }
+  },
+
+  methods: {
+    startTimer() {
+      if (this.duration > 0) {
+        this.timer = setTimeout(() => {
+          this.dismiss();
+        }, this.duration);
+      }
+    },
+
+    clearTimer() {
+      if (this.timer) {
+        clearTimeout(this.timer);
+        this.timer = null;
+      }
+    },
+
+    pauseTimer() {
+      this.clearTimer();
+    },
+
+    resumeTimer() {
+      this.startTimer();
+    },
+
+    dismiss() {
+      // this.visible = false;
+      this.$emit('close');
+    },
+
+    onAfterLeave() {
+      // Unregister from parent after transition completes
+      this.apiToast().unregisterItem(this);
+    },
+  },
+};
+</script>

package/src/components/Toast/VTToastTitle.vue

@@ -0,0 +1,34 @@
+<template>
+  <component
+    :is="as"
+    :id="id"
+    :class="[headless ? 'toast-title' : 'text-sm font-semibold text-white']"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'VTToastTitle',
+
+  inject: ['apiToastItem'],
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    as: {
+      type: String,
+      default: 'div',
+    },
+  },
+
+  computed: {
+    id() {
+      return `toast-title-${this.apiToastItem().componentId}`;
+    },
+  },
+};
+</script>

package/src/components/Tooltip/VTTooltipTrigger.vue

@@ -2,9 +2,8 @@
   <div
     :id="id"
     :aria-describedby="ariaDescribedBy"
-    class="inline-flex"
     @mouseenter="onMouseenter"
-    @mouseleave="onMouseleave"
+    @mouseleave="onmouseout"
   >
     <slot />
   </div>
@@ -55,7 +54,7 @@ export default {
       }, this.apiTooltip().delayDuration);
     },
 
-    onMouseleave() {
+    onmouseout() {
       clearTimeout(tooltipTriggerTimeout);
       this.cancel();
     },
@@ -75,8 +74,7 @@ export default {
       // delay stop propagation to close other visible
       // dropdowns and delay click event to control
       // this dropdown visibility
-      setTimeout(() => e.stopImmediatePropagation(), 50);
-      setTimeout(() => this.showComponentContent(), 100);
+      this.showComponentContent();
     },
 
     cancel() {

package/src/components/Transitions/FadeInOut.vue

@@ -1,10 +1,10 @@
 <template>
   <transition
     enter-active-class="duration-300 ease-out"
-    enter-class="transform opacity-0"
+    enter-from-class="transform opacity-0"
     enter-to-class="opacity-100"
     leave-active-class="duration-300 ease-in"
-    leave-class="opacity-100"
+    leave-from-class="opacity-100"
     leave-to-class="transform opacity-0"
     @after-enter="afterEnter"
     @after-leave="afterLeave"

package/src/components/Utils/FloatingUi.vue

@@ -1,12 +1,12 @@
 <template>
-  <Portal>
+  <Teleport to="body">
     <transition
       enter-active-class="duration-200 ease-out"
-      enter-class="translate-y-[15px] opacity-0"
-      enter-to-class="translate-y-0 opacity-100"
+      :enter-from-class="transitionEnterClass"
+      :enter-to-class="transitionEnterToClass"
       leave-active-class="duration-200 ease-in"
-      leave-class="translate-y-0 opacity-100"
-      leave-to-class="translate-y-[15px] opacity-0"
+      :leave-from-class="transitionLeaveClass"
+      :leave-to-class="transitionLeaveToClass"
       @after-leave="hidden"
       @after-enter="shown"
     >
@@ -15,23 +15,19 @@
         :class="[
           headless
             ? `${this.component}-content`
-            : `shadow-300 absolute z-50 grid overflow-x-hidden rounded-md py-2 px-3 ${this.classes} ${this.portalClass}`,
+            : `absolute z-50 grid overflow-hidden rounded-md shadow-md  ${this.classes} ${this.portalClass}`,
         ]"
         v-bind="$attrs"
       >
         <slot />
       </div>
     </transition>
-  </Portal>
+  </Teleport>
 </template>
 
 <script>
-import { Portal } from '@linusborg/vue-simple-portal';
-
 export default {
-  components: {
-    Portal,
-  },
+  inheritAttrs: false,
 
   props: {
     component: {
@@ -46,6 +42,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    ariaActivedescendant: {
+      type: String,
+      default: null,
+    },
     portalClass: {
       type: [String, Function],
       default: null,
@@ -58,7 +58,25 @@ export default {
     },
 
     classes() {
-      return this.isTooltip ? 'bg-gray-800 text-sm text-white' : 'bg-white';
+      return this.isTooltip
+        ? 'bg-gray-800 text-sm text-white py-1 px-2'
+        : 'bg-white py-2 px-3';
+    },
+
+    transitionEnterClass() {
+      return this.isTooltip ? 'opacity-0' : 'translate-y-[15px] opacity-0';
+    },
+
+    transitionEnterToClass() {
+      return this.isTooltip ? 'opacity-100' : 'translate-y-0 opacity-100';
+    },
+
+    transitionLeaveClass() {
+      return this.transitionEnterToClass;
+    },
+
+    transitionLeaveToClass() {
+      return this.transitionEnterClass;
     },
   },
 

package/src/helpers/currency.js

@@ -0,0 +1,21 @@
+export const currencyFormatter = ({ locale = 'en-US', currency = 'USD' }) => {
+  return Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency,
+  });
+};
+
+export const getCurrencySymbol = (options) => {
+  const formatter = currencyFormatter(options);
+  const parts = formatter.formatToParts(0); // can be any number
+  const currency = parts.find((part) => part.type === 'currency');
+  const symbol = currency.value;
+
+  return removeLetters(symbol);
+};
+
+// Remove all letters (for example, change CA$ to $)
+const removeLetters = (value) => {
+  const lettersRegex = /[A-Za-z]/g;
+  return value.replaceAll(lettersRegex, '');
+};

package/src/utils/components.js

@@ -0,0 +1,18 @@
+/**
+ *
+ * @param {HTMLElement} el
+ * @param {HTMLElement} parent
+ */
+ export const scrollElementIntoView = (el, parent) => {
+  // this works better than scrollIntoView
+  if (parent.scrollHeight <= parent.clientHeight) return;
+
+  const scrollBottom = parent.clientHeight + parent.scrollTop;
+  const elBottom = el.offsetTop + el.offsetHeight;
+
+  if (elBottom > scrollBottom) {
+    parent.scrollTop = elBottom - parent.clientHeight;
+  } else if (el.offsetTop < parent.scrollTop) {
+    parent.scrollTop = el.offsetTop;
+  }
+};

package/src/utils/images.js

@@ -1,18 +1,37 @@
+/**
+ * Resizes an image by adjusting its width and returns the modified URL.
+ *
+ * This method processes image URLs from CloudFront CDN. If the URL is a valid
+ * string or object, it decodes the URL, adjusts the width in the `resize` edits,
+ * and returns the updated encoded URL. If no width is provided, a default value
+ * of 450 is used. If an error occurs, the original CDN URL is returned.
+ *
+ * @param {(string|object)} url - The URL of the image, either as a string or object.
+ * @param {number} [width=450] - The width to resize the image to (default is 450 if not specified).
+ *
+ * @returns {string} The updated image URL with the resized width, or the original URL if an error occurs.
+ */
 export const handleImageResizing = (url, width) => {
   // early exit if url is null for whatever reason
   if (!url) {
     return '';
   }
-  
+
   let cdn;
-  
+
   try {
-    if (typeof url === 'object') {
-      cdn = url.cdn_url;
-    }
+    // new code
+    if (typeof url === 'string' && url.includes('cloudfront.net/')) {
+      cdn = url;
+    } else {
+      // old code
+      if (typeof url === 'object') {
+        cdn = url.cdn_url;
+      }
 
-    if (typeof url === 'string') {
-      cdn = JSON.parse(url).cdn_url;
+      if (typeof url === 'string') {
+        cdn = JSON.parse(url).cdn_url;
+      }
     }
 
     const base64String = cdn.split('net/');
@@ -23,7 +42,7 @@ export const handleImageResizing = (url, width) => {
     // browsers.
     //
     // Details: https://developer.mozilla.org/en-US/docs/Web/API/atob
-      const decodedString = JSON.parse(atob(base64String[1]));
+    const decodedString = JSON.parse(atob(base64String[1]));
 
     width
       ? (decodedString.edits.resize.width = width)
@@ -37,8 +56,8 @@ export const handleImageResizing = (url, width) => {
     const encodedString = btoa(JSON.stringify(decodedString));
     const encodedUrl = `${firstPart}net/${encodedString}`;
 
-    return encodedUrl
-  } catch(error) {
-    console.error(`${error} in ${cdn}`);
+    return encodedUrl;
+  } catch (error) {
+    return cdn;
   }
-};
+};

package/src/components/Input/VTInput.vue

@@ -1,82 +0,0 @@
-<template>
-  <input
-    :class="classes"
-    class="form-control"
-    :data-theme="theme"
-    :type="type"
-    :value="value"
-    v-on="listeners"
-  />
-</template>
-
-<script>
-export default {
-  name: 'VTInput',
-
-  props: {
-    lazy: {
-      type: Boolean,
-      default: false,
-    },
-    type: {
-      type: String,
-      default: 'text',
-    },
-    theme: {
-      type: String,
-      default: null,
-      validator(value) {
-        return ['dark'].includes(value);
-      },
-    },
-    variant: {
-      type: [String, Object],
-      default: '',
-      validator(value) {
-        if (value === '' || typeof value === 'object') {
-          return true;
-        }
-
-        return ['success', 'warning', 'error'].includes(value);
-      },
-    },
-    value: {
-      type: [String, Number, Object, Array],
-      default: null,
-    },
-  },
-
-  computed: {
-    classes() {
-      const classes = {};
-
-      if (this.variant) {
-        classes[`form-control--${this.variant}`] = true;
-      }
-
-      return classes;
-    },
-
-    listeners() {
-      // `Object.assign` merges objects together to form a new object
-      return Object.assign(
-        {},
-        // We add all the listeners from the parent
-        this.$listeners,
-        // Then we can add custom listeners or override the
-        // behavior of some listeners.
-        {
-          // This ensures that the component works with v-model
-          input: (event) => {
-            if (this.lazy) return;
-            this.$emit('input', event.target.value);
-          },
-          blur: (event) => {
-            this.$emit('blur', event);
-          },
-        }
-      );
-    },
-  },
-};
-</script>

package/src/components/Input/VTInputDate.vue

@@ -1,36 +0,0 @@
-<template>
-  <VTInput v-model="date" type="date" />
-</template>
-
-<script>
-import VTInput from './VTInput.vue';
-
-export default {
-  name: 'VTInputDate',
-
-  components: { VTInput },
-
-  model: {
-    prop: 'value',
-    event: 'input',
-  },
-
-  props: {
-    value: {
-      type: String,
-      default: '',
-    },
-  },
-
-  computed: {
-    date: {
-      get() {
-        return this.$date.format(this.value, 'YYYY-MM-DD');
-      },
-      set(newDate) {
-        this.$emit('input', newDate);
-      },
-    },
-  },
-};
-</script>

package/src/components/Input/VTInputFile.vue

@@ -1,60 +0,0 @@
-<template>
-  <div class="flex items-stretch gap-2">
-    <VTInput
-      ref="input"
-      type="file"
-      :value="value"
-      :theme="theme"
-      v-bind="$attrs"
-      @change="onChange"
-    />
-    <VTButton :theme="theme" @click.stop="onButtonClick">Browse</VTButton>
-  </div>
-</template>
-
-<script>
-import VTButton from '../Button/VTButton.vue';
-import VTInput from './VTInput.vue';
-
-export default {
-  name: 'VTInputFile',
-
-  components: {
-    VTInput,
-    VTButton,
-  },
-
-  inheritAttrs: false,
-
-  props: {
-    theme: {
-      type: String,
-      default: null,
-      validator(value) {
-        return ['dark'].includes(value);
-      },
-    },
-    multiple: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  data() {
-    return {
-      value: null,
-    };
-  },
-
-  methods: {
-    onChange(event) {
-      this.value = this.$refs.input.$el.value;
-      this.$emit('change', event);
-    },
-
-    onButtonClick() {
-      this.$refs.input.$el.click();
-    },
-  },
-};
-</script>

package/src/components/Input/VTInputUpload.vue

@@ -1,54 +0,0 @@
-<template>
-  <label
-    class="flex h-full w-full flex-col items-center justify-center rounded border-2 border-dotted border-white p-4 text-center hover:border-fl-500 hover:bg-fd-500"
-    :class="{ 'border-fl-500 bg-fd-500': isDraggingOver }"
-    @drop.prevent="onDrop"
-    @dragover.prevent="onDragOver"
-    @dragleave.prevent="onDragLeave"
-  >
-    <IconImagePlaceholder class="mb-3" />
-    <span>Drop your images here, or click to browse</span>
-    <VTInput type="file" class="sr-only" v-bind="$attrs" @change="onChange" />
-  </label>
-</template>
-
-<script>
-import { IconImagePlaceholder } from '@veritree/icons';
-import VTInput from './VTInput.vue';
-
-export default {
-  name: 'VTInputFile',
-
-  components: {
-    VTInput,
-    IconImagePlaceholder,
-  },
-
-  inheritAttrs: false,
-
-  data() {
-    return {
-      isDraggingOver: false,
-    };
-  },
-
-  methods: {
-    onDrop(event) {
-      this.isDraggingOver = false;
-      this.$emit('drop', event);
-    },
-
-    onDragOver() {
-      this.isDraggingOver = true;
-    },
-
-    onDragLeave() {
-      this.isDraggingOver = false;
-    },
-
-    onChange(event) {
-      this.$emit('change', event);
-    },
-  },
-};
-</script>