@puresnake/snake-ui 0.0.0-stage → 0.0.2

package/components/snake-list-switching/types.ts

@@ -0,0 +1,11 @@
+/** ListSwitching 组件的公开属性。 */
+export interface ListSwitchingProps<Data extends Record<string, any> = Record<string, any>> {
+    /** CMS 装修组件配置数据。 */
+    datas?: Data;
+}
+
+/** ListSwitching 组件的事件契约。 */
+export type ListSwitchingEmits<Item extends Record<string, any> = Record<string, any>> = {
+    /** item-click 事件携带的参数。 */
+    'item-click': [item: Item];
+};

package/components/snake-loading/snake-loading.vue

@@ -0,0 +1,241 @@
+<template>
+    <view v-if="show" class="snake-loading" :class="[`snake-loading--${direction}`, customClass]" :style="rootStyle">
+        <view class="snake-loading__spinner" :class="`snake-loading__spinner--${type}`" :style="spinnerStyle">
+            <view v-if="type === 'circular'" class="snake-loading__spinner-wrapper" />
+            <view v-else-if="type === 'spinner'" class="snake-loading__spinner-wrapper">
+                <view v-for="index in spinnerDots" :key="index" class="snake-loading__spinner-dot" />
+            </view>
+            <view v-else-if="type === 'dots'" class="snake-loading__spinner-wrapper">
+                <view v-for="index in 3" :key="index" class="snake-loading__spinner-dot" />
+            </view>
+            <view v-else class="snake-loading__spinner-wrapper">
+                <view v-for="index in 4" :key="index" class="snake-loading__wave-bar"><view /></view>
+            </view>
+        </view>
+        <view v-if="$slots.default || text" class="snake-loading__text" :style="textStyle">
+            <slot>{{ text }}</slot>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component Loading
+ * @description Renders a reusable loading indicator for feedback states.
+ * @see /components/loading
+ */
+import { computed, type CSSProperties } from 'vue';
+import { addUnit } from '../../libs/function/unit';
+import type { LoadingProps } from './types';
+
+defineOptions({ name: 'SnakeLoading', options: { virtualHost: true, styleIsolation: 'shared' } });
+
+const props = withDefaults(defineProps<LoadingProps>(), {
+    show: true,
+    type: 'circular',
+    color: 'var(--snake-color-primary, #06D290)',
+    size: 34,
+    text: '',
+    textColor: 'var(--snake-color-text-muted, #909399)',
+    textSize: 14,
+    direction: 'vertical',
+    inheritColor: false,
+    duration: 800,
+    customClass: '',
+    customStyle: ''
+});
+
+const spinnerDots = Array.from({ length: 12 }, (_, index) => index + 1);
+const rootStyle = computed(() => [
+    { color: props.inheritColor ? 'inherit' : props.color } as CSSProperties,
+    props.customStyle
+]);
+const spinnerStyle = computed(() => ({
+    width: addUnit(props.size),
+    height: addUnit(props.size),
+    '--snake-loading-duration': `${props.duration}ms`
+}));
+const textStyle = computed(() => ({ color: props.textColor, fontSize: addUnit(props.textSize) }));
+</script>
+
+<style scoped>
+.snake-loading {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+}
+.snake-loading--horizontal {
+    flex-direction: row;
+}
+.snake-loading--vertical {
+    flex-direction: column;
+}
+.snake-loading__spinner {
+    position: relative;
+    box-sizing: border-box;
+    flex: none;
+    animation: snake-loading-rotate var(--snake-loading-duration) linear infinite;
+}
+.snake-loading__spinner-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+.snake-loading__spinner--circular .snake-loading__spinner-wrapper {
+    border-radius: 50%;
+    background: conic-gradient(transparent 0deg 90deg, currentColor 330deg 360deg);
+    -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 15%), #000 calc(100% - 15%));
+    mask: radial-gradient(closest-side, transparent calc(100% - 15%), #000 calc(100% - 15%));
+}
+.snake-loading__spinner--spinner {
+    animation-timing-function: steps(12);
+}
+.snake-loading__spinner--spinner .snake-loading__spinner-dot {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transform: rotate(calc((var(--index) - 1) * 30deg));
+}
+.snake-loading__spinner--spinner .snake-loading__spinner-dot::before {
+    display: block;
+    width: 10%;
+    height: 25%;
+    margin: 0 auto;
+    border-radius: 999px;
+    background: currentColor;
+    content: '';
+}
+.snake-loading__spinner--spinner .snake-loading__spinner-dot:nth-child(1) {
+    --index: 1;
+    opacity: 1;
+}
+.snake-loading__spinner--spinner .snake-loading__spinner-dot:nth-child(2) {
+    --index: 2;
+    opacity: 0.94;
+}
+.snake-loading__spinner--spinner .snake-loading__spinner-dot:nth-child(3) {
+    --index: 3;
+    opacity: 0.88;
+}
+.snake-loading__spinner--spinner .snake-loading__spinner-dot:nth-child(4) {
+    --index: 4;
+    opacity: 0.81;
+}
+.snake-loading__spinner--spinner .snake-loading__spinner-dot:nth-child(5) {
+    --index: 5;
+    opacity: 0.75;
+}
+.snake-loading__spinner--spinner .snake-loading__spinner-dot:nth-child(6) {
+    --index: 6;
+    opacity: 0.69;
+}
+.snake-loading__spinner--spinner .snake-loading__spinner-dot:nth-child(7) {
+    --index: 7;
+    opacity: 0.63;
+}
+.snake-loading__spinner--spinner .snake-loading__spinner-dot:nth-child(8) {
+    --index: 8;
+    opacity: 0.56;
+}
+.snake-loading__spinner--spinner .snake-loading__spinner-dot:nth-child(9) {
+    --index: 9;
+    opacity: 0.5;
+}
+.snake-loading__spinner--spinner .snake-loading__spinner-dot:nth-child(10) {
+    --index: 10;
+    opacity: 0.44;
+}
+.snake-loading__spinner--spinner .snake-loading__spinner-dot:nth-child(11) {
+    --index: 11;
+    opacity: 0.38;
+}
+.snake-loading__spinner--spinner .snake-loading__spinner-dot:nth-child(12) {
+    --index: 12;
+    opacity: 0.31;
+}
+.snake-loading__spinner--dots {
+    animation: none;
+}
+.snake-loading__spinner--dots .snake-loading__spinner-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.snake-loading__spinner--dots .snake-loading__spinner-dot {
+    width: 20%;
+    height: 20%;
+    border-radius: 50%;
+    background: currentColor;
+    animation: snake-loading-dot var(--snake-loading-duration) linear infinite both;
+}
+.snake-loading__spinner--dots .snake-loading__spinner-dot:nth-child(2) {
+    animation-delay: calc(var(--snake-loading-duration) / 3);
+}
+.snake-loading__spinner--dots .snake-loading__spinner-dot:nth-child(3) {
+    animation-delay: calc(var(--snake-loading-duration) * 2 / 3);
+}
+.snake-loading__spinner--wave {
+    animation: none;
+}
+.snake-loading__spinner--wave .snake-loading__spinner-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6.25%;
+}
+.snake-loading__wave-bar {
+    display: flex;
+    align-items: center;
+    width: 12.5%;
+    height: 83.33%;
+}
+.snake-loading__wave-bar > view {
+    width: 100%;
+    border-radius: 999px;
+    background: currentColor;
+    animation: snake-loading-wave var(--snake-loading-duration) ease-in-out infinite alternate;
+}
+.snake-loading__wave-bar:nth-child(2) > view {
+    animation-delay: calc(var(--snake-loading-duration) / -4);
+}
+.snake-loading__wave-bar:nth-child(3) > view {
+    animation-delay: calc(var(--snake-loading-duration) / -2);
+}
+.snake-loading__wave-bar:nth-child(4) > view {
+    animation-delay: calc(var(--snake-loading-duration) * -3 / 4);
+}
+.snake-loading__text {
+    line-height: 1.4;
+}
+.snake-loading--horizontal .snake-loading__text {
+    margin-left: 12rpx;
+}
+.snake-loading--vertical .snake-loading__text {
+    margin-top: 12rpx;
+}
+@keyframes snake-loading-rotate {
+    to {
+        transform: rotate(360deg);
+    }
+}
+@keyframes snake-loading-dot {
+    0%,
+    100% {
+        opacity: 0.15;
+    }
+    33% {
+        opacity: 1;
+    }
+}
+@keyframes snake-loading-wave {
+    from {
+        height: 20%;
+    }
+    to {
+        height: 100%;
+    }
+}
+</style>

