@vc-shell/framework 1.0.66 → 1.0.68

package/ui/components/molecules/vc-notification/vc-notification.vue

@@ -1,39 +1,77 @@
 <template>
   <div
-    class="vc-notification tw-flex tw-items-center tw-mt-1 tw-mb-3 tw-mx-2 tw-bg-[color:var(--notification-background)] tw-border tw-border-solid tw-border-[color:#eef0f2] tw-box-border tw-shadow-[2px_2px_11px_rgba(126,142,157,0.4)] tw-rounded-[var(--notification-border-radius)] tw-overflow-hidden tw-py-2 tw-px-4 tw-max-w-[600px]"
+    ref="nodeRef"
+    class="vc-notification tw-flex tw-items-center tw-mt-1 tw-mb-3 tw-mx-2 tw-bg-[color:var(--notification-background)] tw-border tw-border-solid tw-border-[color:#eef0f2] tw-box-border tw-shadow-[2px_2px_11px_rgba(126,142,157,0.4)] tw-rounded-[var(--notification-border-radius)] tw-overflow-hidden tw-py-2 tw-px-4 tw-max-w-[600px] tw-justify-between"
+    :id="String(notificationId)"
     @mouseenter="onMouseEnter"
     @mouseleave="onMouseLeave"
   >
+    <VcIcon
+      :icon="types[type]?.icon"
+      :style="{ color: types[type]?.color }"
+      size="l"
+      class="tw-mr-2"
+    ></VcIcon>
     <div class="tw-text-[color:var(--notification-content-color)]">
-      <slot></slot>
+      {{ content }}
     </div>
     <VcIcon
       icon="fas fa-times"
       class="tw-cursor-pointer tw-text-[color:var(--notification-dismiss-color)] tw-ml-2"
       size="s"
-      @click="onDismiss"
+      @click.stop="closeNotification"
     ></VcIcon>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { NotificationType } from "./../../../../shared/components/notifications";
 import { VcIcon } from "./../../";
