@vc-shell/framework 1.0.53 → 1.0.56

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

@@ -2,10 +2,7 @@
   <div
     class="vc-blade tw-relative tw-flex tw-shrink-0 tw-flex-col tw-bg-[color:var(--blade-background-color)] tw-rounded-[var(--blade-border-radius)] tw-shadow-[2px_2px_8px_rgba(126,142,157,0.14)] tw-my-4 tw-mx-2 tw-overflow-hidden tw-transition-[width] tw-duration-200"
     :style="{ width: typeof width === 'number' ? `${width}px` : width }"
-    :class="[
-      $attrs.class,
-      { '!tw-w-full !tw-shrink': $isMobile.value || expanded },
-    ]"
+    :class="[$attrs.class, { '!tw-w-full !tw-shrink': $isMobile.value || expanded }]"
   >
     <!-- Init blade header -->
     <VcBladeHeader
@@ -18,13 +15,19 @@
       :subtitle="subtitle"
       @close="$emit('close')"
     >
-      <template v-slot:actions v-if="$slots['actions']">
+      <template
+        v-slot:actions
+        v-if="$slots['actions']"
+      >
         <slot name="actions"></slot>
       </template>
     </VcBladeHeader>
 
     <!-- Set up blade toolbar -->
-    <VcBladeToolbar class="tw-shrink-0" :items="toolbarItems"></VcBladeToolbar>
+    <VcBladeToolbar
+      class="tw-shrink-0"
+      :items="toolbarItems"
+    ></VcBladeToolbar>
 
     <slot></slot>
   </div>
