@puresnake/snake-ui 0.0.0-stage → 0.0.1

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

@@ -0,0 +1,331 @@
+<template>
+    <view
+        class="snake-form-item"
+        :class="[
+            {
+                'snake-form-item--border-bottom': elBorderBottom,
+                'snake-form-item--border-bottom-error': validateState === 'error' && showError('border-bottom'),
+                'snake-form-item--border-error': validateState === 'error' && showError('border')
+            },
+            customClass
+        ]"
+        :style="customStyle"
+    >
+        <view class="snake-form-item__body" :style="{ flexDirection: elLabelPosition === 'left' ? 'row' : 'column' }">
+            <view
+                class="snake-form-item__left"
+                :style="{
+                    width: labelWidth,
+                    flex: `0 0 ${labelWidth}`,
+                    marginBottom: elLabelPosition === 'left' ? 0 : '10rpx'
+                }"
+            >
+                <view
+                    v-if="required || leftIcon || label || $slots.label || $slots.leftIcon"
+                    class="snake-form-item__left-content"
+                >
+                    <text v-if="required" class="snake-form-item__required">*</text>
+                    <view v-if="leftIcon || $slots.leftIcon" class="snake-form-item__left-icon">
+                        <slot name="leftIcon">
+                            <snake-icon
+                                :name="leftIcon"
+                                :size="currentIconSize"
+                                :custom-prefix="leftIconPrefix"
+                                :custom-style="leftIconStyle"
+                            />
+                        </slot>
+                    </view>
+                    <view
+                        class="snake-form-item__label"
+                        :style="[
+                            elLabelStyle,
+                            { fontSize: actualFontSize },
+                            {
+                                justifyContent:
+                                    elLabelAlign === 'left'
+                                        ? 'flex-start'
+                                        : elLabelAlign === 'center'
+                                          ? 'center'
+                                          : 'flex-end'
+                            }
+                        ]"
+                    >
+                        <slot name="label">{{ label }}</slot>
+                    </view>
+                </view>
+            </view>
+            <view class="snake-form-item__right">
+                <view class="snake-form-item__content">
+                    <view class="snake-form-item__slot"><slot /></view>
+                    <view v-if="$slots.right || $slots.rightIcon || rightIcon" class="snake-form-item__right-icon">
+                        <slot name="rightIcon">
+                            <snake-icon
+                                v-if="rightIcon"
+                                :name="rightIcon"
+                                :size="currentIconSize"
+                                :custom-prefix="rightIconPrefix"
+                                :custom-style="rightIconStyle"
+                            />
+                        </slot>
+                        <slot name="right" />
+                    </view>
+                </view>
+            </view>
+        </view>
+        <view
+            v-if="validateState === 'error' && showError('message')"
+            class="snake-form-item__message"
+            :style="{
+                paddingLeft: elLabelPosition === 'left' && label ? addUnit(elLabelWidth, 'rpx') : '0',
+                fontSize: addUnit(currentSizeConfig.messageSize, 'rpx'),
+                lineHeight: addUnit(currentSizeConfig.messageSize, 'rpx')
+            }"
+        >
+            {{ validateMessage }}
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component FormItem
+ * @description 表单字段容器，负责布局、尺寸和校验状态。
+ * @see /components/form
+ */
+
+import { computed, inject, nextTick, onBeforeUnmount, onMounted, provide, ref, useSlots } from 'vue';
+import { addUnit } from '../../libs/function/unit';
+import { cloneFormValue, getPathValue, setPathValue, type FormRule, type FormTrigger } from '../../libs/form';
+import Schema from '../../libs/form/async-validator.min';
+import { formKey } from '../snake-form/types';
+import { formItemKey } from './types';
+import Icon from '../snake-icon/snake-icon.vue';
+import type { FormItemProps } from './types';
+
+Schema.warning = () => {};
+
+defineOptions({ name: 'FormItem', options: { virtualHost: true, styleIsolation: 'shared' } });
+const props = withDefaults(defineProps<FormItemProps>(), {
+    customStyle: '',
+    customClass: '',
+    label: '',
+    prop: '',
+    borderBottom: '',
+    labelPosition: '',
+    labelWidth: '',
+    labelStyle: () => ({}),
+    labelAlign: '',
+    rightIcon: '',
+    leftIcon: '',
+    leftIconPrefix: 'sicon',
+    rightIconPrefix: 'sicon',
+    leftIconStyle: () => ({}),
+    rightIconStyle: () => ({}),
+    required: false,
+    size: ''
+});
+
+const slots = useSlots();
+const form = inject(formKey, null);
+
+const initialValue = ref<unknown>('');
+const validateState = ref<'success' | 'error' | 'validating' | ''>('');
+const validateMessage = ref('');
+let validationVersion = 0;
+
+const sizeConfig = {
+    small: { fontSize: 24, iconSize: 28, messageSize: 20 },
+    default: { fontSize: 28, iconSize: 32, messageSize: 24 },
+    large: { fontSize: 32, iconSize: 36, messageSize: 28 }
+} as const;
+
+const actualSize = computed(() => {
+    if (props.size !== '') return String(props.size);
+    return String(form?.size.value || 'default');
+});
+const presetSize = computed(() =>
+    actualSize.value in sizeConfig ? (actualSize.value as keyof typeof sizeConfig) : 'default'
+);
+const currentSizeConfig = computed(() => sizeConfig[presetSize.value]);
+const actualFontSize = computed(() =>
+    addUnit(actualSize.value in sizeConfig ? currentSizeConfig.value.fontSize : actualSize.value, 'rpx')
+);
+const currentIconSize = computed(() => currentSizeConfig.value.iconSize);
+const errorType = computed(() => form?.errorType.value || ['message']);
+const showError = (type: string) => !errorType.value.includes('none') && errorType.value.includes(type);
+// Controls only need error state when the form explicitly requests an input border.
+const errorVisible = computed(() => validateState.value === 'error' && showError('border'));
+
+const elLabelWidth = computed(() => {
+    if (props.labelWidth !== '' && props.labelWidth !== 0) return props.labelWidth;
+    return form?.labelWidth.value || 90;
+});
+const elLabelStyle = computed(() =>
+    Object.keys(props.labelStyle).length ? props.labelStyle : form?.labelStyle.value || {}
+);
+const elLabelPosition = computed(() => props.labelPosition || form?.labelPosition.value || 'left');
+const elLabelAlign = computed(() => props.labelAlign || form?.labelAlign.value || 'left');
+const elBorderBottom = computed(() =>
+    props.borderBottom !== '' ? props.borderBottom : (form?.borderBottom.value ?? false)
+);
+const labelWidth = computed(() =>
+    elLabelPosition.value === 'left'
+        ? (props.label === 'true' || props.label === '') && !slots.label
+            ? 'auto'
+            : addUnit(elLabelWidth.value, 'rpx')
+        : '100%'
+);
+
+function getRules(): FormRule[] {
+    const allRules = form?.rules.value || {};
+    const dynamicPath = props.prop
+        .replace(/\[(\d+)\]/g, '.$1')
+        .replace(/(?:^|\.)(\d+)(?=\.|$)/g, '.defaultField.fields');
+    const fieldRules = allRules[props.prop] || getPathValue(allRules, dynamicPath);
+    return ([] as FormRule[]).concat((fieldRules || []) as FormRule | FormRule[]);
+}
+
+function getFilteredRules(trigger = ''): FormRule[] {
+    const rules = getRules();
+    if (!trigger) return rules;
+    return rules.filter(rule => rule.trigger && ([] as string[]).concat(rule.trigger).includes(trigger));
+}
+
+function validation(trigger = '', callback: (message: string) => void = () => {}) {
+    const rules = getFilteredRules(trigger);
+    if (!rules.length) {
+        callback('');
+        return;
+    }
+    const version = ++validationVersion;
+    validateState.value = 'validating';
+    const value = getPathValue(form?.model.value, props.prop);
+    const validator = new Schema({ [props.prop]: rules });
+    void validator.validate({ [props.prop]: value }, { firstFields: true }, errors => {
+        if (version !== validationVersion) {
+            callback(validateMessage.value);
+            return;
+        }
+        validateState.value = errors ? 'error' : 'success';
+        validateMessage.value = errors?.[0]?.message || '';
+        callback(validateMessage.value);
+    });
+}
+
+function onFormBlur() {
+    validation('blur');
+}
+function onFormChange() {
+    validation('change');
+}
+function resetField() {
+    validationVersion += 1;
+    const model = form?.model.value;
+    if (model && props.prop) {
+        setPathValue(model, props.prop, cloneFormValue(initialValue.value));
+    }
+    validateState.value = '';
+    validateMessage.value = '';
+}
+
+const exposedField = { validation, resetField, prop: props.prop };
+onMounted(() => {
+    nextTick(() => {
+        if (!props.prop) return;
+        form?.register(exposedField as any);
+        initialValue.value = cloneFormValue(getPathValue(form?.model.value, props.prop));
+    });
+});
+onBeforeUnmount(() => {
+    validationVersion += 1;
+    if (!props.prop) return;
+    form?.unregister(exposedField as any);
+});
+
+function notify(trigger: FormTrigger): Promise<void> {
+    return nextTick().then(
+        () =>
+            new Promise(resolve => {
+                validation(trigger, () => resolve());
+            })
+    );
+}
+provide(formItemKey, {
+    error: validateMessage,
+    errorVisible,
+    size: computed(() => presetSize.value),
+    notify
+});
+defineExpose({ validation, resetField, onFormBlur, onFormChange });
+</script>
+
+<style scoped>
+.snake-form-item {
+    display: flex;
+    box-sizing: border-box;
+    flex-direction: column;
+    padding: 20rpx 0;
+    color: var(--snake-color-text, #303133);
+    font-size: 28rpx;
+}
+.snake-form-item--border-bottom {
+    border-bottom: 1px solid var(--snake-color-divider, #e4e7ed);
+}
+.snake-form-item--border-bottom-error {
+    border-color: var(--snake-color-error, #fa3534);
+}
+.snake-form-item--border-error :deep(.snake-input--surround),
+.snake-form-item--border-error :deep(.snake-textarea--surround) {
+    border-color: var(--snake-color-error, #fa3534) !important;
+}
+.snake-form-item__body,
+.snake-form-item__left,
+.snake-form-item__left-content,
+.snake-form-item__label,
+.snake-form-item__right,
+.snake-form-item__content,
+.snake-form-item__slot,
+.snake-form-item__right-icon {
+    display: flex;
+}
+.snake-form-item__left,
+.snake-form-item__left-content,
+.snake-form-item__label,
+.snake-form-item__content,
+.snake-form-item__slot,
+.snake-form-item__right-icon {
+    align-items: center;
+}
+.snake-form-item__left-content,
+.snake-form-item__label,
+.snake-form-item__right,
+.snake-form-item__content,
+.snake-form-item__slot {
+    flex: 1;
+}
+.snake-form-item__left-content {
+    position: relative;
+    padding-right: 10rpx;
+}
+.snake-form-item__required {
+    position: absolute;
+    left: -16rpx;
+    padding-top: 6rpx;
+    color: var(--snake-color-error, #fa3534);
+    vertical-align: middle;
+}
+.snake-form-item__left-icon {
+    display: flex;
+    align-items: center;
+    margin-right: 8rpx;
+}
+.snake-form-item__right-icon {
+    margin-left: 10rpx;
+    color: var(--snake-color-text-light, #c0c4cc);
+    font-size: 30rpx;
+}
+.snake-form-item__message {
+    margin-top: 12rpx;
+    color: var(--snake-color-error, #fa3534);
+}
+</style>

package/components/snake-form-item/types.ts

@@ -0,0 +1,70 @@
+import type { InjectionKey, Ref } from 'vue';
+import type { UnitValue } from '../../libs/function/unit';
+import type { StyleValue } from '../../types/global';
+import type { FormTrigger } from '../../libs/form';
+import type { FormLabelAlign, FormLabelPosition, FormSize } from '../snake-form/types';
+
+/** FormItem 组件的公开属性。 */
+export interface FormItemProps {
+    /** 标签文本。 */
+    label?: string;
+    /** 表单模型中的字段路径。 */
+    prop?: string;
+    /** 是否显示底边，空字符串表示继承 Form。 */
+    borderBottom?: string | boolean;
+    /** 标签位置。 */
+    labelPosition?: FormLabelPosition | '';
+    /** 标签宽度。 */
+    labelWidth?: UnitValue | '';
+    /** 标签自定义样式。 */
+    labelStyle?: Record<string, any>;
+    /** 标签对齐方式。 */
+    labelAlign?: FormLabelAlign | '';
+    /** 右侧图标。 */
+    rightIcon?: string;
+    /** 左侧图标。 */
+    leftIcon?: string;
+    /** 左侧图标字体前缀。 */
+    leftIconPrefix?: string;
+    /** 右侧图标字体前缀。 */
+    rightIconPrefix?: string;
+    /** 左侧图标样式。 */
+    leftIconStyle?: StyleValue;
+    /** 右侧图标样式。 */
+    rightIconStyle?: StyleValue;
+    /** 是否展示必填星号。 */
+    required?: boolean;
+    /** 预设尺寸或自定义字号。 */
+    size?: FormSize | string;
+    /** 根节点自定义类名。 */
+    customClass?: string;
+    /** 根节点自定义样式。 */
+    customStyle?: StyleValue;
+}
+
+/** FormItem 通过模板 ref 暴露的接口。 */
+export interface FormItemExpose {
+    /** 校验当前字段。 */
+    validation(trigger?: string, callback?: (message: string) => void): void;
+    /** 将字段恢复为初始值。 */
+    resetField(): void;
+    /** 触发 blur 规则校验。 */
+    onFormBlur(): void;
+    /** 触发 change 规则校验。 */
+    onFormChange(): void;
+}
+
+/** FormItem 向叶子控件（input / textarea / switch / slider / radio-group / checkbox-group）注入的配对上下文。 */
+export interface FormItemContext {
+    /** 当前校验错误文案。 */
+    error: Ref<string>;
+    /** 是否展示错误。 */
+    errorVisible: Ref<boolean>;
+    /** 控件尺寸。 */
+    size: Ref<FormSize>;
+    /** 触发指定方式的校验。 */
+    notify(trigger: FormTrigger): Promise<void>;
+}
+
+/** FormItem ↔ 叶子控件配对注入键。 */
+export const formItemKey: InjectionKey<FormItemContext> = Symbol('snake-form-item');