@vc-shell/framework 1.0.290 → 1.0.291

package/shared/components/user-dropdown-button/user-dropdown-button.vue

@@ -1,72 +1,83 @@
 <template>
-  <div
-    v-on-click-outside="onClose"
-    class="user-dropdown-button"
-    :class="{
-      'user-dropdown-button_active': accountMenuVisible,
-      'tw-w-auto': disabled,
-    }"
-    @click.stop="toggleAccountMenuVisible"
+  <AppBarButtonTemplate
+    position="bottom-start"
+    :before-open="beforeOpen"
   >
-    <div class="user-dropdown-button__wrap tw-flex tw-justify-between tw-items-center tw-flex-auto">
+    <template #button="{ opened }">
       <div
-        v-if="avatarUrl"
-        class="user-dropdown-button__avatar"
-        :style="imageHandler"
-      ></div>
-      <VcIcon
-        v-else
-        icon="fas fa-user-circle"
-        size="xxl"
-        class="tw-text-[color:var(--app-bar-button-color)]"
-      />
-      <div class="tw-grow tw-basis-0 tw-ml-3 tw-overflow-hidden">
-        <div class="user-dropdown-button__name tw-truncate">
-          {{ name || user?.userName }}
-        </div>
-        <div class="user-dropdown-button__role">
-          {{
-            (role && $t(`SHELL.USER.ROLE.${role}`)) ||
-            (user?.isAdministrator ? $t("SHELL.USER.ROLE.ADMINISTRATOR") : "")
-          }}
-        </div>
-      </div>
-      <div
-        v-if="!disabled && menu && menu.length"
-        class="user-dropdown-button__chevron"
+        class="vc-user-dropdown-button"
+        :class="{
+          'vc-user-dropdown-button--active': opened,
+          'vc-user-dropdown-button--auto-width': disabled,
+        }"
       >
-        <VcIcon
-          icon="fas fa-chevron-down"
-          size="xl"
-        ></VcIcon>
+        <div
+          class="vc-user-dropdown-button__wrap"
+          :class="{
+            'vc-user-dropdown-button__wrap--active': opened,
+          }"
+        >
+          <div
+            v-if="avatarUrl"
+            class="vc-user-dropdown-button__avatar"
+            :style="imageHandler"
+          ></div>
+          <VcIcon
+            v-else
+            icon="fas fa-user-circle"
+            size="xxl"
+            class="vc-user-dropdown-button__icon"
+          />
+          <div class="vc-user-dropdown-button__info">
+            <div class="vc-user-dropdown-button__name">
+              {{ name || user?.userName }}
+            </div>
+            <div class="vc-user-dropdown-button__role">
+              {{
+                (role && $t(`SHELL.USER.ROLE.${role}`)) ||
+                (user?.isAdministrator ? $t("SHELL.USER.ROLE.ADMINISTRATOR") : "")
+              }}
+            </div>
+          </div>
+          <div
+            v-if="!disabled && menu && menu.length"
+            class="vc-user-dropdown-button__chevron"
+          >
+            <VcIcon
+              icon="fas fa-chevron-down"
+              size="xl"
+            ></VcIcon>
+          </div>
+        </div>
       </div>
-    </div>
-    <div
-      v-if="menu && accountMenuVisible"
-      class="user-dropdown-button__menu"
-      @click.stop="accountMenuVisible = false"
-    >
+    </template>
+    <template #dropdown-content="{ opened, toggle }">
       <div
-        v-for="(item, i) in menu"
-        :key="`menu_item_${i}`"
-        class="user-dropdown-button__menu-item tw-group"
-        @click="item.hasOwnProperty('clickHandler') ? item.clickHandler?.() : null"
+        v-if="menu && opened"
+        class="vc-user-dropdown-button__menu"
+        @click.stop="toggle"
       >
-        <VcIcon
-          v-if="item.icon"
-          :icon="item.icon"
-          size="l"
-          class="tw-mr-3 tw-text-[color:var(--app-bar-button-color)] group-hover:tw-text-[color:var(--app-bar-button-color-hover)]"
-        ></VcIcon>
-        <p>{{ item.title }}</p>
+        <div
+          v-for="(item, i) in menu"
+          :key="`menu_item_${i}`"
+          class="vc-user-dropdown-button__menu-item"
+          @click="item.hasOwnProperty('clickHandler') ? item.clickHandler?.() : null"
+        >
+          <VcIcon
+            v-if="item.icon"
+            :icon="item.icon"
+            size="l"
+            class="vc-user-dropdown-button__menu-icon"
+          ></VcIcon>
+          <p>{{ item.title }}</p>
+        </div>
       </div>
