@carefrees/form-utils-vue 0.0.10 → 0.0.12

package/esm/layout/layout.formItem.js

@@ -0,0 +1,195 @@
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, toDisplayString, toValue, useSlots } from "vue";
+import classnames from "classnames";
+import { useAttrsInject } from "../hooks/useAttrs.js";
+const _hoisted_1 = [
+    "for"
+];
+const preCls = "carefrees-form-item";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+    name: "LayoutFormItem",
+    inheritAttrs: false,
+    __name: "layout.formItem",
+    props: {
+        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 attrs = useAttrsInject();
+        const props = __props;
+        const solts = useSlots();
+        const labelMode = computed(()=>props.labelMode ?? toValue(attrs.value.labelMode) ?? "top");
+        const showColon = computed(()=>props.showColon ?? toValue(attrs.value.showColon));
+        const errorLayout = computed(()=>props.errorLayout ?? toValue(attrs.value.errorLayout) ?? "left-bottom");
+        const tips = computed(()=>{
+            const v = toValue(props.validateResult)?.tip;
+            if (Array.isArray(v)) return v.join(",");
+            return v;
+        });
+        const cls = computed(()=>classnames(preCls, props.class, toValue(attrs.value.formItemClass), {
+                "dx-invalid": !!toValue(props.validateResult)?.isInvalid
+            }));
+        const containerCls = computed(()=>classnames(`${preCls}-container`, {
+                [`${labelMode.value}`]: !!labelMode.value
+            }));
+        const labelCls = computed(()=>classnames(`${preCls}-label`, {
+                required: !!props.required,
+                "show-colon": showColon && ("left" === labelMode.value || "between" === labelMode.value)
+            }));
+        const labelWarpCls = computed(()=>classnames(`${preCls}-label-warp`, toValue(props.labelClass), toValue(attrs.value.formItemLabelClass)));
+        const inputCls = computed(()=>classnames(`${preCls}-body-input`));
+        const errorCls = computed(()=>classnames(`${preCls}-body-error`, {
+                [errorLayout.value]: !!errorLayout.value
+            }));
+        const _isLabel = computed(()=>(props.label || solts.label) && "hide" !== labelMode.value);
+        const style = computed(()=>{
+            const css = {};
+            if (props.onlyRuleStyle) css.padding = "0px";
+            if (props.colSpan) {
+                const colCount = toValue(attrs.value.colCount) || 4;
+                const end = colCount > props.colSpan ? props.colSpan : colCount;
+                css.gridColumnEnd = `span ${end}`;
+            }
+            if (props.rowSpan) css.gridRowEnd = `span ${props.rowSpan}`;
+            return [
+                toValue(attrs.value.formItemStyle),
+                props.style,
+                css
+            ];
+        });
+        const labelStyle = computed(()=>[
+                toValue(attrs.value.formItemLabelStyle),
+                props.labelStyle
+            ]);
+        const isHelpText = computed(()=>!!props.helpText || solts.helpText);
+        const isExtra = computed(()=>!!props.extra || solts.extra);
+        return (_ctx, _cache)=>(openBlock(), createElementBlock("div", {
+                class: normalizeClass(cls.value),
+                style: normalizeStyle(style.value)
+            }, [
+                createElementVNode("div", {
+                    class: normalizeClass(containerCls.value)
+                }, [
+                    _isLabel.value ? (openBlock(), createElementBlock("div", {
+                        key: 0,
+                        class: normalizeClass(labelWarpCls.value)
+                    }, [
+                        createElementVNode("label", {
+                            style: normalizeStyle(labelStyle.value),
+                            class: normalizeClass(labelCls.value),
+                            for: toValue(props.htmlFor)
+                        }, [
+                            props.label ? (openBlock(), createElementBlock(Fragment, {
+                                key: 0
+                            }, [
+                                createTextVNode(toDisplayString(props.label), 1)
+                            ], 64)) : renderSlot(_ctx.$slots, "label", {
+                                key: 1
+                            })
+                        ], 14, _hoisted_1)
+                    ], 2)) : createCommentVNode("", true),
+                    createElementVNode("div", {
+                        class: normalizeClass(preCls + "-body")
+                    }, [
+                        createElementVNode("div", {
+                            class: normalizeClass(inputCls.value)
+                        }, [
+                            renderSlot(_ctx.$slots, "default")
+                        ], 2),
+                        isHelpText.value ? (openBlock(), createElementBlock("div", {
+                            key: 0,
+                            class: normalizeClass(preCls + "-body-help")
+                        }, [
+                            props.helpText ? (openBlock(), createElementBlock(Fragment, {
+                                key: 0
+                            }, [
+                                createTextVNode(toDisplayString(props.helpText), 1)
+                            ], 64)) : renderSlot(_ctx.$slots, "helpText", {
+                                key: 1
+                            })
+                        ], 2)) : createCommentVNode("", true),
+                        tips.value ? (openBlock(), createElementBlock("div", {
+                            key: 1,
+                            class: normalizeClass(errorCls.value)
+                        }, toDisplayString(tips.value), 3)) : createCommentVNode("", true)
+                    ], 2)
+                ], 2),
+                isExtra.value ? (openBlock(), createElementBlock("div", {
+                    key: 0,
+                    class: normalizeClass(preCls + "-extra")
+                }, [
+                    props.extra ? (openBlock(), createElementBlock(Fragment, {
+                        key: 0
+                    }, [
+                        createTextVNode(toDisplayString(props.extra), 1)
+                    ], 64)) : renderSlot(_ctx.$slots, "extra", {
+                        key: 1
+                    })
+                ], 2)) : createCommentVNode("", true)
+            ], 6));
+    }
+});
+const layout_formItem = _sfc_main;
+export { layout_formItem as default };

