@vc-shell/framework 1.0.290 → 1.0.292

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>

package/shared/pages/InvitePage/components/invite/Invite.vue

@@ -1,23 +1,24 @@
 <template>
-  <div class="vc-app tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-m-0 vc-theme_light">
+  <div class="vc-invite-page">
     <VcLoading
       v-if="loading"
       active
     ></VcLoading>
 
     <VcLoginForm
-      logo="/assets/logo-white.svg"
-      background="/assets/background.jpg"
+      :logo="customization.logo"
+      :background="background"
       :title="t('INVITATION.TITLE')"
     >
       <VcForm>
         <VcInput
-          class="tw-mb-4 tw-mt-1"
+          class="vc-invite-page__input"
           :label="t('INVITATION.FIELDS.EMAIL.LABEL')"
           :model-value="userName"
           name="username"
           disabled
         ></VcInput>
+
         <Field
           v-slot="{ field, errorMessage, handleChange, errors }"
           :label="t('INVITATION.FIELDS.PASSWORD.LABEL')"
@@ -29,7 +30,7 @@
             v-bind="field"
             ref="passwordField"
             v-model="form.password"
-            class="tw-mb-4 tw-mt-1"
+            class="vc-invite-page__input"
             :label="t('INVITATION.FIELDS.PASSWORD.LABEL')"
             :placeholder="t('INVITATION.FIELDS.PASSWORD.PLACEHOLDER')"
             type="password"
@@ -45,6 +46,7 @@
             "
           ></VcInput>
         </Field>
+
         <Field
           v-slot="{ field, errorMessage, handleChange, errors }"
           :label="t('INVITATION.FIELDS.CONFIRM_PASSWORD.LABEL')"
@@ -56,7 +58,7 @@
             v-bind="field"
             ref="confirmPasswordField"
             v-model="form.confirmPassword"
-            class="tw-mb-4"
+            class="vc-invite-page__input--small"
             :label="t('INVITATION.FIELDS.CONFIRM_PASSWORD.LABEL')"
             :placeholder="t('INVITATION.FIELDS.CONFIRM_PASSWORD.PLACEHOLDER')"
             :disabled="!form.tokenIsValid"
@@ -73,10 +75,11 @@
             @keyup.enter="acceptInvitation"
           ></VcInput>
         </Field>
-        <div class="tw-flex tw-justify-center tw-items-center tw-pt-2">
+
+        <div class="vc-invite-page__button-container">
           <span
             v-if="$isDesktop.value"
-            class="tw-grow tw-basis-0"
+            class="vc-invite-page__spacer"
           ></span>
           <vc-button
             :disabled="loading || !form.isValid || !form.tokenIsValid"
@@ -89,7 +92,7 @@
         <VcHint
           v-for="error in form.errors"
           :key="error"
-          class="tw-mt-3"
+          class="vc-invite-page__hint"
           style="color: #f14e4e"
         >
           <!-- TODO: stylizing-->
@@ -104,22 +107,31 @@
 import { reactive, onMounted, computed } from "vue";
 import { useRouter } from "vue-router";
 import { useIsFormValid, Field, useIsFormDirty, useForm } from "vee-validate";
-import { useUser } from "./../../../../../core/composables";
+import { useUser, useSettings } from "./../../../../../core/composables";
 import { useI18n } from "vue-i18n";
 
 useForm({ validateOnMount: false });
 
-const props = defineProps<{
-  userId: string;
-  userName: string;
-  token: string;
-}>();
+const props = withDefaults(
+  defineProps<{
+    userId: string;
+    userName: string;
+    token: string;
+    logo: string;
+    background: string;
+  }>(),
+  {
+    background: "/assets/background.jpg",
+    logo: "/assets/logo-white.svg",
+  },
+);
 
 const { validateToken, validatePassword, resetPasswordByToken, signIn, loading } = useUser();
 const router = useRouter();
 const { t } = useI18n({ useScope: "global" });
 const isFormValid = useIsFormValid();
 const isDirty = useIsFormDirty();
+const { uiSettings, loading: customizationLoading } = useSettings();
 const form = reactive<{
   isValid: boolean;
   tokenIsValid: boolean;
@@ -169,4 +181,36 @@ const acceptInvitation = async () => {
     form.errors = result.errors as string[];
   }
 };
