@puresnake/snake-ui 0.0.0-stage → 0.0.2

package/components/snake-tabs/types.ts

@@ -0,0 +1,79 @@
+import type { CSSProperties } from 'vue';
+import type { UnitValue } from '../../libs/function/unit';
+import type { StyleValue } from '../../types/global';
+
+/** Tabs 对象数据项。 */
+export interface TabItem extends Record<string, unknown> {
+    /** 默认标签字段。 */
+    name?: string | number;
+    /** 默认徽标字段。 */
+    count?: string | number;
+    /** 是否隐藏该标签。 */
+    hidden?: boolean;
+}
+
+/** Tabs 组件的公开属性。 */
+export interface TabsProps {
+    /** 根节点自定义样式。 */
+    customStyle?: StyleValue;
+    /** 根节点自定义类名。 */
+    customClass?: string;
+    /** 是否允许横向拖动。 */
+    isScroll?: boolean;
+    /** 标签对象数组。 */
+    list?: TabItem[];
+    /** 当前激活索引。 */
+    current?: number | string;
+    /** 导航栏高度。 */
+    height?: UnitValue;
+    /** 标签字号。 */
+    fontSize?: UnitValue;
+    /** 动画时长，单位秒。 */
+    duration?: number | string;
+    /** 激活文字及滑块颜色。 */
+    activeColor?: string;
+    /** 未激活文字颜色。 */
+    inactiveColor?: string;
+    /** 滑块宽度。 */
+    barWidth?: UnitValue;
+    /** 滑块高度。 */
+    barHeight?: UnitValue;
+    /** 滚动模式标签左右内边距。 */
+    gutter?: UnitValue;
+    /** 导航栏背景色。 */
+    bgColor?: string;
+    /** 标签内容字段名。 */
+    name?: string;
+    /** 徽标内容字段名。 */
+    count?: string;
+    /** 徽标 top、right 偏移。 */
+    offset?: [number, number];
+    /** 是否显示圆点徽标。 */
+    isDot?: boolean;
+    /** 激活项是否加粗。 */
+    bold?: boolean;
+    /** 激活标签附加样式。 */
+    activeItemStyle?: CSSProperties;
+    /** 是否显示底部滑块。 */
+    showBar?: boolean;
+    /** 底部滑块附加样式。 */
+    barStyle?: CSSProperties;
+    /** 单个标签宽度。 */
+    itemWidth?: UnitValue;
+}
+
+/** Tabs 组件事件。 */
+export type TabsEmits = {
+    /** 点击非当前标签时返回新索引。 */
+    change: [index: number];
+};
+
+/** Tabs 暴露的方法。 */
+export interface TabsExpose {
+    /** 重新测量全部标签。 */
+    init: () => Promise<void>;
+    /** 执行标签点击逻辑。 */
+    clickTab: (index: number) => void;
+    /** 将当前标签居中并移动滑块。 */
+    scrollByIndex: () => void;
+}

package/components/snake-text/snake-text.vue

