@vc-shell/framework 1.0.316 → 1.0.318

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

@@ -16,7 +16,7 @@
       v-if="bladeOptions"
       #actions
     >
-      <div class="tw-flex tw-flex-row tw-items-center tw-gap-3">
+      <div class="tw-flex tw-flex-row tw-items-center tw-gap-3 tw-max-w-1/2 tw-w-full">
         <template
           v-for="(value, key, index) in bladeOptions"
           :key="`blade-actions-slot-${key}-${index}`"
@@ -26,26 +26,40 @@
       </div>
     </template>
 
-    <VcContainer :no-padding="true">
+    <div class="blade-content-wrapper">
       <div
-        v-if="isReady && item && Object.keys(item)"
-        class="item-details__inner"
+        v-if="multilanguage.multilanguage"
+        class="language-selector-container"
       >
-        <div class="item-details__content">
-          <VcForm
-            ref="formItem"
-            class="tw-grow tw-p-4"
-          >
-            <SchemaRender
-              v-model="item"
-              :ui-schema="form.children"
-              :context="bladeContext as any"
-              :current-locale="toValue(unreffedScope)?.multilanguage?.currentLocale"
-            ></SchemaRender>
-          </VcForm>
-        </div>
+        <template
+          v-for="(value, key, index) in multilanguage"
+          :key="`blade-multilanguage-slot-${key}-${index}`"
+        >
+          <component :is="value" />
+        </template>
       </div>
-    </VcContainer>
+
+      <VcContainer :no-padding="true">
+        <div
+          v-if="isReady && item && Object.keys(item)"
+          class="item-details__inner"
+        >
+          <div class="item-details__content">
+            <VcForm
+              ref="formItem"
+              class="tw-grow tw-p-4"
+            >
+              <SchemaRender
+                v-model="item"
+                :ui-schema="form.children"
+                :context="bladeContext as any"
+                :current-locale="toValue(unreffedScope)?.multilanguage?.currentLocale"
+              ></SchemaRender>
+            </VcForm>
+          </div>
+        </div>
+      </VcContainer>
+    </div>
 
     <template
       v-if="item && bladeWidgets && bladeWidgets.length"
