@vc-shell/framework 1.0.110 → 1.0.111

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

@@ -0,0 +1,140 @@
+import { ComputedRef, Raw } from "vue";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  VcButton,
+  VcCard,
+  VcCheckbox,
+  VcDynamicProperty,
+  VcEditor,
+  VcGallery,
+  VcInput,
+  VcInputCurrency,
+  VcSelect,
+  VcStatus,
+} from "../../../../ui/components";
+import type { ComponentProps, ComponentEmit, ComponentSlots } from "vue-component-type-helpers";
+
+type FromGenericEventsToProps<T extends Record<string, any>> = T extends Record<string, any>
+  ? {
+      [K in string & `on${Capitalize<string & keyof T>}`]?: K extends `on${infer C}`
+        ? (...args: T[Uncapitalize<C>]) => any
+        : never;
+    }
+  : never;
+
+interface FieldOpts<T> {
+  component?: ComponentType<T>;
+  id?: string | number;
+  props?: Record<string, any>;
+}
+
+export type ComponentType<T> = Raw<T>;
+
+export type FormFields = {
+  [key: string]: ControlType & IFieldset;
+};
+
+export type ControlType =
+  | ISelectField
+  | IInputField
+  | ICardCollection
+  | IEditorField
+  | IGallery
+  | IDynamicProperties
+  | ICheckbox
+  | IButton
+  | IInputCurrency
+  | IStatusField;
+
+export type ControlTypeWithSlots = Extract<
+  ControlType,
+  ISelectField | ICardCollection | ICheckbox | IButton | IStatusField
+>;
+export type ControlTypeCtr = Extract<ControlType, ISelectField | IInputField | IInputCurrency | IEditorField>;
+
+export interface IControlBaseProps {
+  key?: string | number | symbol;
+  rules?: string | Record<string, unknown>;
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  name?: string;
+  classNames?: string;
+  modelValue?: any;
+  tooltip?: string;
+  "onUpdate:modelValue"?: (event: any) => void;
+  multilanguage?: boolean;
+}
+
+export type WithRequiredProperty<Type, Key extends keyof Type> = Type & {
+  [Property in Key]-?: Type[Property];
+};
+
+export interface IControlBaseOptions {
+  visibility?: ComputedRef<boolean>;
+}
+
+export type ISelectField = {
+  props: ComponentProps<typeof VcSelect> | IControlBaseProps;
+  slots?: Partial<ComponentSlots<typeof VcSelect>>;
+  options: IControlBaseOptions;
+} & FieldOpts<typeof VcSelect>;
+
+export type IStatusField = {
+  props: ComponentProps<typeof VcStatus> & IControlBaseOptions;
+  slots?: Partial<Pick<ComponentSlots<typeof VcButton>, "default">>;
+  options: IControlBaseOptions;
+} & FieldOpts<typeof VcStatus>;
+
+export type IInputField = {
+  props: ComponentProps<typeof VcInput> | IControlBaseProps;
+  options: IControlBaseOptions;
+} & FieldOpts<typeof VcInput>;
+
+export type IInputCurrency = {
+  props: Partial<ComponentProps<typeof VcInputCurrency>> | IControlBaseProps;
+  options: IControlBaseOptions;
+} & FieldOpts<typeof VcInputCurrency>;
+
+export type ICardCollection = {
+  props: ComponentProps<typeof VcCard> | IControlBaseProps;
+  options: IControlBaseOptions;
+  slots?: Partial<Pick<ComponentSlots<typeof VcCard>, "default" | "actions">>;
+} & FieldOpts<typeof VcCard>;
+
+export type ICheckbox = {
+  props: ComponentProps<typeof VcCheckbox> | IControlBaseProps;
+  options: IControlBaseOptions;
+  slots?: Partial<Pick<ComponentSlots<typeof VcCheckbox>, "default" | "error">>;
+} & FieldOpts<typeof VcCheckbox>;
+
+export type IDynamicProperties = {
+  props:
+    | (ComponentProps<typeof VcDynamicProperty> & FromGenericEventsToProps<ComponentEmit<typeof VcDynamicProperty>>)
+    | IControlBaseProps;
+  options: IControlBaseOptions;
+} & FieldOpts<typeof VcDynamicProperty>;
+
+export type IEditorField = {
+  props: ComponentProps<typeof VcEditor> | IControlBaseProps;
+  options: IControlBaseOptions;
+} & FieldOpts<typeof VcEditor>;
+
+export type IGallery = {
+  props: ComponentProps<typeof VcGallery> | IControlBaseProps;
+  options: IControlBaseOptions;
+} & FieldOpts<typeof VcGallery>;
+
+export type IButton = {
+  props: ComponentProps<typeof VcButton>;
+  options: IControlBaseOptions;
+  slots?: Partial<Pick<ComponentSlots<typeof VcButton>, "default">>;
+} & FieldOpts<typeof VcButton>;
+
+export type IFieldset = {
+  columns?: number;
+  property?: string;
+  remove?: { method?: string };
+  fields?: ControlType[];
+};

