vlite3 0.1.0 → 0.1.2

package/composables/useNotifications.js

@@ -0,0 +1,99 @@
+import { ref as p } from "vue";
+const u = p({
+  position: "bottom-right",
+  duration: 4e3,
+  expand: !1,
+  variant: "default"
+}), a = p([]), g = /* @__PURE__ */ new Map(), l = /* @__PURE__ */ new Map();
+let h = 0;
+function I(t) {
+  const i = l.get(t);
+  i?.timerId && (clearTimeout(i.timerId), i.timerId = void 0);
+}
+function c(t, i = "default", n = {}) {
+  if (a.value.length > 20) {
+    const r = a.value.shift();
+    r && f(r.id);
+  }
+  const o = h++, s = n.duration ?? u.value.duration ?? 4e3, d = n.position ?? u.value.position ?? "bottom-right", v = i === "default" ? u.value.variant ?? "default" : i, m = a.value.filter((r) => r.position === d).length === 0 && !g.get(d);
+  m && g.set(d, !0);
+  const T = {
+    id: o,
+    message: t,
+    description: n.description,
+    type: v,
+    duration: s,
+    action: n.action,
+    position: d,
+    isFirst: m
+  };
+  if (a.value.push(T), s !== 1 / 0) {
+    const r = {
+      remaining: s,
+      start: Date.now()
+    };
+    r.timerId = setTimeout(() => {
+      f(o);
+    }, s), l.set(o, r);
+  }
+  return o;
+}
+function w() {
+  l.forEach((t) => {
+    t.timerId && (clearTimeout(t.timerId), t.timerId = void 0, t.remaining -= Date.now() - t.start);
+  });
+}
+function y() {
+  l.forEach((t, i) => {
+    !t.timerId && t.remaining > 0 && (t.start = Date.now(), t.timerId = setTimeout(() => {
+      f(i);
+    }, t.remaining));
+  });
+}
+function D(t, i, n) {
+  return c(t, i ?? "default", n ?? {});
+}
+const e = (t, i) => c(t, "default", i);
+e.success = (t, i) => c(t, "success", i);
+e.error = (t, i) => c(t, "error", i);
+e.info = (t, i) => c(t, "info", i);
+e.warning = (t, i) => c(t, "warning", i);
+e.promise = (t, i) => {
+  const n = c(i.loading, "default", { duration: 1 / 0 });
+  return t.then((o) => {
+    f(n), e.success(i.success(o));
+  }).catch((o) => {
+    f(n);
+    const s = typeof i.error == "function" ? i.error(o) : i.error;
+    e.error(s);
+  }), t;
+};
+function f(t) {
+  I(t), l.delete(t);
+  const i = a.value.findIndex((n) => n.id === t);
+  i !== -1 && a.value.splice(i, 1);
+}
+function b(t) {
+  Object.assign(u.value, t);
+}
+function M() {
+  return {
+    notifications: a,
+    showToast: D,
+    toast: e,
+    removeToast: f,
+    configure: b,
+    globalConfig: u,
+    pauseTimers: w,
+    resumeTimers: y
+  };
+}
+export {
+  b as configure,
+  w as pauseTimers,
+  f as removeToast,
+  y as resumeTimers,
+  D as showToast,
+  e as toast,
+  M as useNotifications
+};

package/composables/useTheme.d.ts

@@ -0,0 +1,6 @@
+type Theme = 'light' | 'dark';
+export declare function useTheme(): {
+    theme: import('vue').Ref<Theme, Theme>;
+    toggleTheme: () => void;
+};
+export {};

package/composables/useTheme.js

@@ -0,0 +1,32 @@
+import { ref as o, watch as m, onMounted as d } from "vue";
+const t = o(i());
+function i() {
+  const e = localStorage.getItem("builto-theme");
+  return e === "light" || e === "dark" ? e : window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function n(e) {
+  document.documentElement.classList.remove("light", "dark"), document.documentElement.classList.add(e);
+}
+function c() {
+  m(
+    t,
+    (a) => {
+      localStorage.setItem("builto-theme", a), n(a);
+    },
+    { immediate: !0 }
+  ), window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (a) => {
+    localStorage.getItem("builto-theme") || (t.value = a.matches ? "dark" : "light");
+  });
+  function e() {
+    t.value = t.value === "light" ? "dark" : "light";
+  }
+  return d(() => {
+    document.documentElement.classList.add("bg-body");
+  }), {
+    theme: t,
+    toggleTheme: e
+  };
+}
+export {
+  c as useTheme
+};

package/core/config.d.ts

