@vc-shell/framework 1.0.54 → 1.0.56

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

@@ -47,11 +47,29 @@
 <script lang="ts" setup>
 import { watch } from "vue";
 import { VcLabel } from "./../../../components";
-import { textareaEmits, textareaProps } from "./vc-textarea-model";
 
-const props = defineProps(textareaProps);
+export interface Props {
+  placeholder?: string;
+  modelValue: string;
+  required?: boolean;
+  disabled?: boolean;
+  label?: string;
+  tooltip?: string;
+  name?: string;
+  maxchars?: string;
+  errorMessage?: string;
+}
+
+export interface Emits {
+  (event: "update:modelValue", value: string): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  name: "Field",
+  maxchars: "1024",
+});
 
-const emit = defineEmits(textareaEmits);
+const emit = defineEmits<Emits>();
 
 watch(
   () => props.modelValue,
@@ -61,7 +79,7 @@ watch(
 );
 
 // Handle input event to propertly validate value and emit changes
-function onInput(e: InputEvent) {
+function onInput(e: Event) {
   const newValue = (e.target as HTMLInputElement).value;
   emit("update:modelValue", newValue);
 }

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

@@ -1,6 +1,12 @@
-import { ComponentPublicInstance } from "vue";
-import { VcAppEmits, VcAppProps } from "./vc-app-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
+import { VNode } from "vue";
 import App from "./vc-app.vue";
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const VcApp: ComponentConstructor<ComponentPublicInstance<VcAppProps, any, any, any, any, VcAppEmits>> = App;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcAppSlots = {
+  appSwitcher?: () => VNode[];
+  bladeNavigation?: () => VNode[];
+  notifications?: () => VNode[];
+  passwordChange?: () => VNode[];
+};
+
+export const VcApp: GlobalComponentConstructor<typeof App, VcAppSlots> = App;

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

@@ -57,6 +57,7 @@
 
 <script lang="ts">
 import { defineComponent, getCurrentInstance } from "vue";
+import { IMenuItems, IBladeToolbar } from "../../../../core/types";
 
 export default defineComponent({
   inheritAttrs: false,
@@ -67,12 +68,38 @@ export default defineComponent({
 import { useRouter } from "vue-router";
 import VcAppBar from "./_internal/vc-app-bar/vc-app-bar.vue";
 import VcAppMenu from "./_internal/vc-app-menu/vc-app-menu.vue";
-import { IMenuClickEvent } from "./../../../../shared";
-import { appEmits, appProps } from "./vc-app-model";
+import { ExtendedComponent, IBladeElement, IMenuClickEvent, IOpenBlade } from "./../../../../shared";
+
+export interface Props {
+  pages?: ExtendedComponent[];
+  menuItems?: IMenuItems[];
+  mobileMenuItems?: IMenuItems[];
+  toolbarItems?: IBladeToolbar[];
+  isReady?: boolean;
+  isAuthorized?: boolean;
+  logo?: string;
+  version?: string;
+  theme?: "light" | "dark";
+  bladesRefs?: IBladeElement[];
+  title?: string;
+}
+
+export interface Emits {
+  (event: "open", args: IOpenBlade): void;
+  (event: "close", index: number): void;
+  (event: "backlink:click", index: number): void;
+}
 
-defineProps(appProps);
+withDefaults(defineProps<Props>(), {
+  pages: () => [],
+  menuItems: () => [],
+  mobileMenuItems: () => [],
+  toolbarItems: () => [],
+  theme: "light",
+  bladesRefs: () => [],
+});
 
-const emit = defineEmits(appEmits);
+const emit = defineEmits<Emits>();
 
 console.debug("vc-app: Init vc-app");
 
@@ -83,7 +110,7 @@ const router = useRouter();
 const onMenuItemClick = function ({ item, navigationCb }: IMenuClickEvent) {
   console.debug(`vc-app#onMenuItemClick() called.`);
   if (item.clickHandler && typeof item.clickHandler === "function") {
-    item.clickHandler(instance?.exposed);
+    item.clickHandler(instance?.exposed as Record<string, unknown>);
   } else {
     emit("open", { parentBlade: item.component, id: 0, navigationCb });
   }

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

@@ -1,7 +1,10 @@
-import { ComponentPublicInstance } from "vue";
-import { VcBladeEmits, VcBladeProps } from "./vc-blade-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
+import { VNode } from "vue";
 import Blade from "./vc-blade.vue";
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const VcBlade: ComponentConstructor<ComponentPublicInstance<VcBladeProps, any, any, any, any, VcBladeEmits>> =
-  Blade;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcBladeSlots = {
+  actions?: () => VNode[];
+  default?: () => VNode[];
+};
+
+export const VcBlade: GlobalComponentConstructor<typeof Blade, VcBladeSlots> = Blade;

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

@@ -35,6 +35,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import { IBladeToolbar } from "../../../../core/types";
 
 export default defineComponent({
   inheritAttrs: false,
@@ -44,11 +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 { bladeEmits, bladeProps } from "./vc-blade-model";
 
-defineProps(bladeProps);
+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%",
+  closable: true,
+  toolbarItems: () => [],
+});
 
-defineEmits(bladeEmits);
+defineEmits<Emits>();
 </script>
 
 <style lang="scss">

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

@@ -1,5 +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,9 +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 }"
-    :label="handleDisplayName || property['displayName']"
-    :name="property['displayName'] || property['name']"
+    :label="handleDisplayName || property.displayName"
+    :name="property.displayName || property.name"
     :modelValue="getter(property, true)"
     :rules="rules"
   >
@@ -11,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) => {
@@ -19,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"
@@ -33,14 +33,12 @@
 
   <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, errors }"
+    :name="property.name"
+    :modelValue="property.values"
     :label="handleDisplayName"
-    :name="property['name']"
-    :modelValue="property['values']"
     :rules="rules"
   >
     <VcSelect
@@ -48,14 +46,14 @@
       :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"
       :multiple="true"
@@ -64,14 +62,12 @@
 
   <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, errors }"
+    :name="property.name"
     :label="handleDisplayName"
-    :name="property['name']"
-    :modelValue="property['values']"
+    :modelValue="property.values"
     :rules="rules"
   >
     <VcSelect
@@ -79,14 +75,14 @@
       :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"
       :disabled="disabled"
       :options="items"
@@ -94,15 +90,15 @@
       option-value="id"
       @search="onSearch"
       @close="onClose"
-      :multiple="property['multivalue']"
+      :multiple="property.multivalue"
     ></VcSelect>
   </Field>
 
   <Field
-    v-else-if="property['valueType'] === 'ShortText'"
+    v-else-if="property.valueType === 'ShortText'"
     v-slot="{ errorMessage, handleChange, errors }"
-    :label="handleDisplayName || property['displayName']"
-    :name="property['displayName'] || property['name']"
+    :name="property.displayName || property.name"
+    :label="handleDisplayName || property.displayName"
     :modelValue="getter(property)"
     :rules="rules"
   >
@@ -110,33 +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"
     :label="handleDisplayName"
-    :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);
@@ -144,7 +140,7 @@
         }
       "
       type="number"
-      :required="property['required'] || property['isRequired']"
+      :required="property.required || property.isRequired"
       placeholder="Add value"
       :disabled="disabled"
       :error="!!errors.length"
@@ -157,10 +153,10 @@
   </Field>
 
   <Field
-    v-else-if="property['valueType'] === 'Number'"
+    v-else-if="property.valueType === 'Number'"
     v-slot="{ errorMessage, handleChange, errors }"
+    :name="property.name"
     :label="handleDisplayName"
-    :name="property['name']"
     :modelValue="getter(property)"
     :rules="rules"
   >
@@ -173,22 +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"
     :label="handleDisplayName"
-    :name="property['name']"
     :modelValue="getter(property)"
     :rules="rules"
   >
@@ -201,23 +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"
     :label="handleDisplayName"
-    :name="property['name']"
     :modelValue="getter(property)"
     :rules="rules"
   >
@@ -230,21 +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"
     :label="handleDisplayName"
-    :name="property['name']"
     :modelValue="getter(property)"
     :rules="rules"
   >
@@ -259,17 +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 }"
-    :label="handleDisplayName || property['displayName']"
-    :name="property['displayName'] || property['name']"
+    :name="property.displayName || property.name"
+    :label="handleDisplayName || property.displayName"
     :modelValue="getter(property)"
     :rules="rules"
   >
@@ -283,39 +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 }"
-    :label="handleDisplayName || property['displayName']"
-    :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>
 
