plain-design 1.0.0-beta.145 → 1.0.0-beta.147

package/src/packages/components/FormCascade/index.tsx

@@ -1,6 +1,6 @@
-import {createFormEditor} from "../FormItem/createFormEditor";
-import Cascade from "../Cascade";
-
-export const FormCascade = createFormEditor(Cascade);
-
-export default FormCascade;
+import {createFormEditor} from "../FormItem/createFormEditor";
+import Cascade from "../Cascade";
+
+export const FormCascade = createFormEditor(Cascade);
+
+export default FormCascade;

package/src/packages/components/FormCheckbox/index.tsx

@@ -1,6 +1,6 @@
-import {createFormEditor} from "../FormItem/createFormEditor";
-import Checkbox from "../Checkbox";
-
-export const FormCheckbox = createFormEditor(Checkbox);
-
-export default FormCheckbox;
+import {createFormEditor} from "../FormItem/createFormEditor";
+import Checkbox from "../Checkbox";
+
+export const FormCheckbox = createFormEditor(Checkbox);
+
+export default FormCheckbox;

package/src/packages/components/FormCheckboxGroup/index.tsx

@@ -1,6 +1,6 @@
-import {createFormEditor} from "../FormItem/createFormEditor";
-import CheckboxGroup from "../CheckboxGroup";
-
-export const FormCheckboxGroup = createFormEditor(CheckboxGroup);
-
-export default FormCheckboxGroup;
+import {createFormEditor} from "../FormItem/createFormEditor";
+import CheckboxGroup from "../CheckboxGroup";
+
+export const FormCheckboxGroup = createFormEditor(CheckboxGroup);
+
+export default FormCheckboxGroup;

package/src/packages/components/FormColorPicker/index.tsx

@@ -1,6 +1,6 @@
-import {createFormEditor} from "../FormItem/createFormEditor";
-import {ColorPicker} from "../ColorPicker";
-
-export const FormColorPicker = createFormEditor(ColorPicker);
-
-export default FormColorPicker;
+import {createFormEditor} from "../FormItem/createFormEditor";
+import {ColorPicker} from "../ColorPicker";
+
+export const FormColorPicker = createFormEditor(ColorPicker);
+
+export default FormColorPicker;

package/src/packages/components/FormDatePicker/index.tsx

@@ -1,6 +1,6 @@
-import {createFormEditor} from "../FormItem/createFormEditor";
-import DatePicker from "../DatePicker";
-
-export const FormDatePicker = createFormEditor(DatePicker);
-
-export default FormDatePicker;
+import {createFormEditor} from "../FormItem/createFormEditor";
+import DatePicker from "../DatePicker";
+
+export const FormDatePicker = createFormEditor(DatePicker);
+
+export default FormDatePicker;

package/src/packages/components/FormInput/index.tsx

@@ -1,6 +1,6 @@
-import Input from "../Input";
-import {createFormEditor} from "../FormItem/createFormEditor";
-
-export const FormInput = createFormEditor(Input);
-
-export default FormInput;
+import Input from "../Input";
+import {createFormEditor} from "../FormItem/createFormEditor";
+
+export const FormInput = createFormEditor(Input);
+
+export default FormInput;

package/src/packages/components/FormInputNumber/index.tsx

@@ -1,6 +1,6 @@
-import {createFormEditor} from "../FormItem/createFormEditor";
-import InputNumber from "../InputNumber";
-
-export const FormInputNumber = createFormEditor(InputNumber);
-
-export default FormInputNumber;
+import {createFormEditor} from "../FormItem/createFormEditor";
+import InputNumber from "../InputNumber";
+
+export const FormInputNumber = createFormEditor(InputNumber);
+
+export default FormInputNumber;

package/src/packages/components/FormItem/FormItemValidateMessage.tsx

@@ -1,16 +1,16 @@
-import {designComponent} from "@peryl/react-compose";
-import Icon from "../Icon";
-
-export const FormItemValidateMessage = designComponent({
-  props: {
-    message: { type: String }
-  },
-  setup({ props }) {
-    return () => (
-      !!props.message && <div className="form-item-validate-message-inner">
-        <Icon icon="pi-exclamation-polygon-fill"/>
-        <span>{props.message}</span>
-      </div>
-    );
-  },
-});
+import {designComponent} from "@peryl/react-compose";
+import Icon from "../Icon";
+
+export const FormItemValidateMessage = designComponent({
+  props: {
+    message: { type: String }
+  },
+  setup({ props }) {
+    return () => (
+      !!props.message && <div className="form-item-validate-message-inner">
+        <Icon icon="pi-exclamation-polygon-fill"/>
+        <span>{props.message}</span>
+      </div>
+    );
+  },
+});

