@vc-shell/framework 1.0.38 → 1.0.40

package/ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/vc-app-menu-item.vue

@@ -0,0 +1,157 @@
+<template>
+  <div>
+    <template v-if="component && component.url">
+      <router-link :to="component.url" custom v-slot="{ isActive, navigate }">
+        <vc-app-menu-link
+          :isActive="isActive"
+          :children="children"
+          :sticky="sticky"
+          :icon="icon"
+          :title="title"
+          @onClick="onMenuItemClick(() => navigate($event))"
+        />
+      </router-link>
+    </template>
+    <template v-else>
+      <vc-app-menu-link
+        :children="children"
+        :sticky="sticky"
+        :icon="icon"
+        :title="title"
+        @onClick="onMenuItemClick"
+        :isActive="isHomePage"
+      />
+
+      <!-- Nested menu items -->
+      <div class="vc-app-menu-item__child" v-if="isOpened">
+        <template v-for="(nested, i) in children" :key="i">
+          <router-link
+            :to="nested.component.url"
+            custom
+            v-slot="{ isActive, navigate }"
+          >
+            <div
+              :class="[
+                {
+                  'vc-app-menu-item__child-item_active': isActive,
+                },
+                'vc-app-menu-item__child-item',
+              ]"
+              v-if="nested.isVisible === undefined || nested.isVisible"
+              :key="i"
+              @click="
+                $emit('child:click', { item: nested, navigationCb: navigate })
+              "
+            >
+              {{ nested.title }}
+            </div>
+          </router-link>
+        </template>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, computed } from "vue";
+import { ExtendedComponent, IMenuItems } from "@/core/types";
+import VcAppMenuLink from "./_internal/vc-app-menu-link.vue";
+import { NavigationFailure, useRoute } from "vue-router";
+
+export interface Props {
+  sticky?: boolean;
+  isVisible?: boolean;
+  component?: ExtendedComponent;
+  bladeOptions?: Record<string, unknown>;
+  clickHandler?: () => void;
+  icon: string;
+  title: string;
+  children?: IMenuItems[];
+  isCollapsed?: boolean;
+}
+
+export interface Emits {
+  (event: "click", navigationCb: () => Promise<void | NavigationFailure>): void;
+  (
+    event: "child:click",
+    {
+      item,
+      navigationCb,
+    }: {
+      item: IMenuItems;
+      navigationCb: () => Promise<void | NavigationFailure>;
+    }
+  ): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  sticky: true,
+  isVisible: false,
+  component: undefined,
+  bladeOptions: () => ({}),
+  clickHandler: undefined,
+  icon: "",
+  title: "",
+  children: () => [],
+  isCollapsed: true,
+});
+
+const route = useRoute();
+
+const emit = defineEmits<Emits>();
+
+const isOpened = ref(false);
+
+const isHomePage = computed(() => route.path === "/");
+
+onMounted(() => {
+  if (
+    props.children &&
+    props.children.length &&
+    props.children.find((x) => x.component?.url === route?.path)
+  ) {
+    isOpened.value = true;
+  }
+});
+
+function onMenuItemClick(
+  navigationCb?: () => Promise<void | NavigationFailure>
+) {
+  if (!props.children?.length) {
+    emit("click", navigationCb);
+  } else {
+    isOpened.value = !isOpened.value;
+  }
+}
+</script>
+
+<style lang="scss">
+:root {
+  --app-menu-item-height: 38px;
+  --app-menu-item-icon-width: 20px;
+  --app-menu-item-icon-color: #337599;
+  --app-menu-item-icon-color-active: #ffffff;
+  --app-menu-item-handler-width: 10px;
+  --app-menu-item-background-color-hover: #337599;
+  --app-menu-item-hover-radius: 4px;
+  --app-menu-item-title-color: #465769;
+  --app-menu-item-title-color-active: #ffffff;
+  --app-menu-item-handler-color: #bdd1df;
+}
+.vc-app-menu-item {
+  &__child {
+    @apply tw-ml-[42px] tw-gap-[4px] tw-flex tw-flex-col;
+  }
+
+  &__child-item {
+    @apply tw-cursor-pointer tw-w-fit tw-py-[5px] tw-px-[9px] tw-rounded-[4px]
+    hover:tw-bg-[color:var(--app-menu-item-background-color-hover)]
+    hover:tw-text-[color:var(--app-menu-item-title-color-active)];
+
+    &_active {
+      @apply tw-bg-[color:var(--app-menu-item-background-color-hover)]
+      tw-text-[color:var(--app-menu-item-title-color-active)] tw-font-bold;
+    }
+  }
+}
+</style>

