@puresnake/snake-ui 0.0.0-stage → 0.0.1

package/components/snake-icon/snake-icon.vue

@@ -0,0 +1,220 @@
+<template>
+    <view
+        :style="toStyle(customStyle)"
+        class="snake-icon"
+        :class="['snake-icon--' + labelPos, customClass]"
+        @click="onClick"
+    >
+        <image v-if="isImg" class="snake-icon__img" :src="props.name" :mode="imgMode" :style="imgStyle" />
+        <text
+            v-else
+            class="snake-icon__icon"
+            :class="iconClass"
+            :style="toStyle(iconStyle)"
+            :hover-class="hoverClass"
+            @touchstart="onTouchstart"
+        >
+            <text
+                v-if="showDecimalIcon"
+                class="snake-icon__decimal"
+                :class="decimalIconClass"
+                :style="toStyle(decimalIconStyle)"
+                :hover-class="hoverClass"
+            />
+        </text>
+        <text v-if="label !== ''" class="snake-icon__label" :style="labelStyle">
+            {{ label }}
+        </text>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'snake-icon',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+/**
+ * @component Icon
+ * @description 支持字体图标、图片图标、标签和百分比裁切效果的图标组件。
+ * @see /components/icon
+ */
+import { computed } from 'vue';
+import { addUnit } from '../../libs/function/unit';
+import { toStyle } from '../../libs/function/style';
+import { IconProps } from './types';
+
+const emit = defineEmits<{
+    (event: 'click', index: string | number | unknown): void;
+    (event: 'touchstart', index: string | number | unknown): void;
+}>();
+
+const props = defineProps(IconProps);
+const themeTypes = ['primary', 'success', 'error', 'warning', 'info'];
+
+const iconClass = computed(() => {
+    let classes: string[] | string = [];
+    classes.push(`${props.customPrefix}-${props.name}`);
+    classes.push(props.customPrefix === 'sicon' ? 'snake-iconfont' : props.customPrefix);
+
+    if (props.showDecimalIcon && props.inactiveColor && themeTypes.includes(props.inactiveColor)) {
+        classes.push(`snake-icon__icon--${props.inactiveColor}`);
+    } else if (props.color && themeTypes.includes(props.color)) {
+        classes.push(`snake-icon__icon--${props.color}`);
+    }
+
+    // #ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
+    classes = (classes as string[]).join(' ');
+    // #endif
+    return classes;
+});
+
+const iconStyle = computed(() => {
+    const style: Record<string, string> = {
+        fontSize: props.size === 'inherit' ? 'inherit' : addUnit(props.size, 'rpx'),
+        fontWeight: props.bold ? 'bold' : 'normal',
+        top: addUnit(props.top, 'rpx')
+    };
+
+    if (props.showDecimalIcon && props.inactiveColor && !themeTypes.includes(props.inactiveColor)) {
+        style.color = props.inactiveColor;
+    } else if (props.color && !themeTypes.includes(props.color)) {
+        style.color = props.color;
+    }
+
+    return style;
+});
+
+const isImg = computed(() => props.name.includes('/'));
+
+const imgStyle = computed(() => ({
+    width: props.width ? addUnit(props.width, 'rpx') : addUnit(props.size, 'rpx'),
+    height: props.height ? addUnit(props.height, 'rpx') : addUnit(props.size, 'rpx')
+}));
+
+const decimalIconStyle = computed(() => {
+    const style: Record<string, string> = {
+        fontSize: props.size === 'inherit' ? 'inherit' : addUnit(props.size, 'rpx'),
+        fontWeight: props.bold ? 'bold' : 'normal',
+        top: addUnit(props.top, 'rpx'),
+        width: `${props.percent}%`
+    };
+
+    if (props.color && !themeTypes.includes(props.color)) {
+        style.color = props.color;
+    }
+
+    return style;
+});
+
+const decimalIconClass = computed(() => {
+    let classes: string[] | string = [];
+    classes.push(`${props.customPrefix}-${props.name}`);
+    classes.push(props.customPrefix === 'sicon' ? 'snake-iconfont' : props.customPrefix);
+    classes.push(
+        props.color && themeTypes.includes(props.color)
+            ? `snake-icon__icon--${props.color}`
+            : 'snake-icon__icon--primary'
+    );
+
+    // #ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
+    classes = (classes as string[]).join(' ');
+    // #endif
+    return classes;
+});
+
+const labelStyle = computed(() => ({
+    color: props.labelColor,
+    fontSize: addUnit(props.labelSize, 'rpx'),
+    marginLeft: props.labelPos === 'right' ? addUnit(props.space || props.marginLeft, 'rpx') : 0,
+    marginTop: props.labelPos === 'bottom' ? addUnit(props.space || props.marginTop, 'rpx') : 0,
+    marginRight: props.labelPos === 'left' ? addUnit(props.space || props.marginRight, 'rpx') : 0,
+    marginBottom: props.labelPos === 'top' ? addUnit(props.space || props.marginBottom, 'rpx') : 0
+}));
+
+function onClick(event: unknown) {
+    emit('click', props.index || event);
+}
+
+function onTouchstart(event: unknown) {
+    emit('touchstart', props.index || event);
+}
+</script>
+
+<style scoped lang="scss">
+@import '../../iconfont.css';
+
+.snake-icon {
+    display: inline-flex;
+    align-items: center;
+
+    &--left {
+        flex-direction: row-reverse;
+        align-items: center;
+    }
+
+    &--right {
+        flex-direction: row;
+        align-items: center;
+    }
+
+    &--top {
+        flex-direction: column-reverse;
+        justify-content: center;
+    }
+
+    &--bottom {
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    &__icon {
+        position: relative;
+
+        &--primary {
+            color: var(--snake-color-primary, #06d290);
+        }
+
+        &--success {
+            color: var(--snake-color-success, #19be6b);
+        }
+
+        &--error {
+            color: var(--snake-color-error, #fa3534);
+        }
+
+        &--warning {
+            color: var(--snake-color-warning, #ff9900);
+        }
+
+        &--info {
+            color: var(--snake-color-info, #909399);
+        }
+    }
+
+    &__decimal {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: inline-block;
+        overflow: hidden;
+    }
+
+    &__img {
+        height: auto;
+        will-change: transform;
+    }
+
+    &__label {
+        line-height: 1;
+    }
+}
+</style>

package/components/snake-icon/types.ts

@@ -0,0 +1,45 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { ImageMode, StyleValue } from '../../types/global';
+
+/** 标签相对图标的显示方向。 */
+export type IconLabelPosition = 'left' | 'right' | 'top' | 'bottom';
+
+/** Icon 运行时属性。 */
+export const IconProps = {
+    customStyle: { type: [String, Object, Array] as PropType<StyleValue>, default: () => ({}) },
+    customClass: { type: String, default: '' },
+    name: { type: String, default: '' },
+    color: { type: String, default: '' },
+    size: { type: [Number, String] as PropType<string | number>, default: 'inherit' },
+    bold: { type: Boolean, default: false },
+    index: { type: [Number, String] as PropType<string | number>, default: '' },
+    hoverClass: { type: String, default: '' },
+    customPrefix: { type: String, default: 'sicon' },
+    label: { type: [String, Number] as PropType<string | number>, default: '' },
+    labelPos: { type: String as PropType<IconLabelPosition>, default: 'right' },
+    labelSize: { type: [String, Number] as PropType<string | number>, default: '28' },
+    labelColor: { type: String, default: 'var(--snake-color-text-secondary, #606266)' },
+    marginLeft: { type: [String, Number] as PropType<string | number>, default: '6' },
+    marginTop: { type: [String, Number] as PropType<string | number>, default: '6' },
+    marginRight: { type: [String, Number] as PropType<string | number>, default: '6' },
+    marginBottom: { type: [String, Number] as PropType<string | number>, default: '6' },
+    space: { type: [String, Number] as PropType<string | number>, default: '' },
+    imgMode: { type: String as PropType<ImageMode>, default: 'widthFix' },
+    width: { type: [String, Number] as PropType<string | number>, default: '' },
+    height: { type: [String, Number] as PropType<string | number>, default: '' },
+    top: { type: [String, Number] as PropType<string | number>, default: 0 },
+    showDecimalIcon: { type: Boolean, default: false },
+    inactiveColor: { type: String, default: 'var(--snake-color-divider, #e4e7ed)' },
+    percent: { type: [Number, String] as PropType<string | number>, default: '50' }
+};
+
+/** Icon 组件的公开属性类型。 */
+export type IconProps = ExtractPropTypes<typeof IconProps>;
+
+/** Icon 组件的公开事件。 */
+export type IconEmits = {
+    /** 点击图标时返回 index，未设置时返回原始事件。 */
+    (event: 'click', index: string | number | unknown): void;
+    /** 触摸图标时返回 index，未设置时返回原始事件。 */
+    (event: 'touchstart', index: string | number | unknown): void;
+};

package/components/snake-image/snake-image.vue

@@ -0,0 +1,230 @@
+<template>
+    <view class="snake-image" :class="customClass" :style="rootStyle" :aria-label="alt || undefined" @click="click">
+        <image
+            v-if="displaySrc"
+            :key="imageKey"
+            class="snake-image__image"
+            :src="displaySrc"
+            :alt="alt"
+            :mode="mode"
+            :show-menu-by-longpress="showMenuByLongpress"
+            :webp="webp"
+            :style="imageStyle"
+            @load="onLoad"
+            @error="onError"
+        />
+        <view v-if="isLoading && showLoading" class="snake-image__status" :style="statusStyle">
+            <slot name="loading">
+                <image v-if="loadingImg" class="snake-image__status-image" :src="loadingImg" mode="aspectFit" />
+                <snake-icon v-else-if="loadingIcon" :name="loadingIcon" />
+                <snake-loading v-else size="20" />
+            </slot>
+        </view>
+        <view
+            v-else-if="status === 'error' && showError"
+            class="snake-image__status snake-image__status--error"
+            :style="statusStyle"
+        >
+            <slot name="error">
+                <image v-if="errorImg" class="snake-image__status-image" :src="errorImg" mode="aspectFit" />
+                <template v-else>
+                    <snake-icon :name="errorIcon" size="22" />
+                    <text class="snake-image__error-text">{{ errorText }}</text>
+                </template>
+            </slot>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component Image
+ * @description 封装 uni-app `image`，提供加载、失败、淡入、圆角、圆形、WebP、长按菜单和图片预览能力。`src` 变化时会自动重置状态。
+ * @see /components/image
+ */
+
+import { computed, getCurrentInstance, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { addUnit } from '../../libs/function/unit';
+import { translate } from '../../locale';
+import type { ImageEmits, ImageExpose, ImageProps } from './types';
+
+defineOptions({ name: 'SnakeImage', options: { virtualHost: true, styleIsolation: 'shared' } });
+
+const props = withDefaults(defineProps<ImageProps>(), {
+    src: '',
+    alt: '',
+    mode: 'scaleToFill',
+    width: '100%',
+    height: 'auto',
+    shape: 'square',
+    radius: 0,
+    lazyLoad: false,
+    lazyThreshold: 100,
+    showMenuByLongpress: false,
+    webp: false,
+    fade: true,
+    duration: 300,
+    showLoading: true,
+    loadingIcon: '',
+    loadingImg: '',
+    showError: true,
+    errorIcon: 'image',
+    errorImg: '',
+    preview: false,
+    customClass: '',
+    customStyle: ''
+});
+const emit = defineEmits<ImageEmits>();
+type ImageStatus = 'idle' | 'loading' | 'success' | 'error';
+
+const status = ref<ImageStatus>(props.src ? (props.lazyLoad ? 'idle' : 'loading') : 'error');
+const shouldLoad = ref(!props.lazyLoad && Boolean(props.src));
+const imageKey = ref(0);
+const instance = getCurrentInstance();
+let observer: ReturnType<typeof uni.createIntersectionObserver> | undefined;
+let mounted = false;
+
+const isLoading = computed(() => status.value === 'idle' || status.value === 'loading');
+const displaySrc = computed(() => (shouldLoad.value ? props.src : ''));
+const previewUrls = computed(() => (props.previewUrls?.length ? props.previewUrls : [props.src]));
+const autoHeight = computed(() => props.height === 'auto' || props.height == null);
+const errorText = computed(() => translate('image.error'));
+const rootStyle = computed(() => [
+    {
+        width: addUnit(props.width),
+        height: autoHeight.value ? 'auto' : addUnit(props.height),
+        borderRadius: props.shape === 'circle' ? '50%' : addUnit(props.radius),
+        backgroundColor: props.bgColor
+    },
+    props.customStyle
+]);
+const imageStyle = computed(() => ({
+    height: autoHeight.value ? 'auto' : '100%',
+    opacity: status.value === 'success' ? 1 : 0,
+    transitionDuration: props.fade ? `${props.duration}ms` : '0ms'
+}));
+const statusStyle = computed(() => (autoHeight.value ? undefined : { minHeight: '0' }));
+
+function disconnectObserver() {
+    observer?.disconnect();
+    observer = undefined;
+}
+
+function startLoading() {
+    if (!props.src) {
+        status.value = 'error';
+        return;
+    }
+    shouldLoad.value = true;
+    status.value = 'loading';
+    disconnectObserver();
+}
+
+function observeViewport() {
+    if (!props.lazyLoad || !props.src || !mounted || typeof uni === 'undefined' || !uni.createIntersectionObserver) {
+        startLoading();
+        return;
+    }
+    try {
+        observer = uni.createIntersectionObserver(instance?.proxy as any, { thresholds: [0, 0.01] });
+        observer
+            .relativeToViewport({ top: props.lazyThreshold, bottom: props.lazyThreshold })
+            .observe('.snake-image', result => {
+                if (result?.intersectionRatio > 0) startLoading();
+            });
+    } catch {
+        startLoading();
+    }
+}
+
+function resetLoadState() {
+    disconnectObserver();
+    imageKey.value += 1;
+    if (!props.src) {
+        shouldLoad.value = false;
+        status.value = 'error';
+        return;
+    }
+    if (!props.lazyLoad) {
+        startLoading();
+        return;
+    }
+    shouldLoad.value = false;
+    status.value = 'idle';
+    observeViewport();
+}
+
+function onLoad(event: unknown) {
+    status.value = 'success';
+    emit('load', event);
+}
+function onError(event: unknown) {
+    status.value = 'error';
+    emit('error', event);
+}
+/** 供业务在失败重试或鉴权地址刷新后重新发起当前资源请求。 */
+function reload() {
+    resetLoadState();
+}
+function click(event: unknown) {
+    emit('click', event);
+    if (
+        props.preview &&
+        status.value === 'success' &&
+        props.src &&
+        typeof uni !== 'undefined' &&
+        typeof uni.previewImage === 'function'
+    ) {
+        const urls = previewUrls.value;
+        uni.previewImage({ current: urls.includes(props.src) ? props.src : urls[0], urls });
+    }
+}
+
+watch([() => props.src, () => props.lazyLoad, () => props.lazyThreshold], resetLoadState);
+onMounted(() => {
+    mounted = true;
+    resetLoadState();
+});
+onBeforeUnmount(disconnectObserver);
+
+defineExpose<ImageExpose>({ reload });
+</script>
+
+<style lang="scss" scoped>
+.snake-image {
+    position: relative;
+    display: block;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+.snake-image__image {
+    display: block;
+    width: 100%;
+    transition-property: opacity;
+}
+.snake-image__status {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 120rpx;
+    color: var(--snake-image-status-color, var(--snake-color-text-muted, #909399));
+    background-color: var(--snake-image-status-bg, transparent);
+}
+.snake-image__status--error {
+    flex-direction: column;
+    font-size: 24rpx;
+    color: var(--snake-image-error-color, var(--snake-color-text-muted, #909399));
+}
+.snake-image__status-image {
+    width: 100%;
+    height: 100%;
+}
+.snake-image__error-text {
+    margin-top: 10rpx;
+}
+</style>

package/components/snake-image/types.ts

@@ -0,0 +1,70 @@
+import type { UnitValue } from '../../libs/function/unit';
+import type { ImageMode, StyleValue } from '../../types/global';
+
+/** Image 组件的公开属性。 */
+export interface ImageProps {
+    /** 资源地址。 */
+    src?: string;
+    /** 图片替代文本。 */
+    alt?: string;
+    /** 组件展示模式。 */
+    mode?: ImageMode;
+    /** 组件宽度。 */
+    width?: UnitValue;
+    /** 组件高度。 */
+    height?: UnitValue | 'auto';
+    /** 组件形状。 */
+    shape?: 'square' | 'circle';
+    /** 圆角尺寸。 */
+    radius?: UnitValue;
+    /** 是否开启视口懒加载；进入预加载范围后才设置真实图片地址。 */
+    lazyLoad?: boolean;
+    /** 视口懒加载的预加载距离。 */
+    lazyThreshold?: number;
+    /** show menu by longpress 配置。 */
+    showMenuByLongpress?: boolean;
+    /** webp 配置。 */
+    webp?: boolean;
+    /** fade 配置。 */
+    fade?: boolean;
+    /** 动画持续时间。 */
+    duration?: number;
+    /** 背景颜色。 */
+    bgColor?: string;
+    /** show loading 配置。 */
+    showLoading?: boolean;
+    /** loading icon 配置。 */
+    loadingIcon?: string;
+    /** 加载中显示的图片地址。 */
+    loadingImg?: string;
+    /** show error 配置。 */
+    showError?: boolean;
+    /** error icon 配置。 */
+    errorIcon?: string;
+    /** 加载失败显示的图片地址。 */
+    errorImg?: string;
+    /** preview 配置。 */
+    preview?: boolean;
+    /** preview urls 配置。 */
+    previewUrls?: string[];
+    /** 根节点自定义类名。 */
+    customClass?: string;
+    /** 根节点自定义样式。 */
+    customStyle?: StyleValue;
+}
+
+/** Image 组件的事件契约。 */
+export type ImageEmits = {
+    /** load 事件携带的参数。 */
+    load: [event: unknown];
+    /** error 事件携带的参数。 */
+    error: [event: unknown];
+    /** click 事件携带的参数。 */
+    click: [event: unknown];
+};
+
+/** Image 组件通过模板 ref 暴露的实例方法。 */
+export interface ImageExpose {
+    /** 按当前资源和懒加载策略重新请求图片。 */
+    reload: () => void;
+}

package/components/snake-images/snake-images.vue

@@ -0,0 +1,80 @@
+<template>
+    <view class="images">
+        <view
+            class="images-wrap"
+            :style="{
+                padding: addUnit(imgsData.paddingLR, 'rpx')
+            }"
+            :role="imgsData.url ? 'link' : 'img'"
+            :tabindex="imgsData.url ? 0 : -1"
+            :aria-label="imgsData.alt || '查看图片链接'"
+            @click="open"
+            @keydown.enter.prevent="open"
+        >
+            <image
+                class="image"
+                :src="imgsData.src"
+                :style="{ height: !imgsData.height ? '100%' : addUnit(imgsData.height, 'rpx') }"
+                :aria-label="imgsData.alt || undefined"
+                :mode="imgMode"
+            ></image>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component Images
+ * @description 根据当前运行平台选择图片配置，并支持点击跳转。
+ */
+
+import { computed } from 'vue';
+import { addUnit } from '../../libs/function/unit';
+import { navTo } from '../../libs/function/route';
+import type { ImagesProps } from './types';
+
+defineOptions({ name: 'Images', options: { virtualHost: true, styleIsolation: 'shared' } });
+const props = withDefaults(defineProps<ImagesProps>(), { datas: () => ({}) });
+const platform = computed(() => {
+    let value = 'h5';
+    // #ifdef APP-PLUS
+    value = 'app';
+    // #endif
+
+    // #ifdef MP-WEIXIN
+    value = 'wxma';
+    // #endif
+
+    // #ifdef MP-ALIPAY
+    value = 'alima';
+    // #endif
+
+    return value;
+});
+const imgsData = computed(() => {
+    const options = Array.isArray(props.datas.platformOptions) ? props.datas.platformOptions : [];
+    const selected = options.find(item => item.value === platform.value)?.imgs;
+    return (selected?.src ? selected : options[0]?.imgs) || {};
+});
+const imgMode = computed(() => (!imgsData.value.height ? 'widthFix' : 'scaleToFill'));
+function open() {
+    if (imgsData.value.url) navTo(imgsData.value.url);
+}
+</script>
+
+<style lang="scss" scoped>
+.images {
+    width: 100%;
+    height: 100%;
+}
+.images-warp {
+    box-sizing: border-box;
+    width: 100vw;
+    height: auto;
+}
+.image {
+    display: flex;
+    width: 100%;
+    height: 100%;
+}
+</style>

package/components/snake-images/types.ts

@@ -0,0 +1,5 @@
+/** Images 组件的公开属性。 */
+export interface ImagesProps<Data extends Record<string, any> = Record<string, any>> {
+    /** CMS 装修组件配置数据。 */
+    datas?: Data;
+}