+
+const customization = computed(() => {
+  return {
+    logo: !customizationLoading.value ? uiSettings.value?.logo || props.logo : "",
+  };
+});
 </script>
+
+<style lang="scss">
+.vc-invite-page {
+  @apply tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-m-0;
+}
+
+.vc-invite-page__input {
+  @apply tw-mb-4 tw-mt-1;
+}
+
+.vc-invite-page__input--small {
+  @apply tw-mb-4;
+}
+
+.vc-invite-page__button-container {
+  @apply tw-flex tw-justify-center tw-items-center tw-pt-2;
+}
+
+.vc-invite-page__spacer {
+  @apply tw-grow tw-basis-0;
+}
+
+.vc-invite-page__hint {
+  @apply tw-mt-3;
+}
+</style>

package/shared/pages/LoginPage/components/login/Login.vue

@@ -3,6 +3,7 @@
     :logo="customization.logo"
     :background="background"
     :title="title"
+    class="vc-login-page"
   >
     <template v-if="isLogin">
       <VcForm @submit.prevent="login">
@@ -16,7 +17,7 @@
           <VcInput
             ref="loginField"
             v-model="form.username"
-            class="tw-mb-4 tw-mt-1"
+            class="vc-login-page__input"
             :label="t('LOGIN.FIELDS.LOGIN.LABEL')"
             :placeholder="t('LOGIN.FIELDS.LOGIN.PLACEHOLDER')"
             required
@@ -35,7 +36,7 @@
           <VcInput
             ref="passwordField"
             v-model="form.password"
-            class="tw-mb-4"
+            class="vc-login-page__input--small"
             :label="t('LOGIN.FIELDS.PASSWORD.LABEL')"
             :placeholder="t('LOGIN.FIELDS.PASSWORD.PLACEHOLDER')"
             type="password"
@@ -49,7 +50,7 @@
 
         <div
           v-if="!!forgotPassword"
-          class="tw-flex tw-justify-end tw-items-center tw-pt-2"
+          class="vc-login-page__forgot-password-container"
         >
           <VcButton
             text
@@ -59,10 +60,10 @@
             {{ t("LOGIN.FORGOT_PASSWORD_BUTTON") }}
           </VcButton>
         </div>
-        <div class="tw-flex tw-justify-center tw-items-center tw-pt-2">
+        <div class="vc-login-page__button-container">
           <vc-button
             :disabled="loading || !isValid"
-            class="tw-w-28"
+            class="vc-login-page__submit-button"
             @click="login"
           >
             {{ t("LOGIN.BUTTON") }}
@@ -71,28 +72,27 @@
       </VcForm>
       <div
         v-if="loginProviders && loginProviders.length"
-        class="tw-mt-4"
+        class="vc-login-page__separator"
       >
-        <div
-          class="tw-flex tw-items-center tw-text-center tw-uppercase tw-text-[color:var(--separator-text)] before:tw-content-[''] before:tw-flex-1 before:tw-border-b before:tw-border-b-[color:var(--separator)] before:tw-mr-2 after:tw-content-[''] after:tw-flex-1 after:tw-border-b after:tw-border-b-[color:var(--separator)] after:tw-ml-2"
-        >
+        <div class="vc-login-page__separator-line">
           <!-- TODO add to localization -->
           OR
         </div>
-        <div class="tw-flex tw-justify-center tw-mt-4 tw-flex-wrap tw-gap-2">
+        <div class="vc-login-page__external-buttons">
           <VcButton
             v-for="external in loginProviders"
             :key="external.authenticationType"
             outline
             @click="externalSignOn(external.authenticationType ?? '')"
-            ><div class="tw-flex tw-flex-row tw-items-center">
+          >
+            <div class="vc-login-page__external-button-content">
               <img
                 :src="externalAuthIcon(external.authenticationType ?? '')"
                 :alt="external.authenticationType"
-                class="tw-h-5 tw-mr-2"
+                class="vc-login-page__external-icon"
               />{{ external.displayName }}
-            </div></VcButton
-          >
+            </div>
+          </VcButton>
         </div>
       </div>
     </template>
