@fy-/fws-vue 0.0.1

package/stores/serverRouter.ts

@@ -0,0 +1,49 @@
+import { defineStore, Pinia } from "pinia";
+import type { Router } from "vue-router";
+
+export interface ServerRouterState {
+  _router: any | null;
+  status: number;
+  redirect?: string;
+}
+
+export const useServerRouter = defineStore({
+  id: "routerStore",
+  state: () =>
+    ({
+      _router: null,
+      status: 200,
+      redirect: undefined,
+    }) as ServerRouterState,
+  getters: {
+    currentRoute: (state) => state._router!.currentRoute,
+    route: (state) => state._router!.currentRoute,
+  },
+  actions: {
+    setStatus(status: number) {
+      this.status = status;
+    },
+    _setRouter(_router: Router | null) {
+      (this._router as unknown as Router | null) = _router;
+    },
+    push(path: any, status = 302) {
+      this.status = status;
+      if (status != 302) this.redirect = path;
+      return this._router?.push(path);
+    },
+    replace(path: any, status = 302) {
+      this.status = status;
+      if (status != 302) this.redirect = path;
+      return this._router?.replace(path);
+    },
+    go(delta: number) {
+      this._router?.go(delta);
+    },
+    back() {
+      this._router?.go(-1);
+    },
+    forward() {
+      this._router?.go(1);
+    },
+  },
+});

package/stores/user.ts

@@ -0,0 +1,81 @@
+import { defineStore } from "pinia";
+import type { User } from "@fy-/fws-types";
+import { APIResult } from "../rest";
+import { rest } from "@fy-/fws-js";
+import { computed } from "vue";
+import { RouteLocation, useRouter } from "vue-router";
+import { useServerRouter } from "./serverRouter";
+
+export type UserStore = {
+  user: User | null;
+};
+
+export const useUserStore = defineStore({
+  id: "userStore",
+  state: (): UserStore => ({
+    user: null,
+  }),
+  getters: {
+    isAuth: (state): boolean => {
+      return !(state.user === null);
+    },
+  },
+  actions: {
+    async refreshUser() {
+      const user: APIResult = await rest("User:get", "GET").catch((err) => {
+        console.log(err);
+        this.setUser(null);
+      });
+      if (user.result === "success") {
+        this.setUser(user.data);
+      } else {
+        this.setUser(null);
+      }
+    },
+    async logout() {
+      const user: APIResult = await rest("User:logout", "POST").catch((err) => {
+        this.setUser(null);
+      });
+      if (user.result === "success") {
+        this.setUser(null);
+      } else {
+        this.setUser(null);
+      }
+    },
+    setUser(user: User | null) {
+      this.user = user;
+    },
+  },
+});
+
+export function useUserCheck(path = "/login", redirectLink = false) {
+  const userStore = useUserStore();
+  const isAuth = computed(() => userStore.isAuth);
+  const router = useServerRouter();
+
+  const checkUser = (route: RouteLocation) => {
+    if (route.meta.reqLogin) {
+      if (!isAuth.value) {
+        if (!redirectLink) router.push(path);
+        else {
+          router.status = 307;
+          router.push(`${path}?return_to=${route.path}`);
+        }
+      }
+    }
+  };
+
+  userStore.refreshUser().then(() => {
+    if (router.currentRoute) {
+      checkUser(router.currentRoute);
+    }
+  });
+  router._router.afterEach(async () => {
+    await userStore.refreshUser();
+  });
+  router._router.beforeEach((to: any) => {
+    if (to.fullPath != path) {
+      checkUser(to);
+    }
+  });
+}

package/style.css