package/ui/components/organisms/vc-app/_internal/vc-app-menu/vc-app-menu.vue

@@ -0,0 +1,110 @@
+<template>
+  <div
+    class="tw-relative tw-w-[var(--app-menu-width)] tw-transition tw-duration-100 tw-pt-4"
+    :class="{
+      'vc-app-menu_mobile tw-hidden !tw-fixed !tw-left-0 !tw-top-0 !tw-w-full !tw-bottom-0 !tw-z-[9999]':
+        $isMobile.value,
+      '!tw-block': isMobileVisible,
+    }"
+  >
+    <!-- Show backdrop overlay on mobile devices -->
+    <div
+      v-if="$isMobile.value"
+      class="tw-absolute tw-left-0 tw-top-0 tw-right-0 tw-bottom-0 tw-z-[9998] tw-bg-[#808c99] tw-opacity-60"
+      @click="isMobileVisible = false"
+    ></div>
+    <div class="vc-app-menu__inner tw-flex tw-flex-col tw-h-full">
+      <!-- Show menu close handler on mobile devices -->
+      <div
+        v-if="$isMobile.value"
+        class="tw-text-[#319ed4] tw-flex tw-justify-end tw-items-center tw-p-4"
+      >
+        <VcIcon
+          icon="fas fa-times"
+          size="xl"
+          @click="isMobileVisible = false"
+        ></VcIcon>
+      </div>
+
+      <!-- Show scrollable area with menu items -->
+      <VcContainer :noPadding="true" class="tw-grow tw-basis-0">
+        <div class="tw-gap-[5px] tw-flex tw-flex-col tw-px-4">
+          <template
+            v-for="(item, index) in mobileMenuItems"
+            :key="`info_item_${index}`"
+          >
+            <template v-if="item.isVisible === undefined || item.isVisible">
+              <component
+                v-if="item.component"
+                :is="item.component"
+                v-bind="item.bladeOptions"
+                class="tw-p-0 tw-mb-2 tw-w-full"
+              ></component>
+            </template>
+          </template>
+          <template v-for="(item, index) in items" :key="index">
+            <VcAppMenuItem
+              v-if="item.isVisible === undefined || item.isVisible"
+              v-bind="item"
+              @click="
+                (navigationCb) => {
+                  $emit('item:click', { item, navigationCb });
+                  isMobileVisible = false;
+                }
+              "
+              @child:click="
+                ({ item: blade, navigationCb }) => {
+                  $emit('item:click', { item: blade, navigationCb });
+                  isMobileVisible = false;
+                }
+              "
+            />
+          </template>
+        </div>
+      </VcContainer>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import VcAppMenuItem from "./_internal/vc-app-menu-item/vc-app-menu-item.vue";
+import { VcContainer } from "@/ui/components";
+import { IMenuItems } from "@/core/types";
+import { IMenuClickEvent } from "@/shared";
+
+export interface Props {
+  items?: IMenuItems[];
+  mobileMenuItems?: IMenuItems[];
+}
+
+export interface Emits {
+  (event: "item:click", { item, navigationCb }: IMenuClickEvent): void;
+}
+
+withDefaults(defineProps<Props>(), {
+  items: () => [],
+  mobileMenuItems: () => [],
+});
+
+defineEmits<Emits>();
+
+const isMobileVisible = ref(false);
+
+defineExpose({
+  isMobileVisible,
+});
+</script>
+
+<style lang="scss">
+:root {
+  --app-menu-width: 230px;
+  --app-menu-background-color: #ffffff;
+}
+
+.vc-app-menu {
+  &_mobile &__inner {
+    @apply tw-absolute tw-z-[9999] tw-right-0 tw-top-0 tw-bottom-0 tw-w-[300px] tw-max-w-[60%] tw-bg-[color:var(--app-menu-background-color)];
+  }
+}
+</style>

