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

package/shared/modules/dynamic/components/SchemaRender.ts

@@ -1,102 +1,102 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import {
-  PropType,
-  ToRefs,
-  toRefs,
-  watch,
-  ExtractPropTypes,
-  h,
-  VNode,
-  defineComponent,
-  UnwrapNestedRefs,
-  reactive,
-} from "vue";
-import { ControlSchema } from "../types";
-import * as _ from "lodash-es";
-import { DetailsBladeContext } from "../factories/types";
-import { nodeBuilder } from "../helpers/nodeBuilder";
-import { methodHandler } from "../helpers/methodHandler";
-import { toValue } from "@vueuse/core";
-import { safeIn } from "../helpers/safeIn";
-import { unrefNested } from "../helpers/unrefNested";
-import { usePermissions } from "../../../../core/composables";
-
-const schemeRenderProps = {
-  context: {
-    type: Object as PropType<UnwrapNestedRefs<DetailsBladeContext<any, any>>>,
-    default: () => ({}) as DetailsBladeContext,
-  },
-  modelValue: {
-    type: Object as PropType<Record<string, any>>,
-    required: true,
-    default: () => ({}),
-  },
-  uiSchema: {
-    type: Array as PropType<ControlSchema[]>,
-    required: true,
-    default: (): ControlSchema[] => [],
-  },
-  currentLocale: {
-    type: String,
-    default: "",
-  },
-};
-
-export default defineComponent({
-  name: "SchemaRender",
-  props: schemeRenderProps,
-  emits: ["update:modelValue"],
-  setup(props: ExtractPropTypes<typeof schemeRenderProps>, ctx) {
-    const { currentLocale } = toRefs(props);
-    const internalFormData = reactive({});
-    const { hasAccess } = usePermissions();
-
-    watch(
-      () => props.modelValue,
-      (newVal): void => {
-        if (!_.isEqual(internalFormData, toRefs(newVal))) {
-          Object.assign(internalFormData, toRefs(newVal));
-        }
-      },
-      { deep: true, immediate: true },
-    );
-
-    function updateFormData(newVal: ToRefs<unknown>) {
-      if (!_.isEqual(toRefs(newVal), internalFormData)) {
-        ctx.emit("update:modelValue", unrefNested(newVal));
-      }
-    }
-
-    return () =>
-      h(
-        "div",
-        { class: "tw-flex tw-flex-col tw-gap-4" },
-        props.uiSchema.reduce((arr, field): VNode[] => {
-          if (safeIn("permissions", field) && !hasAccess(field.permissions)) {
-            return arr;
-          }
-
-          if (
-            safeIn("visibility", field) &&
-            field.visibility?.method &&
-            !methodHandler(toValue(props.context?.scope)?.[field.visibility.method], props.context, field)
-          ) {
-            return arr;
-          }
-
-          return [
-            ...arr,
-            nodeBuilder({
-              controlSchema: field,
-              parentId: field.id,
-              internalContext: internalFormData,
-              bladeContext: props.context,
-              currentLocale: currentLocale,
-              formData: internalFormData,
-              updateFormData,
-            }),
-          ];
-        }, [] as VNode[]),
-      );
-  },
-});
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  PropType,
+  ToRefs,
+  toRefs,
+  watch,
+  ExtractPropTypes,
+  h,
+  VNode,
+  defineComponent,
+  UnwrapNestedRefs,
+  reactive,
+} from "vue";
+import { ControlSchema } from "../types";
+import * as _ from "lodash-es";
+import { DetailsBladeContext } from "../factories/types";
+import { nodeBuilder } from "../helpers/nodeBuilder";
+import { methodHandler } from "../helpers/methodHandler";
+import { toValue } from "@vueuse/core";
+import { safeIn } from "../helpers/safeIn";
+import { unrefNested } from "../helpers/unrefNested";
+import { usePermissions } from "../../../../core/composables";
+
+const schemeRenderProps = {
+  context: {
+    type: Object as PropType<UnwrapNestedRefs<DetailsBladeContext<any, any>>>,
+    default: () => ({}) as DetailsBladeContext,
+  },
+  modelValue: {
+    type: Object as PropType<Record<string, any>>,
+    required: true,
+    default: () => ({}),
+  },
+  uiSchema: {
+    type: Array as PropType<ControlSchema[]>,
+    required: true,
+    default: (): ControlSchema[] => [],
+  },
+  currentLocale: {
+    type: String,
+    default: "",
+  },
+};
+
+export default defineComponent({
+  name: "SchemaRender",
+  props: schemeRenderProps,
+  emits: ["update:modelValue"],
+  setup(props: ExtractPropTypes<typeof schemeRenderProps>, ctx) {
+    const { currentLocale } = toRefs(props);
+    const internalFormData = reactive({});
+    const { hasAccess } = usePermissions();
+
+    watch(
+      () => props.modelValue,
+      (newVal): void => {
+        if (!_.isEqual(internalFormData, toRefs(newVal))) {
+          Object.assign(internalFormData, toRefs(newVal));
+        }
+      },
+      { deep: true, immediate: true },
+    );
+
+    function updateFormData(newVal: ToRefs<unknown>) {
+      if (!_.isEqual(toRefs(newVal), internalFormData)) {
+        ctx.emit("update:modelValue", unrefNested(newVal));
+      }
+    }
+
+    return () =>
+      h(
+        "div",
+        { class: "tw-flex tw-flex-col tw-gap-4" },
+        props.uiSchema.reduce((arr, field): VNode[] => {
+          if (safeIn("permissions", field) && !hasAccess(field.permissions)) {
+            return arr;
+          }
+
+          if (
+            safeIn("visibility", field) &&
+            field.visibility?.method &&
+            !methodHandler(toValue(props.context?.scope)?.[field.visibility.method], props.context, field)
+          ) {
+            return arr;
+          }
+
+          return [
+            ...arr,
+            nodeBuilder({
+              controlSchema: field,
+              parentId: field.id,
+              internalContext: internalFormData,
+              bladeContext: props.context,
+              currentLocale: currentLocale,
+              formData: internalFormData,
+              updateFormData,
+            }),
+          ];
+        }, [] as VNode[]),
+      );
+  },
+});

