@vc-shell/framework 1.0.53 → 1.0.54

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

@@ -1,24 +1,57 @@
-import { VNode } from "vue";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ExtractTypes } from "./../../../types/ts-helpers";
+import { VNode, PropType } from "vue";
 
-export interface VcDynamicPropertyProps {
-  property?: Record<string, any> | undefined;
-  dictionaries?: Record<string, any> | undefined;
-  getter?: (
-    property: Record<string, any>,
-    isDictionary?: boolean
-  ) => Record<string, any> | string | number | boolean | Date | undefined;
-  optionsGetter?: (
-    property: Record<string, any>,
-    keyword?: string
-  ) => Promise<any[] | undefined> | any[];
-  setter?: (
-    property: Record<string, any>,
-    value: Record<string, any> | string | number | boolean,
-    dictionary?: any[]
-  ) => void | undefined;
-  culture?: string | undefined;
-  disabled?: boolean | undefined;
-}
+export const dynamicPropertyProps = {
+  property: Object as PropType<{
+    [x: string]: any;
+    displayNames?: { languageCode: string; name: string }[];
+    name?: string | undefined;
+    dictionary?: string | undefined;
+    isDictionary?: string | undefined;
+    multivalue?: string | undefined;
+    displayName?: string | undefined;
+    defaultValue?: string | undefined;
+    valueType?: "ShortText" | "Number" | "Integer" | "DateTime" | "LongText" | "Boolean" | "Html" | undefined;
+    values?: any | undefined;
+    required?: boolean | undefined;
+    isRequired?: boolean | undefined;
+    validationRule?:
+      | {
+          charCountMin?: string;
+          charCountMax?: string;
+          regExp?: string;
+        }
+      | undefined;
+  }>,
+  dictionaries: Object as PropType<Record<string, any>>,
+  getter: Function as PropType<
+    (
+      property: Record<string, any>,
+      isDictionary?: boolean
+    ) => Record<string, any> | string | number | boolean | Date | undefined
+  >,
+  optionsGetter: Function as PropType<
+    (property: Record<string, any>, keyword?: string) => Promise<any[] | undefined> | any[]
+  >,
+  setter: Function as PropType<
+    (
+      property: Record<string, any>,
+      value: Record<string, any> | string | number | boolean,
+      dictionary?: any[]
+    ) => void | undefined
+  >,
+  culture: {
+    type: String,
+    default: "en-US",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export type VcDynamicPropertyProps = ExtractTypes<typeof dynamicPropertyProps>;
 
 export interface VcDynamicPropertySlots {
   default: () => VNode[];

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

@@ -1,9 +1,8 @@
 <template>
   <Field
-    v-if="
-      (property['dictionary'] || property['isDictionary']) && !property['multivalue']
-    "
+    v-if="(property['dictionary'] || property['isDictionary']) && !property['multivalue']"
     v-slot="{ errorMessage, handleChange, errors }"
+    :label="handleDisplayName || property['displayName']"
     :name="property['displayName'] || property['name']"
     :modelValue="getter(property, true)"
     :rules="rules"
@@ -38,13 +37,15 @@
       property['multivalue'] &&
       !(property['dictionary'] || property['isDictionary'])
     "
-    v-slot="{ errorMessage, handleChange }"
+    v-slot="{ errorMessage, handleChange, errors }"
+    :label="handleDisplayName"
     :name="property['name']"
     :modelValue="property['values']"
     :rules="rules"
   >
-    <VcMultivalue
+    <VcSelect
       v-bind="$attrs"
+      :error="!!errors.length"
       :error-message="errorMessage"
       :label="handleDisplayName"
       :modelValue="property['values']"
@@ -57,7 +58,8 @@
       :required="property['required'] || property['isRequired']"
       placeholder="Add value"
       :disabled="disabled"
-    ></VcMultivalue>
+      :multiple="true"
+    ></VcSelect>
   </Field>
 
   <Field
@@ -66,13 +68,15 @@
       property['multivalue'] &&
       (property['dictionary'] || property['isDictionary'])
     "
-    v-slot="{ errorMessage, handleChange }"
+    v-slot="{ errorMessage, handleChange, errors }"
+    :label="handleDisplayName"
     :name="property['name']"
     :modelValue="property['values']"
     :rules="rules"
   >
-    <VcMultivalue
+    <VcSelect
       v-bind="$attrs"
+      :error="!!errors.length"
       :error-message="errorMessage"
       :label="handleDisplayName"
       :modelValue="property['values']"
@@ -84,19 +88,20 @@
       "
       :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-slot="{ errorMessage, handleChange, errors }"
+    :label="handleDisplayName || property['displayName']"
     :name="property['displayName'] || property['name']"
     :modelValue="getter(property)"
     :rules="rules"
@@ -123,6 +128,7 @@
   <Field
     v-else-if="property['valueType'] === 'Number' && property['multivalue']"
     v-slot="{ errorMessage, handleChange, errors }"
+    :label="handleDisplayName"
     :name="property['name']"
     :modelValue="property['values']"
     :rules="rules"
@@ -153,6 +159,7 @@
   <Field
     v-else-if="property['valueType'] === 'Number'"
     v-slot="{ errorMessage, handleChange, errors }"
+    :label="handleDisplayName"
     :name="property['name']"
     :modelValue="getter(property)"
     :rules="rules"
@@ -180,6 +187,7 @@
   <Field
     v-else-if="property['valueType'] === 'Integer'"
     v-slot="{ errorMessage, handleChange, errors }"
+    :label="handleDisplayName"
     :name="property['name']"
     :modelValue="getter(property)"
     :rules="rules"
@@ -208,6 +216,7 @@
   <Field
     v-else-if="property['valueType'] === 'DateTime'"
     v-slot="{ errorMessage, handleChange, errors }"
+    :label="handleDisplayName"
     :name="property['name']"
     :modelValue="getter(property)"
     :rules="rules"
@@ -234,6 +243,7 @@
   <Field
     v-else-if="property['valueType'] === 'LongText'"
     v-slot="{ errorMessage, handleChange }"
+    :label="handleDisplayName"
     :name="property['name']"
     :modelValue="getter(property)"
     :rules="rules"
@@ -258,6 +268,7 @@
   <Field
     v-else-if="property['valueType'] === 'Boolean'"
     v-slot="{ errorMessage, handleChange }"
+    :label="handleDisplayName || property['displayName']"
     :name="property['displayName'] || property['name']"
     :modelValue="getter(property)"
     :rules="rules"
@@ -276,13 +287,14 @@
       :disabled="disabled"
       :name="property['displayName'] || property['name']"
     >
-      {{ handleDisplayName || property['displayName'] }}
+      {{ handleDisplayName || property["displayName"] }}
     </VcCheckbox>
   </Field>
 
   <Field
     v-else-if="property['valueType'] === 'Html'"
     v-slot="{ errorMessage, handleChange }"
+    :label="handleDisplayName || property['displayName']"
     :name="property['displayName'] || property['name']"
     :modelValue="getter(property)"
     :rules="rules"
@@ -311,7 +323,7 @@
 import { ref, onMounted, computed } from "vue";
 import { useI18n } from "./../../../../core/composables";
 import { Field } from "vee-validate";
-import { VcDynamicPropertyProps } from "./vc-dynamic-property-model";
+import { dynamicPropertyProps } from "./vc-dynamic-property-model";
 
 type IValidationRules = {
   required?: boolean;
@@ -325,35 +337,27 @@ interface IDisplayName {
   name?: string;
 }
 
-const props = withDefaults(defineProps<VcDynamicPropertyProps>(), {
-  culture: "en-US",
-  disabled: false,
-});
+const props = defineProps(dynamicPropertyProps);
 
 const { locale, te, t } = useI18n();
 
 const rules: IValidationRules = {};
 const items = ref([]);
 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())
+  const isLocaleExists = props.property["displayNames"]?.find((x: IDisplayName) =>
+    x.languageCode?.toLowerCase().startsWith((locale.value as string)?.toLowerCase())
   );
   if (isLocaleExists && isLocaleExists.name) {
     localized = isLocaleExists.name;
   } else {
-    const fallback = props.property.displayNames?.find((x: IDisplayName) =>
+    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())
@@ -367,24 +371,24 @@ onMounted(async () => {
   }
 });
 
-if (props.property.required || props.property.isRequired) {
+if (props.property["required"] || props.property["isRequired"]) {
   rules.required = true;
 }
-if (props.property.validationRule?.charCountMin) {
-  rules.min = Number(props.property.validationRule.charCountMin);
+if (props.property["validationRule"]?.charCountMin) {
+  rules.min = Number(props.property["validationRule"].charCountMin);
 }
-if (props.property.validationRule?.charCountMax) {
-  rules.max = Number(props.property.validationRule.charCountMax);
+if (props.property["validationRule"]?.charCountMax) {
+  rules.max = Number(props.property["validationRule"].charCountMax);
 }
-if (props.property.validationRule?.regExp) {
-  rules.regex = new RegExp(props.property.validationRule?.regExp);
+if (props.property["validationRule"]?.regExp) {
+  rules.regex = new RegExp(props.property["validationRule"]?.regExp);
 }
 
 /*function getLabel() {
   return (
-    (props.property.displayNames as { culture: string }[]).find(
+    (props.property['displayNames'] as { culture: string }[]).find(
       (item) => item.culture === props.culture
-    ) || props.property.name
+    ) || props.property['name']
   );
 }
  */

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,8 @@
 import { ComponentPublicInstance } from "vue";
-import { VcGalleryProps } from "./vc-gallery-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers"
+import { VcGalleryEmits, VcGalleryProps } from "./vc-gallery-model";
+import { ComponentConstructor } from "./../../../types/ts-helpers";
 import Gallery from "./vc-gallery.vue";
 export const VcGallery: ComponentConstructor<
-  ComponentPublicInstance<VcGalleryProps>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ComponentPublicInstance<VcGalleryProps, any, any, any, any, VcGalleryEmits>
 > = Gallery;

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

@@ -1,32 +1,77 @@
+import { isArray, isObject } from "./../../../utils";
 import { IImage } from "./../../../../core/types";
-import { VNode } from "vue";
+import { PropType, VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
 
-export interface VcGalleryProps {
-  images?: IImage[] | undefined;
-  disabled?: boolean | undefined;
-  required?: boolean | undefined;
-  label?: string | undefined;
-  tooltip?: string | undefined;
-  tooltipIcon?: string | undefined;
-  uploadIcon?: string | undefined;
-  multiple?: boolean | undefined;
-  variant?: "gallery" | "file-upload" | undefined;
-  itemActions?: {
-    name?: string | undefined;
-    preview: boolean | undefined;
-    edit: boolean | undefined;
-    remove: boolean | undefined;
-  };
-  disableDrag?: boolean | undefined;
-  hideAfterUpload?: boolean | undefined;
-  rules?: string | Record<string, unknown> | undefined;
-  name?: string | undefined;
-  onUpload?: (files: FileList) => void;
-  onSort?: (sorted: IImage[]) => void;
-  "onItem:edit"?: (image: IImage) => void;
-  "onItem:remove"?: (image: IImage) => void;
-  "onItem:move"?: (image: IImage) => void;
-}
+export const galleryProps = {
+  images: {
+    type: Array as PropType<IImage[]>,
+    default: () => [],
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  label: String,
+  tooltip: String,
+  tooltipIcon: {
+    type: String,
+    default: "fas fa-info",
+  },
+  uploadIcon: {
+    type: String,
+    default: "fas fa-upload",
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  variant: {
+    type: String as PropType<"gallery" | "file-upload">,
+    default: "gallery",
+  },
+  itemActions: {
+    type: Object as PropType<{
+      name?: string | undefined;
+      preview: boolean | undefined;
+      edit: boolean | undefined;
+      remove: boolean | undefined;
+    }>,
+    default: () => ({
+      preview: true,
+      edit: true,
+      remove: true,
+    }),
+  },
+  disableDrag: {
+    type: Boolean,
+    default: false,
+  },
+  hideAfterUpload: {
+    type: Boolean,
+    default: false,
+  },
+  rules: [String, Object] as PropType<string | Record<string, unknown>>,
+  name: {
+    type: String,
+    default: "Gallery",
+  },
+};
+
+export const galleryEmits = {
+  upload: (files: FileList) => !!files,
+  sort: (sorted: IImage[]) => isArray(sorted),
+  "item:edit": (image: IImage) => isObject(image),
+  "item:remove": (image: IImage) => isObject(image),
+  "item:move": (image: IImage) => isObject(image),
+};
+
+export type VcGalleryProps = ExtractTypes<typeof galleryProps>;
+export type VcGalleryEmits = typeof galleryEmits;
 
 export interface VcGallerySlots {
   default: () => VNode[];

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

@@ -49,7 +49,10 @@
         </draggable>
       </div>
     </template>
-    <div v-else class="tw-flex tw-justify-center tw-p-5">
+    <div
+      v-else
+      class="tw-flex tw-justify-center tw-p-5"
+    >
       <VcHint>Gallery is empty</VcHint>
     </div>
 
@@ -67,27 +70,11 @@ import { computed, ref } from "vue";
 import { VcLabel, VcFileUpload } from "./../../../components";
 import VcGalleryItem from "./_internal/vc-gallery-item/vc-gallery-item.vue";
 import VcGalleryPreview from "./_internal/vc-gallery-preview/vc-gallery-preview.vue";
-import { VcGalleryProps } from "./vc-gallery-model";
+import { galleryEmits, galleryProps } from "./vc-gallery-model";
 
-const props = withDefaults(defineProps<VcGalleryProps>(), {
-  images: () => [],
-  disabled: false,
-  required: false,
-  tooltipIcon: "fas fa-info",
-  uploadIcon: "fas fa-upload",
-  multiple: false,
-  variant: "gallery",
-  itemActions: () => ({
-    preview: true,
-    edit: true,
-    remove: true,
-  }),
-  disableDrag: false,
-  hideAfterUpload: false,
-  name: "Gallery",
-});
+const props = defineProps(galleryProps);
 
-const emit = defineEmits(["upload", "sort", "item:edit", "item:remove"]);
+const emit = defineEmits(galleryEmits);
 
 const preview = ref(false);
 const previewImageIndex = ref();

package/ui/components/organisms/vc-login-form/index.ts

@@ -1,7 +1,5 @@
 import { ComponentPublicInstance } from "vue";
 import { VcLoginFormProps } from "./vc-login-form-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers"
+import { ComponentConstructor } from "./../../../types/ts-helpers";
 import LoginForm from "./vc-login-form.vue";
-export const VcLoginForm: ComponentConstructor<
-  ComponentPublicInstance<VcLoginFormProps>
-> = LoginForm;
+export const VcLoginForm: ComponentConstructor<ComponentPublicInstance<VcLoginFormProps>> = LoginForm;

package/ui/components/organisms/vc-login-form/vc-login-form-model.ts

@@ -1,11 +1,16 @@
 import { VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
 
-export interface VcLoginFormProps {
-  logo?: string | undefined;
-  background?: string | undefined;
-  title?: string | undefined;
-}
+export const loginFormProps = {
+  logo: String,
+  background: String,
+  title: {
+    type: String,
+    default: "Login",
+  },
+};
 
+export type VcLoginFormProps = ExtractTypes<typeof loginFormProps>;
 export interface VcLoginFormSlots {
   default: () => VNode[];
 }

package/ui/components/organisms/vc-login-form/vc-login-form.vue

@@ -27,11 +27,9 @@
 </template>
 
 <script lang="ts" setup>
-import { VcLoginFormProps } from "./vc-login-form-model";
+import { loginFormProps } from "./vc-login-form-model";
 
-withDefaults(defineProps<VcLoginFormProps>(), {
-  title: "Login",
-});
+defineProps(loginFormProps);
 
 console.debug("Init vc-login-form");
 </script>

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

@@ -1,7 +1,7 @@
 import { ComponentPublicInstance } from "vue";
-import { VcPopupProps } from "./vc-popup-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers"
+import { VcPopupEmits, VcPopupProps } from "./vc-popup-model";
+import { ComponentConstructor } from "./../../../types/ts-helpers";
 import Popup from "./vc-popup.vue";
-export const VcPopup: ComponentConstructor<
-  ComponentPublicInstance<VcPopupProps>
-> = Popup;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const VcPopup: ComponentConstructor<ComponentPublicInstance<VcPopupProps, any, any, any, any, VcPopupEmits>> =
+  Popup;

package/ui/components/organisms/vc-popup/vc-popup-model.ts

@@ -1,11 +1,24 @@
-import { VNode } from "vue";
+import { PropType, VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
 
-export interface VcPopupProps {
-  title?: string | undefined;
-  closable?: boolean | undefined;
-  variant?: "small" | "medium" | "fullscreen" | undefined;
-  onClose?: () => void;
-}
+export const popupProps = {
+  title: String,
+  closable: {
+    type: Boolean,
+    default: true,
+  },
+  variant: {
+    type: String as PropType<"small" | "medium" | "fullscreen">,
+    default: "fullscreen",
+  },
+};
+
+export const popupEmits = {
+  close: () => true,
+};
+
+export type VcPopupProps = ExtractTypes<typeof popupProps>;
+export type VcPopupEmits = typeof popupEmits;
 
 export interface VcPopupSlots {
   default: () => VNode[];

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

@@ -1,5 +1,8 @@
 <template>
-  <div class="vc-popup" :class="`vc-popup_${variant}`">
+  <div
+    class="vc-popup"
+    :class="`vc-popup_${variant}`"
+  >
     <div class="vc-popup__wrapper">
       <div class="vc-popup__inner">
         <div class="vc-popup__header">
@@ -23,14 +26,11 @@
 </template>
 
 <script lang="ts" setup>
-import { VcPopupProps } from "./vc-popup-model";
+import { popupEmits, popupProps } from "./vc-popup-model";
 
-withDefaults(defineProps<VcPopupProps>(), {
-  closable: true,
-  variant: "fullscreen",
-});
+defineProps(popupProps);
 
-defineEmits(["close"]);
+defineEmits(popupEmits);
 </script>
 
 <style lang="scss">