@vc-shell/framework 1.0.212 → 1.0.214

package/shared/modules/dynamic/pages/dynamic-blade-list.vue

@@ -10,6 +10,7 @@
     :class="{
       'tw-flex tw-flex-auto': isWidgetView,
     }"
+    :has-unsaved-changes="unref(scope)?.modified"
     @close="$emit('close:blade')"
     @expand="$emit('expand:blade')"
     @collapse="$emit('collapse:blade')"
@@ -39,20 +40,20 @@
         class="tw-grow tw-basis-0"
         :loading="loading"
         :expanded="expanded"
-        :columns="(tableColsWithLocales as ITableColumns[]) ?? []"
+        :columns="tableColsWithLocales ?? []"
         :state-key="stateKey ?? ''"
-        :items="itemsProxy as Record<string, any>[]"
+        :items="itemsProxy ?? []"
         :multiselect="isWidgetView ? false : tableData?.multiselect"
         :header="isWidgetView ? false : tableData?.header"
         :item-action-builder="actionBuilder"
         :enable-item-actions="!!tableData?.actions && !isWidgetView"
-        :footer="!isWidgetView"
+        :footer="isWidgetView ? false : tableData?.footer"
         :sort="sort"
         :pages="pagination?.pages"
         :current-page="pagination?.currentPage"
         :search-value="searchValue"
         :selected-item-id="selectedItemId"
-        :total-label="$t(`${settings?.localizationPrefix.trim().toUpperCase()}.PAGES.LIST.TABLE.TOTALS`)"
+        :total-label="$t(`${localizationPrefix}.PAGES.LIST.TABLE.TOTALS`)"
         :total-count="pagination?.totalCount"
         :active-filter-count="activeFilterCount"
         :reorderable-rows="isWidgetView ? false : tableData?.reorderableRows"
@@ -87,12 +88,12 @@
           <template v-else>
             <div class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center">
               <div class="tw-m-4 tw-text-xl tw-font-medium">
-                {{ $t(`${settings?.localizationPrefix.trim().toUpperCase()}.PAGES.LIST.NOT_FOUND.EMPTY`) }}
+                {{ $t(`${localizationPrefix}.PAGES.LIST.NOT_FOUND.EMPTY`) }}
               </div>
               <VcButton
                 v-if="isFilterVisible"
                 @click="resetSearch"
-                >{{ $t(`${settings?.localizationPrefix.trim().toUpperCase()}.PAGES.LIST.NOT_FOUND.RESET`) }}</VcButton
+                >{{ $t(`${localizationPrefix}.PAGES.LIST.NOT_FOUND.RESET`) }}</VcButton
               >
             </div>
           </template>
@@ -113,7 +114,7 @@
           <template v-else>
             <div class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center">
               <div class="tw-m-4 tw-text-xl tw-font-medium">
-                {{ $t(`${settings?.localizationPrefix.trim().toUpperCase()}.PAGES.LIST.EMPTY.NO_ITEMS`) }}
+                {{ $t(`${localizationPrefix}.PAGES.LIST.EMPTY.NO_ITEMS`) }}
               </div>
             </div>
           </template>
@@ -162,6 +163,7 @@ import {
   toRefs,
   provide,
   isRef,
+  onMounted,
 } from "vue";
 import { useI18n } from "vue-i18n";
 import { DynamicGridSchema, ListContentSchema, SettingsSchema } from "../types";