package/shared/modules/index.ts

@@ -1,2 +1,3 @@
 export * from "./assets";
 export * from "./assets-manager";
+export * from "./dynamic";

package/shared/pages/InvitePage/index.ts

@@ -1,7 +1 @@
-import { createModule } from "./../../../core/plugins";
-import * as components from "./components";
-import * as locales from "./locales";
-
-export const InvitePage = createModule(components, locales);
-
 export * from "./components";

package/shared/pages/InvitePage/plugin.ts

@@ -0,0 +1,5 @@
+import { createModule } from "./../../../core/plugins";
+import * as components from "./components";
+import * as locales from "./locales";
+
+export const InvitePage = createModule(components, locales);

package/shared/pages/LoginPage/components/login/Login.vue

@@ -176,12 +176,11 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, computed, onMounted, inject } from "vue";
+import { ref, reactive, computed, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { useIsFormValid, Field, useIsFormDirty, useForm } from "vee-validate";
 import { useSettings, useUser } from "./../../../../../core/composables";
 import { RequestPasswordResult, SignInResults } from "./../../../../../core/types";
-import { CommonPageComposables } from "./../../../../../typings";
 import AzureAdIcon from "./../../../../../assets/img/AzureAd.svg";
 import { ExternalSignInProviderInfo } from "./../../../../../core/api/platform";
 import { useI18n } from "vue-i18n";
@@ -190,6 +189,7 @@ export interface Props {
   logo: string;
   background: string;
   title: string;
+  composable?: () => { forgotPassword: (args: { loginOrEmail: string }) => Promise<void> };
 }
 
 const props = defineProps<Props>();
@@ -200,11 +200,10 @@ useForm({ validateOnMount: false });
 const { getUiCustomizationSettings, uiSettings } = useSettings();
 const { t } = useI18n({ useScope: "global" });
 let useLogin;
-const injected = inject<CommonPageComposables>("commonPageComposables");
 const signInResult = ref<SignInResults>({ succeeded: true });
 const requestPassResult = ref<RequestPasswordResult>({ succeeded: true });
 const forgotPasswordRequestSent = ref(false);
-const { signIn, loading, externalSignIn, getExternalLoginProviders } = useUser();
+const { signIn, loading, externalSignIn, getExternalLoginProviders, isAuthenticated } = useUser();
 const isLogin = ref(true);
 const isValid = useIsFormValid();
 const isDirty = useIsFormDirty();
@@ -213,8 +212,8 @@ const loadingForgotPassword = ref(false);
 const loginProviders = ref<ExternalSignInProviderInfo[]>();
 let forgotPassword;
 
-if (injected) {
-  useLogin = injected?.useLogin;
+if (props.composable && typeof props.composable === "function") {
+  useLogin = props.composable;
 
   if (useLogin) {
     const { forgotPassword: forgot } = useLogin();

package/shared/pages/LoginPage/index.ts

@@ -1,2 +1 @@
-export * from "./plugin";
 export * from "./components";

package/shared/pages/LoginPage/plugin.ts

@@ -1,17 +1,5 @@
-import { App } from "vue";
 import { createModule } from "./../../../core/plugins";
 import * as components from "./components";
 import * as locales from "./locales";
-import { CommonPageComposables } from "./../../../typings";
 
-export const LoginPage = {
-  install(app: App, config: CommonPageComposables) {
-    // Register components
-    createModule(components, locales).install(app);
-
-    if (config) {
-      app.config.globalProperties.commonPageComposables = config;
-      app.provide("commonPageComposables", config);
-    }
-  },
-};
+export const LoginPage = createModule(components, locales);

package/shared/pages/ResetPasswordPage/index.ts

@@ -1,7 +1 @@
-import { createModule } from "./../../../core/plugins";
-import * as components from "./components";
-import * as locales from "./locales";
-
-export const ResetPasswordPage = createModule(components, locales);
-
 export * from "./components";

package/shared/pages/ResetPasswordPage/plugin.ts

@@ -0,0 +1,5 @@
+import { createModule } from "./../../../core/plugins";
+import * as components from "./components";
+import * as locales from "./locales";
+
+export const ResetPasswordPage = createModule(components, locales);

package/shared/pages/index.ts

@@ -1,12 +1,3 @@
-import { CommonPageComposables } from "./../../typings";
-
-// Declare globally
-declare module "@vue/runtime-core" {
-  export interface ComponentCustomProperties {
-    CommonPageComposables: CommonPageComposables;
-  }
-}
-
 export * from "./InvitePage";
 export * from "./LoginPage";
 export * from "./ResetPasswordPage";

package/shared/pages/plugin.ts

@@ -0,0 +1,3 @@
+export * from "./InvitePage/plugin";
+export * from "./LoginPage/plugin";
+export * from "./ResetPasswordPage/plugin";

package/ui/components/atoms/vc-button/index.ts

@@ -1,10 +1 @@
-import { VNode } from "vue";
-import _Button from "./vc-button.vue";
-
-export const VcButton = _Button as typeof _Button & {
-  new (): {
-    $slots: {
-      default: () => VNode[];
-    };
-  };
-};
+export { default as VcButton } from "./vc-button.vue";

package/ui/components/atoms/vc-button/vc-button.vue

@@ -8,7 +8,7 @@
       v-if="icon"
       :class="['vc-button__icon', iconClass]"
       :icon="icon"
-      :size="small ? 'xs' : 's'"
+      :size="small ? 'xs' : iconSize"
     ></VcIcon>
     <span
       v-if="$slots['default']"
@@ -18,13 +18,14 @@
     </span>
   </button>
 </template>
-
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { computed } from "vue";
 import { VcIcon } from "./../vc-icon";
 export interface Props {
   icon?: string;
   iconClass?: string;
+  iconSize?: InstanceType<typeof VcIcon>["$props"]["size"];
   variant?: "primary" | "warning" | "danger";
   disabled?: boolean;
   small?: boolean;
@@ -43,10 +44,15 @@ export interface Emits {
 
 const props = withDefaults(defineProps<Props>(), {
   variant: "primary",
+  iconSize: "s",
 });
 
 const emit = defineEmits<Emits>();
 
+defineSlots<{
+  default: (props?: any) => any;
+}>();
+
 const buttonClass = computed(() => {
   return [
     "vc-button",

package/ui/components/atoms/vc-card/index.ts

@@ -1,11 +1,3 @@
-import { VNode } from "vue";
 import _Card from "./vc-card.vue";
 
-export const VcCard = _Card as typeof _Card & {
-  new (): {
-    $slots: {
-      default: () => VNode[];
-      actions: () => VNode[];
-    };
-  };
-};
+export const VcCard = _Card as typeof _Card;

package/ui/components/atoms/vc-card/vc-card.vue

@@ -38,7 +38,7 @@
     </transition>
   </div>
 </template>
-
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { VcIcon } from "./../vc-icon";
 import { ref } from "vue";
@@ -63,6 +63,11 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
+defineSlots<{
+  default: (props?: any) => any;
+  actions: (props?: any) => any;
+}>();
+
 const isCollapsedInternal = ref(props.isCollapsed);
 
 function onHeaderClick() {

package/ui/components/atoms/vc-checkbox/index.ts

@@ -1,11 +1,3 @@
-import { VNode } from "vue";
 import _Checkbox from "./vc-checkbox.vue";
 
-export const VcCheckbox = _Checkbox as typeof _Checkbox & {
-  new (): {
-    $slots: {
-      default: () => VNode[];
-      error: () => VNode[];
-    };
-  };
-};
+export const VcCheckbox = _Checkbox as typeof _Checkbox;

package/ui/components/atoms/vc-checkbox/vc-checkbox.vue

@@ -3,13 +3,22 @@
     class="vc-checkbox"
     :class="{ 'vc-checkbox_disabled': disabled }"
   >
+    <!-- Input label -->
+    <VcLabel
+      v-if="label"
+      class="tw-mb-2"
+      :required="required"
+    >
+      <span>{{ label }}</span>
+    </VcLabel>
     <label class="vc-checkbox__label">
       <input
+        v-model="value"
         type="checkbox"
         class="vc-checkbox__input"
-        :checked="modelValue"
         :disabled="disabled"
-        @change="onChange"
+        :true-value="trueValue"
+        :false-value="falseValue"
       />
       <span class="vc-checkbox__checkmark"></span>
       <span
@@ -19,7 +28,7 @@
         <slot></slot>
       </span>
       <span
-        v-if="required"
+        v-if="!label && required"
         class="tw-text-[color:var(--checkbox-required-color)] tw-ml-1"
         >*</span
       >
@@ -35,28 +44,41 @@
     </slot>
   </div>
 </template>
-
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
+import { MaybeRef, computed, unref } from "vue";
 import { VcHint } from "./../vc-hint";
 export interface Props {
-  modelValue?: boolean;
+  modelValue?: MaybeRef<boolean>;
   disabled?: boolean;
   required?: boolean;
   name?: string;
   errorMessage?: string;
+  trueValue?: boolean;
+  falseValue?: boolean;
+  label?: string;
 }
 
 export interface Emits {
   (event: "update:modelValue", value: boolean): void;
 }
 
-withDefaults(defineProps<Props>(), { name: "Field" });
+const props = withDefaults(defineProps<Props>(), { name: "Field", trueValue: true, falseValue: false });
 const emit = defineEmits<Emits>();
 
-function onChange(e: Event) {
-  const newValue = (e.target as HTMLInputElement).checked;
-  emit("update:modelValue", newValue);
-}
+defineSlots<{
+  default: (props: any) => any;
+  error: (props: any) => any;
+}>();
+
+const value = computed({
+  get() {
+    return unref(props.modelValue);
+  },
+  set(newValue: boolean) {
+    emit("update:modelValue", newValue);
+  },
+});
 </script>
 
 <style lang="scss">

package/ui/components/atoms/vc-icon/vc-icon.vue

@@ -1,11 +1,12 @@
 <template>
-  <i :class="`vc-icon vc-icon_${size} ${(icon as string).toLowerCase()}`" />
+  <i :class="`vc-icon vc-icon_${size} vc-icon_${variant} ${(icon as string).toLowerCase()}`" />
 </template>
 
 <script lang="ts" setup>
 export interface Props {
   icon?: string;
   size?: "xs" | "s" | "m" | "l" | "xl" | "xxl" | "xxxl";
+  variant?: "warning" | "danger" | "success";
 }
 
 withDefaults(defineProps<Props>(), {
@@ -23,9 +24,14 @@ withDefaults(defineProps<Props>(), {
   --icon-size-xl: 22px;
   --icon-size-xxl: 30px;
   --icon-size-xxxl: 64px;
+
+  --icon-color-success: #99c17a;
+  --icon-color-danger: #f34747;
+  --icon-color-warning: #f89406;
 }
 
 $sizes: xs, s, m, l, xl, xxl, xxxl;
+$variants: warning, danger, success;
 
 .vc-icon {
   @each $size in $sizes {
@@ -33,5 +39,11 @@ $sizes: xs, s, m, l, xl, xxl, xxxl;
       @apply tw-text-[length:var(--icon-size-#{$size})];
     }
   }
+
+  @each $variant in $variants {
+    &_#{$variant} {
+      @apply tw-text-[color:var(--icon-color-#{$variant})];
+    }
+  }
 }
 </style>

package/ui/components/atoms/vc-label/index.ts

@@ -1,11 +1,3 @@
 import _Label from "./vc-label.vue";
-import { VNode } from "vue";
 
-export const VcLabel = _Label as typeof _Label & {
-  new (): {
-    $slots: {
-      default: () => VNode[];
-      tooltip: () => VNode[];
-    };
-  };
-};
+export const VcLabel = _Label as typeof _Label;

package/ui/components/atoms/vc-label/vc-label.vue

@@ -48,6 +48,11 @@ withDefaults(defineProps<Props>(), {
   tooltipIcon: "fas fa-info-circle",
 });
 
+defineSlots<{
+  default: (props: any) => any;
+  tooltip?: (props: any) => any;
+}>();
+
 const tooltipVisible = ref(false);
 </script>
 

package/ui/components/atoms/vc-status/index.ts

@@ -1,10 +1 @@
-import { VNode } from "vue";
-import _Status from "./vc-status.vue";
-
-export const VcStatus = _Status as typeof _Status & {
-  new (): {
-    $slots: {
-      default: () => VNode[];
-    };
-  };
-};
+export { default as VcStatus } from "./vc-status.vue";

package/ui/components/atoms/vc-status/vc-status.vue

@@ -6,7 +6,7 @@
     <slot></slot>
   </div>
 </template>
-
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 export interface Props {
   variant?: "info" | "warning" | "danger" | "success" | "light-danger";
@@ -18,6 +18,10 @@ withDefaults(defineProps<Props>(), {
   variant: "info",
   outline: true,
 });
+
+defineSlots<{
+  default: (props?: any) => any;
+}>();
 </script>
 
 <style lang="scss">

package/ui/components/atoms/vc-video/vc-video.vue

@@ -67,11 +67,11 @@ export interface Emits {
   (event: "click"): void;
 }
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   size: "auto",
 });
 
-const emit = defineEmits<Emits>();
+defineEmits<Emits>();
 </script>
 
 <style lang="scss">

package/ui/components/atoms/vc-widget/vc-widget.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="vc-widget"
+    class="vc-widget tw-relative"
     :class="{ 'vc-widget_disabled': disabled }"
     @click="onClick"
   >

package/ui/components/molecules/vc-editor/index.ts

@@ -1,10 +1 @@
-import { VNode } from "vue";
-import _Editor from "./vc-editor.vue";
-
-export const VcEditor = _Editor as typeof _Editor & {
-  new (): {
-    $slots: {
-      error: () => VNode[];
-    };
-  };
-};
+export { default as VcEditor } from "./vc-editor.vue";

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

@@ -35,6 +35,7 @@
       :modules="modules"
       content-type="html"
       :read-only="disabled"
+      :placeholder="placeholder"
       @update:content="onInput"
     />
     <slot
@@ -82,6 +83,11 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
+defineSlots<{
+  default: (props: any) => any;
+  error?: (props: any) => any;
+}>();
+
 const content = ref();
 const toolbar = {
   container: [
@@ -181,6 +187,16 @@ function isQuillEmpty(value: string) {
       tw-overflow-x-hidden
       hover:tw-bg-[color:var(--editor-scroll-color-hover)];
     }
+
+    &.ql-blank:before {
+      color: var(--textarea-placeholder-color);
+      content: attr(data-placeholder);
+      font-style: inherit;
+      left: 15px;
+      pointer-events: none;
+      position: absolute;
+      right: 15px;
+    }
   }
 }
 

package/ui/components/molecules/vc-file-upload/vc-file-upload.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="tw-flex tw-flex-col tw-flex-1">
     <div
+      v-loading="loading"
       class="vc-file-upload tw-relative tw-h-[155px] tw-box-border tw-border tw-border-dashed tw-border-[#c8dbea] tw-rounded-[6px] tw-p-4 tw-flex tw-flex-col tw-items-center tw-justify-center"
       :class="[
         `vc-file-upload_${variant}`,
@@ -16,7 +17,6 @@
       @dragenter.stop.prevent
       @dragleave.stop.prevent="dragLeave"
     >
-      <VcLoading :active="loading"></VcLoading>
       <VcIcon
         class="tw-text-[#c8dbea]"
         icon="fas fa-cloud-upload-alt"
@@ -54,7 +54,7 @@
 <script lang="ts" setup>
 import { getCurrentInstance, ref, unref } from "vue";
 import { useField } from "vee-validate";
-import { VcLoading, VcIcon, VcLink, VcHint } from "./../../";
+import { VcIcon, VcLink, VcHint } from "./../../";
 import { useI18n } from "vue-i18n";
 
 export interface Props {
@@ -80,6 +80,8 @@ const emit = defineEmits<Emits>();
 
 const { t } = useI18n({ useScope: "global" });
 
+// TODO refactor component and remove field-level validation
+
 const instance = getCurrentInstance();
 // Prepare validation rules using required and rules props combination
 const internalRules = unref(props.rules) || "";
@@ -102,8 +104,6 @@ const upload = async (event: Event) => {
     const target = event.target as HTMLInputElement;
     const fileList = target.files;
 
-    console.log(fileList);
-
     if (fileList && fileList.length) {
       emit("upload", fileList);
     }