@veritree/ui 0.94.1 → 0.95.0

package/mixins/form-control.js

@@ -76,11 +76,11 @@ export const formControlStyleMixin = {
     classComputed() {
       return [
         this.headless
-          ? `${this.name}`
+          ? `${this.name ? this.name : ''}`
           : 'leading-0 bg-white has-[:disabled]:bg-gray-200 disabled:bg-gray-200 flex w-full max-w-full relative appearance-none placeholder:font-light placeholder:text-gray-500 items-center justify-between rounded border border-solid px-3 py-2 font-inherit text-inherit file:hidden focus-within:border-gray-600 focus:border-gray-600 focus-within:placeholder:text-gray-400 focus:placeholder:text-gray-400 has-[:disabled]:text-gray-500 disabled:text-gray-500',
         // variant styles
         this.headless
-          ? `${this.name}--${this.variant}`
+          ? `${this.name ? this.name : ''}${this.variant ? '--' + this.variant : ''}`
           : this.isError
             ? 'border-error-300'
             : this.isSuccess

package/nuxt.js

@@ -20,6 +20,7 @@ const components = [
   'src/components/Skeleton',
   'src/components/Spinner',
   'src/components/Tabs',
+  'src/components/Toast',
   'src/components/Tooltip',
   'src/components/Switch',
   'src/components/Separator',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.94.1",
+  "version": "0.95.0",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",

package/src/components/Form/VTInputDate.vue

@@ -1,5 +1,5 @@
 <template>
-  <VTPopover>
+  <VTPopover :placement="placement">
     <VTPopoverTrigger ref="trigger">
       <button
         :id="id"
@@ -9,13 +9,29 @@
         @click.prevent
       >
         <span v-if="valueModel">{{ valueModelFormatted }}</span>
-        <span class="text-gray-500" v-else>{{ format }}</span>
+        <slot v-else name="label">
+          <span
+            :class="{
+              'text-gray-500': !headless,
+            }"
+            >{{ label || format }}</span
+          >
+        </slot>
         <span
           v-if="!iconless"
-          class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2"
-          :class="[disabled ? 'bg-gray-200' : 'bg-white']"
+          class=""
+          :class="[
+            headless ? '' : disabled ? 'bg-gray-200' : 'bg-white',
+            headless
+              ? ''
+              : 'pointer-events-none absolute right-3 top-1/2 -translate-y-1/2',
+          ]"
         >
-          <IconCalendar class="-z-0 h-5 w-5 scale-90 text-gray-600" />
+          <IconCalendar
+            :class="{
+              '-z-0 h-5 w-5 scale-90 text-gray-600': !headless,
+            }"
+          />
         </span>
       </button>
     </VTPopoverTrigger>
@@ -89,6 +105,10 @@ export default {
       type: [Function, Object],
       default: null,
     },
+    label: {
+      type: String,
+      default: null,
+    },
     format: {
       type: String,
       default: 'YYYY-MM-DD',
@@ -125,6 +145,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    placement: {
+      type: String,
+      default: 'bottom-start',
+    },
   },
 
   computed: {

package/src/components/Toast/README.md

@@ -0,0 +1,263 @@
+# Toast Component
+
+A toast notification system using native HTML `<dialog>` elements with CSS transitions, supporting 4 corner positions, auto-dismiss, vertical stacking, and composable child components.
+
+## Features
+
+- ✅ 4 corner positions (top-left, top-right, bottom-left, bottom-right)
+- ✅ Auto-dismiss with configurable duration (default 5s)
+- ✅ Pause on hover
+- ✅ Vertical stacking of multiple toasts
+- ✅ Variant support (default, success, error, warning)
+- ✅ HTML `<dialog>` element with `@starting-style` animations
+- ✅ Auto-show when first item added, auto-hide when empty
+- ✅ Composable child components
+- ✅ Headless mode support
+- ✅ Accessible (ARIA attributes)
+
+## Components
+
+- `VTToast` - Container component (renders `<dialog>`)
+- `VTToastItem` - Individual toast wrapper
+- `VTToastIcon` - Icon column with variant-based default icons
+- `VTToastContent` - Content wrapper for Title and Description
+- `VTToastTitle` - Title text
+- `VTToastDescription` - Description text
+- `VTToastAction` - Action buttons area
+- `VTToastClose` - Close button
+
+## Basic Usage
+
+### Simple Toast
+
+```vue
+<template>
+  <VTToast position="top-right">
+    <VTToastItem variant="success">
+      <VTToastIcon />
+      <VTToastContent>
+        <VTToastTitle>Success!</VTToastTitle>
+        <VTToastDescription>Your changes have been saved.</VTToastDescription>
+      </VTToastContent>
+      <VTToastClose />
+    </VTToastItem>
+  </VTToast>
+</template>
+```
+
+### With Action Button
+
+```vue
+<template>
+  <VTToast position="bottom-right">
+    <VTToastItem variant="warning" :duration="10000">
+      <VTToastIcon />
+      <VTToastContent>
+        <VTToastTitle>Session Expiring</VTToastTitle>
+        <VTToastDescription
+          >Your session will expire in 5 minutes.</VTToastDescription
+        >
+      </VTToastContent>
+      <VTToastAction>
+        <VTButton size="small" variant="primary" @click="extendSession">
+          Extend
+        </VTButton>
+      </VTToastAction>
+      <VTToastClose />
+    </VTToastItem>
+  </VTToast>
+</template>
+```
+
+### Multiple Toasts (Stacked)
+
+```vue
+<template>
+  <VTToast position="top-right">
+    <VTToastItem variant="success" :duration="5000">
+      <VTToastIcon />
+      <VTToastContent>
+        <VTToastTitle>File uploaded</VTToastTitle>
+        <VTToastDescription>document.pdf has been uploaded.</VTToastDescription>
+      </VTToastContent>
+      <VTToastClose />
+    </VTToastItem>
+
+    <VTToastItem variant="info" :duration="7000">
+      <VTToastIcon />
+      <VTToastContent>
+        <VTToastTitle>Processing</VTToastTitle>
+        <VTToastDescription>Your file is being processed.</VTToastDescription>
+      </VTToastContent>
+      <VTToastClose />
+    </VTToastItem>
+
+    <VTToastItem variant="error" :duration="0">
+      <VTToastIcon />
+      <VTToastContent>
+        <VTToastTitle>Upload Failed</VTToastTitle>
+        <VTToastDescription>Failed to upload image.png</VTToastDescription>
+      </VTToastContent>
+      <VTToastAction>
+        <VTButton size="small" @click="retry">Retry</VTButton>
+      </VTToastAction>
+      <VTToastClose />
+    </VTToastItem>
+  </VTToast>
+</template>
+```
+
+### Custom Icon
+
+```vue
+<template>
+  <VTToast position="bottom-left">
+    <VTToastItem variant="default">
+      <VTToastIcon>
+        <IconBell class="h-5 w-5" />
+      </VTToastIcon>
+      <VTToastContent>
+        <VTToastTitle>New Notification</VTToastTitle>
+        <VTToastDescription>You have a new message.</VTToastDescription>
+      </VTToastContent>
+      <VTToastClose />
+    </VTToastItem>
+  </VTToast>
+</template>
+```
+
+### Minimal Toast (Title Only)
+
+```vue
+<template>
+  <VTToast position="top-left">
+    <VTToastItem variant="success" :dismissable="false">
+      <VTToastIcon />
+      <VTToastContent>
+        <VTToastTitle>Saved successfully</VTToastTitle>
+      </VTToastContent>
+    </VTToastItem>
+  </VTToast>
+</template>
+```
+
+## Props
+
+### VTToast
+
+| Prop       | Type    | Default       | Description                                                                                 |
+| ---------- | ------- | ------------- | ------------------------------------------------------------------------------------------- |
+| `position` | String  | `'top-right'` | Position of toast container: `'top-left'`, `'top-right'`, `'bottom-left'`, `'bottom-right'` |
+| `headless` | Boolean | `false`       | Render without default styles (semantic class only)                                         |
+
+### VTToastItem
+
+| Prop          | Type    | Default     | Description                                                      |
+| ------------- | ------- | ----------- | ---------------------------------------------------------------- |
+| `variant`     | String  | `'default'` | Visual variant: `'default'`, `'success'`, `'error'`, `'warning'` |
+| `dismissable` | Boolean | `true`      | Show/hide close button                                           |
+| `duration`    | Number  | `5000`      | Auto-dismiss duration in ms (0 = no auto-dismiss)                |
+| `headless`    | Boolean | `false`     | Render without default styles                                    |
+| `as`          | String  | `'div'`     | HTML element to render as                                        |
+
+### VTToastIcon, VTToastContent, VTToastTitle, VTToastDescription, VTToastAction, VTToastClose
+
+| Prop       | Type    | Default | Description                   |
+| ---------- | ------- | ------- | ----------------------------- |
+| `headless` | Boolean | `false` | Render without default styles |
+| `as`       | String  | `'div'` | HTML element to render as     |
+
+## Events
+
+### VTToastItem
+
+| Event   | Payload | Description                                      |
+| ------- | ------- | ------------------------------------------------ |
+| `close` | -       | Emitted when toast is dismissed (auto or manual) |
+
+### VTToastClose
+
+| Event   | Payload | Description                          |
+| ------- | ------- | ------------------------------------ |
+| `click` | -       | Emitted when close button is clicked |
+
+## Behavior
+
+### Auto-show/Auto-hide
+
+The `<dialog>` element automatically:
+
+- Shows when the first `VTToastItem` is registered
+- Hides when the last `VTToastItem` is unregistered
+
+### Auto-dismiss
+
+Toast items automatically dismiss after the `duration` (in milliseconds):
+
+- Default: 5000ms (5 seconds)
+- Set to `0` to disable auto-dismiss
+- Timer pauses on `mouseenter`, resumes on `mouseleave`
+
+### Stacking
+
+Multiple toast items stack vertically with spacing (`gap-3`) at the configured position.
+
+## Layout
+
+Toast items use a 3-column grid layout:
+
+```
+┌─────────┬──────────────────────┬───────────────┐
+│  Icon   │  Content (Title +    │  Action +     │
+│         │        Description)  │  Close        │
+└─────────┴──────────────────────┴───────────────┘
+```
+
+Grid: `grid-cols-[auto_1fr_auto]`
+
+- Column 1: Icon (auto-sized)
+- Column 2: Content wrapper (fills remaining space)
+- Column 3: Actions + Close button (auto-sized)
+
+## Accessibility
+
+- `role="alert"` on toast items
+- `aria-live="polite"` for screen reader announcements
+- Unique IDs for title and description (for future `aria-labelledby`/`aria-describedby` support)
+
+## Headless Mode
+
+All components support headless mode for custom styling:
+
+```vue
+<VTToast headless position="top-right">
+  <VTToastItem headless variant="success">
+    <VTToastIcon headless />
+    <VTToastContent headless>
+      <VTToastTitle headless>Custom styled toast</VTToastTitle>
+    </VTToastContent>
+  </VTToastItem>
+</VTToast>
+```
+
+Headless classes:
+
+- `.toast` - Container
+- `.toast-item` - Individual toast
+- `.toast-item--{variant}` - Variant modifier
+- `.toast-icon` - Icon
+- `.toast-content` - Content wrapper
+- `.toast-title` - Title
+- `.toast-description` - Description
+- `.toast-action` - Action area
+- `.toast-close` - Close button
+
+## Browser Support
+
+The `@starting-style` CSS feature is used for dialog animations. Supported in:
+
+- Chrome 117+
+- Safari 17.5+
+- Firefox 129+
+
+For older browsers, toasts will still work but without the initial slide animation.

package/src/components/Toast/VTToast.vue

@@ -0,0 +1,150 @@
+<template>
+  <Portal>
+    <dialog
+      ref="dialog"
+      :id="id"
+      :class="
+        headless
+          ? 'toast'
+          : `fixed ${positionClass} z-50 flex flex-col gap-2 border-none bg-transparent p-0`
+      "
+    >
+      <slot></slot>
+    </dialog>
+  </Portal>
+</template>
+
+<script>
+import { Portal } from '@linusborg/vue-simple-portal';
+import { genId } from '../../utils/ids';
+
+export default {
+  name: 'VTToast',
+
+  components: {
+    Portal,
+  },
+
+  provide() {
+    return {
+      apiToast: () => {
+        const componentId = this.componentId;
+
+        const registerItem = (item) => {
+          if (!item) {
+            return;
+          }
+
+          this.items.push(item);
+        };
+
+        const unregisterItem = (item) => {
+          if (!item) {
+            return;
+          }
+
+          const index = this.items.indexOf(item);
+
+          if (index > -1) {
+            this.items.splice(index, 1);
+          }
+        };
+
+        return {
+          componentId,
+          registerItem,
+          unregisterItem,
+          position: this.position,
+        };
+      },
+    };
+  },
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    position: {
+      type: String,
+      default: 'top-right',
+      validator: (value) => {
+        return [
+          'top-left',
+          'top-right',
+          'bottom-left',
+          'bottom-right',
+        ].includes(value);
+      },
+    },
+  },
+
+  data() {
+    return {
+      componentId: genId(),
+      items: [],
+    };
+  },
+
+  computed: {
+    id() {
+      return `toast-${this.componentId}`;
+    },
+
+    positionClass() {
+      switch (this.position) {
+        case 'top-left':
+          return 'top-6 left-10 bottom-auto right-auto';
+        case 'top-right':
+          return 'top-6 right-10 bottom-auto left-auto';
+        case 'bottom-left':
+          return 'bottom-6 left-10 top-auto right-auto';
+        case 'bottom-right':
+          return 'bottom-6 right-10 top-auto left-auto';
+        default:
+          return 'top-6 right-10 bottom-auto left-auto';
+      }
+    },
+
+    isOpen() {
+      return this.items.length > 0;
+    },
+  },
+
+  watch: {
+    isOpen(newValue, oldValue) {
+      if (newValue && !oldValue) {
+        // Show dialog when first item is added
+        this.$refs.dialog?.show();
+      } else if (!newValue && oldValue) {
+        // Close dialog when last item is removed
+        this.$refs.dialog?.close();
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+dialog {
+  transition: opacity 300ms ease-out;
+  opacity: 1;
+}
+
+dialog[open] {
+  opacity: 1;
+}
+
+/* Initial state - just fade in */
+@starting-style {
+  dialog[open] {
+    opacity: 0;
+  }
+}
+
+/* Remove default dialog backdrop and allow clicks through */
+dialog::backdrop {
+  background: transparent;
+  pointer-events: none;
+}
+</style>

package/src/components/Toast/VTToastAction.vue

@@ -0,0 +1,25 @@
+<template>
+  <component
+    :is="as"
+    :class="[headless ? 'toast-action' : 'flex flex-col gap-2']"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'VTToastAction',
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    as: {
+      type: String,
+      default: 'div',
+    },
+  },
+};
+</script>

package/src/components/Toast/VTToastClose.vue

@@ -0,0 +1,52 @@
+<template>
+  <VTButton
+    variant="icon"
+    :id="id"
+    :class="[
+      headless
+        ? 'toast-close'
+        : 'self-start text-gray-400 size-2.5 focus:bg-transparent hover:bg-transparent',
+    ]"
+    @click.prevent="close"
+  >
+    <slot>
+      <IconClose class="h-4 w-4" />
+    </slot>
+  </VTButton>
+</template>
+
+<script>
+import { IconClose } from '@veritree/icons';
+import VTButton from '../Button/VTButton.vue';
+
+export default {
+  name: 'VTToastClose',
+
+  components: {
+    IconClose,
+    VTButton,
+  },
+
+  inject: ['apiToastItem'],
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  computed: {
+    id() {
+      return `toast-close-${this.apiToastItem().componentId}`;
+    },
+  },
+
+  methods: {
+    close() {
+      this.apiToastItem().close();
+      this.$emit('click');
+    },
+  },
+};
+</script>

package/src/components/Toast/VTToastContent.vue

@@ -0,0 +1,25 @@
+<template>
+  <component
+    :is="as"
+    :class="[headless ? 'toast-content' : 'flex flex-col gap-0.5']"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'VTToastContent',
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    as: {
+      type: String,
+      default: 'div',
+    },
+  },
+};
+</script>

package/src/components/Toast/VTToastDescription.vue

@@ -0,0 +1,36 @@
+<template>
+  <component
+    :is="as"
+    :id="id"
+    :class="[
+      headless ? 'toast-description' : 'text-xs opacity-90 text-gray-400',
+    ]"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'VTToastDescription',
+
+  inject: ['apiToastItem'],
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    as: {
+      type: String,
+      default: 'div',
+    },
+  },
+
+  computed: {
+    id() {
+      return `toast-description-${this.apiToastItem().componentId}`;
+    },
+  },
+};
+</script>