package/src/packages/components/FormItem/createFormEditor.tsx

@@ -1,87 +1,87 @@
-import {ComponentPropsType, designComponent, ExtractPropTypes, PropType, useModel} from "@peryl/react-compose";
-import {FormItemValidateExposePropsOption} from "../Form/validate/validate.utils";
-import {PlainObject} from "@peryl/utils/event";
-import {FormItem} from "./index";
-import React from "react";
-
-/**
- * 创建一个简写的表单编辑组件
- * @author  韦胜健
- * @date    2022/8/24 11:55
- */
-export function createFormEditor<iComponent extends React.FC<any>,
-  iComponentProps = tFcProps<iComponent>,
-  >(Editor: iComponent) {
-
-  const formItemSlots = (FormItem.use.options.slots as string[] || []).filter(i => i !== 'default');
-  const editorSlots = (Editor as any).use.options.slots as string[] || [];
-
-  const conflictSlot = formItemSlots.find(i => editorSlots.indexOf(i) > -1);
-  if (conflictSlot) {
-    throw new Error(`创建FormEditor失败，存在冲突的插槽名称：${conflictSlot}`);
-  }
-
-  const fc: React.FC<iComponentProps &
-    ExtractPropTypes<typeof FormItemValidateExposePropsOption> &
-    {
-      modelValue?: any,
-      onUpdateModelValue?: (val: any) => void
-      formAttrs?: ComponentPropsType<typeof FormItem>,
-      editorRef?: (refer: any) => void,
-    }> = designComponent({
-    name: (() => {
-      let editorName: string = (Editor as any).use.options.name;
-      return 'form-' + (editorName.charAt(0) === '-' ? editorName.slice(1) : editorName);
-    })(),
-    inheritPropsType: Editor,
-    inheritAttrs: false,
-    props: {
-      modelValue: {},
-      formAttrs: {},
-      editorRef: { type: Function as PropType<(refer: any) => void> },
-      ...FormItemValidateExposePropsOption,
-    },
-    emits: {
-      onUpdateModelValue: (val?: any) => true,
-    },
-    slots: [
-      ...formItemSlots,
-      ...editorSlots,
-    ],
-    setup({ props, event: { emit }, attrs, slots }) {
-
-      const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
-      const validateValueGetter = () => model.value;
-
-      return () => {
-
-        const formAttrs = { ...(props.formAttrs as PlainObject | undefined), validateValueGetter };
-        Object.keys(FormItemValidateExposePropsOption).forEach(key => {(formAttrs as any)[key] = (props as any)[key];});
-
-        return (
-          <FormItem{...formAttrs}>
-            {(() => {
-              const ret: any = {};
-              formItemSlots.forEach((slotName) => {if (slots[slotName].isExist()) {ret[slotName] = () => slots[slotName]();}});
-              ret.default = () => (
-                // @ts-ignore
-                <Editor v-model={model.value} {...attrs} ref={props.editorRef}>
-                  {(() => {
-                    const ret: any = {};
-                    editorSlots.forEach(slotName => {if (slots[slotName].isExist()) {ret[slotName] = slots[slotName];}});
-                    return ret;
-                  })()}
-                </Editor>
-              );
-              return ret;
-            })()}
-          </FormItem>
-        );
-      };
-    },
-  });
-
-  return fc;
-}
-
-type tFcProps<T> = T extends (props: infer Props) => any ? Props : never;
+import {ComponentPropsType, designComponent, ExtractPropTypes, PropType, useModel} from "@peryl/react-compose";
+import {FormItemValidateExposePropsOption} from "../Form/validate/validate.utils";
+import {PlainObject} from "@peryl/utils/event";
+import {FormItem} from "./index";
+import React from "react";
+
+/**
+ * 创建一个简写的表单编辑组件
+ * @author  韦胜健
+ * @date    2022/8/24 11:55
+ */
+export function createFormEditor<iComponent extends React.FC<any>,
+  iComponentProps = tFcProps<iComponent>,
+  >(Editor: iComponent) {
+
+  const formItemSlots = (FormItem.use.options.slots as string[] || []).filter(i => i !== 'default');
+  const editorSlots = (Editor as any).use.options.slots as string[] || [];
+
+  const conflictSlot = formItemSlots.find(i => editorSlots.indexOf(i) > -1);
+  if (conflictSlot) {
+    throw new Error(`创建FormEditor失败，存在冲突的插槽名称：${conflictSlot}`);
+  }
+
+  const fc: React.FC<iComponentProps &
+    ExtractPropTypes<typeof FormItemValidateExposePropsOption> &
+    {
+      modelValue?: any,
+      onUpdateModelValue?: (val: any) => void
+      formAttrs?: ComponentPropsType<typeof FormItem>,
+      editorRef?: (refer: any) => void,
+    }> = designComponent({
+    name: (() => {
+      let editorName: string = (Editor as any).use.options.name;
+      return 'form-' + (editorName.charAt(0) === '-' ? editorName.slice(1) : editorName);
+    })(),
+    inheritPropsType: Editor,
+    inheritAttrs: false,
+    props: {
+      modelValue: {},
+      formAttrs: {},
+      editorRef: { type: Function as PropType<(refer: any) => void> },
+      ...FormItemValidateExposePropsOption,
+    },
+    emits: {
+      onUpdateModelValue: (val?: any) => true,
+    },
+    slots: [
+      ...formItemSlots,
+      ...editorSlots,
+    ],
+    setup({ props, event: { emit }, attrs, slots }) {
+
+      const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
+      const validateValueGetter = () => model.value;
+
+      return () => {
+
+        const formAttrs = { ...(props.formAttrs as PlainObject | undefined), validateValueGetter };
+        Object.keys(FormItemValidateExposePropsOption).forEach(key => {(formAttrs as any)[key] = (props as any)[key];});
+
+        return (
+          <FormItem{...formAttrs}>
+            {(() => {
+              const ret: any = {};
+              formItemSlots.forEach((slotName) => {if (slots[slotName].isExist()) {ret[slotName] = () => slots[slotName]();}});
+              ret.default = () => (
+                // @ts-ignore
+                <Editor v-model={model.value} {...attrs} ref={props.editorRef}>
+                  {(() => {
+                    const ret: any = {};
+                    editorSlots.forEach(slotName => {if (slots[slotName].isExist()) {ret[slotName] = slots[slotName];}});
+                    return ret;
+                  })()}
+                </Editor>
+              );
+              return ret;
+            })()}
+          </FormItem>
+        );
+      };
+    },
+  });
+
+  return fc;
+}
+
+type tFcProps<T> = T extends (props: infer Props) => any ? Props : never;

