vlite3 0.1.9 → 0.2.1

package/README.md

@@ -1,6 +1,6 @@
 # vlite3
 
-A lightweight Vue 3 UI component library built with Tailwind CSS.
+A lightweight Vue 3 UI component library built with Tailwind CSS, created for personal projects and available for anyone to use.
 
 ## Installation
 
@@ -138,6 +138,59 @@ To customize the theme, simply override the CSS variables in your main CSS file:
 }
 ```
 
+## 8. Typography Scale System
+
+The system is divided into two groups:
+
+- Compact scale (prefixed with `--text--fs-*`) for smaller text
+- Progressive scale (prefixed with `--text-fs-*`) for base and larger text
+
+### Compact Text Scale
+
+```css
+--text--fs-1: 0.95em;
+--text--fs-2: 0.8em;
+--text--fs-3: 0.75em;
+--text--fs-4: 0.7em;
+--text--fs-5: 0.65em;
+--text--fs-6: 0.6em;
+--text--fs-7: 0.55em;
+--text--fs-8: 0.5em;
+--text-fs-0.5: 1.05em;
+--text-fs-1: 1.1em;
+--text-fs-1.5: 1.14em;
+--text-fs-2: 1.18em;
+--text-fs-2.5: 1.22em;
+--text-fs-3: 1.26em;
+--text-fs-3.5: 1.3em;
+--text-fs-4: 1.34em;
+--text-fs-4.5: 1.38em;
+--text-fs-5: 1.42em;
+--text-fs-5.5: 1.46em;
+--text-fs-6: 1.5em;
+--text-fs-6.5: 1.54em;
+--text-fs-7: 1.58em;
+--text-fs-7.5: 1.62em;
+--text-fs-8: 1.68em;
+--text-fs-8.5: 1.72em;
+--text-fs-9: 1.8em;
+--text-fs-9.5: 2em;
+--text-fs-10: 2.5em;
+
+--text-xs: 0.75rem --text-sm: 0.875rem --text-base: 1rem --text-lg: 1.125rem --text-xl: 1.25rem
+  --text-2xl: 1.5rem --text-3xl: 1.875rem --text-4xl: 2.25rem --text-5xl: 3rem --text-6xl: 4rem;
+```
+
+---
+
+```html
+<p class="text-fs-2">Body text</p>
+
+<span class="-text-fs-4 text-muted"> Caption text </span>
+
+<h1 class="text-xl font-semibold">Page Title</h1>
+```
+
 ## ✅ Components
 
 - **Button**
@@ -170,6 +223,8 @@ To customize the theme, simply override the CSS variables in your main CSS file:
 - **MultiSelect**
 - **Form**
 - **CustomFields**
+- **NumberInput**
+- **Google Login**
 
 ### Data Display
 
@@ -193,110 +248,12 @@ To customize the theme, simply override the CSS variables in your main CSS file:
 - **ToastNotification**
 - **Tooltip**
 - **Dropdown**
+- **ProgressBar**
+- **Spinner**
 
-## Global Configuration (Registry System)
-
-vlite3 features a plugin-based architecture that allows you to register global services. This is particularly useful for dependency injection, such as defining how file uploads should be handled across all `Form` components in your app.
-
-### Setting up the Plugin
-
-In your `main.ts` or `main.js`, import `createVLite` and register your services:
-
-```typescript
-import { createApp } from 'vue'
-import App from './App.vue'
-import { createVLite } from 'vlite3'
-
-const app = createApp(App)
-
-// Initialize VLite with custom configuration
-const vlite = createVLite({
-  services: {
-    /**
-     * Global File Upload Handler
-     *
-     * This function will be called automatically by:
-     * - useFileUpload() composable
-     * - Form components (when using 'file', 'fileUploader', or 'avatarUpload' types)
-     *
-     * @param file - The File object to upload
-     * @param folderId - (Optional) Folder ID passed from component props
-     * @returns Promise<string> - The public URL of the uploaded file
-     */
-    upload: async (file, folderId) => {
-      // Example: Upload to your own backend
-      const formData = new FormData()
-      formData.append('file', file)
-      if (folderId) formData.append('folder_id', folderId)
-
-      // Replace with your actual API call (e.g., Axios, Fetch)
-      const response = await fetch(
-        '[https://api.yourdomain.com/v1/upload](https://api.yourdomain.com/v1/upload)',
-        {
-          method: 'POST',
-          body: formData,
-          headers: {
-            Authorization: 'Bearer ...',
-          },
-        }
-      )
-
-      if (!response.ok) throw new Error('Upload failed')
-
-      const data = await response.json()
-      return data.url // MUST return the file URL string
-    },
-  },
-})
-
-app.use(vlite)
-app.mount('#app')
-```
-
-### How it works
-
-Once registered, you don't need to pass upload handlers to individual components.
+# Complete reference for AI agents and developers:
 
-1. **Automatic Injection**: The `Form` component detects input types like `file`, `avatarUpload`, or `fileUploader`.
-2. **Parallel Processing**: When the form is submitted, it automatically uploads all files in **parallel** using your registered `upload` service.
-3. **URL Replacement**: The File objects in your form data are replaced with the returned URLs before the final `onSubmit` event is triggered.
-
-## 4. Usage
-
-Import components directly in your Vue files:
-
-```vue
-<script setup>
-import { Button, Input, Form } from 'vlite3'
-
-// The form will automatically use the global upload service defined in main.ts
-const schema = [
-  {
-    name: 'avatar',
-    label: 'Profile Picture',
-    type: 'avatarUpload',
-  },
-  {
-    name: 'documents',
-    label: 'Attachments',
-    type: 'fileUploader',
-    props: { multiple: true },
-  },
-]
-
-const handleSubmit = (payload) => {
-  // payload.values.avatar will be a URL string (e.g., "https://api...")
-  // payload.values.documents will be an array of URL strings
-  console.log(payload.values)
-}
-</script>
-
-<template>
-  <div class="p-4 space-y-4">
-    <Button>Click Me</Button>
-    <Input placeholder="Type here..." />
-
-    <Form :schema="schema" @onSubmit="handleSubmit" />
-  </div>
-</template>
-```
+- [llms.txt](https://github.com/safdar-azeem/vlite3/blob/main/llms.txt).
+- [llms-theming.txt](https://github.com/safdar-azeem/vlite3/blob/main/llms-theming.txt).
+- [llms-full.txt](https://github.com/safdar-azeem/vlite3/blob/main/llms-full.txt).
+- [llms-advance.txt](https://github.com/safdar-azeem/vlite3/blob/main/llms-advance.txt).

package/components/Button.vue.js

@@ -17,7 +17,7 @@ const R = ["type", "disabled"], D = /* @__PURE__ */ v({
   },
   setup(e) {
     const t = e, g = x(), l = s(() => t.icon && !t.text && !g.default), h = s(() => {
-      const n = "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-95 cursor-pointer gap-2", d = {
+      const n = "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98] cursor-pointer gap-2", d = {
         primary: "bg-primary text-primary-foreground hover:bg-primary/90",
         "primary-light": "bg-primary-light text-primary-fg-light hover:bg-primary/20",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",

package/components/Chip/Chip.vue.js

@@ -1,5 +1,5 @@
 import { defineComponent as $, computed as s, openBlock as l, createElementBlock as c, normalizeClass as o, renderSlot as u, createBlock as d, createCommentVNode as i, createTextVNode as C, toDisplayString as z, withCtx as B, createVNode as D } from "vue";
-import b from "../Icon.vue.js";
+import f from "../Icon.vue.js";
 import S from "../Button.vue.js";
 const N = ["role", "tabindex"], V = {
   key: 0,
@@ -17,8 +17,8 @@ const N = ["role", "tabindex"], V = {
     class: { default: "" }
   },
   emits: ["click", "delete"],
-  setup(a, { emit: f }) {
-    const t = a, n = f, r = s(() => t.clickable && !t.disabled), g = (e) => {
+  setup(a, { emit: b }) {
+    const t = a, n = b, r = s(() => t.clickable && !t.disabled), g = (e) => {
       t.disabled || t.clickable && n("click", e);
     }, v = (e) => {
       t.disabled || (e.stopPropagation(), n("delete", e));
@@ -27,11 +27,11 @@ const N = ["role", "tabindex"], V = {
     }, h = s(() => {
       switch (t.size) {
         case "small":
-          return "h-6 text-xs px-2 gap-1.5";
+          return "h-5 text-[10px] px-1.5 gap-1";
         case "large":
-          return "h-10 text-base px-4 gap-2.5";
-        default:
           return "h-8 text-sm px-3 gap-2";
+        default:
+          return "h-6 text-xs px-2.5 gap-1.5";
       }
     }), x = s(() => {
       if (t.disabled)
@@ -53,20 +53,20 @@ const N = ["role", "tabindex"], V = {
     }), p = s(() => [j, h.value, x.value, t.class].join(" ")), k = s(() => {
       switch (t.size) {
         case "small":
-          return "h-3.5 w-3.5";
+          return "h-3 w-3";
         case "large":
-          return "h-5 w-5";
-        default:
           return "h-4 w-4";
+        default:
+          return "h-3.5 w-3.5";
       }
     }), y = s(() => {
       switch (t.size) {
         case "small":
-          return "h-3 w-3";
+          return "h-2.5 w-2.5";
         case "large":
-          return "h-4 w-4";
-        default:
           return "h-3.5 w-3.5";
+        default:
+          return "h-3 w-3";
       }
     });
     return (e, w) => (l(), c("div", {
@@ -77,7 +77,7 @@ const N = ["role", "tabindex"], V = {
       onKeydown: m
     }, [
       u(e.$slots, "icon", {}, () => [
-        a.icon ? (l(), d(b, {
+        a.icon ? (l(), d(f, {
           key: 0,
           icon: a.icon,
           class: o([k.value, "shrink-0", a.text ? "-ml-0.5" : ""])
@@ -94,11 +94,11 @@ const N = ["role", "tabindex"], V = {
         size: "xs",
         rounded: "full",
         disabled: a.disabled,
-        class: o(["ml-auto !p-0.5 !h-auto !w-auto hover:bg-[#8282823c]", [a.text ? a.size === "small" ? "-mr-0.5" : "-mr-1" : ""]]),
+        class: o(["ml-auto p-0.5! h-auto! w-auto! hover:bg-[#8282823c]", [a.text ? a.size === "small" ? "-mr-0.5" : "-mr-1" : ""]]),
         onClick: v
       }, {
         default: B(() => [
-          D(b, {
+          D(f, {
             icon: "lucide:x",
             class: o(y.value)
           }, null, 8, ["class"])

package/components/ConfirmationModal.vue.js

@@ -1,7 +1,7 @@
-import { defineComponent as f, openBlock as m, createBlock as u, withCtx as a, createElementVNode as x, createVNode as d, renderSlot as r } from "vue";
+import { defineComponent as f, openBlock as m, createBlock as u, withCtx as a, createElementVNode as x, createVNode as r, renderSlot as d } from "vue";
 import g from "./Modal.vue.js";
-import s from "./Button.vue.js";
-const w = { class: "flex w-full items-center justify-end space-x-2 pt-4" }, p = /* @__PURE__ */ f({
+import c from "./Button.vue.js";
+const w = { class: "flex w-full items-center justify-end space-x-2" }, k = /* @__PURE__ */ f({
   __name: "ConfirmationModal",
   props: {
     show: { type: Boolean, default: !1 },
@@ -13,36 +13,39 @@ const w = { class: "flex w-full items-center justify-end space-x-2 pt-4" }, p =
     variant: { default: "danger" }
   },
   emits: ["cancel", "confirm"],
-  setup(e, { emit: c }) {
-    const i = c, n = () => {
+  setup(e, { emit: s }) {
+    const i = s, n = () => {
       i("cancel");
     };
     return (l, t) => (m(), u(g, {
       show: e.show,
       title: e.title,
       description: e.description,
+      footerClass: "border-t-0! pt-0! pb-3.5!",
       "max-width": "max-w-[400px]",
       onClose: n,
       "onUpdate:show": t[1] || (t[1] = (o) => !o && n())
     }, {
       trigger: a(() => [
-        r(l.$slots, "trigger", {}, () => [
-          r(l.$slots, "default")
+        d(l.$slots, "trigger", {}, () => [
+          d(l.$slots, "default")
         ])
       ]),
-      default: a(() => [
+      footer: a(({ close: o }) => [
         x("div", w, [
-          d(s, {
+          r(c, {
             variant: "outline",
             text: e.cancelText,
             disabled: e.loading,
-            onClick: n
-          }, null, 8, ["text", "disabled"]),
-          d(s, {
+            onClick: () => {
+              o?.(), n?.();
+            }
+          }, null, 8, ["text", "disabled", "onClick"]),
+          r(c, {
             variant: e.variant,
             text: e.confirmText,
             loading: e.loading,
-            onClick: t[0] || (t[0] = (o) => i("confirm"))
+            onClick: t[0] || (t[0] = (C) => i("confirm"))
           }, null, 8, ["variant", "text", "loading"])
         ])
       ]),
@@ -51,5 +54,5 @@ const w = { class: "flex w-full items-center justify-end space-x-2 pt-4" }, p =
   }
 });
 export {
-  p as default
+  k as default
 };

package/components/DataTable/DataTable.vue.js

@@ -1,7 +1,7 @@
 import o from "./DataTable.vue2.js";
 /* empty css               */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-896cd72f"]]);
+const e = /* @__PURE__ */ t(o, [["__scopeId", "data-v-53f1fe21"]]);
 export {
-  m as default
+  e as default
 };

package/components/DataTable/DataTable.vue2.js

@@ -1,9 +1,9 @@
-import { defineComponent as ee, ref as g, computed as b, watch as p, onMounted as te, openBlock as r, createElementBlock as d, createVNode as C, createSlots as V, withCtx as T, renderSlot as S, createBlock as D, createCommentVNode as I, createElementVNode as n, normalizeClass as B, Fragment as R, renderList as $, normalizeStyle as A, mergeProps as le, toDisplayString as M, createTextVNode as ae, unref as se } from "vue";
+import { defineComponent as ee, ref as g, computed as b, watch as p, onMounted as te, openBlock as n, createElementBlock as i, createVNode as C, createSlots as V, withCtx as T, renderSlot as S, createBlock as D, createCommentVNode as I, createElementVNode as r, normalizeClass as B, Fragment as R, renderList as $, normalizeStyle as A, mergeProps as le, toDisplayString as M, createTextVNode as ae, unref as se } from "vue";
 import oe from "../Icon.vue.js";
-import re from "../CheckBox.vue.js";
-import ne from "../Button.vue.js";
-import de from "../ConfirmationModal.vue.js";
-import ie from "../Pagination/Pagination.vue.js";
+import ne from "../CheckBox.vue.js";
+import re from "../Button.vue.js";
+import ie from "../ConfirmationModal.vue.js";
+import de from "../Pagination/Pagination.vue.js";
 import ue from "./DataTableHeader.vue.js";
 import ce from "./DataTableRow.vue.js";
 import me from "./DataTableToolbar.vue.js";
@@ -35,6 +35,7 @@ const fe = { class: "space-y-4" }, he = { class: "overflow-x-auto w-full" }, ve
     emptyDescription: { default: "No results found. Try adjusting your filters or search terms." },
     emptyIcon: { default: "lucide:inbox" },
     showPagination: { type: Boolean, default: !0 },
+    paginationPosition: {},
     pageInfo: {},
     itemsPerPage: { default: 10 },
     itemsPerPageOptions: { default: () => [10, 25, 50, 100] },
@@ -50,7 +51,7 @@ const fe = { class: "space-y-4" }, he = { class: "overflow-x-auto w-full" }, ve
   },
   emits: ["change", "select", "rowClick", "update:itemsPerPage", "update:selectedRows", "delete"],
   setup(a, { emit: U }) {
-    const O = (e, t) => t.split(".").reduce((s, c) => s?.[c], e), u = (e, t) => O(e, t), l = a, w = U, i = g({ field: "", order: "" }), k = g(l.itemsPerPage), h = g(l.pageInfo?.currentPage || 1), y = g(l.search || ""), P = g(!1), v = g("initial"), L = b(() => l.loading && (v.value === "initial" || v.value === "page"));
+    const O = (e, t) => t.split(".").reduce((s, c) => s?.[c], e), u = (e, t) => O(e, t), l = a, w = U, d = g({ field: "", order: "" }), k = g(l.itemsPerPage), h = g(l.pageInfo?.currentPage || 1), y = g(l.search || ""), P = g(!1), v = g("initial"), L = b(() => l.loading && (v.value === "initial" || v.value === "page"));
     p(
       () => l.loading,
       (e, t) => {
@@ -110,7 +111,7 @@ const fe = { class: "space-y-4" }, he = { class: "overflow-x-auto w-full" }, ve
       };
       w("select", c), w("update:selectedRows", s);
     }, H = (e) => {
-      i.value.field === e ? i.value.order === "asc" ? i.value.order = "desc" : i.value.order === "desc" ? (i.value.order = "", i.value.field = "") : i.value.order = "asc" : (i.value.field = e, i.value.order = "asc"), h.value = 1, v.value = "sort", x();
+      d.value.field === e ? d.value.order === "asc" ? d.value.order = "desc" : d.value.order === "desc" ? (d.value.order = "", d.value.field = "") : d.value.order = "asc" : (d.value.field = e, d.value.order = "asc"), h.value = 1, v.value = "sort", x();
     }, J = (e) => {
       h.value = e, v.value = "page", x();
     }, K = (e) => {
@@ -126,7 +127,7 @@ const fe = { class: "space-y-4" }, he = { class: "overflow-x-auto w-full" }, ve
           page: h.value,
           limit: k.value
         },
-        sorting: { ...i.value },
+        sorting: { ...d.value },
         search: y.value
       });
     }, Y = b(() => [
@@ -144,7 +145,7 @@ const fe = { class: "space-y-4" }, he = { class: "overflow-x-auto w-full" }, ve
       }
     ), te(() => {
       x();
-    }), (e, t) => (r(), d("div", fe, [
+    }), (e, t) => (n(), i("div", fe, [
       C(me, {
         modelValue: y.value,
         "onUpdate:modelValue": t[1] || (t[1] = (s) => y.value = s),
@@ -161,7 +162,7 @@ const fe = { class: "space-y-4" }, he = { class: "overflow-x-auto w-full" }, ve
         e.$slots?.["toolbar-right"] || o.value.size > 0 ? {
           name: "right",
           fn: T(() => [
-            o.value.size > 0 ? (r(), D(ne, {
+            o.value.size > 0 ? (n(), D(re, {
               key: 0,
               rounded: "full",
               variant: "ghost",
@@ -174,23 +175,23 @@ const fe = { class: "space-y-4" }, he = { class: "overflow-x-auto w-full" }, ve
           key: "1"
         } : void 0
       ]), 1032, ["modelValue", "show-search", "placeholder"]),
-      n("div", {
+      r("div", {
         class: B(Y.value)
       }, [
-        n("div", he, [
-          n("table", {
+        r("div", he, [
+          r("table", {
             class: B([Z.value, ""])
           }, [
-            n("thead", {
+            r("thead", {
               class: B([
                 "[&_tr]:border-b [&_tr]:border-border/70! bg-muted",
                 a.variant === "raised" ? "[&_th:first-child]:rounded-tl-lg [&_th:last-child]:rounded-tr-lg" : ""
               ])
             }, [
-              n("tr", ve, [
-                a.selectable ? (r(), d("th", ge, [
-                  n("div", pe, [
-                    C(re, {
+              r("tr", ve, [
+                a.selectable ? (n(), i("th", ge, [
+                  r("div", pe, [
+                    C(ne, {
                       "model-value": z.value,
                       indeterminate: E.value,
                       size: "xs",
@@ -198,10 +199,10 @@ const fe = { class: "space-y-4" }, he = { class: "overflow-x-auto w-full" }, ve
                     }, null, 8, ["model-value", "indeterminate"])
                   ])
                 ])) : I("", !0),
-                (r(!0), d(R, null, $(a.headers, (s) => (r(), D(ue, {
+                (n(!0), i(R, null, $(a.headers, (s) => (n(), D(ue, {
                   key: s.field,
                   header: s,
-                  "sort-config": i.value,
+                  "sort-config": d.value,
                   compact: a.compact,
                   "table-sortable": a.sortable,
                   onSort: H,
@@ -212,28 +213,28 @@ const fe = { class: "space-y-4" }, he = { class: "overflow-x-auto w-full" }, ve
                 }, null, 8, ["header", "sort-config", "compact", "table-sortable", "style"]))), 128))
               ])
             ], 2),
-            n("tbody", we, [
-              L.value ? (r(!0), d(R, { key: 0 }, $(Math.min(k.value, 15), (s) => (r(), d("tr", {
+            r("tbody", we, [
+              L.value ? (n(!0), i(R, { key: 0 }, $(Math.min(k.value, 15), (s) => (n(), i("tr", {
                 key: "skeleton-" + s,
                 class: "border-b border-border/50 bg-background transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted"
               }, [
-                a.selectable ? (r(), d("td", ye, [...t[4] || (t[4] = [
-                  n("div", { class: "flex items-center justify-center" }, [
-                    n("div", { class: "h-4 w-4 rounded-[4px] bg-muted/50 animate-pulse" })
+                a.selectable ? (n(), i("td", ye, [...t[4] || (t[4] = [
+                  r("div", { class: "flex items-center justify-center" }, [
+                    r("div", { class: "h-4 w-4 rounded-[4px] bg-muted/50 animate-pulse" })
                   ], -1)
                 ])])) : I("", !0),
-                (r(!0), d(R, null, $(a.headers, (c) => (r(), d("td", {
+                (n(!0), i(R, null, $(a.headers, (c) => (n(), i("td", {
                   key: c.field,
                   class: B(["p-5! align-middle last:pr-6!", [c.hideOnMobile ? "hidden md:table-cell" : ""]])
                 }, [
-                  n("div", {
+                  r("div", {
                     class: "rounded-md bg-muted/50 animate-pulse h-4 w-full",
                     style: A({
                       width: `${50 + Math.random() * 40}%`
                     })
                   }, null, 4)
                 ], 2))), 128))
-              ]))), 128)) : a.rows.length > 0 ? (r(!0), d(R, { key: 1 }, $(a.rows, (s, c) => (r(), D(ce, {
+              ]))), 128)) : a.rows.length > 0 ? (n(!0), i(R, { key: 1 }, $(a.rows, (s, c) => (n(), D(ce, {
                 key: j(s),
                 row: s,
                 headers: a.headers,
@@ -254,25 +255,25 @@ const fe = { class: "space-y-4" }, he = { class: "overflow-x-auto w-full" }, ve
                     S(e.$slots, m.field, le({ ref_for: !0 }, f), void 0, !0)
                   ])
                 }))
-              ]), 1032, ["row", "headers", "index", "key-field", "selectable", "is-selected", "hoverable", "striped", "compact"]))), 128)) : (r(), d("tr", be, [
-                n("td", {
+              ]), 1032, ["row", "headers", "index", "key-field", "selectable", "is-selected", "hoverable", "striped", "compact"]))), 128)) : (n(), i("tr", be, [
+                r("td", {
                   colspan: a.selectable ? a.headers.length + 1 : a.headers.length,
                   class: "h-96 text-center align-middle hover:bg-transparent"
                 }, [
-                  n("div", Pe, [
-                    n("div", xe, [
+                  r("div", Pe, [
+                    r("div", xe, [
                       C(oe, {
                         icon: a.emptyIcon,
                         class: "h-6 w-6 text-muted-foreground/80"
                       }, null, 8, ["icon"])
                     ]),
-                    n("h3", Ce, M(a.emptyTitle), 1),
-                    n("p", Se, [
+                    r("h3", Ce, M(a.emptyTitle), 1),
+                    r("p", Se, [
                       S(e.$slots, "empty-description", {}, () => [
                         ae(M(a.emptyDescription), 1)
                       ], !0)
                     ]),
-                    e.$slots["empty-action"] ? (r(), d("div", Ie, [
+                    e.$slots["empty-action"] ? (n(), i("div", Ie, [
                       S(e.$slots, "empty-action", {}, void 0, !0)
                     ])) : I("", !0)
                   ])
@@ -282,8 +283,8 @@ const fe = { class: "space-y-4" }, he = { class: "overflow-x-auto w-full" }, ve
           ], 2)
         ])
       ], 2),
-      a.showPagination && a.pageInfo && a.pageInfo.totalItems > 0 ? (r(), d("div", $e, [
-        C(se(ie), {
+      a.showPagination && a.pageInfo && a.pageInfo.totalItems > 0 ? (n(), i("div", $e, [
+        C(se(de), {
           "current-page": h.value,
           "total-pages": a.pageInfo.totalPages,
           "show-page-info": !1,
@@ -291,11 +292,12 @@ const fe = { class: "space-y-4" }, he = { class: "overflow-x-auto w-full" }, ve
           "items-per-page": k.value,
           "items-per-page-options": a.itemsPerPageOptions,
           "nav-type": "icon",
+          alignment: l.paginationPosition,
           onChange: J,
           "onUpdate:itemsPerPage": K
-        }, null, 8, ["current-page", "total-pages", "show-items-per-page", "items-per-page", "items-per-page-options"])
+        }, null, 8, ["current-page", "total-pages", "show-items-per-page", "items-per-page", "items-per-page-options", "alignment"])
       ])) : I("", !0),
-      C(de, {
+      C(ie, {
         show: P.value,
         "onUpdate:show": t[2] || (t[2] = (s) => P.value = s),
         title: "Confirm Deletion",

package/components/DataTable/types.d.ts

@@ -54,6 +54,7 @@ export interface DataTableProps {
     emptyDescription?: string;
     emptyIcon?: string;
     showPagination?: boolean;
+    paginationPosition?: 'start' | 'center' | 'end' | 'between';
     pageInfo?: PageInfo;
     itemsPerPage?: number;
     itemsPerPageOptions?: number[];

package/components/DatePicker.vue.d.ts

@@ -6,23 +6,31 @@ type __VLS_Props = {
     value?: any;
     mode: DatePickerMode;
     minDate?: string;
+    maxDate?: string;
+    disabledDates?: {
+        start: string;
+        end?: string;
+    }[];
     icon?: string;
     size?: ButtonSize;
     variant?: ButtonVariant;
     btnProps?: any;
     teleport?: boolean;
     minuteInterval?: number;
+    timeFormat?: '12h' | '24h';
+    disabled?: boolean;
+    readonly?: boolean;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
         default?(_: {
             value: any;
-            displayValue: string;
+            displayValue: any;
         }): any;
     };
     refs: {};
-    rootEl: HTMLDivElement;
+    rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
@@ -34,7 +42,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
 }>, {
     teleport: boolean;
     minuteInterval: number;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+    timeFormat: "12h" | "24h";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {