@vc-shell/framework 1.1.30 → 1.1.34

package/shared/components/error-interceptor/interceptor.ts

@@ -1,44 +1,48 @@
-import { useErrorHandler } from "./../../../core/composables";
-import { defineComponent, VNode } from "vue";
-
-export interface Props {
-  capture?: boolean;
-}
-
-export interface Emits {
-  (event: "error", value: string): void;
-  (event: "reset"): void;
-}
-
-export type Slots = {
-  slots: {
-    default: (args: { error: string | null; reset: () => void }) => VNode[];
-  };
-};
-
-export default defineComponent({
-  name: "ErrorInterceptor",
-  props: {
-    capture: {
-      default: false,
-      type: Boolean,
-    },
-  },
-  emits: {
-    error(value: Error | string) {
-      return (value && value instanceof Error) || typeof value === "string";
-    },
-    reset(): boolean {
-      return true;
-    },
-  },
-  setup(props, { slots }) {
-    const { error, reset } = useErrorHandler(props.capture);
-
-    return () =>
-      slots.default?.({
-        error: error.value,
-        reset,
-      });
-  },
-});
+import { useErrorHandler } from "./../../../core/composables";
+import { defineComponent, VNode } from "vue";
+
+// This is an internal type used within useErrorHandler now.
+// We are re-exporting a similar structure for clarity in components that use it.
+export type DisplayableError = Error & { details?: string };
+
+export interface Props {
+  capture?: boolean;
+}
+
+export interface Emits {
+  (event: "error", value: DisplayableError): void;
+  (event: "reset"): void;
+}
+
+export type Slots = {
+  slots: {
+    default: (args: { error: DisplayableError | null; reset: () => void }) => VNode[];
+  };
+};
+
+export default defineComponent({
+  name: "ErrorInterceptor",
+  props: {
+    capture: {
+      default: false,
+      type: Boolean,
+    },
+  },
+  emits: {
+    error(value: Error) {
+      return value instanceof Error;
+    },
+    reset(): boolean {
+      return true;
+    },
+  },
+  setup(props, { slots }) {
+    const { error, reset } = useErrorHandler(props.capture);
+
+    return () =>
+      slots.default?.({
+        error: error.value,
+        reset,
+      });
+  },
+});

package/shared/components/index.ts

@@ -15,3 +15,4 @@ export * from "./settings-menu-item";
 export * from "./generic-dropdown";
 export * from "./draggable-dashboard";
 export * from "./dashboard-widget-card";
+export * from "./multilanguage-selector";

package/shared/components/multilanguage-selector/index.ts

@@ -0,0 +1 @@
+export { default as VcLanguageSelector } from "./multilanguage-selector.vue";

