@puresnake/snake-ui 0.0.0-stage → 0.0.1

package/components/snake-textarea/types.ts

@@ -0,0 +1,79 @@
+import type { UnitValue } from '../../libs/function/unit';
+import type { StyleValue } from '../../types/global';
+import type { FormSize } from '../snake-form/types';
+/** Textarea 组件的公开属性。 */
+export interface TextareaProps {
+    /** 双向绑定的当前值。 */
+    modelValue?: string | number;
+    /** 输入为空时的占位文本。 */
+    placeholder?: string;
+    /** 占位文本样式。 */
+    placeholderStyle?: string;
+    /** 允许输入的最大字符数。 */
+    maxlength?: number;
+    /** 组件高度。 */
+    height?: UnitValue;
+    /** auto height 配置。 */
+    autoHeight?: boolean;
+    /** 是否使用固定定位。 */
+    fixed?: boolean;
+    /** 数量或徽标内容。 */
+    count?: boolean;
+    /** 是否禁用交互。 */
+    disabled?: boolean;
+    /** 是否为只读状态。 */
+    readonly?: boolean;
+    /** 组件尺寸。 */
+    size?: FormSize;
+    /** 边框展示模式。 */
+    border?: 'none' | 'surround' | 'bottom';
+    /** 内容颜色。 */
+    color?: string;
+    /** 占位文本颜色。 */
+    placeholderColor?: string;
+    /** 文字尺寸，数值按 rpx 处理。 */
+    fontSize?: UnitValue;
+    /** 是否自动获取焦点。 */
+    focus?: boolean;
+    /** 输入框光标位置。 */
+    cursor?: number;
+    /** 文本选择区域的起始位置。 */
+    selectionStart?: number;
+    /** 文本选择区域的结束位置。 */
+    selectionEnd?: number;
+    /** 键盘右下角确认按钮类型。 */
+    confirmType?: string;
+    /** 确认输入后是否保持键盘弹出。 */
+    confirmHold?: boolean;
+    /** 键盘弹起时是否自动调整页面位置。 */
+    adjustPosition?: boolean;
+    /** 点击页面时是否保持键盘弹出。 */
+    holdKeyboard?: boolean;
+    /** 光标与键盘的距离，单位 px。 */
+    cursorSpacing?: number;
+    /** show confirm bar 配置。 */
+    showConfirmBar?: boolean;
+    /** 根节点自定义类名。 */
+    customClass?: string;
+    /** 根节点自定义样式。 */
+    customStyle?: StyleValue;
+}
+/** Textarea 组件的事件契约。 */
+export type TextareaEmits = {
+    /** update:modelValue 事件携带的参数。 */
+    'update:modelValue': [value: string];
+    /** input 事件携带的参数。 */
+    input: [value: string];
+    /** change 事件携带的参数。 */
+    change: [value: string];
+    /** focus 事件携带的参数。 */
+    focus: [event: unknown];
+    /** blur 事件携带的参数。 */
+    blur: [event: unknown];
+    /** confirm 事件携带的参数。 */
+    confirm: [value: string, event: unknown];
+    /** linechange 事件携带的参数。 */
+    linechange: [event: unknown];
+    /** keyboardheightchange 事件携带的参数。 */
+    keyboardheightchange: [event: unknown];
+};

package/components/snake-toast/snake-toast.vue

