@carefrees/form-utils-vue 0.0.8

package/README.md

@@ -0,0 +1,3 @@
+# 表单工具
+
+表单和很多基础组件存在联动关系，暂时处理不了，放弃写vue的表单工具，后面有解决方法才继续

package/assets/index.css

@@ -0,0 +1,207 @@
+/* 表单 */
+.carefrees-form {
+  box-sizing: border-box;
+  background-color: #fff;
+  font-size: 14px;
+}
+
+/* 布局 */
+.carefrees-form-layout {
+  width: 100%;
+  box-sizing: border-box;
+  border-radius: 4px;
+  padding-bottom: 8px;
+  position: relative;
+}
+
+.carefrees-form-layout.all-colspan {
+  grid-column: 1 / -1;
+}
+
+.carefrees-form-layout.bordered {
+  border: 1px solid #e0e0e0;
+}
+.carefrees-form-layout.bordered .carefrees-form-layout-header {
+  padding-inline-start: 8px;
+  padding-inline-end: 8px;
+}
+
+.carefrees-form-layout-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row;
+  border-bottom: 1px solid #e0e0e0;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  margin-block-end: 4px;
+  padding-inline-start: 2px;
+  padding-inline-end: 2px;
+  box-sizing: border-box;
+}
+
+.carefrees-form-layout-header-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1d2129;
+  box-sizing: border-box;
+}
+.carefrees-form-layout-header-extra {
+  font-size: 14px;
+  font-weight: 500;
+  color: #1d2129;
+  box-sizing: border-box;
+}
+
+.carefrees-form-layout-body {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(1, auto);
+  gap: 2px;
+  padding-left: 2px;
+  padding-right: 2px;
+  box-sizing: border-box;
+}
+
+/* 表单项 */
+.carefrees-form-item {
+  font-size: 14px;
+  display: flex;
+  flex-direction: row;
+  padding: 8px;
+  box-sizing: border-box;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.carefrees-form-item-container {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  box-sizing: border-box;
+}
+.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.between {
+  gap: 8px;
+  text-align: left;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.carefrees-form-item-container.between .carefrees-form-item-body,
+.carefrees-form-item-container.between .carefrees-form-item-body-input {
+  justify-content: flex-end;
+  text-align: right;
+}
+
+.carefrees-form-item-label-warp {
+  box-sizing: border-box;
+}
+
+.carefrees-form-item-label {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.88);
+  min-height: 1.4rem;
+}
+
+.carefrees-form-item-label.show-colon::after {
+  content: ':';
+  display: inline-block;
+  text-align: center;
+  margin: 0;
+  margin-inline-end: 2px;
+  margin-inline-start: 2px;
+  box-sizing: border-box;
+}
+
+.carefrees-form-item-label.required::before {
+  content: '*';
+  color: red;
+  display: inline-block;
+  margin-inline-end: 4px;
+  box-sizing: border-box;
+}
+
+.carefrees-form-item-body {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  box-sizing: border-box;
+  gap: 4px;
+  flex: 1;
+}
+.carefrees-form-item-body-input {
+  box-sizing: border-box;
+  width: 100%;
+  flex: 1;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-direction: row;
+}
+
+.carefrees-form-item-body-input.input-bordered {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.carefrees-form-item-body-help {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.carefrees-form-item-body-error {
+  position: absolute;
+  width: 100%;
+  color: red;
+  top: auto;
+  left: 0;
+  right: 0;
+  bottom: -16px;
+  padding-top: 2px;
+  font-size: 12px;
+  box-sizing: border-box;
+  z-index: 10;
+  pointer-events: none;
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+}
+.carefrees-form-item-body-error.right-bottom {
+  justify-content: flex-end;
+  top: auto;
+  left: 0;
+  right: 0;
+  bottom: -16px;
+}
+.carefrees-form-item-body-error.top-left {
+  justify-content: start;
+  top: -16px;
+  left: 0px;
+  right: 0px;
+  bottom: auto;
+}
+.carefrees-form-item-body-error.top-right {
+  justify-content: flex-end;
+  top: -16px;
+  left: 0px;
+  right: 0px;
+  bottom: auto;
+}
+.carefrees-form-item-extra {
+  box-sizing: border-box;
+}

package/esm/component.d.ts

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

package/esm/component.mjs

@@ -0,0 +1,12 @@
+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/index.d.ts

@@ -0,0 +1,37 @@
+export declare const Form: import('../utils').SFCWithInstall<{
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('..').FormProps<any>> & Readonly<{
+        onFinish?: ((...args: any[]) => any) | undefined;
+        onValuesChange?: ((...args: any[]) => any) | undefined;
+        onFinishFailed?: ((...args: any[]) => any) | undefined;
+    }>, {}, {}, {}, {}, 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, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('..').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<{
+    onFinish?: ((...args: any[]) => any) | undefined;
+    onValuesChange?: ((...args: any[]) => any) | undefined;
+    onFinishFailed?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, 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 () => {
+    $slots: {
+        default?(_: {}): any;
+    };
+})> & Record<string, any>;

package/esm/form/index.mjs

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

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

@@ -0,0 +1,19 @@
+import { FormProps } from '../interface/index';
+type __VLS_Props = FormProps;
+declare const _default: __VLS_WithTemplateSlots<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<{
+    onFinish?: ((...args: any[]) => any) | undefined;
+    onValuesChange?: ((...args: any[]) => any) | undefined;
+    onFinishFailed?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/esm/form/index.vue.mjs

@@ -0,0 +1,110 @@
+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/index.vue2.mjs

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

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

@@ -0,0 +1,16 @@
+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<{
+    label: (params: any) => any;
+    helpText: (params: any) => any;
+    extra: (params: any) => any;
+}> & {
+    label: (params: any) => any;
+    helpText: (params: any) => any;
+    extra: (params: any) => any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/esm/formItem/form.Item.base.vue.mjs

@@ -0,0 +1,114 @@
+import { defineComponent, useSlots, computed, toValue, createBlock, openBlock, resolveDynamicComponent, normalizeProps, mergeProps, unref, normalizeClass, normalizeStyle, createSlots, withCtx, guardReactiveProps, renderList, renderSlot } from "vue";
+import { useFormItemAttr } from "../hooks/attr/attr.FormItem.mjs";
+import _sfc_main$1 from "../layout/layout.formItem.vue.mjs";
+import { useFormItemParentNameProvide } from "../hooks/useFormItemParentName.mjs";
+const __default__ = defineComponent({
+  name: "FormItemBase",
+  inheritAttrs: false
+  // 可选，防止属性自动应用到根元素
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: {
+    noStyle: { type: Boolean },
+    input: { type: [Object, String, Number, Boolean, null, Array] },
+    dependencies: {},
+    noticeOnlyRuleDataField: {},
+    isNoticeParentField: { type: Boolean },
+    noticeWatchField: {},
+    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(() => {
+      var _a, _b, _c;
+      return !!props.required || !!((_c = toValue((_b = (_a = formAttrs.ruleInstance) == null ? void 0 : _a.value) == null ? void 0 : _b.rules) || []) == null ? void 0 : _c.find((item) => {
+        return item.required;
+      }));
+    });
+    return (_ctx, _cache) => {
+      return props.noStyle ? (openBlock(), createBlock(
+        resolveDynamicComponent(props.input),
+        normalizeProps(mergeProps({ key: 0 }, toValue(unref(formAttrs).attrsLastData))),
+        null,
+        16
+        /* FULL_PROPS */
+      )) : (openBlock(), createBlock(_sfc_main$1, {
+        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
+            /* FULL_PROPS */
+          ))
+        ]),
+        _: 2
+        /* DYNAMIC */
+      }, [
+        renderList(slots, (item, name) => {
+          return {
+            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"]));
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/esm/formItem/form.Item.base.vue2.mjs

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

package/esm/formItem/form.hide.item.vue.d.ts

@@ -0,0 +1,16 @@
+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<{
+    label: (params: any) => any;
+    helpText: (params: any) => any;
+    extra: (params: any) => any;
+}> & {
+    label: (params: any) => any;
+    helpText: (params: any) => any;
+    extra: (params: any) => any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/esm/formItem/form.hide.item.vue.mjs

@@ -0,0 +1,78 @@
+import { defineComponent, useSlots, createBlock, createCommentVNode, unref, openBlock, normalizeProps, mergeProps, createSlots, renderList, withCtx, renderSlot, guardReactiveProps } from "vue";
+import _sfc_main$1 from "./form.Item.base.vue.mjs";
+import { useRegisterFormHideItem } from "../hooks/register/register.FormHideItem.mjs";
+const __default__ = defineComponent({
+  name: "FormHideItem",
+  inheritAttrs: false
+  // 可选，防止属性自动应用到根元素
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: {
+    noStyle: { type: Boolean },
+    input: { type: [Object, String, Number, Boolean, null, Array] },
+    dependencies: {},
+    noticeOnlyRuleDataField: {},
+    isNoticeParentField: { type: Boolean },
+    noticeWatchField: {},
+    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 slots = useSlots();
+    const { isHide } = useRegisterFormHideItem({ name: props.name, sort: props.sort, isJoinParentField: props.isJoinParentField });
+    return (_ctx, _cache) => {
+      return !unref(isHide) ? (openBlock(), createBlock(
+        _sfc_main$1,
+        normalizeProps(mergeProps({ key: 0 }, props)),
+        createSlots({
+          _: 2
+          /* DYNAMIC */
+        }, [
+          renderList(slots, (item, name) => {
+            return {
+              name,
+              fn: withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps)))
+              ])
+            };
+          })
+        ]),
+        1040
+        /* FULL_PROPS, DYNAMIC_SLOTS */
+      )) : createCommentVNode("v-if", true);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/esm/formItem/form.hide.item.vue2.mjs

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

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

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