@vc-shell/framework 1.0.38 → 1.0.40

package/shared/blade-navigation/composables/useBladeNavigation/index.ts

@@ -0,0 +1,216 @@
+import { computed, ref, unref, watch, Ref } from "vue";
+import { isEqual } from "lodash-es";
+import { useRouter, useRoute, NavigationFailure } from "vue-router";
+import { usePermissions } from "@/core/composables";
+import {
+  ExtendedComponent,
+  IBladeContainer,
+  IBladeElement,
+  IBladeEvent,
+  IParentCallArgs,
+} from "@/shared";
+
+interface IUseBladeNavigation {
+  readonly blades: Ref<IBladeContainer[]>;
+  readonly parentBladeOptions: Ref<Record<string, unknown>>;
+  readonly parentBladeParam: Ref<string>;
+  bladesRefs: Ref<IBladeElement[]>;
+  openBlade: (
+    {
+      parentBlade,
+      component,
+      param,
+      bladeOptions,
+      onOpen,
+      onClose,
+    }: IBladeEvent,
+    index?: number,
+    navigationCb?: () => Promise<void | NavigationFailure>
+  ) => void;
+  closeBlade: (index: number) => void;
+  onParentCall: (index: number, args: IParentCallArgs) => void;
+}
+
+const blades = ref<IBladeContainer[]>([]);
+const bladesRefs = ref<IBladeElement[]>([]);
+const parentBladeOptions = ref<Record<string, unknown>>();
+const parentBladeParam = ref<string>();
+
+export default (): IUseBladeNavigation => {
+  const router = useRouter();
+  const route = useRoute();
+  const { checkPermission } = usePermissions();
+  const isPrevented = ref(false);
+
+  watch(
+    () => blades.value,
+    (newVal) => {
+      const lastBlade = newVal[newVal.length - 1];
+
+      if (lastBlade && lastBlade.component.url) {
+        if (lastBlade.param) {
+          addEntryToLocation(lastBlade.component.url + "/" + lastBlade.param);
+        } else {
+          addEntryToLocation(lastBlade.component.url);
+        }
+      } else if (!lastBlade) {
+        addEntryToLocation(route.path);
+      }
+    },
+    { deep: true }
+  );
+
+  async function openBlade(
+    {
+      parentBlade,
+      component: blade,
+      param,
+      bladeOptions,
+      onOpen,
+      onClose,
+    }: IBladeEvent,
+    index?: number,
+    navigationCb?: () => Promise<void | NavigationFailure>
+  ) {
+    console.debug(`openBlade(${1}) called.`);
+
+    const parent = unref(parentBlade);
+    const child = unref(blade);
+    const existingChild = findBlade(child);
+
+    if (parent && parent.url) {
+      await closeBlade(0);
+
+      if (!isPrevented.value) {
+        parentBladeOptions.value = unref(bladeOptions);
+        parentBladeParam.value = unref(param);
+        if (navigationCb && typeof navigationCb === "function") {
+          try {
+            await navigationCb();
+          } catch (e) {
+            console.log(e);
+          } finally {
+            console.debug(`Navigated to: ${parent.url}`);
+          }
+        } else if (!navigationCb) {
+          await router.push(parent.url);
+        }
+      }
+    }
+
+    if (child) {
+      if (existingChild === undefined) {
+        child.idx = index + 1;
+      } else if (existingChild) {
+        await closeBlade(
+          blades.value.findIndex((x) => x.idx === existingChild.idx)
+        );
+        child.idx = existingChild.idx;
+      }
+
+      await addBlade(child, param, bladeOptions, onOpen, onClose, index);
+    }
+  }
+
+  async function closeBlade(index: number) {
+    if (index < bladesRefs.value.length) {
+      const children = bladesRefs.value.slice(index).reverse();
+
+      isPrevented.value = false;
+      for (let i = 0; i < children.length; i++) {
+        if (
+          children[i]?.onBeforeClose &&
+          typeof children[i].onBeforeClose === "function"
+        ) {
+          const result = await children[i].onBeforeClose();
+          if (result === false) {
+            isPrevented.value = true;
+            break;
+          }
+        }
+      }
+      if (!isPrevented.value) {
+        if (typeof blades.value[index]?.onClose === "function") {
+          blades.value[index]?.onClose?.();
+        }
+        blades.value.splice(index);
+      } else {
+        throw "Closing prevented";
+      }
+    }
+  }
+
+  async function addBlade(
+    blade: ExtendedComponent,
+    param: string,
+    bladeOptions: Record<string, unknown>,
+    onOpen: () => void,
+    onClose: () => void,
+    index: number
+  ) {
+    if (blades.value.length > index) {
+      await closeBlade(index);
+    }
+
+    if (blade && checkPermission(blade.permissions)) {
+      blades.value.push({
+        component: blade,
+        bladeOptions,
+        param,
+        onOpen,
+        onClose,
+        idx: blade.idx,
+      });
+
+      if (onOpen && typeof onOpen === "function") {
+        onOpen();
+      }
+    } else {
+      // TODO temporary access alert
+      alert("Access restricted");
+    }
+  }
+
+  async function onParentCall(index: number, args: IParentCallArgs) {
+    console.debug(
+      `vc-app#onParentCall(${index}, { method: ${args.method} }) called.`
+    );
+
+    if (index >= 0) {
+      const currentParent = unref(bladesRefs.value[index]);
+
+      if (currentParent) {
+        if (args.method && typeof currentParent[args.method] === "function") {
+          const method = currentParent[args.method] as (
+            args: unknown
+          ) => Promise<unknown>;
+          const result = await method(args.args);
+          if (typeof args.callback === "function") {
+            args.callback(result);
+          }
+        } else {
+          // TODO temporary alert
+          console.error(`No such method: ${args.method}.`);
+        }
+      }
+    }
+  }
+
+  function addEntryToLocation(params: string) {
+    history.pushState({}, null, "#" + params);
+  }
+
+  function findBlade(blade: ExtendedComponent) {
+    return blades.value.find((x) => isEqual(x.component, blade));
+  }
+
+  return {
+    blades: computed(() => blades.value),
+    parentBladeOptions: computed(() => parentBladeOptions.value),
+    parentBladeParam: computed(() => parentBladeParam.value),
+    bladesRefs,
+    openBlade,
+    closeBlade,
+    onParentCall,
+  };
+};

