@vc-shell/framework 1.0.340 → 1.1.0-alpha.2

package/shared/modules/dynamic/components/fields/StatusField.ts

@@ -1,110 +1,110 @@
-import { useI18n } from "vue-i18n";
-import { Component, ExtractPropTypes, computed, h, onMounted, ref, unref } from "vue";
-import componentProps from "./props";
-import { StatusSchema } from "../../types";
-import { StatusField } from "../factories";
-import { VcIcon } from "../../../../../ui/components";
-import { unrefNested } from "../../helpers/unrefNested";
-import VcButton from "../../../../../ui/components/atoms/vc-button/vc-button.vue";
-
-export default {
-  name: "StatusField",
-  props: componentProps,
-  setup(props: ExtractPropTypes<typeof componentProps> & { element: StatusSchema }) {
-    const { t } = useI18n({ useScope: "global" });
-    const hasOverflow = ref(false);
-    const isExpanded = ref(false);
-    const contentRef = ref<HTMLElement | null>(null);
-
-    const toggle = () => {
-      isExpanded.value = !isExpanded.value;
-    };
-
-    const checkOverflow = () => {
-      if (contentRef.value) {
-        hasOverflow.value = contentRef.value.scrollHeight > 100;
-      }
-    };
-
-    onMounted(() => {
-      checkOverflow();
-    });
-
-    return () => {
-      const slotContent = computed(() => {
-        if (props.element.content && typeof props.element.content === "string") {
-          return t(props.element.content);
-        } else if (
-          typeof props.element.content === "object" &&
-          "method" in props.element.content &&
-          props.element.content?.method
-        ) {
-          const method = unref(props.bladeContext.scope)?.[props.element.content?.method];
-          if (typeof method === "function") {
-            return method();
-          } else {
-            return method;
-          }
-        }
-
-        return null;
-      });
-
-      const field = StatusField({
-        props: Object.assign(
-          {
-            variant: props.element.variant,
-            outline: props.element.outline,
-            extend: props.element.extend,
-          },
-          unrefNested(props.baseProps),
-          {
-            class: unrefNested(props.baseProps).classNames ?? "",
-          },
-        ),
-        slots: {
-          default: () => {
-            return h("div", { class: "tw-flex tw-flex-row tw-items-center" }, [
-              props.element.icon
-                ? h(VcIcon, {
-                    icon: props.element.icon,
-                    size: props.element.iconSize,
-                    variant: props.element.iconVariant,
-                    class: "tw-mr-3",
-                  })
-                : undefined,
-              h("div", { class: "tw-flex tw-flex-col", style: "text-align: start;" }, [
-                h("div", { class: "tw-font-bold" }, computed(() => t(props.element.title ?? "")).value),
-                h(
-                  "div",
-                  {
-                    class: {
-                      "tw-overflow-hidden": true,
-                      "tw-max-h-[100px] tw-line-clamp-4": !isExpanded.value,
-                      "tw-max-h-[100%]": isExpanded.value,
-                    },
-                    ref: contentRef,
-                  },
-                  slotContent.value,
-                ),
-                hasOverflow.value
-                  ? h(VcButton, { text: true, class: "tw-self-end", onClick: toggle }, () =>
-                      isExpanded.value
-                        ? t("COMPONENTS.ATOMS.VC_STATUS.SHOW_LESS")
-                        : t("COMPONENTS.ATOMS.VC_STATUS.SHOW_MORE"),
-                    )
-                  : undefined,
-              ]),
-            ]);
-          },
-        },
-      });
-
-      return h(
-        field.component as Component,
-        { ...field.props, class: props.element.extend ? "tw-w-full tw-box-border" : "tw-flex tw-self-start" },
-        field.slots,
-      );
-    };
-  },
-};
+import { useI18n } from "vue-i18n";
+import { Component, ExtractPropTypes, computed, h, onMounted, ref, unref } from "vue";
+import componentProps from "./props";
+import { StatusSchema } from "../../types";
+import { StatusField } from "../factories";
+import { VcIcon } from "../../../../../ui/components";
+import { unrefNested } from "../../helpers/unrefNested";
+import VcButton from "../../../../../ui/components/atoms/vc-button/vc-button.vue";
+
+export default {
+  name: "StatusField",
+  props: componentProps,
+  setup(props: ExtractPropTypes<typeof componentProps> & { element: StatusSchema }) {
+    const { t } = useI18n({ useScope: "global" });
+    const hasOverflow = ref(false);
+    const isExpanded = ref(false);
+    const contentRef = ref<HTMLElement | null>(null);
+
+    const toggle = () => {
+      isExpanded.value = !isExpanded.value;
+    };
+
+    const checkOverflow = () => {
+      if (contentRef.value) {
+        hasOverflow.value = contentRef.value.scrollHeight > 100;
+      }
+    };
+
+    onMounted(() => {
+      checkOverflow();
+    });
+
+    return () => {
+      const slotContent = computed(() => {
+        if (props.element.content && typeof props.element.content === "string") {
+          return t(props.element.content);
+        } else if (
+          typeof props.element.content === "object" &&
+          "method" in props.element.content &&
+          props.element.content?.method
+        ) {
+          const method = unref(props.bladeContext.scope)?.[props.element.content?.method];
+          if (typeof method === "function") {
+            return method();
+          } else {
+            return method;
+          }
+        }
+
+        return null;
+      });
+
+      const field = StatusField({
+        props: Object.assign(
+          {
+            variant: props.element.variant,
+            outline: props.element.outline,
+            extend: props.element.extend,
+          },
+          unrefNested(props.baseProps),
+          {
+            class: unrefNested(props.baseProps).classNames ?? "",
+          },
+        ),
+        slots: {
+          default: () => {
+            return h("div", { class: "tw-flex tw-flex-row tw-items-center" }, [
+              props.element.icon
+                ? h(VcIcon, {
+                    icon: props.element.icon,
+                    size: props.element.iconSize,
+                    variant: props.element.iconVariant,
+                    class: "tw-mr-3",
+                  })
+                : undefined,
+              h("div", { class: "tw-flex tw-flex-col", style: "text-align: start;" }, [
+                h("div", { class: "tw-font-bold" }, computed(() => t(props.element.title ?? "")).value),
+                h(
+                  "div",
+                  {
+                    class: {
+                      "tw-overflow-hidden": true,
+                      "tw-max-h-[100px] tw-line-clamp-4": !isExpanded.value,
+                      "tw-max-h-[100%]": isExpanded.value,
+                    },
+                    ref: contentRef,
+                  },
+                  slotContent.value,
+                ),
+                hasOverflow.value
+                  ? h(VcButton, { text: true, class: "tw-self-end", onClick: toggle }, () =>
+                      isExpanded.value
+                        ? t("COMPONENTS.ATOMS.VC_STATUS.SHOW_LESS")
+                        : t("COMPONENTS.ATOMS.VC_STATUS.SHOW_MORE"),
+                    )
+                  : undefined,
+              ]),
+            ]);
+          },
+        },
+      });
+
+      return h(
+        field.component as Component,
+        { ...field.props, class: props.element.extend ? "tw-w-full tw-box-border" : "tw-flex tw-self-start" },
+        field.slots,
+      );
+    };
+  },
+};

