veloce-vue 0.41.0 → 0.45.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/components/Checkbox.vue +52 -48
  2. package/components/Input.vue +50 -25
  3. package/components/toast/ToastContainer.vue +38 -20
  4. package/composables/useToast.ts +41 -24
  5. package/package.json +1 -1
  6. package/types/components/Checkbox.vue.d.ts +12 -3
  7. package/types/components/Input.vue.d.ts +2 -2
  8. package/types/components/toast/ToastContainer.vue.d.ts +11 -2
  9. package/types/composables/useToast.d.ts +20 -9
package/components/Checkbox.vue CHANGED
@@ -1,17 +1,18 @@
1
1
  <script setup lang="ts">
2
- import { Icon, Check } from '../exports/icons';
3
- import { computed, type Component } from 'vue';
2
+ import { Icon, Check } from "../exports/icons";
3
+ import { computed, type Component } from "vue";
4
4
 
5
- type CheckboxSize = 'sm' | 'md' | 'lg';
6
- type CheckboxVariant = 'primary' | 'secondary' | 'success' | 'info' | 'error' | 'warning';
5
+ type CheckboxSize = "sm" | "md" | "lg";
6
+ type CheckboxVariant = "primary" | "secondary" | "success" | "info" | "error" | "warning";
7
7
 
8
8
  const props = defineProps({
9
- label: { type: String, default: '' },
10
- labelClass: { type: String, default: '' },
11
- checkboxClass: { type: String, default: '' },
12
- size: { type: String as () => CheckboxSize, default: 'md' },
13
- variant: { type: String as () => CheckboxVariant, default: 'primary' },
9
+ label: { type: String, default: "" },
10
+ labelClass: { type: String, default: "" },
11
+ checkboxClass: { type: String, default: "" },
12
+ size: { type: String as () => CheckboxSize, default: "md" },
13
+ variant: { type: String as () => CheckboxVariant, default: "primary" },
14
14
  icon: { type: Object as () => Component, default: () => Check },
15
+ iconClass: { type: String, default: "" },
15
16
  disabled: { type: Boolean, default: false },
16
17
  });
17
18
 
