@veritree/ui 0.94.1 → 0.95.0

package/src/components/Toast/VTToastIcon.vue

@@ -0,0 +1,72 @@
+<template>
+  <component
+    :is="as"
+    :class="[
+      headless
+        ? 'toast-icon'
+        : 'flex h-5 w-5 shrink-0 items-center justify-center',
+    ]"
+  >
+    <slot>
+      <!-- Default icons based on variant -->
+      <IconCheck v-if="isSuccess" :class="iconColorClass" />
+      <IconWarning v-else-if="isError" :class="iconColorClass" />
+      <IconInfo v-else :class="iconColorClass" />
+    </slot>
+  </component>
+</template>
+
+<script>
+import { IconCheck, IconWarning, IconInfo } from '@veritree/icons';
+
+export default {
+  name: 'VTToastIcon',
+
+  components: {
+    IconCheck,
+    IconWarning,
+    IconInfo,
+  },
+
+  inject: ['apiToastItem'],
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    as: {
+      type: String,
+      default: 'div',
+    },
+  },
+
+  computed: {
+    variant() {
+      return this.apiToastItem().variant;
+    },
+
+    isSuccess() {
+      return this.variant === 'success';
+    },
+
+    isError() {
+      return this.variant === 'error';
+    },
+
+    isWarning() {
+      return this.variant === 'warning';
+    },
+
+    iconColorClass() {
+      if (this.headless) return '';
+
+      if (this.isSuccess) return 'text-secondary-200';
+      if (this.isError) return 'text-error-500';
+      if (this.isWarning) return 'text-warning-200';
+
+      return 'h-5 w-5';
+    },
+  },
+};
+</script>

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>