@puresnake/snake-ui 0.0.0-stage → 0.0.1

package/components/snake-drop-menu-item/types.ts

@@ -0,0 +1,48 @@
+import type { UnitValue } from '../../libs/function/unit';
+import type { StyleValue } from '../../types/global';
+/** DropMenuToggleContext 类型定义。 */
+export interface DropMenuToggleContext {
+    /** resolve 配置。 */
+    resolve: (allow: boolean) => void;
+}
+/** DropMenuBeforeToggle 类型定义。 */
+export type DropMenuBeforeToggle = (context: DropMenuToggleContext) => void;
+/** DropMenu 可选项。 */
+export interface DropMenuOption {
+    /** 展示标签文本。 */
+    label: string;
+    /** 当前值。 */
+    value: unknown;
+    /** 是否禁用交互。 */
+    disabled?: boolean;
+}
+/** DropMenuItem 组件的公开属性。 */
+export interface DropMenuItemProps {
+    /** 双向绑定的当前值。 */
+    modelValue?: unknown;
+    /** 标题文本。 */
+    title?: string;
+    /** options 配置。 */
+    options?: DropMenuOption[];
+    /** 是否禁用交互。 */
+    disabled?: boolean;
+    /** 组件高度。 */
+    height?: UnitValue | 'auto';
+    /** 是否显示组件。 */
+    show?: boolean;
+    /** before toggle 配置。 */
+    beforeToggle?: DropMenuBeforeToggle;
+    /** 根节点自定义样式。 */
+    customStyle?: StyleValue;
+}
+/** DropMenuItem 组件的事件契约。 */
+export type DropMenuItemEmits = {
+    /** update:modelValue 事件携带的参数。 */
+    'update:modelValue': [value: unknown];
+    /** change 事件携带的参数。 */
+    change: [value: unknown];
+    /** open 事件携带的参数。 */
+    open: [];
+    /** close 事件携带的参数。 */
+    close: [];
+};

package/components/snake-empty/snake-empty.vue

@@ -0,0 +1,100 @@
+<template>
+    <view v-if="show" class="snake-empty" :class="customClass" :style="rootStyle">
+        <slot name="icon">
+            <image v-if="isImage" class="snake-empty__image" :src="iconName" mode="aspectFit" :style="imageStyle" />
+            <snake-icon v-else :name="iconName" :color="iconColor" :size="iconSize ?? 'inherit'" />
+        </slot>
+        <slot>
+            <text class="snake-empty__text" :style="textStyle">{{ displayText }}</text>
+        </slot>
+        <view v-if="$slots.bottom" class="snake-empty__bottom"><slot name="bottom" /></view>
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component Empty
+ * @description 用于列表、搜索结果或异常页面没有内容时提供统一反馈。内置多种语义模式，也支持图片、图标和插槽定制。
+ * @see /components/empty
+ */
+
+import { computed } from 'vue';
+import { addUnit } from '../../libs/function/unit';
+import { translate } from '../../locale';
+import Icon from '../snake-icon/snake-icon.vue';
+import type { EmptyProps } from './types';
+
+defineOptions({ name: 'Empty', options: { virtualHost: true, styleIsolation: 'shared' } });
+const props = withDefaults(defineProps<EmptyProps>(), {
+    show: true,
+    mode: 'data',
+    src: '',
+    icon: '',
+    iconColor: 'var(--snake-color-text-light, #c0c4cc)',
+    iconSize: 120,
+    text: '',
+    color: '',
+    textColor: 'var(--snake-color-text-muted, #909399)',
+    fontSize: 26,
+    marginTop: 0,
+    customClass: '',
+    customStyle: ''
+});
+const modeTexts: Record<string, string> = {
+    data: '暂无数据',
+    list: '暂无内容',
+    search: '未找到相关内容',
+    page: '页面不存在',
+    order: '暂无订单',
+    coupon: '暂无优惠券',
+    favor: '暂无收藏',
+    permission: '暂无权限',
+    history: '暂无历史记录',
+    message: '暂无消息',
+    wifi: '网络连接异常',
+    address: '暂无地址',
+    car: '购物车是空的'
+};
+const displayText = computed(() => props.text || modeTexts[props.mode] || translate('common.empty'));
+const source = computed(() => props.src || props.icon);
+const isImage = computed(() => /^(https?:|data:|\/|\.\/|\.\.\/)/i.test(source.value));
+const modeIcons: Record<string, string> = {
+    data: 'empty-data',
+    list: 'empty-list',
+    search: 'empty-search',
+    page: 'empty-page',
+    order: 'empty-order',
+    coupon: 'empty-coupon',
+    favor: 'empty-favor',
+    permission: 'empty-permission',
+    history: 'empty-history',
+    message: 'empty-message',
+    wifi: 'empty-wifi',
+    address: 'empty-address',
+    car: 'empty-car'
+};
+const iconName = computed(() => source.value || modeIcons[props.mode] || 'image');
+const rootStyle = computed(() => [{ marginTop: addUnit(props.marginTop, 'rpx') }, props.customStyle]);
+const imageStyle = computed(() => ({ width: addUnit(props.iconSize, 'rpx'), height: addUnit(props.iconSize, 'rpx') }));
+const textStyle = computed(() => ({ color: props.color || props.textColor, fontSize: addUnit(props.fontSize, 'rpx') }));
+</script>
+
+<style scoped>
+.snake-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40rpx 24rpx;
+}
+.snake-empty__image {
+    display: block;
+}
+.snake-empty__text {
+    margin-top: 20rpx;
+    line-height: 1.5;
+}
+.snake-empty__bottom {
+    margin-top: 28rpx;
+}
+</style>

package/components/snake-empty/types.ts

@@ -0,0 +1,48 @@
+import type { UnitValue } from '../../libs/function/unit';
+import type { StyleValue } from '../../types/global';
+
+/** EmptyMode 类型定义。 */
+export type EmptyMode =
+    | 'data'
+    | 'list'
+    | 'search'
+    | 'page'
+    | 'order'
+    | 'coupon'
+    | 'favor'
+    | 'permission'
+    | 'history'
+    | 'message'
+    | 'wifi'
+    | 'address'
+    | 'car';
+
+/** Empty 组件的公开属性。 */
+export interface EmptyProps {
+    /** 是否显示组件。 */
+    show?: boolean;
+    /** 组件展示模式。 */
+    mode?: EmptyMode;
+    /** 资源地址。 */
+    src?: string;
+    /** 图标名称。 */
+    icon?: string;
+    /** 图标颜色。 */
+    iconColor?: string;
+    /** 图标尺寸，数值按 rpx 处理。 */
+    iconSize?: UnitValue;
+    /** 展示文本。 */
+    text?: string;
+    /** 内容颜色。 */
+    color?: string;
+    /** 文字颜色。 */
+    textColor?: string;
+    /** 文字尺寸，数值按 rpx 处理。 */
+    fontSize?: UnitValue;
+    /** 组件顶部外边距。 */
+    marginTop?: UnitValue;
+    /** 根节点自定义类名。 */
+    customClass?: string;
+    /** 根节点自定义样式。 */
+    customStyle?: StyleValue;
+}