@@ -20,22 +21,22 @@ const model = defineModel<boolean>({ required: true });
20
21
  const getSizeClasses = computed(() => {
21
22
  const sizes = {
22
23
  sm: {
23
- checkbox: 'size-4',
24
- icon: 'size-3',
25
- gap: 'gap-1.5',
26
- text: 'text-sm',
24
+ checkbox: "size-4",
25
+ icon: "size-3",
26
+ gap: "gap-1.5",
27
+ text: "text-sm",
27
28
  },
28
29
  md: {
29
- checkbox: 'size-5',
30
- icon: 'size-5',
31
- gap: 'gap-2',
32
- text: 'text-base',
30
+ checkbox: "size-5",
31
+ icon: "size-5",
32
+ gap: "gap-2",
33
+ text: "text-base",
33
34
  },
34
35
  lg: {
35
- checkbox: 'size-6',
36
- icon: 'size-6',
37
- gap: 'gap-2.5',
38
- text: 'text-lg',
36
+ checkbox: "size-6",
37
+ icon: "size-6",
38
+ gap: "gap-2.5",
39
+ text: "text-lg",
39
40
  },
40
41
  };
41
42
  return sizes[props.size];
@@ -44,40 +45,40 @@ const getSizeClasses = computed(() => {
44
45
  const getVariantClasses = computed(() => {
45
46
  const variants = {
46
47
  primary: {
47
- bg: 'bg-primary',
48
- border: 'border-primary',
49
- text: 'text-white',
50
- hover: 'hover:border-primary/70',
48
+ bg: "bg-primary",
49
+ border: "border-primary",
50
+ text: "text-white",
51
+ hover: "hover:border-primary/70",
51
52
  },
52
53
  secondary: {
53
- bg: 'bg-secondary',
54
- border: 'border-secondary',
55
- text: 'text-white',
56
- hover: 'hover:border-secondary/70',
54
+ bg: "bg-secondary",
55
+ border: "border-secondary",
56
+ text: "text-white",
57
+ hover: "hover:border-secondary/70",
57
58
  },
58
59
  success: {
59
- bg: 'bg-success',
60
- border: 'border-success',
61
- text: 'text-white',
62
- hover: 'hover:border-success/70',
60
+ bg: "bg-success",
61
+ border: "border-success",
62
+ text: "text-white",
63
+ hover: "hover:border-success/70",
63
64
  },
64
65
  info: {
65
- bg: 'bg-info',
66
- border: 'border-info',
67
- text: 'text-white',
68
- hover: 'hover:border-info/70',
66
+ bg: "bg-info",
67
+ border: "border-info",
68
+ text: "text-white",
69
+ hover: "hover:border-info/70",
69
70
  },
70
71
  warning: {
71
- bg: 'bg-warning',
72
- border: 'border-warning',
73
- text: 'text-white',
74
- hover: 'hover:border-warning/70',
72
+ bg: "bg-warning",
73
+ border: "border-warning",
74
+ text: "text-white",
75
+ hover: "hover:border-warning/70",
75
76
  },
76
77
  error: {
77
- bg: 'bg-error',
78
- border: 'border-error',
79
- text: 'text-white',
80
- hover: 'hover:border-error/70',
78
+ bg: "bg-error",
79
+ border: "border-error",
80
+ text: "text-white",
81
+ hover: "hover:border-error/70",
81
82
  },
82
83
  };
83
84
  return variants[props.variant];
@@ -85,9 +86,12 @@ const getVariantClasses = computed(() => {
85
86
  </script>
86
87
 
87
88
  <template>
88
- <div :class="[getSizeClasses.gap, props.disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer']" class="flex w-fit select-none items-center" @click="!props.disabled ? (model = !model) : null">
89
- <div :class="[getSizeClasses.checkbox, model ? [getVariantClasses.bg, getVariantClasses.border] : [getVariantClasses.border, props.disabled ? 'opacity-50' : getVariantClasses.hover], checkboxClass]" class="m-0 flex items-center justify-center rounded-sm border-2 duration-200">
90
- <Icon v-if="model" :icon="icon" :class="`${getSizeClasses.icon} ${getVariantClasses.text}`" />
89
+ <div :class="[getSizeClasses.gap, props.disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer']" class="flex w-fit items-center select-none" @click="!props.disabled ? (model = !model) : null">
90
+ <div
91
+ :class="[getSizeClasses.checkbox, model ? [getVariantClasses.bg, getVariantClasses.border] : [getVariantClasses.border, props.disabled ? 'opacity-50' : getVariantClasses.hover], checkboxClass]"
92
+ class="m-0 flex items-center justify-center rounded-sm border-2 duration-200"
93
+ >
94
+ <Icon v-if="model" :icon="icon" :class="`${getSizeClasses.icon} ${getVariantClasses.text} ${iconClass}`" />
91
95
  </div>
92
96
  <div :class="[labelClass, getSizeClasses.text]">{{ label }}</div>
93
97
  </div>
package/components/Input.vue CHANGED
@@ -1,21 +1,21 @@
1
1
  <script setup lang="ts">
2
- import { computed, ref, type Component } from 'vue';
3
- import { useRandomId } from '../exports/utils';
4
- import { Icon, Eye, EyeOff } from '../exports/icons';
5
- import { type Size } from '../exports/types';
2
+ import { computed, ref, type Component } from "vue";
3
+ import { useRandomId } from "../exports/utils";
4
+ import { Icon, Eye, EyeOff } from "../exports/icons";
5
+ import { type Size } from "../exports/types";
6
6
 
7
7
  const id = useRandomId();
8
8
 
9
9
  const props = defineProps({
10
10
  leadingIcon: { type: Object as () => Component, default: () => null },
11
11
  trailingIcon: { type: Object as () => Component, default: () => null },
12
- placeholder: { type: String, default: '' },
13
- iconClass: { type: String, default: '' },
14
- helpText: { type: String, default: '' },
15
- type: { type: String as () => 'text' | 'password', default: 'text' },
16
- labelStyle: { type: String as () => 'float' | 'static', default: 'static' },
17
- label: { type: String, default: '' },
18
- size: { type: String as () => Size, default: 'md' },
12
+ placeholder: { type: String, default: "" },
13
+ iconClass: { type: String, default: "" },
14
+ helpText: { type: String, default: "" },
15
+ type: { type: String as () => "text" | "password", default: "text" },
16
+ labelStyle: { type: String as () => "float" | "static", default: "static" },
17
+ label: { type: String, default: "" },
18
+ size: { type: String as () => Size, default: "md" },
19
19
  });
20
20
 
21
21
  const model = defineModel();
@@ -27,14 +27,14 @@ const togglePasswordVisibility = () => (isPasswordVisible.value = !isPasswordVis
27
27
 
28
28
  const sizeClasses = computed(() => {
29
29
  switch (props.size) {
30
- case 'sm':
31
- return { container: 'h-[30px]', input: 'px-2 py-1 text-sm', icon: 'size-4', text: 'text-sm', floatLabel: { focus: 'text-xs', base: 'text-sm' } };
32
- case 'md':
33
- return { container: 'h-[34px]', input: 'px-2.5 py-1.5 text-sm', icon: 'size-4', text: 'text-sm', floatLabel: { focus: 'text-xs', base: 'text-sm' } };
34
- case 'lg':
35
- return { container: 'h-[42px]', input: 'px-3 py-2 text-base', icon: 'size-5', text: 'text-base', floatLabel: { focus: 'text-sm', base: 'text-base' } };
36
- case 'xl':
37
- return { container: 'h-[50px]', input: 'px-3.5 py-2.5 text-lg', icon: 'size-6', text: 'text-lg', floatLabel: { focus: 'text-sm', base: 'text-lg' } };
30
+ case "sm":
31
+ return { container: "h-[30px]", input: "px-2 py-1 text-sm", icon: "size-4", text: "text-sm", floatLabel: { focus: "text-xs", base: "text-sm" } };
32
+ case "md":
33
+ return { container: "h-[34px]", input: "px-2.5 py-1.5 text-sm", icon: "size-4", text: "text-sm", floatLabel: { focus: "text-xs", base: "text-sm" } };
34
+ case "lg":
35
+ return { container: "h-[42px]", input: "px-3 py-2 text-base", icon: "size-5", text: "text-base", floatLabel: { focus: "text-sm", base: "text-base" } };
36
+ case "xl":
37
+ return { container: "h-[50px]", input: "px-3.5 py-2.5 text-lg", icon: "size-6", text: "text-lg", floatLabel: { focus: "text-sm", base: "text-lg" } };
38
38
  }
39
39
  });
40
40
  </script>
@@ -45,21 +45,46 @@ const sizeClasses = computed(() => {
45
45
  <label class="text-sm font-medium duration-100" :for="id">{{ label }}</label>
46
46
  </div>
47
47
 
48
- <div :class="[{ 'mb-6': helpText }, sizeClasses.container]" class="relative">
48
+ <div :class="[sizeClasses.container]" class="relative">
49
49
  <!-- leading icon -->
50
- <Icon v-if="leadingIcon" :icon="leadingIcon" :class="[sizeClasses.icon, iconClass]" class="text-muted absolute left-3 top-1/2 -translate-y-1/2" />
50
+ <Icon v-if="leadingIcon" :icon="leadingIcon" :class="[sizeClasses.icon, iconClass]" class="text-muted absolute top-1/2 left-3 -translate-y-1/2" />
51
51
  <!-- trailing icon -->
52
- <Icon v-if="trailingIcon" :icon="trailingIcon" :class="[sizeClasses.icon, iconClass]" class="text-muted absolute right-3 top-1/2 -translate-y-1/2" />
52
+ <Icon v-if="trailingIcon" :icon="trailingIcon" :class="[sizeClasses.icon, iconClass]" class="text-muted absolute top-1/2 right-3 -translate-y-1/2" />
53
53
 
54
54
  <!-- input -->
55
- <input :type="type === 'password' && isPasswordVisible ? 'text' : type" v-model="model" :class="[sizeClasses.input, sizeClasses.text, { 'pr-12': props.type === 'password' }, { 'pl-10': leadingIcon && props.size === 'md' }, { 'pl-9': leadingIcon && props.size === 'sm' }, { 'pl-11': leadingIcon && props.size === 'lg' }, { 'pl-12': leadingIcon && props.size === 'xl' }, { 'pr-10': trailingIcon && props.type !== 'password' && props.size === 'md' }, { 'pr-9': trailingIcon && props.type !== 'password' && props.size === 'sm' }, { 'pr-11': trailingIcon && props.type !== 'password' && props.size === 'lg' }, { 'pr-12': trailingIcon && props.type !== 'password' && props.size === 'xl' }]" class="outline-primary dark:placeholder:text-muted focus:border-primary/75 peer h-full w-full rounded border outline-none duration-200" :id="id" :placeholder="labelStyle === 'float' ? ' ' : placeholder" @focus="isFocused = true" @blur="isFocused = false" />
55
+ <input
56
+ :type="type === 'password' && isPasswordVisible ? 'text' : type"
57
+ v-model="model"
58
+ :class="[
59
+ sizeClasses.input,
60
+ sizeClasses.text,
61
+ { 'pr-12': props.type === 'password' },
62
+ { 'pl-10': leadingIcon && props.size === 'md' },
63
+ { 'pl-9': leadingIcon && props.size === 'sm' },
64
+ { 'pl-11': leadingIcon && props.size === 'lg' },
65
+ { 'pl-12': leadingIcon && props.size === 'xl' },
66
+ { 'pr-10': trailingIcon && props.type !== 'password' && props.size === 'md' },
67
+ { 'pr-9': trailingIcon && props.type !== 'password' && props.size === 'sm' },
68
+ { 'pr-11': trailingIcon && props.type !== 'password' && props.size === 'lg' },
69
+ { 'pr-12': trailingIcon && props.type !== 'password' && props.size === 'xl' },
70
+ ]"
71
+ class="outline-primary dark:placeholder:text-muted focus:border-primary/75 peer h-full w-full rounded border duration-200 outline-none"
72
+ :id="id"
73
+ :placeholder="labelStyle === 'float' ? ' ' : placeholder"
74
+ @focus="isFocused = true"
75
+ @blur="isFocused = false"
76
+ />
56
77
  <!-- floating label -->
57
- <div v-if="labelStyle === 'float'" :class="[model || isFocused ? `-top-1.5 px-0.5 ${sizeClasses.floatLabel.focus}` : `bottom-0 top-0 my-auto ${sizeClasses.floatLabel.base}`]" class="bg-background dark:text-muted absolute left-2.5 h-fit rounded leading-none text-neutral-400 duration-100">
78
+ <div
79
+ v-if="labelStyle === 'float'"
80
+ :class="[model || isFocused ? `-top-1.5 px-0.5 ${sizeClasses.floatLabel.focus}` : `top-0 bottom-0 my-auto ${sizeClasses.floatLabel.base}`]"
81
+ class="bg-background dark:text-muted absolute left-2.5 h-fit rounded leading-none text-neutral-400 duration-100"
82
+ >
58
83
  {{ placeholder }}
59
84
  </div>
60
85
 
61
86
  <!-- password toggle -->
62
- <div v-if="type === 'password'" class="absolute right-4 top-1/2 -translate-y-1/2 cursor-pointer" @click="togglePasswordVisibility">
87
+ <div v-if="type === 'password'" class="absolute top-1/2 right-4 -translate-y-1/2 cursor-pointer" @click="togglePasswordVisibility">
63
88
  <Icon :icon="isPasswordVisible ? EyeOff : Eye" :class="sizeClasses.icon" class="text-muted" />
64
89
  </div>
65
90
  </div>
package/components/toast/ToastContainer.vue CHANGED
@@ -1,50 +1,64 @@
1
1
  <template>
2
- <div :class="containerClasses" class="w-full sm:w-auto">
2
+ <div :class="containerClasses" class="w-full sm:w-auto" :id="containerId">
3
3
  <AnimatePresence>
4
- <Toast v-for="(toast, index) in toasts" :key="toast.id" :icon="toast.icon" class="pointer-events-auto" :style="{ zIndex: index + 1 }" :id="toast.id" :message="toast.message" :severity="toast.severity" :duration="toast.duration" :closable="toast.closable" :position="position" @close="removeToast" />
4
+ <Toast
5
+ v-for="(toast, index) in toasts"
6
+ :key="toast.id"
7
+ :icon="toast.icon"
8
+ class="pointer-events-auto"
9
+ :style="{ zIndex: index + 1 }"
10
+ :id="toast.id"
11
+ :message="toast.message"
12
+ :severity="toast.severity"
13
+ :duration="toast.duration"
14
+ :closable="toast.closable"
15
+ :position="position"
16
+ @close="removeToast"
17
+ />
5
18
  </AnimatePresence>
6
19
  </div>
7
20
  </template>
8
21
 
9
22
  <script setup lang="ts">
10
- import { ref, computed, onMounted, type Ref } from 'vue';
11
- import { AnimatePresence } from 'motion-v';
12
- import Toast from './Toast.vue';
13
- import { setToastContainer } from '../../exports/toast';
14
- import type { ToastItem } from '../../exports/toast';
15
- import { useRandomId } from '../../exports/utils';
23
+ import { ref, computed, onMounted, onUnmounted, type Ref } from "vue";
24
+ import { AnimatePresence } from "motion-v";
25
+ import Toast from "./Toast.vue";
26
+ import { setToastContainer } from "../../exports/toast";
27
+ import type { ToastItem } from "../../exports/toast";
28
+ import { useRandomId } from "../../exports/utils";
16
29
 
17
30
  const props = defineProps({
18
- position: { type: String as () => 'top-center' | 'bottom-center' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left', default: 'top-right' },
31
+ position: { type: String as () => "top-center" | "bottom-center" | "top-right" | "top-left" | "bottom-right" | "bottom-left", default: "top-right" },
19
32
  maxToasts: { type: Number, default: 5 },
33
+ containerId: { type: String, default: "default-toast-container" },
20
34
  });
21
35
 
22
36
  const toasts: Ref<ToastItem[]> = ref<ToastItem[]>([]);
23
37
 
24
38
  const containerClasses = computed(() => {
25
- const baseClasses = 'fixed z-[9999] flex flex-col gap-3 p-4 pointer-events-none';
39
+ const baseClasses = "fixed z-[9999] flex flex-col gap-3 p-4 pointer-events-none";
26
40
  const positionClasses = {
27
- 'top-left': 'top-0 left-0',
28
- 'top-right': 'top-0 right-0',
29
- 'top-center': 'top-0 left-1/2 -translate-x-1/2',
30
- 'bottom-left': 'bottom-0 left-0',
31
- 'bottom-right': 'bottom-0 right-0',
32
- 'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2',
41
+ "top-left": "top-0 left-0",
42
+ "top-right": "top-0 right-0",
43
+ "top-center": "top-0 left-1/2 -translate-x-1/2",
44
+ "bottom-left": "bottom-0 left-0",
45
+ "bottom-right": "bottom-0 right-0",
46
+ "bottom-center": "bottom-0 left-1/2 -translate-x-1/2",
33
47
  };
34
- return `${baseClasses} ${positionClasses[props.position] || positionClasses['top-right']}`;
48
+ return `${baseClasses} ${positionClasses[props.position] || positionClasses["top-right"]}`;
35
49
  });
36
50
 
37
51
  const addToast = (toast: ToastItem): void => {
38
52
  const newToast: ToastItem = {
39
53
  id: toast.id || useRandomId(),
40
54
  message: toast.message,
41
- severity: toast.severity || 'info',
55
+ severity: toast.severity || "info",
42
56
  icon: toast.icon,
43
57
  duration: toast.duration ?? 5000,
44
58
  closable: toast.closable ?? true,
45
59
  };
46
60
 
47
- if (props.position.includes('top')) {
61
+ if (props.position.includes("top")) {
48
62
  toasts.value.unshift(newToast);
49
63
  } else {
50
64
  toasts.value.push(newToast);
@@ -68,7 +82,11 @@ const clearAll = (): void => {
68
82
  };
69
83
 
70
84
  onMounted(() => {
71
- setToastContainer({ addToast, removeToast, clearAll, toasts });
85
+ setToastContainer({ addToast, removeToast, clearAll, toasts }, props.containerId);
86
+ });
87
+
88
+ onUnmounted(() => {
89
+ setToastContainer(null, props.containerId);
72
90
  });
73
91
 
74
92
  defineExpose<{
package/composables/useToast.ts CHANGED
@@ -1,6 +1,6 @@
1
- import type { Severity } from '../exports/types';
2
- import type { Component } from 'vue';
3
- import { useRandomId } from '../exports/utils';
1
+ import type { Severity } from "../exports/types";
2
+ import type { Component } from "vue";
3
+ import { useRandomId } from "../exports/utils";
4
4
 
5
5
  export interface ToastItem {
6
6
  id: string;
@@ -17,6 +17,7 @@ export interface ToastOptions {
17
17
  icon?: Component;
18
18
  duration?: number;
19
19
  closable?: boolean;
20
+ containerId?: string;
20
21
  }
21
22
 
22
23
  interface ToastContainerMethods {
@@ -26,54 +27,70 @@ interface ToastContainerMethods {
26
27
  toasts: any;
27
28
  }
28
29
 
29
- let toastContainerInstance: ToastContainerMethods | null = null;
30
+ let toastContainerId: string = "default-toast-container";
31
+ const toastContainerInstances = new Map<string, ToastContainerMethods>();
30
32
 
31
- export const setToastContainer = (instance: ToastContainerMethods | null) => {
32
- toastContainerInstance = instance;
33
+ export const setToastContainer = (instance: ToastContainerMethods | null, containerId: string) => {
34
+ toastContainerId = containerId;
35
+
36
+ if (instance) {
37
+ toastContainerInstances.set(containerId, instance);
38
+ } else {
39
+ toastContainerInstances.delete(containerId);
40
+ }
33
41
  };
34
42
 
35
- const showToast = (options: ToastOptions) => {
36
- if (!toastContainerInstance) {
37
- console.warn('Toast container not initialized. Make sure to add <ToastContainer> to your app.');
43
+ const getToastContainer = (containerId?: string): ToastContainerMethods | null => {
44
+ const id = containerId || toastContainerId;
45
+ return toastContainerInstances.get(id) || null;
46
+ };
47
+
48
+ const showToast = (options: ToastOptions & { containerId?: string }) => {
49
+ const containerId = options.containerId || toastContainerId;
50
+ const container = getToastContainer(containerId);
51
+
52
+ if (!container) {
53
+ console.warn(`Toast container with ID "${containerId}" not initialized. Make sure to add <ToastContainer> to your app.`);
38
54
  return;
39
55
  }
40
56
 
41
57
  const toastItem: ToastItem = {
42
58
  id: useRandomId(),
43
59
  message: options.message,
44
- severity: options.severity || 'info',
60
+ severity: options.severity || "info",
45
61
  icon: options.icon,
46
62
  duration: options.duration ?? 5000,
47
63
  closable: options.closable ?? true,
48
64
  };
49
65
 
50
- toastContainerInstance.addToast(toastItem);
66
+ container.addToast(toastItem);
51
67
  };
52
68
 
53
- export const useToast = () => {
54
- const success = (message: string, options?: Omit<ToastOptions, 'message' | 'severity'>) => {
55
- return showToast({ ...options, message, severity: 'success' });
69
+ export const useToast = (containerId?: string) => {
70
+ const success = (message: string, options?: Omit<ToastOptions, "message" | "severity"> & { containerId?: string }) => {
71
+ return showToast({ ...options, message, severity: "success", containerId: options?.containerId || containerId });
56
72
  };
57
73
 
58
- const error = (message: string, options?: Omit<ToastOptions, 'message' | 'severity'>) => {
59
- return showToast({ ...options, message, severity: 'error' });
74
+ const error = (message: string, options?: Omit<ToastOptions, "message" | "severity"> & { containerId?: string }) => {
75
+ return showToast({ ...options, message, severity: "error", containerId: options?.containerId || containerId });
60
76
  };
61
77
 
62
- const warning = (message: string, options?: Omit<ToastOptions, 'message' | 'severity'>) => {
63
- return showToast({ ...options, message, severity: 'warning' });
78
+ const warning = (message: string, options?: Omit<ToastOptions, "message" | "severity"> & { containerId?: string }) => {
79
+ return showToast({ ...options, message, severity: "warning", containerId: options?.containerId || containerId });
64
80
  };
65
81
 
66
- const info = (message: string, options?: Omit<ToastOptions, 'message' | 'severity'>) => {
67
- return showToast({ ...options, message, severity: 'info' });
82
+ const info = (message: string, options?: Omit<ToastOptions, "message" | "severity"> & { containerId?: string }) => {
83
+ return showToast({ ...options, message, severity: "info", containerId: options?.containerId || containerId });
68
84
  };
69
85
 
70
- const show = (message: string, options?: ToastOptions) => {
71
- return showToast({ ...options, message });
86
+ const show = (message: string, options?: Omit<ToastOptions, "message"> & { containerId?: string }) => {
87
+ return showToast({ ...options, message, containerId: options?.containerId || containerId });
72
88
  };
73
89
 
74
90
  const clear = () => {
75
- if (toastContainerInstance) {
76
- toastContainerInstance.clearAll();
91
+ const container = getToastContainer(containerId);
92
+ if (container) {
93
+ container.clearAll();
77
94
  }
78
95
  };
79
96
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "veloce-vue",
3
- "version": "0.41.0",
3
+ "version": "0.45.0",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "license": "MIT",
package/types/components/Checkbox.vue.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- import { type Component } from 'vue';
2
- type CheckboxSize = 'sm' | 'md' | 'lg';
3
- type CheckboxVariant = 'primary' | 'secondary' | 'success' | 'info' | 'error' | 'warning';
1
+ import { type Component } from "vue";
2
+ type CheckboxSize = "sm" | "md" | "lg";
3
+ type CheckboxVariant = "primary" | "secondary" | "success" | "info" | "error" | "warning";
4
4
  declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
5
5
  label: {
6
6
  type: StringConstructor;
@@ -26,6 +26,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
26
26
  type: () => Component;
27
27
  default: () => import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
28
28
  };
29
+ iconClass: {
30
+ type: StringConstructor;
31
+ default: string;
32
+ };
29
33
  disabled: {
30
34
  type: BooleanConstructor;
31
35
  default: boolean;
@@ -61,6 +65,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
61
65
  type: () => Component;
62
66
  default: () => import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
63
67
  };
68
+ iconClass: {
69
+ type: StringConstructor;
70
+ default: string;
71
+ };
64
72
  disabled: {
65
73
  type: BooleanConstructor;
66
74
  default: boolean;
@@ -77,6 +85,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
77
85
  size: CheckboxSize;
78
86
  disabled: boolean;
79
87
  variant: CheckboxVariant;
88
+ iconClass: string;
80
89
  labelClass: string;
81
90
  checkboxClass: string;
82
91
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
package/types/components/Input.vue.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { type Component } from 'vue';
2
- import { type Size } from '../exports/types';
1
+ import { type Component } from "vue";
2
+ import { type Size } from "../exports/types";
3
3
  declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
4
4
  leadingIcon: {
5
5
  type: () => Component;
package/types/components/toast/ToastContainer.vue.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { type Ref } from 'vue';
2
- import type { ToastItem } from '../../exports/toast';
1
+ import { type Ref } from "vue";
2
+ import type { ToastItem } from "../../exports/toast";
3
3
  declare const toasts: Ref<ToastItem[]>;
4
4
  declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
5
5
  position: {
@@ -10,6 +10,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
10
10
  type: NumberConstructor;
11
11
  default: number;
12
12
  };
13
+ containerId: {
14
+ type: StringConstructor;
15
+ default: string;
16
+ };
13
17
  }>, {
14
18
  addToast: (toast: ToastItem) => void;
15
19
  removeToast: (id: string) => void;
@@ -24,9 +28,14 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
24
28
  type: NumberConstructor;
25
29
  default: number;
26
30
  };
31
+ containerId: {
32
+ type: StringConstructor;
33
+ default: string;
34
+ };
27
35
  }>> & Readonly<{}>, {
28
36
  position: "top-left" | "top-right" | "top-center" | "bottom-left" | "bottom-right" | "bottom-center";
29
37
  maxToasts: number;
38
+ containerId: string;
30
39
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
31
40
  declare const _default: typeof __VLS_export;
32
41
  export default _default;
package/types/composables/useToast.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import type { Severity } from '../exports/types';
2
- import type { Component } from 'vue';
1
+ import type { Severity } from "../exports/types";
2
+ import type { Component } from "vue";
3
3
  export interface ToastItem {
4
4
  id: string;
5
5
  message: string;
@@ -14,6 +14,7 @@ export interface ToastOptions {
14
14
  icon?: Component;
15
15
  duration?: number;
16
16
  closable?: boolean;
17
+ containerId?: string;
17
18
  }
18
19
  interface ToastContainerMethods {
19
20
  addToast: (toast: ToastItem) => void;
@@ -21,13 +22,23 @@ interface ToastContainerMethods {
21
22
  clearAll: () => void;
22
23
  toasts: any;
23
24
  }
24
- export declare const setToastContainer: (instance: ToastContainerMethods | null) => void;
25
- export declare const useToast: () => {
26
- success: (message: string, options?: Omit<ToastOptions, "message" | "severity">) => void;
27
- error: (message: string, options?: Omit<ToastOptions, "message" | "severity">) => void;
28
- warning: (message: string, options?: Omit<ToastOptions, "message" | "severity">) => void;
29
- info: (message: string, options?: Omit<ToastOptions, "message" | "severity">) => void;
30
- show: (message: string, options?: ToastOptions) => void;
25
+ export declare const setToastContainer: (instance: ToastContainerMethods | null, containerId: string) => void;
26
+ export declare const useToast: (containerId?: string) => {
27
+ success: (message: string, options?: Omit<ToastOptions, "message" | "severity"> & {
28
+ containerId?: string;
29
+ }) => void;
30
+ error: (message: string, options?: Omit<ToastOptions, "message" | "severity"> & {
31
+ containerId?: string;
32
+ }) => void;
33
+ warning: (message: string, options?: Omit<ToastOptions, "message" | "severity"> & {
34
+ containerId?: string;
35
+ }) => void;
36
+ info: (message: string, options?: Omit<ToastOptions, "message" | "severity"> & {
37
+ containerId?: string;
38
+ }) => void;
39
+ show: (message: string, options?: Omit<ToastOptions, "message"> & {
40
+ containerId?: string;
41
+ }) => void;
31
42
  clear: () => void;
32
43
  };
33
44
  export {};