@carefrees/form-utils-vue 0.0.8

package/src/hooks/useFormItem.ts

@@ -0,0 +1,28 @@
+import { FormItemInstanceBase } from '@carefrees/form-utils';
+import { provide, inject, ref } from 'vue';
+
+const formItemProvideSymbol = Symbol('carefrees-form-item');
+
+/**表单项实例 Context */
+export function useFormItemProvide(formItem: FormItemInstanceBase) {
+  provide(formItemProvideSymbol, formItem);
+}
+
+/**子项中获取表单项实例*/
+export function useFormItemInject() {
+  const formItem = inject<FormItemInstanceBase>(formItemProvideSymbol, new FormItemInstanceBase());
+  return formItem;
+}
+
+/**s初始化 表单项实例*/
+export function useFormItem(formItem?: FormItemInstanceBase) {
+  const refForm = ref<FormItemInstanceBase>();
+  if (!refForm.value) {
+    if (formItem) {
+      refForm.value = formItem;
+    } else {
+      refForm.value = new FormItemInstanceBase();
+    }
+  }
+  return refForm.value;
+}

package/src/hooks/useFormItemParentName.ts

@@ -0,0 +1,49 @@
+import { provide, inject, computed, ComputedRef, ref, toValue } from 'vue';
+import { PartialComputedRefs } from '../interface';
+
+export interface FormItemParentNamOptions {
+  /**字段*/
+  name: string;
+  /**排序*/
+  sort?: string;
+  /**是否拼接父级字段*/
+  isJoinParentField?: boolean;
+}
+
+export type FormItemParentNameProviderProps = PartialComputedRefs<Omit<FormItemParentNamOptions, 'isJoinParentField'>>;
+
+const parentNameProvideSymbol = Symbol('carefrees-parent-name');
+
+export const useFormItemParentNameProvide = (props: FormItemParentNameProviderProps) => {
+  const { name, sort } = props;
+  provide(
+    parentNameProvideSymbol,
+    computed(() => ({ name, sort })),
+  );
+};
+
+/**表单项获取父级字段*/
+export const useFormItemParentNameInject = (options: FormItemParentNamOptions) => {
+  const { isJoinParentField = true, sort, name } = options;
+  const parentItem = inject<ComputedRef<FormItemParentNameProviderProps>>(
+    parentNameProvideSymbol,
+    computed(() => ({ name: ref(''), sort: ref('') })),
+  );
+  const newName = computed(() => {
+    const _name = toValue(parentItem.value.name);
+    if (_name && isJoinParentField) {
+      if (/^\./.test(`${name}`)) {
+        return [_name, name].filter(Boolean).join('');
+      } else if (name) {
+        return [_name, '.', name].filter(Boolean).join('');
+      }
+      return [_name, name].filter(Boolean).join('');
+    }
+    return [name].filter(Boolean).join('');
+  });
+  const newSort = computed(() => {
+    const _sort = toValue(parentItem.value.sort);
+    return [isJoinParentField ? _sort : '', sort].filter(Boolean).join('-');
+  });
+  return { newName, newSort, parentItem };
+};

package/src/hooks/useFormList.ts

@@ -0,0 +1,28 @@
+import { FormListInstanceBase } from '@carefrees/form-utils';
+import { provide, inject, ref } from 'vue';
+
+const formListProvideSymbol = Symbol('carefrees-form-list');
+
+/**表单List实例 Context */
+export function useFormListProvide(formList: FormListInstanceBase) {
+  provide(formListProvideSymbol, formList);
+}
+
+/**子项中获取表单List实例*/
+export function useFormListInject() {
+  const formList = inject<FormListInstanceBase>(formListProvideSymbol, new FormListInstanceBase());
+  return formList;
+}
+
+/**初始化 表单List实例*/
+export function useFormList(formList?: FormListInstanceBase) {
+  const refForm = ref<FormListInstanceBase>();
+  if (!refForm.value) {
+    if (formList) {
+      refForm.value = formList;
+    } else {
+      refForm.value = new FormListInstanceBase();
+    }
+  }
+  return refForm.value;
+}

package/src/hooks/useHtmlFor.ts

@@ -0,0 +1,9 @@
+import { ref, computed, Ref } from 'vue';
+
+let localId = 0;
+export const useHtmlFor = (suffix: Ref<string>) => {
+  const count = ref(localId++);
+  return computed(() => {
+    return `carefree-vue-form-item_${count.value.toString(32)}_${suffix.value}`;
+  });
+};

