@carefrees/form-utils-vue 0.0.11 → 0.0.13

package/README.md

@@ -1,3 +1,105 @@
-# 表单工具
+# vue 表单工具
 
-表单和很多基础组件存在联动关系，暂时处理不了，放弃写vue的表单工具，后面有解决方法才继续
+## 安装
+
+```bash
+npm install @carefrees/form-utils-vue # yarn add @carefrees/form-utils-vue # pnpm add @carefrees/form-utils-vue
+```
+
+## 使用
+
+### 基本使用
+
+```vue
+<script lang="ts" setup>
+import { ref } from "vue";
+import { Form, useForm, FormItem } from "@carefrees/form-utils-vue";
+import "@carefrees/form-utils-vue/assets/index.css"
+import Input from './Input.vue';
+const formData = ref<{ a: string, b: string }>({
+  a: '',
+  b: ''
+})
+
+const form = useForm();
+const onSubmit = async () => {
+  try {
+    console.log(form, formData)
+    const result = await form.value.validate()
+    if (result) {
+      console.log(result)
+    }
+  } catch (error) {
+    console.log(error)
+  }
+}
+const onSetValue = () => {
+  formData.value.a = '123'
+  formData.value.b = '456'
+  // form.value.updatedFieldValue('b', '123')
+}
+
+const onSetValue2 = () => {
+  // formData.value.a = ''
+  // formData.value.b = ''
+  formData.value = {
+    a: "21",
+    b: "22"
+  }
+  // form.value.updatedFieldValue('b', '123')
+}
+
+const onSetValue3 = () => {
+  form.value.updatedFieldValue('b', '')
+}
+
+const rules1 = ref([{ required: true, message: "必填" }])
+const rules2 = ref([{ required: true, message: "必填" }])
+
+const onUpdateRules = () => {
+  rules1.value = [{ required: true, message: "必填2" }]
+  rules2.value = [{ required: false, message: "不必填" }]
+}
+
+const onValuesChange = (...rest: any[]) => {
+  console.log(rest)
+}
+</script>
+<template>
+  <Form @valuesChange='onValuesChange' :formData='formData' :form='form'>
+    <FormItem label='内容' input='input' name='a' :rules='rules1' />
+    <FormItem :input='Input' name='b' :rules='rules2'>
+      <template #label>
+        <span>s内容2</span>
+      </template>
+      <template #helpText>
+        <span>helpText</span>
+      </template>
+      <template #extra>
+        <span>extra</span>
+      </template>
+    </FormItem>
+    <FormItem label='Input' input='input' name='c' />
+    <FormItem name='d'>
+      <template #label>
+        <span>d</span>
+      </template>
+      <template #helpText>
+        <span>helpText</span>
+      </template>
+      <template #default>
+        <input placeholder='输入内容' v-model='formData.a' />
+      </template>
+      <template #extra>
+        <span>extra</span>
+      </template>
+    </FormItem>
+    <button type='button' @click='onSubmit'>验证</button>
+    <button type='button' @click='onSetValue'>设置值</button>
+    <button type='button' @click='onSetValue2'>设置值2</button>
+    <button type='button' @click='onSetValue3'>设置值3</button>
+    <button type='button' @click='onUpdateRules'>更新规则</button>
+  </Form>
+</template>
+<style scoped></style>
+```

package/assets/index.css

@@ -1,8 +1,20 @@
 /* 表单 */
+html.dark .carefrees-form {
+  --form-color: #e3e3e3;
+  --form-header-color: #e3e3e3;
+  --form-font-size: 14px;
+  --form-border-color: #e0e0e0;
+}
+/* 表单 */
 .carefrees-form {
+  --form-color: rgba(0, 0, 0, 0.88);
+  --form-header-color: #1d2129;
+  --form-font-size: 14px;
+  --form-border-color: #e0e0e0;
+
   box-sizing: border-box;
-  background-color: #fff;
-  font-size: 14px;
+  font-size: var(--form-font-size);
+  color: var(--form-color, rgba(0, 0, 0, 0.88));
 }
 
 /* 布局 */
