@vc-shell/framework 1.0.49 → 1.0.50

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

@@ -1,10 +1,10 @@
 <template>
   <Field
     v-if="
-      (property.dictionary || property.isDictionary) && !property.multivalue
+      (property['dictionary'] || property['isDictionary']) && !property['multivalue']
     "
     v-slot="{ errorMessage, handleChange, errors }"
-    :name="property.displayName || property.name"
+    :name="property['displayName'] || property['name']"
     :modelValue="getter(property, true)"
     :rules="rules"
   >
@@ -12,7 +12,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 +20,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,27 +34,27 @@
 
   <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"
+    :name="property['name']"
+    :modelValue="property['values']"
     :rules="rules"
   >
     <VcMultivalue
       v-bind="$attrs"
       :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>
@@ -62,29 +62,29 @@
 
   <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"
+    :name="property['name']"
+    :modelValue="property['values']"
     :rules="rules"
   >
     <VcMultivalue
       v-bind="$attrs"
       :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"
+      :multivalue="property['multivalue']"
       :disabled="disabled"
       :options="items"
       keyProperty="id"
@@ -95,9 +95,9 @@
   </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']"
     :modelValue="getter(property)"
     :rules="rules"
   >
@@ -105,8 +105,8 @@
       v-bind="$attrs"
       :error="!!errors.length"
       :error-message="errorMessage"
-      :label="handleDisplayName || property.displayName"
-      :modelValue="getter(property)"
+      :label="handleDisplayName || property['displayName']"
+      :modelValue="(getter(property) as string | number | Date)"
       @update:modelValue="
         (e) => {
           handleChange(e);
@@ -114,23 +114,23 @@
         }
       "
       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']"
     :rules="rules"
   >
     <VcSelect
       v-bind="$attrs"
       :label="handleDisplayName"
-      :modelValue="property.values"
+      :modelValue="property['values']"
       @update:modelValue="
         (e) => {
           handleChange(e);
@@ -138,7 +138,7 @@
         }
       "
       type="number"
-      :required="property.required || property.isRequired"
+      :required="property['required'] || property['isRequired']"
       placeholder="Add value"
       :disabled="disabled"
       :error="!!errors.length"
@@ -151,9 +151,9 @@
   </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']"
     :modelValue="getter(property)"
     :rules="rules"
   >
@@ -162,7 +162,7 @@
       :error="!!errors.length"
       :error-message="errorMessage"
       :label="handleDisplayName"