package/src/hooks/useMultipleForm.ts

@@ -0,0 +1,29 @@
+import { MultipleInstanceBase } from "@carefrees/form-utils"
+import { provide, inject, ref } from "vue"
+
+const multipleFormProvideSymbol = Symbol("carefrees-multiple-form")
+
+/**多表单收集 Context */
+export function useMultipleFormProvide(multipleForm?: MultipleInstanceBase) {
+  const newMultipleForm = useMultipleForm(multipleForm)
+  provide(multipleFormProvideSymbol, newMultipleForm)
+}
+
+/**子项中获取 多表单收集 实例*/
+export function useMultipleFormInject() {
+  const multipleForm = inject<MultipleInstanceBase>(multipleFormProvideSymbol, new MultipleInstanceBase())
+  return multipleForm
+}
+
+/**初始化 多表单收集 实例*/
+export function useMultipleForm(multipleForm?: MultipleInstanceBase) {
+  const refForm = ref<MultipleInstanceBase>()
+  if (!refForm.value) {
+    if (multipleForm) {
+      refForm.value = multipleForm
+    } else {
+      refForm.value = new MultipleInstanceBase()
+    }
+  }
+  return refForm.value
+}

package/src/index.ts

@@ -0,0 +1,16 @@
+import * as components from './component';
+export * from './hooks';
+export * from './component';
+export * from './utils';
+export * from './interface';
+export * from './interface/layout';
+export * from './interface/layout.formItem';
+
+import { App } from 'vue';
+export default {
+  install: (app: App) => {
+    for (const c in components) {
+      app.use((components as any)[c]);
+    }
+  },
+};

package/src/instance/ruleIntsnace.ts

@@ -0,0 +1,105 @@
+import AsyncValidator, { RuleItem } from 'async-validator';
+import type { MessageType, FormInstanceBase } from '@carefrees/form-utils';
+import { ref, Ref, toValue } from 'vue';
+
+export class RuleInstanceBase2 {
+  /**
+   * 顺序
+   * @example
+   * "0"
+   * "0-0"
+   * "0-0-0"
+   */
+  sort?: string;
+  /**表单实例*/
+  instance?: FormInstanceBase;
+  /**
+   * 字段 ，分割方式与lodash的get和set方法值更新或设置路径一致
+   * @example
+   * 默认："name"
+   * 嵌套字段："name.a.doc"
+   * 嵌套字段："name[1].a.doc"
+   * 嵌套字段："name.a[2].doc"
+   */
+  name: string = '';
+  /**规则*/
+  rules: Ref<RuleItem[]> = ref([]);
+  /**错误提示内容*/
+  messages: Ref<MessageType[]> = ref([]);
+  /**更新当前组件方法*/
+  updated?: Function;
+
+  /**判断是否必填*/
+  isRequired = () => {
+    if (this.instance?.getFieldHideRulesValue?.(this.name)) {
+      return false;
+    }
+    const findItem = (toValue(this.rules) || []).find((item) => item?.required);
+    return !!findItem;
+  };
+  /**初始化*/
+  ctor = (name: string, rules: RuleItem[]) => {
+    this.name = name;
+    this.rules.value = rules || [];
+    return this;
+  };
+  /**判断是否需要验证*/
+  isValidate = () => {
+    if (this.instance?.getFieldHideRulesValue?.(this.name)) {
+      return false;
+    }
+    const _rules = toValue(this.rules);
+    return !!(Array.isArray(_rules) && _rules.length);
+  };
+  /**更新提示信息*/
+  updatedMessages = (messages?: MessageType[]) => {
+    this.messages.value = messages || [];
+    this.updated?.({});
+  };
+
+  /**更新规则*/
+  updatedRules = (rules: RuleItem[]) => {
+    /**更新当前规则*/
+    this.rules.value = rules;
+    /**当前组件重新渲染*/
+    this.updatedMessages?.([]);
+  };
+
+  /**验证规则
+   * @param {boolean} isOnly 仅判断是否校验通过
+   */
+  validate = (isOnly: boolean = false) => {
+    return new Promise((resolve, reject) => {
+      const value = this.instance?.getFieldValue?.(this.name);
+      if (this.instance?.getFieldHideRulesValue?.(this.name)) {
+        this.updatedMessages([]);
+        resolve({ [this.name]: value });
+      }
+      new AsyncValidator({ [this.name]: toValue(this.rules) || [] })
+        .validate({ [this.name]: value })
+        .then((values) => {
+          if (!isOnly) this.updatedMessages([]);
+          resolve(values);
+        })
+        .catch(({ errors }) => {
+          if (Array.isArray(errors)) {
+            if (!isOnly) this.updatedMessages(errors);
+            reject(errors);
+          } else {
+            reject();
+          }
+        });
+    });
+  };
+
+  /**获取校验结果*/
+  getValidateResult = () => {
+    const _messages = toValue(this.messages);
+    const tip = Array.isArray(_messages) ? _messages.map((it) => it.message) : '';
+    const isInvalid = Array.isArray(tip) ? !!tip.length : !!tip;
+    return {
+      tip,
+      isInvalid,
+    };
+  };
+}