@@ -19,7 +31,7 @@
 }
 
 .carefrees-form-layout.bordered {
-  border: 1px solid #e0e0e0;
+  border: 1px solid var(--form-border-color, #e0e0e0);
 }
 .carefrees-form-layout.bordered .carefrees-form-layout-header {
   padding-inline-start: 8px;
@@ -31,7 +43,7 @@
   justify-content: space-between;
   align-items: center;
   flex-direction: row;
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid var(--form-border-color, #e0e0e0);
   padding-top: 5px;
   padding-bottom: 5px;
   margin-block-end: 4px;
@@ -43,13 +55,13 @@
 .carefrees-form-layout-header-title {
   font-size: 14px;
   font-weight: 600;
-  color: #1d2129;
+  color: var(--form-header-color, #1d2129);
   box-sizing: border-box;
 }
 .carefrees-form-layout-header-extra {
   font-size: 14px;
   font-weight: 500;
-  color: #1d2129;
+  color: var(--form-header-color, #1d2129);
   box-sizing: border-box;
 }
 
@@ -70,7 +82,7 @@
   flex-direction: row;
   padding: 8px;
   box-sizing: border-box;
-  color: rgba(0, 0, 0, 0.88);
+  color: var(--form-color, rgba(0, 0, 0, 0.88));
 }
 
 .carefrees-form-item-container {
@@ -84,10 +96,9 @@
 .carefrees-form-item-container.left {
   flex-direction: row;
   gap: 8px;
-  text-align: left;
 }
-.carefrees-form-item-container.left .carefrees-form-item-label {
-  justify-content: flex-end;
+.carefrees-form-item-container.left .carefrees-form-item-label-warp {
+  text-align: right;
 }
 .carefrees-form-item-container.between {
   gap: 8px;
@@ -113,7 +124,7 @@
   justify-content: flex-start;
   position: relative;
   font-size: 14px;
-  color: rgba(0, 0, 0, 0.88);
+  color: var(--form-color, rgba(0, 0, 0, 0.88));
   min-height: 1.4rem;
 }
 
@@ -156,7 +167,7 @@
 }
 
 .carefrees-form-item-body-input.input-bordered {
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid var(--form-border-color, #e0e0e0);
 }
 
 .carefrees-form-item-body-help {

package/esm/component.js

@@ -0,0 +1,3 @@
+export * from "./form/index.js";
+export * from "./formItem/index.js";
+export * from "./layout/index.js";

package/esm/form/form.js

@@ -0,0 +1,161 @@
+import { computed, createElementBlock, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, unref, watch, withCtx } from "vue";
+import layout from "../layout/layout.js";
+import classnames from "classnames";
+import { useForm, useFormProvide, useRegisterForm } from "@carefrees/form-utils-vue-hooks";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+    name: "Form",
+    inheritAttrs: false,
+    __name: "form",
+    props: {
+        form: {},
+        style: {
+            type: [
+                Boolean,
+                null,
+                String,
+                Object,
+                Array
+            ]
+        },
+        class: {},
+        layoutClass: {},
+        layoutStyle: {
+            type: [
+                Boolean,
+                null,
+                String,
+                Object,
+                Array
+            ]
+        },
+        formData: {},
+        onValuesChange: {},
+        onFinish: {},
+        onFinishFailed: {},
+        hideData: {},
+        name: {},
+        bgcolor: {},
+        title: {
+            type: [
+                Object,
+                String,
+                Number,
+                Boolean,
+                null,
+                Array
+            ]
+        },
+        extra: {
+            type: [
+                Object,
+                String,
+                Number,
+                Boolean,
+                null,
+                Array
+            ]
+        },
+        isAllColSpan: {
+            type: Boolean
+        },
+        headerClass: {},
+        bodyClass: {},
+        headerStyle: {
+            type: [
+                Boolean,
+                null,
+                String,
+                Object,
+                Array
+            ]
+        },
+        bodyStyle: {
+            type: [
+                Boolean,
+                null,
+                String,
+                Object,
+                Array
+            ]
+        },
+        bordered: {
+            type: Boolean
+        },
+        colCount: {},
+        gap: {},
+        errorLayout: {},
+        labelMode: {},
+        showColon: {},
+        formItemClass: {},
+        formItemStyle: {},
+        formItemLabelClass: {},
+        formItemLabelStyle: {}
+    },
+    emits: [
+        "finish",
+        "valuesChange",
+        "finishFailed"
+    ],
+    setup (__props, { emit: __emit }) {
+        const props = __props;
+        const { form, style, formData, hideData, name, onFinish, onFinishFailed, onValuesChange, layoutStyle, layoutClass, bgcolor, ...rest } = props;
+        const cls = computed(()=>classnames("carefrees-form", props.class));
+        const formStyle = computed(()=>{
+            if (bgcolor) return [
+                {
+                    backgroundColor: bgcolor
+                },
+                props.style
+            ];
+            return [
+                props.style
+            ];
+        });
+        const formInstance = useForm(props.form);
+        formInstance.value.formData = ref(props.formData || {});
+        formInstance.value.hideState = ref(props.hideData || {});
+        watch(()=>props.formData, (newVal)=>{
+            formInstance.value.formData = ref(newVal || {});
+        });
+        watch(()=>props.hideData, (newVal)=>{
+            formInstance.value.hideState = ref(newVal || {});
+        });
+        const emits = __emit;
+        formInstance.value.onFinish = (...rest2)=>{
+            emits("finish", ...rest2);
+        };
+        formInstance.value.onValuesChange = (...rest2)=>{
+            emits("valuesChange", ...rest2);
+        };
+        formInstance.value.onFinishFailed = (...rest2)=>{
+            emits("finishFailed", ...rest2);
+        };
+        useRegisterForm(formInstance, props.name);
+        const onSubmit = (event)=>{
+            event?.preventDefault?.();
+            event?.stopPropagation?.();
+            formInstance.value.submit?.();
+        };
+        useFormProvide(formInstance.value);
+        return (_ctx, _cache)=>(openBlock(), createElementBlock("form", {
+                class: normalizeClass(cls.value),
+                style: normalizeStyle(formStyle.value),
+                onSubmit
+            }, [
+                createVNode(layout, mergeProps(rest, {
+                    class: unref(layoutClass),
+                    style: unref(layoutStyle)
+                }), {
+                    default: withCtx(()=>[
+                            renderSlot(_ctx.$slots, "default")
+                        ]),
+                    _: 3
+                }, 16, [
+                    "class",
+                    "style"
+                ])
+            ], 38));
+    }
+});
+const form_form = _sfc_main;
+export { form_form as default };

package/esm/form/form.vue.d.ts

@@ -1,18 +1,21 @@
-import { FormProps } from '../interface/index';
+import type { FormProps } from "../interface/index";
 type __VLS_Props = FormProps;
-declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+declare var __VLS_4: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_4) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     finish: (...args: any[]) => void;
     valuesChange: (...args: any[]) => void;
     finishFailed: (...args: any[]) => void;
-}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onFinish?: ((...args: any[]) => any) | undefined;
     onValuesChange?: ((...args: any[]) => any) | undefined;
     onFinishFailed?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
-    default?(_: {}): any;
-}>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

package/esm/form/index.d.ts

@@ -1,37 +1,37 @@
-export declare const Form: import('../utils').SFCWithInstall<{
-    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('..').FormProps<any>> & Readonly<{
+export declare const Form: import("../utils").SFCWithInstall<{
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("../index.js").FormProps<any>> & Readonly<{
         onFinish?: ((...args: any[]) => any) | undefined;
         onValuesChange?: ((...args: any[]) => any) | undefined;
         onFinishFailed?: ((...args: any[]) => any) | undefined;
-    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         finish: (...args: any[]) => void;
         valuesChange: (...args: any[]) => void;
         finishFailed: (...args: any[]) => void;
-    }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+    }, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
         P: {};
         B: {};
         D: {};
         C: {};
         M: {};
         Defaults: {};
-    }, Readonly<import('..').FormProps<any>> & Readonly<{
+    }, Readonly<import("../index.js").FormProps<any>> & Readonly<{
         onFinish?: ((...args: any[]) => any) | undefined;
         onValuesChange?: ((...args: any[]) => any) | undefined;
         onFinishFailed?: ((...args: any[]) => any) | undefined;
     }>, {}, {}, {}, {}, {}>;
-    __isFragment?: undefined;
-    __isTeleport?: undefined;
-    __isSuspense?: undefined;
-} & import('vue').ComponentOptionsBase<Readonly<import('..').FormProps<any>> & Readonly<{
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("../index.js").FormProps<any>> & Readonly<{
     onFinish?: ((...args: any[]) => any) | undefined;
     onValuesChange?: ((...args: any[]) => any) | undefined;
     onFinishFailed?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     finish: (...args: any[]) => void;
     valuesChange: (...args: any[]) => void;
     finishFailed: (...args: any[]) => void;
-}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
-        default?(_: {}): any;
+        default?: (props: {}) => any;
     };
 })> & Record<string, any>;

