sard-uniapp 1.22.2 → 1.23.0

package/components/form-item/useFormItem.js

@@ -0,0 +1,206 @@
+import { computed, nextTick, onBeforeUnmount, onMounted, provide, reactive, ref, toRef, watch, } from 'vue';
+import { formItemContextSymbol, useFormContext, } from '../form/common';
+import { chainGet, chainSet, deepClone, getBoundingClientRect, getScrollIntoViewValue, getViewportScrollInfo, getWindowInfo, noop, toArray, uniqid, } from '../../utils';
+export function useFormItem(props) {
+    // main
+    const formContext = useFormContext();
+    if (!formContext) {
+        throw new Error('FormItem must be included in Form.');
+    }
+    // 用于阻止验证
+    let isResetting = false;
+    const fieldValue = computed({
+        get() {
+            const model = formContext.model;
+            if (!model || !props.name) {
+                return;
+            }
+            return chainGet(model, toArray(props.name));
+        },
+        set(value) {
+            const model = formContext.model;
+            if (!model || !props.name) {
+                return;
+            }
+            chainSet(model, toArray(props.name), value);
+        },
+    });
+    let initialValue;
+    const validateMessage = ref('');
+    const validateState = ref('');
+    watch(() => props.error, () => {
+        validateMessage.value = props.error || '';
+        validateState.value = props.error ? 'error' : '';
+    });
+    watch(() => props.rules, () => {
+        if (validateMessage.value) {
+            validate().catch(noop);
+        }
+    }, {
+        deep: true,
+        flush: 'post',
+    });
+    const shouldShowError = computed(() => {
+        return (!!props.showError && !!formContext.showError && !!validateMessage.value);
+    });
+    const mergedValidateTrigger = computed(() => {
+        const trigger = props.validateTrigger ?? formContext.validateTrigger;
+        return trigger ? toArray(trigger) : undefined;
+    });
+    const mergedRules = computed(() => {
+        const rules = [];
+        if (props.rules) {
+            rules.push(...toArray(props.rules));
+        }
+        const formRules = formContext.rules;
+        if (formRules && props.name) {
+            const fRules = chainGet(formRules, toArray(props.name));
+            if (fRules) {
+                rules.push(...toArray(fRules));
+            }
+        }
+        const required = props.required;
+        if (required !== undefined) {
+            const requiredRules = rules
+                .map((rule, i) => [rule, i])
+                .filter(([rule]) => {
+                return Object.keys(rule).includes('required');
+            });
+            if (requiredRules.length > 0) {
+                for (const [rule, i] of requiredRules) {
+                    if (rule.required !== required) {
+                        rules[i] = { ...rule, required };
+                    }
+                }
+            }
+            else {
+                rules.push({ required });
+            }
+        }
+        const trigger = mergedValidateTrigger.value;
+        if (trigger && trigger.length > 0) {
+            for (let i = 0, l = rules.length; i < l; i++) {
+                const rule = rules[i];
+                if (!rule.trigger) {
+                    rules[i] = { ...rule, trigger: [...trigger] };
+                }
+            }
+        }
+        return rules;
+    });
+    const isRequired = computed(() => {
+        return mergedRules.value.some((rule) => rule.required);
+    });
+    const shouldShowStar = computed(() => {
+        return !formContext.hideStar && !props.hideStar && isRequired.value;
+    });
+    const validate = async (trigger) => {
+        if (isResetting || !props.name) {
+            return;
+        }
+        const validRules = formContext.validator.getValidTriggerRules(mergedRules.value, trigger);
+        if (validRules.length === 0) {
+            return;
+        }
+        validateState.value = 'validating';
+        try {
+            await formContext.validator.validate(mergedRules.value, {
+                validateFirst: true,
+                value: fieldValue.value,
+                name: props.name,
+                label: props.label,
+                trigger,
+            });
+            validateState.value = 'success';
+            validateMessage.value = '';
+        }
+        catch (messages) {
+            validateState.value = 'error';
+            validateMessage.value = messages[0];
+            const error = {
+                name: props.name,
+                value: fieldValue.value,
+                message: validateMessage.value,
+            };
+            throw error;
+        }
+    };
+    const clearValidate = () => {
+        validateState.value = '';
+        validateMessage.value = '';
+        isResetting = false;
+    };
+    const reset = async () => {
+        isResetting = true;
+        fieldValue.value = deepClone(initialValue);
+        await nextTick();
+        clearValidate();
+    };
+    const fieldId = uniqid();
+    const scrollToField = async () => {
+        const [scrollInfo, fieldRect, windowInfo] = await Promise.all([
+            getViewportScrollInfo(),
+            getBoundingClientRect(`.${fieldId}`),
+            getWindowInfo(),
+        ]);
+        const scrollTop = getScrollIntoViewValue(windowInfo.windowHeight, scrollInfo.scrollTop, fieldRect.height, fieldRect.top + scrollInfo.scrollTop, formContext.scrollIntoViewOptions);
+        uni.pageScrollTo({
+            scrollTop,
+            duration: formContext.scrollIntoViewOptions?.duration ??
+                formContext.scrollDuration,
+        });
+    };
+    const onBlur = () => {
+        validate('blur').catch(noop);
+    };
+    const onChange = () => {
+        validate('change').catch(noop);
+    };
+    const context = reactive({
+        name: toRef(() => props.name),
+        validateMessage,
+        validateState,
+        validate,
+        clearValidate,
+        reset,
+        scrollToField,
+        onBlur,
+        onChange,
+    });
+    onMounted(() => {
+        if (props.name) {
+            initialValue = deepClone(fieldValue.value);
+            formContext.addField(context);
+        }
+    });
+    onBeforeUnmount(() => {
+        formContext.removeField(context);
+    });
+    const direction = computed(() => props.direction || formContext.direction);
+    const labelAlign = computed(() => props.labelAlign || formContext.labelAlign);
+    const labelValign = computed(() => props.labelValign || formContext.labelValign);
+    const starPosition = computed(() => props.starPosition || formContext.starPosition);
+    const labelWidth = computed(() => props.labelWidth || formContext.labelWidth);
+    provide(formItemContextSymbol, context);
+    const expose = {
+        validate,
+        reset,
+        clearValidate,
+        scrollToField,
+        validateMessage,
+        validateState,
+    };
+    return {
+        expose,
+        fieldId,
+        validateState,
+        shouldShowStar,
+        validateMessage,
+        shouldShowError,
+        direction,
+        labelAlign,
+        labelValign,
+        starPosition,
+        labelWidth,
+    };
+}