package/esm/layout/layout.formItem.vue.d.ts

@@ -1,17 +1,14 @@
-import { LayoutFormItemProps } from '../interface/layout.formItem';
-declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<LayoutFormItemProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<LayoutFormItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, Readonly<{
+import type { LayoutFormItemProps } from "../interface/layout.formItem";
+type __VLS_Slots = {
     default: any;
     label: any;
     helpText: any;
     extra: any;
-}> & {
-    default: any;
-    label: any;
-    helpText: any;
-    extra: any;
-}>;
+};
+declare const __VLS_component: import("vue").DefineComponent<LayoutFormItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LayoutFormItemProps> & 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;
     };

package/esm/layout/layout.js

@@ -0,0 +1,160 @@
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, toDisplayString, toValue, useSlots } from "vue";
+import classnames from "classnames";
+import { useAttrsInject, useAttrsProvide } from "../hooks/useAttrs.js";
+const preCls = "carefrees-form-layout";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+    name: "Layout",
+    inheritAttrs: false,
+    __name: "layout",
+    props: {
+        title: {
+            type: [
+                Object,
+                String,
+                Number,
+                Boolean,
+                null,
+                Array
+            ]
+        },
+        extra: {
+            type: [
+                Object,
+                String,
+                Number,
+                Boolean,
+                null,
+                Array
+            ]
+        },
+        isAllColSpan: {
+            type: Boolean
+        },
+        class: {},
+        headerClass: {},
+        bodyClass: {},
+        style: {
+            type: [
+                Boolean,
+                null,
+                String,
+                Object,
+                Array
+            ]
+        },
+        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: {}
+    },
+    setup (__props) {
+        const attrs = useAttrsInject();
+        const props = __props;
+        const solts = useSlots();
+        const colCount = computed(()=>toValue(props.colCount) ?? toValue(attrs.value.colCount));
+        const errorLayout = computed(()=>toValue(props.errorLayout) ?? toValue(attrs.value.errorLayout));
+        const labelMode = computed(()=>toValue(props.labelMode) ?? toValue(attrs.value.labelMode));
+        const showColon = computed(()=>toValue(props.showColon) ?? toValue(attrs.value.showColon));
+        const formItemClass = computed(()=>toValue(props.formItemClass) ?? toValue(attrs.value.formItemClass));
+        const formItemStyle = computed(()=>toValue(props.formItemStyle) ?? toValue(attrs.value.formItemStyle));
+        const formItemLabelClass = computed(()=>toValue(props.formItemLabelClass) ?? toValue(attrs.value.formItemLabelClass));
+        const formItemLabelStyle = computed(()=>toValue(props.formItemLabelStyle) ?? toValue(attrs.value.formItemLabelStyle));
+        useAttrsProvide({
+            colCount,
+            errorLayout,
+            labelMode,
+            showColon,
+            formItemClass,
+            formItemStyle,
+            formItemLabelClass,
+            formItemLabelStyle
+        });
+        const cls = computed(()=>classnames(preCls, props.class, {
+                "all-colspan": props.isAllColSpan,
+                bordered: props.bordered
+            }));
+        const bodyCls = computed(()=>classnames(`${preCls}-body`, props.bodyClass));
+        const headerCls = computed(()=>classnames(`${preCls}-header`, props.headerClass));
+        const headerTitleCls = computed(()=>classnames(`${preCls}-header-title`));
+        const headerExtraCls = computed(()=>classnames(`${preCls}-header-extra`));
+        const bodyStyle = computed(()=>{
+            const css = {};
+            if ("string" == typeof props.gap) css.gap = props.gap;
+            if ("number" == typeof props.gap) css.gap = `${props.gap}px`;
+            if (colCount.value) css.gridTemplateColumns = `repeat(${colCount.value}, auto)`;
+            return [
+                css,
+                props.bodyStyle
+            ];
+        });
+        const isTitle = computed(()=>!!props.title || solts.title);
+        const isExtra = computed(()=>!!props.extra || solts.extra);
+        return (_ctx, _cache)=>(openBlock(), createElementBlock("div", {
+                style: normalizeStyle(props.style),
+                class: normalizeClass(cls.value)
+            }, [
+                isExtra.value || isTitle.value ? (openBlock(), createElementBlock("div", {
+                    key: 0,
+                    style: normalizeStyle(_ctx.headerStyle),
+                    class: normalizeClass(headerCls.value)
+                }, [
+                    createElementVNode("div", {
+                        class: normalizeClass(headerTitleCls.value)
+                    }, [
+                        props.title ? (openBlock(), createElementBlock(Fragment, {
+                            key: 0
+                        }, [
+                            createTextVNode(toDisplayString(props.title), 1)
+                        ], 64)) : renderSlot(_ctx.$slots, "title", {
+                            key: 1
+                        })
+                    ], 2),
+                    createElementVNode("div", {
+                        class: normalizeClass(headerExtraCls.value)
+                    }, [
+                        props.extra ? (openBlock(), createElementBlock(Fragment, {
+                            key: 0
+                        }, [
+                            createTextVNode(toDisplayString(props.extra), 1)
+                        ], 64)) : renderSlot(_ctx.$slots, "extra", {
+                            key: 1
+                        })
+                    ], 2)
+                ], 6)) : createCommentVNode("", true),
+                createElementVNode("div", {
+                    style: normalizeStyle(bodyStyle.value),
+                    class: normalizeClass(bodyCls.value)
+                }, [
+                    renderSlot(_ctx.$slots, "default")
+                ], 6)
+            ], 6));
+    }
+});
+const layout = _sfc_main;
+export { layout as default };