package/ui/components/organisms/vc-app/vc-app.stories.ts

@@ -0,0 +1,75 @@
+/**
+ * App component.
+ * @author Iurii A Taranov <me@flanker72.ru>
+ */
+import { Story } from "@storybook/vue3";
+import VcApp from "./vc-app.vue";
+
+export default {
+  title: "organisms/vc-app",
+  component: VcApp,
+  parameters: {
+    backgrounds: {
+      default: "default",
+      values: [
+        {
+          name: "default",
+          value:
+            "linear-gradient(180deg, #E4F5FB 5.06%, #E8F3F2 100%), linear-gradient(0deg, #E8F2F3, #E8F2F3), #EEF2F8;",
+        },
+      ],
+    },
+  },
+};
+
+const Template: Story = (args) => ({
+  components: { VcApp },
+  setup() {
+    return { args };
+  },
+  template: '<vc-app v-bind="args"></vc-app>',
+});
+
+export const App = Template.bind({});
+App.storyName = "vc-app";
+App.args = {
+  menuItems: [
+    {
+      title: "Dashboard",
+      icon: "fas fa-home",
+      isVisible: true,
+    },
+    {
+      title: "Orders",
+      icon: "fas fa-file-alt",
+      isVisible: true,
+    },
+    {
+      title: "Products",
+      icon: "fas fa-box-open",
+      isVisible: true,
+    },
+    {
+      title: "Offers",
+      icon: "fas fa-file-invoice",
+      isVisible: true,
+    },
+    {
+      title: "Import",
+      icon: "fas fa-file-import",
+      isVisible: true,
+    },
+    {
+      title: "Logout",
+      icon: "fas fa-sign-out-alt",
+    },
+  ],
+  toolbarItems: [
+    { id: 1, icon: "fas fa-globe", title: "Language selector" },
+    { id: 2, icon: "fas fa-bell", title: "Notifications", isAccent: true },
+  ],
+  isReady: true,
+  isAuthorized: true,
+  version: "0.0.100",
+  logo: "images/main-logo.svg",
+};

package/ui/components/organisms/vc-app/vc-app.vue

