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

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

@@ -1,81 +1,81 @@
-import { ExtractPropTypes, h, VNode, Component, toValue } from "vue";
-import { InputField } from "../factories";
-import componentProps from "./props";
-import ValidationField from "./ValidationField";
-import { InputSchema, ControlSchema } from "../../types";
-import { nodeBuilder } from "../../helpers/nodeBuilder";
-import { unrefNested } from "../../helpers/unrefNested";
-import { methodHandler } from "../../helpers/methodHandler";
-
-const slotsMap = {
-  append: "append",
-  prepend: "prepend",
-  appendInner: "append-inner",
-  prependInner: "prepend-inner",
-};
-
-export default {
-  name: "InputField",
-  props: componentProps,
-  setup(props: ExtractPropTypes<typeof componentProps> & { element: InputSchema }) {
-    return () => {
-      const field = InputField({
-        props: Object.assign(
-          {},
-          {
-            type: props.element.variant,
-            currentLanguage: props.currentLocale,
-            clearable: props.element.clearable || false,
-            maxlength: props.element.maxlength,
-            datePickerOptions: props.element.datePickerOptions,
-            loading: props.element.loading?.method
-              ? methodHandler(
-                  toValue(props.bladeContext?.scope)?.[props.element.loading?.method],
-                  props.fieldContext,
-                  props.element,
-                )
-              : false,
-          },
-          unrefNested(props.baseProps),
-          {
-            class: unrefNested(props.baseProps).classNames ?? "",
-          },
-        ),
-        slots: Object.entries(slotsMap).reduce(
-          (acc, [key, value]) => {
-            if (props.element[key as keyof InputSchema]) {
-              acc[value as keyof InputSchema] = () =>
-                nodeBuilder({
-                  controlSchema: props.element[key as keyof InputSchema] as ControlSchema,
-                  parentId: `${(props.element[key as keyof InputSchema] as ControlSchema).id}`,
-                  internalContext: props.fieldContext ?? {},
-                  bladeContext: props.bladeContext,
-                  currentLocale: props.currentLocale ?? "en-US",
-                  formData: props.formData,
-                });
-            }
-            return acc;
-          },
-          {} as Record<keyof InputSchema, () => VNode | false>,
-        ),
-      });
-
-      const render = h(field.component as Component, field.props, field.slots);
-
-      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 { ExtractPropTypes, h, VNode, Component, toValue } from "vue";
+import { InputField } from "../factories";
+import componentProps from "./props";
+import ValidationField from "./ValidationField";
+import { InputSchema, ControlSchema } from "../../types";
+import { nodeBuilder } from "../../helpers/nodeBuilder";
+import { unrefNested } from "../../helpers/unrefNested";
+import { methodHandler } from "../../helpers/methodHandler";
+
+const slotsMap = {
+  append: "append",
+  prepend: "prepend",
+  appendInner: "append-inner",
+  prependInner: "prepend-inner",
+};
+
+export default {
+  name: "InputField",
+  props: componentProps,
+  setup(props: ExtractPropTypes<typeof componentProps> & { element: InputSchema }) {
+    return () => {
+      const field = InputField({
+        props: Object.assign(
+          {},
+          {
+            type: props.element.variant,
+            currentLanguage: props.currentLocale,
+            clearable: props.element.clearable || false,
+            maxlength: props.element.maxlength,
+            datePickerOptions: props.element.datePickerOptions,
+            loading: props.element.loading?.method
+              ? methodHandler(
+                  toValue(props.bladeContext?.scope)?.[props.element.loading?.method],
+                  props.fieldContext,
+                  props.element,
+                )
+              : false,
+          },
+          unrefNested(props.baseProps),
+          {
+            class: unrefNested(props.baseProps).classNames ?? "",
+          },
+        ),
+        slots: Object.entries(slotsMap).reduce(
+          (acc, [key, value]) => {
+            if (props.element[key as keyof InputSchema]) {
+              acc[value as keyof InputSchema] = () =>
+                nodeBuilder({
+                  controlSchema: props.element[key as keyof InputSchema] as ControlSchema,
+                  parentId: `${(props.element[key as keyof InputSchema] as ControlSchema).id}`,
+                  internalContext: props.fieldContext ?? {},
+                  bladeContext: props.bladeContext,
+                  currentLocale: props.currentLocale ?? "en-US",
+                  formData: props.formData,
+                });
+            }
+            return acc;
+          },
+          {} as Record<keyof InputSchema, () => VNode | false>,
+        ),
+      });
+
+      const render = h(field.component as Component, field.props, field.slots);
+
+      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/MultivalueField.ts

@@ -1,68 +1,68 @@
-import { ComponentSlots } from "../../../../utilities/vueUtils";
-import { h, resolveComponent, ExtractPropTypes, Component, VNode } from "vue";
-import { MultivalueField } from "../factories";
-import componentProps from "./props";
-import ValidationField from "./ValidationField";
-import { MultivalueSchema } from "../../types";
-import { VcMultivalue } from "../../../../../ui/components";
-import { unrefNested } from "../../helpers/unrefNested";
-
-type TScope = Parameters<ComponentSlots<typeof VcMultivalue>["option"]>["0"] &
-  Parameters<ComponentSlots<typeof VcMultivalue>["selected-item"]>["0"];
-
-export default {
-  name: "MultivalueField",
-  props: componentProps,
-  setup(props: ExtractPropTypes<typeof componentProps> & { element: MultivalueSchema }) {
-    return () => {
-      const field = MultivalueField({
-        props: Object.assign(
-          {},
-          {
-            multivalue: props.element.multivalue,
-            type: props.element.variant,
-            optionValue: props.element.optionValue,
-            optionLabel: props.element.optionLabel,
-            options: props.element.options ? props.bladeContext.scope?.[props.element.options] : undefined,
-            currentLanguage: props.currentLocale,
-          },
-          unrefNested(props.baseProps),
-          {
-            class: unrefNested(props.baseProps).classNames ?? "",
-          },
-        ),
-
-        slots:
-          props.element.customTemplate &&
-          ["option", "selected-item"].reduce(
-            (obj, slot) => {
-              obj[slot] = (scope: TScope) =>
-                h(resolveComponent(props.element.customTemplate?.component as string), {
-                  context: scope,
-                  slotName: slot,
-                });
-              return obj;
-            },
-            {} as Record<string, (scope: TScope) => VNode>,
-          ),
-      });
-
-      const render = h(field.component as unknown as Component, field.props, field.slots);
-
-      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 { ComponentSlots } from "../../../../utilities/vueUtils";
+import { h, resolveComponent, ExtractPropTypes, Component, VNode } from "vue";
+import { MultivalueField } from "../factories";
+import componentProps from "./props";
+import ValidationField from "./ValidationField";
+import { MultivalueSchema } from "../../types";
+import { VcMultivalue } from "../../../../../ui/components";
+import { unrefNested } from "../../helpers/unrefNested";
+
+type TScope = Parameters<ComponentSlots<typeof VcMultivalue>["option"]>["0"] &
+  Parameters<ComponentSlots<typeof VcMultivalue>["selected-item"]>["0"];
+
+export default {
+  name: "MultivalueField",
+  props: componentProps,
+  setup(props: ExtractPropTypes<typeof componentProps> & { element: MultivalueSchema }) {
+    return () => {
+      const field = MultivalueField({
+        props: Object.assign(
+          {},
+          {
+            multivalue: props.element.multivalue,
+            type: props.element.variant,
+            optionValue: props.element.optionValue,
+            optionLabel: props.element.optionLabel,
+            options: props.element.options ? props.bladeContext.scope?.[props.element.options] : undefined,
+            currentLanguage: props.currentLocale,
+          },
+          unrefNested(props.baseProps),
+          {
+            class: unrefNested(props.baseProps).classNames ?? "",
+          },
+        ),
+
+        slots:
+          props.element.customTemplate &&
+          ["option", "selected-item"].reduce(
+            (obj, slot) => {
+              obj[slot] = (scope: TScope) =>
+                h(resolveComponent(props.element.customTemplate?.component as string), {
+                  context: scope,
+                  slotName: slot,
+                });
+              return obj;
+            },
+            {} as Record<string, (scope: TScope) => VNode>,
+          ),
+      });
+
+      const render = h(field.component as unknown as Component, field.props, field.slots);
+
+      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/RadioButtonGroup.ts

@@ -1,82 +1,82 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { Component, ExtractPropTypes, h, toValue, unref } from "vue";
-import { unrefNested } from "../../helpers/unrefNested";
-import componentProps from "./props";
-import ValidationField from "./ValidationField";
-import { RadioButton } from "../factories";
-import { RadioButtonSchema } from "../../types";
-import { getModel } from "../../helpers/getters";
-import * as _ from "lodash-es";
-import { VcLabel, VcHint } from "../../../../../ui/components";
-
-export default {
-  name: "RadioButtonGroup",
-  props: componentProps,
-  setup(props: ExtractPropTypes<typeof componentProps> & { element: RadioButtonSchema }) {
-    return () => {
-      const label = unrefNested(props.baseProps).label;
-      const options: any[] =
-        toValue(getModel(props.element.options, props.fieldContext ?? {})) ||
-        toValue(unref(props.bladeContext.scope)?.[props.element.options]);
-
-      const fields = options.map((opt) =>
-        RadioButton({
-          props: Object.assign(
-            {},
-            {
-              value: props.element.optionValue ? toValue(getModel(props.element.optionValue, opt ?? {})) : opt,
-              binary: props.element.binary,
-              label: props.element.optionLabel ? toValue(getModel(props.element.optionLabel, opt ?? {})) : opt,
-            },
-            _.omit(unrefNested(props.baseProps), "label"),
-            {
-              class: unrefNested(props.baseProps).classNames ?? "",
-            },
-          ),
-        }),
-      );
-
-      const render = [
-        label
-          ? h(
-              VcLabel,
-              { required: props.element.rules?.required },
-              {
-                default: () => label,
-                tooltip: unrefNested(props.baseProps).tooltip ? () => unrefNested(props.baseProps).tooltip : undefined,
-              },
-            )
-          : undefined,
-        fields.map((field) => h(field.component as Component, field.props)),
-        h({
-          props: ["error", "errorMessage"],
-          components: { VcHint },
-          template: `
-            <VcHint v-if="error" class="vc-textarea__error">
-              {{ errorMessage }}
-            </VcHint>
-            `,
-        }),
-      ];
-
-      if (props.element.rules) {
-        return h(
-          ValidationField,
-          {
-            props: {
-              rules: props.element.rules,
-              modelValue: unrefNested(props.baseProps).modelValue,
-              label: unrefNested(props.baseProps).label,
-              name: unrefNested(props.baseProps).name,
-            },
-            index: props.elIndex,
-            rows: props.rows,
-          },
-          () => render,
-        );
-      } else {
-        return render;
-      }
-    };
-  },
-};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Component, ExtractPropTypes, h, toValue, unref } from "vue";
+import { unrefNested } from "../../helpers/unrefNested";
+import componentProps from "./props";
+import ValidationField from "./ValidationField";
+import { RadioButton } from "../factories";
+import { RadioButtonSchema } from "../../types";
+import { getModel } from "../../helpers/getters";
+import * as _ from "lodash-es";
+import { VcLabel, VcHint } from "../../../../../ui/components";
+
+export default {
+  name: "RadioButtonGroup",
+  props: componentProps,
+  setup(props: ExtractPropTypes<typeof componentProps> & { element: RadioButtonSchema }) {
+    return () => {
+      const label = unrefNested(props.baseProps).label;
+      const options: any[] =
+        toValue(getModel(props.element.options, props.fieldContext ?? {})) ||
+        toValue(unref(props.bladeContext.scope)?.[props.element.options]);
+
+      const fields = options.map((opt) =>
+        RadioButton({
+          props: Object.assign(
+            {},
+            {
+              value: props.element.optionValue ? toValue(getModel(props.element.optionValue, opt ?? {})) : opt,
+              binary: props.element.binary,
+              label: props.element.optionLabel ? toValue(getModel(props.element.optionLabel, opt ?? {})) : opt,
+            },
+            _.omit(unrefNested(props.baseProps), "label"),
+            {
+              class: unrefNested(props.baseProps).classNames ?? "",
+            },
+          ),
+        }),
+      );
+
+      const render = [
+        label
+          ? h(
+              VcLabel,
+              { required: props.element.rules?.required },
+              {
+                default: () => label,
+                tooltip: unrefNested(props.baseProps).tooltip ? () => unrefNested(props.baseProps).tooltip : undefined,
+              },
+            )
+          : undefined,
+        fields.map((field) => h(field.component as Component, field.props)),
+        h({
+          props: ["error", "errorMessage"],
+          components: { VcHint },
+          template: `
+            <VcHint v-if="error" class="vc-textarea__error">
+              {{ errorMessage }}
+            </VcHint>
+            `,
+        }),
+      ];
+
+      if (props.element.rules) {
+        return h(
+          ValidationField,
+          {
+            props: {
+              rules: props.element.rules,
+              modelValue: unrefNested(props.baseProps).modelValue,
+              label: unrefNested(props.baseProps).label,
+              name: unrefNested(props.baseProps).name,
+            },
+            index: props.elIndex,
+            rows: props.rows,
+          },
+          () => render,
+        );
+      } else {
+        return render;
+      }
+    };
+  },
+};

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

@@ -1,28 +1,28 @@
-import { Component, ExtractPropTypes, h } from "vue";
-import { Rating } from "../factories";
-import componentProps from "./props";
-import { RatingSchema } from "../../types";
-import { unrefNested } from "../../helpers/unrefNested";
-
-export default {
-  name: "RatingEl",
-  props: componentProps,
-  setup(props: ExtractPropTypes<typeof componentProps> & { element: RatingSchema }) {
-    return () => {
-      const field = Rating({
-        props: Object.assign(
-          {},
-          {
-            variant: props.element.type,
-          },
-          unrefNested(props.baseProps),
-          {
-            class: unrefNested(props.baseProps).classNames ?? "",
-          },
-        ),
-      });
-
-      return h(field.component as Component, field.props);
-    };
-  },
-};
+import { Component, ExtractPropTypes, h } from "vue";
+import { Rating } from "../factories";
+import componentProps from "./props";
+import { RatingSchema } from "../../types";
+import { unrefNested } from "../../helpers/unrefNested";
+
+export default {
+  name: "RatingEl",
+  props: componentProps,
+  setup(props: ExtractPropTypes<typeof componentProps> & { element: RatingSchema }) {
+    return () => {
+      const field = Rating({
+        props: Object.assign(
+          {},
+          {
+            variant: props.element.type,
+          },
+          unrefNested(props.baseProps),
+          {
+            class: unrefNested(props.baseProps).classNames ?? "",
+          },
+        ),
+      });
+
+      return h(field.component as Component, field.props);
+    };
+  },
+};

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

@@ -1,72 +1,72 @@
-import { ComponentSlots } from "../../../../utilities/vueUtils";
-import { h, resolveComponent, ExtractPropTypes, Component, VNode } from "vue";
-import { SelectField } from "../factories";
-import componentProps from "./props";
-import ValidationField from "./ValidationField";
-import { SelectSchema } from "../../types";
-import { VcSelect } from "../../../../../ui/components";
-import { unrefNested } from "../../helpers/unrefNested";
-
-type TScope =
-  | Parameters<ComponentSlots<typeof VcSelect>["option"]>["0"]
-  | Parameters<ComponentSlots<typeof VcSelect>["selected-item"]>["0"];
-
-export default {
-  name: "SelectField",
-  props: componentProps,
-  setup(props: ExtractPropTypes<typeof componentProps> & { element: SelectSchema }) {
-    return () => {
-      const field = SelectField({
-        props: Object.assign(
-          {},
-          {
-            optionValue: props.element.optionValue,
-            optionLabel: props.element.optionLabel,
-            emitValue: props.element.emitValue,
-            mapOptions: props.element.mapOptions,
-            options: props.bladeContext.scope?.[props.element.optionsMethod],
-            currentLanguage: props.currentLocale,
-            clearable: props.element.clearable || false,
-            searchable: props.element.searchable || false,
-            multiple: props.element.multiple || false,
-          },
-          unrefNested(props.baseProps),
-          {
-            class: unrefNested(props.baseProps).classNames ?? "",
-          },
-        ),
-
-        slots:
-          props.element.customTemplate &&
-          ["selected-item", "option"].reduce(
-            (obj, slot) => {
-              obj[slot] = (scope: TScope) =>
-                h(resolveComponent(props.element.customTemplate?.component as string), {
-                  context: scope,
-                  slotName: slot,
-                });
-              return obj;
-            },
-            {} as Record<string, (scope: TScope) => VNode>,
-          ),
-      });
-
-      const render = h(field.component as unknown as Component, field.props, field.slots);
-
-      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 { ComponentSlots } from "../../../../utilities/vueUtils";
+import { h, resolveComponent, ExtractPropTypes, Component, VNode } from "vue";
+import { SelectField } from "../factories";
+import componentProps from "./props";
+import ValidationField from "./ValidationField";
+import { SelectSchema } from "../../types";
+import { VcSelect } from "../../../../../ui/components";
+import { unrefNested } from "../../helpers/unrefNested";
+
+type TScope =
+  | Parameters<ComponentSlots<typeof VcSelect>["option"]>["0"]
+  | Parameters<ComponentSlots<typeof VcSelect>["selected-item"]>["0"];
+
+export default {
+  name: "SelectField",
+  props: componentProps,
+  setup(props: ExtractPropTypes<typeof componentProps> & { element: SelectSchema }) {
+    return () => {
+      const field = SelectField({
+        props: Object.assign(
+          {},
+          {
+            optionValue: props.element.optionValue,
+            optionLabel: props.element.optionLabel,
+            emitValue: props.element.emitValue,
+            mapOptions: props.element.mapOptions,
+            options: props.bladeContext.scope?.[props.element.optionsMethod],
+            currentLanguage: props.currentLocale,
+            clearable: props.element.clearable || false,
+            searchable: props.element.searchable || false,
+            multiple: props.element.multiple || false,
+          },
+          unrefNested(props.baseProps),
+          {
+            class: unrefNested(props.baseProps).classNames ?? "",
+          },
+        ),
+
+        slots:
+          props.element.customTemplate &&
+          ["selected-item", "option"].reduce(
+            (obj, slot) => {
+              obj[slot] = (scope: TScope) =>
+                h(resolveComponent(props.element.customTemplate?.component as string), {
+                  context: scope,
+                  slotName: slot,
+                });
+              return obj;
+            },
+            {} as Record<string, (scope: TScope) => VNode>,
+          ),
+      });
+
+      const render = h(field.component as unknown as Component, field.props, field.slots);
+
+      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;
+      }
+    };
+  },
+};