@@ -32,6 +35,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import { IBladeToolbar } from "../../../../core/types";
 
 export default defineComponent({
   inheritAttrs: false,
@@ -41,16 +45,29 @@ export default defineComponent({
 <script lang="ts" setup>
 import VcBladeHeader from "./_internal/vc-blade-header/vc-blade-header.vue";
 import VcBladeToolbar from "./_internal/vc-blade-toolbar/vc-blade-toolbar.vue";
-import { VcBladeProps } from "./vc-blade-model";
 
-withDefaults(defineProps<VcBladeProps>(), {
+export interface Props {
+  icon?: string;
+  title?: string;
+  subtitle?: string;
+  width?: number | string;
+  expanded?: boolean;
+  closable?: boolean;
+  toolbarItems?: IBladeToolbar[];
+  onClose?: () => void;
+}
+
+export interface Emits {
+  (event: "close"): void;
+}
+
+withDefaults(defineProps<Props>(), {
   width: "30%",
-  expanded: false,
   closable: true,
   toolbarItems: () => [],
 });
 
-defineEmits(["close"]);
+defineEmits<Emits>();
 </script>
 
 <style lang="scss">

package/ui/components/organisms/vc-dynamic-property/index.ts

@@ -1,7 +1,10 @@
-import { ComponentPublicInstance } from "vue";
-import { VcDynamicPropertyProps } from "./vc-dynamic-property-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers"
+import { VNode } from "vue";
 import DynamicProperty from "./vc-dynamic-property.vue";
-export const VcDynamicProperty: ComponentConstructor<
-  ComponentPublicInstance<VcDynamicPropertyProps>
-> = DynamicProperty;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcDynamicPropertySlots = {
+  default?: () => VNode[];
+};
+
+export const VcDynamicProperty: GlobalComponentConstructor<typeof DynamicProperty, VcDynamicPropertySlots> =
+  DynamicProperty;

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

@@ -1,10 +1,9 @@
 <template>
   <Field
-    v-if="
-      (property['dictionary'] || property['isDictionary']) && !property['multivalue']
-    "
+    v-if="(property.dictionary || property.isDictionary) && !property.multivalue"
     v-slot="{ errorMessage, handleChange, errors }"
-    :name="property['displayName'] || property['name']"
+    :label="handleDisplayName || property.displayName"
+    :name="property.displayName || property.name"
     :modelValue="getter(property, true)"
     :rules="rules"
   >
@@ -12,7 +11,7 @@
       v-bind="$attrs"
       :error="!!errors.length"
       :error-message="errorMessage"
-      :label="handleDisplayName || property['displayName']"
+      :label="handleDisplayName || property.displayName"
       :modelValue="getter(property, true)"
       @update:modelValue="
         (e) => {
@@ -20,8 +19,8 @@
           setter(property, e, items);
         }
       "
-      :required="property['required'] || property['isRequired']"
-      :placeholder="handleDisplayName || property['defaultValue']"
+      :required="property.required || property.isRequired"
+      :placeholder="handleDisplayName || property.defaultValue"
       :options="items"
       option-value="id"
       :option-label="handleDisplayProperty"
@@ -34,70 +33,72 @@
 
   <Field
     v-else-if="
-      property['valueType'] === 'ShortText' &&
-      property['multivalue'] &&
-      !(property['dictionary'] || property['isDictionary'])
+      property.valueType === 'ShortText' && property.multivalue && !(property.dictionary || property.isDictionary)
     "
-    v-slot="{ errorMessage, handleChange }"
-    :name="property['name']"
-    :modelValue="property['values']"
+    v-slot="{ errorMessage, handleChange, errors }"
+    :name="property.name"
+    :modelValue="property.values"
+    :label="handleDisplayName"
     :rules="rules"
   >
-    <VcMultivalue
+    <VcSelect
       v-bind="$attrs"
+      :error="!!errors.length"
       :error-message="errorMessage"
       :label="handleDisplayName"
-      :modelValue="property['values']"
+      :modelValue="property.values"
       @update:modelValue="
         (e) => {
           handleChange(e);
           setter(property, e);
         }
       "
-      :required="property['required'] || property['isRequired']"
+      :required="property.required || property.isRequired"
       placeholder="Add value"
       :disabled="disabled"
-    ></VcMultivalue>
+      :multiple="true"
+    ></VcSelect>
   </Field>
 
   <Field
     v-else-if="
-      property['valueType'] === 'ShortText' &&
-      property['multivalue'] &&
-      (property['dictionary'] || property['isDictionary'])
+      property.valueType === 'ShortText' && property.multivalue && (property.dictionary || property.isDictionary)
     "
-    v-slot="{ errorMessage, handleChange }"
-    :name="property['name']"
-    :modelValue="property['values']"
+    v-slot="{ errorMessage, handleChange, errors }"
+    :name="property.name"
+    :label="handleDisplayName"
+    :modelValue="property.values"
     :rules="rules"
   >
-    <VcMultivalue
+    <VcSelect
       v-bind="$attrs"
+      :error="!!errors.length"
       :error-message="errorMessage"
       :label="handleDisplayName"
-      :modelValue="property['values']"
+      :modelValue="property.values"
       @update:modelValue="
         (e) => {
           handleChange(e);
           setter(property, e, items);
         }
       "
-      :required="property['required'] || property['isRequired']"
+      :required="property.required || property.isRequired"
       placeholder="Add value"
-      :multivalue="property['multivalue']"
       :disabled="disabled"
       :options="items"
-      keyProperty="id"
-      displayProperty="alias"
+      option-label="alias"
+      option-value="id"
       @search="onSearch"
       @close="onClose"
-    ></VcMultivalue>
+      :multiple="property.multivalue"
+    ></VcSelect>
   </Field>
 
   <Field
-    v-else-if="property['valueType'] === 'ShortText'"
+    v-else-if="property.valueType === 'ShortText'"
     v-slot="{ errorMessage, handleChange, errors }"
-    :name="property['displayName'] || property['name']"
+    :name="property.displayName || property.name"
+    :label="handleDisplayName || property.displayName"
     :modelValue="getter(property)"
     :rules="rules"
   >
@@ -105,32 +106,33 @@
       v-bind="$attrs"
       :error="!!errors.length"
       :error-message="errorMessage"
-      :label="handleDisplayName || property['displayName']"
+      :label="handleDisplayName || property.displayName"
       :modelValue="(getter(property) as string | number | Date)"
       @update:modelValue="
         (e) => {
           handleChange(e);
-          setter(property, e);
+          setter(property, e as Record<string, unknown> | string | number | boolean);
         }
       "
       clearable
-      :required="property['required'] || property['isRequired']"
+      :required="property.required || property.isRequired"
       :placeholder="handleDisplayName || 'Add value'"
       :disabled="disabled"
     ></VcInput>
   </Field>
 
   <Field
-    v-else-if="property['valueType'] === 'Number' && property['multivalue']"
+    v-else-if="property.valueType === 'Number' && property.multivalue"
     v-slot="{ errorMessage, handleChange, errors }"
-    :name="property['name']"
-    :modelValue="property['values']"
+    :name="property.name"
+    :modelValue="property.values"
+    :label="handleDisplayName"
     :rules="rules"
   >
     <VcSelect
       v-bind="$attrs"
       :label="handleDisplayName"
-      :modelValue="property['values']"
+      :modelValue="property.values"
       @update:modelValue="
         (e) => {
           handleChange(e);
@@ -138,7 +140,7 @@
         }
       "
       type="number"
-      :required="property['required'] || property['isRequired']"
+      :required="property.required || property.isRequired"
       placeholder="Add value"
       :disabled="disabled"
       :error="!!errors.length"
@@ -151,9 +153,10 @@
   </Field>
 
   <Field
-    v-else-if="property['valueType'] === 'Number'"
+    v-else-if="property.valueType === 'Number'"
     v-slot="{ errorMessage, handleChange, errors }"
-    :name="property['name']"
+    :name="property.name"
+    :label="handleDisplayName"
     :modelValue="getter(property)"
     :rules="rules"
   >
@@ -166,21 +169,22 @@
       @update:modelValue="
         (e) => {
           handleChange(e);
-          setter(property, e);
+          setter(property, e as Record<string, unknown> | string | number | boolean);
         }
       "
       clearable
       type="number"
-      :required="property['required'] || property['isRequired']"
-      :placeholder="handleDisplayName || property['defaultValue']"
+      :required="property.required || property.isRequired"
+      :placeholder="handleDisplayName || property.defaultValue"
       :disabled="disabled"
     ></VcInput>
   </Field>
 
   <Field
-    v-else-if="property['valueType'] === 'Integer'"
+    v-else-if="property.valueType === 'Integer'"
     v-slot="{ errorMessage, handleChange, errors }"
-    :name="property['name']"
+    :name="property.name"
+    :label="handleDisplayName"
     :modelValue="getter(property)"
     :rules="rules"
   >
@@ -193,22 +197,23 @@
       @update:modelValue="
         (e) => {
           handleChange(e);
-          setter(property, e);
+          setter(property, e as Record<string, unknown> | string | number | boolean);
         }
       "
       clearable
       type="number"
       step="1"
-      :required="property['required'] || property['isRequired']"
-      :placeholder="handleDisplayName || property['defaultValue']"
+      :required="property.required || property.isRequired"
+      :placeholder="handleDisplayName || property.defaultValue"
       :disabled="disabled"
     ></VcInput>
   </Field>
 
   <Field
-    v-else-if="property['valueType'] === 'DateTime'"
+    v-else-if="property.valueType === 'DateTime'"
     v-slot="{ errorMessage, handleChange, errors }"
-    :name="property['name']"
+    :name="property.name"
+    :label="handleDisplayName"
     :modelValue="getter(property)"
     :rules="rules"
   >
@@ -221,20 +226,21 @@
       @update:modelValue="
         (e) => {
           handleChange(e);
-          setter(property, e);
+          setter(property, e as Record<string, unknown> | string | number | boolean);
         }
       "
       type="datetime-local"
-      :required="property['required'] || property['isRequired']"
-      :placeholder="handleDisplayName || property['defaultValue']"
+      :required="property.required || property.isRequired"
+      :placeholder="handleDisplayName || property.defaultValue"
       :disabled="disabled"
     ></VcInput>
   </Field>
 
   <Field
-    v-else-if="property['valueType'] === 'LongText'"
+    v-else-if="property.valueType === 'LongText'"
     v-slot="{ errorMessage, handleChange }"
-    :name="property['name']"
+    :name="property.name"
+    :label="handleDisplayName"
     :modelValue="getter(property)"
     :rules="rules"
   >
@@ -249,16 +255,17 @@
           setter(property, e);
         }
       "
-      :required="property['required'] || property['isRequired']"
-      :placeholder="handleDisplayName || property['defaultValue']"
+      :required="property.required || property.isRequired"
+      :placeholder="handleDisplayName || property.defaultValue"
       :disabled="disabled"
     ></VcTextarea>
   </Field>
 
   <Field
-    v-else-if="property['valueType'] === 'Boolean'"
+    v-else-if="property.valueType === 'Boolean'"
     v-slot="{ errorMessage, handleChange }"
-    :name="property['displayName'] || property['name']"
+    :name="property.displayName || property.name"
+    :label="handleDisplayName || property.displayName"
     :modelValue="getter(property)"
     :rules="rules"
   >
@@ -272,38 +279,39 @@
           setter(property, e);
         }
       "
-      :required="property['required'] || property['isRequired']"
+      :required="property.required || property.isRequired"
       :disabled="disabled"
-      :name="property['displayName'] || property['name']"
+      :name="property.displayName || property.name"
     >
-      {{ handleDisplayName || property['displayName'] }}
+      {{ handleDisplayName || property.displayName }}
     </VcCheckbox>
   </Field>
 
   <Field
-    v-else-if="property['valueType'] === 'Html'"
+    v-else-if="property.valueType === 'Html'"
     v-slot="{ errorMessage, handleChange }"
-    :name="property['displayName'] || property['name']"
+    :name="property.displayName || property.name"
+    :label="handleDisplayName || property.displayName"
     :modelValue="getter(property)"
     :rules="rules"
   >
-    <VcEditor
+    <VcCodeEditor
       v-bind="$attrs"
-      :label="handleDisplayName || property['displayName']"
+      :label="handleDisplayName || property.displayName"
       :modelValue="(getter(property) as string | number | Date)"
       @update:modelValue="
         (e) => {
           handleChange(e);
-          setter(property, e);
+          setter(property, e as Record<string, unknown> | string | number | boolean);
         }
       "
-      :required="property['required'] || property['isRequired']"
+      :required="property.required || property.isRequired"
       :placeholder="handleDisplayName || 'Add value'"
       :disabled="disabled"
-      :name="property['displayName'] || property['name']"
+      :name="property.displayName || property.name"
       :error-message="errorMessage"
     >
-    </VcEditor>
+    </VcCodeEditor>
   </Field>
 </template>
 
@@ -311,7 +319,34 @@
 import { ref, onMounted, computed } from "vue";
 import { useI18n } from "./../../../../core/composables";
 import { Field } from "vee-validate";
-import { VcDynamicPropertyProps } from "./vc-dynamic-property-model";
+
+export interface Props {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  property: any;
+  dictionaries?: Record<string, unknown>;
+  getter: (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    property: Record<string, any>,
+    isDictionary?: boolean
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ) => Record<string, any> | string | number | boolean | Date;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  optionsGetter: (property: Record<string, any>, keyword?: string) => Promise<any[] | undefined> | any[];
+  setter: (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    property: Record<string, any>,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    value: Record<string, any> | string | number | boolean,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    dictionary?: any[]
+  ) => void | undefined;
+  culture?: string;
+  disabled?: boolean;
+}
+
+export interface PropertyItem {
+  alias: string;
+}
 
 type IValidationRules = {
   required?: boolean;
@@ -325,26 +360,21 @@ interface IDisplayName {
   name?: string;
 }
 
-const props = withDefaults(defineProps<VcDynamicPropertyProps>(), {
+const props = withDefaults(defineProps<Props>(), {
   culture: "en-US",
-  disabled: false,
 });
 
 const { locale, te, t } = useI18n();
 
 const rules: IValidationRules = {};
-const items = ref([]);
+const items = ref<PropertyItem[]>([]);
 const handleDisplayProperty = computed(() => {
-  return items.value?.some((x: { alias: string }) => x.alias)
-    ? "alias"
-    : "name";
+  return items.value?.some((x: { alias: string }) => x.alias) ? "alias" : "name";
 });
 const handleDisplayName = computed(() => {
   let localized: string;
   const isLocaleExists = props.property.displayNames?.find((x: IDisplayName) =>
-    x.languageCode
-      ?.toLowerCase()
-      .startsWith((locale.value as string)?.toLowerCase())
+    x.languageCode?.toLowerCase().startsWith((locale.value as string)?.toLowerCase())
   );
   if (isLocaleExists && isLocaleExists.name) {
     localized = isLocaleExists.name;
@@ -352,13 +382,10 @@ const handleDisplayName = computed(() => {
     const fallback = props.property.displayNames?.find((x: IDisplayName) =>
       x.languageCode?.toLowerCase().includes(props.culture?.toLowerCase())
     );
-    localized =
-      fallback && fallback?.name ? fallback.name : props.property.name;
+    localized = fallback && fallback?.name ? fallback.name : props.property.name;
   }
 
-  return localized && te(localized.toUpperCase())
-    ? t(localized.toUpperCase())
-    : localized;
+  return localized && te(localized.toUpperCase()) ? t(localized.toUpperCase()) : localized;
 });
 
 onMounted(async () => {

package/ui/components/organisms/vc-gallery/_internal/vc-gallery-item/vc-gallery-item.vue

@@ -8,7 +8,11 @@
     @tap.stop="hover = !hover"
     v-click-outside="onClose"
   >
-    <VcImage aspect="1x1" :src="image.url" background="contain"></VcImage>
+    <VcImage
+      aspect="1x1"
+      :src="image.url"
+      background="contain"
+    ></VcImage>
     <div class="vc-gallery-item__overlay">
       <div class="tw-flex">
         <VcIcon
@@ -17,7 +21,10 @@
           icon="fas fa-arrows-alt"
           size="s"
         ></VcIcon>
-        <div class="tw-truncate" :title="image.name">
+        <div
+          class="tw-truncate"
+          :title="image.name"
+        >
           {{ image.name }}
         </div>
       </div>

package/ui/components/organisms/vc-gallery/_internal/vc-gallery-preview/vc-gallery-preview.vue

@@ -1,5 +1,8 @@
 <template>
-  <VcPopup :title="currentImage.title" @close="$emit('close')">
+  <VcPopup
+    :title="currentImage.title"
+    @close="$emit('close')"
+  >
     <template v-slot:title>
       <div>
         <span>{{ currentImage.name }} (</span>
@@ -7,9 +10,7 @@
         <span>)</span>
       </div>
     </template>
-    <div
-      class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center"
-    >
+    <div class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center">
       <div class="tw-box-border p-5 tw-grow tw-basis-0 tw-w-full">
         <div
           class="bg-contain tw-bg-no-repeat tw-bg-center tw-w-full tw-h-full tw-box-border"
@@ -20,19 +21,23 @@
           class="tw-absolute tw-top-2/4 -tw-mt-9 tw-h-[72px] tw-w-[72px] tw-flex tw-items-center tw-justify-center tw-rounded-full tw-bg-[#f1f6fa] tw-cursor-pointer tw-text-[#a1c0d4] [--icon-size-xl: 36px] hover:tw-shadow-[0_0_20px_rgba(31,40,50,0.15)] tw-left-[25px]"
           @click="localIndex--"
         >
-          <VcIcon icon="fas fa-arrow-left" size="xl"></VcIcon>
+          <VcIcon
+            icon="fas fa-arrow-left"
+            size="xl"
+          ></VcIcon>
         </div>
         <div
           v-if="localIndex < images.length - 1"
           class="tw-absolute tw-top-2/4 -tw-mt-9 tw-h-[72px] tw-w-[72px] tw-flex tw-items-center tw-justify-center tw-rounded-full tw-bg-[#f1f6fa] tw-cursor-pointer tw-text-[#a1c0d4] [--icon-size-xl: 36px] hover:tw-shadow-[0_0_20px_rgba(31,40,50,0.15)] tw-right-[25px]"
           @click="localIndex++"
         >
-          <VcIcon icon="fas fa-arrow-right" size="xl"></VcIcon>
+          <VcIcon
+            icon="fas fa-arrow-right"
+            size="xl"
+          ></VcIcon>
         </div>
       </div>
-      <div
-        class="tw-p-4 tw-pb-[40px] tw-max-w-full tw-overflow-x-auto tw-box-border tw-shrink tw-flex"
-      >
+      <div class="tw-p-4 tw-pb-[40px] tw-max-w-full tw-overflow-x-auto tw-box-border tw-shrink tw-flex">
         <div
           v-for="(item, i) in images"
           :key="i"

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

@@ -1,7 +1,9 @@
-import { ComponentPublicInstance } from "vue";
-import { VcGalleryProps } from "./vc-gallery-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers"
+import { VNode } from "vue";
 import Gallery from "./vc-gallery.vue";
-export const VcGallery: ComponentConstructor<
-  ComponentPublicInstance<VcGalleryProps>
-> = Gallery;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcGallerySlots = {
+  default?: () => VNode[];
+};
+
+export const VcGallery: GlobalComponentConstructor<typeof Gallery, VcGallerySlots> = Gallery;