package/shared/modules/dynamic/components/fields/SwitchField.ts

@@ -1,29 +1,29 @@
-import { Component, ExtractPropTypes, h } from "vue";
-import { Switch } from "../factories";
-import componentProps from "./props";
-import { SwitchSchema } from "../../types";
-import { unrefNested } from "../../helpers/unrefNested";
-
-export default {
-  name: "SwitchEl",
-  props: componentProps,
-  setup(props: ExtractPropTypes<typeof componentProps> & { element: SwitchSchema }) {
-    return () => {
-      const field = Switch({
-        props: Object.assign(
-          {},
-          {
-            trueValue: props.element.trueValue,
-            falseValue: props.element.falseValue,
-          },
-          unrefNested(props.baseProps),
-          {
-            class: unrefNested(props.baseProps).classNames ?? "",
-          },
-        ),
-      });
-
-      return h(field.component as Component, field.props);
-    };
-  },
-};
+import { Component, ExtractPropTypes, h } from "vue";
+import { Switch } from "../factories";
+import componentProps from "./props";
+import { SwitchSchema } from "../../types";
+import { unrefNested } from "../../helpers/unrefNested";
+
+export default {
+  name: "SwitchEl",
+  props: componentProps,
+  setup(props: ExtractPropTypes<typeof componentProps> & { element: SwitchSchema }) {
+    return () => {
+      const field = Switch({
+        props: Object.assign(
+          {},
+          {
+            trueValue: props.element.trueValue,
+            falseValue: props.element.falseValue,
+          },
+          unrefNested(props.baseProps),
+          {
+            class: unrefNested(props.baseProps).classNames ?? "",
+          },
+        ),
+      });
+
+      return h(field.component as Component, field.props);
+    };
+  },
+};