package/src/interface/index.ts

@@ -0,0 +1,40 @@
+import { ComputedRef, Ref, VNodeChild, StyleValue, UnwrapNestedRefs } from 'vue';
+import { FormItemAttrOptions } from '../hooks/attr/attr.FormItem';
+import { LayoutFormItemProps } from './layout.formItem';
+import { FormLayoutProps } from './layout';
+import { FormInstanceBase, ValidateErrorEntity } from '@carefrees/form-utils';
+
+export type ComputedRefBase<T> = ComputedRef<T> | Ref<T>;
+
+export type PartialComputedRefs<T> = {
+  [K in keyof T]: ComputedRefBase<T[K]>;
+};
+
+export interface FormItemProps extends FormItemAttrOptions, LayoutFormItemProps {
+  /**不进行样式渲染*/
+  noStyle?: boolean;
+  /**输入框组件*/
+  input?: VNodeChild;
+}
+
+export interface FormProps<T = any> extends FormLayoutProps {
+  form?: FormInstanceBase;
+  style?: StyleValue;
+  class?: string;
+  layoutClass?: string;
+  layoutStyle?: StyleValue;
+  /**表单数据*/
+  formData?: any;
+  /**值更新触发*/
+  onValuesChange?: (changedValues: Partial<T>, values: UnwrapNestedRefs<T>) => void;
+  /**提交保存 验证成功*/
+  onFinish?: (values: T) => void;
+  /**提交保存 验证失败*/
+  onFinishFailed?: (errorInfo: ValidateErrorEntity<T>) => void;
+  /**隐藏表单项初始值*/
+  hideData?: Record<string, boolean>;
+  /**表单名称*/
+  name?: string;
+  /**隐藏规则校验*/
+  hideRuleData?: Record<string, boolean>;
+}

package/src/interface/layout.formItem.ts

@@ -0,0 +1,42 @@
+import { VNodeChild, StyleValue } from 'vue';
+import { ComputedRefBase } from '.';
+
+export interface LayoutFormItemProps {
+  /**规则校验失败错误提示位置*/
+  errorLayout?: 'left-bottom' | 'right-bottom' | 'top-right' | 'top-left';
+  /**必填样式*/
+  required?: boolean;
+  /**label显示模式*/
+  labelMode?: 'left' | 'top' | 'between' | 'hide';
+  /**只进行规则样式*/
+  onlyRuleStyle?: boolean;
+  label?: VNodeChild;
+  /**底部提示内容*/
+  helpText?: VNodeChild;
+  /**额外内容*/
+  extra?: VNodeChild;
+  /**是否显示label后的冒号*/
+  showColon?: boolean;
+  /**
+   * 表单项占据列数
+   * @default 1
+   */
+  colSpan?: number;
+  /**
+   * 表单项占据行数
+   * @default 1
+   */
+  rowSpan?: number;
+
+  htmlFor?: ComputedRefBase<string>;
+  /**规则验证结果*/
+  validateResult?: ComputedRefBase<{
+    tip: string | (string | undefined)[];
+    isInvalid: boolean;
+  }>;
+  // 样式部分
+  style?: StyleValue;
+  class?: string;
+  labelStyle?: StyleValue;
+  labelClass?: string;
+}

package/src/interface/layout.ts