package/components/form-item-plain/form-item-plain.d.ts

@@ -0,0 +1,20 @@
+import { type FormItemPlainProps, type FormItemPlainSlots } from '../form-plain/common';
+declare function __VLS_template(): Readonly<FormItemPlainSlots> & FormItemPlainSlots;
+declare const __VLS_component: import("vue").DefineComponent<FormItemPlainProps, {
+    validate: (trigger?: string | string[]) => Promise<void>;
+    reset: () => Promise<void>;
+    clearValidate: () => void;
+    scrollToField: () => void;
+    validateMessage: import("vue").Ref<string>;
+    validateState: import("vue").Ref<import("../form/common").ValidateState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormItemPlainProps> & Readonly<{}>, {
+    required: boolean;
+    showError: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,70 @@
+<template>
+  <view :class="rootClass" :style="rootStyle">
+    <slot></slot>
+    <slot
+      name="custom"
+      :field-id="fieldId"
+      :validate-state="validateState"
+      :should-show-star="shouldShowStar"
+      :validate-message="validateMessage"
+      :should-show-error="shouldShowError"
+      :direction="direction"
+      :label-align="labelAlign"
+      :label-valign="labelValign"
+      :star-position="starPosition"
+      :label-width="labelWidth"
+    ></slot>
+  </view>
+</template>
+
+<script>
+import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
+import { useFormItem } from "../form-item/useFormItem";
+import { defaultFormItemProps } from "../form/common";
+export default  _defineComponent({
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "form-item-plain",
+  props:  _mergeDefaults({
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
+    direction: { type: String, required: false },
+    labelWidth: { type: String, required: false },
+    labelAlign: { type: String, required: false },
+    labelValign: { type: String, required: false },
+    starPosition: { type: String, required: false },
+    label: { type: String, required: false },
+    hideStar: { type: Boolean, required: false },
+    required: { type: Boolean, required: false, skipCheck: true },
+    name: { type: [String, Number, Array], required: false },
+    rules: { type: [Object, Array], required: false },
+    validateTrigger: { type: [String, Array], required: false },
+    error: { type: String, required: false },
+    showError: { type: Boolean, required: false },
+    inlaid: { type: Boolean, required: false }
+  }, defaultFormItemProps()),
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const {
+      expose,
+      fieldId,
+      validateState,
+      shouldShowStar,
+      validateMessage,
+      shouldShowError,
+      direction,
+      labelAlign,
+      labelValign,
+      starPosition,
+      labelWidth
+    } = useFormItem(props);
+    __expose(expose);
+    const __returned__ = { props, expose, fieldId, validateState, shouldShowStar, validateMessage, shouldShowError, direction, labelAlign, labelValign, starPosition, labelWidth };
+    return __returned__;
+  }
+});
+</script>

package/components/form-plain/common.d.ts

@@ -0,0 +1,27 @@
+import { type FormExpose, type FormProps, type FormSlots, type FormItemProps, type FormItemExpose, type ValidateState } from '../form/common';
+export interface FormPlainProps extends FormProps {
+}
+export interface FormPlainSlots extends FormSlots {
+}
+export interface FormPlainExpose extends FormExpose {
+}
+export interface FormItemPlainProps extends FormItemProps {
+}
+export interface FormItemPlainSlotsProps {
+    fieldId: string;
+    validateState: ValidateState;
+    shouldShowStar: boolean;
+    validateMessage: string;
+    shouldShowError: boolean;
+    direction: FormProps['direction'];
+    labelAlign: FormProps['labelAlign'];
+    labelValign: FormProps['labelValign'];
+    starPosition: FormProps['starPosition'];
+    labelWidth: FormProps['labelWidth'];
+}
+export interface FormItemPlainSlots {
+    default?(props: Record<string, never>): any;
+    custom?(props: FormItemPlainSlotsProps): any;
+}
+export interface FormItemPlainExpose extends FormItemExpose {
+}

package/components/form-plain/common.js

@@ -0,0 +1 @@
+export {};

package/components/form-plain/form-plain.d.ts

@@ -0,0 +1,23 @@
+import { type FormPlainProps, type FormPlainSlots } from './common';
+declare function __VLS_template(): Readonly<FormPlainSlots> & FormPlainSlots;
+declare const __VLS_component: import("vue").DefineComponent<FormPlainProps, {
+    validate: (nameList?: import("../form/common").FieldName[]) => Promise<void>;
+    reset: (nameList?: import("../form/common").FieldName[]) => Promise<void>;
+    clearValidate: (nameList?: import("../form/common").FieldName[]) => Promise<void>;
+    scrollToField: (name: import("../form/common").FieldName) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormPlainProps> & Readonly<{}>, {
+    direction: "horizontal" | "vertical";
+    labelAlign: "start" | "center" | "end";
+    labelValign: "start" | "center" | "end";
+    starPosition: "left" | "right";
+    validateOnRuleChange: boolean;
+    showError: boolean;
+    scrollDuration: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/form-plain/form-plain.vue

@@ -0,0 +1,48 @@
+<template>
+  <view :class="rootClass" :style="rootStyle">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
+import { useForm } from "../form/useForm";
+import { defaultFormProps } from "../form/common";
+export default  _defineComponent({
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "form-plain",
+  props:  _mergeDefaults({
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
+    model: { type: Object, required: false },
+    rules: { type: Object, required: false },
+    validateTrigger: { type: [String, Array], required: false },
+    validateOnRuleChange: { type: Boolean, required: false },
+    direction: { type: String, required: false },
+    labelWidth: { type: String, required: false },
+    labelAlign: { type: String, required: false },
+    labelValign: { type: String, required: false },
+    starPosition: { type: String, required: false },
+    hideStar: { type: Boolean, required: false },
+    showError: { type: Boolean, required: false },
+    scrollToFirstError: { type: Boolean, required: false },
+    scrollIntoViewOptions: { type: Object, required: false },
+    scrollDuration: { type: Number, required: false },
+    disabled: { type: Boolean, required: false },
+    readonly: { type: Boolean, required: false },
+    card: { type: Boolean, required: false }
+  }, defaultFormProps),
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const { expose } = useForm(props);
+    __expose(expose);
+    const __returned__ = { props, expose };
+    return __returned__;
+  }
+});
+</script>

package/components/form-plain/index.d.ts

@@ -0,0 +1 @@
+export { type FormPlainProps, type FormPlainSlots, type FormPlainExpose, type FormItemPlainProps, type FormItemPlainSlots, type FormItemPlainExpose, } from './common';

package/components/form-plain/index.js

@@ -0,0 +1 @@
+export {};

package/components/status-bar/README.md

@@ -31,7 +31,7 @@ setConfig({
 
 // 2. 获取状态栏高度
 // 假设接口如下
-const statusBarHeight = window.toggle.getBarHeight()
+const statusBarHeight = window.android.getBarHeight()
 
 // 3. 声明到 html 元素上
 document.documentElement.style.setProperty(

package/global.d.ts

@@ -45,6 +45,8 @@ declare module 'vue' {
     SarFloatingPanel: typeof import('./components/floating-panel/floating-panel').default
     SarForm: typeof import('./components/form/form').default
     SarFormItem: typeof import('./components/form-item/form-item').default
+    SarFormItemPlain: typeof import('./components/form-item-plain/form-item-plain').default
+    SarFormPlain: typeof import('./components/form-plain/form-plain').default
     SarGrid: typeof import('./components/grid/grid').default
     SarGridItem: typeof import('./components/grid-item/grid-item').default
     SarIcon: typeof import('./components/icon/icon').default

package/index.d.ts

@@ -39,6 +39,7 @@ export * from './components/fab';
 export * from './components/floating-bubble';
 export * from './components/floating-panel';
 export * from './components/form';
+export * from './components/form-plain';
 export * from './components/grid';
 export * from './components/icon';
 export * from './components/indexes';

package/index.js

@@ -39,6 +39,7 @@ export * from './components/fab';
 export * from './components/floating-bubble';
 export * from './components/floating-panel';
 export * from './components/form';
+export * from './components/form-plain';
 export * from './components/grid';
 export * from './components/icon';
 export * from './components/indexes';

package/package.json

@@ -2,7 +2,7 @@
   "id": "sard-uniapp",
   "name": "sard-uniapp",
   "displayName": "sard-uniapp",
-  "version": "1.22.2",
+  "version": "1.23.0",
   "description": "sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库",
   "main": "index.js",
   "scripts": {
@@ -123,7 +123,7 @@
     "lodash-es": "^4.17.21",
     "prettier": "^3.5.3",
     "region-data": "^1.2.3",
-    "sard-cli": "^1.3.6",
+    "sard-cli": "^1.3.7",
     "sass": "^1.69.7",
     "tailwindcss": "^3.4.17",
     "tel-area-code": "^1.1.0",

package/utils/dom.d.ts

@@ -6,7 +6,7 @@ import { type NodeRect } from './geometry';
  * @param instance 父组件实例
  * @returns Promise<NodeRect>
  */
-export declare function getBoundingClientRect(selector: string, instance: ComponentInternalInstance | null): Promise<NodeRect>;
+export declare function getBoundingClientRect(selector: string, instance?: ComponentInternalInstance | null): Promise<NodeRect>;
 /**
  * 获取可使用窗口尺寸
  */

package/utils/dom.js

@@ -6,11 +6,14 @@
  */
 export function getBoundingClientRect(selector, instance) {
     return new Promise((resolve) => {
-        uni
-            .createSelectorQuery()
-            // #ifndef MP-ALIPAY
-            .in(instance?.proxy)
-            // #endif
+        let selectorQuery = uni.createSelectorQuery();
+        // #ifndef MP-ALIPAY
+        const proxy = instance?.proxy;
+        if (proxy) {
+            selectorQuery = selectorQuery.in(proxy);
+        }
+        // #endif
+        selectorQuery
             .select(selector)
             .boundingClientRect((data) => {
             resolve(data);

package/utils/is.d.ts

@@ -9,7 +9,7 @@ export declare function isPlainObject(target: any): target is Record<PropertyKey
  * @param {any} target
  * @return {boolean}
  */
-export declare function isEmptyArray(target: any): boolean;
+export declare function isEmptyArray(target: any): target is [];
 /**
  * @description: 判断是否为对象
  * @param {any} target