@@ -0,0 +1,29 @@
+import { InjectionKey } from 'vue';
+import { VLiteConfig } from '../types/config.type';
+/**
+ * Unique symbol for injecting the VLite configuration.
+ */
+export declare const VLITE_CONFIG_KEY: InjectionKey<VLiteConfig>;
+/**
+ * Global reactive configuration state.
+ * This acts as a singleton fallback if inject() is used outside a component
+ * or if the plugin wasn't installed (though installation is recommended).
+ */
+export declare const configState: {
+    services?: {
+        upload?: import('..').FileUploadHandler;
+    };
+};
+/**
+ * Helper to update the global configuration.
+ */
+export declare function updateConfig(updates: Partial<VLiteConfig>): void;
+/**
+ * Composable to access the VLite configuration.
+ * It attempts to inject from the Vue context first, falling back to the global singleton.
+ */
+export declare function useVLiteConfig(): {
+    services?: {
+        upload?: import('..').FileUploadHandler;
+    };
+};

package/core/config.js

@@ -0,0 +1,12 @@
+import { reactive as t, inject as e } from "vue";
+const o = /* @__PURE__ */ Symbol("vlite-config"), i = {
+  services: {}
+}, n = t({ ...i });
+function f() {
+  return e(o, n);
+}
+export {
+  o as VLITE_CONFIG_KEY,
+  n as configState,
+  f as useVLiteConfig
+};

package/core/index.d.ts

@@ -0,0 +1,31 @@
+import { App } from 'vue';
+import { VLiteConfig } from '../types/config.type';
+/**
+ * Creates the VLite plugin instance.
+ *
+ * @example
+ * // main.ts
+ * import { createApp } from 'vue'
+ * import { createVLite } from 'vlite3'
+ *
+ * const app = createApp(App)
+ *
+ * const vlite = createVLite({
+ * services: {
+ * upload: async (file) => {
+ * // Custom API call here
+ * const formData = new FormData()
+ * formData.append('file', file)
+ * const res = await axios.post('/api/upload', formData)
+ * return res.data.url
+ * }
+ * }
+ * })
+ *
+ * app.use(vlite)
+ * app.mount('#app')
+ */
+export declare function createVLite(options?: VLiteConfig): {
+    install(app: App): void;
+};
+export * from './config';

package/core/index.js

@@ -0,0 +1,15 @@
+import { configState as e, VLITE_CONFIG_KEY as t } from "./config.js";
+import { useVLiteConfig as v } from "./config.js";
+function c(i = {}) {
+  return {
+    install(r) {
+      i && i.services && (e.services = { ...e.services, ...i.services }), r.provide(t, e), r.config.globalProperties.$vlite = e;
+    }
+  };
+}
+export {
+  t as VLITE_CONFIG_KEY,
+  e as configState,
+  c as createVLite,
+  v as useVLiteConfig
+};

package/directives/vRipple.d.ts

@@ -0,0 +1,4 @@
+export declare const vRipple: {
+    mounted(el: HTMLElement): void;
+    unmounted(el: HTMLElement): void;
+};

package/directives/vRipple.js

@@ -0,0 +1,17 @@
+const d = (e, n) => {
+  const i = n.getBoundingClientRect(), c = e.clientX - i.left, p = e.clientY - i.top, t = document.createElement("span"), s = Math.max(i.width, i.height), o = s / 2;
+  t.style.width = t.style.height = `${s}px`, t.style.left = `${c - o}px`, t.style.top = `${p - o}px`, t.classList.add("ripple");
+  const l = document.getElementsByClassName("ripple")[0];
+  l && l.remove(), n.appendChild(t), setTimeout(() => {
+    t.remove();
+  }, 600);
+}, a = {
+  mounted(e) {
+    e.style.position = "relative", e.style.overflow = "hidden", e.addEventListener("click", (n) => d(n, e));
+  },
+  unmounted(e) {
+  }
+};
+export {
+  a as vRipple
+};

package/index.d.ts