@@ -0,0 +1,29 @@
+import { AttrsOptions } from '../hooks/useAttrs';
+import { VNodeChild, StyleValue } from 'vue';
+
+export interface FormLayoutProps extends Omit<AttrsOptions, 'colCount'> {
+  /**标题*/
+  title?: VNodeChild;
+  /**额外内容*/
+  extra?: VNodeChild;
+  /**是否占据整行*/
+  isAllColSpan?: boolean;
+  class?: string;
+  /**头部ClassName*/
+  headerClass?: string;
+  /**内容Class*/
+  bodyClass?: string;
+  style?: StyleValue;
+  /**头部样式*/
+  headerStyle?: StyleValue;
+  /**内容样式*/
+  bodyStyle?: StyleValue;
+  /**是否添加边框*/
+  bordered?: boolean;
+  /**列数据*/
+  colCount?: number;
+  /**
+   * @description gap 属性是用来设置网格行与列之间的间隙，该属性是row-gap and column-gap的简写形式。
+   */
+  gap?: string | number;
+}

package/src/layout/index.ts

@@ -0,0 +1,8 @@
+import _Layout from './layout.vue';
+import _LayoutFormItem from './layout.formItem.vue';
+import _FormLayoutRows from './layout.form.rows.vue';
+import { withInstall } from '../utils';
+
+export const Layout = withInstall(_Layout);
+export const LayoutFormItem = withInstall(_LayoutFormItem);
+export const FormLayoutRows = withInstall(_FormLayoutRows);

package/src/layout/layout.form.rows.vue

@@ -0,0 +1,19 @@
+<template>
+  <div v-bind='props' :class='cls'>
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import clx from 'classnames';
+import { defineProps, withDefaults, computed, HTMLAttributes } from "vue"
+const preCls = 'carefrees-form-layout';
+defineOptions({
+  name: 'FormLayoutRows',
+  inheritAttrs: false, // 可选，防止属性自动应用到根元素
+});
+const props = withDefaults(defineProps</* @vue-ignore */HTMLAttributes>(), {})
+const cls = computed(() => clx(preCls, props.class, {
+  'all-colspan': true,
+}))
+</script>

package/src/layout/layout.formItem.vue