@@ -0,0 +1,330 @@
+<template>
+    <view
+        class="snake-toast"
+        :class="[
+            isShow ? 'snake-show' : '',
+            'snake-type-' + (tmpConfig.type || 'default'),
+            'snake-position-' + tmpConfig.position,
+            customClass
+        ]"
+        :style="toStyle({ zIndex: uZIndex }, customStyle as string | Record<string, any>)"
+    >
+        <view class="snake-toast__icon-wrap">
+            <!-- loading 类型走独立的加载动画组件 -->
+            <snake-loading
+                v-if="tmpConfig.loading"
+                type="circular"
+                color="currentColor"
+                custom-style="margin-right: 16rpx;"
+            ></snake-loading>
+            <!-- 其它类型仍然使用图标 -->
+            <snake-icon
+                v-else-if="tmpConfig.icon && iconName"
+                :name="iconName"
+                :size="20"
+                color="currentColor"
+                custom-style="margin-right: 10rpx;"
+            ></snake-icon>
+        </view>
+        <text class="snake-toast__text">{{ tmpConfig.title }}</text>
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component Toast
+ * @description 消息提示，支持声明式 ref 调用与函数式 useToast() 调用，用于成功、错误、警告、加载等轻提示。
+ * @see /components/toast
+ */
+
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { onPageHide, onPageShow } from '@dcloudio/uni-app';
+import zIndex from '../../libs/config/zIndex';
+import { toStyle } from '../../libs/function/style';
+import { deepMerge } from '../../libs/function/deepMerge';
+import { type2icon } from '../../libs/function/type2icon';
+import { route } from '../../libs/function/route';
+import { emitter } from '../../libs/function/emitter';
+import SnakeLoading from '../snake-loading/snake-loading.vue';
+import Icon from '../snake-icon/snake-icon.vue';
+import { toastProps } from './types';
+import type { ToastExpose } from './types';
+import {
+    SNAKE_TOAST_EVENT_HIDE,
+    SNAKE_TOAST_EVENT_SHOW,
+    SNAKE_TOAST_GLOBAL_EVENT_HIDE,
+    SNAKE_TOAST_GLOBAL_EVENT_SHOW,
+    getEventWithCurrentPage,
+    type ToastPayload
+} from '../../libs/config/toast';
+
+defineOptions({ name: 'Toast', options: { virtualHost: true, styleIsolation: 'shared' } });
+
+const props = defineProps(toastProps);
+
+// 是否已经初始化事件监听
+const isInit = ref(false);
+// 是否显示 toast
+const isShow = ref(false);
+// 定时器
+let timer: ReturnType<typeof setTimeout> | null = null;
+
+// 内置配置
+const config = computed(() => ({
+    zIndex: props.zIndex,
+    type: props.type,
+    duration: props.duration,
+    icon: props.icon,
+    position: props.position,
+    callback: props.callback,
+    back: props.back,
+    isTab: props.isTab,
+    url: props.url,
+    params: props.params,
+    loading: props.loading,
+    title: ''
+}));
+
+// 合并后的临时配置
+const tmpConfig = ref<Record<string, any>>({ ...config.value });
+
+/**
+ * 只有不为空，并且 type 为 error|warning|success|info 时，才显示图标
+ */
+const iconName = computed(() => {
+    if (['error', 'warning', 'success', 'info'].indexOf(tmpConfig.value.type) >= 0 && tmpConfig.value.icon) {
+        return type2icon(tmpConfig.value.type);
+    }
+    return '';
+});
+
+// 显示时的层级
+const uZIndex = computed(() => props.zIndex || zIndex.toast);
+
+/**
+ * 显示 toast，由父组件通过 ref.show(options) 形式调用
+ * @description 当 duration 为 0 或不传时，表示不自动关闭，需要手动调用 hide/close 方法关闭
+ */
+function show(options: Record<string, any>) {
+    // 不将结果合并到 config 变量，避免多次调用 toast 时前后的配置造成混乱
+    tmpConfig.value = deepMerge(config.value, options);
+    if (timer) {
+        clearTimeout(timer);
+        timer = null;
+    }
+    isShow.value = true;
+    // duration 为 0、undefined 或小于等于 0 时，表示不自动关闭，需要手动调用 hide/close
+    if (tmpConfig.value.duration > 0) {
+        timer = setTimeout(() => {
+            isShow.value = false;
+            clearTimeout(timer!);
+            timer = null;
+            if (typeof tmpConfig.value.callback === 'function') {
+                tmpConfig.value.callback();
+            }
+            timeEnd();
+        }, tmpConfig.value.duration);
+    }
+}
+
+/**
+ * 隐藏 toast，由父组件通过 ref.hide() 形式调用
+ */
+function hide() {
+    isShow.value = false;
+    if (timer) {
+        clearTimeout(timer);
+        timer = null;
+    }
+}
+
+/**
+ * 倒计时结束后，进行跳转等操作
+ */
+function timeEnd() {
+    if (tmpConfig.value.url) {
+        const url = tmpConfig.value.url.startsWith('/') ? tmpConfig.value.url : '/' + tmpConfig.value.url;
+        if (tmpConfig.value.isTab) {
+            uni.switchTab({ url });
+        } else {
+            route({ type: 'navigateTo', url, params: tmpConfig.value.params });
+        }
+    } else if (tmpConfig.value.back) {
+        route({ type: 'back' });
+    }
+}
+
+/**
+ * 函数式调用支持：
+ * - useToast() 内部通过 emitter 派发「全局」事件，仅由 App 根部的 <snake-toast global /> 承接
+ * - 页面级 <snake-toast page /> 监听「页面级」事件
+ * - 不影响原有 ref.show()/ref.hide() 使用方式
+ */
+function onServiceShow(payload: ToastPayload) {
+    show(payload || {});
+}
+
+function onServiceHide() {
+    hide();
+}
+
+// 是否为 App 根部的“全局 toast”
+const isGlobal = computed(() => !!props.global);
+// 是否为页面级 toast
+const isPage = computed(() => !!props.page);
+
+// 显示事件
+const showEvent = computed(() =>
+    isGlobal.value
+        ? SNAKE_TOAST_GLOBAL_EVENT_SHOW
+        : isPage.value
+          ? getEventWithCurrentPage(SNAKE_TOAST_EVENT_SHOW, props.page)
+          : ''
+);
+
+// 隐藏事件
+const hideEvent = computed(() =>
+    isGlobal.value
+        ? SNAKE_TOAST_GLOBAL_EVENT_HIDE
+        : isPage.value
+          ? getEventWithCurrentPage(SNAKE_TOAST_EVENT_HIDE, props.page)
+          : ''
+);
+
+// 开始监听事件
+function startListeners() {
+    if (isInit.value) {
+        return;
+    }
+    isInit.value = true;
+    if (showEvent.value) {
+        emitter.on(showEvent.value, onServiceShow);
+    }
+    if (hideEvent.value) {
+        emitter.on(hideEvent.value, onServiceHide);
+    }
+}
+
+// 停止监听事件
+function stopListeners() {
+    if (!isInit.value) {
+        return;
+    }
+    isInit.value = false;
+    if (showEvent.value) {
+        emitter.off(showEvent.value, onServiceShow);
+    }
+    if (hideEvent.value) {
+        emitter.off(hideEvent.value, onServiceHide);
+    }
+}
+
+onPageShow(() => {
+    startListeners();
+});
+
+onPageHide(() => {
+    stopListeners();
+});
+
+onMounted(() => {
+    startListeners();
+});
+
+onBeforeUnmount(() => {
+    stopListeners();
+});
+
+defineExpose<ToastExpose>({
+    show,
+    hide,
+    close: hide
+});
+</script>
+
+<style scoped lang="scss">
+.snake-toast {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 30rpx 40rpx;
+    font-size: 28rpx;
+    text-align: center;
+    color: var(--snake-color-white, #ffffff);
+    background: var(--snake-color-text, #303133);
+    border-radius: 8rpx;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s;
+}
+
+.snake-toast.snake-show {
+    opacity: 1;
+}
+
+.snake-toast__icon-wrap {
+    display: flex;
+    align-items: center;
+}
+
+.snake-toast__text {
+    word-break: break-all;
+}
+
+.snake-position-center {
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    /* #ifndef APP-NVUE */
+    max-width: 70%;
+    /* #endif */
+}
+
+.snake-position-top {
+    left: 50%;
+    top: 20%;
+    transform: translate(-50%, -50%);
+}
+
+.snake-position-bottom {
+    left: 50%;
+    bottom: 20%;
+    transform: translate(-50%, -50%);
+}
+
+.snake-type-primary {
+    color: var(--snake-color-primary, #06d290);
+    background-color: var(--snake-color-primary-light, rgba(6, 210, 144, 0.1));
+    border: 1px solid var(--snake-color-primary-light, rgba(6, 210, 144, 0.1));
+}
+
+.snake-type-success {
+    color: var(--snake-color-success, #06d290);
+    background-color: var(--snake-color-success-light, rgba(6, 210, 144, 0.1));
+    border: 1px solid var(--snake-color-success-light, rgba(6, 210, 144, 0.1));
+}
+
+.snake-type-error {
+    color: var(--snake-color-error, #fa3534);
+    background-color: var(--snake-color-error-light, #fef0f0);
+    border: 1px solid var(--snake-color-error-light, #fef0f0);
+}
+
+.snake-type-warning {
+    color: var(--snake-color-warning, #ff9900);
+    background-color: var(--snake-color-warning-light, #fdf6ec);
+    border: 1px solid var(--snake-color-warning-light, #fdf6ec);
+}
+
+.snake-type-info {
+    color: var(--snake-color-info, #909399);
+    background-color: var(--snake-color-info-light, #f4f4f5);
+    border: 1px solid var(--snake-color-info-light, #f4f4f5);
+}
+
+.snake-type-default {
+    color: var(--snake-color-white, #ffffff);
+    background-color: var(--snake-color-text, #303133);
+}
+</style>

package/components/snake-toast/types.ts

@@ -0,0 +1,55 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import zIndex from '../../libs/config/zIndex';
+
+/** snake-toast 支持的提示类型。 */
+export type ToastType = 'success' | 'error' | 'warning' | 'info' | 'primary' | 'default' | '';
+
+/** snake-toast 支持的显示位置。 */
+export type ToastPosition = 'center' | 'top' | 'bottom';
+
+/** toastProps 运行时属性及默认值。 */
+export const toastProps = {
+    /** 根节点自定义样式。 */
+    customStyle: { type: [String, Object, Array] as PropType<string | Record<string, any> | unknown[]>, default: () => ({}) },
+    /** 根节点自定义类名。 */
+    customClass: { type: String, default: '' },
+    /** 层级 z-index。 */
+    zIndex: { type: [Number, String] as PropType<number | string>, default: zIndex.toast },
+    /** 提示类型，success/warning/error/info 等。 */
+    type: { type: String as PropType<ToastType>, default: '' },
+    /** 显示时长，单位 ms。设为 0 表示不自动关闭，需手动调用 hide/close。 */
+    duration: { type: Number, default: 2000 },
+    /** 是否显示图标。 */
+    icon: { type: Boolean, default: true },
+    /** 显示位置，center/top/bottom。 */
+    position: { type: String as PropType<ToastPosition>, default: 'center' },
+    /** 关闭时的回调函数。 */
+    callback: { type: Function as unknown as PropType<(() => void) | null>, default: null },
+    /** 是否返回上一页。 */
+    back: { type: Boolean, default: false },
+    /** 是否为 tab 页面跳转。 */
+    isTab: { type: Boolean, default: false },
+    /** 跳转的 url。 */
+    url: { type: String, default: '' },
+    /** 跳转参数对象。 */
+    params: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    /** 是否作为全局根部 toast（通常放在 App.vue 中，给 useToast() 使用）。 */
+    global: { type: Boolean, default: false },
+    /** 是否作为页面级 toast（通常放在页面中，给 useToast({ page: true }) 使用）。 */
+    page: { type: [Boolean, String] as PropType<boolean | string>, default: false },
+    /** 是否为 loading “常驻”。 */
+    loading: { type: Boolean, default: false }
+};
+
+/** Toast 组件公开属性。 */
+export type ToastProps = ExtractPropTypes<typeof toastProps>;
+
+/** Toast 组件通过 ref 暴露的方法。 */
+export type ToastExpose = {
+    /** 显示 toast。 */
+    show: (options: Record<string, any>) => void;
+    /** 隐藏 toast。 */
+    hide: () => void;
+    /** 关闭 toast（hide 的别名）。 */
+    close: () => void;
+};

package/components/snake-tooltip/position.ts

@@ -0,0 +1,33 @@
+/** Tooltip 定位计算所需的节点矩形。 */
+export interface TooltipRect {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+
+/** 箭头左侧或顶部相对提示层的像素偏移。 */
+export interface TooltipArrowPosition {
+    x?: number;
+    y?: number;
+}
+
+/**
+ * 将箭头对准触发元素中心，并限制在提示层边缘以内。
+ * 面板本身用 CSS 相对触发元素定位，内容尺寸变化时会自动重新布局。
+ */
+export function getTooltipArrowPosition(
+    placement: string,
+    target: TooltipRect,
+    panel: TooltipRect,
+    arrowSize: number
+): TooltipArrowPosition {
+    const vertical = placement.startsWith('top') || placement.startsWith('bottom');
+    const panelSize = vertical ? panel.width : panel.height;
+    const targetCenter = vertical ? target.left + target.width / 2 : target.top + target.height / 2;
+    const panelStart = vertical ? panel.left : panel.top;
+    const inset = arrowSize;
+    const max = Math.max(inset, panelSize - arrowSize - inset);
+    const offset = Math.min(max, Math.max(inset, targetCenter - panelStart - arrowSize / 2));
+    return vertical ? { x: offset } : { y: offset };
+}