package/shared/modules/dynamic/components/fields/Table.ts

@@ -45,7 +45,6 @@ export default {
             icon: action.icon,
             title: computed(() => t(action.title)),
             type: action.type,
-            position: action.position,
             clickHandler: async (itemVal: (typeof items)[number], index: number) => {
               try {
                 await toValue(props.bladeContext.scope)?.[action.method]?.(itemVal, index);
@@ -188,7 +187,7 @@ export default {
         },
       });
 
-      return h(field.component as Component, field.props, field.slots);
+      return h(field.component as unknown as Component, field.props, field.slots);
     };
   },
 };

package/shared/modules/dynamic/components/fields/TextareaField.ts

@@ -1,46 +1,46 @@
-import { TextareaField } from "./../factories";
-import { TextareaSchema } from "./../../types/index";
-import { ExtractPropTypes, h, Component } from "vue";
-import componentProps from "./props";
-import ValidationField from "./ValidationField";
-import { unrefNested } from "../../helpers/unrefNested";
-
-export default {
-  name: "TextareaField",
-  props: componentProps,
-  setup(props: ExtractPropTypes<typeof componentProps> & { element: TextareaSchema }) {
-    return () => {
-      const field = TextareaField({
-        props: Object.assign(
-          {},
-          {
-            currentLanguage: props.currentLocale,
-            clearable: props.element.clearable || false,
-            maxlength: props.element.maxlength,
-          },
-          unrefNested(props.baseProps),
-          {
-            class: unrefNested(props.baseProps).classNames ?? "",
-          },
-        ),
-      });
-
-      const render = h(field.component as Component, field.props);
-
-      if (field.props.rules) {
-        return h(
-          ValidationField,
-          {
-            props: field.props,
-            index: props.elIndex,
-            rows: props.rows,
-            key: `${String(field.props.key)}_validation`,
-          },
-          () => render,
-        );
-      } else {
-        return render;
-      }
-    };
-  },
-};
+import { TextareaField } from "./../factories";
+import { TextareaSchema } from "./../../types/index";
+import { ExtractPropTypes, h, Component } from "vue";
+import componentProps from "./props";
+import ValidationField from "./ValidationField";
+import { unrefNested } from "../../helpers/unrefNested";
+
+export default {
+  name: "TextareaField",
+  props: componentProps,
+  setup(props: ExtractPropTypes<typeof componentProps> & { element: TextareaSchema }) {
+    return () => {
+      const field = TextareaField({
+        props: Object.assign(
+          {},
+          {
+            currentLanguage: props.currentLocale,
+            clearable: props.element.clearable || false,
+            maxlength: props.element.maxlength,
+          },
+          unrefNested(props.baseProps),
+          {
+            class: unrefNested(props.baseProps).classNames ?? "",
+          },
+        ),
+      });
+
+      const render = h(field.component as Component, field.props);
+
+      if (field.props.rules) {
+        return h(
+          ValidationField,
+          {
+            props: field.props,
+            index: props.elIndex,
+            rows: props.rows,
+            key: `${String(field.props.key)}_validation`,
+          },
+          () => render,
+        );
+      } else {
+        return render;
+      }
+    };
+  },
+};