package/shared/blade-navigation/index.ts

@@ -0,0 +1,15 @@
+import { App } from "vue";
+import * as components from "./components";
+
+export default {
+    install(app: App): void {
+        // Register exported pages
+        Object.entries(components).forEach(([componentName, component]) => {
+            app.component(componentName, component);
+        });
+    },
+};
+
+export * from "./components";
+export * from "./composables";
+export * from './types'

package/shared/blade-navigation/types/index.ts

@@ -0,0 +1,52 @@
+import { Component, ComponentPublicInstance } from "vue";
+import { IMenuItems } from "@/core/types";
+import { NavigationFailure } from "vue-router";
+
+/* onParentCall event interface */
+export interface IParentCallArgs {
+  method: string;
+  args?: unknown;
+  callback?: (args: unknown) => void;
+}
+
+/* extended component */
+export type ExtendedComponent = Component & {
+  url?: string;
+  permissions?: string | string[];
+  idx?: number;
+};
+
+/* blade interface for navigation */
+export interface IBladeContainer extends IBladeEvent {
+  idx?: number;
+}
+
+/* blade exposed methods */
+export interface IBladeElement extends ComponentPublicInstance {
+  onBeforeClose?: () => Promise<boolean>;
+  title?: string;
+  reloadParent?: () => void;
+  openDashboard?: () => void;
+}
+
+/* emitted blade event */
+export interface IBladeEvent {
+  parentBlade?: ExtendedComponent;
+  component?: ExtendedComponent;
+  bladeOptions?: Record<string, unknown>;
+  param?: string;
+  onOpen?: () => void;
+  onClose?: () => void;
+}
+
+/* menu item event */
+export interface IMenuClickEvent {
+  item: IMenuItems;
+  navigationCb: () => Promise<void | NavigationFailure>;
+}
+
+/* openBlade args interface */
+export interface IOpenBlade extends IBladeEvent {
+  id?: number;
+  navigationCb?: () => Promise<void | NavigationFailure>;
+}