@@ -110,7 +110,7 @@
               v-bind="field"
               ref="forgotPasswordField"
               v-model="forgotPasswordForm.loginOrEmail"
-              class="tw-mb-4 tw-mt-1"
+              class="vc-login-page__input"
               :label="t('LOGIN.FIELDS.FORGOT_PASSWORD.LABEL')"
               :placeholder="t('LOGIN.FIELDS.FORGOT_PASSWORD.PLACEHOLDER')"
               :hint="t('LOGIN.RESET_EMAIL_TEXT')"
@@ -120,7 +120,7 @@
               @update:model-value="handleChange"
             ></VcInput>
           </Field>
-          <div class="tw-flex tw-justify-between tw-items-center tw-pt-2">
+          <div class="vc-login-page__forgot-form-buttons">
             <vc-button
               text
               type="button"
@@ -140,10 +140,10 @@
 
       <template v-if="requestPassResult.succeeded && forgotPasswordRequestSent">
         <div>{{ t("LOGIN.RESET_EMAIL_SENT") }}</div>
-        <div class="tw-flex tw-justify-center tw-items-center tw-pt-2">
+        <div class="vc-login-page__button-container">
           <span
             v-if="$isDesktop.value"
-            class="tw-grow tw-basis-0"
+            class="vc-login-page__spacer"
           ></span>
           <vc-button
             :disabled="loading"
@@ -157,7 +157,7 @@
 
     <VcHint
       v-if="!signInResult.succeeded"
-      class="tw-mt-3"
+      class="vc-login-page__error-hint"
       style="color: #f14e4e"
     >
       <!-- TODO: stylizing-->
@@ -165,7 +165,7 @@
     </VcHint>
     <VcHint
       v-if="!requestPassResult.succeeded"
-      class="tw-mt-3"
+      class="vc-login-page__error-hint"
       style="color: #f14e4e"
     >
       <!-- TODO: stylizing-->
@@ -173,6 +173,7 @@
     </VcHint>
   </VcLoginForm>
 </template>
+
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { ref, reactive, computed, onMounted, Ref } from "vue";
@@ -313,7 +314,62 @@ console.debug("Init login-page");
 
 <style lang="scss">
 :root {
-  --separator: #d3dbe9;
-  --separator-text: #83a3be;
+  --login-separator: var(--secondary-200);
+  --login-separator-text: var(--primary-300);
+  --login-error: var(--base-error-color, var(--danger-500));
+}
+
+.vc-login-page {
+  &__input {
+    @apply tw-mb-4 tw-mt-1;
+  }
+
+  &__input--small {
+    @apply tw-mb-4;
+  }
+
+  &__forgot-password-container {
+    @apply tw-flex tw-justify-end tw-items-center tw-pt-2;
+  }
+
+  &__button-container {
+    @apply tw-flex tw-justify-center tw-items-center tw-pt-2;
+  }
+
+  &__submit-button {
+    @apply tw-w-28;
+  }
+
+  &__separator {
+    @apply tw-mt-4;
+  }
+
+  &__separator-line {
+    @apply tw-flex tw-items-center tw-text-center tw-uppercase tw-text-[color:var(--login-separator-text)] before:tw-content-[''] before:tw-flex-1 before:tw-border-b before:tw-border-b-[color:var(--login-separator)] before:tw-mr-2 after:tw-content-[''] after:tw-flex-1 after:tw-border-b after:tw-border-b-[color:var(--login-separator)] after:tw-ml-2;
+  }
+
+  &__external-buttons {
+    @apply tw-flex tw-justify-center tw-mt-4 tw-flex-wrap tw-gap-2;
+  }
+
+  &__external-button-content {
+    @apply tw-flex tw-flex-row tw-items-center;
+  }
+
+  &__external-icon {
+    @apply tw-h-5 tw-mr-2;
+  }
+
+  &__error-hint {
+    @apply tw-mt-3 tw-text-[color:var(--login-error)];
+  }
+
+  &__forgot-form-buttons {
+    @apply tw-flex tw-justify-between tw-items-center tw-pt-2;
+  }
+
+  &__spacer {
+    @apply tw-grow tw-basis-0;
+  }
 }
 </style>