package/esm/layout/layout.vue.d.ts

@@ -1,15 +1,13 @@
-import { FormLayoutProps } from '../interface/layout';
-declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<FormLayoutProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<FormLayoutProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, Readonly<{
+import type { FormLayoutProps } from "../interface/layout";
+type __VLS_Slots = {
     default: any;
     title: any;
     extra: any;
-}> & {
-    default: any;
-    title: any;
-    extra: any;
-}>;
+};
+declare const __VLS_component: import("vue").DefineComponent<FormLayoutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormLayoutProps> & 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;
     };

package/esm/utils/index.js

@@ -0,0 +1 @@
+export * from "./withInstall.js";

package/esm/utils/withInstall.d.ts

@@ -1,3 +1,3 @@
-import { Plugin } from 'vue';
+import type { Plugin } from 'vue';
 export type SFCWithInstall<T> = T & Plugin;
-export declare const withInstall: <T, E extends Record<string, any> = Record<string, any>, K extends Record<string, any> = Record<string, any>>(main: T, extra?: E | undefined, childComponents?: K | undefined) => SFCWithInstall<T> & E & K;
+export declare const withInstall: <T, E extends Record<string, any> = Record<string, any>, K extends Record<string, any> = Record<string, any>>(main: T, extra?: E, childComponents?: K) => SFCWithInstall<T> & E & K;

package/esm/utils/withInstall.js

@@ -0,0 +1,15 @@
+const withInstall = (main, extra, childComponents)=>{
+    main.install = (app)=>{
+        for (const comp of [
+            main,
+            ...Object.values(childComponents ?? {})
+        ]){
+            const name = comp.name || comp.__name;
+            app.component(name, comp);
+        }
+    };
+    if (childComponents) for (const [key, comp] of Object.entries(childComponents))main[key] = comp;
+    if (extra) for (const [key, comp] of Object.entries(extra))main[key] = comp;
+    return main;
+};
+export { withInstall };

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@carefrees/form-utils-vue",
   "author": "SunLxy <1011771396@qq.com>",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "",