package/components/snake-loading/types.ts

@@ -0,0 +1,34 @@
+import type { StyleValue } from '../../types/global';
+
+/** Available loading animations. */
+export type LoadingType = 'circular' | 'spinner' | 'dots' | 'wave';
+/** Relative placement of the loading text. */
+export type LoadingDirection = 'horizontal' | 'vertical';
+
+/** Public props for SnakeLoading. */
+export interface LoadingProps {
+    /** Whether the component is rendered. */
+    show?: boolean;
+    /** Loading animation type. */
+    type?: LoadingType;
+    /** Loading indicator color. */
+    color?: string;
+    /** Loading indicator size. */
+    size?: number | string;
+    /** Fallback text for the default slot. */
+    text?: string;
+    /** Text color. */
+    textColor?: string;
+    /** Text size. */
+    textSize?: number | string;
+    /** Indicator and text layout direction. */
+    direction?: LoadingDirection;
+    /** Whether to inherit the parent color. */
+    inheritColor?: boolean;
+    /** Animation duration in milliseconds. */
+    duration?: number;
+    /** Root element class name. */
+    customClass?: string;
+    /** Root element inline style. */
+    customStyle?: StyleValue;
+}

package/components/snake-loadmore/snake-loadmore.vue

@@ -0,0 +1,103 @@
+<template>
+    <view class="snake-loadmore" :class="customClass" :style="rootStyle" @click="click">
+        <SnakeLine class="snake-loadmore__line" length="50%" />
+        <view class="snake-loadmore__content">
+            <Loading
+                v-if="status === 'loading' && icon"
+                :type="iconType === 'flower' ? 'spinner' : iconType === 'circle' ? 'circular' : 'spinner'"
+                :color="iconColor"
+                size="34"
+            />
+            <text class="snake-loadmore__text">{{ label }}</text>
+        </view>
+        <SnakeLine class="snake-loadmore__line" length="50%" />
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component Loadmore
+ * @description 用于列表底部反馈分页状态。组件不直接请求数据，点击可加载状态时会派发 `loadmore`，由业务更新 `status`。
+ * @see /components/loadmore
+ */
+
+import { computed } from 'vue';
+import { addUnit } from '../../libs/function/unit';
+import { translate } from '../../locale';
+import Loading from '../snake-loading/snake-loading.vue';
+import SnakeLine from '../snake-line/snake-line.vue';
+import type { LoadmoreEmits, LoadmoreProps } from './types';
+
+defineOptions({ name: 'Loadmore', options: { virtualHost: true, styleIsolation: 'shared' } });
+const props = withDefaults(defineProps<LoadmoreProps>(), {
+    status: 'loadmore',
+    loadText: '',
+    loadingText: '',
+    nomoreText: '',
+    bgColor: 'transparent',
+    icon: true,
+    iconType: 'circle',
+    iconColor: 'var(--snake-color-text-light, #c0c4cc)',
+    isDot: false,
+    color: 'var(--snake-color-text-secondary, #606266)',
+    fontSize: 28,
+    marginTop: 0,
+    marginBottom: 0,
+    height: 'auto',
+    customClass: '',
+    customStyle: ''
+});
+const emit = defineEmits<LoadmoreEmits>();
+const labels = computed(() => (typeof props.loadText === 'object' ? props.loadText : {}));
+const label = computed(() => {
+    if (props.status === 'loading') return props.loadingText || labels.value.loading || translate('common.loading');
+    if (props.status === 'nomore')
+        return props.isDot ? '●' : props.nomoreText || labels.value.nomore || translate('common.noMore');
+    return (
+        (typeof props.loadText === 'string' ? props.loadText : labels.value.loadmore) || translate('common.loadMore')
+    );
+});
+const rootStyle = computed(() => [
+    {
+        backgroundColor: props.bgColor,
+        color: props.color,
+        fontSize: addUnit(props.fontSize, 'rpx'),
+        marginTop: addUnit(props.marginTop, 'rpx'),
+        marginBottom: addUnit(props.marginBottom, 'rpx'),
+        height: props.height === 'auto' ? 'auto' : addUnit(props.height, 'rpx')
+    },
+    props.customStyle
+]);
+function click() {
+    emit('click', props.status);
+    if (props.status === 'loadmore') emit('loadmore');
+}
+</script>
+
+<style scoped>
+.snake-loadmore {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 80rpx;
+    gap: 12rpx;
+    padding: 12rpx 24rpx;
+    line-height: 1.5;
+}
+.snake-loadmore__line {
+    min-width: 0;
+    flex: 1;
+}
+.snake-loadmore__content {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    gap: 12rpx;
+    padding: 0 12rpx;
+}
+.snake-loadmore__text {
+    color: inherit;
+    font-size: inherit;
+}
+</style>

