vlite3 1.2.4 → 1.2.7

package/README.md

@@ -1,6 +1,12 @@
-# vlite3
+# Vlite3: The Foundation for Enterprise SaaS
 
-A lightweight Vue 3 UI component library built with Tailwind CSS, created for personal projects and available for anyone to use.
+A clean, modular, and highly customizable component library for Vue 3. Build large, complex applications with confidence. Vlite3 gives you the solid, Vlite3 delivers 80+ production-ready components designed for real-world enterprise applications. Each component has been thoroughly tested in demanding enterprise production environments, ensuring stability, scalability, and performance.
+
+Created for personal projects and available for anyone to use.
+
+## Demo
+
+[Live Demo](https://vlite3.vercel.app/)
 
 ## Installation
 
@@ -14,10 +20,6 @@ yarn add vlite3
 
 ```
 
-## Demo
-
-[Live Demo](https://vlite3.vercel.app/)
-
 ## 2. Tailwind CSS Setup (Tailwind v4)
 
 `vite.config.ts`
@@ -407,6 +409,8 @@ Follow these rules strictly to ensure visual consistency and predictable styling
 - [x] **Screen**
 - [x] **ChatInterface**
 - [x] **CommentThread**
+- [x] **Clipboard**
+- [x] **AppShell**
 
 ### Inputs & Forms
 
@@ -426,7 +430,7 @@ Follow these rules strictly to ensure visual consistency and predictable styling
 - [x] **AvatarUploader**
 - [x] **ThumbnailSelector**
 - [x] **IconPicker**
-- [x] **MultiSelect**
+- [x] **RadioGroup**
 - [x] **Forms**
 - [x] **CustomFields**
 - [x] **GoogleLogin**
@@ -437,6 +441,7 @@ Follow these rules strictly to ensure visual consistency and predictable styling
 ### Data Display
 
 - [x] **Avatar**
+- [x] **Persona**
 - [x] **Accordion**
 - [x] **Carousel**
 - [x] **DataTable**
@@ -456,16 +461,21 @@ Follow these rules strictly to ensure visual consistency and predictable styling
 - [x] **Invoice**
 - [x] **Footer**
 - [x] **Charts**
+- [x] **GanttChart**
+- [x] **ImageComparison**
 
 ### Feedback & Overlays
 
 - [x] **Alert**
+- [x] **Beacon**
 - [x] **Modal**
 - [x] **Empty**
 - [x] **ConfirmationModal**
 - [x] **ToastNotification**
 - [x] **Tooltip**
 - [x] **Dropdown**
+- [x] **MultiSelect**
+- [x] **AsyncSelect**
 - [x] **ProgressBar**
 - [x] **Spinner**
 - [x] **CommandPalette**
@@ -485,7 +495,11 @@ Follow these rules strictly to ensure visual consistency and predictable styling
 - [0-setup.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/0-vlite3-setup.md)
 - [1-theming.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/1-theming.md)
 - [2-components.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/2-all-components.md)
-- [3-forms.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/components/Forms.md)
+- [3-forms.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/1-Components/Forms.md)
 - [3-utility.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/3-utility.md)
 - [4-i18n.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/4-i18n.md)
 - [5-search-util.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/5-search-util.md)
+
+## Author
+
+[safdar-azeem](https://github.com/safdar-azeem)

package/components/AvatarGroup/AvatarGroup.vue.js

@@ -1,7 +1,7 @@
-import { defineComponent as k, computed as u, openBlock as l, createElementBlock as s, normalizeClass as a, Fragment as z, renderList as b, createVNode as f, withCtx as x, createElementVNode as y, toDisplayString as r, createCommentVNode as o, normalizeStyle as C } from "vue";
-import p from "../Avatar.vue.js";
-import S from "../Tooltip.vue.js";
-const w = { class: "flex flex-col gap-0.5 text-left" }, N = {
+import { defineComponent as k, computed as u, openBlock as l, createElementBlock as s, normalizeClass as a, Fragment as z, renderList as b, createVNode as f, withCtx as x, createElementVNode as p, toDisplayString as r, createCommentVNode as o, normalizeStyle as y } from "vue";
+import C from "../Avatar.vue.js";
+import w from "../Tooltip.vue.js";
+const S = { class: "flex flex-col gap-0.5 text-left" }, N = {
   key: 0,
   class: "font-semibold text-sm text-tooltip-foreground"
 }, V = {
@@ -44,18 +44,19 @@ const w = { class: "flex flex-col gap-0.5 text-left" }, N = {
         key: c,
         class: a([c !== 0 ? m[e.overlap] : "", "relative shrink-0"])
       }, [
-        f(S, {
+        f(w, {
           disabled: !t.heading && !t.text,
-          placement: "top"
+          placement: "top",
+          contentClass: "min-w-[100px] px-10!"
         }, {
           content: x(() => [
-            y("div", w, [
+            p("div", S, [
               t.heading ? (l(), s("span", N, r(t.heading), 1)) : o("", !0),
               t.text ? (l(), s("span", V, r(t.text), 1)) : o("", !0)
             ])
           ]),
           default: x(() => [
-            f(p, {
+            f(C, {
               src: t.src,
               alt: t.alt,
               fallback: t.fallback,
@@ -76,7 +77,7 @@ const w = { class: "flex flex-col gap-0.5 text-left" }, N = {
           g,
           e.rounded === "full" ? "rounded-full" : e.rounded === "none" ? "rounded-none" : `rounded-${e.rounded}`
         ]),
-        style: C({
+        style: y({
           // Match the same size as Avatar sizeClasses
           width: i[e.size],
           height: i[e.size],

package/components/Beacon.vue.d.ts

@@ -0,0 +1,13 @@
+export type BeaconVariant = 'primary' | 'danger' | 'warning' | 'success' | 'info';
+export type BeaconSize = 'sm' | 'md' | 'lg';
+interface Props {
+    variant?: BeaconVariant | string;
+    size?: BeaconSize | string;
+    class?: any;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    class: any;
+    variant: BeaconVariant | string;
+    size: BeaconSize | string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLSpanElement>;
+export default _default;

package/components/Button.vue.js

@@ -1,8 +1,8 @@
-import { defineComponent as z, computed as l, useSlots as k, withDirectives as $, openBlock as o, createElementBlock as g, normalizeClass as s, createBlock as d, createCommentVNode as h, renderSlot as m, createTextVNode as b, toDisplayString as f, unref as B } from "vue";
-import u from "./Icon.vue.js";
+import { defineComponent as k, computed as l, useSlots as z, withDirectives as $, openBlock as o, createElementBlock as u, normalizeClass as s, createBlock as d, createCommentVNode as h, renderSlot as m, createTextVNode as b, toDisplayString as f, unref as B } from "vue";
+import g from "./Icon.vue.js";
 import { vRipple as I } from "../directives/vRipple.js";
 import { $t as R } from "../utils/i18n.js";
-const S = ["type", "disabled", "data-testid"], T = /* @__PURE__ */ z({
+const S = ["type", "disabled", "data-testid"], T = /* @__PURE__ */ k({
   __name: "Button",
   props: {
     variant: { default: "primary" },
@@ -22,21 +22,21 @@ const S = ["type", "disabled", "data-testid"], T = /* @__PURE__ */ z({
     asIcon: { type: Boolean }
   },
   setup(e) {
-    const t = e, r = l(() => t.textI18n ? R(t.textI18n) : t.text), v = k(), i = l(
-      () => t?.asIcon || t.icon && !r.value && !v.default
-    ), x = l(() => {
+    const t = e, r = l(() => t.textI18n ? R(t.textI18n) : t.text), x = z(), i = l(
+      () => t?.asIcon || t.icon && !r.value && !x.default
+    ), v = l(() => {
       const n = `inline-flex items-center justify-center whitespace-nowrap text-sm font-medium disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98] cursor-pointer gap-2 ${i.value ? "icon-only shrink-0" : ""}`, a = {
         primary: "bg-primary text-primary-foreground hover:bg-primary/90",
-        "primary-light": "bg-primary-light text-primary-fg-light hover:bg-primary/20",
+        "primary-light": "bg-primary-light text-primary-fg-light hover:bg-primary/15",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        danger: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        "danger-light": "bg-destructive/10 text-destructive hover:bg-destructive/20",
+        danger: "bg-danger text-danger-fg hover:bg-danger/90",
+        "danger-light": "bg-danger-light text-destructive hover:bg-danger/20 dark:hover:bg-danger/40",
         warning: "bg-warning text-warning-fg hover:bg-warning/80",
-        "warning-light": "bg-warning-light text-warning-fg-light hover:bg-warning/20",
+        "warning-light": "bg-warning-light text-warning-fg-light hover:bg-warning/25",
         info: "bg-info text-info-fg hover:bg-info/80",
-        "info-light": "bg-info-light text-info-fg-light hover:bg-info/20",
+        "info-light": "bg-info-light text-info-fg-light hover:bg-info/30",
         success: "bg-success text-success-fg hover:bg-success/80",
-        "success-light": "bg-success-light text-success-fg-light hover:bg-success/20",
+        "success-light": "bg-success-light text-success-fg-light hover:bg-success/20 dark:hover:bg-success/35",
         outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground text-foreground",
         "outline-floating": "border px-3.5! border-input bg-transparent hover:bg-transparent text-foreground border-input active:scale-100!",
         "outline-primary": "border border-primary text-primary hover:bg-primary/10",
@@ -97,22 +97,22 @@ const S = ["type", "disabled", "data-testid"], T = /* @__PURE__ */ z({
       };
       return i.value ? a[t.size] : n[t.size];
     });
-    return (n, a) => $((o(), g("button", {
+    return (n, a) => $((o(), u("button", {
       type: e.type,
-      class: s([x.value, "cursor-pointer"]),
+      class: s([v.value, "cursor-pointer"]),
       disabled: e.disabled || e.loading,
       "data-testid": n.$attrs["data-testid"] || (r.value ? `btn-${r.value.toString().toLowerCase().replace(/[^a-z0-9]+/g, "-")}` : e.icon ? `btn-${e.icon.replace(/[^a-zA-Z0-9]+/g, "-")}` : "button")
     }, [
-      e.loading ? (o(), d(u, {
+      e.loading ? (o(), d(g, {
         key: 0,
         icon: "lucide:loader-2",
         class: s(["animate-spin pointer-events-none", c.value])
-      }, null, 8, ["class"])) : e.icon ? (o(), d(u, {
+      }, null, 8, ["class"])) : e.icon ? (o(), d(g, {
         key: 1,
         icon: e.icon,
         class: s(["pointer-events-none", [e.iconClass, c.value, i.value ? "mx-auto" : ""]])
       }, null, 8, ["icon", "class"])) : h("", !0),
-      e.textClass ? (o(), g("span", {
+      e.textClass ? (o(), u("span", {
         key: 2,
         class: s(e.textClass)
       }, [
@@ -122,7 +122,7 @@ const S = ["type", "disabled", "data-testid"], T = /* @__PURE__ */ z({
       ], 2)) : m(n.$slots, "default", { key: 3 }, () => [
         b(f(r.value), 1)
       ]),
-      e.iconRight && !e.loading ? (o(), d(u, {
+      e.iconRight && !e.loading ? (o(), d(g, {
         key: 4,
         icon: e.iconRight,
         class: s([[e.iconRightClass, c.value], "h-4 w-4 pointer-events-none"])

package/components/Chart/GanttChart.vue.d.ts

@@ -0,0 +1,67 @@
+import { GanttTask, GanttViewMode } from './types';
+export interface GanttChartProps {
+    tasks: GanttTask[];
+    viewMode?: GanttViewMode;
+    height?: number;
+    rowHeight?: number;
+    barRadius?: number;
+    barHeight?: number;
+    sidebarWidth?: number;
+    showGrid?: boolean;
+    showTooltip?: boolean;
+    showLabels?: boolean;
+    showProgress?: boolean;
+    showDependencies?: boolean;
+    showTodayLine?: boolean;
+    showHeader?: boolean;
+    animate?: boolean;
+    colors?: string[];
+    todayColor?: string;
+    locale?: string;
+    draggable?: boolean;
+    /** When moving a task, also shift all tasks that depend on it (recursively) */
+    cascadeDependencies?: boolean;
+    zoom?: boolean;
+}
+declare const _default: import('vue').DefineComponent<GanttChartProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "task-click": (task: GanttTask) => any;
+    "task-hover": (task: GanttTask) => any;
+    "task-update": (task: GanttTask, changes: {
+        start: Date;
+        end: Date;
+    }) => any;
+}, string, import('vue').PublicProps, Readonly<GanttChartProps> & Readonly<{
+    "onTask-click"?: (task: GanttTask) => any;
+    "onTask-hover"?: (task: GanttTask) => any;
+    "onTask-update"?: (task: GanttTask, changes: {
+        start: Date;
+        end: Date;
+    }) => any;
+}>, {
+    animate: boolean;
+    height: number;
+    draggable: boolean;
+    showHeader: boolean;
+    colors: string[];
+    showLabels: boolean;
+    showTooltip: boolean;
+    showGrid: boolean;
+    barRadius: number;
+    rowHeight: number;
+    barHeight: number;
+    viewMode: GanttViewMode;
+    sidebarWidth: number;
+    showProgress: boolean;
+    showDependencies: boolean;
+    showTodayLine: boolean;
+    todayColor: string;
+    locale: string;
+    cascadeDependencies: boolean;
+    zoom: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    containerRef: HTMLDivElement;
+    sidebarRef: HTMLDivElement;
+    timelineRef: HTMLDivElement;
+    dragLabelRef: SVGGElement;
+}, HTMLDivElement>;
+export default _default;

package/components/Chart/GanttChart.vue.js

@@ -0,0 +1,7 @@
+import t from "./GanttChart.vue2.js";
+/* empty css                */
+import o from "../../_virtual/_plugin-vue_export-helper.js";
+const m = /* @__PURE__ */ o(t, [["__scopeId", "data-v-91cc2885"]]);
+export {
+  m as default
+};