@@ -296,6 +310,12 @@ const bladeMultilanguage = reactiveComputed(() => {
             disabled: "disabled" in toValue(unreffedScope) && toValue(unreffedScope).disabled,
             required: true,
             clearable: false,
+            outline: false,
+            offset: {
+              mainAxis: -2,
+              crossAxis: -12,
+            },
+            placement: "bottom-end",
             "onUpdate:modelValue": (e: string) => {
               toValue(unreffedScope).multilanguage?.setLocale(e);
             },
@@ -307,6 +327,16 @@ const bladeMultilanguage = reactiveComputed(() => {
                   opt: { flag: string; label: string };
                 },
               ) => {
+                if (slot === "selected-item") {
+                  return h(
+                    "div",
+                    {
+                      class:
+                        "tw-flex tw-items-center tw-justify-center tw-bg-[--primary-500] tw-w-8 tw-h-8 tw-rounded-l-full",
+                    },
+                    [h(VcImage, { src: scope.opt.flag, class: "tw-w-6 tw-h-6", emptyIcon: "" })],
+                  );
+                }
                 return h("div", { class: "tw-flex tw-items-center tw-gap-2" }, [
                   h(VcImage, { src: scope.opt.flag, class: "tw-w-6 tw-h-6", emptyIcon: "" }),
                   h("span", { class: "tw-text-sm" }, scope.opt.label),
@@ -340,10 +370,13 @@ const bladeWidgets = computed(() => {
 });
 
 const bladeOptions = reactive({
-  multilanguage: bladeMultilanguage.component,
   status: bladeStatus,
 });
 
+const multilanguage = reactive({
+  multilanguage: bladeMultilanguage.component,
+});
+
 const toolbarComputed =
   (props.composables &&
     useToolbarReducer({
@@ -484,4 +517,22 @@ defineExpose({
     @apply tw-border-r-0 tw-border-b tw-border-solid tw-border-b-[--dynamic-form-mobile-border] tw-overflow-visible;
   }
 }
+
+.blade-content-wrapper {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+.language-selector-container {
+  position: absolute;
+  top: 0;
+  right: -5px;
+  z-index: 10;
+}
+
+.blade-scrollable-content {
+  height: 100%;
+  overflow-y: auto;
+}
 </style>

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

@@ -11,17 +11,17 @@ import {
   VcRating,
   VcStatus,
   VcPagination,
+  VcInputCurrency,
 } from "./../../../../ui/components";
 import { ITableColumns, IValidationRules, MenuItemConfig } from "../../../../core/types";
 import type { ComponentProps } from "./../../../utilities/vueUtils";
-import VcInputCurrency from "../../../../ui/components/molecules/vc-input-currency/vc-input-currency.vue";
 
 export type KeysOfUnion<T> = T extends T ? keyof T : never;
 
 export type Composable<T> = T[keyof T];
 
 export type DynamicSchema = DynamicGridSchema | DynamicDetailsSchema;
-type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+// type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
 type RequiredBy<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;
 
 export interface DynamicGridSchema {
@@ -495,6 +495,13 @@ export interface InputSchema extends SchemaBase {
    * Datepicker options.
    */
   datePickerOptions?: ComponentProps<typeof VcInput>["datePickerOptions"];
+  /**
+   * Whether the input is in loading state or not.
+   * @type {boolean}
+   */
+  loading?: {
+    method: string;
+  };
 }
 
 /**

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

@@ -155,7 +155,7 @@ function onMouseLeave() {
   }
 
   &__content {
-    @apply tw-text-[color:var(--notification-content-color)] tw-whitespace-pre-line tw-overflow-auto;
+    @apply tw-text-[color:var(--notification-content-color)] tw-whitespace-pre-line tw-overflow-auto tw-text-sm tw-leading-5;
     @apply tw-max-h-[100px];
   }
 

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

@@ -6,6 +6,7 @@
       'vc-select_error': error,
       'vc-select_disabled': disabled,
       'vc-select_has-hint-or-error': error || hint,
+      'vc-select_no-outline': !outline,
     }"
   >
     <!-- Select label -->
@@ -239,8 +240,9 @@
             ref="root"
             :no-padding="true"
           >
+            <div v-if="listLoading"></div>
             <div
-              v-if="!(optionsList && optionsList.length)"
+              v-else-if="!(optionsList && optionsList.length)"
               class="vc-select__no-options"
             >
               <slot name="no-options">
@@ -279,7 +281,16 @@ import { ref, computed, watch, nextTick, Ref, toRefs } from "vue";
 import { vOnClickOutside } from "@vueuse/components";
 import * as _ from "lodash-es";
 import { useIntersectionObserver } from "@vueuse/core";
-import { useFloating, UseFloatingReturn, offset, flip, shift, autoUpdate, MiddlewareState } from "@floating-ui/vue";
+import {
+  useFloating,
+  UseFloatingReturn,
+  offset as uiOffset,
+  flip,
+  shift,
+  autoUpdate,
+  MiddlewareState,
+  Placement,
+} from "@floating-ui/vue";
 import { VcLabel, VcContainer, VcHint, VcIcon } from "./../../";
 import { useI18n } from "vue-i18n";
 
@@ -484,6 +495,14 @@ const props = withDefaults(
     multilanguage?: boolean;
     currentLanguage?: string;
     size?: "default" | "small";
+    outline?: boolean;
+    placement?: Placement;
+    offset?:
+      | {
+          crossAxis?: number;
+          mainAxis?: number;
+        }
+      | number;
   }>(),
   {
     optionValue: "id",
@@ -495,6 +514,9 @@ const props = withDefaults(
     mapOptions: true,
     size: "default",
     options: (): T[] => [],
+    outline: true,
+    placement: "bottom",
+    offset: -2,
   },
 );
 
@@ -552,13 +574,13 @@ useIntersectionObserver(
 );
 
 const popper = useFloating(dropdownToggleRef, dropdownRef, {
-  placement: "bottom",
+  placement: props.placement,
   whileElementsMounted: autoUpdate,
   middleware: [
     flip({ fallbackPlacements: ["top", "bottom"] }),
     shift({ mainAxis: false }),
     sameWidthChangeBorders(),
-    offset(-2),
+    uiOffset(props.offset),
   ],
 }) as FloatingInstanceType;
 
@@ -611,22 +633,36 @@ watch(
 );
 
 watch(
-  options,
-  async () => {
-    if (props.options && typeof props.options === "function") {
-      try {
-        listLoading.value = true;
-        const data = await props.options();
-        optionsList.value = data.results as Option[];
-        totalItems.value = data.totalCount;
-      } finally {
-        listLoading.value = false;
+  isOpened,
+  async (newVal) => {
+    if (newVal && !optionsList.value.length) {
+      if (props.options && typeof props.options === "function") {
+        try {
+          listLoading.value = true;
+          const data = await props.options();
+          optionsList.value = data.results as Option[];
+          totalItems.value = data.totalCount;
+        } finally {
+          listLoading.value = false;
+        }
       }
-    } else if (props.options && Array.isArray(props.options)) {
-      optionsList.value = props.options as Option[];
+
+      optionsTemp.value = optionsList.value;
     }
+  },
+  { immediate: true },
+);
+
+watch(
+  options,
+  async (newVal) => {
+    if (newVal && !optionsList.value.length && typeof props.options !== "function") {
+      if (props.options && Array.isArray(props.options)) {
+        optionsList.value = props.options as Option[];
+      }
 
-    optionsTemp.value = optionsList.value;
+      optionsTemp.value = optionsList.value;
+    }
   },
   { immediate: true },
 );
@@ -836,12 +872,17 @@ function sameWidthChangeBorders() {
       return {
         x,
         y,
-        data: {
-          borderTop,
-          borderBottom,
-          borderRadius,
-          width,
-        },
+        data: props.outline
+          ? {
+              borderTop,
+              borderBottom,
+              borderRadius,
+              width,
+            }
+          : {
+              border: "1px solid var(--select-border-color)",
+              width: "max-content",
+            },
       };
     },
   };
@@ -964,6 +1005,17 @@ function onReset() {
 }
 
 .vc-select {
+  &_no-outline {
+    .vc-select__chevron-container {
+      display: none;
+    }
+
+    .vc-select__field {
+      border: none;
+      background-color: transparent !important;
+    }
+  }
+
   &__container {
     @apply tw-box-border tw-w-full;
   }

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

@@ -63,6 +63,7 @@
             <UserDropdownButton
               :avatar-url="avatar"
               :role="role"
+              :name="name"
             />
           </slot>
         </slot>
@@ -121,6 +122,7 @@ export interface Props {
   version?: string;
   title?: string;
   avatar?: string;
+  name?: string;
   disableMenu?: boolean;
   role?: string;
 }

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

@@ -52,7 +52,10 @@
       </div>
     </div>
 
-    <div v-if="$slots['actions']">
+    <div
+      v-if="$slots['actions']"
+      class="tw-w-auto tw-max-w-1/2"
+    >
       <slot name="actions"></slot>
     </div>
 

package/ui/components/organisms/vc-blade/vc-blade.stories.ts

@@ -74,7 +74,7 @@ export const ExpandableBlade: StoryFn<typeof VcBlade> = (args) => ({
   template: '<vc-blade v-bind="args" expandable @expand="expandBlade"><div class="p-4">Blade Contents</div></vc-blade>',
 });
 
-export const bladeWithoutToolbar: StoryFn<typeof VcBlade> = (args) => ({
+export const BladeWithoutToolbar: StoryFn<typeof VcBlade> = (args) => ({
   components: { VcBlade },
   setup() {
     return { args };

package/dist/external-providers-ooV6TgBS.js

@@ -1,4 +0,0 @@
-import { b as f } from "./index-BCwBSU0q.js";
-export {
-  f as default
-};

package/dist/shared/modules/dynamic/helpers/visibilityHandler.d.ts

@@ -1,4 +0,0 @@
-import { ControlSchema } from "./../types/index";
-import { ComputedRef } from "vue";
-export declare const visibilityHandler: (visibility: ComputedRef<boolean | undefined> | ((schema: ControlSchema, fieldContext: Record<string, any> | undefined) => boolean) | undefined, fieldContext: Record<string, any> | undefined, schema: ControlSchema) => boolean | undefined;
-//# sourceMappingURL=visibilityHandler.d.ts.map

package/dist/shared/modules/dynamic/helpers/visibilityHandler.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"visibilityHandler.d.ts","sourceRoot":"","sources":["../../../../../shared/modules/dynamic/helpers/visibilityHandler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,OAAO,EAAE,WAAW,EAAW,MAAM,KAAK,CAAC;AAE3C,eAAO,MAAM,iBAAiB,4DAGd,aAAa,gBAAgB,OAAO,MAAM,EAAE,GAAG,CAAC,GAAG,SAAS,KAAK,OAAO,6BAExE,OAAO,MAAM,EAAE,GAAG,CAAC,GAAG,SAAS,UACrC,aAAa,wBAWtB,CAAC"}