@puresnake/snake-ui 0.0.0-stage → 0.0.2

package/components/snake-index-list-panel/snake-index-list-panel.vue

@@ -0,0 +1,277 @@
+<template>
+    <view class="snake-index-list-panel" :class="customClass" :style="customStyle">
+        <scroll-view
+            class="snake-index-list-panel__content"
+            scroll-y
+            :scroll-top="innerScrollTop"
+            :scroll-into-view="scrollIntoView"
+            @scroll="onScroll"
+        >
+            <slot />
+        </scroll-view>
+        <view
+            v-if="indexList.length"
+            class="snake-index-list-panel__rail"
+            :style="[{ zIndex: props.zIndex }, railStyle]"
+            aria-label="索引导航"
+            @touchstart.stop.prevent="touchSelect"
+            @touchmove.stop.prevent="touchSelect"
+            @touchend.stop.prevent="touching = false"
+            @touchcancel.stop.prevent="touching = false"
+        >
+            <view
+                v-for="(item, index) in indexList"
+                :key="`${item}-${index}`"
+                class="snake-index-list-panel__key"
+                :class="{ 'is-active': activeIndex === index }"
+                :style="{ color: activeIndex === index ? activeColor : inactiveColor }"
+                @click="scrollTo(index)"
+            >
+                {{ item }}
+            </view>
+        </view>
+        <view v-if="indexList.length" class="snake-index-list-panel__bubble" :class="{ 'is-visible': touching }">
+            {{ activeIndex >= 0 ? indexList[activeIndex] : '' }}
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component IndexListPanel
+ * @description 用于弹窗和定高区域的索引列表，自身管理内部 scroll-view，不依赖页面滚动位置。
+ * @see /components/index-list-panel
+ */
+
+import { getCurrentInstance, nextTick, onMounted, provide, ref, toRef, watch, type CSSProperties } from 'vue';
+import zIndex from '../../libs/config/zIndex';
+import { addUnit } from '../../libs/function/unit';
+import { createAnchorRegistry } from '../snake-index-list/anchor-registry';
+import { indexFromTouch, offsetTopPx, resolveIndex, indexListKey } from '../snake-index-list/types';
+import type { IndexValue } from '../snake-index-list/types';
+import type { IndexListPanelEmits, IndexListPanelProps } from './types';
+
+defineOptions({ name: 'IndexListPanel', options: { virtualHost: true, styleIsolation: 'shared' } });
+
+const props = withDefaults(defineProps<IndexListPanelProps>(), {
+    indexList: () => [],
+    scrollTop: 0,
+    zIndex: zIndex.indexListSticky,
+    sticky: true,
+    offsetTop: 0,
+    activeColor: 'var(--snake-color-primary, #06D290)',
+    inactiveColor: 'var(--snake-color-text-muted, #909399)',
+    railStyle: '',
+    customClass: '',
+    customStyle: ''
+});
+const emit = defineEmits<IndexListPanelEmits>();
+const instance = getCurrentInstance();
+const activeIndex = ref(props.indexList.length ? 0 : -1);
+const scrollIntoView = ref('');
+// Keep the command value separate from the position reported by scroll-view.
+// Binding the live scroll position back to `scroll-top` makes every scroll event
+// trigger another native scroll/layout pass, which is especially noticeable on
+// long lists and while dragging the index rail.
+const innerScrollTop = ref(Number(props.scrollTop) || 0);
+const currentScrollTop = ref(Number(props.scrollTop) || 0);
+const railTop = ref(0);
+const railHeight = ref(0);
+const anchorOffsets = ref<number[]>([]);
+// 锚点位置由锚点组件自测回报（微信端父级查询跨不过自定义组件边界）。
+const registry = createAnchorRegistry();
+const touching = ref(false);
+let updating = false;
+let scrollIntoViewTimer: ReturnType<typeof setTimeout> | undefined;
+const anchorId = (value: IndexValue) => `snake-index-panel-anchor-${String(value).replace(/[^a-zA-Z0-9_-]/g, '-')}`;
+
+function setActive(index: number, selected = false) {
+    if (!props.indexList.length || index < 0 || index >= props.indexList.length) return;
+    if (index !== activeIndex.value) {
+        activeIndex.value = index;
+        emit('change', { index, value: props.indexList[index] });
+    }
+    if (selected) emit('select', props.indexList[index]);
+}
+
+function scrollTo(indexOrValue: number | IndexValue) {
+    const index = resolveIndex(indexOrValue, props.indexList);
+    if (index < 0) return;
+    setActive(index, true);
+    const offset = anchorOffsets.value[index];
+    if (index < anchorOffsets.value.length && Number.isFinite(offset)) {
+        const nextScrollTop = Math.max(0, offset);
+        currentScrollTop.value = nextScrollTop;
+        innerScrollTop.value = nextScrollTop;
+        scrollIntoView.value = '';
+        if (scrollIntoViewTimer) clearTimeout(scrollIntoViewTimer);
+        return;
+    }
+    scrollIntoView.value = '';
+    if (scrollIntoViewTimer) clearTimeout(scrollIntoViewTimer);
+    scrollIntoViewTimer = setTimeout(() => (scrollIntoView.value = anchorId(props.indexList[index])), 0);
+}
+
+function touchSelect(event: any) {
+    touching.value = true;
+    const y = Number(event.touches?.[0]?.clientY ?? event.changedTouches?.[0]?.clientY);
+    const index = indexFromTouch(y, railTop.value, railHeight.value, props.indexList.length);
+    if (index >= 0) scrollTo(index);
+}
+
+function onScroll(event: any) {
+    currentScrollTop.value = Number(event.detail?.scrollTop) || 0;
+    if (!anchorOffsets.value.length) void update();
+    const target = currentScrollTop.value + offsetTopPx(props.offsetTop) + 1;
+    let low = 0;
+    let high = anchorOffsets.value.length - 1;
+    let index = 0;
+    while (low <= high) {
+        const middle = (low + high) >> 1;
+        if (anchorOffsets.value[middle] <= target) {
+            index = middle;
+            low = middle + 1;
+        } else {
+            high = middle - 1;
+        }
+    }
+    if (anchorOffsets.value.length) setActive(index);
+}
+
+async function update() {
+    if (typeof uni === 'undefined' || updating) return;
+    updating = true;
+    try {
+        await nextTick();
+        const contentTop = await new Promise<number>(resolve => {
+            const query = uni.createSelectorQuery().in(instance?.proxy as any);
+            query.select('.snake-index-list-panel__content').boundingClientRect();
+            query.select('.snake-index-list-panel__rail').boundingClientRect();
+            query.exec((results: any[]) => {
+                const content = results?.[0];
+                const rail = results?.[1];
+                if (rail) {
+                    railTop.value = Number(rail.top) || 0;
+                    railHeight.value = Number(rail.height) || 0;
+                }
+                resolve(content ? Number(content.top) || 0 : 0);
+            });
+        });
+        await registry.collect();
+        anchorOffsets.value = props.indexList.map(value => {
+            const rect = registry.rects.get(value);
+            // 未回报的锚点以 Infinity 占位，scrollTo 自动退回 scroll-into-view。
+            return rect ? rect.top - contentTop + currentScrollTop.value : Number.POSITIVE_INFINITY;
+        });
+        activeIndex.value = props.indexList.length ? Math.max(0, activeIndex.value) : -1;
+    } finally {
+        updating = false;
+    }
+}
+
+function indexOfAnchor(value: IndexValue) {
+    return props.indexList.indexOf(value);
+}
+
+function anchorStyle(value: IndexValue): CSSProperties {
+    const index = indexOfAnchor(value);
+    return {
+        color: index === activeIndex.value ? props.activeColor : undefined
+    };
+}
+
+function wrapperStyle(): CSSProperties {
+    if (!props.sticky) return {};
+    return {
+        position: 'sticky',
+        top: addUnit(props.offsetTop, 'rpx'),
+        zIndex: props.zIndex
+    };
+}
+
+provide(indexListKey, {
+    activeIndex,
+    sticky: toRef(props, 'sticky'),
+    offsetTop: toRef(props, 'offsetTop'),
+    zIndex: toRef(props, 'zIndex'),
+    anchorId,
+    anchorStyle,
+    wrapperStyle,
+    isActive: value => indexOfAnchor(value) === activeIndex.value,
+    measureToken: registry.measureToken,
+    registerAnchor: registry.registerAnchor,
+    unregisterAnchor: registry.unregisterAnchor,
+    reportAnchor: registry.reportAnchor
+});
+
+watch(
+    () => props.scrollTop,
+    value => {
+        const nextScrollTop = Number(value) || 0;
+        currentScrollTop.value = nextScrollTop;
+        innerScrollTop.value = nextScrollTop;
+    }
+);
+watch(
+    () => props.indexList,
+    () => void update(),
+    { deep: true }
+);
+onMounted(() => void update());
+defineExpose({ scrollTo, update });
+</script>
+
+<style scoped>
+.snake-index-list-panel {
+    position: relative;
+    height: 100%;
+    min-height: 400rpx;
+}
+.snake-index-list-panel__content {
+    height: 100%;
+}
+.snake-index-list-panel__rail {
+    position: absolute;
+    top: 50%;
+    right: 10rpx;
+    display: flex;
+    flex-direction: column;
+    padding: 8rpx 0;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.86);
+    transform: translateY(-50%);
+    user-select: none;
+}
+.snake-index-list-panel__key {
+    display: flex;
+    min-width: 44rpx;
+    min-height: 34rpx;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    font-size: 20rpx;
+    line-height: 34rpx;
+}
+.snake-index-list-panel__key.is-active {
+    font-weight: 700;
+    background: var(--snake-color-primary-light, rgba(6, 210, 144, 0.1));
+}
+.snake-index-list-panel__bubble {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: none;
+    width: 96rpx;
+    height: 96rpx;
+    align-items: center;
+    justify-content: center;
+    border-radius: 16rpx;
+    color: #fff;
+    font-size: 42rpx;
+    background: rgba(0, 0, 0, 0.58);
+    transform: translate(-50%, -50%);
+}
+.snake-index-list-panel__bubble.is-visible {
+    display: flex;
+}
+</style>