package/shared/components/multilanguage-selector/multilanguage-selector.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="vc-language-selector">
+    <GenericDropdown
+      :opened="isOpened"
+      :items="options"
+      :floating="true"
+      placement="bottom-end"
+      :offset="{ mainAxis: 10, crossAxis: -15 }"
+      :disabled="disabled"
+      :empty-text="t('common.no_options', 'No options')"
+      :is-item-active="(item: any) => item.value === modelValue"
+      @item-click="onItemClick"
+      @update:opened="isOpened = $event"
+    >
+      <template #trigger>
+        <div
+          class="tw-flex tw-cursor-pointer tw-items-center tw-justify-center tw-bg-[--primary-100] tw-w-8 tw-h-8 tw-rounded-full hover:tw-bg-[--primary-200]"
+          @click="onTriggerClick"
+        >
+          <VcImage
+            :src="currentLanguageOption?.flag"
+            class="tw-w-6 tw-h-6"
+            empty-icon=""
+          />
+        </div>
+      </template>
+      <template #item="{ item }">
+        <div class="tw-flex tw-items-center tw-gap-2 tw-p-2">
+          <VcImage
+            :src="item.flag"
+            class="tw-w-6 tw-h-6"
+            empty-icon=""
+          />
+          <span class="tw-text-sm">{{ item.label }}</span>
+        </div>
+      </template>
+      <template #empty>
+        <div class="tw-p-2 tw-text-sm">
+          {{ t("common.no_options", "No options") }}
+        </div>
+      </template>
+    </GenericDropdown>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, h, ref, type PropType } from "vue";
+import { VcImage } from "../../../ui/components";
+import { GenericDropdown } from "../../../shared/components";
+import { useI18n } from "vue-i18n";
+
+type LanguageOption = {
+  value: string;
+  label: string;
+  flag?: string;
+};
+
+const props = defineProps({
+  options: {
+    type: Array as PropType<LanguageOption[]>,
+    default: () => [],
+  },
+  modelValue: {
+    type: String,
+    default: "",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const { t } = useI18n({ useScope: "global" });
+const isOpened = ref(false);
+
+const currentLanguageOption = computed(() => {
+  return props.options.find((option) => option.value === props.modelValue);
+});
+
+const onTriggerClick = () => {
+  if (props.disabled) return;
+  isOpened.value = !isOpened.value;
+};
+
+const onItemClick = (item: LanguageOption) => {
+  isOpened.value = false;
+  emit("update:modelValue", item.value);
+};
+
+// // We use a computed property to build the dropdown via render function `h`.
+// // This is because the old implementation in `dynamic-blade-form` used this pattern,
+// // and it's a powerful way to construct complex components with custom slots programmatically.
+// const dropdownComponent = computed(() => {
+//   return h(
+//     GenericDropdown,
+//     {
+//       opened: isOpened.value,
+//       items: props.options,
+//       floating: true,
+//       placement: "bottom-end",
+//       offset: { mainAxis: 10, crossAxis: -15 },
+//       variant: "secondary",
+//       disabled: props.disabled,
+//       emptyText: t("common.no_options", "No options"),
+//       isItemActive: (item: any) => item.value === props.modelValue,
+//       onItemClick: (item: any) => {
+//         isOpened.value = false;
+//         emit("update:modelValue", item.value);
+//       },
+//       "onUpdate:opened": (state: boolean) => {
+//         isOpened.value = state;
+//       },
+//     },
+//     {
+//       // Custom trigger slot: a circular button with the current language's flag
+//       trigger: () =>
+//         h(
+//           "div",
+//           {
+//             onClick: () => {
+//               if (props.disabled) return;
+//               isOpened.value = !isOpened.value;
+//             },
+//             class: [
+//               "tw-flex tw-cursor-pointer tw-items-center tw-justify-center tw-bg-[--primary-100]",
+//               "tw-w-8 tw-h-8 tw-rounded-full hover:tw-bg-[--primary-200]",
+//               { "tw-cursor-not-allowed tw-opacity-50": props.disabled },
+//             ],
+//           },
+//           [h(VcImage, { src: currentLanguageOption.value?.flag, class: "tw-w-6 tw-h-6", emptyIcon: "" })],
+//         ),
+//       // Custom item slot: a row with the flag and language name
+//       item: ({ item }: { item: any }) =>
+//         h("div", { class: "tw-flex tw-items-center tw-gap-2 tw-p-2" }, [
+//           h(VcImage, { src: item.flag, class: "tw-w-6 tw-h-6", emptyIcon: "" }),
+//           h("span", { class: "tw-text-sm" }, item.label),
+//         ]),
+//       empty: () => h("div", { class: "tw-p-2 tw-text-sm" }, t("common.no_options", "No options")),
+//     },
+//   );
+// });
+</script>

package/shared/composables/index.ts

@@ -1 +1,2 @@
-export * from "./useMenuExpanded";
+export * from "./useMenuExpanded";
+export * from "./useModificationTracker";

package/shared/composables/useModificationTracker/index.ts

@@ -0,0 +1,93 @@
+import { ref, watch, Ref, computed, DeepReadonly, unref, isRef } from "vue";
+import { cloneDeep, isEqual } from "lodash-es";
+
+/**
+ * Return values from useModificationTracker.
+ * @template T Type of the tracked value.
+ */
+export interface UseModificationTrackerReturn<T> {
+  /**
+   * Reactive reference to the current tracked value.
+   * It can be changed directly or through v-model.
+   */
+  currentValue: Ref<T>;
+  /**
+   * Shows if currentValue has been modified compared to its "pristine" state.
+   * Read-only.
+   */
+  isModified: DeepReadonly<Ref<boolean>>;
+  /**
+   * Resets the modification state.
+   * The new "pristine" state will be set based on the current value of currentValue,
+   * or based on `newBaselineValue` if provided.
+   * `isModified` will become false.
+   * @param newBaselineValue Optional new value (or Ref) that will become "pristine".
+   */
+  resetModificationState: (newBaselineValue?: T | Ref<T>) => void;
+}
+
+/**
+ * Composable for tracking value changes (including deeply nested objects).
+ *
+ * @template T Type of the tracked value.
+ * @param initialValueProp Initial value or Ref to it.
+ * @returns {UseModificationTrackerReturn<T>} Object with `currentValue`, `isModified` and `resetModificationState`.
+ */
+export function useModificationTracker<T>(initialValueProp: T | Ref<T>): UseModificationTrackerReturn<T> {
+  const getClonedUnreffedValue = (val: T | Ref<T>): T => cloneDeep(unref(val));
+
+  const pristineValue = ref(getClonedUnreffedValue(initialValueProp)) as Ref<T>;
+  const currentValue = ref(getClonedUnreffedValue(initialValueProp)) as Ref<T>;
+  const isModified = ref(false);
+
+  if (isRef(initialValueProp)) {
+    watch(
+      initialValueProp,
+      (newExternalInitialValue) => {
+        // When the external initialValueProp (Ref) changes,
+        // we need to decide if we should update currentValue.
+        const wasModified = !isEqual(currentValue.value, pristineValue.value);
+
+        // Always update the "pristine" value (pristineValue), to reflect the new external source.
+        pristineValue.value = cloneDeep(newExternalInitialValue);
+
+        // If the user has not made any changes until this point,
+        // we also update currentValue.
+        // This prevents false triggering of isModified when loading data asynchronously.
+        if (!wasModified) {
+          currentValue.value = cloneDeep(newExternalInitialValue);
+        }
+        // If the user has already made changes (wasModified = true), we do not update currentValue,
+        // to not overwrite their changes. isModified will remain true, because
+        // currentValue will now be different from the new pristineValue.
+      },
+      { deep: true }, // Deep tracking, if initialValueProp is a Ref to an object/array
+    );
+  }
+
+  watch(
+    [currentValue, pristineValue], // Track changes in currentValue or pristineValue
+    ([newCurrentVal, newPristineVal]) => {
+      isModified.value = !isEqual(newCurrentVal, newPristineVal);
+    },
+    { deep: true },
+  );
+
+  const resetModificationState = (newBaselineValueInput?: T | Ref<T>) => {
+    if (newBaselineValueInput !== undefined) {
+      const newClonedBase = getClonedUnreffedValue(newBaselineValueInput);
+      pristineValue.value = newClonedBase;
+      currentValue.value = cloneDeep(newClonedBase); // Reset currentValue to the new baseline
+    } else {
+      pristineValue.value = cloneDeep(currentValue.value);
+    }
+    // isModified will be updated by the watcher above, but for immediate synchronization you can do this:
+    // isModified.value = false; // This will happen automatically due to the watch on [currentValue, pristineValue]
+  };
+
+  return {
+    currentValue,
+    isModified: computed(() => isModified.value),
+    resetModificationState,
+  };
+}

package/shared/index.ts

@@ -20,3 +20,4 @@ export const SharedModule = {
 export * from "./modules";
 export * from "./components";
 export * from "./pages";
+export * from "./composables";

package/ui/components/atoms/index.ts

@@ -17,3 +17,4 @@ export * from "./vc-video";
 export * from "./vc-widget";
 export * from "./vc-tooltip";
 export * from "./vc-skeleton";
+export * from "./vc-banner";

package/ui/components/atoms/vc-banner/index.ts

@@ -0,0 +1 @@
+export { default as VcBanner } from "./vc-banner.vue";

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

@@ -0,0 +1,138 @@
+<template>
+  <div
+    class="vc-banner"
+    :class="[`vc-banner_${variant}`]"
+  >
+    <div class="vc-banner__container">
+      <VcIcon
+        v-if="icon"
+        :icon="icon"
+        :size="iconSize"
+        :variant="iconVariant"
+        class="vc-banner__icon"
+      />
+      <div class="vc-banner__wrapper">
+        <div class="vc-banner__title">
+          <slot name="title"></slot>
+        </div>
+        <div
+          ref="contentRef"
+          class="vc-banner__content"
+          :class="[
+            {
+              'tw-max-h-[100px] tw-line-clamp-4': !isExpanded,
+              'tw-max-h-full': isExpanded,
+            },
+          ]"
+        >
+          <slot name="default"></slot>
+        </div>
+        <div v-if="hasOverflow">
+          <slot
+            name="trigger"
+            :is-expanded="isExpanded"
+            :toggle="toggle"
+          >
+            <VcButton
+              class="tw-self-end"
+              text
+              @click="toggle"
+            >
+              {{ isExpanded ? $t("COMPONENTS.ATOMS.VC_BANNER.SHOW_LESS") : $t("COMPONENTS.ATOMS.VC_BANNER.SHOW_MORE") }}
+            </VcButton>
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<script lang="ts" setup>
+import { onMounted, ref } from "vue";
+import { VcIcon } from "..";
+
+// TODO: Add to docs
+
+type StatusVariant = "info" | "warning" | "danger" | "success" | "light-danger" | "info-dark" | "primary";
+
+export interface Props {
+  variant?: StatusVariant;
+  icon?: string;
+  iconSize?: InstanceType<typeof VcIcon>["$props"]["size"];
+  iconVariant?: InstanceType<typeof VcIcon>["$props"]["variant"];
+}
+
+defineSlots<{
+  title: (props: any) => any;
+  default: (props: any) => any;
+  trigger: (props: any) => any;
+}>();
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: "info",
+  iconSize: "xxl",
+});
+
+const contentRef = ref<HTMLDivElement>();
+const isExpanded = ref(false);
+const hasOverflow = ref(false);
+
+const toggle = () => {
+  isExpanded.value = !isExpanded.value;
+};
+
+const checkOverflow = () => {
+  if (contentRef.value) {
+    hasOverflow.value = contentRef.value.scrollHeight > 100;
+  }
+};
+
+onMounted(() => {
+  checkOverflow();
+});
+</script>
+
+<style lang="scss">
+:root {
+  --banner-text-color: var(--neutrals-700);
+}
+$variants: info, warning, danger, success, light-danger, info-dark, primary;
+
+.vc-banner {
+  @apply tw-whitespace-normal tw-justify-start tw-max-w-full tw-border-none;
+
+  border-radius: var(--status-border-radius-extended);
+  padding: var(--status-padding-extended);
+
+  @each $variant in $variants {
+    &.vc-banner_#{$variant} {
+      background-color: var(--status-#{$variant}-bg-color);
+      color: var(--status-#{$variant}-color);
+
+      .vc-banner__content {
+        color: var(--status-#{$variant}-color);
+      }
+    }
+  }
+
+  &__wrapper {
+    @apply tw-flex tw-flex-col tw-text-start;
+  }
+
+  &__container {
+    @apply tw-flex tw-flex-row tw-items-center;
+  }
+
+  &__title {
+    @apply tw-font-bold;
+  }
+
+  &__content {
+    @apply tw-overflow-hidden tw-truncate tw-text-[color:var(--banner-text-color)] tw-font-medium tw-text-xs;
+  }
+
+  &__icon {
+    @apply tw-mr-3;
+  }
+}
+</style>

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

@@ -36,6 +36,7 @@
       <div
         v-show="!isCollapsedInternal"
         :class="[{ 'tw-flex': fill }, 'vc-card__body']"
+        v-bind="$attrs"
       >
         <slot></slot>
       </div>
@@ -70,6 +71,11 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
+defineOptions({
+  name: "VcCard",
+  inheritAttrs: false,
+});
+
 defineSlots<{
   default: (props?: any) => any;
   actions: (props?: any) => any;

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

@@ -25,7 +25,8 @@
     <label class="vc-checkbox__container">
       <input
         ref="checkboxRef"
-        v-model="value"
+        v-model="model"
+        :value="value"
         type="checkbox"
         class="vc-checkbox__input"
         :disabled="disabled"
@@ -90,6 +91,7 @@ import { VcLabel } from "../../atoms/vc-label";
 
 export interface Props {
   modelValue: MaybeRef<boolean>;
+  value?: any;
   disabled?: boolean;
   required?: boolean;
   name?: string;
@@ -124,7 +126,7 @@ defineSlots<{
 
 const checkboxRef = ref<HTMLInputElement | null>(null);
 
-const value = computed({
+const model = computed({
   get() {
     return unref(props.modelValue);
   },
@@ -134,7 +136,11 @@ const value = computed({
 });
 
 const checked = computed(() => {
-  return value.value === props.trueValue;
+  const modelVal = unref(props.modelValue);
+  if (Array.isArray(modelVal)) {
+    return modelVal.includes(props.value);
+  }
+  return modelVal === props.trueValue;
 });
 
 // Managing indeterminate state

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

@@ -23,7 +23,10 @@
         @backlink:click="closeBlade(blades.length - 1)"
         @logo:click="openRoot"
       >
-        <template #app-switcher>
+        <template
+          v-if="!disableAppSwitcher"
+          #app-switcher
+        >
           <slot name="app-switcher">
             <VcAppSwitcher
               :apps-list="appsList"
@@ -95,6 +98,7 @@ import { provideMenuService } from "../../../../core/composables/useMenuService"
 import { BellIcon } from "../../atoms/vc-icon/icons";
 import { provideAppBarMobileButtonsService } from "../../../../core/composables/useAppBarMobileButtons";
 import { useUserManagement } from "../../../../core/composables/useUserManagement";
+import { BladeRegistryKey } from "../../../../core/composables/useBladeRegistry";
 
 export interface Props {
   isReady: boolean;
@@ -104,6 +108,7 @@ export interface Props {
   avatar?: string;
   name?: string;
   disableMenu?: boolean;
+  disableAppSwitcher?: boolean;
   role?: string;
 }