package/components/snake-loadmore/types.ts

@@ -0,0 +1,56 @@
+import type { UnitValue } from '../../libs/function/unit';
+import type { StyleValue } from '../../types/global';
+
+/** LoadmoreStatus 类型定义。 */
+export type LoadmoreStatus = 'loadmore' | 'loading' | 'nomore';
+/** LoadmoreText 类型定义。 */
+export interface LoadmoreText {
+    /** loadmore 配置。 */
+    loadmore?: string;
+    /** 是否显示加载状态。 */
+    loading?: string;
+    /** nomore 配置。 */
+    nomore?: string;
+}
+/** Loadmore 组件的公开属性。 */
+export interface LoadmoreProps {
+    /** 当前状态。 */
+    status?: LoadmoreStatus;
+    /** load text 配置。 */
+    loadText?: string | LoadmoreText;
+    /** 加载状态下显示的文本。 */
+    loadingText?: string;
+    /** nomore text 配置。 */
+    nomoreText?: string;
+    /** 背景颜色。 */
+    bgColor?: string;
+    /** 图标名称。 */
+    icon?: boolean;
+    /** icon type 配置。 */
+    iconType?: 'circle' | 'flower' | 'spinner';
+    /** 图标颜色。 */
+    iconColor?: string;
+    /** is dot 配置。 */
+    isDot?: boolean;
+    /** 内容颜色。 */
+    color?: string;
+    /** 文字尺寸，数值按 rpx 处理。 */
+    fontSize?: UnitValue;
+    /** 组件顶部外边距。 */
+    marginTop?: UnitValue;
+    /** 组件底部外边距。 */
+    marginBottom?: UnitValue;
+    /** 组件高度；数值按 rpx 处理，默认自适应内容。 */
+    height?: UnitValue;
+    /** 根节点自定义类名。 */
+    customClass?: string;
+    /** 根节点自定义样式。 */
+    customStyle?: StyleValue;
+}
+/** Loadmore 组件的事件契约。 */
+export type LoadmoreEmits = {
+    /** loadmore 事件携带的参数。 */
+    loadmore: [];
+    /** click 事件携带的参数。 */
+    click: [status: LoadmoreStatus];
+};