-  "main": "lib/index.js",
-  "module": "esm/index.mjs",
+  "main": "esm/index.js",
+  "module": "esm/index.js",
   "types": "esm/index.d.ts",
   "scripts": {
-    "build": "saqu-vue build",
-    "watch": "saqu-vue build --watch"
+    "build": "carefrees-rslib build --vue --esm",
+    "watch": "carefrees-rslib build --watch --vue --esm"
   },
   "publishConfig": {
     "access": "public"
@@ -16,17 +16,15 @@
   "files": [
     "assets",
     "src",
-    "lib",
     "esm"
   ],
   "keywords": [],
   "license": "ISC",
   "devDependencies": {
-    "@saqu-vue/core": "^1.0.1",
     "vue": "^3.5.13"
   },
   "dependencies": {
-    "@carefrees/form-utils": "^0.0.10",
+    "@carefrees/form-utils": "^0.0.12",
     "async-validator": "~4.2.5",
     "classnames": "2.5.1"
   }

package/src/form/form.vue

@@ -1,5 +1,5 @@
 <template>
-  <form :class='cls' :style='style' @submit='onSubmit'>
+  <form :class='cls' :style='formStyle' @submit='onSubmit'>
     <FormLayout v-bind='rest' :class='layoutClass' :style='layoutStyle'>
       <slot />
     </FormLayout>
@@ -34,11 +34,18 @@ const {
   onValuesChange,
   layoutStyle,
   layoutClass,
+  bgcolor,
   ...rest
 } = props
 
 const cls = computed(() => clx('carefrees-form', props.class));
 
+const formStyle = computed(() => {
+  if (bgcolor)
+    return [{ backgroundColor: bgcolor }, props.style];
+  return [props.style]
+});
+
 const formInstance = useForm(props.form);
 formInstance.value.ctor(reactive(props.formData || {}), reactive(props.hideData || {}), reactive(props.hideRuleData || {}));
 

package/src/interface/index.ts

@@ -37,4 +37,6 @@ export interface FormProps<T = any> extends FormLayoutProps {
   name?: string;
   /**隐藏规则校验*/
   hideRuleData?: Record<string, boolean>;
+  /**背景颜色*/
+  bgcolor?: string;
 }

package/esm/component.mjs

@@ -1,12 +0,0 @@
-import { Form } from "./form/index.mjs";
-import { FormHideItem, FormItem, FormItemBase } from "./formItem/index.mjs";
-import { FormLayoutRows, Layout, LayoutFormItem } from "./layout/index.mjs";
-export {
-  Form,
-  FormHideItem,
-  FormItem,
-  FormItemBase,
-  FormLayoutRows,
-  Layout,
-  LayoutFormItem
-};

package/esm/form/form.vue.mjs

@@ -1,110 +0,0 @@
-import { defineComponent, computed, reactive, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createVNode, mergeProps, withCtx, renderSlot } from "vue";
-import { useRegisterForm } from "../hooks/register/register.form.mjs";
-import { useForm, useFormProvide } from "../hooks/useForm.mjs";
-import _sfc_main$1 from "../layout/layout.vue.mjs";
-import clx from "classnames";
-const __default__ = defineComponent({
-  name: "Form",
-  inheritAttrs: false
-  // 可选，防止属性自动应用到根元素
-});
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
-  props: {
-    form: {},
-    style: { type: [Boolean, null, String, Object, Array] },
-    class: {},
-    layoutClass: {},
-    layoutStyle: { type: [Boolean, null, String, Object, Array] },
-    formData: {},
-    onValuesChange: {},
-    onFinish: {},
-    onFinishFailed: {},
-    hideData: {},
-    name: {},
-    hideRuleData: {},
-    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,
-      hideRuleData,
-      name,
-      onFinish,
-      onFinishFailed,
-      onValuesChange,
-      layoutStyle,
-      layoutClass,
-      ...rest
-    } = props;
-    const cls = computed(() => clx("carefrees-form", props.class));
-    const formInstance = useForm(props.form);
-    formInstance.value.ctor(reactive(props.formData || {}), reactive(props.hideData || {}), reactive(props.hideRuleData || {}));
-    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.value, props.name);
-    const onSubmit = (event) => {
-      var _a, _b, _c, _d;
-      (_a = event == null ? void 0 : event.preventDefault) == null ? void 0 : _a.call(event);
-      (_b = event == null ? void 0 : event.stopPropagation) == null ? void 0 : _b.call(event);
-      (_d = (_c = formInstance.value).submit) == null ? void 0 : _d.call(_c);
-    };
-    useFormProvide(formInstance.value);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "form",
-        {
-          class: normalizeClass(cls.value),
-          style: normalizeStyle(unref(style)),
-          onSubmit
-        },
-        [
-          createVNode(_sfc_main$1, mergeProps(rest, {
-            class: unref(layoutClass),
-            style: unref(layoutStyle)
-          }), {
-            default: withCtx(() => [
-              renderSlot(_ctx.$slots, "default")
-            ]),
-            _: 3
-            /* FORWARDED */
-          }, 16, ["class", "style"])
-        ],
-        38
-        /* CLASS, STYLE, NEED_HYDRATION */
-      );
-    };
-  }
-});
-export {
-  _sfc_main as default
-};

package/esm/form/form.vue2.mjs

@@ -1,4 +0,0 @@
-import _sfc_main from "./form.vue.mjs";
-export {
-  _sfc_main as default
-};

package/esm/form/index.mjs

@@ -1,6 +0,0 @@
-import _sfc_main from "./form.vue.mjs";
-import { withInstall } from "../utils/withInstall.mjs";
-const Form = withInstall(_sfc_main);
-export {
-  Form
-};