-    </div>
-  </div>
+    </template>
+  </AppBarButtonTemplate>
 </template>
 
 <script lang="ts" setup>
 import { computed, ref } from "vue";
-import { vOnClickOutside } from "@vueuse/components";
 import { useUser } from "../../../core/composables";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
@@ -75,6 +86,7 @@ import { BladeMenu } from "../../../core/types";
 import { usePopup } from "../popup-handler/composables/usePopup";
 import { ChangePassword } from "../change-password";
 import { useBladeNavigation } from "..";
+import { AppBarButtonTemplate } from "./../app-bar-button";
 
 export interface Props {
   avatarUrl?: string | undefined;
@@ -96,7 +108,7 @@ const { open } = usePopup({
   component: ChangePassword,
 });
 const { closeBlade } = useBladeNavigation();
-const accountMenuVisible = ref(false);
+
 const defaultMenuItems = ref([
   {
     title: t("SHELL.ACCOUNT.CHANGE_PASSWORD"),
@@ -135,15 +147,9 @@ function handleDefaultMenuItems() {
   return defaultMenuItems.value;
 }
 
-const toggleAccountMenuVisible = () => {
-  if (!props.disabled && menu.value && menu.value.length) {
-    accountMenuVisible.value = !accountMenuVisible.value;
-  }
-};
-
-const onClose = () => {
-  accountMenuVisible.value = false;
-};
+function beforeOpen() {
+  return !props.disabled && menu.value?.length > 0;
+}
 
 const imageHandler = computed(() => {
   if (props.avatarUrl) {
@@ -154,53 +160,96 @@ const imageHandler = computed(() => {
 </script>
 
 <style lang="scss">
-.user-dropdown-button {
-  @apply tw-w-[240px] tw-border-l tw-border-solid tw-border-l-[color:var(--app-bar-divider-color)] tw-px-4 tw-cursor-pointer
-    tw-relative tw-flex tw-h-full tw-flex-col tw-select-none;
+:root {
+  --user-dropdown-account-info-name-color: var(--base-text-color, var(--neutrals-950));
+  --user-dropdown-account-info-role-color: var(--secondary-600);
+  --user-dropdown-divider-color: var(--base-border-color, var(--neutrals-200));
+  --user-dropdown-border-color: var(--app-bar-divider-color);
+  --user-dropdown-button-color: var(--primary-500);
+  --user-dropdown-button-color-hover: var(--primary-700);
+  --user-dropdown-menu-item-bg-hover: var(--primary-50);
+  --user-dropdown-menu-item-bg: var(--additional-50);
+  --user-dropdown-menu-text-color: var(--additional-950);
+  --user-dropdown-chevron-color: var(--secondary-600);
+  --user-dropdown-chevron-color-hover: var(--secondary-700);
+  --user-dropdown-wrap-bg: var(--additional-50);
+}
+
+.vc-user-dropdown-button {
+  @apply tw-w-[240px] tw-border-l tw-border-solid tw-border-l-[color:var(--user-dropdown-border-color)]  tw-cursor-pointer
+  tw-relative tw-flex tw-h-full tw-flex-col tw-select-none;
+
+  .vc-app_mobile & {
+    @apply tw-w-full #{!important};
+  }
+
+  &--auto-width {
+    @apply tw-w-auto;
+  }
 
-  &:hover,
-  &_active {
-    @apply tw-bg-[color:var(--app-bar-toolbar-icon-background-hover)];
+  &__wrap {
+    @apply tw-flex tw-justify-between tw-items-center tw-flex-auto tw-px-4 tw-bg-[--user-dropdown-wrap-bg];
   }
 
   &__avatar {
-    @apply tw-rounded-full tw-overflow-hidden tw-w-[34px] tw-h-[34px] tw-bg-[color:var(--app-bar-account-info-role-color)]
-      tw-bg-cover tw-bg-center tw-shrink-0;
+    @apply tw-rounded-full tw-overflow-hidden tw-w-[34px] tw-h-[34px] tw-bg-[color:var(--user-dropdown-account-info-role-color)]
+    tw-bg-cover tw-bg-center tw-shrink-0;
+  }
+
+  &__icon {
+    @apply tw-text-[color:var(--user-dropdown-button-color)];
+  }
+
+  &__info {
+    @apply tw-grow tw-basis-0 tw-ml-3 tw-overflow-hidden;
   }
 
   &__name {
-    @apply tw-text-base tw-text-[color:var(--app-bar-account-info-name-color)];
+    @apply tw-text-sm tw-text-[color:var(--user-dropdown-account-info-name-color)] tw-truncate;
   }
 
   &__role {
-    @apply tw-text-base tw-text-[color:var(--app-bar-account-info-role-color)];
+    @apply tw-text-sm tw-text-[color:var(--user-dropdown-account-info-role-color)];
   }
 
   &__chevron {
-    @apply tw-text-[#7e8e9d] [transition:color_0.2s_ease];
+    @apply tw-text-[color:var(--user-dropdown-chevron-color)] tw-transition-colors tw-duration-200;
   }
 
   &:hover &__chevron {
-    @apply tw-text-[color:#34414f];
+    @apply tw-text-[color:var(--user-dropdown-chevron-color-hover)];
   }
 
-  &_active &__chevron {
+  &--active &__chevron {
     @apply -tw-scale-y-100;
   }
 
   &__menu {
-    @apply tw-absolute -tw-left-px tw-right-0 tw-top-[var(--app-bar-height)] tw-bg-white tw-z-[10000] tw-shadow-[0_-6px_6px_white,1px_1px_22px_rgba(126,142,157,0.2)];
+    @apply tw-w-full;
 
     &-item {
-      @apply tw-p-3 tw-text-lg tw-text-black tw-border-l tw-border-solid tw-border-l-[#eef0f2] tw-border-b tw-border-b-[#eef0f2] tw-bg-white hover:tw-bg-[#eff7fc] tw-flex tw-flex-row tw-items-center;
+      @apply tw-p-3 tw-text-sm tw-text-[color:var(--user-dropdown-menu-text-color)] tw-border-solid tw-border-b tw-border-b-[color:var(--user-dropdown-divider-color)] tw-bg-[color:var(--user-dropdown-menu-item-bg)] tw-flex tw-flex-row tw-items-center tw-cursor-pointer;
+      transition: background-color 0.2s;
+
+      &:hover {
+        @apply tw-bg-[color:var(--user-dropdown-menu-item-bg-hover)];
+
+        .vc-user-dropdown-button__menu-icon {
+          @apply tw-text-[color:var(--user-dropdown-button-color-hover)];
+        }
+      }
+
+      &:last-of-type {
+        @apply tw-border-b-0;
+      }
     }
   }
 
-  .vc-app_mobile & {
-    &__wrap {
-      height: var(--app-bar-height);
-    }
+  &__menu-icon {
+    @apply tw-mr-3 tw-text-[color:var(--user-dropdown-button-color)];
+  }
 
+  .vc-app_mobile & {
     &__menu {
       @apply tw-static tw-shadow-none #{!important};
     }
@@ -208,6 +257,10 @@ const imageHandler = computed(() => {
     &__menu-item {
       @apply tw-border-none #{!important};
     }
+
+    &__wrap--active {
+      @apply tw-shadow-none;
+    }
   }
 }
 </style>

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

@@ -10,7 +10,7 @@
     @collapse="$emit('collapse:blade')"
   >
     <!-- Blade contents -->
-    <div class="tw-flex tw-grow-1 tw-border-t tw-border-solid tw-border-t-[#eaedf3]">
+    <div class="tw-flex tw-grow-1 tw-border-t tw-border-solid tw-border-t-[--assets-details-border]">
       <div class="assets-details__content tw-grow tw-basis-0 tw-w-full">
         <VcContainer :no-padding="true">
           <div class="tw-p-4">
@@ -27,7 +27,7 @@
                 <template v-else>
                   <VcIcon
                     :icon="getFileThumbnail(defaultAsset.name)"
-                    class="tw-text-[#a9bfd2] tw-text-[128px] tw-shrink-0"
+                    class="tw-text-[color:var(--assets-details-thumbnail-color)] tw-text-[128px] tw-shrink-0"
                   ></VcIcon>
                 </template>
                 <VcCol class="tw-ml-6">
@@ -217,3 +217,10 @@ function openLink(link: string | undefined) {
   location.href = link;
 }
 </script>
+
+<style lang="scss">
+:root {
+  --assets-details-border: var(--base-border-color, var(--neutrals-200));
+  --assets-details-thumbnail-color: var(--secondary-500);
+}
+</style>

package/shared/modules/assets-manager/components/assets-manager/assets-manager.vue

@@ -38,15 +38,15 @@
             <template v-if="!readonly">
               <VcIcon
                 icon="fas fa-cloud-upload-alt"
-                class="tw-text-[100px] tw-text-[#41afe6]"
+                class="tw-text-[100px] tw-text-[color:var(--assets-manager-empty-icon-color)]"
               ></VcIcon>
-              <div class="tw-m-4 tw-text-xl tw-font-medium tw-text-center">
+              <div class="tw-m-4 tw-text-l tw-font-medium tw-text-center">
                 {{ t("ASSETS_MANAGER.EMPTY.UPLOAD_ASSETS") }}
               </div>
               <VcButton @click="toggleUploader">{{ t("ASSETS_MANAGER.EMPTY.UPLOAD") }}</VcButton>
             </template>
             <template v-else>
-              <div class="tw-m-4 tw-text-xl tw-font-medium tw-text-center">
+              <div class="tw-m-4 tw-text-l tw-font-medium tw-text-center">
                 {{ t("ASSETS_MANAGER.EMPTY.NO_ASSETS") }}
               </div>
             </template>
@@ -75,7 +75,7 @@
             <template v-else>
               <VcIcon
                 :icon="getFileThumbnail(item.name ?? '')"
-                class="tw-text-[#a9bfd2] tw-text-[38px]"
+                class="tw-text-[color:var(--assets-manager-thumbnail-color)] tw-text-[38px]"
               ></VcIcon>
             </template>
           </div>
@@ -90,7 +90,9 @@
 
         <!-- Mobile -->
         <template #mobile-item="{ item }">
-          <div class="tw-border-b tw-border-solid tw-border-b-[#e3e7ec] tw-p-3 tw-flex tw-flex-nowrap">
+          <div
+            class="tw-border-b tw-border-solid tw-border-b-[--assets-manager-mobile-border] tw-p-3 tw-flex tw-flex-nowrap"
+          >
             <template v-if="isImage(item.name ?? '')">
               <VcImage
                 :bordered="true"
@@ -104,7 +106,7 @@
               <div class="tw-w-12 tw-flex tw-items-center tw-justify-center">
                 <VcIcon
                   :icon="getFileThumbnail(item.name ?? '')"
-                  class="tw-text-[#a9bfd2] tw-w-12 tw-text-[48px]"
+                  class="tw-text-[color:var(--assets-manager-thumbnail-color)] tw-w-12 tw-text-[48px]"
                 ></VcIcon>
               </div>
             </template>
@@ -404,3 +406,11 @@ defineExpose({
   title: t("ASSETS_MANAGER.TITLE"),
 });
 </script>
+
+<style lang="scss">
+:root {
+  --assets-manager-empty-icon-color: var(--primary-400);
+  --assets-manager-thumbnail-color: var(--secondary-500);
+  --assets-manager-mobile-border: var(--info-100);
+}
+</style>

package/shared/modules/dynamic/composables/useFilterBuilder/index.ts

@@ -349,7 +349,7 @@ export default <Query>(args: {
               title
                 ? h(
                     "div",
-                    { class: "tw-mb-4 tw-text-[#a1c0d4] tw-font-bold tw-text-[17px]" },
+                    { class: "tw-mb-4 tw-text-[color:var(--secondary-500)] tw-font-bold tw-text-[17px]" },
                     unref(computed(() => t(title))),
                   )
                 : undefined,

package/shared/modules/dynamic/helpers/nodeBuilder.ts

@@ -147,7 +147,7 @@ function nodeBuilder<
     "data-test-id": controlSchema.id,
     classNames:
       "horizontalSeparator" in controlSchema && controlSchema.horizontalSeparator
-        ? "tw-border-b tw-border-solid tw-border-b-[#e5e5e5] tw-mb-[5px] tw-pb-[21px]"
+        ? "tw-border-b tw-border-solid tw-border-b-[var(--base-border-color, var(--neutrals-200))] tw-mb-[5px] tw-pb-[21px]"
         : "",
   });
 

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

@@ -382,6 +382,10 @@ defineExpose({
 </script>
 
 <style lang="scss">
+:root {
+  --dynamic-form-decline-color: var(--danger-500);
+  --dynamic-form-mobile-border: var(--primary-100);
+}
 .item-details {
   &__inner {
     @apply tw-overflow-hidden tw-min-h-full tw-flex tw-grow tw-basis-0;
@@ -392,7 +396,7 @@ defineExpose({
   }
 
   &__decline-icon {
-    @apply tw-text-[#ff4a4a] tw-mr-3;
+    @apply tw-text-[color:var(--dynamic-form-decline-color)] tw-mr-3;
   }
 
   .vc-app_mobile &__inner {
@@ -400,7 +404,7 @@ defineExpose({
   }
 
   .vc-app_mobile &__content {
-    @apply tw-border-r-0 tw-border-b tw-border-solid tw-border-b-[#eaedf3] tw-overflow-visible;
+    @apply tw-border-r-0 tw-border-b tw-border-solid tw-border-b-[--dynamic-form-mobile-border] tw-overflow-visible;
   }
 }
 </style>

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

@@ -26,7 +26,7 @@
     </template>
     <template v-else>
       <div
-        v-if="!isWidgetView && scope?.breadcrumbs"
+        v-if="!isWidgetView && toValue(scope?.breadcrumbs)?.length"
         :class="[
           {
             '-tw-mb-4': typeof tableData?.header === 'undefined' || tableData.header,
@@ -46,9 +46,10 @@
         :expanded="expanded"
         :total-label="$t(`${localizationPrefix}.PAGES.LIST.TABLE.TOTALS`)"
         :active-filter-count="activeFilterCount"
+        :disable-filter="filterDisable"
       >
         <template
-          v-if="isFilterVisible"
+          v-if="isFilterVisible && bladeOptions.tableData?.filter"
           #filters="{ closePanel }"
         >
           <filterComponent :close="closePanel" />
@@ -302,6 +303,19 @@ sort.value = query.value.sort ?? "createdDate:DESC";
 
 const unreffedScope = reactiveComputed(() => toValue(scope) ?? {});
 
+const filterDisable = computed(() => {
+  if (tableData?.value?.filter?.disabled?.method) {
+    const disableFilterMethod = toValue(unreffedScope)?.[tableData?.value?.filter?.disabled.method];
+
+    if (disableFilterMethod && typeof disableFilterMethod === "function") {
+      return disableFilterMethod();
+    } else {
+      return toValue(disableFilterMethod);
+    }
+  }
+  return false;
+});
+
 const { tableTemplates } = useTableTemplates(tableData);
 
 const calculateColumns = (columns: ListContentSchema["columns"]) => {

package/shared/modules/dynamic/types/index.ts

@@ -1103,6 +1103,9 @@ export type ControlSchema =
   | RadioButtonSchema;
 
 export interface FilterBase {
+  disabled?: {
+    method: string;
+  };
   columns: {
     /**
      * @deprecated use 'label' in 'controls' instead

package/shared/pages/ChangePasswordPage/components/change-password/ChangePassword.vue

@@ -1,31 +1,36 @@
 <template>
   <div
-    class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center"
+    class="vc-change-password"
     :style="backgroundImageHandler"
   >
-    <ChangePassComponent :forced="forced"> </ChangePassComponent>
+    <ChangePassComponent :forced="forced" />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed } from "vue";
 import { useRouter } from "vue-router";
+import { ChangePassword as ChangePassComponent } from "../../../../components/change-password";
 
 const router = useRouter();
 
 const forced = router.currentRoute.value.meta?.forced as boolean | undefined;
-const bgimage = router.currentRoute.value.meta?.bgimage;
-
-import { ChangePassword as ChangePassComponent } from "../../../../components/change-password";
 
 export interface Props {
-  background?: string;
-  userName?: string;
+  background: string;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  background: "/assets/background.jpg",
+});
 
 const backgroundImageHandler = computed(() => {
-  return `background: url(${bgimage}) center / cover no-repeat`;
+  return `background: url(${props.background}) center / cover no-repeat`;
 });
 </script>
+
+<style lang="scss">
+.vc-change-password {
+  @apply tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center;
+}
+</style>