@@ -0,0 +1,169 @@
+<template>
+  <div
+    class="vc-app tw-flex tw-flex-col tw-w-full tw-h-full tw-box-border tw-m-0 tw-overflow-hidden tw-text-base"
+    :class="[
+      `vc-theme_${theme}`,
+      {
+        'vc-app_touch': $isTouch,
+        'vc-app_phone': $isPhone.value,
+        'vc-app_mobile': $isMobile.value,
+      },
+    ]"
+  >
+    <!-- Init application top bar -->
+    <VcAppBar
+      class="tw-shrink-0"
+      :logo="logo"
+      :blades="bladesRefs"
+      :version="version"
+      :buttons="toolbarItems"
+      @toolbarbutton:click="onToolbarButtonClick"
+      @menubutton:click="$refs.menu.isMobileVisible = true"
+      @backlink:click="$emit('backlink:click', bladesRefs.length - 2)"
+      @logo:click="openDashboard"
+      :title="title"
+    >
+      <template v-slot:appSwitcher>
+        <slot name="appSwitcher"></slot>
+      </template>
+    </VcAppBar>
+
+    <div class="tw-overflow-hidden tw-flex tw-grow tw-basis-0">
+      <!-- Init main menu -->
+      <VcAppMenu
+        ref="menu"
+        class="tw-shrink-0"
+        :items="menuItems"
+        :mobileMenuItems="mobileMenuItems"
+        @item:click="onMenuItemClick"
+      ></VcAppMenu>
+
+      <!-- Workspace blades -->
+      <div
+        class="vc-app__workspace tw-px-2 tw-w-full tw-overflow-hidden !tw-flex tw-grow tw-basis-0"
+      >
+        <slot name="bladeNavigation"></slot>
+      </div>
+
+      <div
+        class="[pointer-events:painted] tw-absolute tw-flex tw-z-[1000] tw-overflow-hidden tw-top-0 tw-left-2/4 -tw-translate-x-2/4 tw-flex-col tw-items-center tw-p-2 tw-box-border"
+      >
+        <slot name="notifications"></slot>
+      </div>
+      <div>
+        <slot name="passwordChange"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, getCurrentInstance } from "vue";
+
+export default defineComponent({
+  inheritAttrs: false,
+});
+</script>
+
+<script lang="ts" setup>
+import { useRouter } from "vue-router";
+import VcAppBar from "./_internal/vc-app-bar/vc-app-bar.vue";
+import VcAppMenu from "./_internal/vc-app-menu/vc-app-menu.vue";
+import { IBladeToolbar, IMenuItems } from "@/core/types";
+import {
+  IBladeElement,
+  ExtendedComponent,
+  IMenuClickEvent,
+  IOpenBlade,
+} from "@/shared";
+
+export interface Props {
+  pages: ExtendedComponent[];
+  menuItems: IMenuItems[];
+  mobileMenuItems: IMenuItems[];
+  toolbarItems: IBladeToolbar[];
+  isReady: boolean;
+  isAuthorized: boolean;
+  logo: string;
+  version: string;
+  theme?: "light" | "dark";
+  bladesRefs: IBladeElement[];
+  title?: string;
+}
+
+export interface Emits {
+  (event: "onOpen", args: IOpenBlade): void;
+  (event: "onClose", index: number): void;
+  (event: "backlink:click", index: number): void;
+}
+
+withDefaults(defineProps<Props>(), {
+  pages: () => [],
+  menuItems: () => [],
+  mobileMenuItems: () => [],
+  toolbarItems: () => [],
+  isReady: false,
+  isAuthorized: false,
+  logo: undefined,
+  version: undefined,
+  theme: "light",
+  bladesRefs: () => [],
+});
+
+const emit = defineEmits<Emits>();
+
+console.debug("vc-app: Init vc-app");
+
+const instance = getCurrentInstance();
+
+const router = useRouter();
+
+const onMenuItemClick = function ({ item, navigationCb }: IMenuClickEvent) {
+  console.debug(`vc-app#onMenuItemClick() called.`);
+  if (item.clickHandler && typeof item.clickHandler === "function") {
+    item.clickHandler(instance?.exposed);
+  } else {
+    emit("onOpen", { parentBlade: item.component, id: 0, navigationCb });
+  }
+};
+
+const onToolbarButtonClick = function (item: Record<string, unknown>) {
+  console.debug(`vc-app#onToolbarButtonClick() called.`);
+
+  if (item.clickHandler && typeof item.clickHandler === "function") {
+    item.clickHandler(instance?.proxy);
+  }
+};
+
+const openDashboard = async () => {
+  console.debug(`openDashboard() called.`);
+
+  // Close all opened pages with onBeforeClose callback
+  await emit("onClose", 0);
+
+  router.push("/");
+};
+
+defineExpose({
+  openDashboard,
+  onToolbarButtonClick,
+  onMenuItemClick,
+});
+</script>
+
+<style lang="scss">
+:root {
+  --app-background: linear-gradient(180deg, #e4f5fb 5.06%, #e8f3f2 100%),
+    linear-gradient(0deg, #e8f2f3, #e8f2f3), #eef2f8;
+}
+
+.vc-app {
+  background: var(--app-background);
+
+  &__workspace {
+    .vc-app_mobile & {
+      @apply tw-p-0;
+    }
+  }
+}
+</style>

package/ui/components/organisms/vc-blade/_internal/vc-blade-header/vc-blade-header.vue

@@ -0,0 +1,126 @@
+<template>
+  <div
+    class="tw-shrink-0 tw-h-[var(--blade-header-height)] tw-bg-[color:var(--blade-header-background-color)] tw-flex tw-items-center tw-py-0 tw-px-4 tw-border-solid tw-border-b tw-border-b-[color:#eaedf3]"
+  >
+    <div v-if="icon" class="tw-text-[color:var(--blade-header-icon-color)] tw-mr-3">
+      <VcIcon :icon="icon" size="xxl"></VcIcon>
+    </div>
+
+    <div class="tw-overflow-hidden tw-grow tw-basis-0">
+      <div
+        class="tw-text-[color:var(--blade-header-title-color)] tw-text-lg tw-truncate"
+        :class="{
+          '!tw-text-[length:var(--blade-header-title-font-size)] tw-font-medium':
+            !subtitle,
+        }"
+      >
+        {{ title }}
+      </div>
+      <div
+        v-if="subtitle"
+        class="tw-text-[color:var(--blade-header-subtitle-color)] tw-text-xs tw-mt-1"
+      >
+        {{ subtitle }}
+      </div>
+    </div>
+
+    <div v-if="$slots['actions']">
+      <slot name="actions"></slot>
+    </div>
+
+    <div v-if="!$isMobile.value" class= "tw-flex tw-items-center">
+      <template v-if="expandable">
+        <div
+          v-if="expanded"
+          class="tw-text-[color:var(--blade-header-button-color)] tw-ml-4 tw-cursor-pointer hover:tw-text-[color:var(--blade-header-button-color-hover)]"
+          @click="onCollapse"
+        >
+          <VcIcon icon="fas fa-window-minimize" size="s"></VcIcon>
+        </div>
+        <div v-else class="vc-blade-header__button" @click="onExpand">
+          <VcIcon icon="fas fa-window-maximize" size="s"></VcIcon>
+        </div>
+      </template>
+      <div
+        v-if="closable"
+        class="tw-text-[color:var(--blade-header-button-color)] tw-ml-4 tw-cursor-pointer hover:tw-text-[color:var(--blade-header-button-color-hover)]"
+        @click="onClose"
+      >
+        <VcIcon icon="fas fa-times"></VcIcon>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { VcIcon } from "@/ui/components";
+
+const props = defineProps({
+  expandable: {
+    type: Boolean,
+    default: false,
+  },
+
+  expanded: {
+    type: Boolean,
+    default: false,
+  },
+
+  closable: {
+    type: Boolean,
+    default: false,
+  },
+
+  title: {
+    type: String,
+    default: undefined,
+  },
+
+  subtitle: {
+    type: String,
+    default: undefined,
+  },
+
+  icon: {
+    type: String,
+    default: undefined,
+  },
+});
+
+const emit = defineEmits(["close", "expand", "collapse"]);
+
+function onExpand(): void {
+  if (props.expandable) {
+    emit("expand");
+  }
+}
+
+function onCollapse(): void {
+  if (props.expandable) {
+    emit("collapse");
+  }
+}
+
+function onClose(): void {
+  if (props.closable) {
+    emit("close");
+  }
+}
+</script>
+
+<style lang="scss">
+:root {
+  --blade-header-height: 50px;
+  --blade-header-background-color: #ffffff;
+
+  --blade-header-button-color: #a1c0d4;
+  --blade-header-button-color-hover: #7ea8c4;
+
+  --blade-header-icon-color: #a1c0d4;
+
+  --blade-header-title-font-size: 19px;
+  --blade-header-title-color: #2e3d4e;
+
+  --blade-header-subtitle-color: #a1c0d4;
+}
+</style>