@@ -323,7 +319,34 @@
 import { ref, onMounted, computed } from "vue";
 import { useI18n } from "./../../../../core/composables";
 import { Field } from "vee-validate";
-import { dynamicPropertyProps } 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;
@@ -337,32 +360,32 @@ interface IDisplayName {
   name?: string;
 }
 
-const props = defineProps(dynamicPropertyProps);
+const props = withDefaults(defineProps<Props>(), {
+  culture: "en-US",
+});
 
 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";
 });
 const handleDisplayName = computed(() => {
   let localized: string;
-  const isLocaleExists = props.property["displayNames"]?.find((x: IDisplayName) =>
+  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())
-    ? t(localized.toUpperCase())
-    : localized;
+  return localized && te(localized.toUpperCase()) ? t(localized.toUpperCase()) : localized;
 });
 
 onMounted(async () => {
@@ -371,24 +394,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/index.ts

@@ -1,8 +1,9 @@
-import { ComponentPublicInstance } from "vue";
-import { VcGalleryEmits, 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<
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ComponentPublicInstance<VcGalleryProps, any, any, any, any, VcGalleryEmits>
-> = Gallery;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcGallerySlots = {
+  default?: () => VNode[];
+};
+
+export const VcGallery: GlobalComponentConstructor<typeof Gallery, VcGallerySlots> = Gallery;