@stlhorizon/vue-ui 3.2.0 → 3.3.0

package/README.md

@@ -580,7 +580,7 @@ A dropdown menu component with customizable trigger and placement.
     </template>
     <DropdownItem @click="action1">Action 1</DropdownItem>
     <DropdownItem @click="action2">Action 2</DropdownItem>
-    <DropdownItem variant="destructive" @click="delete">Delete</DropdownItem>
+    <DropdownItem variant="danger" @click="delete">Delete</DropdownItem>
   </Dropdown>
 </template>
 
@@ -607,7 +607,7 @@ An individual item within a dropdown menu.
 | `icon` | `String` | - | Icon name |
 | `shortcut` | `String` | - | Keyboard shortcut text |
 | `disabled` | `Boolean` | `false` | Whether disabled |
-| `variant` | `String` | `'default'` | Visual variant (default, destructive) |
+| `variant` | `String` | `'default'` | Visual variant (default, danger) |
 
 ### Events
 
@@ -984,7 +984,7 @@ A versatile button component with multiple variants, sizes, and states.
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `variant` | `String` | `'default'` | Visual style (default, destructive, outline, secondary, ghost, link, success, warning, info, subtle, dark, light, primaryOutline, destructiveOutline, successOutline, gradient) |
+| `variant` | `String` | `'default'` | Visual style (default, danger, outline, secondary, ghost, link, success, warning, info, subtle, dark, light, primaryOutline, dangerOutline, successOutline, gradient) |
 | `size` | `String` | `'default'` | Size variant (default, xs, sm, lg, icon) |
 | `disabled` | `Boolean` | `false` | Whether the button is disabled |
 | `loading` | `Boolean` | `false` | Shows loading spinner |
@@ -1004,7 +1004,7 @@ A versatile button component with multiple variants, sizes, and states.
   <div class="space-x-2">
     <Button variant="default">Default</Button>
     <Button variant="outline" size="sm">Outline</Button>
-    <Button variant="destructive" :loading="true" loadingText="Deleting...">
+    <Button variant="danger" :loading="true" loadingText="Deleting...">
       Delete
     </Button>
     <Button variant="icon" size="icon">
@@ -1030,7 +1030,7 @@ A notification component for displaying messages with different variants and opt
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `variant` | `String` | `'info'` | Alert style (info, success, warning, error, default, destructive) |
+| `variant` | `String` | `'info'` | Alert style (info, success, warning, error, default, danger) |
 | `title` | `String` | - | Alert title |
 | `message` | `String` | - | Alert message |
 | `dismissible` | `Boolean` | `false` | Show dismiss button |
@@ -1091,7 +1091,7 @@ A small label component for displaying status, tags, or counts with multiple var
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `variant` | `String` | `'default'` | Visual style (default, secondary, destructive, primary, outline, success, warning, info, ghost, link, subtle, dark, light, primaryOutline, destructiveOutline, successOutline, gradient) |
+| `variant` | `String` | `'default'` | Visual style (default, secondary, danger, primary, outline, success, warning, info, ghost, link, subtle, dark, light, primaryOutline, dangerOutline, successOutline, gradient) |
 | `size` | `String` | `'md'` | Size variant (sm, md, lg) |
 | `shape` | `String` | `'rounded'` | Shape variant (rounded, pill, square) |
 | `icon` | `String \| Object` | `null` | Icon component |
@@ -1120,7 +1120,7 @@ A small label component for displaying status, tags, or counts with multiple var
     <Badge variant="secondary">Secondary</Badge>
     <Badge variant="success" size="sm">Active</Badge>
     <Badge variant="warning" shape="pill">Pending</Badge>
-    <Badge variant="destructive" icon="ExclamationIcon">Error</Badge>
+    <Badge variant="danger" icon="ExclamationIcon">Error</Badge>
     <Badge variant="info">Info</Badge>
     <Badge variant="ghost">Ghost</Badge>
     <Badge variant="link">Link</Badge>
@@ -1128,7 +1128,7 @@ A small label component for displaying status, tags, or counts with multiple var
     <Badge variant="dark">Dark</Badge>
     <Badge variant="light">Light</Badge>
     <Badge variant="primaryOutline">Primary Outline</Badge>
-    <Badge variant="destructiveOutline">Destructive Outline</Badge>
+    <Badge variant="dangerOutline">danger Outline</Badge>
     <Badge variant="successOutline">Success Outline</Badge>
     <Badge variant="gradient">Gradient</Badge>
     <Badge variant="outline" dismissible @dismiss="handleDismiss">
