@puresnake/snake-ui 0.0.0-stage → 0.0.2

package/components/snake-calendar/types.ts

@@ -0,0 +1,189 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { StyleValue } from '../../types/global';
+
+/** CalendarMode 类型定义。 */
+export type CalendarMode = 'date' | 'range';
+/** CalendarLunar 农历信息。 */
+export interface CalendarLunar {
+    /** 农历日中文。 */
+    dayCn: string;
+    /** 星期中文。 */
+    weekCn: string;
+    /** 农历月中文。 */
+    monthCn: string;
+    /** 农历日。 */
+    day: number;
+    /** 星期几。 */
+    week: number;
+    /** 农历月。 */
+    month: number;
+    /** 农历年。 */
+    year: number;
+}
+/** CalendarChangeDate 单选模式 change 事件载荷。 */
+export interface CalendarChangeDate {
+    /** 选中年。 */
+    year: number;
+    /** 选中月。 */
+    month: number;
+    /** 选中日。 */
+    day: number;
+    /** 当月天数。 */
+    days: number;
+    /** 选中日期，格式 YYYY-MM-DD。 */
+    result: string;
+    /** 星期文本。 */
+    week: string;
+    /** 是否今天。 */
+    isToday: boolean;
+    /** 农历信息。 */
+    lunar: CalendarLunar | null;
+}
+/** CalendarChangeRange 范围模式 change 事件载荷。 */
+export interface CalendarChangeRange {
+    /** 开始年。 */
+    startYear: number;
+    /** 开始月。 */
+    startMonth: number;
+    /** 开始日。 */
+    startDay: number;
+    /** 开始日期，格式 YYYY-MM-DD。 */
+    startDate: string;
+    /** 开始日期星期文本。 */
+    startWeek: string;
+    /** 结束年。 */
+    endYear: number;
+    /** 结束月。 */
+    endMonth: number;
+    /** 结束日。 */
+    endDay: number;
+    /** 结束日期，格式 YYYY-MM-DD。 */
+    endDate: string;
+    /** 结束日期星期文本。 */
+    endWeek: string;
+    /** 开始日期农历信息。 */
+    startLunar: CalendarLunar | null;
+    /** 结束日期农历信息。 */
+    endLunar: CalendarLunar | null;
+}
+
+/** calendarProps 运行时属性及默认值。 */
+export const calendarProps = {
+    /** 根节点自定义样式。 */
+    customStyle: { type: [String, Object, Array] as PropType<StyleValue>, default: '' },
+    /** 根节点自定义类名。 */
+    customClass: { type: String, default: '' },
+    /** 是否开启底部安全区适配。 */
+    safeAreaInsetBottom: { type: Boolean, default: false },
+    /** 是否允许通过点击遮罩关闭日历。 */
+    maskCloseAble: { type: Boolean, default: true },
+    /** 双向绑定控制日历的弹出与收起。 */
+    modelValue: { type: Boolean, default: false },
+    /** 弹出时的层级，0 表示使用弹层默认层级。 */
+    zIndex: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** 是否允许切换年份。 */
+    changeYear: { type: Boolean, default: true },
+    /** 是否允许切换月份。 */
+    changeMonth: { type: Boolean, default: true },
+    /** 选择模式，date 单个日期，range 日期范围。 */
+    mode: { type: String as PropType<CalendarMode>, default: 'date' },
+    /** 可切换的最大年份。 */
+    maxYear: { type: [Number, String] as PropType<number | string>, default: 2050 },
+    /** 可切换的最小年份。 */
+    minYear: { type: [Number, String] as PropType<number | string>, default: 1950 },
+    /** 最小可选日期，不在范围内的日期禁用不可选。 */
+    minDate: { type: [Number, String] as PropType<number | string>, default: '1950-01-01' },
+    /** 最大可选日期，默认最大值为今天。 */
+    maxDate: { type: [Number, String] as PropType<number | string>, default: '' },
+    /** 弹窗顶部左右两边的圆角值。 */
+    borderRadius: { type: [String, Number] as PropType<string | number>, default: 20 },
+    /** 月份切换按钮箭头颜色。 */
+    monthArrowColor: { type: String, default: 'var(--snake-color-text-secondary, #606266)' },
+    /** 年份切换按钮箭头颜色。 */
+    yearArrowColor: { type: String, default: 'var(--snake-color-text-muted, #909399)' },
+    /** 默认日期字体颜色。 */
+    color: { type: String, default: 'var(--snake-color-text, #303133)' },
+    /** 选中/起始结束日期背景色。 */
+    activeBgColor: { type: String, default: 'var(--snake-color-primary, #06D290)' },
+    /** 选中/起始结束日期字体颜色。 */
+    activeColor: { type: String, default: 'var(--snake-color-white, #fff)' },
+    /** 范围内日期背景色。 */
+    rangeBgColor: { type: String, default: 'rgba(var(--snake-color-primary-rgb, 6, 210, 144), 0.13)' },
+    /** 范围内日期字体颜色。 */
+    rangeColor: { type: String, default: 'var(--snake-color-primary, #06D290)' },
+    /** mode 为 range 时生效，起始日期自定义文案。 */
+    startText: { type: String, default: '' },
+    /** mode 为 range 时生效，结束日期自定义文案。 */
+    endText: { type: String, default: '' },
+    /** 确定按钮样式类型。 */
+    btnType: { type: String, default: 'primary' },
+    /** 当前选中日期带选中效果。 */
+    isActiveCurrent: { type: Boolean, default: true },
+    /** 初始化时是否默认选中今天，优先级低于 defaultDate/startDate/endDate。 */
+    defaultSelectToday: { type: Boolean, default: true },
+    /** 切换年月是否触发事件，mode 为 date 时生效。 */
+    isChange: { type: Boolean, default: false },
+    /** 是否显示右上角的关闭图标。 */
+    closeable: { type: Boolean, default: true },
+    /** 顶部的提示文字。 */
+    toolTip: { type: String, default: '' },
+    /** 是否显示农历。 */
+    showLunar: { type: Boolean, default: false },
+    /** 是否在页面中直接显示，不使用弹窗。 */
+    isPage: { type: Boolean, default: false },
+    /** 默认选中的日期，mode 为 date 时生效，格式 2024-01-01。 */
+    defaultDate: { type: String, default: '' },
+    /** 默认选中的开始日期，mode 为 range 时生效，格式 2024-01-01。 */
+    startDate: { type: String, default: '' },
+    /** 默认选中的结束日期，mode 为 range 时生效，格式 2024-01-01。 */
+    endDate: { type: String, default: '' },
+    /** 是否只读，只读模式下禁止点击选择日期。 */
+    readonly: { type: Boolean, default: false },
+    /** 已打卡日期列表，格式 ['2024-01-01']。 */
+    checkedDates: { type: Array as PropType<string[]>, default: () => [] },
+    /** 打卡日期背景色。 */
+    checkedBgColor: { type: String, default: 'var(--snake-color-warning, #ff9900)' },
+    /** 打卡日期字体颜色。 */
+    checkedColor: { type: String, default: 'var(--snake-color-white, #fff)' },
+    /** 今日是否已打卡。 */
+    todayChecked: { type: Boolean, default: false },
+    /** 今日已打卡背景色。 */
+    todayCheckedBgColor: { type: String, default: 'var(--snake-color-success, #19be6b)' },
+    /** 未打卡日期背景色。 */
+    uncheckedBgColor: { type: String, default: 'var(--snake-color-text-light, #c0c4cc)' },
+    /** 未打卡日期字体颜色。 */
+    uncheckedColor: { type: String, default: 'var(--snake-color-white, #fff)' },
+    /** 是否启用打卡签到模式（未打卡日期显示灰色）。 */
+    checkinMode: { type: Boolean, default: false },
+    /** 节假日列表，格式 ['2024-01-01']。 */
+    holidays: { type: Array as PropType<string[]>, default: () => [] },
+    /** 节假日文字颜色。 */
+    holidayColor: { type: String, default: 'var(--snake-color-error, #fa3534)' },
+    /** 加班日列表，格式 ['2024-01-06']。 */
+    workdays: { type: Array as PropType<string[]>, default: () => [] },
+    /** 加班日文字颜色。 */
+    workdayColor: { type: String, default: 'var(--snake-color-primary, #06D290)' },
+    /** 节日配置，格式 { '2024-04-04': '清明节' }。 */
+    festivals: { type: Object as PropType<Record<string, string>>, default: () => ({}) },
+    /** 节日文字颜色。 */
+    festivalColor: { type: String, default: 'var(--snake-color-primary, #06D290)' },
+    /** 是否显示内置节日（中国传统节日）。 */
+    showFestival: { type: Boolean, default: false },
+    /** 是否启用自定义日期内容插槽。 */
+    useDateSlot: { type: Boolean, default: false }
+} as const;
+
+/** Calendar 组件的公开属性。 */
+export type CalendarProps = ExtractPropTypes<typeof calendarProps>;
+
+/** Calendar 组件的事件契约。 */
+export type CalendarEmits = {
+    /** 双向绑定值更新。 */
+    'update:modelValue': [value: boolean];
+    /** 弹窗通过按钮收起时触发（兼容 input 语义）。 */
+    input: [value: boolean];
+    /** 点击遮罩或关闭按钮收起时触发。 */
+    close: [];
+    /** 选择结果变化时触发。 */
+    change: [value: CalendarChangeDate | CalendarChangeRange];
+};