package/shared/modules/dynamic/components/fields/ValidationField.ts

@@ -1,54 +1,54 @@
-import { computed, h, unref, useSlots, defineComponent, ComputedRef } from "vue";
-import { Field } from "vee-validate";
-import { reactify } from "@vueuse/core";
-
-const validationFieldProps = {
-  props: Object,
-  index: Number,
-  rows: Number,
-};
-
-export default defineComponent({
-  name: "ValidationField",
-  props: validationFieldProps,
-  setup(props) {
-    const slots = useSlots();
-    const fieldKey = computed(() =>
-      unref(props.props)?.multilanguage
-        ? `${String(props.props?.key)}_${unref(props.props?.currentLanguage)}`
-        : String(props.props?.key),
-    );
-
-    const fieldNameLang = reactify((name: string) => {
-      return props.props?.multilanguage ? name + "_" + props.props.currentLanguage : name;
-    });
-
-    return () =>
-      h(
-        Field,
-        {
-          rules: props.props?.rules,
-          modelValue: props.props?.modelValue,
-          label: props.props?.label,
-          key: fieldKey.value,
-          name: fieldNameLang(
-            (props.rows ?? 1) > 1 && (props.index ?? 0) >= 0
-              ? props.props?.name + "_" + props.index
-              : props.props?.name,
-          ).value,
-        },
-        {
-          default: ({ errorMessage, errors }: { errorMessage: ComputedRef<string | undefined>; errors: string[] }) => {
-            return slots.default?.().map((slot) =>
-              h(slot, {
-                ...props.props,
-                error: !!errors.length,
-                errorMessage,
-                key: fieldKey.value + "_control",
-              }),
-            );
-          },
-        },
-      );
-  },
-});
+import { computed, h, unref, useSlots, defineComponent, ComputedRef } from "vue";
+import { Field } from "vee-validate";
+import { reactify } from "@vueuse/core";
+
+const validationFieldProps = {
+  props: Object,
+  index: Number,
+  rows: Number,
+};
+
+export default defineComponent({
+  name: "ValidationField",
+  props: validationFieldProps,
+  setup(props) {
+    const slots = useSlots();
+    const fieldKey = computed(() =>
+      unref(props.props)?.multilanguage
+        ? `${String(props.props?.key)}_${unref(props.props?.currentLanguage)}`
+        : String(props.props?.key),
+    );
+
+    const fieldNameLang = reactify((name: string) => {
+      return props.props?.multilanguage ? name + "_" + props.props.currentLanguage : name;
+    });
+
+    return () =>
+      h(
+        Field,
+        {
+          rules: props.props?.rules,
+          modelValue: props.props?.modelValue,
+          label: props.props?.label,
+          key: fieldKey.value,
+          name: fieldNameLang(
+            (props.rows ?? 1) > 1 && (props.index ?? 0) >= 0
+              ? props.props?.name + "_" + props.index
+              : props.props?.name,
+          ).value,
+        },
+        {
+          default: ({ errorMessage, errors }: { errorMessage: ComputedRef<string | undefined>; errors: string[] }) => {
+            return slots.default?.().map((slot) =>
+              h(slot, {
+                ...props.props,
+                error: !!errors.length,
+                errorMessage,
+                key: fieldKey.value + "_control",
+              }),
+            );
+          },
+        },
+      );
+  },
+});

package/shared/modules/dynamic/components/fields/VideoField.ts