@@ -0,0 +1,49 @@
+export * from './components/Accordion';
+export { default as Alert } from './components/Alert.vue';
+export { default as Avatar } from './components/Avatar.vue';
+export * from './components/AvatarUploader';
+export { default as Badge } from './components/Badge.vue';
+export { default as Button } from './components/Button.vue';
+export { default as ButtonGroup } from './components/ButtonGroup.vue';
+export * from './components/Carousel';
+export { default as CheckBox } from './components/CheckBox.vue';
+export * from './components/Chip';
+export * from './components/ChoiceBox';
+export { default as ColorPicker } from './components/ColorPicker/ColorPicker.vue';
+export { default as ConfirmationModal } from './components/ConfirmationModal.vue';
+export { default as DatePicker } from './components/DatePicker.vue';
+export * from './components/DataTable';
+export * from './components/Dropdown';
+export * from './components/FilePicker';
+export * from './components/FileTree';
+export * from './components/Form';
+export * from './components/Heatmap';
+export { default as Icon } from './components/Icon.vue';
+export { default as IconPicker } from './components/IconPicker.vue';
+export { default as Input } from './components/Input.vue';
+export { default as Label } from './components/Label.vue';
+export { default as Logo } from './components/Logo.vue';
+export * from './components/Masonry';
+export { default as Modal } from './components/Modal.vue';
+export * from './components/MultiSelect';
+export * from './components/Navbar';
+export * from './components/OTPInput';
+export * from './components/Pagination';
+export * from './components/PricingPlan';
+export { default as SidePanel } from './components/SidePanel.vue';
+export * from './components/SidebarMenu';
+export { default as Slider } from './components/Slider.vue';
+export { default as Switch } from './components/Switch.vue';
+export * from './components/Tabes';
+export { default as Textarea } from './components/Textarea.vue';
+export { default as ThemeToggle } from './components/ThemeToggle.vue';
+export { default as Timeline } from './components/Timeline.vue';
+export { default as ToastNotification } from './components/ToastNotification.vue';
+export { default as Tooltip } from './components/Tooltip.vue';
+export * from './components/Workbook';
+export * from './composables/useNotifications';
+export * from './composables/useTheme';
+export * from './composables/useKeyStroke';
+export { createVLite, useVLiteConfig } from './core';
+export * from './utils';
+export * from './types';

package/index.js

