@puresnake/snake-ui 0.0.0-stage → 0.0.2

package/components/snake-button/snake-button.vue

@@ -0,0 +1,357 @@
+<template>
+    <button
+        id="snake-wave-btn"
+        class="snake-button snake-line-1 snake-fix-ios-appearance"
+        data-eventsync="true"
+        :class="[
+            `snake-size-${size}`,
+            plain ? `snake-button--${type}--plain` : '',
+            loading ? 'snake-loading' : '',
+            shape === 'circle' ? 'snake-round-circle' : '',
+            hairLine ? hairLineClass : 'snake-button--bold-border',
+            `snake-button--${type}`,
+            disabled ? `snake-button--${type}--disabled` : '',
+            customClass
+        ]"
+        :hover-start-time="Number(hoverStartTime)"
+        :hover-stay-time="Number(hoverStayTime)"
+        :disabled="disabled"
+        :form-type="formType || undefined"
+        :open-type="disabled || loading ? undefined : openType || undefined"
+        :app-parameter="appParameter"
+        :hover-stop-propagation="hoverStopPropagation"
+        :send-message-title="sendMessageTitle"
+        :send-message-path="sendMessagePath"
+        :lang="lang"
+        :data-name="dataName"
+        :session-from="sessionFrom"
+        :send-message-img="sendMessageImg"
+        :show-message-card="showMessageCard"
+        :style="rootStyle"
+        :hover-class="hoverClassName"
+        :loading="loading"
+        @tap.stop="click"
+        @getauthorize="getAuthorize"
+        @getuserinfo="forward('getuserinfo', $event)"
+        @contact="forward('contact', $event)"
+        @getphonenumber="forward('getphonenumber', $event)"
+        @error="forward('error', $event)"
+        @launchapp="forward('launchapp', $event)"
+        @opensetting="forward('opensetting', $event)"
+        @chooseavatar="forward('chooseavatar', $event)"
+        @agreeprivacyauthorization="forward('agreeprivacyauthorization', $event)"
+    >
+        <slot>{{ text }}</slot>
+        <view
+            v-if="ripple"
+            class="snake-wave-ripple"
+            :class="{ 'snake-wave-active': waveActive }"
+            :style="{
+                top: `${rippleTop}px`,
+                left: `${rippleLeft}px`,
+                width: `${targetWidth}px`,
+                height: `${targetWidth}px`,
+                backgroundColor: rippleBgColor || 'rgba(0, 0, 0, 0.15)'
+            }"
+        />
+    </button>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component Button
+ * @description 跨端按钮。
+ * @see /components/button
+ */
+import { computed, getCurrentInstance, nextTick, ref } from 'vue';
+import { toStyle } from '../../libs/function/style';
+import { buttonProps } from './types';
+import type { ButtonEmits } from './types';
+
+defineOptions({ name: 'SnakeButton', options: { addGlobalClass: true, virtualHost: true, styleIsolation: 'shared' } });
+
+const props = defineProps(buttonProps);
+const emit = defineEmits<ButtonEmits>();
+const emitNative = emit as unknown as (name: Exclude<keyof ButtonEmits, 'click'>, event: unknown) => void;
+const instance = getCurrentInstance();
+const rippleTop = ref(0);
+const rippleLeft = ref(0);
+const targetWidth = ref(0);
+const waveActive = ref(false);
+let lastClickTime = 0;
+
+const hoverClassName = computed(() => {
+    if (props.loading || props.disabled || props.ripple) return '';
+    if (props.hoverClass) return props.hoverClass;
+    return props.plain ? `snake-${props.type}-plain-hover` : `snake-${props.type}-hover`;
+});
+const hairLineClass = computed(() =>
+    ['primary', 'success', 'error', 'warning'].includes(props.type) && !props.plain ? '' : 'snake-hairline-border'
+);
+const rootStyle = computed(() => toStyle({ overflow: props.ripple ? 'hidden' : 'visible' }, props.customStyle));
+
+function click(event: unknown) {
+    const wait = Number(props.throttleTime);
+    if (wait) {
+        const now = Date.now();
+        if (now - lastClickTime < wait) return;
+        lastClickTime = now;
+    }
+    if (props.loading || props.disabled) return;
+    if (props.ripple) {
+        waveActive.value = false;
+        nextTick(() => getWaveQuery(event));
+    }
+    emit('click', event);
+}
+
+type TouchPoint = { clientX?: number; clientY?: number };
+type TouchEventLike = { touches?: TouchPoint[]; changedTouches?: TouchPoint[]; detail?: TouchPoint };
+
+function getWaveQuery(event: unknown) {
+    uni.createSelectorQuery()
+        .in(instance?.proxy ?? null)
+        .select('.snake-button')
+        .boundingClientRect(rect => {
+            if (!rect || Array.isArray(rect) || !rect.width || !rect.height) return;
+            const source = event as TouchEventLike;
+            const touch = source.changedTouches?.[0] ?? source.touches?.[0] ?? source.detail;
+            if (!touch) return;
+            targetWidth.value = Math.max(rect.height, rect.width);
+            rippleTop.value = Number(touch.clientY) - (rect.top ?? 0) - targetWidth.value / 2;
+            rippleLeft.value = Number(touch.clientX) - (rect.left ?? 0) - targetWidth.value / 2;
+            nextTick(() => (waveActive.value = true));
+        })
+        .exec();
+}
+
+function forward(name: Exclude<keyof ButtonEmits, 'click'>, event: unknown) {
+    emitNative(name, event);
+}
+function getAuthorize(event: unknown) {
+    if (props.scope === 'phoneNumber') emit('getphonenumber', event);
+    else if (props.scope === 'userInfo') emit('getuserinfo', event);
+}
+</script>
+
+<style scoped>
+.snake-button::after {
+    border: none;
+}
+.snake-button {
+    position: relative;
+    z-index: 1;
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: visible;
+    padding: 0 40rpx;
+    border: 0;
+    line-height: 1;
+    cursor: pointer;
+    transition: all 0.15s;
+}
+.snake-button--bold-border {
+    border: 1px solid var(--snake-color-white, #fff);
+}
+.snake-button--default {
+    color: var(--snake-color-text, #606266);
+    border-color: var(--snake-color-border-light, #c8c9cc);
+    background-color: var(--snake-color-surface, #fff);
+}
+.snake-button--primary {
+    color: var(--snake-color-white, #fff);
+    border-color: var(--snake-color-primary, #06d290);
+    background-color: var(--snake-color-primary, #06d290);
+}
+.snake-button--success {
+    color: var(--snake-color-white, #fff);
+    border-color: var(--snake-color-success, #19be6b);
+    background-color: var(--snake-color-success, #19be6b);
+}
+.snake-button--error {
+    color: var(--snake-color-white, #fff);
+    border-color: var(--snake-color-error, #fa3534);
+    background-color: var(--snake-color-error, #fa3534);
+}
+.snake-button--warning {
+    color: var(--snake-color-white, #fff);
+    border-color: var(--snake-color-warning, #ff9900);
+    background-color: var(--snake-color-warning, #ff9900);
+}
+.snake-button--default--disabled {
+    color: var(--snake-color-white, #fff);
+    border-color: var(--snake-color-border, #e4e7ed);
+    background-color: var(--snake-color-surface, #fff);
+}
+.snake-button--primary--disabled {
+    color: var(--snake-color-white, #fff) !important;
+    border-color: var(--snake-color-primary-disabled, #71d5a1) !important;
+    background-color: var(--snake-color-primary-disabled, #71d5a1) !important;
+}
+.snake-button--success--disabled {
+    color: var(--snake-color-white, #fff) !important;
+    border-color: var(--snake-color-success-disabled, #71d5a1) !important;
+    background-color: var(--snake-color-success-disabled, #71d5a1) !important;
+}
+.snake-button--error--disabled {
+    color: var(--snake-color-white, #fff) !important;
+    border-color: var(--snake-color-error-disabled, #fab6b6) !important;
+    background-color: var(--snake-color-error-disabled, #fab6b6) !important;
+}
+.snake-button--warning--disabled {
+    color: var(--snake-color-white, #fff) !important;
+    border-color: var(--snake-color-warning-disabled, #fcbd71) !important;
+    background-color: var(--snake-color-warning-disabled, #fcbd71) !important;
+}
+.snake-button--primary--plain {
+    color: var(--snake-color-primary, #06d290) !important;
+    border-color: var(--snake-color-primary-disabled, #71d5a1) !important;
+    background-color: var(--snake-color-primary-light, #ecf5ff) !important;
+}
+.snake-button--success--plain {
+    color: var(--snake-color-success, #19be6b) !important;
+    border-color: var(--snake-color-success-disabled, #71d5a1) !important;
+    background-color: var(--snake-color-success-light, #dbf1e1) !important;
+}
+.snake-button--error--plain {
+    color: var(--snake-color-error, #fa3534) !important;
+    border-color: var(--snake-color-error-disabled, #fab6b6) !important;
+    background-color: var(--snake-color-error-light, #fef0f0) !important;
+}
+.snake-button--warning--plain {
+    color: var(--snake-color-warning, #ff9900) !important;
+    border-color: var(--snake-color-warning-disabled, #fcbd71) !important;
+    background-color: var(--snake-color-warning-light, #fdf6ec) !important;
+}
+.snake-hairline-border::after {
+    content: ' ';
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    width: 199.8%;
+    height: 199.7%;
+    border: 1px solid currentColor;
+    transform: scale(0.5);
+    transform-origin: 0 0;
+    pointer-events: none;
+}
+.snake-wave-ripple {
+    position: absolute;
+    z-index: 0;
+    border-radius: 100%;
+    opacity: 1;
+    background-clip: padding-box;
+    transform: scale(0);
+    transform-origin: center;
+    pointer-events: none;
+    user-select: none;
+}
+.snake-wave-ripple.snake-wave-active {
+    opacity: 0;
+    transform: scale(2);
+    transition:
+        opacity 1s linear,
+        transform 0.4s linear;
+}
+.snake-round-circle,
+.snake-round-circle::after {
+    border-radius: 100rpx;
+}
+.snake-loading::after {
+    background-color: hsla(0, 0%, 100%, 0.35);
+}
+.snake-size-large {
+    height: 100rpx;
+    font-size: 36rpx;
+    line-height: 100rpx;
+}
+.snake-size-default {
+    height: 80rpx;
+    font-size: 30rpx;
+    line-height: 80rpx;
+}
+.snake-size-medium {
+    display: inline-flex;
+    width: auto;
+    height: 70rpx;
+    padding: 0 80rpx;
+    font-size: 26rpx;
+    line-height: 70rpx;
+}
+.snake-size-small {
+    display: inline-flex;
+    width: auto;
+    height: 60rpx;
+    padding: 0 30rpx;
+    font-size: 24rpx;
+    line-height: 60rpx;
+}
+.snake-size-mini {
+    display: inline-flex;
+    width: auto;
+    height: 50rpx;
+    padding: 0 20rpx;
+    padding-top: 1px;
+    font-size: 22rpx;
+    line-height: 50rpx;
+}
+.snake-primary-plain-hover {
+    color: var(--snake-color-white, #fff) !important;
+    border-color: var(--snake-color-primary-dark, #18b566) !important;
+    background-color: var(--snake-color-primary-dark, #18b566) !important;
+}
+.snake-default-plain-hover {
+    color: var(--snake-color-white, #fff) !important;
+    border-color: var(--snake-color-primary-dark, #18b566) !important;
+    background-color: var(--snake-color-primary-dark, #18b566) !important;
+}
+.snake-success-plain-hover {
+    color: var(--snake-color-white, #fff) !important;
+    border-color: var(--snake-color-success-dark, #18b566) !important;
+    background-color: var(--snake-color-success-dark, #18b566) !important;
+}
+.snake-warning-plain-hover {
+    color: var(--snake-color-white, #fff) !important;
+    border-color: var(--snake-color-warning-dark, #f29100) !important;
+    background-color: var(--snake-color-warning-dark, #f29100) !important;
+}
+.snake-error-plain-hover {
+    color: var(--snake-color-white, #fff) !important;
+    border-color: var(--snake-color-error-dark, #dd6161) !important;
+    background-color: var(--snake-color-error-dark, #dd6161) !important;
+}
+.snake-info-plain-hover {
+    color: var(--snake-color-white, #fff) !important;
+    border-color: var(--snake-color-info-dark, #767a82) !important;
+    background-color: var(--snake-color-info-dark, #767a82) !important;
+}
+.snake-default-hover {
+    color: var(--snake-color-primary-dark, #18b566) !important;
+    border-color: var(--snake-color-primary-dark, #18b566) !important;
+    background-color: var(--snake-color-primary-light, #ecf5ff) !important;
+}
+.snake-primary-hover {
+    color: var(--snake-color-white, #fff);
+    background: var(--snake-color-primary-dark, #18b566) !important;
+}
+.snake-success-hover {
+    color: var(--snake-color-white, #fff);
+    background: var(--snake-color-success-dark, #18b566) !important;
+}
+.snake-info-hover {
+    color: var(--snake-color-white, #fff);
+    background: var(--snake-color-info-dark, #767a82) !important;
+}
+.snake-warning-hover {
+    color: var(--snake-color-white, #fff);
+    background: var(--snake-color-warning-dark, #f29100) !important;
+}
+.snake-error-hover {
+    color: var(--snake-color-white, #fff);
+    background: var(--snake-color-error-dark, #dd6161) !important;
+}
+</style>

package/components/snake-button/types.ts

@@ -0,0 +1,103 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/** 按钮主题类型。 */
+export type ButtonType = 'default' | 'primary' | 'success' | 'info' | 'warning' | 'error' | (string & {});
+/** 按钮尺寸。 */
+export type ButtonSize = 'large' | 'default' | 'medium' | 'small' | 'mini';
+/** 按钮形状。 */
+export type ButtonShape = 'square' | 'circle';
+/** 原生表单行为。 */
+export type ButtonFormType = 'submit' | 'reset' | '';
+/** 支付宝授权范围。 */
+export type ButtonScope = '' | 'phoneNumber' | 'userInfo';
+
+/** snake-button 运行时属性。 */
+export const buttonProps = {
+    /** 根节点自定义样式。 */ customStyle: {
+        type: [String, Object] as PropType<string | Record<string, unknown>>,
+        default: () => ({})
+    },
+    /** 根节点自定义类名。 */ customClass: { type: String, default: '' },
+    /** 按钮文本。 */ text: { type: String, default: '' },
+    /** 是否使用半像素细边框。 */ hairLine: { type: Boolean, default: true },
+    /** 按钮主题。 */ type: { type: String as PropType<ButtonType>, default: 'default' },
+    /** 按钮尺寸。 */ size: { type: String as PropType<ButtonSize>, default: 'default' },
+    /** 按钮形状。 */ shape: { type: String as PropType<ButtonShape>, default: 'square' },
+    /** 是否为镂空按钮。 */ plain: { type: Boolean, default: false },
+    /** 是否禁用。 */ disabled: { type: Boolean, default: false },
+    /** 是否显示原生加载状态。 */ loading: { type: Boolean, default: false },
+    /** 支付宝小程序授权范围。 */ scope: { type: String as PropType<ButtonScope>, default: '' },
+    /** uni-app 原生开放能力类型。 */ openType: { type: String, default: '' },
+    /** 原生表单行为类型。 */ formType: { type: String as PropType<ButtonFormType>, default: '' },
+    /** 打开 App 时传递的参数。 */ appParameter: { type: String, default: '' },
+    /** 是否阻止祖先节点出现点击态。 */ hoverStopPropagation: { type: Boolean, default: false },
+    /** 用户信息语言。 */ lang: { type: String, default: 'en' },
+    /** 客服会话来源。 */ sessionFrom: { type: String, default: '' },
+    /** 客服消息卡片标题。 */ sendMessageTitle: { type: String, default: '' },
+    /** 客服消息卡片路径。 */ sendMessagePath: { type: String, default: '' },
+    /** 客服消息卡片图片。 */ sendMessageImg: { type: String, default: '' },
+    /** 是否显示客服消息卡片。 */ showMessageCard: { type: Boolean, default: false },
+    /** 按下时的背景色。 */ hoverBgColor: { type: String, default: '' },
+    /** 水波纹背景色。 */ rippleBgColor: { type: String, default: '' },
+    /** 是否开启水波纹。 */ ripple: { type: Boolean, default: false },
+    /** 自定义按下类名。 */ hoverClass: { type: String, default: '' },
+    /** 透传到 dataset 的 name。 */ dataName: { type: String, default: '' },
+    /** 点击节流间隔，单位毫秒。 */ throttleTime: { type: [String, Number] as PropType<string | number>, default: 0 },
+    /** 按住后出现点击态的时间，单位毫秒。 */ hoverStartTime: {
+        type: [String, Number] as PropType<string | number>,
+        default: 20
+    },
+    /** 松开后点击态保留时间，单位毫秒。 */ hoverStayTime: {
+        type: [String, Number] as PropType<string | number>,
+        default: 150
+    }
+} as const;
+
+/** snake-button 解析后的属性。 */
+export type ButtonResolvedProps = ExtractPropTypes<typeof buttonProps>;
+
+/** snake-button 对外属性。 */
+export interface ButtonProps {
+    /** 根节点自定义样式。 */ customStyle?: string | Record<string, unknown>;
+    /** 根节点自定义类名。 */ customClass?: string;
+    /** 按钮文本。 */ text?: string;
+    /** 是否使用半像素细边框。 */ hairLine?: boolean;
+    /** 按钮主题。 */ type?: ButtonType;
+    /** 按钮尺寸。 */ size?: ButtonSize;
+    /** 按钮形状。 */ shape?: ButtonShape;
+    /** 是否为镂空按钮。 */ plain?: boolean;
+    /** 是否禁用。 */ disabled?: boolean;
+    /** 是否显示原生加载状态。 */ loading?: boolean;
+    /** 支付宝小程序授权范围。 */ scope?: ButtonScope;
+    /** uni-app 原生开放能力类型。 */ openType?: string;
+    /** 原生表单行为类型。 */ formType?: ButtonFormType;
+    /** 打开 App 时传递的参数。 */ appParameter?: string;
+    /** 是否阻止祖先节点出现点击态。 */ hoverStopPropagation?: boolean;
+    /** 用户信息语言。 */ lang?: string;
+    /** 客服会话来源。 */ sessionFrom?: string;
+    /** 客服消息卡片标题。 */ sendMessageTitle?: string;
+    /** 客服消息卡片路径。 */ sendMessagePath?: string;
+    /** 客服消息卡片图片。 */ sendMessageImg?: string;
+    /** 是否显示客服消息卡片。 */ showMessageCard?: boolean;
+    /** 按下时的背景色。 */ hoverBgColor?: string;
+    /** 水波纹背景色。 */ rippleBgColor?: string;
+    /** 是否开启水波纹。 */ ripple?: boolean;
+    /** 自定义按下类名。 */ hoverClass?: string;
+    /** 透传到 dataset 的 name。 */ dataName?: string;
+    /** 点击节流间隔，单位毫秒。 */ throttleTime?: string | number;
+    /** 按住后出现点击态的时间，单位毫秒。 */ hoverStartTime?: string | number;
+    /** 松开后点击态保留时间，单位毫秒。 */ hoverStayTime?: string | number;
+}
+
+/** snake-button 事件。 */
+export type ButtonEmits = {
+    /** 点击事件。 */ click: [event: unknown];
+    /** 用户信息回调。 */ getuserinfo: [event: unknown];
+    /** 客服消息回调。 */ contact: [event: unknown];
+    /** 手机号回调。 */ getphonenumber: [event: unknown];
+    /** 开放能力错误回调。 */ error: [event: unknown];
+    /** 打开 App 回调。 */ launchapp: [event: unknown];
+    /** 打开设置回调。 */ opensetting: [event: unknown];
+    /** 头像选择回调。 */ chooseavatar: [event: unknown];
+    /** 隐私授权回调。 */ agreeprivacyauthorization: [event: unknown];
+};

package/components/snake-button-sort/snake-button-sort.vue

@@ -0,0 +1,72 @@
+<template>
+    <view class="snake-sort" @click="toggle">
+        <text class="snake-sort__label" :style="labelStyle">{{ title }}</text>
+        <view class="snake-sort__arrows" aria-hidden="true">
+            <view class="snake-sort__arrow-up" :class="{ 'is-active': value === 'asc' }" />
+            <view class="snake-sort__arrow-down" :class="{ 'is-active': value === 'desc' }" />
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component ButtonSort
+ * @description 用于在默认、升序和降序状态之间循环切换。
+ * @see /components/button-sort
+ */
+
+import { computed, ref } from 'vue';
+import type { ButtonSortEmits, ButtonSortProps, ButtonSortValue } from './types';
+
+defineOptions({ name: 'snake-button-sort', options: { virtualHost: true, styleIsolation: 'shared' } });
+
+const props = withDefaults(defineProps<ButtonSortProps>(), { title: '', titleColor: '' });
+const emit = defineEmits<ButtonSortEmits>();
+const value = ref<ButtonSortValue>('');
+
+// 标题颜色默认走 scoped 里的主题文字色，仅当传入 titleColor 时覆盖。
+const labelStyle = computed(() => (props.titleColor ? { color: props.titleColor } : undefined));
+
+function toggle() {
+    value.value = value.value === '' ? 'asc' : value.value === 'asc' ? 'desc' : '';
+    emit('change', { value: value.value });
+}
+</script>
+
+<style scoped>
+.snake-sort {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    gap: 6rpx;
+    min-width: 0;
+    padding: 0;
+    font-size: 26rpx;
+    line-height: 1;
+    color: var(--snake-color-text, #26273a);
+}
+.snake-sort__arrows {
+    transition: transform 0.3s;
+}
+.snake-sort__arrow-up,
+.snake-sort__arrow-down {
+    width: 0;
+    height: 0;
+    border: 10rpx solid transparent;
+    border-radius: 2rpx;
+}
+.snake-sort__arrow-up {
+    border-bottom-color: var(--snake-color-text-muted, #888891);
+}
+.snake-sort__arrow-down {
+    margin-top: 4rpx;
+    border-top-color: var(--snake-color-text-muted, #888891);
+}
+.snake-sort__arrow-up.is-active {
+    border-bottom-color: var(--snake-color-primary, #06d290);
+}
+.snake-sort__arrow-down.is-active {
+    border-top-color: var(--snake-color-primary, #06d290);
+}
+</style>

package/components/snake-button-sort/types.ts

@@ -0,0 +1,22 @@
+/** ButtonSortValue 类型定义。 */
+export type ButtonSortValue = '' | 'asc' | 'desc';
+
+/** ButtonSort 组件的公开属性。 */
+export interface ButtonSortProps {
+    /** 标题文本。 */
+    title?: string;
+    /** 标题颜色。 */
+    titleColor?: string;
+}
+
+/** ButtonSortChange 事件详情。 */
+export interface ButtonSortChangeDetail {
+    /** 当前值。 */
+    value: ButtonSortValue;
+}
+
+/** ButtonSort 组件的事件契约。 */
+export type ButtonSortEmits = {
+    /** change 事件携带的参数。 */
+    change: [payload: ButtonSortChangeDetail];
+};