veloce-vue 0.24.0 → 0.25.0

package/components/toast/Toast.vue.d.ts

@@ -0,0 +1,89 @@
+import { Component, DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { Severity } from '../../exports/types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        icon?(_: {}): any;
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    message: {
+        type: StringConstructor;
+        default: string;
+    };
+    severity: {
+        type: () => Severity;
+        default: string;
+    };
+    icon: {
+        type: () => Component;
+        default: () => null;
+    };
+    duration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    position: {
+        type: () => "top-left" | "top-right" | "top-center" | "bottom-left" | "bottom-right" | "bottom-center";
+        default: string;
+    };
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    close: (id: string) => any;
+}, string, PublicProps, Readonly< ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    message: {
+        type: StringConstructor;
+        default: string;
+    };
+    severity: {
+        type: () => Severity;
+        default: string;
+    };
+    icon: {
+        type: () => Component;
+        default: () => null;
+    };
+    duration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    position: {
+        type: () => "top-left" | "top-right" | "top-center" | "bottom-left" | "bottom-right" | "bottom-center";
+        default: string;
+    };
+}>> & Readonly<{
+    onClose?: ((id: string) => any) | undefined;
+}>, {
+    icon: Component;
+    message: string;
+    position: "top-left" | "top-right" | "top-center" | "bottom-left" | "bottom-right" | "bottom-center";
+    duration: number;
+    severity: Severity;
+    closable: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/toast/Toast.vue.js

@@ -0,0 +1,151 @@
+import { defineComponent as q, computed as o, ref as n, onMounted as U, onUnmounted as X, createBlock as _, openBlock as f, unref as i, normalizeClass as D, withCtx as F, createElementVNode as b, createElementBlock as I, createCommentVNode as y, renderSlot as B, toDisplayString as G, createVNode as $, normalizeStyle as H } from "vue";
+import J from "../../icons/Alert.vue.js";
+import K from "../../icons/CheckCircle.vue.js";
+import L from "../../icons/Close.vue.js";
+import s from "../../icons/Info.vue.js";
+import Q from "../../icons/XCircle.vue.js";
+import M from "../icon/Icon.vue.js";
+import { motion as P } from "motion-v";
+const R = { class: "flex items-start gap-3 p-4" }, W = { class: "flex-1" }, Y = { class: "text-sm font-medium" }, Z = {
+  key: 0,
+  class: "absolute bottom-0 left-0 h-1 w-full overflow-hidden bg-black/10 dark:bg-white/10"
+}, le = /* @__PURE__ */ q({
+  __name: "Toast",
+  props: {
+    id: { type: String, required: !0 },
+    message: { type: String, default: "" },
+    severity: { type: String, default: "info" },
+    icon: { type: Object, default: () => null },
+    duration: { type: Number, default: 5e3 },
+    closable: { type: Boolean, default: !0 },
+    position: { type: String, default: "top-right" }
+  },
+  emits: ["close"],
+  setup(l, { emit: z }) {
+    const e = l, N = z, V = {
+      success: K,
+      info: s,
+      warning: J,
+      error: Q,
+      primary: s,
+      secondary: s,
+      neutral: s
+    }, h = {
+      success: "bg-success-light dark:bg-success/20 text-success border-success/30",
+      info: "bg-info-light dark:bg-info/20 text-info border-info/30",
+      warning: "bg-warning-light dark:bg-warning/20 text-warning border-warning/30",
+      error: "bg-error-light dark:bg-error/20 text-error border-error/30",
+      primary: "bg-primary-light dark:bg-primary/20 text-primary border-primary/30",
+      secondary: "bg-secondary-light dark:bg-secondary/20 text-secondary border-secondary/30",
+      neutral: "bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-200 border-neutral-300 dark:border-neutral-700"
+    }, w = {
+      success: "bg-success",
+      info: "bg-info",
+      warning: "bg-warning",
+      error: "bg-error",
+      primary: "bg-primary",
+      secondary: "bg-secondary",
+      neutral: "bg-neutral-500"
+    }, A = o(() => h[e.severity] || h.info), E = o(() => w[e.severity] || w.info), k = o(() => e.icon || V[e.severity] || s), g = o(() => {
+      let t = e.position.includes("top") ? -50 : 50;
+      return {
+        initial: { opacity: 0, x: 0, y: t, scale: 0.9 },
+        animate: { opacity: 1, x: 0, y: 0, scale: 1 },
+        exit: { opacity: 0, x: 0, y: t, scale: 0.9 }
+      };
+    }), a = n(0), r = n(!1);
+    let u = null, c = null;
+    const x = n(Date.now()), d = n(0), p = n(0), C = o(() => {
+      if (e.duration <= 0) return 100;
+      const t = e.duration - a.value;
+      return Math.max(0, Math.min(100, t / e.duration * 100));
+    }), O = () => {
+      if (!r.value && e.duration > 0) {
+        const t = Date.now();
+        a.value = t - x.value - p.value, a.value >= e.duration && m();
+      }
+    }, m = () => {
+      N("close", e.id);
+    }, T = () => {
+      if (e.duration > 0) {
+        if (r.value && d.value > 0) {
+          const S = Date.now() - d.value;
+          p.value += S, d.value = 0;
+        } else
+          x.value = Date.now(), a.value = 0, p.value = 0;
+        r.value = !1, v(), c = setInterval(O, 16);
+        const t = e.duration - a.value;
+        t > 0 ? u = setTimeout(() => {
+          m();
+        }, t) : m();
+      }
+    }, j = () => {
+      r.value || (r.value = !0, d.value = Date.now(), v());
+    }, v = () => {
+      u && (clearTimeout(u), u = null), c && (clearInterval(c), c = null);
+    };
+    return U(() => {
+      T();
+    }), X(() => {
+      v();
+    }), (t, S) => (f(), _(i(P).div, {
+      class: D([A.value, "relative flex min-w-[300px] max-w-[400px] flex-col overflow-hidden rounded-lg border shadow-lg backdrop-blur-sm"]),
+      layout: "",
+      initial: g.value.initial,
+      animate: g.value.animate,
+      exit: g.value.exit,
+      transition: {
+        duration: 0.3,
+        ease: [0.4, 0, 0.2, 1],
+        layout: {
+          duration: 0.3,
+          ease: [0.4, 0, 0.2, 1]
+        }
+      },
+      onMouseenter: j,
+      onMouseleave: T
+    }, {
+      default: F(() => [
+        b("div", R, [
+          t.$slots.icon ? B(t.$slots, "icon", { key: 0 }) : k.value ? (f(), _(i(M), {
+            key: 1,
+            icon: k.value,
+            class: "mt-0.5 size-5"
+          }, null, 8, ["icon"])) : y("", !0),
+          b("div", W, [
+            B(t.$slots, "default", {}, () => [
+              b("p", Y, G(l.message), 1)
+            ])
+          ]),
+          l.closable ? (f(), I("button", {
+            key: 2,
+            type: "button",
+            class: "ml-auto shrink-0 rounded p-0.5 transition-colors hover:bg-black/10 dark:hover:bg-white/10",
+            onClick: m
+          }, [
+            $(i(M), {
+              icon: i(L),
+              class: "size-4"
+            }, null, 8, ["icon"])
+          ])) : y("", !0)
+        ]),
+        l.duration > 0 ? (f(), I("div", Z, [
+          $(i(P).div, {
+            class: D([E.value, "h-full"]),
+            style: H({ width: `${C.value}%` }),
+            initial: { width: "100%" },
+            animate: { width: `${C.value}%` },
+            transition: {
+              duration: r.value ? 0 : 0.16,
+              ease: "linear"
+            }
+          }, null, 8, ["class", "style", "animate", "transition"])
+        ])) : y("", !0)
+      ]),
+      _: 3
+    }, 8, ["class", "initial", "animate", "exit"]));
+  }
+});
+export {
+  le as default
+};

package/components/toast/Toast.vue2.js

@@ -0,0 +1,4 @@
+import f from "./Toast.vue.js";
+export {
+  f as default
+};

package/components/toast/ToastContainer.vue.d.ts

@@ -0,0 +1,31 @@
+import { Ref, DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { ToastItem } from '../../exports/toast';
+declare const toasts: Ref<ToastItem[]>;
+declare const _default: DefineComponent<ExtractPropTypes<{
+    position: {
+        type: () => "top-center" | "bottom-center" | "top-right" | "top-left" | "bottom-right" | "bottom-left";
+        default: string;
+    };
+    maxToasts: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, {
+    addToast: (toast: ToastItem) => void;
+    removeToast: (id: string) => void;
+    clearAll: () => void;
+    toasts: typeof toasts;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
+    position: {
+        type: () => "top-center" | "bottom-center" | "top-right" | "top-left" | "bottom-right" | "bottom-left";
+        default: string;
+    };
+    maxToasts: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    position: "top-left" | "top-right" | "top-center" | "bottom-left" | "bottom-right" | "bottom-center";
+    maxToasts: number;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/components/toast/ToastContainer.vue.js

@@ -0,0 +1,67 @@
+import { defineComponent as f, ref as v, computed as g, onMounted as x, createElementBlock as u, openBlock as l, normalizeClass as b, createVNode as h, unref as y, withCtx as C, Fragment as T, renderList as _, createBlock as k, normalizeStyle as w } from "vue";
+import { AnimatePresence as z } from "motion-v";
+import B from "./Toast.vue.js";
+import { useRandomId as I } from "../../utils/useRandomId.js";
+import { setToastContainer as $ } from "../../composables/useToast.js";
+const L = /* @__PURE__ */ f({
+  __name: "ToastContainer",
+  props: {
+    position: { type: String, default: "top-right" },
+    maxToasts: { type: Number, default: 5 }
+  },
+  setup(r, { expose: m }) {
+    const s = r, t = v([]), p = g(() => {
+      const e = "fixed z-[9999] flex flex-col gap-3 p-4 pointer-events-none", o = {
+        "top-left": "top-0 left-0",
+        "top-right": "top-0 right-0",
+        "top-center": "top-0 left-1/2 -translate-x-1/2",
+        "bottom-left": "bottom-0 left-0",
+        "bottom-right": "bottom-0 right-0",
+        "bottom-center": "bottom-0 left-1/2 -translate-x-1/2"
+      };
+      return `${e} ${o[s.position] || o["top-right"]}`;
+    }), a = (e) => {
+      const o = {
+        id: e.id || I(),
+        message: e.message,
+        severity: e.severity || "info",
+        icon: e.icon,
+        duration: e.duration ?? 5e3,
+        closable: e.closable ?? !0
+      };
+      s.position.includes("top") ? t.value.unshift(o) : t.value.push(o), t.value.length > s.maxToasts && t.value.shift();
+    }, i = (e) => {
+      const o = t.value.findIndex((n) => n.id === e);
+      o > -1 && t.value.splice(o, 1);
+    }, c = () => {
+      t.value = [];
+    };
+    return x(() => {
+      $({ addToast: a, removeToast: i, clearAll: c, toasts: t });
+    }), m({ addToast: a, removeToast: i, clearAll: c, toasts: t }), (e, o) => (l(), u("div", {
+      class: b([p.value, "w-full sm:w-auto"])
+    }, [
+      h(y(z), null, {
+        default: C(() => [
+          (l(!0), u(T, null, _(t.value, (n, d) => (l(), k(B, {
+            key: n.id,
+            icon: n.icon,
+            class: "pointer-events-auto",
+            style: w({ zIndex: d + 1 }),
+            id: n.id,
+            message: n.message,
+            severity: n.severity,
+            duration: n.duration,
+            closable: n.closable,
+            position: r.position,
+            onClose: i
+          }, null, 8, ["icon", "style", "id", "message", "severity", "duration", "closable", "position"]))), 128))
+        ]),
+        _: 1
+      })
+    ], 2));
+  }
+});
+export {
+  L as default
+};

package/components/toast/ToastContainer.vue2.js

@@ -0,0 +1,4 @@
+import f from "./ToastContainer.vue.js";
+export {
+  f as default
+};

package/composables/useColorMode.js

@@ -0,0 +1,9 @@
+import { computed as a, watch as l, onBeforeMount as d } from "vue";
+import { useStorage as s } from "@vueuse/core";
+const m = () => {
+  const e = s("color-mode", "dark"), o = a(() => e.value === "dark"), t = () => e.value = o.value ? "light" : "dark";
+  return l(e, (r) => document.documentElement.classList.toggle("dark", r === "dark")), d(() => document.documentElement.classList.toggle("dark", o.value)), { mode: e, isDark: o, toggleDark: t };
+};
+export {
+  m as useColorMode
+};

package/composables/useToast.js

@@ -0,0 +1,25 @@
+import { useRandomId as a } from "../utils/useRandomId.js";
+let n = null;
+const f = (t) => {
+  n = t;
+}, s = (t) => {
+  if (!n) {
+    console.warn("Toast container not initialized. Make sure to add <ToastContainer> to your app.");
+    return;
+  }
+  const o = {
+    id: a(),
+    message: t.message,
+    severity: t.severity || "info",
+    icon: t.icon,
+    duration: t.duration ?? 5e3,
+    closable: t.closable ?? !0
+  };
+  n.addToast(o);
+}, w = () => ({ success: (e, r) => s({ ...r, message: e, severity: "success" }), error: (e, r) => s({ ...r, message: e, severity: "error" }), warning: (e, r) => s({ ...r, message: e, severity: "warning" }), info: (e, r) => s({ ...r, message: e, severity: "info" }), show: (e, r) => s({ ...r, message: e }), clear: () => {
+  n && n.clearAll();
+} });
+export {
+  f as setToastContainer,
+  w as useToast
+};

package/composables.js

@@ -0,0 +1,4 @@
+import { useColorMode as r } from "./composables/useColorMode.js";
+export {
+  r as useColorMode
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "veloce-vue",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "private": false,
   "type": "module",
   "description": "A Vue 3 library built with Vite + TypeScript + Tailwind CSS.",
@@ -30,6 +30,31 @@
       "import": "./config.js",
       "default": "./config.js"
     },
+    "./toast": {
+      "types": "./exports/toast.d.ts",
+      "import": "./toast.js",
+      "default": "./toast.js"
+    },
+    "./types": {
+      "types": "./exports/types.d.ts",
+      "import": "./types.js",
+      "default": "./types.js"
+    },
+    "./typography": {
+      "types": "./exports/typography.d.ts",
+      "import": "./typography.js",
+      "default": "./typography.js"
+    },
+    "./utils": {
+      "types": "./exports/utils.d.ts",
+      "import": "./utils.js",
+      "default": "./utils.js"
+    },
+    "./composables": {
+      "types": "./exports/composables.d.ts",
+      "import": "./composables.js",
+      "default": "./composables.js"
+    },
     "./styles.css": "./veloce.css"
   },
   "peerDependencies": {

package/toast.js

@@ -0,0 +1,9 @@
+import { default as a } from "./components/toast/Toast.vue.js";
+import { default as r } from "./components/toast/ToastContainer.vue.js";
+import { setToastContainer as f, useToast as n } from "./composables/useToast.js";
+export {
+  a as Toast,
+  r as ToastContainer,
+  f as setToastContainer,
+  n as useToast
+};

package/types.js

@@ -0,0 +1 @@
+

package/typography.js

@@ -0,0 +1,26 @@
+import { default as a } from "./components/typography/Blockquote.vue.js";
+import { default as f } from "./components/typography/Code.vue.js";
+import { default as l } from "./components/typography/H1.vue.js";
+import { default as p } from "./components/typography/H2.vue.js";
+import { default as u } from "./components/typography/H3.vue.js";
+import { default as x } from "./components/typography/H4.vue.js";
+import { default as L } from "./components/typography/H5.vue.js";
+import { default as c } from "./components/typography/H6.vue.js";
+import { default as k } from "./components/typography/Label.vue.js";
+import { default as q } from "./components/typography/List.vue.js";
+import { default as C } from "./components/typography/P.vue.js";
+import { default as S } from "./components/typography/Span.vue.js";
+export {
+  a as Blockquote,
+  f as Code,
+  l as H1,
+  p as H2,
+  u as H3,
+  x as H4,
+  L as H5,
+  c as H6,
+  k as Label,
+  q as List,
+  C as P,
+  S as Span
+};

package/utils.js

@@ -0,0 +1,10 @@
+import { useRandomId as e } from "./utils/useRandomId.js";
+import { getTypography as g } from "./utils/typography.js";
+import { getMargin as m } from "./utils/margin.js";
+import { getPadding as d } from "./utils/padding.js";
+export {
+  m as getMargin,
+  d as getPadding,
+  g as getTypography,
+  e as useRandomId
+};