-      :modelValue="getter(property)"
+      :modelValue="(getter(property) as string | number | Date)"
       @update:modelValue="
         (e) => {
           handleChange(e);
@@ -171,16 +171,16 @@
       "
       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']"
     :modelValue="getter(property)"
     :rules="rules"
   >
@@ -189,7 +189,7 @@
       :error="!!errors.length"
       :error-message="errorMessage"
       :label="handleDisplayName"
-      :modelValue="getter(property)"
+      :modelValue="(getter(property) as string | number | Date)"
       @update:modelValue="
         (e) => {
           handleChange(e);
@@ -199,16 +199,16 @@
       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']"
     :modelValue="getter(property)"
     :rules="rules"
   >
@@ -217,7 +217,7 @@
       :error="!!errors.length"
       :error-message="errorMessage"
       :label="handleDisplayName"
-      :modelValue="getter(property)"
+      :modelValue="(getter(property) as string | number | Date)"
       @update:modelValue="
         (e) => {
           handleChange(e);
@@ -225,16 +225,16 @@
         }
       "
       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']"
     :modelValue="getter(property)"
     :rules="rules"
   >
@@ -242,65 +242,65 @@
       v-bind="$attrs"
       :error-message="errorMessage"
       :label="handleDisplayName"
-      :modelValue="getter(property)"
+      :modelValue="getter(property) as string"
       @update:modelValue="
         (e) => {
           handleChange(e);
           setter(property, e);
         }
       "
-      :isRequired="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']"
     :modelValue="getter(property)"
     :rules="rules"
   >
     <VcCheckbox
       v-bind="$attrs"
       :error-message="errorMessage"
-      :modelValue="getter(property)"
+      :modelValue="getter(property) as boolean"
       @update:modelValue="
         (e) => {
           handleChange(e);
           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']"
     :modelValue="getter(property)"
     :rules="rules"
   >
     <VcEditor
       v-bind="$attrs"
-      :label="handleDisplayName || property.displayName"
-      :modelValue="getter(property)"
+      :label="handleDisplayName || property['displayName']"
+      :modelValue="(getter(property) as string | number | Date)"
       @update:modelValue="
         (e) => {
           handleChange(e);
           setter(property, e);
         }
       "
-      :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>
@@ -311,6 +311,7 @@
 import { ref, onMounted, computed } from "vue";
 import { useI18n } from "@/core/composables";
 import { Field } from "vee-validate";
+import { VcDynamicPropertyProps } from "@/ui/components/organisms/vc-dynamic-property/vc-dynamic-property-model";
 
 type IValidationRules = {
   required?: boolean;
@@ -324,38 +325,9 @@ interface IDisplayName {
   name?: string;
 }
 
-const props = defineProps({
-  property: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  dictionaries: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  getter: {
-    type: Function,
-  },
-
-  optionsGetter: {
-    type: Function,
-  },
-
-  setter: {
-    type: Function,
-  },
-
-  culture: {
-    type: String,
-    default: "en-US",
-  },
-
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
+const props = withDefaults(defineProps<VcDynamicPropertyProps>(), {
+  culture: "en-US",
+  disabled: false,
 });
 
 const { locale, te, t } = useI18n();

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

@@ -10,7 +10,7 @@
   >
     <VcImage aspect="1x1" :src="image.url" background="contain"></VcImage>
     <div class="vc-gallery-item__overlay">
-      <div class= "tw-flex">
+      <div class="tw-flex">
         <VcIcon
           v-if="!readonly && !disableDrag"
           class="vc-gallery-item__move"
@@ -21,7 +21,7 @@
           {{ image.name }}
         </div>
       </div>
-      <div class= "tw-flex tw-grow tw-basis-0 tw-items-center tw-justify-around">
+      <div class="tw-flex tw-grow tw-basis-0 tw-items-center tw-justify-around">
         <div
           class="vc-gallery-item__button"
           @click="$emit('preview', image)"
@@ -63,27 +63,37 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 import { clickOutside as vClickOutside } from "@/core/directives";
+import { IImage } from "@/core/types";
 
-defineProps({
-  image: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  readonly: {
-    type: Boolean,
-    default: false,
-  },
-
-  actions: {
-    type: Object,
-    default: () => ({}),
-  },
+export interface Props {
+  image?: IImage | undefined;
+  readonly?: boolean | undefined;
+  actions?:
+    | {
+        name?: string | undefined;
+        preview: boolean | undefined;
+        edit: boolean | undefined;
+        remove: boolean | undefined;
+      }
+    | undefined;
+  disableDrag?: boolean | undefined;
+}
 
-  disableDrag: {
-    type: Boolean,
-    default: false,
-  },
+withDefaults(defineProps<Props>(), {
+  image: () => ({
+    sortOrder: undefined,
+    title: undefined,
+    name: undefined,
+    url: undefined,
+  }),
+  readonly: false,
+  actions: () => ({
+    name: undefined,
+    preview: undefined,
+    edit: undefined,
+    remove: undefined,
+  }),
+  disableDrag: false,
 });
 
 defineEmits(["preview", "edit", "remove"]);

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

@@ -0,0 +1,7 @@
+import { ComponentPublicInstance } from "vue";
+import { VcGalleryProps } from "./vc-gallery-model";
+import { ComponentConstructor } from "@/ui/types/ts-helpers";
+import Gallery from "./vc-gallery.vue";
+export const VcGallery: ComponentConstructor<
+  ComponentPublicInstance<VcGalleryProps>
+> = Gallery;

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

@@ -0,0 +1,33 @@
+import { IImage } from "@/core/types";
+import { VNode } from "vue";
+
+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 interface VcGallerySlots {
+  default: () => VNode[];
+}

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

@@ -10,10 +10,10 @@
     </VcLabel>
 
     <template v-if="(images && images.length) || !disabled">
-      <div class= "tw-flex tw-flex-wrap">
+      <div class="tw-flex tw-flex-wrap">
         <draggable
           :list="images"
-          class= "tw-flex tw-flex-wrap tw-w-full"
+          class="tw-flex tw-flex-wrap tw-w-full"
           tag="transition-group"
           v-bind="dragOptions"
           @change="updateOrder"
@@ -49,7 +49,7 @@
         </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>
 
@@ -63,94 +63,35 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, PropType, ref } from "vue";
+import { computed, ref } from "vue";
 import { VcLabel, VcFileUpload } from "@/ui/components";
 import VcGalleryItem from "./_internal/vc-gallery-item/vc-gallery-item.vue";
 import VcGalleryPreview from "./_internal/vc-gallery-preview/vc-gallery-preview.vue";
-import { IImage } from "@/core/types";
-
-const props = defineProps({
-  images: {
-    type: Array as PropType<IImage[]>,
-    default: () => [],
-  },
-
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-
-  required: {
-    type: Boolean,
-    default: false,
-  },
-
-  label: {
-    type: String,
-    default: undefined,
-  },
-
-  tooltip: {
-    type: String,
-    default: undefined,
-  },
-
-  tooltipIcon: {
-    type: String,
-    default: "fas fa-info",
-  },
-
-  uploadIcon: {
-    type: String,
-    default: "fas fa-upload",
-  },
-
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-
-  variant: {
-    type: String,
-    default: "gallery",
-  },
-
-  itemActions: {
-    type: Object,
-    default: () => ({
-      preview: true,
-      edit: true,
-      remove: true,
-    }),
-  },
-
-  disableDrag: {
-    type: Boolean,
-    default: false,
-  },
-
-  hideAfterUpload: {
-    type: Boolean,
-    default: false,
-  },
-
-  rules: {
-    type: [String, Object],
-  },
-
-  name: {
-    type: String,
-    default: "Gallery",
-  },
+import { VcGalleryProps } from "@/ui/components/organisms/vc-gallery/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 emit = defineEmits([
   "upload",
   "sort",
-  "item:preview",
   "item:edit",
   "item:remove",
-  "item:move",
 ]);
 
 const preview = ref(false);

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

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

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

@@ -0,0 +1,11 @@
+import { VNode } from "vue";
+
+export interface VcLoginFormProps {
+  logo?: string | undefined;
+  background?: string | undefined;
+  title?: string | undefined;
+}
+
+export interface VcLoginFormSlots {
+  default: () => VNode[];
+}