tiddy 0.0.1

package/src/components/form/form-item.vue

@@ -0,0 +1,417 @@
+<template>
+  <div
+    ref="formItemRef"
+    :class="formItemClasses"
+    :role="isGroup ? 'group' : undefined"
+    :aria-labelledby="isGroup ? labelId : undefined"
+  >
+    <FormLabelWrap
+      :is-auto-width="labelStyle.width === 'auto'"
+      :update-all="formContext?.labelWidth === 'auto'"
+    >
+      <component
+        :is="labelFor ? 'label' : 'div'"
+        v-if="hasLabel"
+        :id="labelId"
+        :for="labelFor"
+        :class="ns.e('label')"
+        :style="labelStyle"
+      >
+        <slot name="label" :label="currentLabel">
+          {{ currentLabel }}
+        </slot>
+      </component>
+    </FormLabelWrap>
+
+    <div :class="ns.e('content')" :style="contentStyle">
+      <slot />
+      <TransitionGroup :name="`${ns.namespace.value}-zoom-in-top`">
+        <slot v-if="shouldShowError" name="error" :error="validateMessage">
+          <div :class="validateClasses">
+            {{ validateMessage }}
+          </div>
+        </slot>
+      </TransitionGroup>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  computed,
+  inject,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  provide,
+  reactive,
+  ref,
+  toRefs,
+  useAttrs,
+  useSlots,
+  watch,
+  type CSSProperties,
+} from 'vue';
+import AsyncValidator, { type RuleItem, type Rules } from 'async-validator';
+import {
+  formContextKey,
+  formItemContextKey,
+  useFormSize,
+  useId,
+  useNamespace,
+  formItemProps,
+  type FormItemContext,
+  type FormItemProps as ElFormItemProps,
+  type FormItemRule,
+  type FormItemValidateState,
+  type FormValidateFailure,
+} from 'element-plus';
+import { refDebounced as debounceRef } from '@vueuse/core';
+import { addUnit } from '../utils';
+import { clone, ensureArray, getDeepValue, isBoolean, isFunction, isString, setDeepValue } from 'yatter';
+import FormLabelWrap from './form-label-wrap';
+
+export interface FormItemProps extends Partial<ElFormItemProps> {
+  messageLabel?: string;
+  hideRequiredAsterisk?: boolean;
+}
+
+const props = defineProps({
+  ...formItemProps,
+  messageLabel: String,
+  hideRequiredAsterisk: {
+    type: Boolean,
+    default: undefined,
+  },
+});
+const attrs = useAttrs();
+const slots = useSlots();
+
+const formContext = inject(formContextKey, undefined);
+const parentFormItemContext = inject(formItemContextKey, undefined);
+
+const _size = useFormSize(undefined, { formItem: false });
+const ns = useNamespace((attrs['name-space'] as string) || 'form-item');
+
+const labelId = useId().value;
+const inputIds = ref<string[]>([]);
+
+const validateState = ref<FormItemValidateState>('');
+const validateStateDebounced = debounceRef(validateState, 100);
+const validateMessage = ref('');
+const formItemRef = ref<HTMLDivElement>();
+// special inline value.
+let initialValue: any = undefined;
+let isResettingField = false;
+
+const labelPosition = computed(() => props.labelPosition || formContext?.labelPosition);
+
+const labelStyle = computed<CSSProperties>(() => {
+  if (labelPosition.value === 'top') {
+    return {};
+  }
+
+  const labelWidth = addUnit(props.labelWidth || formContext?.labelWidth || '');
+  if (labelWidth) return { width: labelWidth };
+  return {};
+});
+
+const contentStyle = computed<CSSProperties>(() => {
+  if (labelPosition.value === 'top' || formContext?.inline) {
+    return {};
+  }
+  if (!props.label && !props.labelWidth && isNested) {
+    return {};
+  }
+  const labelWidth = addUnit(props.labelWidth || formContext?.labelWidth || '');
+  if (!props.label && !slots.label) {
+    return { marginLeft: labelWidth };
+  }
+  return {};
+});
+
+const formItemClasses = computed(() => [
+  ns.b(),
+  ns.m(_size.value),
+  ns.is('error', validateState.value === 'error'),
+  ns.is('validating', validateState.value === 'validating'),
+  ns.is('success', validateState.value === 'success'),
+  ns.is('required', isRequired.value || props.required),
+  ns.is('no-asterisk', props.hideRequiredAsterisk ?? formContext?.hideRequiredAsterisk),
+  formContext?.requireAsteriskPosition === 'right' ? 'asterisk-right' : 'asterisk-left',
+  {
+    [ns.m('feedback')]: formContext?.statusIcon,
+    [ns.m(`label-${labelPosition.value}`)]: labelPosition.value,
+  },
+]);
+
+const _inlineMessage = computed(() =>
+  isBoolean(props.inlineMessage) ? props.inlineMessage : formContext?.inlineMessage || false,
+);
+
+const validateClasses = computed(() => [ns.e('error'), { [ns.em('error', 'inline')]: _inlineMessage.value }]);
+
+const propString = computed(() => {
+  if (!props.prop) return '';
+  return isString(props.prop) ? props.prop : props.prop.join('.');
+});
+
+const hasLabel = computed<boolean>(() => {
+  return !!(props.label || slots.label);
+});
+
+const labelFor = computed<string | undefined>(() => {
+  return props.for || (inputIds.value.length === 1 ? inputIds.value[0] : undefined);
+});
+
+const isGroup = computed<boolean>(() => {
+  return !labelFor.value && hasLabel.value;
+});
+
+const isNested = !!parentFormItemContext;
+
+const fieldValue = computed(() => {
+  const model = formContext?.model;
+  if (!model || !props.prop) {
+    return;
+  }
+  return getDeepValue(model, propString.value);
+});
+
+const normalizedRules = computed(() => {
+  const { required } = props;
+
+  const rules: FormItemRule[] = [];
+
+  if (props.rules) {
+    rules.push(...ensureArray(props.rules));
+  }
+
+  const formRules = formContext?.rules;
+  if (formRules && props.prop) {
+    const _rules = getDeepValue<OneOrMore<FormItemRule>>(formRules, propString.value);
+    if (_rules) {
+      rules.push(...ensureArray(_rules));
+    }
+  }
+  if (required !== undefined) {
+    const requiredRules = rules
+      .map((rule, i) => [rule, i] as const)
+      .filter(([rule]) => Object.keys(rule).includes('required'));
+
+    if (requiredRules.length > 0) {
+      for (const [rule, i] of requiredRules) {
+        if (rule.required === required) continue;
+        rules[i] = { ...rule, required };
+      }
+    } else {
+      rules.push({ required });
+    }
+  }
+  return rules;
+});
+
+const validateEnabled = computed(() => normalizedRules.value.length > 0);
+
+const getFilteredRule = (trigger: string) => {
+  const rules = normalizedRules.value;
+  return (
+    rules
+      .filter(rule => {
+        if (!rule.trigger || !trigger) return true;
+        if (Array.isArray(rule.trigger)) {
+          return rule.trigger.includes(trigger);
+        }
+        return rule.trigger === trigger;
+      })
+      // exclude trigger
+
+      .map(({ trigger, ...rule }): RuleItem => rule)
+  );
+};
+
+const isRequired = computed(() => normalizedRules.value.some(rule => rule.required));
+
+const shouldShowError = computed(
+  () => validateStateDebounced.value === 'error' && props.showMessage && (formContext?.showMessage ?? true),
+);
+
+const currentLabel = computed(() => `${props.label || ''}${formContext?.labelSuffix || ''}`);
+
+const setValidationState = (state: FormItemValidateState) => {
+  validateState.value = state;
+};
+
+const onValidationFailed = (error: FormValidateFailure) => {
+  const { errors, fields } = error;
+  if (!errors || !fields) {
+    console.error(error);
+  }
+  const messageLabel = props.messageLabel || currentLabel.value || propString.value;
+  setValidationState('error');
+  const message = errors ? (errors?.[0]?.message ?? `${props.prop} is required`) : '';
+  validateMessage.value = message.replace(propString.value, messageLabel);
+  formContext?.emit('validate', props.prop!, false, validateMessage.value);
+};
+
+const onValidationSucceeded = () => {
+  setValidationState('success');
+  formContext?.emit('validate', props.prop!, true, '');
+};
+
+const doValidate = async (rules: RuleItem[]): Promise<true> => {
+  const descriptor: Rules = {
+    [propString.value]: rules,
+  };
+  const model = { [propString.value]: fieldValue.value };
+
+  const validator = new AsyncValidator(descriptor);
+  return validator
+    .validate(model, { firstFields: true })
+    .then(() => {
+      onValidationSucceeded();
+      return true as const;
+    })
+    .catch((err: FormValidateFailure) => {
+      onValidationFailed(err as FormValidateFailure);
+      return Promise.reject(err);
+    });
+};
+
+const validate: FormItemContext['validate'] = async (trigger, callback) => {
+  // skip validation if its resetting
+  if (isResettingField || !props.prop) {
+    return false;
+  }
+
+  const hasCallback = isFunction(callback);
+  if (!validateEnabled.value) {
+    callback?.(false);
+    return false;
+  }
+
+  const rules = getFilteredRule(trigger);
+  if (rules.length === 0) {
+    callback?.(true);
+    return true;
+  }
+
+  setValidationState('validating');
+
+  return doValidate(rules)
+    .then(() => {
+      callback?.(true);
+      return true as const;
+    })
+    .catch((err: FormValidateFailure) => {
+      const { fields } = err;
+      callback?.(false, fields);
+      return hasCallback ? false : Promise.reject(fields);
+    });
+};
+
+const clearValidate: FormItemContext['clearValidate'] = () => {
+  setValidationState('');
+  validateMessage.value = '';
+  isResettingField = false;
+};
+
+const resetField: FormItemContext['resetField'] = async () => {
+  const model = formContext?.model;
+  if (!model || !props.prop) return;
+
+  // const computedValue = getDeepValue<any>(model, propString.value);
+
+  // prevent validation from being triggered
+  isResettingField = true;
+
+  // computedValue.value = clone(initialValue);
+  setDeepValue(model, propString.value, clone(initialValue));
+
+  await nextTick();
+  clearValidate();
+
+  isResettingField = false;
+};
+
+const addInputId: FormItemContext['addInputId'] = (id: string) => {
+  if (!inputIds.value.includes(id)) {
+    inputIds.value.push(id);
+  }
+};
+
+const removeInputId: FormItemContext['removeInputId'] = (id: string) => {
+  inputIds.value = inputIds.value.filter(listId => listId !== id);
+};
+
+watch(
+  () => props.error,
+  val => {
+    validateMessage.value = val || '';
+    setValidationState(val ? 'error' : '');
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.validateStatus,
+  val => setValidationState(val || ''),
+);
+
+const context: FormItemContext = reactive({
+  ...toRefs(props),
+  $el: formItemRef,
+  size: _size,
+  validateState,
+  labelId,
+  inputIds,
+  isGroup,
+  hasLabel,
+  fieldValue,
+  addInputId,
+  removeInputId,
+  resetField,
+  clearValidate,
+  validate,
+});
+
+provide(formItemContextKey, context);
+
+onMounted(() => {
+  if (props.prop) {
+    formContext?.addField(context);
+    initialValue = clone(fieldValue.value);
+  }
+});
+
+onBeforeUnmount(() => {
+  formContext?.removeField(context);
+});
+
+defineExpose({
+  /**
+   * @description Form item size.
+   */
+  size: _size,
+  /**
+   * @description Validation message.
+   */
+  validateMessage,
+  /**
+   * @description Validation state.
+   */
+  validateState,
+  /**
+   * @description Validate form item.
+   */
+  validate,
+  /**
+   * @description Remove validation status of the field.
+   */
+  clearValidate,
+  /**
+   * @description Reset current field and remove validation result.
+   */
+  resetField,
+});
+</script>

package/src/components/form/form-label-wrap.tsx

@@ -0,0 +1,105 @@
+import { formContextKey, formItemContextKey, useNamespace } from 'element-plus';
+import {
+  Fragment,
+  computed,
+  defineComponent,
+  inject,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  onUpdated,
+  ref,
+  watch,
+} from 'vue';
+import { useResizeObserver } from '@vueuse/core';
+import type { CSSProperties } from 'vue';
+
+const COMPONENT_NAME = 'ElLabelWrap';
+export default defineComponent({
+  name: COMPONENT_NAME,
+  props: {
+    isAutoWidth: Boolean,
+    updateAll: Boolean,
+  },
+
+  setup(props, { slots }) {
+    const formContext = inject(formContextKey, undefined);
+    const formItemContext = inject(formItemContextKey);
+    if (!formItemContext) {
+      const error = new Error(`[${COMPONENT_NAME}] usage: <el-form-item><label-wrap /></el-form-item>`);
+      error.name = 'ElementPlusError';
+      throw error;
+    }
+    const ns = useNamespace('form');
+
+    const el = ref<HTMLElement>();
+    const computedWidth = ref(0);
+
+    const getLabelWidth = () => {
+      if (el.value?.firstElementChild) {
+        const width = window.getComputedStyle(el.value.firstElementChild).width;
+        return Math.ceil(Number.parseFloat(width));
+      }
+      return 0;
+    };
+
+    const updateLabelWidth = (action: 'update' | 'remove' = 'update') => {
+      nextTick(() => {
+        if (slots.default && props.isAutoWidth) {
+          if (action === 'update') {
+            computedWidth.value = getLabelWidth();
+          } else if (action === 'remove') {
+            formContext?.deregisterLabelWidth(computedWidth.value);
+          }
+        }
+      });
+    };
+    const updateLabelWidthFn = () => updateLabelWidth('update');
+
+    onMounted(() => {
+      updateLabelWidthFn();
+    });
+    onBeforeUnmount(() => {
+      updateLabelWidth('remove');
+    });
+    onUpdated(() => updateLabelWidthFn());
+
+    watch(computedWidth, (val, oldVal) => {
+      if (props.updateAll) {
+        formContext?.registerLabelWidth(val, oldVal);
+      }
+    });
+
+    useResizeObserver(
+      computed(() => (el.value?.firstElementChild ?? null) as HTMLElement | null),
+      updateLabelWidthFn,
+    );
+
+    return () => {
+      if (!slots) return null;
+
+      const { isAutoWidth } = props;
+      if (isAutoWidth) {
+        const autoLabelWidth = formContext?.autoLabelWidth;
+        const hasLabel = formItemContext?.hasLabel;
+        const style: CSSProperties = {};
+        if (hasLabel && autoLabelWidth && autoLabelWidth !== 'auto') {
+          const marginWidth = Math.max(0, Number.parseInt(autoLabelWidth, 10) - computedWidth.value);
+          const labelPosition = formItemContext.labelPosition || formContext.labelPosition;
+
+          const marginPosition = labelPosition === 'left' ? 'marginRight' : 'marginLeft';
+
+          if (marginWidth) {
+            style[marginPosition] = `${marginWidth}px`;
+          }
+        }
+        return (
+          <div ref={el} class={[ns.be('item', 'label-wrap')]} style={style}>
+            {slots.default?.()}
+          </div>
+        );
+      }
+      return <Fragment ref={el}>{slots.default?.()}</Fragment>;
+    };
+  },
+});

package/src/components/form/form.vue

@@ -0,0 +1,99 @@
+<template>
+  <ElForm ref="form" v-bind="subProps" @submit.prevent="submit">
+    <slot name="prefix"></slot>
+    <slot>
+      <FormField v-for="field in fields" :key="getKey(field)" v-bind="field" />
+    </slot>
+    <slot name="suffix"></slot>
+  </ElForm>
+</template>
+
+<script setup lang="ts">
+import {
+  ElForm,
+  type FormProps as ElFormProps,
+  type FormEmits,
+  type FormInstance,
+  type FormItemProps,
+  formProps,
+} from 'element-plus';
+import type { FieldProps } from './interface';
+import { computed, provide, useAttrs, useSlots, useTemplateRef } from 'vue';
+import { cut } from 'yatter';
+import { getKey, getSlotsFactory } from '../utils';
+import { formCtxKey } from './util';
+import FormField from './form-field.vue';
+
+export interface FormProps extends Partial<ElFormProps> {
+  fields?: FieldProps[];
+  item?: FormItemProps;
+}
+
+defineOptions({
+  name: 'SeForm',
+});
+
+type SeFormEmit = FormEmits & {
+  submit: [data: any];
+};
+
+const props = defineProps({
+  ...formProps,
+  fields: {
+    type: Array<FieldProps>,
+    default: () => [],
+  },
+  item: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const emit = defineEmits<SeFormEmit>();
+const slots = useSlots();
+
+const subProps = computed(() => cut(props, ['fields']));
+
+const formRef = useTemplateRef<FormInstance>('form');
+
+function reValidateErrorFields() {
+  formRef.value?.fields.forEach(field => {
+    if (field.validateStatus === 'error') {
+      field.validate('');
+    }
+  });
+}
+
+const expose: any = {
+  reValidateErrorFields,
+  model: computed(() => props.model),
+};
+
+defineExpose(
+  new Proxy(expose, {
+    get(target, key) {
+      // @ts-expect-error 忽略表单类型
+      return target[key] || formRef.value?.[key];
+    },
+    has(target, key) {
+      return Object.hasOwn(target, key) || Reflect.has(formRef.value!, key);
+    },
+  }),
+);
+
+async function submit() {
+  try {
+    await formRef.value?.validate();
+    emit('submit', props.model);
+  } catch {
+    // nothing to do
+  }
+}
+
+provide(formCtxKey, {
+  model: props.model,
+  itemOption: props.item as FormItemProps,
+  getParentSlots: getSlotsFactory(slots),
+});
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/form/index.ts

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

package/src/components/form/interface.d.ts

@@ -0,0 +1,61 @@
+import type { FormItemProps, FormItemRule } from 'element-plus';
+import type { AllowedComponentProps, Component, ComputedRef, CSSProperties, Raw } from 'vue';
+
+type FormItemLabelProps = Partial<Pick<FormItemProps, 'label' | 'labelPosition' | 'labelWidth'>>;
+type IndexPropFunc<P, T> = P extends 'object' ? T : T | ((index: number) => T);
+
+export interface CommonFieldProps<T = 'object'> extends AllowedComponentProps {
+  prop?: OrFunction<string>;
+  fullProp?: string;
+  slots?: OneOrMore<string>;
+  rules?: OneOrMore<FormItemRule>;
+  hide?: boolean | ComputedRef;
+  hideLabel?: IndexProp<T, boolean>;
+  label?: IndexProp<T, string>;
+  labelWidth?: IndexProp<T, string | number>;
+  labelPosition?: IndexProp<T, 'left' | 'right' | 'auto'>;
+}
+
+export interface WidgetFieldProps<T = 'object'> extends CommonFieldProps<T> {
+  type?: 'widget';
+  component: string | Component | Raw<Component>;
+  item?: FormItemProps;
+  widget?: Record<string, any>;
+  on?: Record<string, AnyFunction>;
+  prependSlots?: OneOrMore<string>;
+  appendSlots?: OneOrMore<string>;
+  default?: any;
+}
+
+export interface CommonArrayFieldProps {
+  type: 'array';
+  rawValue?: () => any;
+  emptyAction?: string;
+  rowAction?: string;
+  lineStyle?: CSSProperties;
+  mandatory?: boolean;
+}
+
+export interface WidgetArrayFieldProps extends CommonArrayFieldProps, Partial<WidgetFieldProps<'array'>> {}
+export interface ObjectArrayFieldProps extends CommonArrayFieldProps, ObjectFieldProps<'array'> {}
+
+export type ArrayFieldProps = WidgetArrayFieldProps | ObjectArrayFieldProps;
+
+export interface ObjectFieldProps<P = 'object'> extends CommonFieldProps<P> {
+  type?: 'object';
+  fields: FieldProps[];
+}
+
+export interface LayoutFieldProps extends CommonFieldProps {
+  type: 'layout';
+  fields?: FieldProps[];
+  slots?: SlotDef[];
+}
+
+export type FieldProps = ArrayFieldProps | ObjectFieldProps | LayoutFieldProps | WidgetFieldProps;
+
+export interface FormContext {
+  model: any;
+  itemOption?: FormItemProps;
+  getParentSlots: GetSlotsFunction;
+}