@@ -0,0 +1,42 @@
+.fws-error-text {
+    @apply text-red-700 dark:text-red-500;
+}
+.fws-helper-text {
+    @apply text-fv-neutral-500 dark:text-fv-neutral-400;
+}
+
+.fws-link {
+    @apply text-fv-primary-700 dark:text-fv-primary-300 inline-flex items-center underline hover:no-underline;
+}
+
+.btn {
+    @apply text-white bg-gradient-to-br  hover:bg-gradient-to-bl focus:ring-4 focus:outline-none font-medium rounded-lg text-center transition-colors ease-in-out motion-reduce:transition-none;
+    &.primary {
+        @apply from-fv-primary-600 to-fv-primary-500 focus:ring-fv-primary-300 dark:focus:ring-fv-primary-800;
+    }
+    &.accent {
+        @apply from-fv-accent-600 to-fv-accent-500 focus:ring-fv-accent-300 dark:focus:ring-fv-accent-800;
+    }
+    &.success,&.valid {
+        @apply from-green-600 to-green-500 focus:ring-green-300 dark:focus:ring-green-800;
+    }
+    &.error,&.danger {
+        @apply from-red-600 to-red-500 focus:ring-red-300 dark:focus:ring-red-800;
+    }
+    &.neutral {
+        @apply from-fv-neutral-600 to-fv-neutral-500 focus:ring-fv-neutral-300 dark:focus:ring-fv-neutral-800;
+    }
+
+    &.defaults {
+        @apply px-5 py-2.5 text-sm;
+    }
+    &.small {
+        @apply px-2.5 py-1.5 text-xs;
+    }
+    &.medium {
+        @apply px-4 py-2 text-sm;
+    }
+    &.large {
+        @apply px-6 py-3 text-base;
+    }
+}

package/templating.ts

@@ -0,0 +1,79 @@
+import { format as formatDateTimeago } from "timeago.js";
+import { useTranslation } from "./translations";
+import { getLocale } from "@fy-/fws-js";
+
+const cropText = (str: string, ml = 100, end = "...") => {
+  if (str.length > ml) {
+    return `${str.slice(0, ml)}${end}`;
+  }
+  return str;
+};
+
+const formatBytes = (bytes: number, decimals = 2) => {
+  if (!+bytes) return "0 Bytes";
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+};
+
+const formatDate = (dt: Date | string | number) => {
+  let _dt = dt as number;
+  if (typeof dt === "string") {
+    _dt = Date.parse(dt);
+    if (Number.isNaN(_dt)) {
+      _dt = parseInt(dt);
+    }
+  }
+
+  const translate = useTranslation();
+  return translate("global_datetime", {
+    val: new Date(_dt),
+    formatParams: {
+      val: {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      },
+    },
+  });
+};
+const formatDatetime = (dt: Date | string | number) => {
+  let _dt = dt as number;
+  if (typeof dt === "string") {
+    _dt = Date.parse(dt);
+    if (Number.isNaN(_dt)) {
+      _dt = parseInt(dt);
+    }
+  }
+  const translate = useTranslation();
+  return translate("global_datetime", {
+    val: new Date(_dt),
+    formatParams: {
+      val: {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+        hour: "numeric",
+        minute: "numeric",
+        second: "numeric",
+      },
+    },
+  });
+};
+const formatTimeago = (dt: Date | string | number) => {
+  let _dt = dt as number;
+  if (typeof dt === "string") {
+    _dt = Date.parse(dt);
+    if (Number.isNaN(_dt)) {
+      _dt = parseInt(dt);
+    }
+  }
+  return formatDateTimeago(new Date(_dt), getLocale().replace("_", "-"));
+};
+
+export { cropText, formatBytes, formatDate, formatDatetime, formatTimeago };

package/translations.ts

@@ -0,0 +1,29 @@
+import type { TFunction } from "i18next";
+import i18next from "i18next";
+import { inject } from "vue";
+import { I18nBackend } from "@fy-/fws-js";
+
+export type I18nextTranslate = typeof i18next.t;
+
+export function useTranslation() {
+  const translate = inject<TFunction>("fwsVueTranslate");
+  if (!translate) throw new Error("Did you apply app.use(fwsVue)?");
+
+  return translate;
+}
+
+export function i18nextPromise(
+  backend: typeof I18nBackend,
+  locale: string = "en-US",
+  debug: boolean = false,
+  ns: string = "translation",
+) {
+  return i18next.use(backend).init({
+    ns: [ns],
+    defaultNS: ns,
+    debug: debug,
+    lng: locale,
+    load: "currentOnly",
+    initImmediate: false,
+  });
+}

package/types.d.ts

@@ -0,0 +1,4 @@
+export interface BreadcrumbLink {
+  name: string;
+  to?: string;
+}