@@ -179,7 +181,7 @@ import { safeIn } from "../helpers/safeIn";
 export interface Props {
   expanded?: boolean;
   closable?: boolean;
-  param?: string;
+  param?: string | any;
   options?: unknown;
   model?: DynamicGridSchema;
   composables?: Record<string, (...args: any[]) => Record<string, any>>;
@@ -209,6 +211,7 @@ const { debounce } = useFunctions();
 const emit = defineEmits<Emits>();
 
 const settings = computed(() => props.model?.settings);
+const localizationPrefix = computed(() => settings.value?.localizationPrefix.trim().toUpperCase());
 const title = computed(() => t(settings.value?.titleTemplate as string));
 const allSelected = ref(false);
 const searchValue = ref();
@@ -216,7 +219,6 @@ const selectedItemId = shallowRef();
 const sort = shallowRef("createdDate:DESC");
 const selectedIds = shallowRef<string[]>([]);
 const itemsProxy = ref<Record<string, any>[]>();
-const modified = shallowRef(false);
 
 const { moduleNotifications, markAsRead } = useNotifications(settings.value?.pushNotificationType);
 const { setNavigationQuery, getNavigationQuery } = useBladeNavigation();
@@ -241,7 +243,10 @@ const tableData =
   props.composables &&
   computed(() => props.model?.content.find((type: ListContentSchema) => type.component === "vc-table"));
 
-const tableColsWithLocales = tableData?.value?.columns?.map((col) => ({ ...col, title: computed(() => t(col.title)) }));
+const tableColsWithLocales = tableData?.value?.columns?.map((col) => ({
+  ...col,
+  title: computed(() => t(col.title)),
+})) as ITableColumns[];
 
 const stateKey =
   props.composables &&
@@ -347,12 +352,6 @@ const toolbarComputed =
     useToolbarReducer({
       defaultToolbarSchema: settings.value?.toolbar ?? [],
       defaultToolbarBindings: {
-        save: {
-          clickHandler() {
-            emit("close:blade");
-          },
-          disabled: computed(() => !modified.value),
-        },
         openAddBlade: {
           async clickHandler() {
             if (
@@ -397,14 +396,6 @@ watch(
   { immediate: true },
 );
 
-watch(
-  () => itemsProxy.value,
-  (newVal) => {
-    modified.value = !_.isEqual(newVal, items.value);
-  },
-  { deep: true },
-);
-
 watch(sort, async (value) => {
   await load({ ...query.value, sort: value });
 });
@@ -430,7 +421,22 @@ const openDetailsBlade = async () => {
 
 const onItemClick = (item: { [x: string]: any; id?: string }) => {
   if (!props.isWidgetView) {
-    if (scope && safeIn("openDetailsBlade", toValue(scope)) && typeof toValue(scope).openDetailsBlade === "function") {
+    // TODO Add to docs
+    if (scope && safeIn("onListItemClick", toValue(scope)) && typeof toValue(scope).onListItemClick === "function") {
+      toValue(scope).onListItemClick?.({
+        item,
+        onOpen() {
+          selectedItemId.value = item.id;
+        },
+        onClose() {
+          selectedItemId.value = undefined;
+        },
+      });
+    } else if (
+      scope &&
+      safeIn("openDetailsBlade", toValue(scope)) &&
+      typeof toValue(scope).openDetailsBlade === "function"
+    ) {
       toValue(scope).openDetailsBlade?.({
         param: item.id,
         onOpen() {
@@ -441,12 +447,6 @@ const onItemClick = (item: { [x: string]: any; id?: string }) => {
         },
       });
     }
-
-    if (scope && safeIn("onListItemClick", toValue(scope)) && typeof toValue(scope).onListItemClick === "function") {
-      toValue(scope).onListItemClick?.({
-        item,
-      });
-    }
   } else {
     emit("item-click", { param: item.id });
   }

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

@@ -8,7 +8,7 @@
     >
       <span>{{ label }}</span>
     </VcLabel>
-    <div class="tw-relative tw-inline-block tw-w-[54px] tw-h-[18px]">
+    <div class="tw-relative tw-inline-block tw-w-[32px] tw-h-[18px]">
       <label>
         <input
           type="checkbox"
@@ -63,11 +63,9 @@ function onInput(e: Event) {
 <style lang="scss">
 :root {
   --switch-main-color: #43b0e6;
-  --switch-secondary-color: #565656;
+  --switch-secondary-color: #d2d4d7;
   --switch-transition: all 0.2s ease-in-out;
   --switch-icon-transition: opacity 0.3s ease-in-out;
-  --switch-active-icon: url("data:image/svg+xml;utf8,<svg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M3.73609 7.34288L0.161085 3.85628C-0.0536949 3.64681 -0.0536949 3.30718 0.161085 3.09769L0.938884 2.3391C1.15366 2.12961 1.50193 2.12961 1.71671 2.3391L4.125 4.68782L8.28329 0.657101C8.49807 0.447633 8.84634 0.447633 9.06112 0.657101L9.83892 1.41569C10.0537 1.62516 10.0537 1.96479 9.83892 2.17428L4.51391 7.3429C4.29911 7.55237 3.95087 7.55237 3.73609 7.34288Z' fill='white'/></svg>");
-  --switch-disabled-icon: url("data:image/svg+xml;utf8,<svg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5.51636 4L7.79068 1.72568C8.06977 1.44659 8.06977 0.994091 7.79068 0.714773L7.28523 0.209318C7.00614 -0.0697727 6.55364 -0.0697727 6.27432 0.209318L4 2.48364L1.72568 0.209318C1.44659 -0.0697727 0.994091 -0.0697727 0.714773 0.209318L0.209318 0.714773C-0.0697727 0.993864 -0.0697727 1.44636 0.209318 1.72568L2.48364 4L0.209318 6.27432C-0.0697727 6.55341 -0.0697727 7.00591 0.209318 7.28523L0.714773 7.79068C0.993864 8.06977 1.44659 8.06977 1.72568 7.79068L4 5.51636L6.27432 7.79068C6.55341 8.06977 7.00614 8.06977 7.28523 7.79068L7.79068 7.28523C8.06977 7.00614 8.06977 6.55364 7.79068 6.27432L5.51636 4Z' fill='white'/></svg>");
 }
 
 .vc-switch {
@@ -75,11 +73,11 @@ function onInput(e: Event) {
     @apply tw-w-0 tw-h-0 tw-opacity-0;
 
     &:checked + .vc-switch__slider:before {
-      @apply tw-translate-x-[29px];
+      @apply tw-translate-x-[14px];
     }
 
     &:checked + .vc-switch__slider {
-      @apply tw-bg-[color:var(--switch-main-color)] after:tw-bg-[image:var(--switch-active-icon)] after:tw-bg-[position:10px] after:tw-bg-[length:10px_7px];
+      @apply tw-bg-[color:var(--switch-main-color)] after:tw-bg-[position:10px] after:tw-bg-[length:10px_7px];
     }
 
     &:disabled + .vc-switch__slider {
@@ -88,14 +86,10 @@ function onInput(e: Event) {
   }
 
   &__slider {
-    @apply tw-absolute tw-top-0 tw-right-0 tw-bottom-0 tw-left-0 tw-bg-[color:var(--switch-secondary-color)] tw-rounded-[3px] tw-cursor-pointer tw-transition  tw-duration-200;
-
-    &:after {
-      @apply tw-inline-block tw-w-full tw-h-full tw-bg-[image:var(--switch-disabled-icon)] tw-bg-[position:calc(100%-11px)] tw-bg-no-repeat tw-bg-[length:8px_8px] tw-content-[""];
-    }
+    @apply tw-absolute tw-top-0 tw-right-0 tw-bottom-0 tw-left-0 tw-bg-[color:var(--switch-secondary-color)] tw-rounded-[9999px] tw-cursor-pointer tw-transition  tw-duration-200 tw-shadow-[inset_0px_2px_4px_rgba(0,0,0,0.1)];
 
     &:before {
-      @apply tw-absolute tw-bottom-px tw-left-px tw-flex tw-justify-center tw-items-center tw-w-[23px] tw-h-[16px] tw-bg-white tw-rounded-sm tw-text-[color:#d2d2d2] tw-text-[10px] tw-transition  tw-duration-200 tw-content-["|||"];
+      @apply tw-absolute tw-bottom-px tw-left-px tw-flex tw-justify-center tw-items-center tw-w-[16px] tw-h-[16px] tw-bg-white tw-rounded-[9999px] tw-text-[color:#d2d2d2] tw-text-[10px] tw-transition tw-shadow-[0_2px_4px_rgba(0,0,0,0.1)] tw-duration-200 tw-content-[""];
     }
   }
 }

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

@@ -70,7 +70,7 @@ function onClick() {
   }
 
   &__title {
-    @apply tw-font-medium tw-text-sm tw-text-[#333333] tw-mt-3 tw-mb-1 tw-mx-0;
+    @apply tw-font-medium tw-text-sm tw-text-[#333333] tw-mt-3 tw-mb-1 tw-mx-0 tw-text-center;
   }
 
   &_disabled &__title {

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

@@ -34,6 +34,7 @@
       </template>
     </VcBladeHeader>
 
+    <!-- Show error message -->
     <template v-if="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
@@ -50,6 +51,19 @@
       </div>
     </template>
 
+    <!-- Unsaved changes -->
+    <template v-if="hasUnsavedChanges">
+      <div
+        class="tw-text-white tw-px-2 tw-py-1 tw-flex tw-flex-row tw-items-center tw-bg-[color:var(--blade-color-unsaved-changes)]"
+      >
+        <VcIcon
+          size="s"
+          icon="fas fa-info-circle"
+        />
+        <div class="tw-line-clamp-1 tw-w-full tw-ml-2">{{ t("COMPONENTS.ORGANISMS.VC_BLADE.UNSAVED_CHANGES") }}</div>
+      </div>
+    </template>
+
     <!-- Set up blade toolbar -->
     <VcBladeToolbar
       class="tw-shrink-0"
@@ -78,6 +92,7 @@ export interface Props {
   expandable?: boolean;
   closable?: boolean;
   toolbarItems?: IBladeToolbar[];
+  hasUnsavedChanges?: boolean;
 }
 
 export interface Emits {
@@ -123,6 +138,7 @@ const { open } = usePopup({
   --blade-background-color: #ffffff;
   --blade-border-radius: 6px;
   --blade-color-error: #f14e4e;
+  --blade-color-unsaved-changes: #82a6bd;
 }
 
 .vc-app_mobile .vc-blade {

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

@@ -629,7 +629,7 @@ const mobileTemplateRenderer = ({ item }: { item: TableItem }) => {
       { class: "tw-border-b tw-border-solid tw-border-b-[#e3e7ec] tw-p-3 tw-gap-2 tw-flex tw-flex-wrap" },
       props.columns.map((x) => {
         return h("div", { class: "tw-grow tw-w-[33%] tw-ml-3  tw-truncate" }, [
-          h(VcHint, { class: "tw-mb-1 tw-truncate" }, toValue(x.title)),
+          h(VcHint, { class: "tw-mb-1 tw-truncate" }, () => toValue(x.title)),
           h(VcTableCell, { cell: { ...x, class: "!tw-justify-start" }, item, class: "" }),
         ]);
       }),