@puresnake/snake-ui 0.0.0-stage → 0.0.2

package/components/snake-filter-sorts/snake-filter-sorts.vue

@@ -0,0 +1,185 @@
+<template>
+    <view
+        v-if="filters.topFilter"
+        id="filtersId"
+        class="filter-sorts"
+        :style="[{ backgroundColor: bgColor }, customStyle]"
+    >
+        <view class="filter-sorts__toolbar" role="toolbar" aria-label="商品排序与筛选">
+            <template v-for="(item, index) in filters.topFilter" :key="index">
+                <view
+                    v-if="item.type === 'click'"
+                    class="filter-sorts__item"
+                    :class="{
+                        'filter-sorts__item--active': filterParams['sort'] === item.value
+                    }"
+                    role="button"
+                    tabindex="0"
+                    :aria-pressed="filterParams['sort'] === item.value"
+                    @click="sortSelectHandle('sort', item.value ?? '')"
+                    @keydown.enter.prevent="sortSelectHandle('sort', item.value ?? '')"
+                    @keydown.space.prevent="sortSelectHandle('sort', item.value ?? '')"
+                >
+                    {{ item.name }}
+                </view>
+                <snake-button-sort
+                    v-if="item.type === 'sort'"
+                    :title="item.name"
+                    @change="(e: any) => sortSelectHandle('price', e.value)"
+                ></snake-button-sort>
+            </template>
+            <snake-drop-menu ref="dropMenuRef" custom-style="flex: 1; min-width: 0; background: transparent;">
+                <snake-drop-menu-item
+                    title="筛选"
+                    custom-style="height: 70vh"
+                    :before-toggle="handleBeforeToggle"
+                    @close="dropMenuClose"
+                >
+                    <filterPage
+                        :show="showDrawer"
+                        :filters="filters"
+                        :defaultParams="filterParams"
+                        @confirm="filterConfirm"
+                    ></filterPage>
+                </snake-drop-menu-item>
+            </snake-drop-menu>
+        </view>
+    </view>
+</template>
+<script lang="ts" setup>
+/**
+ * @component FilterSorts
+ * @description 组合顶部快捷排序、价格排序和多维筛选面板，并向父级输出统一查询参数。
+ */
+
+import { getCurrentInstance, onMounted, ref } from 'vue';
+import filterPage from './filter-page.vue';
+import type { FilterSortsEmits, FilterSortsProps } from './types';
+
+defineOptions({
+    name: 'filter-sorts',
+    options: {
+        virtualHost: true,
+        addGlobalClass: true,
+        styleIsolation: 'shared'
+    }
+});
+
+const props = withDefaults(defineProps<FilterSortsProps>(), {
+    filters: () => ({}),
+    defaultFilter: () => ({}),
+    bgColor: 'transparent',
+    sort: '',
+    showTabs: true,
+    goodsListLength: 0,
+    customStyle: () => ({})
+});
+
+const emit = defineEmits<FilterSortsEmits>();
+
+const instance = getCurrentInstance();
+
+const dropMenuRef = ref<{ updateDropMenuRect: () => void; colseAll: () => void } | null>(null);
+
+const showDrawer = ref(false);
+const filterParams = ref<Record<string, string | number | boolean>>({
+    sort: 'auto',
+    price: ''
+});
+
+const dropMenuOpen = () => {
+    showDrawer.value = true;
+};
+const dropMenuClose = async () => {
+    showDrawer.value = false;
+};
+// 异步打开
+const handleBeforeToggle = async ({ resolve }: { resolve: (value: boolean) => void }) => {
+    let scrollTop = 0;
+
+    uni.createSelectorQuery()
+        .in(instance)
+        .selectViewport()
+        .scrollOffset(res => {
+            scrollTop = (res as UniApp.NodeInfo).scrollTop || 0;
+        })
+        .exec();
+
+    const query = uni.createSelectorQuery().in(instance);
+    query.select('#filtersId').boundingClientRect();
+    query.exec(res => {
+        const navbarHeight = 44;
+        const tabsHeight = props.showTabs ? 42 : 0;
+        scrollTop = scrollTop + (res[0]?.top || 0) - navbarHeight - tabsHeight;
+        // #ifndef H5
+        scrollTop = scrollTop - (uni.$snake.sys().statusBarHeight || 0);
+        // #endif
+        if (scrollTop > 0) {
+            uni.pageScrollTo({
+                scrollTop,
+                duration: 0,
+                success: () => {
+                    dropMenuRef.value?.updateDropMenuRect();
+                    dropMenuOpen();
+                    resolve(true);
+                }
+            });
+        } else {
+            dropMenuRef.value?.updateDropMenuRect();
+            dropMenuOpen();
+            resolve(true);
+        }
+    });
+};
+
+// 排序选择
+const sortSelectHandle = (propName: string | number, value: string) => {
+    filterParams.value[propName] = value;
+    dropMenuRef.value?.colseAll();
+    emitChange();
+};
+
+// 确认筛选
+const filterConfirm = (e: Record<string, string | number | boolean>) => {
+    filterParams.value = {
+        sort: filterParams.value.sort,
+        price: filterParams.value.price,
+        ...e
+    };
+    dropMenuRef.value?.colseAll();
+    emitChange();
+};
+const emitChange = () => {
+    emit('change', filterParams.value);
+};
+
+onMounted(async () => {
+    await uni.$snake.sleep();
+    filterParams.value.sort = props.sort;
+});
+</script>
+
+<style lang="scss" scoped>
+::v-deep .u-drawer-content {
+    height: 100% !important;
+}
+
+.filter-sorts__toolbar {
+    display: flex;
+    flex: 1;
+    align-items: center;
+}
+
+.filter-sorts__item {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    font-size: 26rpx;
+}
+
+.filter-sorts__item--active {
+    color: var(--snake-color-primary, #06d290);
+    font-weight: 500;
+}
+</style>

package/components/snake-filter-sorts/types.ts

@@ -0,0 +1,57 @@
+import type { StyleValue } from '../../types/global';
+
+/** Filter 可选项。 */
+export interface FilterOption extends Record<string, unknown> {
+    /** 数据项名称或唯一标识。 */
+    name?: string;
+    /** 当前值。 */
+    value?: string | number;
+    /** selected 配置。 */
+    selected?: boolean;
+}
+
+/** FilterGroup 类型定义。 */
+export interface FilterGroup extends Record<string, unknown> {
+    /** 数据项名称或唯一标识。 */
+    name?: string;
+    /** 当前值。 */
+    value?: string;
+    /** 组件类型或展示模式。 */
+    type?: string;
+    /** 用于渲染的数据列表。 */
+    list?: FilterOption[];
+}
+
+/** FilterSorts 配置数据。 */
+export interface FilterSortsData extends Record<string, unknown> {
+    /** top filter 配置。 */
+    topFilter?: FilterGroup[];
+    /** main filter 配置。 */
+    mainFilter?: FilterGroup[];
+    /** brand filter 配置。 */
+    brandFilter?: Record<string, FilterOption[]>;
+}
+
+/** FilterSorts 组件的公开属性。 */
+export interface FilterSortsProps<Filters extends FilterSortsData = FilterSortsData> {
+    /** 筛选项配置数据。 */
+    filters?: Filters;
+    /** default filter 配置。 */
+    defaultFilter?: Record<string, any>;
+    /** 背景颜色。 */
+    bgColor?: string;
+    /** sort 配置。 */
+    sort?: string;
+    /** show tabs 配置。 */
+    showTabs?: boolean;
+    /** goods list length 配置。 */
+    goodsListLength?: number;
+    /** 根节点自定义样式。 */
+    customStyle?: StyleValue;
+}
+
+/** FilterSorts 组件的事件契约。 */
+export type FilterSortsEmits = {
+    /** change 事件携带的参数。 */
+    change: [params: Record<string, string | number | boolean>];
+};

package/components/snake-floating-bubble/snake-floating-bubble.vue

@@ -0,0 +1,157 @@
+<template>
+    <view
+        class="floating-bubble"
+        :class="{ 'floating-bubble--slot': hasSlot }"
+        :animation="animationData"
+        :style="rootStyle"
+        v-if="visible"
+    >
+        <view class="floating-bubble__wrap" :style="wrapStyle" @click="handleNavigate">
+            <view v-if="!hasSlot" class="floating-bubble__close" @click.stop.prevent="close">
+                <snake-icon name="close-circle-fill" size="28" color="rgba(7, 7, 7, 0.2)" />
+            </view>
+            <image v-if="!hasSlot" class="floating-bubble__logo" :src="datas.src" />
+            <slot v-else />
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component FloatingBubble
+ * @description 页面右侧的悬浮气泡。图片模式支持点击跳转与关闭（持久化），插槽模式承载自定义内容；滚动时向屏幕外收起，停止后恢复。
+ */
+
+import { computed, getCurrentInstance, onBeforeUnmount, onMounted, ref, useSlots, watch } from 'vue';
+import type { FloatingBubbleProps } from './types';
+
+defineOptions({ name: 'FloatingBubble', options: { virtualHost: true, styleIsolation: 'shared' } });
+
+const props = withDefaults(defineProps<FloatingBubbleProps>(), {
+    datas: () => ({}),
+    scrollTop: 0,
+    bottom: '80rpx',
+    background: 'transparent',
+    zIndex: 6
+});
+const emit = defineEmits<{ click: [] }>();
+
+const slots = useSlots();
+const hasSlot = computed(() => !!slots.default);
+
+const instance = getCurrentInstance();
+const closeList = ref<Array<string | number>>([]);
+const animationData = ref<Record<string, unknown>>({});
+const animation = ref<ReturnType<typeof uni.createAnimation>>();
+const size = ref({ width: 0, right: 0 });
+const off = ref(false);
+let timer: ReturnType<typeof setTimeout> | undefined;
+
+const isShow = computed(() => !closeList.value.includes(props.datas?.uid ?? ''));
+const visible = computed(() => (hasSlot.value || Boolean(props.datas?.src)) && isShow.value);
+
+const rootStyle = computed(() => {
+    const style: Record<string, any> = { zIndex: props.zIndex };
+    if (hasSlot.value) {
+        style.bottom = props.bottom;
+        style.background = props.background;
+    } else {
+        style.right = `${props.datas?.right ?? 0}%`;
+        style.bottom = `${props.datas?.bottom ?? 20}%`;
+    }
+    return style;
+});
+
+const wrapStyle = computed(() =>
+    hasSlot.value ? {} : { width: `${props.datas?.width ?? 96}rpx`, height: `${props.datas?.height ?? 96}rpx` }
+);
+
+watch(() => props.scrollTop, declick);
+
+onMounted(async () => {
+    closeList.value = uni.getStorageSync('suspensionList') || [];
+    animation.value = uni.createAnimation({ duration: 1000, timingFunction: 'ease' });
+    const rect = await uni.$snake.getRect('.floating-bubble', instance);
+    if (rect) size.value = { width: rect.width, right: rect.right ?? 0 };
+});
+
+onBeforeUnmount(() => clearTimeout(timer));
+
+function declick() {
+    if (!off.value) {
+        rotateAndScale();
+        off.value = true;
+    }
+}
+
+function rotateAndScale() {
+    if (!animation.value) return;
+    const screenWidth = uni.$snake.sys().screenWidth;
+    const x = size.value.width / 2 + screenWidth - size.value.right;
+    animation.value.translateX(x).step();
+    animationData.value = animation.value.export();
+    timer = setTimeout(() => {
+        off.value = false;
+        norotateAndScale();
+    }, 2000);
+}
+
+function norotateAndScale() {
+    if (!animation.value) return;
+    animation.value.translateX(0).step();
+    animationData.value = animation.value.export();
+}
+
+function close() {
+    const uid = props.datas?.uid;
+    if (uid !== undefined && !closeList.value.includes(uid)) closeList.value.push(uid);
+    uni.setStorageSync('suspensionList', closeList.value);
+}
+
+function reopen() {
+    const uid = props.datas?.uid;
+    if (uid === undefined) return;
+    closeList.value = closeList.value.filter(item => item !== uid);
+    uni.setStorageSync('suspensionList', closeList.value);
+}
+
+function handleNavigate() {
+    emit('click');
+    if (!hasSlot.value && props.datas?.url) uni.$snake.navTo(props.datas.url);
+}
+
+defineExpose({ reopen });
+</script>
+
+<style lang="scss" scoped>
+.floating-bubble {
+    position: fixed;
+    right: 0;
+    bottom: 20%;
+    z-index: 6;
+    padding-bottom: 0rpx;
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+
+    &--slot {
+        right: 28rpx;
+    }
+
+    &__wrap {
+        position: relative;
+    }
+
+    &__close {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 12;
+        color: rgba(7, 7, 7, 0.2);
+    }
+
+    &__logo {
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>

package/components/snake-floating-bubble/types.ts

@@ -0,0 +1,43 @@
+/** FloatingBubble 配置数据。 */
+export interface FloatingBubbleData {
+    /** uid 配置。 */
+    uid?: string | number;
+    /** 资源地址。 */
+    src?: string;
+    /** 点击后跳转地址。 */
+    url?: string;
+    /** right 配置。 */
+    right?: number;
+    /** bottom 配置。 */
+    bottom?: number;
+    /** 组件宽度。 */
+    width?: number;
+    /** 组件高度。 */
+    height?: number;
+}
+
+/** FloatingBubble 组件的公开属性。 */
+export interface FloatingBubbleProps {
+    /** CMS 装修组件配置数据。 */
+    datas?: FloatingBubbleData;
+    /** 页面或容器当前滚动距离。 */
+    scrollTop?: number;
+    /** 插槽模式下底部定位偏移。 */
+    bottom?: string;
+    /** 插槽模式下容器背景。 */
+    background?: string;
+    /** 层级。 */
+    zIndex?: number | string;
+}
+
+/** FloatingBubble 实例公开的操作。 */
+export interface FloatingBubbleExpose {
+    /** 重新打开已关闭的悬浮入口。 */
+    reopen(): void;
+}
+
+/** FloatingBubble 点击入口时发出的事件。 */
+export interface FloatingBubbleEmits {
+    /** 用户点击悬浮入口。 */
+    click: [];
+}

package/components/snake-follow/snake-follow.vue

@@ -0,0 +1,18 @@
+<template>
+    <view>
+        <!-- #ifdef MP-WEIXIN -->
+        <official-account></official-account>
+        <!-- #endif -->
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component Follow
+ * @description 在微信小程序环境中展示官方账号关注组件。
+ */
+
+defineOptions({ name: 'Follow', options: { virtualHost: true, styleIsolation: 'shared' } });
+</script>
+
+<style></style>

package/components/snake-follow/types.ts

@@ -0,0 +1,2 @@
+/** Follow 组件的公开属性。 */
+export type FollowProps = Record<string, never>;

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

@@ -0,0 +1,124 @@
+<template>
+    <view class="snake-form" :class="customClass" :style="customStyle"><slot /></view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component Form
+ * @description 管理表单数据、校验规则与字段实例。
+ * @see /components/form
+ */
+
+import { computed, provide, ref, toRef } from 'vue';
+import { toast } from '../../libs/function/toast';
+import { formKey } from './types';
+import type { FormCallback, FormError, FormProps, FormRules } from './types';
+
+defineOptions({ name: 'SnakeForm', options: { virtualHost: true, styleIsolation: 'shared' } });
+const props = withDefaults(defineProps<FormProps>(), {
+    model: () => ({}),
+    rules: () => ({}),
+    errorType: () => ['message', 'toast'],
+    borderBottom: true,
+    labelPosition: 'left',
+    labelWidth: 90,
+    labelAlign: 'left',
+    labelStyle: () => ({}),
+    size: 'default',
+    customClass: '',
+    customStyle: ''
+});
+
+interface FormField {
+    prop: string;
+    validation(trigger?: string, callback?: (message: string) => void): void;
+    resetField(): void;
+}
+
+const fields = ref<FormField[]>([]);
+const rules = ref<FormRules>(props.rules);
+const model = computed(() => props.model);
+
+function setRules(newRules: FormRules) {
+    rules.value = newRules;
+}
+
+function addField(field: FormField) {
+    if (!fields.value.includes(field)) fields.value.push(field);
+}
+
+function removeField(field: Pick<FormField, 'prop'>) {
+    fields.value = fields.value.filter(item => item.prop !== field.prop);
+}
+
+function resetFields() {
+    fields.value.forEach(field => field.resetField?.());
+}
+
+function runValidation(targetFields: FormField[], callback?: FormCallback, showToast = false): Promise<boolean> {
+    return new Promise(resolve => {
+        let valid = true;
+        let count = 0;
+        const errors: FormError[] = [];
+        if (targetFields.length === 0) {
+            resolve(true);
+            callback?.(true, []);
+            return;
+        }
+        targetFields.forEach(field => {
+            field.validation('', message => {
+                if (message) {
+                    valid = false;
+                    errors.push({ prop: field.prop, message });
+                }
+                if (++count !== targetFields.length) return;
+                resolve(valid);
+                if (
+                    showToast &&
+                    !props.errorType.includes('none') &&
+                    props.errorType.includes('toast') &&
+                    errors.length > 0
+                ) {
+                    toast(errors[0].message);
+                }
+                callback?.(valid, errors);
+            });
+        });
+    });
+}
+
+function validate(callback?: FormCallback): Promise<boolean> {
+    return runValidation(fields.value, callback, true);
+}
+
+function validateField(prop: string | string[], callback?: FormCallback): Promise<boolean> {
+    const names = Array.isArray(prop) ? prop : [prop];
+    return runValidation(
+        fields.value.filter(field => names.includes(field.prop)),
+        callback
+    );
+}
+
+// Snake 输入控件通过注入读取表单尺寸和错误配置；字段生命周期由公开方法驱动。
+provide(formKey, {
+    model: toRef(props, 'model'),
+    rules,
+    size: toRef(props, 'size'),
+    errorType: toRef(props, 'errorType'),
+    borderBottom: toRef(props, 'borderBottom'),
+    labelPosition: toRef(props, 'labelPosition'),
+    labelWidth: toRef(props, 'labelWidth'),
+    labelAlign: toRef(props, 'labelAlign'),
+    labelStyle: toRef(props, 'labelStyle'),
+    register: field => addField(field as unknown as FormField),
+    unregister: field => removeField(field)
+});
+
+defineExpose({ setRules, resetFields, validate, validateField, addField, removeField, fields, rules, props, model });
+</script>
+
+<style scoped>
+.snake-form {
+    width: 100%;
+}
+</style>

package/components/snake-form/types.ts

@@ -0,0 +1,96 @@
+import type { InjectionKey, Ref } from 'vue';
+import type { StyleValue } from '../../types/global';
+import type { FormError, FormRules, FormTrigger } from '../../libs/form';
+
+/** 表单控件尺寸。 */
+export type FormSize = 'small' | 'default' | 'large';
+/** 标签位置。 */
+export type FormLabelPosition = 'left' | 'top';
+/** 标签对齐方式。 */
+export type FormLabelAlign = 'left' | 'center' | 'right';
+/** 错误提示方式。 */
+export type FormErrorType = 'message' | 'border' | 'border-bottom' | 'none' | 'toast';
+
+/** Form 组件的公开属性。 */
+export interface FormProps {
+    /** 表单数据对象。 */
+    model?: Record<string, any>;
+    /** 表单校验规则。 */
+    rules?: FormRules;
+    /** 错误提示方式。 */
+    errorType?: FormErrorType[];
+    /** 是否显示表单项底边。 */
+    borderBottom?: boolean;
+    /** 标签位置。 */
+    labelPosition?: FormLabelPosition;
+    /** 标签宽度。 */
+    labelWidth?: string | number;
+    /** 标签对齐方式。 */
+    labelAlign?: FormLabelAlign;
+    /** 标签自定义样式。 */
+    labelStyle?: Record<string, any>;
+    /** 表单控件尺寸。 */
+    size?: FormSize;
+    /** 根节点自定义类名。 */
+    customClass?: string;
+    /** 根节点自定义样式。 */
+    customStyle?: StyleValue;
+}
+
+/** 表单校验回调。 */
+export type FormCallback = (valid: boolean, errors: FormError[]) => void;
+
+/** Form 通过模板 ref 暴露的接口。 */
+export interface FormExpose {
+    /** 动态设置校验规则。 */
+    setRules(rules: FormRules): void;
+    /** 重置所有已注册字段。 */
+    resetFields(): void;
+    /** 校验全部字段。 */
+    validate(callback?: FormCallback): Promise<boolean>;
+    /** 校验一个或多个指定字段。 */
+    validateField(props: string | string[], callback?: FormCallback): Promise<boolean>;
+}
+
+/** Form 注册的单个字段协议。 */
+export interface FormField {
+    /** 字段在表单模型中的路径。 */
+    prop: string;
+    /** 按触发方式校验字段，返回错误列表。 */
+    validate(trigger?: FormTrigger): Promise<FormError[]>;
+    /** 将字段恢复为初始值。 */
+    reset(): void;
+    /** 清空字段的校验状态。 */
+    clear(): void;
+}
+
+/** Form 向 form-item 注入的配对上下文（formKey 通道）。 */
+export interface FormContext {
+    /** 表单数据对象。 */
+    model: Ref<Record<string, unknown>>;
+    /** 校验规则。 */
+    rules: Ref<FormRules>;
+    /** 控件尺寸。 */
+    size: Ref<FormSize>;
+    /** 错误提示方式。 */
+    errorType: Ref<FormErrorType[]>;
+    /** 是否显示表单项底边。 */
+    borderBottom: Ref<boolean>;
+    /** 标签位置。 */
+    labelPosition: Ref<FormLabelPosition>;
+    /** 标签宽度。 */
+    labelWidth: Ref<string | number>;
+    /** 标签对齐方式。 */
+    labelAlign: Ref<FormLabelAlign>;
+    /** 标签自定义样式。 */
+    labelStyle: Ref<StyleValue>;
+    /** 注册一个字段。 */
+    register(field: FormField): void;
+    /** 注销一个字段。 */
+    unregister(field: FormField): void;
+}
+
+/** Form ↔ FormItem 配对注入键。 */
+export const formKey: InjectionKey<FormContext> = Symbol('snake-form');
+
+export type { FormError, FormRule, FormRules, FormTrigger } from '../../libs/form';