package/esm/form/index.js

@@ -0,0 +1,4 @@
+import form_0 from "./form.js";
+import { withInstall } from "../utils/index.js";
+const Form = withInstall(form_0);
+export { Form };

package/esm/formItem/form.Item.base.js

@@ -0,0 +1,157 @@
+import { computed, createBlock, createSlots, defineComponent, guardReactiveProps, mergeProps, normalizeClass, normalizeProps, normalizeStyle, openBlock, renderList, renderSlot, resolveDynamicComponent, toValue, unref, useSlots, withCtx } from "vue";
+import layout_formItem from "../layout/layout.formItem.js";
+import { useFormItemAttr, useFormItemParentNameProvide } from "@carefrees/form-utils-vue-hooks";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+    name: "FormItemBase",
+    inheritAttrs: false,
+    __name: "form.Item.base",
+    props: {
+        noStyle: {
+            type: Boolean
+        },
+        input: {},
+        dependencies: {},
+        noticeOnlyRuleDataField: {},
+        preserve: {
+            type: Boolean
+        },
+        useRules: {},
+        useAttrs: {},
+        inputAttrs: {},
+        valuePropName: {},
+        getValuePath: {},
+        getValueFromEvent: {},
+        formatValue: {},
+        onAfterUpdate: {},
+        trigger: {},
+        name: {},
+        rules: {},
+        sort: {},
+        isJoinParentField: {
+            type: Boolean
+        },
+        errorLayout: {},
+        required: {
+            type: Boolean
+        },
+        labelMode: {},
+        onlyRuleStyle: {
+            type: Boolean
+        },
+        label: {
+            type: [
+                Object,
+                String,
+                Number,
+                Boolean,
+                null,
+                Array
+            ]
+        },
+        helpText: {
+            type: [
+                Object,
+                String,
+                Number,
+                Boolean,
+                null,
+                Array
+            ]
+        },
+        extra: {
+            type: [
+                Object,
+                String,
+                Number,
+                Boolean,
+                null,
+                Array
+            ]
+        },
+        showColon: {
+            type: Boolean
+        },
+        colSpan: {},
+        rowSpan: {},
+        htmlFor: {},
+        validateResult: {},
+        style: {
+            type: [
+                Boolean,
+                null,
+                String,
+                Object,
+                Array
+            ]
+        },
+        class: {},
+        labelStyle: {
+            type: [
+                Boolean,
+                null,
+                String,
+                Object,
+                Array
+            ]
+        },
+        labelClass: {}
+    },
+    setup (__props) {
+        const props = __props;
+        const formAttrs = useFormItemAttr(props);
+        useFormItemParentNameProvide({
+            name: formAttrs.newName,
+            sort: formAttrs.newSort
+        });
+        const slots = useSlots();
+        const isRequired = computed(()=>!!props.required || !!(toValue(formAttrs.ruleInstance?.value?.rules) || [])?.find((item)=>item.required));
+        return (_ctx, _cache)=>props.noStyle ? (openBlock(), createBlock(resolveDynamicComponent(props.input), normalizeProps(mergeProps({
+                key: 0
+            }, toValue(unref(formAttrs).attrsLastData))), null, 16)) : (openBlock(), createBlock(layout_formItem, {
+                key: 1,
+                label: props.label,
+                required: isRequired.value,
+                "error-layout": props.errorLayout,
+                "label-mode": props.labelMode,
+                "only-rule-style": props.onlyRuleStyle,
+                "show-colon": props.showColon,
+                "col-span": props.colSpan,
+                "row-span": props.rowSpan,
+                "html-for": unref(formAttrs).htmlFor,
+                style: normalizeStyle(props.style),
+                class: normalizeClass(props.class),
+                "label-style": props.labelStyle,
+                "label-class": props.labelClass,
+                "validate-result": unref(formAttrs).validateResult
+            }, createSlots({
+                default: withCtx(()=>[
+                        (openBlock(), createBlock(resolveDynamicComponent(props.input), normalizeProps(guardReactiveProps(toValue(unref(formAttrs).attrsLastData))), null, 16))
+                    ]),
+                _: 2
+            }, [
+                renderList(slots, (item, name)=>({
+                        name,
+                        fn: withCtx((slotProps)=>[
+                                renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps)))
+                            ])
+                    }))
+            ]), 1032, [
+                "label",
+                "required",
+                "error-layout",
+                "label-mode",
+                "only-rule-style",
+                "show-colon",
+                "col-span",
+                "row-span",
+                "html-for",
+                "style",
+                "class",
+                "label-style",
+                "label-class",
+                "validate-result"
+            ]));
+    }
+});
+const form_Item_base = _sfc_main;
+export { form_Item_base as default };

package/esm/formItem/form.Item.base.vue.d.ts

@@ -1,15 +1,14 @@
-import { FormItemProps } from '../interface/index';
-declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<FormItemProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<FormItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, Readonly<{
+import type { FormItemProps } from "../interface/index";
+type __VLS_Slots = {
     label: (params: any) => any;
+    default: (params: any) => any;
     helpText: (params: any) => any;
     extra: (params: any) => any;
-}> & {
-    label: (params: any) => any;
-    helpText: (params: any) => any;
-    extra: (params: any) => any;
-}>;
+};
+declare const __VLS_component: import("vue").DefineComponent<FormItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };