appsalutely 0.1.0 → 0.1.2

package/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Merlin Zimmerman
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# appsalutely
+
+A utility library for building apps with FastAPI and Vue.js.

package/dist/components/AppBase.vue.d.ts

@@ -0,0 +1,23 @@
+type __VLS_PublicProps = {
+    'drawerOpen'?: boolean;
+};
+declare var __VLS_14: {}, __VLS_40: {}, __VLS_50: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_14) => any;
+} & {
+    footer?: (props: typeof __VLS_40) => any;
+} & {
+    drawer?: (props: typeof __VLS_50) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:drawerOpen": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:drawerOpen"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/DashboardPage.vue.d.ts

@@ -0,0 +1,20 @@
+import { VBreadcrumbs } from 'vuetify/components';
+type __VLS_Props = {
+    breadcrumbs?: VBreadcrumbs['$props']['items'];
+    fluid?: boolean;
+    title?: string;
+};
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    fluid: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/FooterSection.vue.d.ts

@@ -0,0 +1,12 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/LoginForm.vue.d.ts

@@ -0,0 +1,24 @@
+type __VLS_Props = {
+    title?: string;
+    submitButtonText?: string;
+    minWidth?: string | number;
+    maxWidth?: string | number;
+    loading?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    'username'?: string;
+    'password'?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: (args_0: string, args_1: string) => any;
+    "update:username": (value: string) => any;
+    "update:password": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSubmit?: ((args_0: string, args_1: string) => any) | undefined;
+    "onUpdate:username"?: ((value: string) => any) | undefined;
+    "onUpdate:password"?: ((value: string) => any) | undefined;
+}>, {
+    title: string;
+    submitButtonText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/NavDrawerLink.vue.d.ts

@@ -0,0 +1,8 @@
+import type { RouteLocationRaw } from 'vue-router';
+type __VLS_Props = {
+    to: RouteLocationRaw;
+    icon: string;
+    text: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/OTPForm.vue.d.ts

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    title?: string;
+    subtitle?: string;
+    submitButtonText?: string;
+    minWidth?: string | number;
+    maxWidth?: string | number;
+    loading?: boolean;
+    length?: number;
+    autosubmit?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    'otp'?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: (args_0: string) => any;
+    "update:otp": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSubmit?: ((args_0: string) => any) | undefined;
+    "onUpdate:otp"?: ((value: string) => any) | undefined;
+}>, {
+    length: number;
+    title: string;
+    subtitle: string;
+    submitButtonText: string;
+    autosubmit: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/index.css

@@ -0,0 +1 @@
+html{overflow:auto}html[data-theme=dark]{color-scheme:dark}html[data-theme=light]{color-scheme:light}

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+import AppBase from './components/AppBase.vue';
+import DashboardPage from './components/DashboardPage.vue';
+import FooterSection from './components/FooterSection.vue';
+import LoginForm from './components/LoginForm.vue';
+import NavDrawerLink from './components/NavDrawerLink.vue';
+import OTPForm from './components/OTPForm.vue';
+import useColorMode from './stores/colorMode';
+import useFooter from './stores/footer';
+import useNotify from './stores/notify';
+export { AppBase, DashboardPage, FooterSection, LoginForm, NavDrawerLink, OTPForm, useColorMode, useFooter, useNotify, };

package/dist/index.js

@@ -0,0 +1,381 @@
+import { ref as v, watch as S, computed as P, defineComponent as k, useModel as B, useSlots as A, onBeforeMount as E, createBlock as f, openBlock as m, unref as t, withCtx as s, createCommentVNode as h, createVNode as d, createElementBlock as w, renderSlot as V, createElementVNode as b, normalizeClass as j, toDisplayString as M, Fragment as T, renderList as F, normalizeStyle as z, mergeModels as C, withModifiers as U } from "vue";
+import { useRouter as q, RouterView as R } from "vue-router";
+import { VApp as G, VProgressLinear as H, VAppBar as O, VMain as J, VFooter as K, VBtn as x, VNavigationDrawer as Q, VList as X, VSnackbar as Y, VContainer as Z, VBreadcrumbs as ee, VCard as W, VForm as I, VCardText as N, VTextField as L, VListItem as te, VIcon as oe, VOtpInput as le } from "vuetify/components";
+import { defineStore as D } from "pinia";
+const ne = D("colorMode", () => {
+  const o = v(localStorage.getItem("colorMode") == "dark" ? "dark" : "light");
+  function n() {
+    o.value = o.value === "dark" ? "light" : "dark";
+  }
+  function l(r) {
+    localStorage.setItem("colorMode", r), document.documentElement.setAttribute("data-theme", r);
+  }
+  return S(o, (r) => l(r)), l(o.value), { mode: o, toggle: n };
+}), re = D("footer", () => {
+  const o = v([]), n = P(() => o.value.length > 0 ? o.value[o.value.length - 1] : null);
+  function l(a) {
+    return a.id || (a.id = (/* @__PURE__ */ new Date()).getTime().toString()), a.timeout === void 0 && (a.timeout = 5e3), o.value.push(a), a.timeout && setTimeout(() => {
+      r(a.id);
+    }, a.timeout), a.id;
+  }
+  function r(a) {
+    o.value = o.value.filter((c) => c.id !== a);
+  }
+  return { messages: o, current: n, addMessage: l, removeMessage: r };
+}), ae = D("notify", () => {
+  const o = v([]), n = v({});
+  function l(e) {
+    return e.id ? r(e.id) : e.id = (/* @__PURE__ */ new Date()).getTime().toString(), e.timeout === void 0 && (e.timeout = 5e3), o.value.push(e), e.timeout && (n.value[e.id] = setTimeout(() => {
+      r(e.id);
+    }, e.timeout)), e.id;
+  }
+  function r(e) {
+    o.value = o.value.filter((_) => _.id !== e), n.value[e] && (clearTimeout(n.value[e]), delete n.value[e]);
+  }
+  function a(e) {
+    return l({ text: e, type: "info" });
+  }
+  function c(e) {
+    return l({ text: e, type: "success" });
+  }
+  function u(e) {
+    return l({ text: e, type: "warning" });
+  }
+  function i(e) {
+    return l({ text: e, type: "error" });
+  }
+  return { messages: o, add: l, remove: r, info: a, success: c, warning: u, error: i };
+}), ue = { class: "d-flex flex-column pa-4 h-100" }, ie = ["textContent"], xe = /* @__PURE__ */ k({
+  __name: "AppBase",
+  props: {
+    drawerOpen: { type: Boolean, default: !1 },
+    drawerOpenModifiers: {}
+  },
+  emits: ["update:drawerOpen"],
+  setup(o) {
+    const n = ne(), l = B(o, "drawerOpen"), r = v(!1), a = re(), c = v(!1), u = v(null), i = ae(), e = q(), _ = A();
+    return S(r, (g) => {
+      localStorage.setItem("drawerDocked", String(g));
+    }), E(() => {
+      e.beforeEach(() => {
+        u.value = setTimeout(() => {
+          c.value = !0;
+        }, 300);
+      }), e.afterEach(() => {
+        u.value && (clearTimeout(u.value), u.value = null), c.value = !1;
+      }), r.value = localStorage.getItem("drawerDocked") === "true", l.value = r.value;
+    }), (g, y) => (m(), f(t(G), {
+      theme: t(n).mode
+    }, {
+      default: s(() => [
+        c.value ? (m(), f(t(H), {
+          key: 0,
+          indeterminate: "",
+          class: "mb-n1",
+          style: { "z-index": "100000", opacity: "0.5" },
+          height: "1"
+        })) : h("", !0),
+        d(t(O), { height: "64" }, {
+          default: s(() => [
+            V(g.$slots, "header")
+          ]),
+          _: 3
+        }),
+        d(t(J), { class: "bg-surface-light" }, {
+          default: s(() => [
+            b("div", ue, [
+              d(t(R))
+            ])
+          ]),
+          _: 1
+        }),
+        t(_).footer ? (m(), f(t(O), {
+          key: 1,
+          height: "40",
+          location: "bottom"
+        }, {
+          default: s(() => [
+            d(t(K), { class: "py-0 w-100 d-flex align-center" }, {
+              default: s(() => [
+                t(a).current ? (m(), w("span", {
+                  key: 0,
+                  textContent: M(t(a).current.text),
+                  class: j([t(a).current.type ? {} : { ["text-" + t(a).current.type]: !0 }, "overflow-hidden text-no-wrap"]),
+                  style: { "text-overflow": "ellipsis" }
+                }, null, 10, ie)) : h("", !0),
+                t(a).current && t(a).current.actions ? (m(!0), w(T, { key: 1 }, F(Object.entries(t(a).current.actions), (p, $) => (m(), f(t(x), {
+                  text: p[0],
+                  onClick: p[1],
+                  key: $,
+                  density: "comfortable",
+                  variant: "tonal",
+                  class: "mx-2 px-2 text-none",
+                  color: t(a).current.type
+                }, null, 8, ["text", "onClick", "color"]))), 128)) : h("", !0),
+                y[2] || (y[2] = b("div", { class: "me-auto" }, null, -1)),
+                V(g.$slots, "footer")
+              ]),
+              _: 3,
+              __: [2]
+            })
+          ]),
+          _: 3
+        })) : h("", !0),
+        t(_).drawer ? (m(), f(t(Q), {
+          key: 2,
+          modelValue: l.value,
+          "onUpdate:modelValue": y[1] || (y[1] = (p) => l.value = p),
+          width: "250",
+          "rail-width": "58",
+          rail: r.value,
+          mobile: r.value ? !1 : void 0
+        }, {
+          default: s(() => [
+            d(t(X), { class: "h-100 d-flex flex-column" }, {
+              default: s(() => [
+                V(g.$slots, "drawer"),
+                d(t(x), {
+                  onClick: y[0] || (y[0] = (p) => r.value = !r.value),
+                  icon: "mdi-pin-outline",
+                  rounded: "rounded",
+                  density: "comfortable",
+                  title: r.value ? "Undock sidebar" : "Dock sidebar",
+                  class: "my-1 mx-3 ms-auto",
+                  variant: r.value ? "tonal" : "text"
+                }, null, 8, ["title", "variant"])
+              ]),
+              _: 3
+            })
+          ]),
+          _: 3
+        }, 8, ["modelValue", "rail", "mobile"])) : h("", !0),
+        (m(!0), w(T, null, F(t(i).messages, (p, $) => (m(), f(t(Y), {
+          key: $,
+          "model-value": !0,
+          text: p.text,
+          color: p.type,
+          location: "bottom end",
+          style: z({ bottom: `${$ * 56}px` }),
+          timeout: -1
+        }, {
+          actions: s(() => [
+            d(t(x), {
+              icon: "mdi-close",
+              onClick: (be) => t(i).remove(p.id)
+            }, null, 8, ["onClick"])
+          ]),
+          _: 2
+        }, 1032, ["text", "color", "style"]))), 128))
+      ]),
+      _: 3
+    }, 8, ["theme"]));
+  }
+}), se = ["textContent"], ke = /* @__PURE__ */ k({
+  __name: "DashboardPage",
+  props: {
+    breadcrumbs: {},
+    fluid: { type: Boolean, default: !0 },
+    title: {}
+  },
+  setup(o) {
+    return (n, l) => (m(), f(t(Z), {
+      fluid: n.fluid,
+      class: "h-100 d-flex flex-column py-0 h-100"
+    }, {
+      default: s(() => [
+        n.breadcrumbs ? (m(), f(t(ee), {
+          key: 0,
+          items: n.breadcrumbs,
+          density: "comfortable",
+          class: "pa-0"
+        }, null, 8, ["items"])) : h("", !0),
+        n.title ? (m(), w("h1", {
+          key: 1,
+          textContent: M(n.title),
+          class: "text-h5 font-bold ma-1"
+        }, null, 8, se)) : h("", !0),
+        V(n.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["fluid"]));
+  }
+}), de = (o, n) => {
+  const l = o.__vccOpts || o;
+  for (const [r, a] of n)
+    l[r] = a;
+  return l;
+}, me = {}, ce = { class: "h-100 d-flex align-center" };
+function fe(o, n) {
+  return m(), w(T, null, [
+    n[0] || (n[0] = b("span", {
+      class: "border-s mx-3",
+      style: { height: "32px" }
+    }, null, -1)),
+    b("span", ce, [
+      V(o.$slots, "default")
+    ])
+  ], 64);
+}
+const _e = /* @__PURE__ */ de(me, [["render", fe]]), pe = { class: "d-flex justify-center" }, $e = /* @__PURE__ */ k({
+  __name: "LoginForm",
+  props: /* @__PURE__ */ C({
+    title: { default: "Login" },
+    submitButtonText: { default: "Login" },
+    minWidth: {},
+    maxWidth: {},
+    loading: { type: Boolean }
+  }, {
+    username: { default: "" },
+    usernameModifiers: {},
+    password: { default: "" },
+    passwordModifiers: {}
+  }),
+  emits: /* @__PURE__ */ C(["submit"], ["update:username", "update:password"]),
+  setup(o, { emit: n }) {
+    const l = B(o, "username"), r = B(o, "password"), a = n, c = v(!1);
+    return (u, i) => (m(), f(t(W), {
+      title: u.title,
+      "min-width": u.minWidth,
+      "max-width": u.maxWidth
+    }, {
+      default: s(() => [
+        d(t(I), {
+          onSubmit: i[2] || (i[2] = U((e) => a("submit", l.value, r.value), ["prevent"])),
+          modelValue: c.value,
+          "onUpdate:modelValue": i[3] || (i[3] = (e) => c.value = e)
+        }, {
+          default: s(() => [
+            d(t(N), null, {
+              default: s(() => [
+                d(t(L), {
+                  modelValue: l.value,
+                  "onUpdate:modelValue": i[0] || (i[0] = (e) => l.value = e),
+                  label: "Username",
+                  rules: [(e) => !!e || "Username is required"],
+                  "persistent-placeholder": "",
+                  autofocus: ""
+                }, null, 8, ["modelValue", "rules"]),
+                d(t(L), {
+                  modelValue: r.value,
+                  "onUpdate:modelValue": i[1] || (i[1] = (e) => r.value = e),
+                  label: "Password",
+                  type: "password",
+                  rules: [(e) => !!e || "Password is required"],
+                  "persistent-placeholder": ""
+                }, null, 8, ["modelValue", "rules"]),
+                b("div", pe, [
+                  d(t(x), {
+                    disabled: !c.value,
+                    type: "submit",
+                    color: "primary",
+                    variant: "flat",
+                    text: u.submitButtonText,
+                    loading: u.loading
+                  }, null, 8, ["disabled", "text", "loading"])
+                ])
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["modelValue"])
+      ]),
+      _: 1
+    }, 8, ["title", "min-width", "max-width"]));
+  }
+}), ve = { class: "text-no-wrap overflow-hidden" }, Be = /* @__PURE__ */ k({
+  __name: "NavDrawerLink",
+  props: {
+    to: {},
+    icon: {},
+    text: {}
+  },
+  setup(o) {
+    return (n, l) => (m(), f(t(te), {
+      role: "option",
+      to: n.to,
+      slim: ""
+    }, {
+      prepend: s(() => [
+        d(t(oe), { icon: n.icon }, null, 8, ["icon"])
+      ]),
+      default: s(() => [
+        b("span", ve, M(n.text), 1)
+      ]),
+      _: 1
+    }, 8, ["to"]));
+  }
+}), he = { class: "d-flex justify-center" }, Ce = /* @__PURE__ */ k({
+  __name: "OTPForm",
+  props: /* @__PURE__ */ C({
+    title: { default: "2FA Verification" },
+    subtitle: { default: "Enter the code from your authenticator app" },
+    submitButtonText: { default: "Verify" },
+    minWidth: {},
+    maxWidth: {},
+    loading: { type: Boolean },
+    length: { default: 6 },
+    autosubmit: { type: Boolean, default: !0 }
+  }, {
+    otp: { default: "" },
+    otpModifiers: {}
+  }),
+  emits: /* @__PURE__ */ C(["submit"], ["update:otp"]),
+  setup(o, { emit: n }) {
+    const l = B(o, "otp"), r = n, a = o, c = P(() => l.value.length === a.length);
+    return S(l, () => {
+      a.autosubmit && l.value.length === a.length && r("submit", l.value);
+    }), (u, i) => (m(), f(t(W), {
+      title: u.title,
+      subtitle: u.subtitle,
+      "min-width": u.minWidth,
+      "max-width": u.maxWidth
+    }, {
+      default: s(() => [
+        d(t(I), {
+          onSubmit: i[1] || (i[1] = U((e) => r("submit", l.value), ["prevent"])),
+          "model-value": c.value
+        }, {
+          default: s(() => [
+            d(t(N), null, {
+              default: s(() => [
+                d(t(le), {
+                  modelValue: l.value,
+                  "onUpdate:modelValue": i[0] || (i[0] = (e) => l.value = e),
+                  label: "OTP",
+                  "persistent-placeholder": "",
+                  autofocus: "",
+                  length: u.length
+                }, null, 8, ["modelValue", "length"]),
+                b("div", he, [
+                  d(t(x), {
+                    disabled: !c.value,
+                    type: "submit",
+                    color: "primary",
+                    variant: "flat",
+                    text: u.submitButtonText,
+                    loading: u.loading
+                  }, null, 8, ["disabled", "text", "loading"])
+                ])
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["model-value"])
+      ]),
+      _: 1
+    }, 8, ["title", "subtitle", "min-width", "max-width"]));
+  }
+});
+export {
+  xe as AppBase,
+  ke as DashboardPage,
+  _e as FooterSection,
+  $e as LoginForm,
+  Be as NavDrawerLink,
+  Ce as OTPForm,
+  ne as useColorMode,
+  re as useFooter,
+  ae as useNotify
+};

package/dist/index.umd.cjs

@@ -0,0 +1 @@
+(function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("vue-router"),require("vuetify/components"),require("pinia")):typeof define=="function"&&define.amd?define(["exports","vue","vue-router","vuetify/components","pinia"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s.appsalutely={},s.Vue,s.VueRouter,s.VuetifyComponents,s.Pinia))})(this,function(s,e,y,i,w){"use strict";const k=w.defineStore("colorMode",()=>{const o=e.ref(localStorage.getItem("colorMode")=="dark"?"dark":"light");function l(){o.value=o.value==="dark"?"light":"dark"}function r(n){localStorage.setItem("colorMode",n),document.documentElement.setAttribute("data-theme",n)}return e.watch(o,n=>r(n)),r(o.value),{mode:o,toggle:l}}),b=w.defineStore("footer",()=>{const o=e.ref([]),l=e.computed(()=>o.value.length>0?o.value[o.value.length-1]:null);function r(a){return a.id||(a.id=new Date().getTime().toString()),a.timeout===void 0&&(a.timeout=5e3),o.value.push(a),a.timeout&&setTimeout(()=>{n(a.id)},a.timeout),a.id}function n(a){o.value=o.value.filter(f=>f.id!==a)}return{messages:o,current:l,addMessage:r,removeMessage:n}}),B=w.defineStore("notify",()=>{const o=e.ref([]),l=e.ref({});function r(t){return t.id?n(t.id):t.id=new Date().getTime().toString(),t.timeout===void 0&&(t.timeout=5e3),o.value.push(t),t.timeout&&(l.value[t.id]=setTimeout(()=>{n(t.id)},t.timeout)),t.id}function n(t){o.value=o.value.filter(h=>h.id!==t),l.value[t]&&(clearTimeout(l.value[t]),delete l.value[t])}function a(t){return r({text:t,type:"info"})}function f(t){return r({text:t,type:"success"})}function d(t){return r({text:t,type:"warning"})}function u(t){return r({text:t,type:"error"})}return{messages:o,add:r,remove:n,info:a,success:f,warning:d,error:u}}),g={class:"d-flex flex-column pa-4 h-100"},x=["textContent"],C=e.defineComponent({__name:"AppBase",props:{drawerOpen:{type:Boolean,default:!1},drawerOpenModifiers:{}},emits:["update:drawerOpen"],setup(o){const l=k(),r=e.useModel(o,"drawerOpen"),n=e.ref(!1),a=b(),f=e.ref(!1),d=e.ref(null),u=B(),t=y.useRouter(),h=e.useSlots();return e.watch(n,p=>{localStorage.setItem("drawerDocked",String(p))}),e.onBeforeMount(()=>{t.beforeEach(()=>{d.value=setTimeout(()=>{f.value=!0},300)}),t.afterEach(()=>{d.value&&(clearTimeout(d.value),d.value=null),f.value=!1}),n.value=localStorage.getItem("drawerDocked")==="true",r.value=n.value}),(p,m)=>(e.openBlock(),e.createBlock(e.unref(i.VApp),{theme:e.unref(l).mode},{default:e.withCtx(()=>[f.value?(e.openBlock(),e.createBlock(e.unref(i.VProgressLinear),{key:0,indeterminate:"",class:"mb-n1",style:{"z-index":"100000",opacity:"0.5"},height:"1"})):e.createCommentVNode("",!0),e.createVNode(e.unref(i.VAppBar),{height:"64"},{default:e.withCtx(()=>[e.renderSlot(p.$slots,"header")]),_:3}),e.createVNode(e.unref(i.VMain),{class:"bg-surface-light"},{default:e.withCtx(()=>[e.createElementVNode("div",g,[e.createVNode(e.unref(y.RouterView))])]),_:1}),e.unref(h).footer?(e.openBlock(),e.createBlock(e.unref(i.VAppBar),{key:1,height:"40",location:"bottom"},{default:e.withCtx(()=>[e.createVNode(e.unref(i.VFooter),{class:"py-0 w-100 d-flex align-center"},{default:e.withCtx(()=>[e.unref(a).current?(e.openBlock(),e.createElementBlock("span",{key:0,textContent:e.toDisplayString(e.unref(a).current.text),class:e.normalizeClass([e.unref(a).current.type?{}:{["text-"+e.unref(a).current.type]:!0},"overflow-hidden text-no-wrap"]),style:{"text-overflow":"ellipsis"}},null,10,x)):e.createCommentVNode("",!0),e.unref(a).current&&e.unref(a).current.actions?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(Object.entries(e.unref(a).current.actions),(c,V)=>(e.openBlock(),e.createBlock(e.unref(i.VBtn),{text:c[0],onClick:c[1],key:V,density:"comfortable",variant:"tonal",class:"mx-2 px-2 text-none",color:e.unref(a).current.type},null,8,["text","onClick","color"]))),128)):e.createCommentVNode("",!0),m[2]||(m[2]=e.createElementVNode("div",{class:"me-auto"},null,-1)),e.renderSlot(p.$slots,"footer")]),_:3,__:[2]})]),_:3})):e.createCommentVNode("",!0),e.unref(h).drawer?(e.openBlock(),e.createBlock(e.unref(i.VNavigationDrawer),{key:2,modelValue:r.value,"onUpdate:modelValue":m[1]||(m[1]=c=>r.value=c),width:"250","rail-width":"58",rail:n.value,mobile:n.value?!1:void 0},{default:e.withCtx(()=>[e.createVNode(e.unref(i.VList),{class:"h-100 d-flex flex-column"},{default:e.withCtx(()=>[e.renderSlot(p.$slots,"drawer"),e.createVNode(e.unref(i.VBtn),{onClick:m[0]||(m[0]=c=>n.value=!n.value),icon:"mdi-pin-outline",rounded:"rounded",density:"comfortable",title:n.value?"Undock sidebar":"Dock sidebar",class:"my-1 mx-3 ms-auto",variant:n.value?"tonal":"text"},null,8,["title","variant"])]),_:3})]),_:3},8,["modelValue","rail","mobile"])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(u).messages,(c,V)=>(e.openBlock(),e.createBlock(e.unref(i.VSnackbar),{key:V,"model-value":!0,text:c.text,color:c.type,location:"bottom end",style:e.normalizeStyle({bottom:`${V*56}px`}),timeout:-1},{actions:e.withCtx(()=>[e.createVNode(e.unref(i.VBtn),{icon:"mdi-close",onClick:W=>e.unref(u).remove(c.id)},null,8,["onClick"])]),_:2},1032,["text","color","style"]))),128))]),_:3},8,["theme"]))}}),N=["textContent"],S=e.defineComponent({__name:"DashboardPage",props:{breadcrumbs:{},fluid:{type:Boolean,default:!0},title:{}},setup(o){return(l,r)=>(e.openBlock(),e.createBlock(e.unref(i.VContainer),{fluid:l.fluid,class:"h-100 d-flex flex-column py-0 h-100"},{default:e.withCtx(()=>[l.breadcrumbs?(e.openBlock(),e.createBlock(e.unref(i.VBreadcrumbs),{key:0,items:l.breadcrumbs,density:"comfortable",class:"pa-0"},null,8,["items"])):e.createCommentVNode("",!0),l.title?(e.openBlock(),e.createElementBlock("h1",{key:1,textContent:e.toDisplayString(l.title),class:"text-h5 font-bold ma-1"},null,8,N)):e.createCommentVNode("",!0),e.renderSlot(l.$slots,"default")]),_:3},8,["fluid"]))}}),_=(o,l)=>{const r=o.__vccOpts||o;for(const[n,a]of l)r[n]=a;return r},M={},T={class:"h-100 d-flex align-center"};function $(o,l){return e.openBlock(),e.createElementBlock(e.Fragment,null,[l[0]||(l[0]=e.createElementVNode("span",{class:"border-s mx-3",style:{height:"32px"}},null,-1)),e.createElementVNode("span",T,[e.renderSlot(o.$slots,"default")])],64)}const F=_(M,[["render",$]]),E={class:"d-flex justify-center"},D=e.defineComponent({__name:"LoginForm",props:e.mergeModels({title:{default:"Login"},submitButtonText:{default:"Login"},minWidth:{},maxWidth:{},loading:{type:Boolean}},{username:{default:""},usernameModifiers:{},password:{default:""},passwordModifiers:{}}),emits:e.mergeModels(["submit"],["update:username","update:password"]),setup(o,{emit:l}){const r=e.useModel(o,"username"),n=e.useModel(o,"password"),a=l,f=e.ref(!1);return(d,u)=>(e.openBlock(),e.createBlock(e.unref(i.VCard),{title:d.title,"min-width":d.minWidth,"max-width":d.maxWidth},{default:e.withCtx(()=>[e.createVNode(e.unref(i.VForm),{onSubmit:u[2]||(u[2]=e.withModifiers(t=>a("submit",r.value,n.value),["prevent"])),modelValue:f.value,"onUpdate:modelValue":u[3]||(u[3]=t=>f.value=t)},{default:e.withCtx(()=>[e.createVNode(e.unref(i.VCardText),null,{default:e.withCtx(()=>[e.createVNode(e.unref(i.VTextField),{modelValue:r.value,"onUpdate:modelValue":u[0]||(u[0]=t=>r.value=t),label:"Username",rules:[t=>!!t||"Username is required"],"persistent-placeholder":"",autofocus:""},null,8,["modelValue","rules"]),e.createVNode(e.unref(i.VTextField),{modelValue:n.value,"onUpdate:modelValue":u[1]||(u[1]=t=>n.value=t),label:"Password",type:"password",rules:[t=>!!t||"Password is required"],"persistent-placeholder":""},null,8,["modelValue","rules"]),e.createElementVNode("div",E,[e.createVNode(e.unref(i.VBtn),{disabled:!f.value,type:"submit",color:"primary",variant:"flat",text:d.submitButtonText,loading:d.loading},null,8,["disabled","text","loading"])])]),_:1})]),_:1},8,["modelValue"])]),_:1},8,["title","min-width","max-width"]))}}),O={class:"text-no-wrap overflow-hidden"},L=e.defineComponent({__name:"NavDrawerLink",props:{to:{},icon:{},text:{}},setup(o){return(l,r)=>(e.openBlock(),e.createBlock(e.unref(i.VListItem),{role:"option",to:l.to,slim:""},{prepend:e.withCtx(()=>[e.createVNode(e.unref(i.VIcon),{icon:l.icon},null,8,["icon"])]),default:e.withCtx(()=>[e.createElementVNode("span",O,e.toDisplayString(l.text),1)]),_:1},8,["to"]))}}),P={class:"d-flex justify-center"},U=e.defineComponent({__name:"OTPForm",props:e.mergeModels({title:{default:"2FA Verification"},subtitle:{default:"Enter the code from your authenticator app"},submitButtonText:{default:"Verify"},minWidth:{},maxWidth:{},loading:{type:Boolean},length:{default:6},autosubmit:{type:Boolean,default:!0}},{otp:{default:""},otpModifiers:{}}),emits:e.mergeModels(["submit"],["update:otp"]),setup(o,{emit:l}){const r=e.useModel(o,"otp"),n=l,a=o,f=e.computed(()=>r.value.length===a.length);return e.watch(r,()=>{a.autosubmit&&r.value.length===a.length&&n("submit",r.value)}),(d,u)=>(e.openBlock(),e.createBlock(e.unref(i.VCard),{title:d.title,subtitle:d.subtitle,"min-width":d.minWidth,"max-width":d.maxWidth},{default:e.withCtx(()=>[e.createVNode(e.unref(i.VForm),{onSubmit:u[1]||(u[1]=e.withModifiers(t=>n("submit",r.value),["prevent"])),"model-value":f.value},{default:e.withCtx(()=>[e.createVNode(e.unref(i.VCardText),null,{default:e.withCtx(()=>[e.createVNode(e.unref(i.VOtpInput),{modelValue:r.value,"onUpdate:modelValue":u[0]||(u[0]=t=>r.value=t),label:"OTP","persistent-placeholder":"",autofocus:"",length:d.length},null,8,["modelValue","length"]),e.createElementVNode("div",P,[e.createVNode(e.unref(i.VBtn),{disabled:!f.value,type:"submit",color:"primary",variant:"flat",text:d.submitButtonText,loading:d.loading},null,8,["disabled","text","loading"])])]),_:1})]),_:1},8,["model-value"])]),_:1},8,["title","subtitle","min-width","max-width"]))}});s.AppBase=C,s.DashboardPage=S,s.FooterSection=F,s.LoginForm=D,s.NavDrawerLink=L,s.OTPForm=U,s.useColorMode=k,s.useFooter=b,s.useNotify=B,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});

package/dist/stores/colorMode.d.ts

@@ -0,0 +1,11 @@
+declare const _default: import("pinia").StoreDefinition<"colorMode", Pick<{
+    mode: import("vue").Ref<"light" | "dark", "light" | "dark">;
+    toggle: () => void;
+}, "mode">, Pick<{
+    mode: import("vue").Ref<"light" | "dark", "light" | "dark">;
+    toggle: () => void;
+}, never>, Pick<{
+    mode: import("vue").Ref<"light" | "dark", "light" | "dark">;
+    toggle: () => void;
+}, "toggle">>;
+export default _default;

package/dist/stores/footer.d.ts

@@ -0,0 +1,98 @@
+export interface FooterMessage {
+    id?: string;
+    text: string;
+    type?: 'info' | 'success' | 'warning' | 'error';
+    timeout?: number;
+    actions?: {
+        [key: string]: () => void;
+    };
+}
+declare const _default: import("pinia").StoreDefinition<"footer", Pick<{
+    messages: import("vue").Ref<{
+        id?: string | undefined;
+        text: string;
+        type?: "info" | "success" | "warning" | "error" | undefined;
+        timeout?: number | undefined;
+        actions?: {
+            [key: string]: () => void;
+        } | undefined;
+    }[], FooterMessage[] | {
+        id?: string | undefined;
+        text: string;
+        type?: "info" | "success" | "warning" | "error" | undefined;
+        timeout?: number | undefined;
+        actions?: {
+            [key: string]: () => void;
+        } | undefined;
+    }[]>;
+    current: import("vue").ComputedRef<{
+        id?: string | undefined;
+        text: string;
+        type?: "info" | "success" | "warning" | "error" | undefined;
+        timeout?: number | undefined;
+        actions?: {
+            [key: string]: () => void;
+        } | undefined;
+    } | null>;
+    addMessage: (message: FooterMessage) => string;
+    removeMessage: (id: string) => void;
+}, "messages">, Pick<{
+    messages: import("vue").Ref<{
+        id?: string | undefined;
+        text: string;
+        type?: "info" | "success" | "warning" | "error" | undefined;
+        timeout?: number | undefined;
+        actions?: {
+            [key: string]: () => void;
+        } | undefined;
+    }[], FooterMessage[] | {
+        id?: string | undefined;
+        text: string;
+        type?: "info" | "success" | "warning" | "error" | undefined;
+        timeout?: number | undefined;
+        actions?: {
+            [key: string]: () => void;
+        } | undefined;
+    }[]>;
+    current: import("vue").ComputedRef<{
+        id?: string | undefined;
+        text: string;
+        type?: "info" | "success" | "warning" | "error" | undefined;
+        timeout?: number | undefined;
+        actions?: {
+            [key: string]: () => void;
+        } | undefined;
+    } | null>;
+    addMessage: (message: FooterMessage) => string;
+    removeMessage: (id: string) => void;
+}, "current">, Pick<{
+    messages: import("vue").Ref<{
+        id?: string | undefined;
+        text: string;
+        type?: "info" | "success" | "warning" | "error" | undefined;
+        timeout?: number | undefined;
+        actions?: {
+            [key: string]: () => void;
+        } | undefined;
+    }[], FooterMessage[] | {
+        id?: string | undefined;
+        text: string;
+        type?: "info" | "success" | "warning" | "error" | undefined;
+        timeout?: number | undefined;
+        actions?: {
+            [key: string]: () => void;
+        } | undefined;
+    }[]>;
+    current: import("vue").ComputedRef<{
+        id?: string | undefined;
+        text: string;
+        type?: "info" | "success" | "warning" | "error" | undefined;
+        timeout?: number | undefined;
+        actions?: {
+            [key: string]: () => void;
+        } | undefined;
+    } | null>;
+    addMessage: (message: FooterMessage) => string;
+    removeMessage: (id: string) => void;
+}, "addMessage" | "removeMessage">>;
+export default _default;

package/dist/stores/notify.d.ts

@@ -0,0 +1,62 @@
+export interface NotifyMessage {
+    id?: string;
+    text: string;
+    type?: 'info' | 'success' | 'warning' | 'error';
+    timeout?: number;
+}
+declare const _default: import("pinia").StoreDefinition<"notify", Pick<{
+    messages: import("vue").Ref<{
+        id?: string | undefined;
+        text: string;
+        type?: "info" | "success" | "warning" | "error" | undefined;
+        timeout?: number | undefined;
+    }[], NotifyMessage[] | {
+        id?: string | undefined;
+        text: string;
+        type?: "info" | "success" | "warning" | "error" | undefined;
+        timeout?: number | undefined;
+    }[]>;
+    add: (message: NotifyMessage) => string;
+    remove: (id: string) => void;
+    info: (text: string) => string;
+    success: (text: string) => string;
+    warning: (text: string) => string;
+    error: (text: string) => string;
+}, "messages">, Pick<{
+    messages: import("vue").Ref<{
+        id?: string | undefined;
+        text: string;
+        type?: "info" | "success" | "warning" | "error" | undefined;
+        timeout?: number | undefined;
+    }[], NotifyMessage[] | {
+        id?: string | undefined;
+        text: string;
+        type?: "info" | "success" | "warning" | "error" | undefined;
+        timeout?: number | undefined;
+    }[]>;
+    add: (message: NotifyMessage) => string;
+    remove: (id: string) => void;
+    info: (text: string) => string;
+    success: (text: string) => string;
+    warning: (text: string) => string;
+    error: (text: string) => string;
+}, never>, Pick<{
+    messages: import("vue").Ref<{
+        id?: string | undefined;
+        text: string;
+        type?: "info" | "success" | "warning" | "error" | undefined;
+        timeout?: number | undefined;
+    }[], NotifyMessage[] | {
+        id?: string | undefined;
+        text: string;
+        type?: "info" | "success" | "warning" | "error" | undefined;
+        timeout?: number | undefined;
+    }[]>;
+    add: (message: NotifyMessage) => string;
+    remove: (id: string) => void;
+    info: (text: string) => string;
+    success: (text: string) => string;
+    warning: (text: string) => string;
+    error: (text: string) => string;
+}, "info" | "success" | "warning" | "error" | "add" | "remove">>;
+export default _default;

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "appsalutely",
-  "version": "0.1.0",
+  "description": "A utility library for building applications with FastAPI and Vue.js",
+  "version": "0.1.2",
   "type": "module",
   "module": "./dist/index.js",
   "main": "./dist/index.umd.js",

package/vite.config.d.ts

@@ -0,0 +1,3 @@
+import { type UserConfig } from 'vite';
+declare const _default: UserConfig;
+export default _default;

package/vite.config.js

@@ -0,0 +1,25 @@
+import { defineConfig } from 'vite';
+import Vue from '@vitejs/plugin-vue';
+var config = {
+    build: {
+        lib: {
+            entry: 'src/index.ts',
+            name: 'appsalutely',
+            fileName: 'index',
+        },
+        rollupOptions: {
+            external: ['vue', 'vue-router', 'pinia', 'vuetify', 'vuetify/components'],
+            output: {
+                globals: {
+                    vue: 'Vue',
+                    'vue-router': 'VueRouter',
+                    pinia: 'Pinia',
+                    vuetify: 'Vuetify',
+                    'vuetify/components': 'VuetifyComponents',
+                },
+            },
+        },
+    },
+    plugins: [Vue()],
+};
+export default defineConfig(config);

package/src/components/AppBase.vue

@@ -1,139 +0,0 @@
-<script setup lang="ts">
-import { ref, onBeforeMount, watch, useSlots } from 'vue'
-import { useRouter, RouterView } from 'vue-router'
-import {
-  VApp,
-  VProgressLinear,
-  VAppBar,
-  VNavigationDrawer,
-  VList,
-  VMain,
-  VFooter,
-  VBtn,
-  VSnackbar,
-} from 'vuetify/components'
-import useColorMode from '../stores/colorMode'
-import useFooter from '../stores/footer'
-import useNotify from '../stores/notify'
-
-const colorMode = useColorMode()
-const drawerOpen = defineModel<boolean>('drawerOpen', { default: false })
-const drawerDocked = ref(false)
-const footer = useFooter()
-const navigating = ref(false)
-const navigatingTimeout = ref<number | null>(null)
-const notify = useNotify()
-const router = useRouter()
-const slots = useSlots()
-
-watch(drawerDocked, (newValue) => {
-  localStorage.setItem('drawerDocked', String(newValue))
-})
-
-onBeforeMount(() => {
-  router.beforeEach(() => {
-    navigatingTimeout.value = setTimeout(() => {
-      navigating.value = true
-    }, 300)
-  })
-  router.afterEach(() => {
-    if (navigatingTimeout.value) {
-      clearTimeout(navigatingTimeout.value)
-      navigatingTimeout.value = null
-    }
-    navigating.value = false
-  })
-  drawerDocked.value = localStorage.getItem('drawerDocked') === 'true'
-  drawerOpen.value = drawerDocked.value
-})
-</script>
-<template>
-  <VApp :theme="colorMode.mode">
-    <VProgressLinear
-      indeterminate
-      v-if="navigating"
-      class="mb-n1"
-      style="z-index: 100000; opacity: 0.5"
-      height="1"
-    />
-    <VAppBar height="64">
-      <slot name="header" />
-    </VAppBar>
-    <VMain class="bg-surface-light">
-      <div class="d-flex flex-column pa-4 h-100">
-        <RouterView />
-      </div>
-    </VMain>
-    <VAppBar v-if="slots.footer" height="40" location="bottom">
-      <VFooter class="py-0 w-100 d-flex align-center">
-        <span
-          v-if="footer.current"
-          v-text="footer.current.text"
-          :class="footer.current.type ? {} : { ['text-' + footer.current.type]: true }"
-          style="text-overflow: ellipsis"
-          class="overflow-hidden text-no-wrap"
-        />
-        <template v-if="footer.current && footer.current.actions">
-          <VBtn
-            v-for="(action, index) of Object.entries(footer.current.actions)"
-            :text="action[0]"
-            @click="action[1]"
-            :key="index"
-            density="comfortable"
-            variant="tonal"
-            class="mx-2 px-2 text-none"
-            :color="footer.current.type"
-          />
-        </template>
-        <div class="me-auto" />
-        <slot name="footer" />
-      </VFooter>
-    </VAppBar>
-    <VNavigationDrawer
-      v-if="slots.drawer"
-      v-model="drawerOpen"
-      width="250"
-      rail-width="58"
-      :rail="drawerDocked"
-      :mobile="drawerDocked ? false : undefined"
-    >
-      <VList class="h-100 d-flex flex-column">
-        <slot name="drawer" />
-        <VBtn
-          @click="drawerDocked = !drawerDocked"
-          icon="mdi-pin-outline"
-          rounded="rounded"
-          density="comfortable"
-          :title="drawerDocked ? 'Undock sidebar' : 'Dock sidebar'"
-          class="my-1 mx-3 ms-auto"
-          :variant="drawerDocked ? 'tonal' : 'text'"
-        />
-      </VList>
-    </VNavigationDrawer>
-    <VSnackbar
-      v-for="(message, index) of notify.messages"
-      :key="index"
-      :model-value="true"
-      :text="message.text"
-      :color="message.type"
-      location="bottom end"
-      :style="{ bottom: `${index * 56}px` }"
-      :timeout="-1"
-    >
-      <template #actions>
-        <VBtn icon="mdi-close" @click="notify.remove(message.id!)" />
-      </template>
-    </VSnackbar>
-  </VApp>
-</template>
-<style>
-html {
-  overflow: auto;
-}
-html[data-theme='dark'] {
-  color-scheme: dark;
-}
-html[data-theme='light'] {
-  color-scheme: light;
-}
-</style>

package/src/components/DashboardPage.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import { VBreadcrumbs, VContainer } from 'vuetify/components'
-import { defineProps, withDefaults } from 'vue'
-
-withDefaults(
-  defineProps<{
-    breadcrumbs?: VBreadcrumbs['$props']['items']
-    fluid?: boolean
-    title?: string
-  }>(),
-  {
-    fluid: true,
-  },
-)
-</script>
-<template>
-  <VContainer :fluid="fluid" class="h-100 d-flex flex-column py-0 h-100">
-    <VBreadcrumbs :items="breadcrumbs" density="comfortable" class="pa-0" v-if="breadcrumbs" />
-    <h1 v-if="title" v-text="title" class="text-h5 font-bold ma-1" />
-    <slot />
-  </VContainer>
-</template>

package/src/components/FooterSection.vue

@@ -1,6 +0,0 @@
-<template>
-  <span class="border-s mx-3" style="height: 32px" />
-  <span class="h-100 d-flex align-center">
-    <slot />
-  </span>
-</template>

package/src/components/LoginForm.vue

@@ -1,56 +0,0 @@
-<script setup lang="ts">
-import { defineProps, withDefaults, defineModel, defineEmits, ref } from 'vue'
-import { VBtn, VCard, VCardText, VForm, VTextField } from 'vuetify/components'
-
-const username = defineModel<string>('username', { default: '' })
-const password = defineModel<string>('password', { default: '' })
-const emit = defineEmits<{
-  submit: [string, string]
-}>()
-withDefaults(
-  defineProps<{
-    title?: string
-    submitButtonText?: string
-    minWidth?: string | number
-    maxWidth?: string | number
-    loading?: boolean
-  }>(),
-  {
-    title: 'Login',
-    submitButtonText: 'Login',
-  },
-)
-const valid = ref(false)
-</script>
-<template>
-  <VCard :title="title" :min-width="minWidth" :max-width="maxWidth">
-    <VForm @submit.prevent="emit('submit', username, password)" v-model="valid">
-      <VCardText>
-        <VTextField
-          v-model="username"
-          label="Username"
-          :rules="[(v) => !!v || 'Username is required']"
-          persistent-placeholder
-          autofocus
-        />
-        <VTextField
-          v-model="password"
-          label="Password"
-          type="password"
-          :rules="[(v) => !!v || 'Password is required']"
-          persistent-placeholder
-        />
-        <div class="d-flex justify-center">
-          <VBtn
-            :disabled="!valid"
-            type="submit"
-            color="primary"
-            variant="flat"
-            :text="submitButtonText"
-            :loading="loading"
-          />
-        </div>
-      </VCardText>
-    </VForm>
-  </VCard>
-</template>

package/src/components/NavDrawerLink.vue

@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import type { RouteLocationRaw } from 'vue-router'
-import { VListItem, VIcon } from 'vuetify/components'
-
-defineProps<{
-  to: RouteLocationRaw
-  icon: string
-  text: string
-}>()
-</script>
-<template>
-  <VListItem role="option" :to="to" slim>
-    <template #prepend>
-      <VIcon :icon="icon" />
-    </template>
-    <span class="text-no-wrap overflow-hidden">{{ text }}</span>
-  </VListItem>
-</template>

package/src/components/OTPForm.vue

@@ -1,54 +0,0 @@
-<script setup lang="ts">
-import { defineProps, withDefaults, defineModel, defineEmits, computed, watch } from 'vue'
-import { VBtn, VCard, VCardText, VForm, VOtpInput } from 'vuetify/components'
-
-const otp = defineModel<string>('otp', { default: '' })
-const emit = defineEmits<{
-  submit: [string]
-}>()
-const props = withDefaults(
-  defineProps<{
-    title?: string
-    subtitle?: string
-    submitButtonText?: string
-    minWidth?: string | number
-    maxWidth?: string | number
-    loading?: boolean
-    length?: number
-    autosubmit?: boolean
-  }>(),
-  {
-    title: '2FA Verification',
-    subtitle: 'Enter the code from your authenticator app',
-    submitButtonText: 'Verify',
-    length: 6,
-    autosubmit: true,
-  },
-)
-const valid = computed(() => otp.value.length === props.length)
-
-watch(otp, () => {
-  if (props.autosubmit && otp.value.length === props.length) {
-    emit('submit', otp.value)
-  }
-})
-</script>
-<template>
-  <VCard :title="title" :subtitle="subtitle" :min-width="minWidth" :max-width="maxWidth">
-    <VForm @submit.prevent="emit('submit', otp)" :model-value="valid">
-      <VCardText>
-        <VOtpInput v-model="otp" label="OTP" persistent-placeholder autofocus :length="length" />
-        <div class="d-flex justify-center">
-          <VBtn
-            :disabled="!valid"
-            type="submit"
-            color="primary"
-            variant="flat"
-            :text="submitButtonText"
-            :loading="loading"
-          />
-        </div>
-      </VCardText>
-    </VForm>
-  </VCard>
-</template>

package/src/index.ts

@@ -1,22 +0,0 @@
-import AppBase from './components/AppBase.vue'
-import DashboardPage from './components/DashboardPage.vue'
-import FooterSection from './components/FooterSection.vue'
-import LoginForm from './components/LoginForm.vue'
-import NavDrawerLink from './components/NavDrawerLink.vue'
-import OTPForm from './components/OTPForm.vue'
-
-import useColorMode from './stores/colorMode'
-import useFooter from './stores/footer'
-import useNotify from './stores/notify'
-
-export {
-  AppBase,
-  DashboardPage,
-  FooterSection,
-  LoginForm,
-  NavDrawerLink,
-  OTPForm,
-  useColorMode,
-  useFooter,
-  useNotify,
-}

package/src/stores/colorMode.ts

@@ -1,16 +0,0 @@
-import { ref, watch } from 'vue'
-import { defineStore } from 'pinia'
-
-export default defineStore('colorMode', () => {
-  const mode = ref<'light' | 'dark'>(localStorage.getItem('colorMode') == 'dark' ? 'dark' : 'light')
-  function toggle() {
-    mode.value = mode.value === 'dark' ? 'light' : 'dark'
-  }
-  function update(newMode: 'light' | 'dark') {
-    localStorage.setItem('colorMode', newMode)
-    document.documentElement.setAttribute('data-theme', newMode)
-  }
-  watch(mode, (newMode) => update(newMode))
-  update(mode.value)
-  return { mode, toggle }
-})

package/src/stores/footer.ts

@@ -1,41 +0,0 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
-
-export interface FooterMessage {
-  id?: string
-  text: string
-  type?: 'info' | 'success' | 'warning' | 'error'
-  timeout?: number
-  actions?: {
-    [key: string]: () => void
-  }
-}
-
-export default defineStore('footer', () => {
-  const messages = ref<FooterMessage[]>([])
-  const current = computed(() => {
-    if (messages.value.length > 0) {
-      return messages.value[messages.value.length - 1]
-    }
-    return null
-  })
-  function addMessage(message: FooterMessage) {
-    if (!message.id) {
-      message.id = new Date().getTime().toString()
-    }
-    if (message.timeout === undefined) {
-      message.timeout = 5000
-    }
-    messages.value.push(message)
-    if (message.timeout) {
-      setTimeout(() => {
-        removeMessage(message.id!)
-      }, message.timeout)
-    }
-    return message.id!
-  }
-  function removeMessage(id: string) {
-    messages.value = messages.value.filter((message) => message.id !== id)
-  }
-  return { messages, current, addMessage, removeMessage }
-})

package/src/stores/notify.ts

@@ -1,51 +0,0 @@
-import { ref } from 'vue'
-import { defineStore } from 'pinia'
-
-export interface NotifyMessage {
-  id?: string
-  text: string
-  type?: 'info' | 'success' | 'warning' | 'error'
-  timeout?: number
-}
-
-export default defineStore('notify', () => {
-  const messages = ref<NotifyMessage[]>([])
-  const timeouts = ref<Record<string, number>>({})
-  function add(message: NotifyMessage) {
-    if (!message.id) {
-      message.id = new Date().getTime().toString()
-    } else {
-      remove(message.id)
-    }
-    if (message.timeout === undefined) {
-      message.timeout = 5000
-    }
-    messages.value.push(message)
-    if (message.timeout) {
-      timeouts.value[message.id] = setTimeout(() => {
-        remove(message.id!)
-      }, message.timeout)
-    }
-    return message.id!
-  }
-  function remove(id: string) {
-    messages.value = messages.value.filter((message) => message.id !== id)
-    if (timeouts.value[id]) {
-      clearTimeout(timeouts.value[id])
-      delete timeouts.value[id]
-    }
-  }
-  function info(text: string) {
-    return add({ text, type: 'info' })
-  }
-  function success(text: string) {
-    return add({ text, type: 'success' })
-  }
-  function warning(text: string) {
-    return add({ text, type: 'warning' })
-  }
-  function error(text: string) {
-    return add({ text, type: 'error' })
-  }
-  return { messages, add, remove, info, success, warning, error }
-})