package/src/packages/components/FormItem/index.tsx

@@ -1,134 +1,134 @@
-import {designComponent, Fragment, getComponentCls, useClasses, useRefs} from "@peryl/react-compose";
-import {FormItemValidatePropsOption} from "../Form/validate/validate.utils";
-import {EditProps, useEdit} from "../../uses/useEdit";
-import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
-import {FormItemLayoutPropsOption, useFormLayout} from "../Form/layout/useFormLayout";
-import {useFormItemValidation} from "../Form/validate/useFormItemValidation";
-import {FormItemValidateMessage} from "./FormItemValidateMessage";
-import Tooltip from "../Tooltip";
-import {getFunctionValue} from "@peryl/utils/getFunctionValue";
-import Icon from "../Icon";
-
-export const FormItem = designComponent({
-  name: '-form-item',
-  props: {
-    ...EditProps,
-    ...StyleProps,
-    /*---------------------------------------validate-------------------------------------------*/
-    ...FormItemValidatePropsOption,
-    /*---------------------------------------layout-------------------------------------------*/
-    ...FormItemLayoutPropsOption,
-  },
-  slots: ['default', 'labelSlot', 'labelPrepend', 'labelAppend', 'prepend', 'append'],
-  setup({ props, slots }) {
-
-    const { refs, onRef } = useRefs({ el: HTMLDivElement });
-
-    /*校验*/
-    const formItemValidation = useFormItemValidation({ props });
-
-    /*布局*/
-    const formItemLayout = useFormLayout.useFormItem(props);
-
-    const handler = {
-      onEditChange: () => formItemValidation.formValidation.handler.onEditChange({ label: props.label, field: props.field }),
-      onEditBlur: () => formItemValidation.formValidation.handler.onBlurChange({ label: props.label, field: props.field }),
-    };
-
-    useEdit({
-      adjust: (ret) => {
-        ret.onBlur = handler.onEditBlur;
-        ret.onChange = handler.onEditChange;
-        if (!!props.field) {
-          if (!!formItemValidation.formValidation.props.disabledFields && formItemValidation.formValidation.props.disabledFields[props.field]) {
-            ret.disabled = true;
-          }
-          if (!!formItemValidation.formValidation.props.readonlyFields && formItemValidation.formValidation.props.readonlyFields[props.field]) {
-            ret.readonly = true;
-          }
-        }
-      }
-    });
-
-    const { styleComputed } = useStyle({
-      adjust: (data) => {
-        if (!props.status) {
-          if (formItemValidation.validateMessage.value) {
-            data.status = ThemeStatus.error;
-          } else if (formItemValidation.isRequired.value) {
-            data.status = ThemeStatus.warn;
-          }
-        }
-      },
-    });
-
-    const classes = useClasses(() => [
-      getComponentCls('form-item'),
-      `form-item-validate-position-${formItemLayout.validateMessagePosition.value}`,
-      {
-        [`form-item-label-align-${formItemLayout.labelAlign.value}`]: !!formItemLayout.labelAlign.value,
-        [`form-item-content-align-${formItemLayout.contentAlign.value}`]: !!formItemLayout.contentAlign.value,
-        'form-item-required': formItemValidation.isRequired.value,
-        'form-item-has-label': !!props.label,
-        'form-item-has-prepend': slots.prepend.isExist(),
-        'form-item-has-append': slots.append.isExist(),
-        'form-item-no-label': props.label === null,
-      },
-    ]);
-
-    /*    useTooltip({
-          ignoreEmptyMessage: true,
-          alwaysShow: true,
-          tooltip: () => ({
-            type: uuid(),
-            trigger: 'manual',
-            popperSize: styleComputed.value.size,
-            reference: refs.el,
-            message: formItemValidation.validateMessage.value,
-            status: 'error',
-            placement: formItemLayout.form.props.singleColumnCenter ? 'right-center' : 'bottom-end',
-            minWidth: 0,
-            noBackground: true,
-            noArrow: true,
-            offset: 16,
-          })
-        });*/
-
-    return {
-      refer: {
-        refs,
-      },
-      render: () => (
-        <div className={classes.value} style={formItemLayout.styles.value} ref={onRef.el}>
-          {props.label !== null && !props.hideLabel && (
-            <div className="form-item-label" style={formItemLayout.labelStyles.value} title={props.label}>
-              {formItemValidation.isRequired.value && <i className="form-item-required-tag">*</i>}
-              {slots.labelPrepend()}
-              {slots.labelSlot(props.label)}
-              {slots.labelAppend()}
-              {formItemLayout.colon.value && <i> :</i>}
-              {!!props.tip && <Tooltip v-slots={{
-                default: () => <Icon icon="pi-info-circle" className="form-item-cell-tip"/>,
-                popper: () => getFunctionValue(props.tip)
-              }}/>}
-            </div>
-          )}
-          <div className="form-item-content box-message-reference" style={formItemLayout.contentStyles.value}>
-            {slots.prepend.isExist() && <div className="form-item-prepend-content">{slots.prepend()}</div>}
-            <div className="form-item-content-inner" style={formItemLayout.contentInnerStyles.value}>
-              <Fragment key="slot_default">{slots.default()}</Fragment>
-              {/*校验消息放下边的时候放在 form-item-content-inner 内部使得与输入框左或者右对齐*/}
-              {formItemLayout.validateMessagePosition.value !== 'right' && <FormItemValidateMessage message={formItemValidation.validateMessage.value!}/>}
-            </div>
-            {slots.append.isExist() && <div className="form-item-append-content">{slots.append()}</div>}
-          </div>
-          {/*校验消息放在右边的时候，放在外部，使得与输入框横向对齐*/}
-          {formItemLayout.validateMessagePosition.value === 'right' && <FormItemValidateMessage message={formItemValidation.validateMessage.value!}/>}
-        </div>
-      )
-    };
-  },
-});
-
-export default FormItem;
-
+import {designComponent, Fragment, getComponentCls, useClasses, useRefs} from "@peryl/react-compose";
+import {FormItemValidatePropsOption} from "../Form/validate/validate.utils";
+import {EditProps, useEdit} from "../../uses/useEdit";
+import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
+import {FormItemLayoutPropsOption, useFormLayout} from "../Form/layout/useFormLayout";
+import {useFormItemValidation} from "../Form/validate/useFormItemValidation";
+import {FormItemValidateMessage} from "./FormItemValidateMessage";
+import Tooltip from "../Tooltip";
+import {getFunctionValue} from "@peryl/utils/getFunctionValue";
+import Icon from "../Icon";
+
+export const FormItem = designComponent({
+  name: '-form-item',
+  props: {
+    ...EditProps,
+    ...StyleProps,
+    /*---------------------------------------validate-------------------------------------------*/
+    ...FormItemValidatePropsOption,
+    /*---------------------------------------layout-------------------------------------------*/
+    ...FormItemLayoutPropsOption,
+  },
+  slots: ['default', 'labelSlot', 'labelPrepend', 'labelAppend', 'prepend', 'append'],
+  setup({ props, slots }) {
+
+    const { refs, onRef } = useRefs({ el: HTMLDivElement });
+
+    /*校验*/
+    const formItemValidation = useFormItemValidation({ props });
+
+    /*布局*/
+    const formItemLayout = useFormLayout.useFormItem(props);
+
+    const handler = {
+      onEditChange: () => formItemValidation.formValidation.handler.onEditChange({ label: props.label, field: props.field }),
+      onEditBlur: () => formItemValidation.formValidation.handler.onBlurChange({ label: props.label, field: props.field }),
+    };
+
+    useEdit({
+      adjust: (ret) => {
+        ret.onBlur = handler.onEditBlur;
+        ret.onChange = handler.onEditChange;
+        if (!!props.field) {
+          if (!!formItemValidation.formValidation.props.disabledFields && formItemValidation.formValidation.props.disabledFields[props.field]) {
+            ret.disabled = true;
+          }
+          if (!!formItemValidation.formValidation.props.readonlyFields && formItemValidation.formValidation.props.readonlyFields[props.field]) {
+            ret.readonly = true;
+          }
+        }
+      }
+    });
+
+    const { styleComputed } = useStyle({
+      adjust: (data) => {
+        if (!props.status) {
+          if (formItemValidation.validateMessage.value) {
+            data.status = ThemeStatus.error;
+          } else if (formItemValidation.isRequired.value) {
+            data.status = ThemeStatus.warn;
+          }
+        }
+      },
+    });
+
+    const classes = useClasses(() => [
+      getComponentCls('form-item'),
+      `form-item-validate-position-${formItemLayout.validateMessagePosition.value}`,
+      {
+        [`form-item-label-align-${formItemLayout.labelAlign.value}`]: !!formItemLayout.labelAlign.value,
+        [`form-item-content-align-${formItemLayout.contentAlign.value}`]: !!formItemLayout.contentAlign.value,
+        'form-item-required': formItemValidation.isRequired.value,
+        'form-item-has-label': !!props.label,
+        'form-item-has-prepend': slots.prepend.isExist(),
+        'form-item-has-append': slots.append.isExist(),
+        'form-item-no-label': props.label === null,
+      },
+    ]);
+
+    /*    useTooltip({
+          ignoreEmptyMessage: true,
+          alwaysShow: true,
+          tooltip: () => ({
+            type: uuid(),
+            trigger: 'manual',
+            popperSize: styleComputed.value.size,
+            reference: refs.el,
+            message: formItemValidation.validateMessage.value,
+            status: 'error',
+            placement: formItemLayout.form.props.singleColumnCenter ? 'right-center' : 'bottom-end',
+            minWidth: 0,
+            noBackground: true,
+            noArrow: true,
+            offset: 16,
+          })
+        });*/
+
+    return {
+      refer: {
+        refs,
+      },
+      render: () => (
+        <div className={classes.value} style={formItemLayout.styles.value} ref={onRef.el}>
+          {props.label !== null && !props.hideLabel && (
+            <div className="form-item-label" style={formItemLayout.labelStyles.value} title={props.label}>
+              {formItemValidation.isRequired.value && <i className="form-item-required-tag">*</i>}
+              {slots.labelPrepend()}
+              {slots.labelSlot(props.label)}
+              {slots.labelAppend()}
+              {formItemLayout.colon.value && <i> :</i>}
+              {!!props.tip && <Tooltip v-slots={{
+                default: () => <Icon icon="pi-info-circle" className="form-item-cell-tip"/>,
+                popper: () => getFunctionValue(props.tip)
+              }}/>}
+            </div>
+          )}
+          <div className="form-item-content box-message-reference" style={formItemLayout.contentStyles.value}>
+            {slots.prepend.isExist() && <div className="form-item-prepend-content">{slots.prepend()}</div>}
+            <div className="form-item-content-inner" style={formItemLayout.contentInnerStyles.value}>
+              <Fragment key="slot_default">{slots.default()}</Fragment>
+              {/*校验消息放下边的时候放在 form-item-content-inner 内部使得与输入框左或者右对齐*/}
+              {formItemLayout.validateMessagePosition.value !== 'right' && <FormItemValidateMessage message={formItemValidation.validateMessage.value!}/>}
+            </div>
+            {slots.append.isExist() && <div className="form-item-append-content">{slots.append()}</div>}
+          </div>
+          {/*校验消息放在右边的时候，放在外部，使得与输入框横向对齐*/}
+          {formItemLayout.validateMessagePosition.value === 'right' && <FormItemValidateMessage message={formItemValidation.validateMessage.value!}/>}
+        </div>
+      )
+    };
+  },
+});
+
+export default FormItem;
+