package/components/snake-cell-group/snake-cell-group.vue

@@ -0,0 +1,55 @@
+<template>
+    <view class="snake-cell-group" :class="customClass" :style="customStyle">
+        <view v-if="title" class="snake-cell-group__title" :style="titleStyle">{{ title }}</view>
+        <view class="snake-cell-group__body" :class="{ 'snake-cell-group__body--border': border }">
+            <slot />
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component CellGroup
+ * @description 单元格分组容器，一般搭配 CellItem 用于列表场景，支持分组标题与上下外边框。
+ * @see /components/cell
+ */
+
+import { cellGroupProps } from './types';
+
+defineOptions({ name: 'CellGroup', options: { virtualHost: true, styleIsolation: 'shared' } });
+defineProps(cellGroupProps);
+</script>
+
+<style scoped>
+.snake-cell-group {
+    width: 100%;
+}
+.snake-cell-group__title {
+    padding: 30rpx 32rpx 10rpx 32rpx;
+    font-size: 30rpx;
+    text-align: left;
+    color: var(--snake-color-text-muted, #909399);
+}
+.snake-cell-group__body {
+    background-color: var(--snake-color-surface, #fff);
+}
+.snake-cell-group__body--border {
+    position: relative;
+}
+.snake-cell-group__body--border::before,
+.snake-cell-group__body--border::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    left: 0;
+    height: 1px;
+    background-color: var(--snake-color-border, #e4e7ed);
+    transform: scaleY(0.5);
+}
+.snake-cell-group__body--border::before {
+    top: 0;
+}
+.snake-cell-group__body--border::after {
+    bottom: 0;
+}
+</style>

package/components/snake-cell-group/types.ts

@@ -0,0 +1,19 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { StyleValue } from '../../types/global';
+
+/** cellGroupProps 运行时属性及默认值。 */
+export const cellGroupProps = {
+    /** 根节点自定义样式。 */
+    customStyle: { type: [String, Object, Array] as PropType<StyleValue>, default: '' },
+    /** 根节点自定义类名。 */
+    customClass: { type: String, default: '' },
+    /** 分组标题。 */
+    title: { type: String, default: '' },
+    /** 是否显示分组上下边框。 */
+    border: { type: Boolean, default: true },
+    /** 分组标题的样式，对象形式，注意驼峰属性写法。 */
+    titleStyle: { type: [Object, Array] as PropType<StyleValue>, default: () => ({}) }
+} as const;
+
+/** CellGroup 组件的公开属性。 */
+export type CellGroupProps = ExtractPropTypes<typeof cellGroupProps>;

package/components/snake-cell-item/snake-cell-item.vue

@@ -0,0 +1,159 @@
+<template>
+    <view
+        class="snake-cell-item"
+        :class="[
+            {
+                'snake-cell-item--border-bottom': borderBottom,
+                'snake-cell-item--border-top': borderTop,
+                'snake-cell-item--center': center,
+                'snake-cell-item--required': required
+            },
+            customClass
+        ]"
+        hover-stay-time="150"
+        :hover-class="hoverClass"
+        :style="[{ backgroundColor: bgColor }, customStyle]"
+        @click="onClick"
+    >
+        <view v-if="icon" class="snake-cell-item__left-icon-wrap">
+            <snake-icon :size="iconSize" :name="icon" :custom-style="iconStyle" />
+        </view>
+        <view v-else class="snake-cell-item__icon-slot">
+            <slot name="icon" />
+        </view>
+        <view class="snake-cell-item__title" :style="[{ width: titleWidth ? `${titleWidth}rpx` : 'auto' }, titleStyle]">
+            <template v-if="title !== ''">{{ title }}</template>
+            <slot v-else name="title" />
+            <view v-if="label || slots.label" class="snake-cell-item__label" :style="[labelStyle]">
+                <template v-if="label !== ''">{{ label }}</template>
+                <slot v-else name="label" />
+            </view>
+        </view>
+        <view class="snake-cell-item__value" :style="[valueStyle]">
+            <template v-if="value !== ''">{{ value }}</template>
+            <slot v-else />
+        </view>
+        <view v-if="slots['right-icon']" class="snake-cell-item__right">
+            <slot name="right-icon" />
+        </view>
+        <view v-if="arrow" class="snake-cell-item__right-icon-wrap">
+            <snake-icon name="arrow-right" :custom-style="arrowStyle" />
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * @component CellItem
+ * @description 单元格条目，一般搭配 CellGroup 用于列表场景，支持图标、标题、描述、右侧内容与箭头。
+ * @see /components/cell
+ */
+
+import { computed, useSlots } from 'vue';
+import Icon from '../snake-icon/snake-icon.vue';
+import { cellItemProps, type CellItemEmits } from './types';
+
+defineOptions({ name: 'CellItem', options: { virtualHost: true, styleIsolation: 'shared' } });
+const props = defineProps(cellItemProps);
+const emit = defineEmits<CellItemEmits>();
+const slots = useSlots();
+
+/** 箭头旋转样式。 */
+const arrowStyle = computed(() => {
+    if (props.arrowDirection === 'up') return { transform: 'rotate(-90deg)' };
+    if (props.arrowDirection === 'down') return { transform: 'rotate(90deg)' };
+    return { transform: 'rotate(0deg)' };
+});
+
+/** 点击事件，回调中返回 index 标识当前条目。 */
+function onClick() {
+    emit('click', props.index);
+}
+</script>
+
+<style scoped>
+.snake-cell-item {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 26rpx 32rpx;
+    font-size: 28rpx;
+    line-height: 54rpx;
+    color: var(--snake-color-text-secondary, #606266);
+    text-align: left;
+}
+.snake-cell-item__title {
+    font-size: 28rpx;
+}
+.snake-cell-item__left-icon-wrap,
+.snake-cell-item__right-icon-wrap,
+.snake-cell-item__icon-slot,
+.snake-cell-item__right {
+    display: flex;
+    align-items: center;
+    height: 48rpx;
+}
+.snake-cell-item__left-icon-wrap,
+.snake-cell-item__icon-slot {
+    margin-right: 10rpx;
+    font-size: 32rpx;
+}
+.snake-cell-item__right-icon-wrap {
+    margin-left: 10rpx;
+    color: var(--snake-color-text-muted, #909399);
+    font-size: 28rpx;
+}
+.snake-cell-item__right {
+    line-height: 1;
+}
+.snake-cell-item--border-bottom::after,
+.snake-cell-item--border-top::before {
+    content: '';
+    position: absolute;
+    right: 0;
+    left: 0;
+    height: 1px;
+    background-color: var(--snake-color-border, #e4e7ed);
+    transform: scaleY(0.5);
+}
+.snake-cell-item--border-bottom::after {
+    bottom: 0;
+}
+.snake-cell-item--border-top::before {
+    top: 0;
+}
+.snake-cell-item__label {
+    margin-top: 6rpx;
+    font-size: 26rpx;
+    line-height: 36rpx;
+    color: var(--snake-color-text-muted, #909399);
+    word-wrap: break-word;
+}
+.snake-cell-item__value {
+    overflow: hidden;
+    font-size: 26rpx;
+    color: var(--snake-color-text-muted, #909399);
+    text-align: right;
+    vertical-align: middle;
+}
+.snake-cell-item__title,
+.snake-cell-item__value {
+    flex: 1;
+}
+.snake-cell-item--required {
+    overflow: visible;
+}
+.snake-cell-item--required::before {
+    content: '*';
+    position: absolute;
+    left: 8px;
+    margin-top: 4rpx;
+    font-size: 14px;
+    color: var(--snake-color-error, #fa3534);
+}
+.snake-cell-item--hover {
+    background-color: var(--snake-color-surface-muted, #f2f3f6);
+}
+</style>

package/components/snake-cell-item/types.ts

@@ -0,0 +1,66 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { StyleValue } from '../../types/global';
+
+/** CellItemIndex 类型定义。 */
+export type CellItemIndex = string | number;
+/** CellItemStyle 类型定义。 */
+export type CellItemStyle = Record<string, unknown>;
+/** CellItemArrowDirection 类型定义。 */
+export type CellItemArrowDirection = 'right' | 'up' | 'down';
+
+/** cellItemProps 运行时属性及默认值。 */
+export const cellItemProps = {
+    /** 根节点自定义样式。 */
+    customStyle: { type: [String, Object, Array] as PropType<StyleValue>, default: '' },
+    /** 根节点自定义类名。 */
+    customClass: { type: String, default: '' },
+    /** 左侧图标名称或图片地址。 */
+    icon: { type: String, default: '' },
+    /** 左侧标题。 */
+    title: { type: [String, Number] as PropType<string | number>, default: '' },
+    /** 右侧内容。 */
+    value: { type: [String, Number] as PropType<string | number>, default: '' },
+    /** 标题下方的描述信息。 */
+    label: { type: [String, Number] as PropType<string | number>, default: '' },
+    /** 是否显示下边框。 */
+    borderBottom: { type: Boolean, default: true },
+    /** 是否显示上边框。 */
+    borderTop: { type: Boolean, default: false },
+    /** 是否开启点击反馈，点击时背景变灰。 */
+    hoverClass: { type: String, default: 'snake-cell-item--hover' },
+    /** 是否显示右侧箭头。 */
+    arrow: { type: Boolean, default: true },
+    /** 内容是否垂直居中。 */
+    center: { type: Boolean, default: false },
+    /** 是否显示左侧表示必填的星号。 */
+    required: { type: Boolean, default: false },
+    /** 标题的宽度，数值按 rpx 处理。 */
+    titleWidth: { type: [Number, String] as PropType<number | string>, default: '' },
+    /** 右侧箭头方向。 */
+    arrowDirection: { type: String as PropType<CellItemArrowDirection>, default: 'right' },
+    /** 标题样式，对象形式。 */
+    titleStyle: { type: [Object, Array] as PropType<StyleValue>, default: () => ({}) },
+    /** 右侧内容样式，对象形式。 */
+    valueStyle: { type: [Object, Array] as PropType<StyleValue>, default: () => ({}) },
+    /** 描述信息样式，对象形式。 */
+    labelStyle: { type: [Object, Array] as PropType<StyleValue>, default: () => ({}) },
+    /** 背景颜色。 */
+    bgColor: { type: String, default: 'transparent' },
+    /** 用于 click 事件回调中标识当前是第几个条目。 */
+    index: { type: [String, Number] as PropType<CellItemIndex>, default: '' },
+    /** 是否使用 label 插槽。 */
+    useLabelSlot: { type: Boolean, default: false },
+    /** 左侧图标的大小，数值按 rpx 处理，只对传入 icon 字段时有效。 */
+    iconSize: { type: [Number, String] as PropType<number | string>, default: 34 },
+    /** 左侧图标的样式，对象形式。 */
+    iconStyle: { type: [Object, Array] as PropType<StyleValue>, default: () => ({}) }
+} as const;
+
+/** CellItem 组件的公开属性。 */
+export type CellItemProps = ExtractPropTypes<typeof cellItemProps>;
+
+/** CellItem 组件的事件契约。 */
+export type CellItemEmits = {
+    /** click 事件携带的参数。 */
+    click: [index: CellItemIndex];
+};