@vc-shell/framework 1.0.133 → 1.0.135

package/ui/components/molecules/vc-input-currency/index.ts

@@ -1,18 +1 @@
-import { VNode } from "vue";
-import _InputCurrency from "./vc-input-currency.vue";
-
-export const VcInputCurrency = _InputCurrency as typeof _InputCurrency & {
-  new (): {
-    $slots: {
-      /**
-       * Slot for custom dropdown open handler
-       */
-      button?: (scope: {
-        /**
-         * Dropdown open/close handler
-         */
-        toggleHandler: () => void;
-      }) => VNode[];
-    };
-  };
-};
+export { default as VcInputCurrency } from "./vc-input-currency.vue";

package/ui/components/molecules/vc-input-currency/vc-input-currency.vue

@@ -166,6 +166,19 @@ const props = withDefaults(defineProps<Props>(), {
   debounce: 0,
 });
 
+defineSlots<{
+  /**
+   * Slot for custom dropdown open handler
+   */
+  button: (scope: {
+    /**
+     * Dropdown open/close handler
+     */
+    toggleHandler: () => void;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  }) => any;
+}>();
+
 const emit = defineEmits<Emits>();
 
 const { inputRef, setOptions, numberValue } = useCurrencyInput(

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

@@ -41,7 +41,9 @@
           class="vc-multivalue__field-value"
         >
           <span class="tw-truncate">{{
-            type === "number" ? Number(item[props.emitLabel as keyof T]).toFixed(3) : item[props.emitLabel as keyof T]
+            type === "number"
+              ? Number(item[props.optionLabel as keyof T]).toFixed(3)
+              : item[props.optionLabel as keyof T]
           }}</span>
           <VcIcon
             v-if="!disabled"
@@ -118,11 +120,12 @@
   </div>
 </template>
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<script lang="ts" setup generic="T extends { id?: string; alias?: string; languageCode?: string; value?: string }">
+<script lang="ts" setup generic="T extends { id?: string }">
 import { unref, nextTick, ref, computed } from "vue";
 import { vOnClickOutside } from "@vueuse/components";
 import { useFloating, UseFloatingReturn, offset, flip, shift, autoUpdate, MiddlewareState } from "@floating-ui/vue";
 import { generateId } from "../../../../core/utilities";
+import * as _ from "lodash-es";
 
 export interface Props<T> {
   placeholder?: string;
@@ -136,8 +139,6 @@ export interface Props<T> {
   options?: T[];
   optionValue?: string;
   optionLabel?: string;
-  emitValue?: string;
-  emitLabel?: string;
   multivalue?: boolean;
   error?: boolean;
   errorMessage?: string;
@@ -169,8 +170,6 @@ const props = withDefaults(defineProps<Props<T>>(), {
   options: () => [],
   optionValue: "id",
   optionLabel: "title",
-  emitValue: "valueId",
-  emitLabel: "value",
 });
 
 const emit = defineEmits<Emits<T>>();
@@ -207,30 +206,24 @@ const dropdownStyle = computed(() => {
 
 const slicedDictionary = computed(() => {
   return props.options?.filter((x) => {
-    return !props.modelValue?.find((item) => item[props.emitValue as keyof T] === x[props.optionValue as keyof T]);
+    return !props.modelValue?.find((item) => {
+      return item[props.optionValue as keyof T] === x[props.optionValue as keyof T];
+    });
   });
 });
 
-// Handle input event to propertly validate value and emit changes
 function onInput(e: KeyboardEvent) {
   const newValue = (e.target as HTMLInputElement).value;
-  emit("update:model-value", [
-    ...props.modelValue,
-    { [props.emitLabel]: newValue, languageCode: props.currentLanguage } as T,
-  ]);
+  emit("update:model-value", [...props.modelValue, { [props.optionLabel]: newValue } as T]);
   value.value = undefined;
 }
 
 function onItemSelect(item: T) {
-  emit("update:model-value", [
-    ...props.modelValue,
-    { [props.emitValue]: item[props.optionValue as keyof T], [props.emitLabel]: item[props.optionLabel as keyof T] },
-  ] as T[]);
+  emit("update:model-value", [...props.modelValue, item]);
   emit("close");
   closeDropdown();
 }
 
-// Handle event to propertly remove particular value and emit changes
 function onDelete(i: number) {
   const result = unref(props.modelValue);
   result.splice(i, 1);

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

@@ -6,14 +6,18 @@
     @mouseenter="onMouseEnter"
     @mouseleave="onMouseLeave"
   >
-    <VcIcon
-      :icon="types[type ?? 'default']?.icon"
-      :style="{ color: types[type ?? 'default']?.color }"
-      size="l"
-      class="tw-mr-2"
-    ></VcIcon>
-    <div class="tw-text-[color:var(--notification-content-color)] tw-whitespace-pre-line">
-      {{ content }}
+    <div class="tw-flex tw-flex-row tw-items-center">
+      <VcIcon
+        :icon="types[type ?? 'default']?.icon"
+        :style="{ color: types[type ?? 'default']?.color }"
+        size="l"
+        class="tw-mr-2"
+      ></VcIcon>
+      <div
+        class="vc-notification__content tw-text-[color:var(--notification-content-color)] tw-whitespace-pre-line tw-overflow-auto tw-max-h-[100px]"
+      >
+        {{ content }}
+      </div>
     </div>
     <VcIcon
       icon="fas fa-times"
@@ -125,6 +129,11 @@ function onMouseLeave() {
   --notification-error: #ef796f;
   --notification-success: #87b563;
   --notification-info: #bdd1df;
+
+  --notification-scroll-color: #e1eff9;
+  --notification-scroll-color-hover: #cce4f5;
+  --notification-scroll-width: 8px;
+  --notification-scroll-shadow: 0 3px 2px rgba(0, 0, 0, 0.1) inset, 0 -3px 2px rgba(0, 0, 0, 0.1) inset;
 }
 
 .vc-notification {
@@ -133,5 +142,22 @@ function onMouseLeave() {
   .vc-app_mobile {
     @apply tw-max-w-[80%];
   }
+
+  &__content {
+    &::-webkit-scrollbar {
+      @apply tw-w-[var(--notification-scroll-width)] tw-bg-transparent;
+    }
+
+    &::-webkit-scrollbar-track {
+      @apply tw-bg-transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      @apply tw-bg-[color:var(--notification-scroll-color)]
+      tw-rounded-[calc(var(--notification-scroll-width)/2)]
+      tw-overflow-x-hidden
+      hover:tw-bg-[color:var(--notification-scroll-color-hover)];
+    }
+  }
 }
 </style>

package/ui/components/organisms/vc-dynamic-property/vc-dynamic-property.vue

@@ -67,7 +67,6 @@
         :option-label="multilanguage ? 'value' : 'alias'"
         option-value="id"
         :multivalue="computedProperty.multivalue"
-        :emit-label="multilanguage ? 'value' : 'alias'"
         @search="onSearch"
         @close="onClose"
       ></VcMultivalue>

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

@@ -1,3 +1 @@
-import _Gallery from "./vc-gallery.vue";
-
-export const VcGallery = _Gallery as typeof _Gallery;
+export { default as VcGallery } from "./vc-gallery.vue";