package/src/packages/components/FormRadio/index.tsx

@@ -1,6 +1,6 @@
-import {createFormEditor} from "../FormItem/createFormEditor";
-import Radio from "../Radio";
-
-export const FormRadio = createFormEditor(Radio);
-
-export default FormRadio;
+import {createFormEditor} from "../FormItem/createFormEditor";
+import Radio from "../Radio";
+
+export const FormRadio = createFormEditor(Radio);
+
+export default FormRadio;

package/src/packages/components/FormRadioGroup/index.tsx

@@ -1,6 +1,6 @@
-import {createFormEditor} from "../FormItem/createFormEditor";
-import RadioGroup from "../RadioGroup";
-
-export const FormRadioGroup = createFormEditor(RadioGroup);
-
-export default FormRadioGroup;
+import {createFormEditor} from "../FormItem/createFormEditor";
+import RadioGroup from "../RadioGroup";
+
+export const FormRadioGroup = createFormEditor(RadioGroup);
+
+export default FormRadioGroup;

package/src/packages/components/FormRate/index.tsx

@@ -1,6 +1,6 @@
-import {createFormEditor} from "../FormItem/createFormEditor";
-import Rate from "../Rate";
-
-export const FormRate = createFormEditor(Rate);
-
-export default FormRate;
+import {createFormEditor} from "../FormItem/createFormEditor";
+import Rate from "../Rate";
+
+export const FormRate = createFormEditor(Rate);
+
+export default FormRate;

package/src/packages/components/FormSelect/index.tsx

@@ -1,6 +1,6 @@
-import {Select} from "../Select";
-import {createFormEditor} from "../FormItem/createFormEditor";
-
-export const FormSelect = createFormEditor(Select);
-
-export default FormSelect;
+import {Select} from "../Select";
+import {createFormEditor} from "../FormItem/createFormEditor";
+
+export const FormSelect = createFormEditor(Select);
+
+export default FormSelect;

package/src/packages/components/FormSlider/index.tsx

@@ -1,6 +1,6 @@
-import {createFormEditor} from "../FormItem/createFormEditor";
-import Slider from "../Slider";
-
-export const FormSlider = createFormEditor(Slider);
-
-export default FormSlider;
+import {createFormEditor} from "../FormItem/createFormEditor";
+import Slider from "../Slider";
+
+export const FormSlider = createFormEditor(Slider);
+
+export default FormSlider;