+import { onMounted, ref, toRefs, watch } from "vue";
 
 export interface Props {
-  timeout?: number;
-}
-
-export interface Emits {
-  (event: "dismiss"): void;
-  (event: "expired"): void;
+  content?: string;
+  notificationId?: number | string;
+  updateId?: number | string;
+  type?: NotificationType;
+  timeout?: number | boolean;
+  pauseOnHover?: boolean;
+  closeNotification?: () => void;
+  limit?: number;
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  timeout: 0,
+const props = defineProps<Props>();
+
+const types = {
+  default: { icon: "fas fa-info-circle", color: "var(--notification-info)" },
+  success: { icon: "fas fa-check-circle", color: "var(--notification-success)" },
+  error: { icon: "fas fa-exclamation-circle", color: "var(--notification-error)" },
+  warning: { icon: "fas fa-exclamation-triangle", color: "var(--notification-warning)" },
+};
+const { timeout } = toRefs(props);
+
+const timer = ref();
+
+watch(
+  timeout,
+  (newVal) => {
+    if (newVal) {
+      timer.value = Timer(() => {
+        props.closeNotification();
+      }, props.timeout as number);
+
+      timer.value.start();
+    }
+  },
+  { immediate: true }
+);
+
+onMounted(() => {
+  if (props.timeout) {
+    timer.value.start();
+  }
 });
 
-const emit = defineEmits<Emits>();
-
 function Timer(callback: (...args: unknown[]) => unknown, delay: number) {
   let timerId: number;
   let from: number;
@@ -62,25 +100,17 @@ function Timer(callback: (...args: unknown[]) => unknown, delay: number) {
   };
 }
 
-const timer = Timer(() => emit("expired"), props.timeout);
-if (props.timeout) {
-  timer.start();
-}
-
 function onMouseEnter() {
-  timer.pause();
+  if (props.timeout) {
+    timer.value.pause();
+  }
 }
 
 function onMouseLeave() {
   if (props.timeout) {
-    timer.resume();
+    timer.value.resume();
   }
 }
-
-function onDismiss() {
-  timer.pause();
-  emit("dismiss");
-}
 </script>
 
 <style lang="scss">
@@ -90,6 +120,11 @@ function onDismiss() {
   --notification-box-shadow: 2px 2px 11px rgba(126, 142, 157, 0.4);
   --notification-dismiss-color: #83a3be;
   --notification-content-color: #8c9cab;
+
+  --notification-warning: #f89406;
+  --notification-error: #ef796f;
+  --notification-success: #87b563;
+  --notification-info: #bdd1df;
 }
 
 .vc-notification {

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

@@ -6,7 +6,6 @@ export const VcApp = _App as typeof _App & {
     $slots: {
       appSwitcher: () => VNode[];
       bladeNavigation: () => VNode[];
-      notifications: () => VNode[];
       passwordChange: () => VNode[];
     };
   };

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

@@ -22,7 +22,10 @@
       @logo:click="$emit('logo:click')"
       :title="title"
     >
-      <template v-slot:appSwitcher>
+      <template
+        v-slot:appSwitcher
+        v-if="$slots['appSwitcher']"
+      >
         <slot name="appSwitcher"></slot>
       </template>
     </VcAppBar>
@@ -39,16 +42,14 @@
       ></VcAppMenu>
 
       <!-- Workspace blades -->
-      <div class="vc-app__workspace tw-px-2 tw-w-full tw-overflow-hidden !tw-flex tw-grow tw-basis-0 tw-relative">
-        <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"
+        class="vc-app__workspace tw-px-2 tw-w-full tw-overflow-hidden !tw-flex tw-grow tw-basis-0 tw-relative"
+        v-if="$slots['bladeNavigation']"
       >
-        <slot name="notifications"></slot>
+        <slot name="bladeNavigation"></slot>
       </div>
-      <div>
+
+      <div v-if="$slots['passwordChange']">
         <slot name="passwordChange"></slot>
       </div>
     </div>
@@ -65,7 +66,6 @@ export default defineComponent({
 </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 { ExtendedComponent, IBladeRef, IMenuClickEvent, IOpenBlade } from "./../../../../shared";

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

@@ -34,18 +34,52 @@
       </template>
     </VcBladeHeader>
 
+    <template v-if="$slots['error']">
+      <div class="tw-text-white tw-p-2 tw-flex tw-flex-row tw-items-center tw-bg-[color:var(--blade-color-error)]">
+        <VcIcon
+          size="s"
+          icon="fas fa-exclamation-triangle"
+        />
+        <div class="tw-line-clamp-1 tw-w-full tw-mx-2"><slot name="error"></slot></div>
+        <VcButton
+          @click="toggleErrorPopup"
+          variant="onlytext"
+          class="tw-shrink-0 tw-opacity-80 tw-text-white hover:!tw-opacity-100 hover:!tw-text-white"
+          >{{ $t("COMPONENTS.ORGANISMS.VC_BLADE.SEE_DETAILS") }}</VcButton
+        >
+      </div>
+    </template>
+
     <!-- Set up blade toolbar -->
     <VcBladeToolbar
       class="tw-shrink-0"
       :items="toolbarItems"
     ></VcBladeToolbar>
 
+    <VcPopup
+      variant="medium"
+      :title="$t('COMPONENTS.ORGANISMS.VC_BLADE.ERROR_POPUP.TITLE')"
+      @close="toggleErrorPopup"
+      v-if="isErrorPopupActive"
+    >
+      <div class="tw-p-5 tw-flex tw-flex-row tw-items-center tw-h-full">
+        <VcIcon
+          icon="fas fa-exclamation-circle"
+          size="xxl"
+          class="tw-text-[color:var(--blade-color-error)] tw-mr-3"
+        ></VcIcon>
+        <VcContainer no-padding>
+          <slot name="error"></slot>
+        </VcContainer>
+      </div>
+    </VcPopup>
+
     <slot></slot>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from "vue";
+import { defineComponent, computed, ref } from "vue";
 import { IBladeToolbar } from "../../../../core/types";
 import { IBladeContainer } from "./../../../../shared";
 
@@ -57,6 +91,7 @@ export default defineComponent({
 <script lang="ts" setup>
 import VcBladeHeader from "./_internal/vc-blade-header/vc-blade-header.vue";
 import VcBladeToolbar from "./_internal/vc-blade-toolbar/vc-blade-toolbar.vue";
+import { VcButton, VcIcon, VcPopup, VcContainer } from "./../../";
 
 export interface Props {
   icon?: string;
@@ -70,6 +105,7 @@ export interface Props {
   toolbarItems?: IBladeToolbar[];
   onClose?: () => void;
   blades?: IBladeContainer[];
+  // error?: string;
 }
 
 export interface Emits {
@@ -87,18 +123,25 @@ const props = withDefaults(defineProps<Props>(), {
 
 defineEmits<Emits>();
 
+const isErrorPopupActive = ref(false);
+
 const isExpandable = computed(() => {
   if (!props.expandable) {
     return props.expandable;
   }
   return props.blades?.length !== 0;
 });
+
+function toggleErrorPopup() {
+  isErrorPopupActive.value = !isErrorPopupActive.value;
+}
 </script>
 
 <style lang="scss">
 :root {
   --blade-background-color: #ffffff;
   --blade-border-radius: 6px;
+  --blade-color-error: #f14e4e;
 }
 
 .vc-app_mobile .vc-blade {

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

@@ -17,7 +17,7 @@
           ></VcIcon>
         </div>
 
-        <div class="vc-popup__content tw-grow tw-basis-0">
+        <div class="vc-popup__content tw-grow tw-basis-0 tw-h-[calc(100%-44px)]">
           <slot></slot>
         </div>
       </div>

package/ui/components/organisms/vc-table/_internal/vc-table-filter/vc-table-filter.vue

@@ -68,7 +68,7 @@ export default defineComponent({
 import { offset, computePosition, ComputePositionReturn } from "@floating-ui/vue";
 
 export interface Props {
-  title: string;
+  title?: string;
   counter: number;
   parentExpanded?: boolean;
 }

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

@@ -433,6 +433,7 @@ import { offset, flip, arrow, computePosition, ComputePositionReturn } from "@fl
 import { IActionBuilderResult, ITableColumns } from "./../../../../core/types";
 import { useLocalStorage, useCurrentElement } from "@vueuse/core";
 import { VcContainer, VcInput, VcCheckbox, VcIcon, VcPagination, VcButton, VcLoading } from "./../../";
+import * as _ from "lodash-es";
 
 export interface StatusImage {
   image?: string;
@@ -543,7 +544,7 @@ const nextColumn = ref<ITableColumns>();
 const lastResize = ref<number>();
 const table = useCurrentElement();
 const resizer = ref();
-const state = useLocalStorage("VC_TABLE_STATE_" + props.stateKey.toUpperCase(), []);
+const state = useLocalStorage<ITableColumns[]>("VC_TABLE_STATE_" + props.stateKey.toUpperCase(), []);
 const defaultColumns: Ref<ITableColumns[]> = ref([]);
 const draggedColumn = ref();
 const draggedElement = ref<HTMLElement>();
@@ -650,6 +651,10 @@ watch(
   () => props.columns,
   (newVal) => {
     defaultColumns.value = newVal;
+
+    if (newVal.length !== state.value.length) {
+      saveState();
+    }
   },
   { deep: true, immediate: true }
 );
@@ -982,7 +987,12 @@ function saveState() {
 function restoreState() {
   console.debug("[@vc-shell/framewok#vc-table.vue] - Restore state");
   if (Object.keys(state.value).length) {
-    defaultColumns.value = state.value;
+    defaultColumns.value = state.value.map((item) => {
+      return {
+        ...item,
+        title: defaultColumns.value.find((x) => x.id === item.id).title,
+      };
+    });
   }
 }
 

package/ui/locales/en.json

@@ -1,6 +1,12 @@
 {
   "COMPONENTS":{
     "ORGANISMS":{
+      "VC_BLADE":{
+        "SEE_DETAILS": "See details",
+        "ERROR_POPUP":{
+          "TITLE":"Error details"
+        }
+      },
       "VC_TABLE":{
         "ALL_SELECTED":"All items in this page are selected.",
         "SELECT":"Select all items",