package/shared/modules/dynamic/components/factories.ts

@@ -1,244 +1,244 @@
-import {
-  IMultivalueField,
-  IControlBaseProps,
-  ISelectField,
-  IInputField,
-  ICardCollection,
-  IEditorField,
-  IGallery,
-  IDynamicProperties,
-  ICheckbox,
-  IButton,
-  IInputCurrency,
-  IFieldset,
-  IStatusField,
-  IContentField,
-  IVideoField,
-  IImageField,
-  ITextareaField,
-  ISwitch,
-  ITable,
-  IRating,
-  IRadioButton,
-} from "./../types/models";
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { markRaw } from "vue";
-import {
-  VcButton,
-  VcCard,
-  VcCheckbox,
-  VcDynamicProperty,
-  VcEditor,
-  VcField,
-  VcGallery,
-  VcImage,
-  VcInput,
-  VcInputCurrency,
-  VcSelect,
-  VcStatus,
-  VcVideo,
-  VcTextarea,
-  VcMultivalue,
-  VcSwitch,
-  VcTable,
-  VcRating,
-  VcRadioButton,
-} from "../../../../ui/components";
-
-export const ControlBaseProps = ({
-  rules = undefined,
-  label = undefined,
-  placeholder = undefined,
-  disabled = false,
-  required = false,
-  name = undefined,
-  tooltip = undefined,
-  key = undefined,
-  classNames = undefined,
-  ...rest
-}: IControlBaseProps): IControlBaseProps => ({
-  key,
-  rules,
-  label,
-  placeholder,
-  disabled,
-  required,
-  name,
-  tooltip,
-  classNames,
-  ...rest,
-});
-
-export const MultivalueField = ({ props, slots }: IMultivalueField): IMultivalueField => ({
-  component: markRaw(VcMultivalue),
-  props: {
-    ...ControlBaseProps(props),
-    ...props,
-  },
-
-  slots,
-});
-
-export const SelectField = ({ props, slots }: ISelectField): ISelectField => ({
-  component: markRaw(VcSelect) as any,
-  props: {
-    ...ControlBaseProps(props),
-    ...props,
-  },
-
-  slots,
-});
-
-export const StatusField = ({ props, slots }: IStatusField): IStatusField => ({
-  component: markRaw(VcStatus),
-  props: {
-    ...ControlBaseProps(props),
-    ...props,
-  },
-
-  slots,
-});
-
-export const InputField = ({ props, slots }: IInputField): IInputField => ({
-  component: markRaw(VcInput),
-  props: {
-    ...ControlBaseProps(props),
-    ...props,
-  },
-
-  slots,
-});
-
-export const TextareaField = ({ props }: ITextareaField): ITextareaField => ({
-  component: markRaw(VcTextarea),
-  props: {
-    ...ControlBaseProps(props),
-    ...props,
-  },
-});
-
-export const ContentField = ({ props }: IContentField): IContentField => ({
-  component: markRaw(VcField),
-  props: {
-    ...ControlBaseProps(props),
-    ...props,
-  },
-});
-
-export const ImageField = ({ props }: IImageField): IImageField => ({
-  component: markRaw(VcImage),
-  props: {
-    ...ControlBaseProps(props),
-    ...props,
-  },
-});
-
-export const VideoField = ({ props }: IInputField): IVideoField => ({
-  component: markRaw(VcVideo),
-  props: {
-    ...ControlBaseProps(props),
-    ...props,
-  },
-});
-
-export const InputCurrency = ({ props }: IInputCurrency): IInputCurrency => ({
-  component: markRaw(VcInputCurrency),
-  props: {
-    ...ControlBaseProps(props),
-    ...props,
-  },
-});
-
-export const CardCollection = ({ props, slots }: ICardCollection): ICardCollection => ({
-  component: markRaw(VcCard),
-  props: {
-    ...props,
-    ...ControlBaseProps(props),
-  },
-
-  slots,
-});
-
-export const DynamicProperties = ({ props }: IDynamicProperties): IDynamicProperties => ({
-  component: markRaw(VcDynamicProperty),
-  props: {
-    ...props,
-    ...ControlBaseProps(props),
-  },
-});
-
-export const EditorField = ({ props }: IEditorField): IEditorField => ({
-  component: markRaw(VcEditor),
-  props: {
-    ...ControlBaseProps(props),
-    ...props,
-  },
-});
-
-export const Gallery = ({ props }: IGallery): IGallery => ({
-  component: markRaw(VcGallery),
-  props: {
-    ...ControlBaseProps(props),
-    ...props,
-  },
-});
-
-export const Checkbox = ({ props, slots }: ICheckbox): ICheckbox => ({
-  component: markRaw(VcCheckbox),
-  props: {
-    ...ControlBaseProps(props),
-    ...props,
-  },
-
-  slots,
-});
-
-export const RadioButton = ({ props }: IRadioButton): IRadioButton => ({
-  component: markRaw(VcRadioButton),
-  props: {
-    ...ControlBaseProps(props),
-    ...props,
-  },
-});
-
-export const Button = ({ props, slots }: IButton): IButton => ({
-  component: markRaw(VcButton),
-  props: {
-    ...ControlBaseProps(props),
-    ...props,
-  },
-
-  slots,
-});
-
-export const Switch = ({ props }: ISwitch): ISwitch => ({
-  component: markRaw(VcSwitch),
-  props: {
-    ...ControlBaseProps(props),
-    ...props,
-  },
-});
-
-export const Fieldset = ({ columns, fields, property, remove }: IFieldset): IFieldset => ({
-  columns,
-  fields,
-  property,
-  remove,
-});
-
-export const Table = ({ props, slots }: ITable): ITable => ({
-  component: markRaw(VcTable),
-  props: {
-    ...ControlBaseProps(props),
-    ...props,
-  },
-  slots,
-});
-
-export const Rating = ({ props }: IRating): IRating => ({
-  component: markRaw(VcRating),
-  props: {
-    ...ControlBaseProps(props),
-    ...props,
-  },
-});
+import {
+  IMultivalueField,
+  IControlBaseProps,
+  ISelectField,
+  IInputField,
+  ICardCollection,
+  IEditorField,
+  IGallery,
+  IDynamicProperties,
+  ICheckbox,
+  IButton,
+  IInputCurrency,
+  IFieldset,
+  IStatusField,
+  IContentField,
+  IVideoField,
+  IImageField,
+  ITextareaField,
+  ISwitch,
+  ITable,
+  IRating,
+  IRadioButton,
+} from "./../types/models";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { markRaw } from "vue";
+import {
+  VcButton,
+  VcCard,
+  VcCheckbox,
+  VcDynamicProperty,
+  VcEditor,
+  VcField,
+  VcGallery,
+  VcImage,
+  VcInput,
+  VcInputCurrency,
+  VcSelect,
+  VcStatus,
+  VcVideo,
+  VcTextarea,
+  VcMultivalue,
+  VcSwitch,
+  VcTable,
+  VcRating,
+  VcRadioButton,
+} from "../../../../ui/components";
+
+export const ControlBaseProps = ({
+  rules = undefined,
+  label = undefined,
+  placeholder = undefined,
+  disabled = false,
+  required = false,
+  name = undefined,
+  tooltip = undefined,
+  key = undefined,
+  classNames = undefined,
+  ...rest
+}: IControlBaseProps): IControlBaseProps => ({
+  key,
+  rules,
+  label,
+  placeholder,
+  disabled,
+  required,
+  name,
+  tooltip,
+  classNames,
+  ...rest,
+});
+
+export const MultivalueField = ({ props, slots }: IMultivalueField): IMultivalueField => ({
+  component: markRaw(VcMultivalue),
+  props: {
+    ...ControlBaseProps(props),
+    ...props,
+  },
+
+  slots,
+});
+
+export const SelectField = ({ props, slots }: ISelectField): ISelectField => ({
+  component: markRaw(VcSelect) as any,
+  props: {
+    ...ControlBaseProps(props),
+    ...props,
+  },
+
+  slots,
+});
+
+export const StatusField = ({ props, slots }: IStatusField): IStatusField => ({
+  component: markRaw(VcStatus),
+  props: {
+    ...ControlBaseProps(props),
+    ...props,
+  },
+
+  slots,
+});
+
+export const InputField = ({ props, slots }: IInputField): IInputField => ({
+  component: markRaw(VcInput),
+  props: {
+    ...ControlBaseProps(props),
+    ...props,
+  },
+
+  slots,
+});
+
+export const TextareaField = ({ props }: ITextareaField): ITextareaField => ({
+  component: markRaw(VcTextarea),
+  props: {
+    ...ControlBaseProps(props),
+    ...props,
+  },
+});
+
+export const ContentField = ({ props }: IContentField): IContentField => ({
+  component: markRaw(VcField),
+  props: {
+    ...ControlBaseProps(props),
+    ...props,
+  },
+});
+
+export const ImageField = ({ props }: IImageField): IImageField => ({
+  component: markRaw(VcImage),
+  props: {
+    ...ControlBaseProps(props),
+    ...props,
+  },
+});
+
+export const VideoField = ({ props }: IInputField): IVideoField => ({
+  component: markRaw(VcVideo),
+  props: {
+    ...ControlBaseProps(props),
+    ...props,
+  },
+});
+
+export const InputCurrency = ({ props }: IInputCurrency): IInputCurrency => ({
+  component: markRaw(VcInputCurrency),
+  props: {
+    ...ControlBaseProps(props),
+    ...props,
+  },
+});
+
+export const CardCollection = ({ props, slots }: ICardCollection): ICardCollection => ({
+  component: markRaw(VcCard),
+  props: {
+    ...props,
+    ...ControlBaseProps(props),
+  },
+
+  slots,
+});
+
+export const DynamicProperties = ({ props }: IDynamicProperties): IDynamicProperties => ({
+  component: markRaw(VcDynamicProperty),
+  props: {
+    ...props,
+    ...ControlBaseProps(props),
+  },
+});
+
+export const EditorField = ({ props }: IEditorField): IEditorField => ({
+  component: markRaw(VcEditor),
+  props: {
+    ...ControlBaseProps(props),
+    ...props,
+  },
+});
+
+export const Gallery = ({ props }: IGallery): IGallery => ({
+  component: markRaw(VcGallery),
+  props: {
+    ...ControlBaseProps(props),
+    ...props,
+  },
+});
+
+export const Checkbox = ({ props, slots }: ICheckbox): ICheckbox => ({
+  component: markRaw(VcCheckbox),
+  props: {
+    ...ControlBaseProps(props),
+    ...props,
+  },
+
+  slots,
+});
+
+export const RadioButton = ({ props }: IRadioButton): IRadioButton => ({
+  component: markRaw(VcRadioButton),
+  props: {
+    ...ControlBaseProps(props),
+    ...props,
+  },
+});
+
+export const Button = ({ props, slots }: IButton): IButton => ({
+  component: markRaw(VcButton),
+  props: {
+    ...ControlBaseProps(props),
+    ...props,
+  },
+
+  slots,
+});
+
+export const Switch = ({ props }: ISwitch): ISwitch => ({
+  component: markRaw(VcSwitch),
+  props: {
+    ...ControlBaseProps(props),
+    ...props,
+  },
+});
+
+export const Fieldset = ({ columns, fields, property, remove }: IFieldset): IFieldset => ({
+  columns,
+  fields,
+  property,
+  remove,
+});
+
+export const Table = ({ props, slots }: ITable): ITable => ({
+  component: markRaw(VcTable),
+  props: {
+    ...ControlBaseProps(props),
+    ...props,
+  },
+  slots,
+});
+
+export const Rating = ({ props }: IRating): IRating => ({
+  component: markRaw(VcRating),
+  props: {
+    ...ControlBaseProps(props),
+    ...props,
+  },
+});