@@ -1968,7 +1968,7 @@ A progress bar component for showing completion status.
 | `value` | `Number` | `0` | Current progress value |
 | `max` | `Number` | `100` | Maximum value |
 | `size` | `String` | `'default'` | Size variant (sm, default, md, lg) |
-| `variant` | `String` | `'default'` | Color variant (default, success, warning, destructive) |
+| `variant` | `String` | `'default'` | Color variant (default, success, warning, danger) |
 
 ### Example
 
@@ -1978,7 +1978,7 @@ A progress bar component for showing completion status.
     <Progress :value="progress" />
     <Progress :value="75" variant="success" size="sm" />
     <Progress :value="50" variant="warning" />
-    <Progress :value="25" variant="destructive" size="lg" />
+    <Progress :value="25" variant="danger" size="lg" />
   </div>
 </template>
 

package/dist/index.esm.js

@@ -3602,7 +3602,7 @@ const Q = {
     variant: {
       type: String,
       default: "default",
-      validator: (e) => ["default", "secondary", "destructive", "primary", "outline", "success", "warning", "info", "ghost", "link", "subtle", "dark", "light", "primaryOutline", "destructiveOutline", "successOutline", "gradient"].includes(e)
+      validator: (e) => ["default", "secondary", "danger", "primary", "outline", "success", "warning", "info", "ghost", "link", "subtle", "dark", "light", "primaryOutline", "dangerOutline", "successOutline", "gradient"].includes(e)
     },
     size: {
       type: String,
@@ -3636,7 +3636,7 @@ const Q = {
           variant: {
             default: "border border-blue-200 bg-blue-50 text-blue-800 hover:bg-blue-100 dark:border-blue-200 dark:bg-blue-50 dark:text-blue-900",
             secondary: "border border-gray-200 bg-gray-50 text-gray-800 hover:bg-gray-100 dark:border-gray-200 dark:bg-gray-50 dark:text-gray-900",
-            destructive: "border border-red-200 bg-red-50 text-red-800 hover:bg-red-100 dark:border-red-200 dark:bg-red-50 dark:text-red-900",
+            danger: "border border-red-200 bg-red-50 text-red-800 hover:bg-red-100 dark:border-red-200 dark:bg-red-50 dark:text-red-900",
             primary: "border border-blue-200 bg-blue-50 text-blue-800 hover:bg-blue-100 dark:border-blue-200 dark:bg-blue-50 dark:text-blue-900",
             outline: "text-foreground border",
             success: "border border-green-200 bg-green-50 text-green-800 dark:border-green-200 dark:bg-green-50 dark:text-green-900",
@@ -3648,7 +3648,7 @@ const Q = {
             dark: "bg-gray-900 text-white hover:bg-black",
             light: "bg-gray-50 text-gray-800 border border-gray-200 hover:bg-gray-100",
             primaryOutline: "border border-blue-500 text-blue-500 bg-transparent hover:bg-blue-50",
-            destructiveOutline: "border border-red-500 text-red-500 bg-transparent hover:bg-red-50",
+            dangerOutline: "border border-red-500 text-red-500 bg-transparent hover:bg-red-50",
             successOutline: "border border-green-500 text-green-500 bg-transparent hover:bg-green-50",
             gradient: "bg-gradient-to-r from-blue-400 to-purple-500 text-white hover:from-blue-500 hover:to-purple-600"
           },
@@ -3711,7 +3711,7 @@ const Q = {
       default: "default",
       validator: (e) => [
         "default",
-        "destructive",
+        "danger",
         "outline",
         "secondary",
         "ghost",
@@ -3723,7 +3723,7 @@ const Q = {
         "dark",
         "light",
         "primaryOutline",
-        "destructiveOutline",
+        "dangerOutline",
         "successOutline",
         "gradient"
       ].includes(e)
@@ -3753,7 +3753,7 @@ const Q = {
         variants: {
           variant: {
             default: "bg-blue-600 text-white hover:bg-blue-700",
-            destructive: "bg-red-600 text-white hover:bg-red-700",
+            danger: "bg-red-600 text-white hover:bg-red-700",
             outline: "border border-gray-300 bg-white text-gray-900 hover:bg-gray-100",
             secondary: "bg-gray-600 text-white hover:bg-gray-700",
             ghost: "bg-transparent text-gray-700 hover:bg-gray-100",
@@ -3765,7 +3765,7 @@ const Q = {
             dark: "bg-gray-900 text-white hover:bg-black",
             light: "bg-gray-50 text-gray-800 border border-gray-200 hover:bg-gray-100",
             primaryOutline: "border border-blue-600 text-blue-600 bg-transparent hover:bg-blue-50",
-            destructiveOutline: "border border-red-600 text-red-600 bg-transparent hover:bg-red-50",
+            dangerOutline: "border border-red-600 text-red-600 bg-transparent hover:bg-red-50",
             successOutline: "border border-green-600 text-green-600 bg-transparent hover:bg-green-50",
             gradient: "bg-gradient-to-r from-blue-500 to-purple-600 text-white hover:from-blue-600 hover:to-purple-700"
           },
@@ -4672,7 +4672,7 @@ const Q = {
     variant: {
       type: String,
       default: "default",
-      validator: (e) => ["default", "success", "warning", "destructive"].includes(e)
+      validator: (e) => ["default", "success", "warning", "danger"].includes(e)
     }
   },
   setup(e) {
@@ -4702,7 +4702,7 @@ const Q = {
             default: "bg-primary",
             success: "bg-green-500",
             warning: "bg-yellow-500",
-            destructive: "bg-red-500"
+            danger: "bg-red-500"
           }
         },
         defaultVariants: {
@@ -4742,7 +4742,7 @@ const Q = {
     variant: {
       type: String,
       default: "default",
-      validator: (e) => ["default", "success", "warning", "destructive"].includes(e)
+      validator: (e) => ["default", "success", "warning", "danger"].includes(e)
     },
     showLabel: Boolean,
     class: String
@@ -4770,7 +4770,7 @@ const Q = {
             default: "bg-primary",
             success: "bg-green-500",
             warning: "bg-yellow-500",
-            destructive: "bg-destructive"
+            danger: "bg-danger"
           }
         }
       }
@@ -5049,7 +5049,7 @@ const Q = {
     variant: {
       type: String,
       default: "default",
-      validator: (e) => ["default", "muted", "destructive"].includes(e)
+      validator: (e) => ["default", "muted", "danger"].includes(e)
     },
     weight: {
       type: String,
@@ -5078,7 +5078,7 @@ const Q = {
           variant: {
             default: "text-foreground",
             muted: "text-muted-foreground",
-            destructive: "text-destructive"
+            danger: "text-danger"
           },
           weight: {
             normal: "font-normal",
@@ -5453,7 +5453,7 @@ const Q = {
     variant: {
       type: String,
       default: "info",
-      validator: (e) => ["info", "success", "warning", "error", "default", "destructive"].includes(
+      validator: (e) => ["info", "success", "warning", "error", "default", "danger"].includes(
         e
       )
     },
@@ -5517,14 +5517,14 @@ const Q = {
       warning: y,
       error: w,
       default: c,
-      destructive: w
+      danger: w
     })[t.variant]), $ = E(
       "relative w-full rounded-lg border p-4 flex items-start gap-3",
       {
         variants: {
           variant: {
             default: "bg-background text-foreground",
-            destructive: "border-destructive/50 text-destructive dark:border-destructive",
+            danger: "border-danger/50 text-danger dark:border-danger",
             info: "bg-blue-50 border-blue-200 text-blue-800",
             success: "bg-green-50 border-green-200 text-green-800",
             warning: "bg-yellow-50 border-yellow-200 text-yellow-800",
@@ -5539,14 +5539,14 @@ const Q = {
       warning: "text-yellow-500",
       error: "text-red-500",
       default: "text-foreground",
-      destructive: "text-destructive"
+      danger: "text-danger"
     }[t.variant]]), x = b(() => ["flex-shrink-0 p-1 rounded-md transition-colors duration-200", {
       info: "text-blue-500 hover:text-blue-700 hover:bg-blue-100",
       success: "text-green-500 hover:text-green-700 hover:bg-green-100",
       warning: "text-yellow-500 hover:text-yellow-700 hover:bg-yellow-100",
       error: "text-red-500 hover:text-red-700 hover:bg-red-100",
       default: "text-foreground hover:text-foreground/80 hover:bg-muted",
-      destructive: "text-destructive hover:text-destructive/80 hover:bg-destructive/10"
+      danger: "text-danger hover:text-danger/80 hover:bg-danger/10"
     }[t.variant]]);
     return (f, m) => (s(), _(ge, {
       "enter-active-class": "transition-all duration-300",
@@ -6508,7 +6508,7 @@ const Q = {
     variant: {
       type: String,
       default: "default",
-      validator: (e) => ["default", "destructive"].includes(e)
+      validator: (e) => ["default", "danger"].includes(e)
     }
   },
   emits: ["click"],
@@ -6519,7 +6519,7 @@ const Q = {
         variants: {
           variant: {
             default: "hover:bg-accent hover:text-accent-foreground",
-            destructive: "text-destructive hover:bg-destructive hover:text-destructive-foreground"
+            danger: "text-danger hover:bg-danger hover:text-danger-foreground"
           }
         }
       }
@@ -6983,7 +6983,7 @@ const Q = {
     variant: {
       type: String,
       default: "default",
-      validator: (e) => ["default", "destructive"].includes(e)
+      validator: (e) => ["default", "danger"].includes(e)
     }
   },
   emits: ["click"],
@@ -6994,7 +6994,7 @@ const Q = {
         variants: {
           variant: {
             default: "hover:bg-accent hover:text-accent-foreground",
-            destructive: "text-destructive hover:bg-destructive hover:text-destructive-foreground"
+            danger: "text-danger hover:bg-danger hover:text-danger-foreground"
           }
         }
       }
@@ -7209,7 +7209,7 @@ const Q = {
     variant: {
       type: String,
       default: "default",
-      validator: (e) => ["default", "success", "warning", "destructive"].includes(e)
+      validator: (e) => ["default", "success", "warning", "danger"].includes(e)
     },
     dismissible: {
       type: Boolean,
@@ -7235,7 +7235,7 @@ const Q = {
             default: "border-l-4 border-primary",
             success: "border-l-4 border-green-500",
             warning: "border-l-4 border-yellow-500",
-            destructive: "border-l-4 border-destructive"
+            danger: "border-l-4 border-danger"
           }
         }
       }
@@ -7243,14 +7243,14 @@ const Q = {
       default: "info",
       success: "check-circle",
       warning: "alert-triangle",
-      destructive: "alert-circle"
+      danger: "alert-circle"
     }, c = E("h-5 w-5", {
       variants: {
         variant: {
           default: "text-primary",
           success: "text-green-500",
           warning: "text-yellow-500",
-          destructive: "text-destructive"
+          danger: "text-danger"
         }
       }
     }), g = b(
@@ -7275,7 +7275,7 @@ const Q = {
           key: 0,
           class: v(g.value),
           role: "alert",
-          "aria-live": e.variant === "destructive" ? "assertive" : "polite"
+          "aria-live": e.variant === "danger" ? "assertive" : "polite"
         }, [
           i("div", hd, [
             e.showIcon ? (s(), u("div", yd, [
@@ -10260,7 +10260,7 @@ const $d = {
       default: "default",
       primary: "gradient",
       secondary: "secondary",
-      destructive: "destructive",
+      danger: "danger",
       success: "success",
       warning: "warning",
       info: "info",
@@ -10268,7 +10268,7 @@ const $d = {
       dark: "dark",
       light: "light",
       primaryOutline: "primaryOutline",
-      destructiveOutline: "destructiveOutline",
+      dangerOutline: "dangerOutline",
       successOutline: "successOutline",
       outline: "outline",
       link: "link",
@@ -10607,7 +10607,7 @@ const $d = {
       }, 8, ["current-page", "total-pages", "total", "page-size", "show-pagination", "selectable", "selected-count", "variant", "padding", "loading", "disabled"])) : h("", !0)
     ], 2));
   }
-}, vm = /* @__PURE__ */ jt(gm, [["__scopeId", "data-v-7d6cfd43"]]), bm = {
+}, vm = /* @__PURE__ */ jt(gm, [["__scopeId", "data-v-3ac63b7b"]]), bm = {
   __name: "DataTableCell",
   props: {
     item: {
@@ -11509,7 +11509,7 @@ const $d = {
     icon: {
       template: '<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" /></svg>'
     },
-    variant: "destructive"
+    variant: "danger"
   },
   {
     key: "edit",
@@ -12480,8 +12480,8 @@ const $d = {
           }, [
             d.type === "hidden" ? Xe((s(), u("input", {
               key: 0,
-              type: "hidden",
-              "onUpdate:modelValue": (S) => l.value[d.name] = S
+              "onUpdate:modelValue": (S) => l.value[d.name] = S,
+              type: "hidden"
             }, null, 8, cv)), [
               [wt, l.value[d.name]]
             ]) : (s(), _(xr, {