@@ -0,0 +1,292 @@
+<template>
+    <view
+        v-if="show"
+        class="snake-text"
+        :class="[
+            bold ? 'snake-text--bold' : '',
+            block ? 'snake-text--block' : 'snake-text--inline',
+            lines ? 'snake-text--ellipsis snake-text--block' : '',
+            `snake-text--align-${align}`,
+            customClass
+        ]"
+        :style="[textStyle, customStyle]"
+        @click="onClick"
+    >
+        <!-- 前置图标 -->
+        <view v-if="prefixIcon" class="snake-text__icon snake-text__prefix-icon">
+            <snake-icon :name="prefixIcon" :custom-style="iconStyle" />
+        </view>
+        <!-- 价格模式 -->
+        <text
+            v-if="mode === 'price'"
+            class="snake-text__price"
+            :class="[type && `snake-text__value--${type}`]"
+            :style="textValueStyle"
+        >
+            <slot>￥{{ displayValue }}</slot>
+        </text>
+        <!-- link 模式 -->
+        <snake-link
+            v-else-if="mode === 'link'"
+            :text="String(displayValue)"
+            :href="href"
+            under-line
+            :style="textValueStyle"
+        />
+        <!-- 开放能力模式 -->
+        <template v-else-if="openType">
+            <button
+                class="snake-text__button snake-text__value"
+                :class="[type && `snake-text__value--${type}`]"
+                :style="textValueStyle"
+                :open-type="openType"
+                :lang="lang"
+                :session-from="sessionFrom"
+                :send-message-title="sendMessageTitle"
+                :send-message-path="sendMessagePath"
+                :send-message-img="sendMessageImg"
+                :show-message-card="showMessageCard"
+                :app-parameter="appParameter"
+                @getuserinfo="onGetUserInfo"
+                @contact="onContact"
+                @getphonenumber="onGetPhoneNumber"
+                @error="onError"
+                @launchapp="onLaunchApp"
+                @opensetting="onOpenSetting"
+            >
+                <slot>{{ displayValue }}</slot>
+            </button>
+        </template>
+        <!-- 默认模式 -->
+        <text v-else class="snake-text__value" :class="[type && `snake-text__value--${type}`]" :style="textValueStyle">
+            <slot>{{ displayValue }}</slot>
+        </text>
+        <!-- 后缀图标 -->
+        <view v-if="suffixIcon" class="snake-text__icon snake-text__suffix-icon">
+            <snake-icon :name="suffixIcon" :custom-style="iconStyle" />
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component Text
+ * @description 文本，集成文本类常用功能：价格、手机号脱敏、姓名脱敏、日期格式化、超链接与拨打电话。
+ * @see /components/text
+ */
+
+import { computed } from 'vue';
+import { addUnit } from '../../libs/function/unit';
+import { deepMerge } from '../../libs/function/deepMerge';
+import { formatName, formatPrice } from '../../libs/function/format';
+import { toStyle } from '../../libs/function/style';
+import { timeFormat } from '../../libs/function/timeFormat';
+import { test as testSuite } from '../../libs/function/test';
+import Icon from '../snake-icon/snake-icon.vue';
+import Link from '../snake-link/snake-link.vue';
+import { textProps, type TextEmits } from './types';
+
+defineOptions({ name: 'SnakeText', options: { virtualHost: true, styleIsolation: 'shared' } });
+const props = defineProps(textProps);
+const emit = defineEmits<TextEmits>();
+
+// 是否 nvue 环境
+const isNvue = computed(() => {
+    let nvue = false;
+    // #ifdef APP-NVUE
+    nvue = true;
+    // #endif
+    return nvue;
+});
+
+// 处理显示的值
+const displayValue = computed(() => {
+    const { format, text, href, mode } = props;
+    let value: unknown = text;
+    if (typeof format === 'function') {
+        value = format(value);
+    }
+    switch (mode) {
+        case 'price':
+            if (!/^\d+(\.\d+)?$/.test(String(value))) return value;
+            value = formatPrice(value as string | number, 2);
+            break;
+        case 'phone':
+            if (format === 'encrypt') {
+                value = String(value).replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
+            }
+            break;
+        case 'name':
+            if (!testSuite.string(value)) return value;
+            if (format === 'encrypt') {
+                return formatName(String(value));
+            }
+            break;
+        case 'date':
+            if (testSuite.string(format) && !testSuite.empty(format)) {
+                return timeFormat(value as string | number, format as string);
+            }
+            return timeFormat(value as string | number, 'yyyy-mm-dd');
+        case 'link':
+            if (!testSuite.url(href)) return value;
+            break;
+    }
+    return value;
+});
+
+/** 根节点样式。 */
+const textStyle = computed(() => {
+    const style: Record<string, unknown> = {
+        margin: typeof props.margin === 'number' ? `${props.margin}px` : props.margin,
+        justifyContent: props.align === 'left' ? 'flex-start' : props.align === 'center' ? 'center' : 'flex-end'
+    };
+    return toStyle(style);
+});
+
+/** 文本值样式。 */
+const textValueStyle = computed(() => {
+    const style: Record<string, unknown> = {
+        textDecoration: props.decoration,
+        fontWeight: props.bold ? 'bold' : 'normal',
+        wordWrap: props.wordWrap,
+        fontSize: addUnit(props.size)
+    };
+    if (props.lines) {
+        if (props.lines === 1) {
+            style.display = 'block';
+            style.overflow = 'hidden';
+            style.textOverflow = 'ellipsis';
+            style.whiteSpace = 'nowrap';
+        } else {
+            style.display = '-webkit-box';
+            style['-webkit-box-orient'] = 'vertical';
+            style.WebkitLineClamp = Number(props.lines);
+            style.overflow = 'hidden';
+        }
+    }
+    if (!props.type) style.color = props.color;
+    if (isNvue.value && props.lines) style.lines = props.lines;
+    if (props.lineHeight) style.lineHeight = addUnit(props.lineHeight);
+
+    // 合并 textStyle，优先对象，其次字符串
+    if (testSuite.object(props.textStyle)) {
+        return toStyle(deepMerge(style, props.textStyle as Record<string, unknown>));
+    }
+    if (testSuite.string(props.textStyle)) {
+        return toStyle(style, props.textStyle as string);
+    }
+    return toStyle(style);
+});
+
+/** 点击事件。 */
+function onClick() {
+    // 手机号模式且开启 call 时拨打电话
+    if (props.call && props.mode === 'phone') {
+        uni.makePhoneCall({
+            phoneNumber: String(props.text)
+        });
+    }
+    emit('click');
+}
+function onGetUserInfo(event: unknown) {
+    emit('getuserinfo', (event as { detail?: unknown })?.detail);
+}
+function onContact(event: unknown) {
+    emit('contact', (event as { detail?: unknown })?.detail);
+}
+function onGetPhoneNumber(event: unknown) {
+    emit('getphonenumber', (event as { detail?: unknown })?.detail);
+}
+function onError(event: unknown) {
+    emit('error', (event as { detail?: unknown })?.detail);
+}
+function onLaunchApp(event: unknown) {
+    emit('launchapp', (event as { detail?: unknown })?.detail);
+}
+function onOpenSetting(event: unknown) {
+    emit('opensetting', (event as { detail?: unknown })?.detail);
+}
+</script>
+
+<style scoped>
+.snake-text {
+    display: flex;
+    flex: 1;
+    flex-wrap: nowrap;
+    align-items: center;
+    word-break: break-all;
+}
+.snake-text--bold {
+    font-weight: bold;
+}
+.snake-text--inline {
+    display: inline-flex;
+}
+.snake-text--inline .snake-text__value {
+    display: inline-flex;
+}
+.snake-text--inline .snake-text__icon {
+    display: inline-flex;
+}
+.snake-text--block {
+    display: flex;
+    width: 100%;
+}
+.snake-text--block .snake-text__value {
+    display: flex;
+}
+.snake-text--block .snake-text__button {
+    display: block;
+    width: 100%;
+}
+.snake-text__price {
+    font-size: 14px;
+    color: var(--snake-color-text-secondary, #606266);
+}
+.snake-text__value {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    overflow: hidden;
+    font-size: 14px;
+    color: var(--snake-color-text-secondary, #606266);
+    text-overflow: ellipsis;
+}
+.snake-text__value--primary {
+    color: var(--snake-color-primary, #06d290);
+}
+.snake-text__value--warning {
+    color: var(--snake-color-warning, #ff9900);
+}
+.snake-text__value--success {
+    color: var(--snake-color-success, #19be6b);
+}
+.snake-text__value--info {
+    color: var(--snake-color-info, #909399);
+}
+.snake-text__value--error {
+    color: var(--snake-color-error, #fa3534);
+}
+.snake-text__value--main {
+    color: var(--snake-color-text, #303133);
+}
+.snake-text__value--content {
+    color: var(--snake-color-text-secondary, #606266);
+}
+.snake-text__value--tips {
+    color: var(--snake-color-text-muted, #909399);
+}
+.snake-text__value--light {
+    color: var(--snake-color-text-light, #c0c4cc);
+}
+.snake-text__button {
+    padding: 0;
+    margin: 0;
+    background: none;
+    border: none;
+    line-height: inherit;
+}
+.snake-text__button::after {
+    border: none;
+}
+</style>

package/components/snake-text/types.ts

@@ -0,0 +1,100 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { StyleValue } from '../../types/global';
+
+/** TextMode 类型定义。 */
+export type TextMode = 'text' | 'price' | 'phone' | 'name' | 'date' | 'link';
+/** TextDecoration 类型定义。 */
+export type TextDecoration = 'none' | 'underline' | 'line-through';
+/** TextAlign 类型定义。 */
+export type TextAlign = 'left' | 'center' | 'right';
+/** TextWordWrap 类型定义。 */
+export type TextWordWrap = 'break-word' | 'normal' | 'anywhere';
+
+/** textProps 运行时属性及默认值。 */
+export const textProps = {
+    /** 根节点自定义样式。 */
+    customStyle: { type: [String, Object, Array] as PropType<StyleValue>, default: '' },
+    /** 根节点自定义类名。 */
+    customClass: { type: String, default: '' },
+    /** 主题颜色。 */
+    type: { type: String, default: '' },
+    /** 是否显示文本。 */
+    show: { type: Boolean, default: true },
+    /** 显示的值。 */
+    text: { type: [String, Number] as PropType<string | number>, default: '' },
+    /** 前置图标。 */
+    prefixIcon: { type: String, default: '' },
+    /** 后置图标。 */
+    suffixIcon: { type: String, default: '' },
+    /** 文本处理模式。 */
+    mode: { type: String as PropType<TextMode>, default: 'text' },
+    /** 链接地址，mode 为 link 时使用。 */
+    href: { type: String, default: '' },
+    /** 格式化规则，字符串或函数。 */
+    format: { type: [String, Function] as PropType<string | ((value: unknown) => unknown)>, default: '' },
+    /** mode 为 phone 时，点击文本是否拨打电话。 */
+    call: { type: Boolean, default: false },
+    /** 小程序的打开方式。 */
+    openType: { type: String, default: '' },
+    /** 是否粗体。 */
+    bold: { type: Boolean, default: false },
+    /** 是否块状显示。 */
+    block: { type: Boolean, default: false },
+    /** 显示行数，超出显示省略号。 */
+    lines: { type: [String, Number] as PropType<string | number>, default: '' },
+    /** 文本颜色。 */
+    color: { type: String, default: 'var(--snake-color-text, #303133)' },
+    /** 字体大小。 */
+    size: { type: [String, Number] as PropType<string | number>, default: 28 },
+    /** 图标样式。 */
+    iconStyle: { type: [Object, Array, String] as PropType<StyleValue>, default: () => ({ fontSize: '15px' }) },
+    /** 文字样式。 */
+    textStyle: { type: [Object, Array, String] as PropType<StyleValue>, default: () => ({}) },
+    /** 文字装饰。 */
+    decoration: { type: String as PropType<TextDecoration>, default: 'none' },
+    /** 外边距。 */
+    margin: { type: [Object, String, Number] as PropType<Record<string, unknown> | string | number>, default: 0 },
+    /** 行高。 */
+    lineHeight: { type: [String, Number] as PropType<string | number>, default: '' },
+    /** 对齐方式。 */
+    align: { type: String as PropType<TextAlign>, default: 'left' },
+    /** 换行方式。 */
+    wordWrap: { type: String as PropType<TextWordWrap>, default: 'normal' },
+    /** 语言。 */
+    lang: { type: String, default: '' },
+    /** 会话来源。 */
+    sessionFrom: { type: String, default: '' },
+    /** 会话消息卡片标题。 */
+    sendMessageTitle: { type: String, default: '' },
+    /** 会话消息卡片跳转路径。 */
+    sendMessagePath: { type: String, default: '' },
+    /** 会话消息卡片图片地址。 */
+    sendMessageImg: { type: String, default: '' },
+    /** 是否显示会话消息卡片。 */
+    showMessageCard: { type: Boolean, default: false },
+    /** 打开 App 时传递的参数。 */
+    appParameter: { type: String, default: '' },
+    /** 原生表单行为类型。 */
+    formType: { type: String, default: '' }
+} as const;
+
+/** Text 组件的公开属性。 */
+export type TextProps = ExtractPropTypes<typeof textProps>;
+
+/** Text 组件的事件契约。 */
+export type TextEmits = {
+    /** click 事件携带的参数。 */
+    click: [];
+    /** getuserinfo 事件携带的参数。 */
+    getuserinfo: [event: unknown];
+    /** contact 事件携带的参数。 */
+    contact: [event: unknown];
+    /** getphonenumber 事件携带的参数。 */
+    getphonenumber: [event: unknown];
+    /** error 事件携带的参数。 */
+    error: [event: unknown];
+    /** launchapp 事件携带的参数。 */
+    launchapp: [event: unknown];
+    /** opensetting 事件携带的参数。 */
+    opensetting: [event: unknown];
+};

package/components/snake-textarea/snake-textarea.vue

@@ -0,0 +1,171 @@
+<template>
+    <view class="snake-textarea" :class="[customClass, rootClass]" :style="rootStyle">
+        <textarea
+            class="snake-textarea__native"
+            :value="innerValue"
+            :placeholder="placeholder"
+            :placeholder-style="`color:${placeholderColor};${placeholderStyle}`"
+            :maxlength="maxlength"
+            :auto-height="autoHeight"
+            :fixed="fixed"
+            :disabled="disabled || readonly"
+            :focus="focus"
+            :cursor="cursor"
+            :selection-start="selectionStart"
+            :selection-end="selectionEnd"
+            :confirm-type="confirmType as any"
+            :confirm-hold="confirmHold"
+            :adjust-position="adjustPosition"
+            :hold-keyboard="holdKeyboard"
+            :cursor-spacing="cursorSpacing"
+            :show-confirm-bar="showConfirmBar"
+            :style="{ color, fontSize: addUnit(fontSize, 'rpx') }"
+            @input="onInput"
+            @focus="
+                focused = true;
+                emit('focus', $event);
+            "
+            @blur="onBlur"
+            @confirm="emit('confirm', String($event.detail?.value ?? innerValue), $event)"
+            @linechange="emit('linechange', $event)"
+            @keyboardheightchange="emit('keyboardheightchange', $event)"
+            @compositionstart="composing = true"
+            @compositionend="onCompositionEnd"
+        />
+        <text v-if="count && maxlength > 0" class="snake-textarea__count">{{ innerValue.length }}/{{ maxlength }}</text>
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component Textarea
+ * @description 用于多行文本输入，支持固定或自适应高度、字数统计和 Form 校验联动。
+ * @see /components/textarea
+ */
+
+import { computed, inject, ref, watch } from 'vue';
+import { addUnit } from '../../libs/function/unit';
+import { formItemKey } from '../snake-form-item/types';
+import type { TextareaEmits, TextareaProps } from './types';
+
+defineOptions({ name: 'SnakeTextarea', options: { virtualHost: true, styleIsolation: 'shared' } });
+const props = withDefaults(defineProps<TextareaProps>(), {
+    modelValue: '',
+    placeholder: '请输入内容',
+    placeholderStyle: '',
+    maxlength: 140,
+    height: 120,
+    autoHeight: false,
+    fixed: false,
+    count: false,
+    disabled: false,
+    readonly: false,
+    border: 'surround',
+    color: 'var(--snake-color-text,#303133)',
+    placeholderColor: 'var(--snake-color-text-light,#c0c4cc)',
+    fontSize: 28,
+    focus: false,
+    cursor: -1,
+    selectionStart: -1,
+    selectionEnd: -1,
+    confirmType: 'return',
+    confirmHold: false,
+    adjustPosition: true,
+    holdKeyboard: false,
+    cursorSpacing: 0,
+    showConfirmBar: true,
+    customClass: '',
+    customStyle: ''
+});
+const emit = defineEmits<TextareaEmits>();
+const formItem = inject(formItemKey, null);
+const innerValue = ref(String(props.modelValue ?? ''));
+const focused = ref(false);
+const composing = ref(false);
+watch(
+    () => props.modelValue,
+    value => {
+        const next = String(value ?? '');
+        if (next !== innerValue.value) innerValue.value = next;
+    }
+);
+const size = computed(() => props.size || formItem?.size.value || 'default');
+const rootClass = computed(() => [
+    `snake-textarea--${props.border}`,
+    `snake-textarea--${size.value}`,
+    { 'is-focused': focused.value, 'is-error': Boolean(formItem?.errorVisible.value), 'is-disabled': props.disabled }
+]);
+const rootStyle = computed(() => [
+    { height: props.autoHeight ? 'auto' : addUnit(props.height, 'rpx') },
+    props.customStyle
+]);
+function update(value: string) {
+    innerValue.value = value;
+    emit('update:modelValue', value);
+    emit('input', value);
+}
+function onInput(event: any) {
+    const value = String(event.detail?.value ?? '');
+    if (composing.value) {
+        innerValue.value = value;
+        return;
+    }
+    update(value);
+    void formItem?.notify('change');
+}
+function onCompositionEnd(event: any) {
+    composing.value = false;
+    update(String(event.detail?.value ?? innerValue.value));
+    void formItem?.notify('change');
+}
+function onBlur(event: any) {
+    focused.value = false;
+    const value = String(event.detail?.value ?? innerValue.value);
+    update(value);
+    emit('change', value);
+    emit('blur', event);
+    void formItem?.notify('blur');
+}
+</script>
+
+<style scoped>
+.snake-textarea {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 160rpx;
+    padding: 20rpx 22rpx 42rpx;
+    border-radius: var(--snake-radius-md, 12rpx);
+    transition: border-color 0.2s;
+}
+.snake-textarea--surround {
+    border: 1px solid var(--snake-color-divider, #dcdfe6);
+}
+.snake-textarea--bottom {
+    border-bottom: 1px solid var(--snake-color-divider, #dcdfe6);
+    border-radius: 0;
+}
+.snake-textarea.is-focused {
+    border-color: var(--snake-color-primary, #06d290);
+}
+.snake-textarea.is-error {
+    border-color: var(--snake-color-error, #fa3534);
+}
+.snake-textarea.is-disabled {
+    background: var(--snake-color-disabled-bg, #f5f7fa);
+    opacity: 0.72;
+}
+.snake-textarea__native {
+    width: 100%;
+    height: 100%;
+    min-height: 120rpx;
+    line-height: 1.55;
+}
+.snake-textarea__count {
+    position: absolute;
+    right: 18rpx;
+    bottom: 12rpx;
+    color: var(--snake-color-text-muted, #909399);
+    font-size: 22rpx;
+}
+</style>