@@ -1,30 +1,30 @@
-import { Component, ExtractPropTypes, h, toValue } from "vue";
-import { VideoField } from "../factories";
-import componentProps from "./props";
-import { VideoSchema } from "../../types";
-import { unrefNested } from "../../helpers/unrefNested";
-
-export default {
-  name: "VideoField",
-  props: componentProps,
-  setup(props: ExtractPropTypes<typeof componentProps> & { element: VideoSchema }) {
-    return () => {
-      const field = VideoField({
-        props: Object.assign(
-          {},
-          {
-            source: toValue(props.baseProps.modelValue),
-          },
-          unrefNested(props.baseProps),
-          {
-            class: unrefNested(props.baseProps).classNames ?? "",
-          },
-        ),
-      });
-
-      const render = h(field.component as Component, field.props);
-
-      return render;
-    };
-  },
-};
+import { Component, ExtractPropTypes, h, toValue } from "vue";
+import { VideoField } from "../factories";
+import componentProps from "./props";
+import { VideoSchema } from "../../types";
+import { unrefNested } from "../../helpers/unrefNested";
+
+export default {
+  name: "VideoField",
+  props: componentProps,
+  setup(props: ExtractPropTypes<typeof componentProps> & { element: VideoSchema }) {
+    return () => {
+      const field = VideoField({
+        props: Object.assign(
+          {},
+          {
+            source: toValue(props.baseProps.modelValue),
+          },
+          unrefNested(props.baseProps),
+          {
+            class: unrefNested(props.baseProps).classNames ?? "",
+          },
+        ),
+      });
+
+      const render = h(field.component as Component, field.props);
+
+      return render;
+    };
+  },
+};

package/shared/modules/dynamic/components/fields/props.ts

@@ -1,39 +1,39 @@
-import { ComputedRef, PropType, ToRefs, UnwrapNestedRefs, VNode } from "vue";
-import { DetailsBladeContext } from "../../factories";
-import { IControlBaseProps } from "../../types/models";
-import { ControlSchema } from "../../types";
-
-export default {
-  baseProps: {
-    type: Object as PropType<ToRefs<IControlBaseProps>>,
-    default: () => ({}) as ToRefs<IControlBaseProps>,
-  },
-  element: {
-    type: Object as PropType<ControlSchema>,
-    default: () => ({}) as ControlSchema,
-  },
-  bladeContext: {
-    type: Object as PropType<UnwrapNestedRefs<DetailsBladeContext>>,
-    default: () => ({}) as DetailsBladeContext,
-  },
-  fields: {
-    type: Object as PropType<ComputedRef<VNode[][]>>,
-    default: () => ({}) as ComputedRef<VNode[][]>,
-  },
-  formData: {
-    type: Object as PropType<ToRefs<Record<string, unknown>>>,
-    default: () => ({}) as ToRefs<Record<string, unknown>>,
-  },
-  fieldContext: {
-    type: Object,
-  },
-  currentLocale: {
-    type: String,
-  },
-  elIndex: {
-    type: Number,
-  },
-  rows: {
-    type: Number,
-  },
-};
+import { ComputedRef, PropType, ToRefs, UnwrapNestedRefs, VNode } from "vue";
+import { DetailsBladeContext } from "../../factories";
+import { IControlBaseProps } from "../../types/models";
+import { ControlSchema } from "../../types";
+
+export default {
+  baseProps: {
+    type: Object as PropType<ToRefs<IControlBaseProps>>,
+    default: () => ({}) as ToRefs<IControlBaseProps>,
+  },
+  element: {
+    type: Object as PropType<ControlSchema>,
+    default: () => ({}) as ControlSchema,
+  },
+  bladeContext: {
+    type: Object as PropType<UnwrapNestedRefs<DetailsBladeContext>>,
+    default: () => ({}) as DetailsBladeContext,
+  },
+  fields: {
+    type: Object as PropType<ComputedRef<VNode[][]>>,
+    default: () => ({}) as ComputedRef<VNode[][]>,
+  },
+  formData: {
+    type: Object as PropType<ToRefs<Record<string, unknown>>>,
+    default: () => ({}) as ToRefs<Record<string, unknown>>,
+  },
+  fieldContext: {
+    type: Object,
+  },
+  currentLocale: {
+    type: String,
+  },
+  elIndex: {
+    type: Number,
+  },
+  rows: {
+    type: Number,
+  },
+};