@vc-shell/framework 1.0.38 → 1.0.40

package/dist/vite.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vite.config.d.ts","sourceRoot":"","sources":["../vite.config.ts"],"names":[],"mappings":";AAKA,wBAsCE"}
+{"version":3,"file":"vite.config.d.ts","sourceRoot":"","sources":["../vite.config.ts"],"names":[],"mappings":";AAKA,wBA2CE"}

package/package.json

@@ -1,28 +1,46 @@
 {
   "name": "@vc-shell/framework",
-  "version": "1.0.38",
+  "version": "1.0.40",
   "main": "./dist/framework.js",
+  "module": "./dist/framework.js",
   "types": "./dist/index.d.ts",
   "style": "./dist/style.css",
   "files": [
-    "dist/*",
-    "src",
-    "tailwind.config.js"
+    "dist",
+    "tailwind.config.js",
+    "ui",
+    "core",
+    "shared"
   ],
+  "exports": {
+    ".": {
+      "import": "./dist/framework.js",
+      "require": "./dist/framework.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./client": {
+      "types": "./dist/ui/types/index.d.ts"
+    },
+    "./dist/style.css": "./dist/style.css",
+    "./tailwind.config": "./tailwind.config.js",
+    "./*": "./*"
+  },
   "scripts": {
     "build": "vite build",
+    "development": "vite build --watch -m development",
     "watch": "vite build --watch"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.0",
     "@vee-validate/rules": "^4.5.5",
-    "@vueuse/core": "^6.0.0",
-    "@vueuse/integrations": "^6.0.0",
+    "@vueuse/components": "^9.9.0",
+    "@vueuse/core": "^9.9.0",
+    "@vueuse/integrations": "^9.9.0",
     "client-oauth2": "^4.3.3",
     "moment": "^2.29.1",
     "normalize.css": "^8.0.1",
     "swiper": "^6.7.5",
-    "vue-currency-input": "^3.0.2",
+    "vue-currency-input": "~2.5.1",
     "vue-i18n": "^9.1.7",
     "vue-logger-plugin": "^2.1.2",
     "vue3-ace-editor": "^2.2.2",
@@ -32,10 +50,12 @@
   "devDependencies": {
     "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@rollup/plugin-commonjs": "^21.0.2",
-    "@vc-shell/api-client-generator": "^1.0.38",
-    "@vc-shell/config-generator": "^1.0.38",
+    "@vc-shell/api-client-generator": "^1.0.40",
+    "@vc-shell/config-generator": "^1.0.40",
+    "@vue-macros/volar": "^0.5.7",
     "sass": "^1.49.0",
     "typescript": "^4.6.2",
+    "unplugin-vue-macros": "^1.1.1",
     "url-pattern": "^1.0.3"
   },
   "peerDependencies": {
@@ -47,5 +67,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "d095e9e211c5cc84837684a4bc631521e0d31e9f"
+  "gitHead": "826168937f288def939c0a249181bc3fcc87d7f2"
 }

package/shared/app-switcher/components/index.ts

@@ -0,0 +1 @@
+export { default as VcAppSwitcher } from "./vc-app-switcher/vc-app-switcher.vue";

package/shared/app-switcher/components/vc-app-switcher/vc-app-switcher.vue

@@ -0,0 +1,90 @@
+<template>
+  <div
+    class="tw-relative tw-h-full tw-flex tw-items-center tw-justify-center tw-ml-2 tw-mr-[15px] tw-shrink-0"
+    v-click-outside="onClose"
+  >
+    <button
+      class="hover:[&>img] hover:[&_div]:tw-bg-[color:var(--app-bar-button-color-hover)]"
+      @click.stop="toggleAppSwitch"
+    >
+      <div
+        class="tw-h-[22px] tw-w-[22px] [mask:url(/assets/app-select.svg)] tw-bg-[color:var(--app-bar-button-color)] tw-duration-200"
+      />
+    </button>
+
+    <div
+      v-if="isVisible && appsList && appsList.length"
+      class="tw-px-4 tw-py-3.5 tw-bg-white tw-drop-shadow-[4px_4px_20px_rgba(47,86,108,0.25)] tw-absolute tw-z-[10000] tw-rounded tw-top-[var(--app-bar-height)] tw-left-0"
+    >
+      <ul class="tw-flex tw-flex-col tw-gap-3 tw-overflow-hidden">
+        <li
+          v-for="item in appsList"
+          :key="item.id"
+          @click="switchApp(item)"
+          class="tw-flex tw-flex-row tw-items-center tw-cursor-pointer tw-group"
+          :class="{ '[&>p]:tw-font-extrabold': locationHandler(item.relativeUrl) }"
+        >
+          <img
+            :src="imageUrl(item.iconUrl)"
+            :alt="`icon_${item.id}`"
+            class="tw-w-5 tw-h-5 tw-mr-2 tw-shrink-0"
+          />
+          <p
+            class="tw-font-normal tw-text-sm tw-text-[#727C87] tw-truncate group-hover:tw-opacity-80"
+          >
+            {{ item.title }}
+          </p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { AppDescriptor } from "@/core/api";
+
+export interface Props {
+  appsList: AppDescriptor[];
+}
+
+interface Emits {
+  (event: "onClick", item: AppDescriptor): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  appsList: undefined,
+});
+
+const emit = defineEmits<Emits>();
+
+const isVisible = ref(false);
+
+const imageUrl = (url: string) => window.location.origin + url;
+
+const locationHandler = (url: string) => {
+  const cleanUrl = window.location.pathname.replace(/\/+$/, "");
+  const match = url.match(cleanUrl);
+  if (match) {
+    return match[0];
+  }
+  return null;
+};
+
+const switchApp = (app: AppDescriptor) => {
+  emit("onClick", app);
+  onClose();
+};
+
+const toggleAppSwitch = () => {
+  if (props.appsList && props.appsList.length) {
+    isVisible.value = !isVisible.value;
+  }
+};
+
+const onClose = () => {
+  isVisible.value = false;
+};
+</script>
+
+<style lang="less" scoped></style>

package/shared/app-switcher/composables/index.ts

@@ -0,0 +1 @@
+export { default as useAppSwitcher } from "./useAppSwitcher";

package/shared/app-switcher/composables/useAppSwitcher/index.ts

@@ -0,0 +1,54 @@
+import { computed, Ref, ref } from "vue";
+import { AppDescriptor, AppsClient } from "@/core/api";
+import {
+  useLogger,
+  useUser,
+  usePermissions,
+} from "@/core/composables";
+
+interface IUseAppSwitcher {
+  readonly appsList: Ref<AppDescriptor[]>;
+  getApps: () => void;
+  switchApp: (app: AppDescriptor) => void;
+}
+
+export default (): IUseAppSwitcher => {
+  const logger = useLogger();
+  const { checkPermission } = usePermissions();
+  const appsList = ref<AppDescriptor[]>([]);
+
+  async function getApiClient(): Promise<AppsClient> {
+    const { getAccessToken } = useUser();
+    const client = new AppsClient();
+    client.setAuthToken((await getAccessToken()) as string);
+    return client;
+  }
+
+  async function getApps() {
+    const client = await getApiClient();
+
+    try {
+      appsList.value = await client.getApps();
+    } catch (e) {
+      logger.error(e);
+      throw e;
+    }
+  }
+
+  function switchApp(app: AppDescriptor) {
+    if (checkPermission(app.permission)) {
+      if (app.relativeUrl) {
+        window.location.href = window.location.origin + app.relativeUrl;
+      }
+    } else {
+      // TODO temporary alert
+      alert("Access restricted");
+    }
+  }
+
+  return {
+    appsList: computed(() => appsList.value),
+    getApps,
+    switchApp,
+  };
+};

package/shared/app-switcher/index.ts

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

package/shared/assets/components/assets-details/assets-details.vue

@@ -0,0 +1,138 @@
+<template>
+  <VcBlade
+    :title="options.editableAsset.name"
+    :subtitle="$t('ASSETS.PAGES.DETAILS.SUBTITLE')"
+    :expanded="expanded"
+    :closable="closable"
+    :toolbarItems="bladeToolbar"
+    @close="$emit('close:blade')"
+  >
+    <!-- Blade contents -->
+    <div class= "tw-flex tw-grow-1 tw-border-t tw-border-solid tw-border-t-[#eaedf3]">
+      <div class="assets-details__content tw-grow tw-basis-0">
+        <VcContainer :no-padding="true">
+          <div class="tw-p-4">
+            <VcForm>
+              <VcImage
+                class="tw-mb-4"
+                :src="localImage.url"
+                size="xl"
+                :bordered="true"
+              ></VcImage>
+              <VcInput
+                class="tw-mb-4"
+                :label="$t('ASSETS.PAGES.DETAILS.FIELDS.NAME.TITLE')"
+                v-model="localImage.name"
+                clearable
+                required
+                :placeholder="
+                  $t('ASSETS.PAGES.DETAILS.FIELDS.NAME.PLACEHOLDER')
+                "
+              ></VcInput>
+              <VcInput
+                class="tw-mb-4"
+                :label="$t('ASSETS.PAGES.DETAILS.FIELDS.ALT.TITLE')"
+                v-model="localImage.altText"
+                clearable
+                :placeholder="$t('ASSETS.PAGES.DETAILS.FIELDS.ALT.PLACEHOLDER')"
+                :tooltip="$t('ASSETS.PAGES.DETAILS.FIELDS.ALT.TOOLTIP')"
+                required
+              ></VcInput>
+              <VcTextarea
+                class="tw-mb-4"
+                :label="$t('ASSETS.PAGES.DETAILS.FIELDS.DESCRIPTION.TITLE')"
+                v-model="localImage.description"
+                :placeholder="
+                  $t('ASSETS.PAGES.DETAILS.FIELDS.DESCRIPTION.PLACEHOLDER')
+                "
+                is-required
+              ></VcTextarea>
+            </VcForm>
+          </div>
+        </VcContainer>
+      </div>
+    </div>
+  </VcBlade>
+</template>
+
+<script lang="ts" setup>
+import { computed, reactive, unref } from "vue";
+import { useI18n } from "@/core/composables";
+import { IParentCallArgs } from "@/shared";
+import {
+  VcBlade,
+  VcContainer,
+  VcForm,
+  VcImage,
+  VcInput,
+  VcTextarea,
+} from "@/ui/components";
+
+interface ILocalImage {
+  url: string;
+  name: string;
+  altText: string;
+  description: string;
+}
+
+export interface Props {
+  expanded?: boolean;
+  closable?: boolean;
+  options?: {
+    editableAsset?: ILocalImage;
+    sortHandler?: (remove: boolean, localImage: ILocalImage) => void;
+  };
+}
+
+export interface Emits {
+  (event: "parent:call", args: IParentCallArgs): void;
+  (event: "close:blade"): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  expanded: true,
+  closable: true,
+  options: () => ({}),
+});
+
+const emit = defineEmits<Emits>();
+const { t } = useI18n();
+const localImage = reactive({ ...props.options.editableAsset });
+
+const bladeToolbar = [
+  {
+    id: "save",
+    title: t("ASSETS.PAGES.DETAILS.TOOLBAR.SAVE"),
+    icon: "fas fa-save",
+    clickHandler() {
+      if (
+        props.options.sortHandler &&
+        typeof props.options.sortHandler === "function"
+      ) {
+        props.options.sortHandler(false, localImage);
+        emit("close:blade");
+      }
+    },
+  },
+  {
+    id: "delete",
+    title: t("ASSETS.PAGES.DETAILS.TOOLBAR.DELETE"),
+    icon: "fas fa-trash",
+    clickHandler() {
+      if (
+        window.confirm(
+          unref(computed(() => t("ASSETS.PAGES.DETAILS.DELETE_CONFIRMATION")))
+        )
+      ) {
+        if (
+          props.options.sortHandler &&
+          typeof props.options.sortHandler === "function"
+        ) {
+          props.options.sortHandler(true, localImage);
+          emit("close:blade");
+        }
+      }
+    },
+  },
+];
+</script>

package/shared/assets/components/index.ts

@@ -0,0 +1 @@
+export {default as AssetsDetails} from './assets-details/assets-details.vue'

package/shared/assets/index.ts

@@ -0,0 +1,19 @@
+import { App } from "vue";
+import * as components from "./components";
+import * as locales from "./locales";
+
+export default {
+    install(app: App): void {
+        Object.entries(components).forEach(([pageName, page]) => {
+            app.component(pageName, page);
+            app.config.globalProperties.pages?.push(page);
+        });
+
+        // Load locales
+        Object.entries(locales).forEach(([key, message]) => {
+            app.config.globalProperties.$mergeLocaleMessage(key, message);
+        });
+    },
+};
+
+export * from './components'

package/shared/assets/locales/en.json

@@ -0,0 +1,29 @@
+{
+  "ASSETS": {
+    "PAGES": {
+      "DETAILS": {
+        "SUBTITLE": "Image edit",
+        "TOOLBAR": {
+          "SAVE": "Save",
+          "DELETE": "Delete"
+        },
+        "FIELDS": {
+          "NAME": {
+            "TITLE": "Image name",
+            "PLACEHOLDER": "Enter image name"
+          },
+          "ALT": {
+            "TITLE": "Image alternative text",
+            "PLACEHOLDER": "Enter image alt text",
+            "TOOLTIP": "This text will be displayed in case of disabled/unloaded image on the page"
+          },
+          "DESCRIPTION": {
+            "TITLE": "Meta description",
+            "PLACEHOLDER": "Enter meta description"
+          }
+        },
+        "DELETE_CONFIRMATION": "Are you sure you want to delete this image?"
+      }
+    }
+  }
+}

package/shared/assets/locales/index.ts

@@ -0,0 +1,2 @@
+import * as en from "./en.json";
+export { en };

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

@@ -0,0 +1 @@
+export { default as VcBladeNavigation } from "./vc-blade-navigation/vc-blade-navigation.vue";

package/shared/blade-navigation/components/vc-blade-navigation/vc-blade-navigation.vue

@@ -0,0 +1,84 @@
+<template>
+  <router-view v-slot="{ Component, route }">
+    <component
+      :is="Component"
+      :closable="false"
+      v-show="$isMobile.value ? !blades.length : blades.length <= 1"
+      @open:blade="$emit('onOpen', { blade: $event, id: 0 })"
+      :options="parentBladeOptions"
+      :expanded="blades.length === 0"
+      :param="resolveParam"
+      :key="route"
+      ref="parentRef"
+    >
+    </component>
+  </router-view>
+  <component
+    v-for="(blade, i) in blades"
+    v-show="i >= blades.length - ($isMobile.value ? 1 : 2)"
+    :key="`blade_${i}`"
+    :is="blade.component"
+    :param="blade.param"
+    :closable="i >= 0"
+    :expanded="i === blades.length - 1"
+    :options="blade.bladeOptions"
+    @open:blade="$emit('onOpen', { blade: $event, id: blade.idx })"
+    @close:blade="$emit('onClose', i)"
+    @close:children="$emit('onClose', i + 1)"
+    @parent:call="$emit('onParentCall', { id: i, cb: $event })"
+    :ref="setBladesRef"
+  ></component>
+</template>
+
+<script lang="ts" setup>
+import { computed, onBeforeUpdate, ref } from "vue";
+import { useRoute } from "vue-router";
+import {
+  IBladeContainer,
+  IBladeElement,
+  IBladeEvent,
+  IParentCallArgs,
+} from "@/shared";
+
+export interface Props {
+  blades: IBladeContainer[];
+  parentBladeOptions: Record<string, unknown>;
+  parentBladeParam: string;
+}
+
+export interface Emits {
+  (event: "onOpen", blade: { blade: IBladeEvent; id: number }): void;
+  (event: "onClose", index: number): void;
+  (event: "onParentCall", args: { id: number; args: IParentCallArgs }): void;
+}
+
+defineEmits<Emits>();
+
+const props = withDefaults(defineProps<Props>(), {
+  blades: () => [],
+  parentBladeOptions: () => ({}),
+  parentBladeParam: undefined,
+});
+
+const route = useRoute();
+const bladesRefs = ref([]);
+const parentRef = ref();
+
+onBeforeUpdate(() => {
+  bladesRefs.value = [parentRef.value];
+});
+
+const setBladesRef = (el: IBladeElement) => {
+  if (el && Object.keys(el).length) {
+    bladesRefs.value.push(el);
+  }
+};
+
+const resolveParam = computed(() => {
+  return props.parentBladeParam ? props.parentBladeParam : route.params.param;
+});
+
+defineExpose({
+  bladesRefs,
+});
+</script>

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

@@ -0,0 +1 @@
+export {default as useBladeNavigation} from './useBladeNavigation'