@@ -0,0 +1,156 @@
+import { default as t } from "./components/Accordion/Accordion.vue.js";
+import { default as f } from "./components/Accordion/AccordionItem.vue.js";
+import { default as p } from "./components/Accordion/AccordionTrigger.vue.js";
+import { default as l } from "./components/Accordion/AccordionContent.vue.js";
+import { default as u } from "./components/Alert.vue.js";
+import { default as i } from "./components/Avatar.vue.js";
+import { default as c } from "./components/AvatarUploader/AvatarUploader.vue.js";
+import { default as g } from "./components/Badge.vue.js";
+import { default as b } from "./components/Button.vue.js";
+import { default as F } from "./components/ButtonGroup.vue.js";
+import { default as A } from "./components/Carousel/Carousel.vue.js";
+import { default as k } from "./components/CheckBox.vue.js";
+import { default as C } from "./components/Chip/Chip.vue.js";
+import { default as h } from "./components/ChoiceBox/ChoiceBox.vue.js";
+import { default as v } from "./components/ColorPicker/ColorPicker.vue.js";
+import { default as L } from "./components/ConfirmationModal.vue.js";
+import { default as K } from "./components/DatePicker.vue.js";
+import { default as R } from "./components/DataTable/DataTable.vue.js";
+import { default as H } from "./components/DataTable/DataTableHeader.vue.js";
+import { default as V } from "./components/DataTable/DataTableRow.vue.js";
+import { default as W } from "./components/Dropdown/Dropdown.vue.js";
+import { default as _ } from "./components/Dropdown/DropdownMenu.vue.js";
+import { default as q } from "./components/Dropdown/DropdownTrigger.vue.js";
+import { default as J } from "./components/Dropdown/DropdownItem.vue.js";
+import { useDropdownSelection as X } from "./components/Dropdown/composables/useDropdownSelection.js";
+import { useDropdownIds as $ } from "./components/Dropdown/composables/useDropdownIds.js";
+import { default as oe } from "./components/FilePicker/FilePicker.vue.js";
+import { default as te } from "./components/FileTree/FileTree.vue.js";
+import { default as fe } from "./components/FileTree/FileTreeNode.vue.js";
+import { useTreeSelection as pe } from "./components/FileTree/useTreeSelection.js";
+import { default as le } from "./components/Form/Form.vue.js";
+import { default as ue } from "./components/Form/FormField.vue.js";
+import { default as ie } from "./components/Form/FormFields.vue.js";
+import { default as ce } from "./components/Form/CustomFields.vue.js";
+import { useForm as ge } from "./components/Form/composables/useForm.js";
+import { useFileUpload as be } from "./components/Form/composables/useFileUpload.js";
+import { default as Fe } from "./components/Heatmap/Heatmap.vue.js";
+import { default as Ae } from "./components/Icon.vue.js";
+import { default as ke } from "./components/IconPicker.vue.js";
+import { default as Ce } from "./components/Input.vue.js";
+import { default as he } from "./components/Label.vue.js";
+import { default as ve } from "./components/Logo.vue.js";
+import { default as Le } from "./components/Masonry/Masonry.vue.js";
+import { MASONRY_BREAKPOINTS as Ke } from "./components/Masonry/types.js";
+import { default as Re } from "./components/Modal.vue.js";
+import { default as He } from "./components/MultiSelect/MultiSelect.vue.js";
+import { default as Ve } from "./components/Navbar/Navbar.vue.js";
+import { default as We } from "./components/Navbar/NavbarItem.vue.js";
+import { default as _e } from "./components/Navbar/NavbarGroup.vue.js";
+import { default as qe } from "./components/OTPInput/OTPInput.vue.js";
+import { default as Je } from "./components/Pagination/Pagination.vue.js";
+import { default as Xe } from "./components/PricingPlan/PricingPlan.vue.js";
+import { default as $e } from "./components/PricingPlan/PricingPlanItem.vue.js";
+import { default as oo } from "./components/SidePanel.vue.js";
+import { default as to } from "./components/SidebarMenu/SidebarMenu.vue.js";
+import { default as fo } from "./components/SidebarMenu/SidebarMenuItem.vue.js";
+/* empty css                                            */
+import { default as po } from "./components/Slider.vue.js";
+import { default as so } from "./components/Switch.vue.js";
+import { default as xo } from "./components/Tabes/Tabes.vue.js";
+import { default as no } from "./components/Textarea.vue.js";
+import { default as To } from "./components/ThemeToggle.vue.js";
+import { default as So } from "./components/Timeline.vue.js";
+import { default as Po } from "./components/ToastNotification.vue.js";
+import { default as Io } from "./components/Tooltip.vue.js";
+import { default as Do } from "./components/Workbook/Workbook.vue.js";
+import { default as wo } from "./components/Workbook/Sheet.vue.js";
+import { configure as Mo, pauseTimers as ho, removeToast as No, resumeTimers as vo, showToast as Bo, toast as Lo, useNotifications as yo } from "./composables/useNotifications.js";
+import { useTheme as Oo } from "./composables/useTheme.js";
+import { useAdvancedKeyStroke as Go, useKeyStroke as Ho } from "./composables/useKeyStroke.js";
+import { createVLite as Vo } from "./core/index.js";
+import { deepMerge as Wo } from "./utils/object.js";
+import { debounce as _o } from "./utils/functions.js";
+import { useVLiteConfig as qo } from "./core/config.js";
+export {
+  t as Accordion,
+  l as AccordionContent,
+  f as AccordionItem,
+  p as AccordionTrigger,
+  u as Alert,
+  i as Avatar,
+  c as AvatarUploader,
+  g as Badge,
+  b as Button,
+  F as ButtonGroup,
+  A as Carousel,
+  k as CheckBox,
+  C as Chip,
+  h as ChoiceBox,
+  v as ColorPicker,
+  L as ConfirmationModal,
+  ce as CustomFields,
+  R as DataTable,
+  H as DataTableHeader,
+  V as DataTableRow,
+  K as DatePicker,
+  W as Dropdown,
+  J as DropdownItem,
+  _ as DropdownMenu,
+  q as DropdownTrigger,
+  oe as FilePicker,
+  te as FileTree,
+  fe as FileTreeNode,
+  le as Form,
+  ue as FormField,
+  ie as FormFields,
+  Fe as Heatmap,
+  Ae as Icon,
+  ke as IconPicker,
+  Ce as Input,
+  he as Label,
+  ve as Logo,
+  Ke as MASONRY_BREAKPOINTS,
+  Le as Masonry,
+  Re as Modal,
+  He as MultiSelect,
+  Ve as Navbar,
+  _e as NavbarGroup,
+  We as NavbarItem,
+  qe as OTPInput,
+  Je as Pagination,
+  Xe as PricingPlan,
+  $e as PricingPlanItem,
+  wo as Sheet,
+  oo as SidePanel,
+  to as SidebarMenu,
+  fo as SidebarMenuItem,
+  po as Slider,
+  so as Switch,
+  xo as Tabes,
+  no as Textarea,
+  To as ThemeToggle,
+  So as Timeline,
+  Po as ToastNotification,
+  Io as Tooltip,
+  Do as Workbook,
+  Mo as configure,
+  Vo as createVLite,
+  _o as debounce,
+  Wo as deepMerge,
+  ho as pauseTimers,
+  No as removeToast,
+  vo as resumeTimers,
+  Bo as showToast,
+  Lo as toast,
+  Go as useAdvancedKeyStroke,
+  $ as useDropdownIds,
+  X as useDropdownSelection,
+  be as useFileUpload,
+  ge as useForm,
+  Ho as useKeyStroke,
+  yo as useNotifications,
+  Oo as useTheme,
+  pe as useTreeSelection,
+  qo as useVLiteConfig
+};

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "description": "A Vue 3 UI component library built with Tailwind CSS.",
   "license": "MIT",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "main": "index.js",
   "module": "index.js",
@@ -66,4 +66,4 @@
     "endOfLine": "auto",
     "bracketSameLine": true
   }
-}
+}