package/shared/index.ts

@@ -0,0 +1,16 @@
+import { App } from "vue";
+import { default as AssetsDetails } from "./assets";
+import { default as VcAppSwitcher } from "./app-switcher";
+import { default as VcBladeNavigation } from "./blade-navigation";
+
+const components = [AssetsDetails, VcAppSwitcher, VcBladeNavigation];
+
+export function init(app: App): App {
+  components.forEach((component) => app.use(component));
+
+  return app;
+}
+
+export * from "./assets";
+export * from "./app-switcher";
+export * from "./blade-navigation";

package/tailwind.config.js

@@ -1,6 +1,7 @@
 /** @type { import('tailwindcss').Config } */
 module.exports = {
-  content: ["./components/**/*.{vue,js,ts,jsx,tsx}"],
+  prefix: 'tw-',
+  content: ["./ui/components/**/*.{vue,js,ts,jsx,tsx}"],
     theme: {
         fontFamily: {
             roboto: ["Roboto", "sans-serif"],
@@ -37,12 +38,12 @@ module.exports = {
                     to: {
                         "background-position": '30px 0, left'
                     }
-                }
+                },
             },
             animation: {
                 loadingMarker: "loadingMarker 3s infinite",
                 loadingMarkers: "loadingMarkers 3s infinite",
-                loadingProgress: "loadingProgress 1s linear infinite"
+                loadingProgress: "loadingProgress 1s linear infinite",
             }
         },
     },

package/ui/components/atoms/vc-badge/index.ts

@@ -0,0 +1,7 @@
+import { ComponentPublicInstance } from "vue";
+import { VcBadgeProps } from "./vc-badge-model";
+import { ComponentConstructor } from "@/ui/types/ts-helpers";
+import Badge from "./vc-badge.vue";
+export const VcBadge: ComponentConstructor<
+  ComponentPublicInstance<VcBadgeProps>
+> = Badge;

package/ui/components/atoms/vc-badge/vc-badge-model.ts

@@ -0,0 +1,30 @@
+import { VNode } from "vue";
+
+export interface VcBadgeProps {
+  /**
+   * Badge active state
+   * */
+  active?: boolean | undefined;
+  /**
+   * Put component in disabled state
+   * */
+  disabled?: boolean | undefined;
+  /**
+   * Is badge clickable?
+   * */
+  clickable?: boolean | undefined;
+}
+
+export interface VcBadgeEmits {
+  /**
+   * Emitted when component is clicked
+   * */
+  (event: "click"): void;
+}
+
+export interface VcBadgeSlots {
+  /**
+   * Slot for component content
+   * */
+  default: () => VNode[];
+}

package/ui/components/atoms/vc-badge/vc-badge.stories.ts

@@ -0,0 +1,27 @@
+/**
+ * Badge component.
+ * @author Iurii A Taranov <me@flanker72.ru>
+ */
+import { Story } from "@storybook/vue3";
+import VcBadge from "./vc-badge.vue";
+
+export default {
+  title: "atoms/vc-badge",
+  component: VcBadge,
+};
+
+const Template: Story = (args) => ({
+  components: { VcBadge },
+  setup() {
+    return { args };
+  },
+  template: '<vc-badge v-bind="args">42</vc-badge>',
+});
+
+export const Badge = Template.bind({});
+Badge.storyName = "vc-badge";
+Badge.args = {
+  active: false,
+  disabled: false,
+  clickable: true,
+};

package/ui/components/atoms/vc-badge/vc-badge.vue