package/components/snake-index-list-panel/types.ts

@@ -0,0 +1,10 @@
+import type { IndexListEmits, IndexListExpose, IndexListProps } from '../snake-index-list/types';
+
+/** IndexListPanel 组件的公开属性。 */
+export interface IndexListPanelProps extends IndexListProps {}
+
+/** IndexListPanel 组件的事件契约。 */
+export type IndexListPanelEmits = IndexListEmits;
+
+/** IndexListPanel 组件实例公开的方法。 */
+export type IndexListPanelExpose = IndexListExpose;

package/components/snake-input/snake-input.vue

@@ -0,0 +1,225 @@
+<template>
+    <view class="snake-input" :class="[customClass, rootClass]" :style="rootStyle" @click="emit('click', $event)">
+        <slot name="prefix"><snake-icon v-if="prefixIcon" :name="prefixIcon" class="snake-input__icon" /></slot>
+        <input
+            class="snake-input__native"
+            :value="innerValue"
+            :type="type === 'password' ? 'text' : type"
+            :password="actualPassword"
+            :placeholder="placeholder"
+            :placeholder-style="`color:${placeholderColor};${placeholderStyle}`"
+            :maxlength="maxlength"
+            :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"
+            :style="inputStyle"
+            @input="onInput"
+            @focus="onFocus"
+            @blur="onBlur"
+            @confirm="confirm"
+            @keyboardheightchange="emit('keyboardheightchange', $event)"
+            @compositionstart="composing = true"
+            @compositionend="onCompositionEnd"
+        />
+        <snake-icon v-if="showClear" name="close-circle-fill" class="snake-input__action" @click="clear" />
+        <snake-icon
+            v-if="showPassword && (type === 'password' || password)"
+            :name="passwordVisible ? 'eye' : 'eye-off'"
+            class="snake-input__action"
+            @click="passwordVisible = !passwordVisible"
+        />
+        <slot name="suffix"><snake-icon v-if="suffixIcon" :name="suffixIcon" class="snake-input__icon" /></slot>
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component Input
+ * @description 基于 uni-app input，支持清空、密码显示、格式化、前后插槽和 Form 校验联动。
+ * @see /components/input
+ */
+
+import { computed, inject, ref, watch } from 'vue';
+import { addUnit } from '../../libs/function/unit';
+import { formItemKey } from '../snake-form-item/types';
+import Icon from '../snake-icon/snake-icon.vue';
+import type { InputEmits, InputProps } from './types';
+
+defineOptions({ name: 'SnakeInput', options: { virtualHost: true, styleIsolation: 'shared' } });
+const props = withDefaults(defineProps<InputProps>(), {
+    modelValue: '',
+    type: 'text',
+    password: false,
+    placeholder: '请输入内容',
+    placeholderStyle: '',
+    maxlength: 140,
+    clearable: false,
+    showPassword: false,
+    prefixIcon: '',
+    suffixIcon: '',
+    border: 'none',
+    shape: 'square',
+    color: 'var(--snake-color-text,#303133)',
+    placeholderColor: 'var(--snake-color-text-light,#c0c4cc)',
+    disabled: false,
+    readonly: false,
+    disabledColor: 'var(--snake-color-disabled-bg,#f5f7fa)',
+    fontSize: 28,
+    inputAlign: 'left',
+    formatTrigger: 'input',
+    trim: false,
+    focus: false,
+    cursor: -1,
+    selectionStart: -1,
+    selectionEnd: -1,
+    confirmType: 'done',
+    confirmHold: false,
+    adjustPosition: true,
+    holdKeyboard: false,
+    cursorSpacing: 0,
+    customClass: '',
+    customStyle: ''
+});
+const emit = defineEmits<InputEmits>();
+const formItem = inject(formItemKey, null);
+const focused = ref(false);
+const composing = ref(false);
+const passwordVisible = ref(false);
+const innerValue = ref(String(props.modelValue ?? ''));
+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 actualPassword = computed(() => (props.type === 'password' || props.password) && !passwordVisible.value);
+const showClear = computed(
+    () => props.clearable && !props.disabled && !props.readonly && focused.value && innerValue.value.length > 0
+);
+const rootClass = computed(() => [
+    `snake-input--${props.border}`,
+    `snake-input--${props.shape}`,
+    `snake-input--${size.value}`,
+    { 'is-focused': focused.value, 'is-error': Boolean(formItem?.errorVisible.value), 'is-disabled': props.disabled }
+]);
+const rootStyle = computed(() => [
+    { backgroundColor: props.disabled ? props.disabledColor : undefined },
+    props.customStyle
+]);
+const inputStyle = computed(() => ({
+    color: props.color,
+    fontSize: addUnit(props.fontSize, 'rpx'),
+    textAlign: props.inputAlign
+}));
+function format(value: string, trigger: 'input' | 'blur') {
+    let next = props.trim && trigger === 'blur' ? value.trim() : value;
+    if (props.formatter && props.formatTrigger === trigger) next = props.formatter(next);
+    return next;
+}
+function commit(value: string, trigger: 'input' | 'blur') {
+    const next = format(value, trigger);
+    innerValue.value = next;
+    emit('update:modelValue', next);
+    emit('input', next);
+    return next;
+}
+function onInput(event: any) {
+    const value = String(event.detail?.value ?? '');
+    if (composing.value) {
+        innerValue.value = value;
+        return;
+    }
+    commit(value, 'input');
+    void formItem?.notify('change');
+}
+function onCompositionEnd(event: any) {
+    composing.value = false;
+    commit(String(event.detail?.value ?? innerValue.value), 'input');
+    void formItem?.notify('change');
+}
+function onFocus(event: unknown) {
+    focused.value = true;
+    emit('focus', event);
+}
+function onBlur(event: any) {
+    focused.value = false;
+    const next = commit(String(event.detail?.value ?? innerValue.value), 'blur');
+    emit('change', next);
+    emit('blur', event);
+    void formItem?.notify('blur');
+}
+function clear(event: any) {
+    event?.stopPropagation?.();
+    innerValue.value = '';
+    emit('update:modelValue', '');
+    emit('input', '');
+    emit('change', '');
+    emit('clear');
+    void formItem?.notify('change');
+}
+function confirm(event: any) {
+    emit('confirm', String(event.detail?.value ?? innerValue.value), event);
+}
+</script>
+
+<style scoped>
+.snake-input {
+    display: flex;
+    box-sizing: border-box;
+    width: 100%;
+    align-items: center;
+    gap: 12rpx;
+    transition:
+        border-color 0.2s,
+        background-color 0.2s;
+}
+.snake-input--surround {
+    min-height: 80rpx;
+    padding: 0 22rpx;
+    border: 1px solid var(--snake-color-divider, #dcdfe6);
+}
+.snake-input--bottom {
+    min-height: 76rpx;
+    border-bottom: 1px solid var(--snake-color-divider, #dcdfe6);
+}
+.snake-input--circle {
+    border-radius: 999px;
+}
+.snake-input--square {
+    border-radius: var(--snake-radius-md, 12rpx);
+}
+.snake-input--small {
+    min-height: 64rpx;
+}
+.snake-input--large {
+    min-height: 92rpx;
+}
+.snake-input.is-focused {
+    border-color: var(--snake-color-primary, #06d290);
+}
+.snake-input.is-error {
+    border-color: var(--snake-color-error, #fa3534);
+}
+.snake-input.is-disabled {
+    opacity: 0.72;
+}
+.snake-input__native {
+    flex: 1;
+    min-width: 0;
+    height: 100%;
+}
+.snake-input__icon,
+.snake-input__action {
+    flex: none;
+    color: var(--snake-color-text-muted, #909399);
+}
+</style>

package/components/snake-input/types.ts

@@ -0,0 +1,99 @@
+import type { UnitValue } from '../../libs/function/unit';
+import type { StyleValue } from '../../types/global';
+import type { FormSize } from '../snake-form/types';
+/** InputType 类型定义。 */
+export type InputType = 'text' | 'number' | 'idcard' | 'digit' | 'password' | 'nickname';
+/** InputShape 类型定义。 */
+export type InputShape = 'square' | 'circle';
+/** Input 组件的公开属性。 */
+export interface InputProps {
+    /** 双向绑定的当前值。 */
+    modelValue?: string | number;
+    /** 组件类型或展示模式。 */
+    type?: InputType;
+    /** password 配置。 */
+    password?: boolean;
+    /** 输入为空时的占位文本。 */
+    placeholder?: string;
+    /** 占位文本样式。 */
+    placeholderStyle?: string;
+    /** 允许输入的最大字符数。 */
+    maxlength?: number;
+    /** 是否显示清空操作。 */
+    clearable?: boolean;
+    /** show password 配置。 */
+    showPassword?: boolean;
+    /** prefix icon 配置。 */
+    prefixIcon?: string;
+    /** suffix icon 配置。 */
+    suffixIcon?: string;
+    /** 边框展示模式。 */
+    border?: 'none' | 'surround' | 'bottom';
+    /** 组件形状。 */
+    shape?: InputShape;
+    /** 组件尺寸。 */
+    size?: FormSize;
+    /** 内容颜色。 */
+    color?: string;
+    /** 占位文本颜色。 */
+    placeholderColor?: string;
+    /** 是否禁用交互。 */
+    disabled?: boolean;
+    /** 是否为只读状态。 */
+    readonly?: boolean;
+    /** disabled color 配置。 */
+    disabledColor?: string;
+    /** 文字尺寸，数值按 rpx 处理。 */
+    fontSize?: UnitValue;
+    /** input align 配置。 */
+    inputAlign?: 'left' | 'center' | 'right';
+    /** formatter 配置。 */
+    formatter?: (value: string) => string;
+    /** format trigger 配置。 */
+    formatTrigger?: 'input' | 'blur';
+    /** trim 配置。 */
+    trim?: boolean;
+    /** 是否自动获取焦点。 */
+    focus?: boolean;
+    /** 输入框光标位置。 */
+    cursor?: number;
+    /** 文本选择区域的起始位置。 */
+    selectionStart?: number;
+    /** 文本选择区域的结束位置。 */
+    selectionEnd?: number;
+    /** 键盘右下角确认按钮类型。 */
+    confirmType?: string;
+    /** 确认输入后是否保持键盘弹出。 */
+    confirmHold?: boolean;
+    /** 键盘弹起时是否自动调整页面位置。 */
+    adjustPosition?: boolean;
+    /** 点击页面时是否保持键盘弹出。 */
+    holdKeyboard?: boolean;
+    /** 光标与键盘的距离，单位 px。 */
+    cursorSpacing?: number;
+    /** 根节点自定义类名。 */
+    customClass?: string;
+    /** 根节点自定义样式。 */
+    customStyle?: StyleValue;
+}
+/** Input 组件的事件契约。 */
+export type InputEmits = {
+    /** 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];
+    /** clear 事件携带的参数。 */
+    clear: [];
+    /** click 事件携带的参数。 */
+    click: [event: unknown];
+    /** keyboardheightchange 事件携带的参数。 */
+    keyboardheightchange: [event: unknown];
+};