@fy-/fws-vue 0.0.1

package/components/ui/transitions/ScaleTransition.vue

@@ -0,0 +1,35 @@
+<template>
+  <Transition name="scale">
+    <slot></slot>
+  </Transition>
+</template>
+
+<style scoped>
+.scale-enter-active {
+  transition: all 0.1s ease-out;
+}
+
+.scale-leave-active {
+  transition: all 0.075s ease-in;
+}
+
+.scale-enter-from {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+.scale-enter-to {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.scale-leave-from {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.scale-leave-to {
+  opacity: 0;
+  transform: scale(0.95);
+}
+</style>

package/components/ui/transitions/SlideTransition.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+const props = defineProps<{
+  animation: string;
+}>();
+</script>
+
+<template>
+  <Transition :name="props.animation" mode="out-in">
+    <slot></slot>
+  </Transition>
+</template>
+
+<style scoped>
+/* slide left */
+.slide-left-enter-active {
+  transition: all 0.2s;
+}
+
+.slide-left-leave-active {
+  transition: all 0.2s;
+}
+
+.slide-left-enter-from {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+.slide-left-leave-to {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+/* slide right */
+.slide-right-enter-active {
+  transition: all 0.2s;
+}
+
+.slide-right-leave-active {
+  transition: all 0.2s;
+}
+
+.slide-right-enter-from {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* slide up */
+.slide-up-enter-active {
+  transition: all 0.2s;
+}
+
+.slide-up-leave-active {
+  transition: all 0.2s;
+}
+
+.slide-up-enter-from {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+
+.slide-up-leave-to {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+
+/* slide down */
+.slide-down-enter-active {
+  transition: all 0.2s;
+}
+
+.slide-down-leave-active {
+  transition: all 0.2s;
+}
+
+.slide-down-enter-from {
+  opacity: 0;
+  transform: translateY(-50px);
+}
+
+.slide-down-leave-to {
+  opacity: 0;
+  transform: translateY(-50px);
+}
+
+/* shelf up */
+.shelf-up-enter-active {
+  transition: all 0.2s;
+}
+
+.shelf-up-leave-active {
+  transition: all 0.2s;
+}
+
+.shelf-up-enter-from {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.shelf-up-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+/* shelf down */
+.shelf-down-enter-active {
+  transition: all 0.2s;
+}
+
+.shelf-down-leave-active {
+  transition: all 0.2s;
+}
+
+.shelf-down-enter-from {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+
+.shelf-down-leave-to {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+</style>

package/components.d.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    CollapseTransition: typeof import('./components/ui/transitions/CollapseTransition.vue')['default']
+    DefaultConfirm: typeof import('./components/ui/DefaultConfirm.vue')['default']
+    DefaultInput: typeof import('./components/ui/DefaultInput.vue')['default']
+    DefaultModal: typeof import('./components/ui/DefaultModal.vue')['default']
+    ExpandTransition: typeof import('./components/ui/transitions/ExpandTransition.vue')['default']
+    FadeTransition: typeof import('./components/ui/transitions/FadeTransition.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    ScaleTransition: typeof import('./components/ui/transitions/ScaleTransition.vue')['default']
+    SlideTransition: typeof import('./components/ui/transitions/SlideTransition.vue')['default']
+    UserFlow: typeof import('./components/fws/UserFlow.vue')['default']
+  }
+}

package/env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

package/event-bus.ts

@@ -0,0 +1,14 @@
+import { inject } from "vue";
+import type { Emitter } from "mitt";
+
+export type Events = {
+  [key: string]: any;
+};
+
+export function useEventBus(): Emitter<Events> {
+  const eventBus = inject<Emitter<Events>>("fwsVueEventBus");
+
+  if (!eventBus) throw new Error("Did you apply app.use(fwsVue)?");
+
+  return eventBus;
+}

package/index.ts

@@ -0,0 +1,121 @@
+import type { Plugin, App } from "vue";
+import i18next from "i18next";
+import mitt from "mitt";
+import { Emitter } from "mitt";
+import { useServerRouter } from "./stores/serverRouter";
+import { useEventBus, Events } from "./event-bus";
+import { i18nextPromise, useTranslation } from "./translations";
+import { initVueClient, initVueServer, isServerRendered } from "./ssr";
+import { useSeo } from "./seo";
+import { useUserStore, useUserCheck } from "./stores/user";
+import { ClientOnly } from "./components/ssr/ClientOnly";
+import {
+  cropText,
+  formatBytes,
+  formatDate,
+  formatDatetime,
+  formatTimeago,
+} from "./templating";
+export * from "./stores/serverRouter";
+
+// Components/UI/Transitions
+import SlideTransition from "./components/ui/transitions/SlideTransition.vue";
+import ExpandTransition from "./components/ui/transitions/ExpandTransition.vue";
+import CollapseTransition from "./components/ui/transitions/CollapseTransition.vue";
+import ScaleTransition from "./components/ui/transitions/ScaleTransition.vue";
+import FadeTransition from "./components/ui/transitions/FadeTransition.vue";
+
+// Components/UI
+import DefaultInput from "./components/ui/DefaultInput.vue";
+import DefaultModal from "./components/ui/DefaultModal.vue";
+import DefaultConfirm from "./components/ui/DefaultConfirm.vue";
+import DefaultPaging from "./components/ui/DefaultPaging.vue";
+import DefaultLoading from "./components/ui/DefaultLoading.vue";
+import DefaultBreadcrumb from "./components/ui/DefaultBreadcrumb.vue";
+
+// Components/FWS
+import UserFlow from "./components/fws/UserFlow.vue";
+import DataTable from "./components/fws/DataTable.vue";
+import FilterData from "./components/fws/FilterData.vue";
+import CmsArticleBoxed from "./components/fws/CmsArticleBoxed.vue";
+import CmsArticleSingle from "./components/fws/CmsArticleSingle.vue";
+
+import "./style.css";
+
+function createFWS(): Plugin {
+  const eventBus: Emitter<Events> = mitt<Events>();
+
+  return {
+    install(app: App) {
+      if (app.config.globalProperties) {
+        app.config.globalProperties.$eventBus = eventBus;
+        app.provide("fwsVueEventBus", eventBus);
+
+        // i18next
+        app.config.globalProperties.$t = i18next.t;
+        app.provide("fwsVueTranslate", i18next.t);
+
+        // Templating
+        app.config.globalProperties.$cropText = cropText;
+        app.config.globalProperties.$formatBytes = formatBytes;
+        app.config.globalProperties.$formatTimeago = formatTimeago;
+        app.config.globalProperties.$formatDatetime = formatDatetime;
+        app.config.globalProperties.$formatDate = formatDate;
+
+        app.component("ClientOnly", ClientOnly);
+      }
+    },
+  };
+}
+
+declare module "vue" {
+  export interface ComponentCustomProperties {
+    $t: typeof i18next.t;
+    $eventBus: Emitter<Events>;
+    $cropText: typeof cropText;
+    $formatBytes: typeof formatBytes;
+    $formatTimeago: typeof formatTimeago;
+    $formatDatetime: typeof formatDatetime;
+    $formatDate: typeof formatDate;
+  }
+  export interface GlobalComponents {
+    ClientOnly: typeof ClientOnly;
+  }
+}
+
+export {
+  i18nextPromise,
+  useTranslation,
+  createFWS,
+  useServerRouter,
+  useEventBus,
+  initVueClient,
+  initVueServer,
+  isServerRendered,
+  useSeo,
+  useUserStore,
+  useUserCheck,
+
+  // Components
+  // UI/Transitions
+  SlideTransition,
+  ExpandTransition,
+  CollapseTransition,
+  ScaleTransition,
+  FadeTransition,
+
+  // UI
+  DefaultInput,
+  DefaultModal,
+  DefaultConfirm,
+  DefaultPaging,
+  DefaultLoading,
+  DefaultBreadcrumb,
+
+  // FWS
+  UserFlow,
+  DataTable,
+  FilterData,
+  CmsArticleBoxed,
+  CmsArticleSingle,
+};

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@fy-/fws-vue",
+  "version": "0.0.1",
+  "author": "Florian 'Fy' Gasquez <m@fy.to>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fy-to/FWJS.git"
+  },
+  "bugs": {
+    "url": "https://github.com/fy-to/FWJS/issues"
+  },
+  "homepage": "https://github.com/fy-to/FWJS#readme",
+  "main": "index.ts",
+  "module": "index.ts",
+  "typings": "index.ts",
+  "types": "index.ts",
+  "exports": {
+    ".": {
+      "import": "./index.ts",
+      "require": "./index.ts",
+      "browser": "./index.ts"
+    },
+    "./style.css": {
+      "import": "./style.css",
+      "require": "./style.css"
+    }
+  },
+  "peerDependencies": {
+    "@fy-/fws-js": "^0.0.x",
+    "@fy-/fws-types": "^0.0.x",
+    "@fy-/head": "^0.0.x",
+    "@vuelidate/core": "^2.0.x",
+    "@vuelidate/validators": "^2.0.x",
+    "@vueuse/core": "^10.x.x",
+    "pinia": "2.x.x",
+    "vue": "^3.2.x",
+    "vue-router": "^4.1.x"
+  },
+  "dependencies": {
+    "timeago.js": "^4.0.2"
+  }
+}

package/rest.ts

@@ -0,0 +1,72 @@
+import { RestMethod, RestParams, getMode, rest, stringHash } from "@fy-/fws-js";
+import { useRestStore } from "./stores/rest";
+import { isServerRendered } from "./ssr";
+import { useEventBus } from "./event-bus";
+
+export interface APIPaging {
+  page_no: number;
+  results_per_page: number;
+  page_max: number;
+  page_max_relation: string;
+  count: number;
+}
+
+export interface APIResult {
+  result: "redirect" | "success" | "error";
+  param?: string;
+  code?: number;
+  error?: string;
+  request?: string;
+  time?: number;
+  token?: string;
+  paging?: APIPaging;
+  message?: string;
+  fvReject?: boolean;
+  data?: any;
+  status?: number;
+}
+
+export function useRest(): <ResultType extends APIResult>(
+  url: string,
+  method: RestMethod,
+  params?: RestParams,
+) => Promise<ResultType> {
+  const restStore = useRestStore();
+  const eventBus = useEventBus();
+
+  return async <ResultType extends APIResult>(
+    url: string,
+    method: RestMethod,
+    params?: RestParams,
+  ): Promise<ResultType> => {
+    const requestHash = stringHash(url + method + JSON.stringify(params));
+    if (isServerRendered()) {
+      const hasResult = restStore.getResult(requestHash);
+      if (hasResult !== undefined) {
+        const result = { ...hasResult } as ResultType;
+        restStore.removeResult(requestHash);
+        if (result.result === "error") {
+          eventBus.emit("rest-error", result);
+          return Promise.reject(result);
+        }
+        return Promise.resolve(result);
+      }
+    }
+
+    try {
+      const restResult: ResultType = await rest(url, method, params);
+      if (getMode() === "ssr") {
+        restStore.addResult(requestHash, restResult);
+      }
+      return Promise.resolve(restResult);
+    } catch (error) {
+      const restError: ResultType = error as ResultType;
+      if (getMode() === "ssr") {
+        restStore.addResult(requestHash, restError);
+      }
+
+      eventBus.emit("rest-error", restError);
+      return Promise.resolve(restError);
+    }
+  };
+}

package/seo.ts

@@ -0,0 +1,114 @@
+import type { Ref } from "vue";
+import { useFyHead } from "@fy-/head";
+import { computed } from "vue";
+import { getURL, getLocale } from "@fy-/fws-js";
+
+export interface LazyHead {
+  name?: string;
+  title?: string;
+  image?: string;
+  imageType?: string;
+  imageWidth?: string;
+  imageHeight?: string;
+  description?: string;
+  published?: string;
+  modified?: string;
+  keywords?: string;
+  type?: "blog" | "search" | "article" | "website";
+  searchAction?: string;
+  next?: string;
+  prev?: string;
+  canonical?: string;
+  locale?: string;
+  robots?: string;
+  url?: string;
+  isAdult?: boolean;
+  alternateLocales?: string[];
+}
+
+export const useSeo = (seo: Ref<LazyHead>, initial: boolean = false) => {
+  const currentUrl = `${getURL().Scheme}://${getURL().Host}${getURL().Path}`;
+  const currentLocale = seo.value.locale || getLocale();
+
+  useFyHead({
+    title: computed(() => seo.value.title),
+    links: computed(() => {
+      const links = [];
+
+      links.push({
+        rel: "canonical",
+        href: seo.value.canonical || currentUrl,
+        key: "canonical",
+      });
+
+      ["prev", "next"].forEach((rel) => {
+        if (seo.value[rel as keyof LazyHead]) {
+          links.push({
+            rel,
+            href: seo.value[rel as keyof LazyHead] as string,
+            key: rel,
+          });
+        }
+      });
+
+      seo.value.alternateLocales?.forEach((locale) => {
+        if (locale !== currentLocale) {
+          links.push({
+            rel: "alternate",
+            hreflang: locale,
+            href: `${currentUrl}/l/${locale}${getURL().Path}`,
+            key: `alternate-${locale}`,
+          });
+        }
+      });
+
+      return links;
+    }),
+    metas: computed(() => {
+      const metas = [];
+
+      metas.push(
+        { property: "og:locale", content: currentLocale },
+        { property: "og:url", content: seo.value.url || currentUrl },
+        { property: "og:type", content: seo.value.type || "website" },
+        {
+          name: "robots",
+          content:
+            "index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1",
+        },
+      );
+
+      if (seo.value.isAdult) {
+        metas.push(
+          { property: "rating", content: "adult" },
+          { property: "RATING", content: "RTA-5042-1996-1400-1577-RTA" },
+        );
+      }
+
+      const metaPairs = [
+        ["name", "og:site_name"],
+        ["title", "og:title", "twitter:title"],
+        ["description", "og:description", "twitter:description", "description"],
+        ["published", "article:published_time"],
+        ["modified", "article:modified_time"],
+        ["imageWidth", "og:image:width"],
+        ["imageHeight", "og:image:height"],
+        ["imageType", "og:image:type", "twitter:image:type"],
+        ["image", "og:image", "twitter:image"],
+      ];
+
+      metaPairs.forEach(([seoKey, ...properties]) => {
+        properties.forEach((property) => {
+          if (seo.value[seoKey as keyof LazyHead]) {
+            metas.push({
+              property,
+              content: seo.value[seoKey as keyof LazyHead] as string,
+            });
+          }
+        });
+      });
+
+      return metas;
+    }),
+  });
+};

package/ssr.ts

@@ -0,0 +1,97 @@
+import { Router } from "vue-router";
+import { Pinia } from "pinia";
+import { renderToString } from "@vue/server-renderer";
+import { getInitialState, getPath, getURL, getUUID } from "@fy-/fws-js";
+import { useServerRouter } from "./stores/serverRouter";
+
+export interface SSRResult {
+  initial: {
+    isSSR: boolean;
+    pinia?: string;
+  };
+  uuid?: string;
+  meta?: string;
+  link?: string;
+  bodyAttributes?: string;
+  htmlAttributes?: string;
+  bodyTags?: string;
+  app?: string;
+  statusCode?: number;
+  redirect?: string;
+}
+
+export function isServerRendered() {
+  return getInitialState().isSSR;
+}
+
+export function initVueClient(router: Router, pinia: Pinia) {
+  const state = getInitialState();
+  if (state.isSSR && state && state.pinia) {
+    pinia.state.value = state.pinia;
+  }
+  useServerRouter(pinia)._setRouter(router);
+}
+
+export async function initVueServer(
+  createApp: Function,
+  callback: Function,
+  options: { url?: string } = {},
+) {
+  const url =
+    options.url || `${getPath()}${getURL().Query ? `?${getURL().Query}` : ""}`;
+  const { app, router, head, pinia } = await createApp(true);
+  await router.push(url);
+  await router.isReady();
+  const serverRouter = useServerRouter(pinia);
+  serverRouter._setRouter(router);
+
+  const result: SSRResult = {
+    uuid: getUUID(),
+    initial: {
+      isSSR: true,
+      pinia: undefined,
+    },
+  };
+
+  if (url !== serverRouter.route.fullPath) {
+    result.redirect = serverRouter.route.value.fullPath;
+    result.statusCode = 307;
+    callback(result);
+    return result;
+  }
+
+  try {
+    const html = await renderToString(app);
+    const { headTags, htmlAttrs, bodyAttrs, bodyTags } =
+      head.renderHeadToString();
+
+    result.meta = headTags;
+    result.bodyAttributes = bodyAttrs;
+    result.htmlAttributes = htmlAttrs;
+    result.bodyTags = bodyTags;
+    result.app = html;
+    if (serverRouter.status != 200) {
+      if ([301, 302, 303, 307].includes(serverRouter.status)) {
+        if (serverRouter.redirect) {
+          result.statusCode = serverRouter.status;
+          result.redirect = serverRouter.redirect;
+        }
+      } else {
+        result.statusCode = serverRouter.status;
+      }
+    }
+
+    serverRouter._router = null;
+    result.initial.pinia = pinia.state.value;
+    callback(result);
+    return result;
+  } catch (error) {
+    //console.error(error);
+    result.statusCode = 500;
+    const err =
+      error instanceof Error ? `${error.message}\n${error.stack}` : error;
+    const errorResult = `<div id="app"><h1>500 Internal Server Error</h1><pre>${err}</pre></div>`;
+    callback(result);
+    return result;
+  }
+}

package/stores/rest.ts

@@ -0,0 +1,24 @@
+import { defineStore } from "pinia";
+import { APIResult } from "../rest";
+
+type SharedState = {
+  results: Record<number, APIResult | undefined>;
+};
+
+export const useRestStore = defineStore({
+  id: "restStore",
+  state: (): SharedState => ({
+    results: {},
+  }),
+  actions: {
+    addResult(id: number, result: APIResult) {
+      this.results[id] = result;
+    },
+    getResult(id: number) {
+      return this.results[id];
+    },
+    removeResult(id: number) {
+      delete this.results[id];
+    },
+  },
+});