@@ -0,0 +1,57 @@
+<template>
+  <div
+    class="tw-inline-block tw-rounded-[var(--badge-border-radius)] tw-py-1 tw-px-2 tw-text-base tw-font-normal tw-bg-[color:var(--badge-background-color)] tw-text-[color:var(--badge-text-color)] tw-border tw-border-solid tw-border-[color:var(--badge-border-color)] tw-transition tw-duration-200"
+    :class="{
+      'tw-bg-[color:var(--badge-background-color-active)] tw-text-[color:var(--badge-text-color-active)] tw-border-[color:var(--badge-border-color-active)]':
+        active,
+      'tw-cursor-pointer hover:tw-bg-[color:var(--badge-background-color-active)] hover:tw-text-[color:var(--badge-text-color-hover)] hover:tw-border-[color:var(--badge-border-color-hover)]':
+        clickable,
+      'cursor-not-allowed tw-bg-[color:var(--badge-background-color-disabled)] tw-text-[color:var(--badge-text-color-disabled)] tw-border-[color:var(--badge-border-color-disabled)] hover:tw-bg-[color:var(--badge-background-color-disabled)] hover:tw-text-[color:var(--badge-text-color-disabled)] hover:tw-border-[color:var(--badge-border-color-disabled)]':
+        disabled,
+    }"
+    @click="onClick"
+  >
+    <slot name="default"></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  VcBadgeEmits,
+  VcBadgeProps,
+} from "@/ui/components/atoms/vc-badge/vc-badge-model";
+
+const props = withDefaults(defineProps<VcBadgeProps>(), {
+  active: false,
+  disabled: false,
+  clickable: true,
+});
+const emit = defineEmits<VcBadgeEmits>();
+
+function onClick(): void {
+  if (props.clickable && !props.disabled) {
+    emit("click");
+  }
+}
+</script>
+
+<style lang="scss">
+:root {
+  --badge-background-color: #ffffff;
+  --badge-background-color-hover: #fafafa;
+  --badge-background-color-active: #fafafa;
+  --badge-background-color-disabled: #f2f2f2;
+
+  --badge-text-color: #455668;
+  --badge-text-color-hover: #3b4959;
+  --badge-text-color-active: #3b4959;
+  --badge-text-color-disabled: #8296ab;
+
+  --badge-border-radius: 35px;
+
+  --badge-border-color: #a1bfd4;
+  --badge-border-color-hover: #8fb3cc;
+  --badge-border-color-active: #8fb3cc;
+  --badge-border-color-disabled: #b2cbdc;
+}
+</style>

package/ui/components/atoms/vc-button/index.ts

@@ -0,0 +1,7 @@
+import { ComponentPublicInstance } from "vue";
+import { VcButtonProps } from "./vc-button-model";
+import { ComponentConstructor } from "@/ui/types/ts-helpers";
+import Button from "./vc-button.vue";
+export const VcBadge: ComponentConstructor<
+  ComponentPublicInstance<VcButtonProps>
+> = Button;

package/ui/components/atoms/vc-button/vc-button-model.ts

@@ -0,0 +1,30 @@
+import { VNode } from "vue";
+
+export interface VcButtonProps {
+  /**
+   * Badge active state
+   * */
+  icon?: string | undefined;
+  /**
+   * Put component in disabled state
+   * */
+  disabled?: boolean | undefined;
+  /**
+   * Is badge clickable?
+   * */
+  clickable?: boolean | undefined;
+}
+
+export interface VcButtonEmits {
+  /**
+   * Emitted when component is clicked
+   * */
+  (event: "click"): void;
+}
+
+export interface VcButtonSlots {
+  /**
+   * Slot for component content
+   * */
+  default: () => VNode[];
+}

package/ui/components/atoms/vc-button/vc-button.stories.ts

@@ -0,0 +1,34 @@
+/**
+ * Button component.
+ * @author Iurii A Taranov <me@flanker72.ru>
+ */
+import { Story } from "@storybook/vue3";
+import VcButton from "./vc-button.vue";
+
+export default {
+  title: "atoms/vc-button",
+  component: VcButton,
+  argTypes: {
+    variant: {
+      options: ["primary", "secondary", "special"],
+      control: { type: "radio" },
+    },
+  },
+};
+
+const Template: Story = (args) => ({
+  components: { VcButton },
+  setup() {
+    return { args };
+  },
+  template: '<vc-button v-bind="args">I am a button</vc-button>',
+});
+
+export const Button = Template.bind({});
+Button.storyName = "vc-button";
+Button.args = {
+  icon: "fas fa-star",
+  variant: "primary",
+  disabled: false,
+  small: false,
+};