@@ -0,0 +1,119 @@
+<template>
+  <div :class='cls' :style='style'>
+    <div :class='containerCls'>
+      <template v-if='_isLabel'>
+        <div :class='labelWarpCls'>
+          <label :style='labelStyle' :class='labelCls' :for='toValue(props.htmlFor)'>
+            <template v-if='props.label'>
+              {{ props.label }}
+            </template>
+            <template v-else>
+              <slot name='label' />
+            </template>
+          </label>
+        </div>
+      </template>
+      <div :class='preCls + "-body"'>
+        <div :class='inputCls'>
+          <slot />
+        </div>
+        <template v-if='isHelpText'>
+          <div :class='preCls + "-body-help"'>
+            <template v-if='props.helpText'>
+              {{ props.helpText }}
+            </template>
+            <template v-else>
+              <slot name='helpText' />
+            </template>
+          </div>
+        </template>
+        <template v-if='!!tips'>
+          <div :class='errorCls'>{{ tips }}</div>
+        </template>
+      </div>
+    </div>
+    <template v-if='isExtra'>
+      <div :class='preCls + "-extra"'>
+        <template v-if='props.extra'>
+          {{ props.extra }}
+        </template>
+        <template v-else>
+          <slot name='extra' />
+        </template>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import clx from 'classnames';
+import { defineProps, withDefaults, toValue, computed, StyleValue, watch } from "vue"
+import type { LayoutFormItemProps } from "../interface/layout.formItem"
+import { useAttrsInject } from "../hooks/useAttrs"
+const preCls = 'carefrees-form-item';
+defineOptions({
+  name: 'LayoutFormItem',
+  inheritAttrs: false, // 可选，防止属性自动应用到根元素
+});
+const attrs = useAttrsInject();
+const props = withDefaults(defineProps<LayoutFormItemProps>(), {})
+
+const solts = defineSlots<{
+  default: any,
+  label: any,
+  helpText: any,
+  extra: any,
+}>()
+
+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(() => clx(preCls, props.class, toValue(attrs.value.formItemClass), { 'dx-invalid': !!toValue(props.validateResult)?.isInvalid }))
+const containerCls = computed(() => clx(`${preCls}-container`, { [`${labelMode.value}`]: !!labelMode.value }));
+const labelCls = computed(() => clx(`${preCls}-label`, { required: !!props.required, 'show-colon': showColon && (labelMode.value === 'left' || labelMode.value === 'between'), },));
+const labelWarpCls = computed(() => clx(`${preCls}-label-warp`, toValue(props.labelClass), toValue(attrs.value.formItemLabelClass)));
+const inputCls = computed(() => clx(`${preCls}-body-input`));
+const errorCls = computed(() => clx(`${preCls}-body-error`, { [errorLayout.value]: !!errorLayout.value }));
+const _isLabel = computed(() => (props.label || solts.label) && labelMode.value !== 'hide');
+
+const style = computed(() => {
+  const css: StyleValue = {};
+
+  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(() => {
+  return [toValue(attrs.value.formItemLabelStyle), props.labelStyle]
+})
+
+const isHelpText = computed(() => {
+  return !!props.helpText || solts.helpText;
+})
+
+const isExtra = computed(() => {
+  return !!props.extra || solts.extra;
+})
+
+</script>

package/src/layout/layout.vue

@@ -0,0 +1,97 @@
+<template>
+  <div :style='props.style' :class='cls'>
+    <template v-if="isExtra || isTitle">
+      <div :style='headerStyle' :class='headerCls'>
+        <div :class='headerTitleCls'>
+          <template v-if='props.title'>
+            {{ props.title }}
+          </template>
+          <template v-else>
+            <slot name='title' />
+          </template>
+        </div>
+        <div :class='headerExtraCls'>
+          <template v-if='props.extra'>
+            {{ props.extra }}
+          </template>
+          <template v-else>
+            <slot name='extra' />
+          </template>
+        </div>
+      </div>
+    </template>
+    <div :style='bodyStyle' :class='bodyCls'>
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import clx from 'classnames';
+import { defineProps, withDefaults, toValue, computed, StyleValue } from "vue"
+import type { FormLayoutProps } from "../interface/layout"
+import { useAttrsInject, useAttrsProvide } from "../hooks/useAttrs"
+const preCls = 'carefrees-form-layout';
+
+const attrs = useAttrsInject();
+const props = withDefaults(defineProps<FormLayoutProps>(), {})
+
+defineOptions({
+  name: 'Layout',
+  inheritAttrs: false, // 可选，防止属性自动应用到根元素
+});
+
+const solts = defineSlots<{
+  default: any,
+  title: any,
+  extra: any,
+}>()
+
+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(() => clx(preCls, props.class, { 'all-colspan': props.isAllColSpan, bordered: props.bordered, }));
+const bodyCls = computed(() => clx(`${preCls}-body`, props.bodyClass));
+const headerCls = computed(() => clx(`${preCls}-header`, props.headerClass));
+const headerTitleCls = computed(() => clx(`${preCls}-header-title`));
+const headerExtraCls = computed(() => clx(`${preCls}-header-extra`));
+
+const bodyStyle = computed(() => {
+  const css: StyleValue = {};
+  if (typeof props.gap === 'string') {
+    css.gap = props.gap;
+  }
+  if (typeof props.gap === 'number') {
+    css.gap = `${props.gap}px`;
+  }
+  if (colCount.value) {
+    css.gridTemplateColumns = `repeat(${colCount.value}, auto)`;
+  }
+  return [css, props.bodyStyle];
+});
+
+const isTitle = computed(() => {
+  return !!props.title || solts.title;
+})
+
+const isExtra = computed(() => {
+  return !!props.extra || solts.extra;
+})
+</script>

package/src/utils/index.ts

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

package/src/utils/withInstall.ts

@@ -0,0 +1,28 @@
+
+import type { Plugin, App } from 'vue';
+export type SFCWithInstall<T> = T & Plugin;
+export const withInstall = <T, E extends Record<string, any> = Record<string, any>, K extends Record<string, any> = Record<string, any>>(
+  main: T,
+  extra?: E,// 挂 hooks 之类的
+  childComponents?: K,// 挂子组件
+) => {
+  ; (main as SFCWithInstall<T>).install = (app: App): void => {
+    for (const comp of [main, ...Object.values(childComponents ?? {})]) {
+      // 当组件是 script setup 的形式时，会自动以为文件名注册，会挂载到组件的__name 属性上
+      // 所以要加上这个条件
+      const name = (comp as any).name || (comp as any).__name;
+      app.component(name, comp)
+    }
+  }
+  if (childComponents) {
+    for (const [key, comp] of Object.entries(childComponents)) {
+      ; (main as any)[key] = comp
+    }
+  }
+  if (extra) {
+    for (const [key, comp] of Object.entries(extra)) {
+      ; (main as any)[key] = comp
+    }
+  }
+  return main as SFCWithInstall<T> & E & K
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />