@rao2126340634/yt-ui 1.2.20

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@rao2126340634/yt-ui",
+  "version": "1.2.20",
+  "description": "uniapp vue3 component library for zjyt wechat miniprogram",
+  "main": "src/components",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "files": [
+    "src",
+    "../../README.md"
+  ],
+  "keywords": [
+    "uni-app",
+    "vue3",
+    "typescript",
+    "ui",
+    "component",
+    "wechat-miniprogram",
+    "mobile",
+    "lightweight",
+    "easycom",
+    "uniapp-ui",
+    "mini-program",
+    "dcloud",
+    "vue-component"
+  ],
+  "author": "",
+  "license": "MIT",
+  "packageManager": "pnpm@10.23.0",
+  "devDependencies": {
+    "@dcloudio/types": "^3.4.28",
+    "@types/node": "^24.10.2",
+    "@vue/tsconfig": "^0.8.1",
+    "typescript": "^5.9.3",
+    "vue-tsc": "^3.1.5"
+  },
+  "peerDependencies": {
+    "@dcloudio/uni-app": "2.0.2-4080420251103001",
+    "sass": "^1.95.0",
+    "vue": "^3.5.25"
+  }
+}

package/src/components/yt-avatar/yt-avatar.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { ImageMode } from '../../types/prop-types'
+  import { ThemeColor } from '../../types/theme-types'
+
+  interface Props {
+    theme?: ThemeColor | 'none'
+    url?: string
+    circle?: boolean
+    size?: number
+    fit?: ImageMode
+    // badge
+    enableBadgeTheme: boolean
+    showBadge?: boolean
+    count?: number
+    overflowCount?: number
+    dot?: boolean
+    offset?: number[]
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    theme: 'none',
+    url: '',
+    circle: true,
+    size: 60,
+    fit: 'aspectFill',
+    // badge
+    enableBadgeTheme: true,
+    showBadge: false,
+    count: 0,
+    overflowCount: 99,
+    dot: false,
+    offset: () => []
+  })
+
+  const emit = defineEmits<{
+    click: [e: Event]
+    load: [{ height: string; width: string }]
+    error: [errMsg: string]
+  }>()
+  const avatarClass = computed(() => {
+    return ['yt-avatar', `yt-avatar--theme-${props.theme}`]
+  })
+  const avatarStyle = computed(() => {
+    return {
+      borderRadius: props.circle ? '50%' : '0',
+      width: `${props.size}px`,
+      height: `${props.size}px`
+    }
+  })
+  function handleLoad(e: any) {
+    emit('load', e.detail)
+  }
+  function handleError(e: any) {
+    emit('error', e.detail.errMsg)
+  }
+  function handleClick(e: Event) {
+    emit('click', e)
+  }
+
+  defineOptions({
+    name: 'YtAvatar'
+  })
+</script>
+
+<template>
+  <view class="yt-avatar--container">
+    <view
+      :class="avatarClass"
+      :style="avatarStyle"
+      @click="handleClick"
+    >
+      <image
+        v-if="url"
+        class="yt-avatar--image"
+        :src="url"
+        :mode="fit"
+        @load="handleLoad"
+        @error="handleError"
+      />
+      <yt-icon
+        v-else
+        name="DefaultAvatar"
+        :width="props.size"
+        :height="props.size"
+      />
+    </view>
+
+    <!-- badge -->
+    <view
+      v-if="showBadge"
+      class="yt-avatar--badge"
+    >
+      <yt-badge
+        :theme="enableBadgeTheme ? theme : 'none'"
+        :count="count"
+        :overflowCount="overflowCount"
+        :dot="dot"
+        :offset="offset"
+      />
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+  @use '../../styles/components/avatar';
+  @use '../../styles/themes';
+</style>

package/src/components/yt-badge/yt-badge.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { ThemeColor } from '../../types/theme-types'
+
+  interface Props {
+    theme?: ThemeColor
+    count?: number
+    overflowCount?: number
+    dot?: boolean
+    offset?: number[]
+    zIndex?: number
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    theme: 'classic',
+    count: 0,
+    overflowCount: 99,
+    dot: false,
+    offset: () => [],
+    zIndex: 100
+  })
+
+  const badgeClass = computed(() => {
+    return [
+      'yt-badge',
+      `yt-badge--theme-${props.theme}`,
+      {
+        'yt-badge--dot': props.dot,
+        'yt-badge--count': !props.dot,
+        'yt-badge--visible': (!props.dot && props.count) || props.dot
+      }
+    ]
+  })
+
+  const badgeStyle = computed(() => {
+    return {
+      zIndex: props.zIndex,
+      left: `${props.offset[0]}px` || 0,
+      top: `${props.offset[1]}px` || 0
+    }
+  })
+
+  const visibleCount = computed(() => {
+    return props.count > props.overflowCount ? `${props.overflowCount}+` : props.count
+  })
+</script>
+
+<template>
+  <view
+    :class="badgeClass"
+    :style="badgeStyle"
+  >
+    <span
+      class="yt-badge--count-text"
+      v-if="!props.dot"
+    >
+      {{ visibleCount }}
+    </span>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+  @use '../../styles/components/badge';
+  @use '../../styles/themes';
+</style>

package/src/components/yt-button/yt-button.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { ThemeColor } from '../../types/theme-types'
+  import { ColorType, SizeType } from '../../types/prop-types'
+
+  interface Props {
+    theme?: ThemeColor
+    type?: ColorType
+    size?: SizeType
+    plain?: boolean
+    disabled?: boolean
+    loading?: boolean
+    circle?: boolean
+    stretch?: boolean
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    theme: 'classic',
+    type: 'primary',
+    size: 'medium',
+    plain: false,
+    disabled: false,
+    loading: false,
+    circle: false,
+    stretch: false
+  })
+
+  const emit = defineEmits<{
+    click: [e: Event]
+  }>()
+
+  const buttonClass = computed(() => {
+    return [
+      'yt-button',
+      `yt-button--${props.type}${props.theme && props.type === 'primary' ? `-${props.theme}` : ''}`,
+      `yt-button--${props.size}`,
+      {
+        'yt-button--plain': props.plain,
+        'yt-button--disabled': props.disabled || props.loading,
+        'yt-button--loading': props.loading,
+        'yt-button--circle': props.circle,
+        'yt-button--stretch': props.stretch
+      }
+    ]
+  })
+
+  function handleClick(e: Event) {
+    if (!props.disabled && !props.loading) {
+      emit('click', e)
+    }
+  }
+
+  defineOptions({
+    name: 'YtButton'
+  })
+</script>
+
+<template>
+  <button
+    :class="buttonClass"
+    :loading="loading"
+    hover-class="yt-button--hover"
+    @click="handleClick"
+  >
+    <span
+      v-if="loading"
+      class="yt-button--loading"
+    ></span>
+    <span class="yt-button--text">
+      <slot></slot>
+    </span>
+    <view class="yt-button--overlay" />
+  </button>
+</template>
+
+<style lang="scss" scoped>
+  @use '../../styles/components/_button.scss';
+  @use '../../styles/_themes.scss';
+</style>

package/src/components/yt-calendar/yt-calendar.vue

@@ -0,0 +1,327 @@
+<script setup lang="ts">
+  import { computed, ref, shallowRef, toRaw } from 'vue'
+  import { ThemeColor } from '../../types/theme-types'
+  import { Calendar, useCalendar } from '../../hooks/useCalendar'
+  import { throttle } from '../../utils/util'
+
+  const monthNameMap: Record<number, string> = {
+    1: 'January',
+    2: 'February',
+    3: 'March',
+    4: 'April',
+    5: 'May',
+    6: 'June',
+    7: 'July',
+    8: 'August',
+    9: 'September',
+    10: 'October',
+    11: 'November',
+    12: 'December'
+  }
+
+  type MonthData = {
+    date: number
+    extra: string
+    isHoliday: boolean
+  }[]
+
+  interface Props {
+    monthData?: MonthData
+    loading?: boolean
+    theme?: ThemeColor | 'none'
+    width?: number | string
+    height?: number | string
+    gap?: number | string
+    borderRadius?: number | string
+    start?: string
+    end?: string
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    monthData: () => [],
+    loading: false,
+    theme: 'none',
+    width: '100%',
+    height: '100%',
+    gap: 6,
+    borderRadius: 10,
+    start: '',
+    end: ''
+  })
+
+  const emit = defineEmits<{
+    change: [{ year: number; month: number }]
+    dateClick: [{ year: number; month: number; date: number; index: number }]
+  }>()
+
+  const calendarClass = computed(() => {
+    return ['yt-calendar', `yt-calendar--theme-${props.theme}`]
+  })
+  const calendarStyle = computed(() => {
+    return {
+      width: typeof props.width === 'number' ? `${props.width}px` : props.width,
+      height: typeof props.height === 'number' ? `${props.height}px` : props.height,
+      '--calendar-item-gap': typeof props.gap === 'number' ? `${props.gap}px` : props.gap,
+      borderRadius:
+        typeof props.borderRadius === 'number' ? `${props.borderRadius}px` : props.borderRadius
+    }
+  })
+  const calendarOpacity = computed(() => {
+    if (!touchState.value.isDragging) return 1
+    const value = 1 - Math.abs(touchState.value.curX - touchState.value.startX) * 0.012
+    return Math.min(Math.max(0.1, value), 1)
+  })
+  const calendarGridClass = computed(() => {
+    return (item: Calendar, index: number) => {
+      const active =
+        calendar.isToday(item.year, item.month, item.date) || index === selectedDate.value?.index
+      const secondary =
+        active && selectedDate.value !== null && item.date !== selectedDate.value.item.date
+      return {
+        'yt-calendar--body-grid-item': true,
+        'yt-calendar--body-grid-item-today': active,
+        'yt-calendar--body-grid-item-secondary': secondary,
+        'yt-calendar--body-grid-item-prev-month': item.isPrevMonth,
+        'yt-calendar--body-grid-item-next-month': item.isNextMonth
+      }
+    }
+  })
+  const arrowScale = computed(() => {
+    if (!touchState.value.isDragging) return { leftScale: 1, rightScale: 1 }
+    const deltaX = touchState.value.curX - touchState.value.startX
+    const rightScale =
+      deltaX < 0 ? 1 + Math.abs(touchState.value.curX - touchState.value.startX) * 0.012 : 1
+    const leftScale =
+      deltaX > 0 ? 1 + Math.abs(touchState.value.curX - touchState.value.startX) * 0.012 : 1
+    return {
+      leftScale: Math.min(Math.max(1, leftScale), 1.5),
+      rightScale: Math.min(Math.max(1, rightScale), 1.5)
+    }
+  })
+
+  const calendar = useCalendar()
+  const date = ref<Date>(new Date())
+  const state = ref({
+    year: date.value.getFullYear(),
+    month: date.value.getMonth() + 1
+  })
+  const touchState = shallowRef({
+    curX: 0,
+    curY: 0,
+    startX: 0,
+    startY: 0,
+    isDragging: false,
+    isLock: false
+  })
+  const selectedDate = ref<{ item: Calendar; index: number } | null>(null)
+
+  const calendarData = computed(() => {
+    return calendar.getCalendar(state.value.year, state.value.month)
+  })
+  const backgroundText = computed(() => {
+    return `${monthNameMap[state.value.month].slice(0, 3)}.${state.value.month}`
+  })
+  function getExtra(item: Calendar) {
+    const target = props.monthData.find(md => md.date === item.date && item.isCurMonth)
+    return target?.extra || ''
+  }
+  function isHoliday(item: Calendar) {
+    const target = props.monthData.find(md => md.date === item.date && item.isCurMonth)
+    return target?.isHoliday
+  }
+  function changeMonth(type: 'prev' | 'next') {
+    let newMonth = state.value.month
+    let newYear = state.value.year
+    newMonth += type === 'prev' ? -1 : 1
+    if (newMonth === 0) {
+      newMonth = 12
+      newYear--
+    } else if (newMonth === 13) {
+      newMonth = 1
+      newYear++
+    }
+    if (props.start) {
+      const startArr = props.start.split('-')
+      if (newYear === Number(startArr[0])) newMonth = Math.max(newMonth, Number(startArr[1]))
+      newYear = Math.max(newYear, Number(startArr[0]))
+    }
+    if (props.end) {
+      const endArr = props.end.split('-')
+      if (newYear === Number(endArr[0])) newMonth = Math.min(newMonth, Number(endArr[1]))
+      newYear = Math.min(newYear, Number(endArr[0]))
+    }
+    if (newYear === state.value.year && newMonth === state.value.month) return
+    state.value = {
+      year: newYear,
+      month: newMonth
+    }
+    selectedDate.value = null
+    emit('change', toRaw(state.value))
+  }
+  function handleDatePickerChange(str: any) {
+    selectedDate.value = null
+    const strArr = str.split('-')
+    state.value.year = Number(strArr[0])
+    state.value.month = Number(strArr[1])
+    emit('change', toRaw(state.value))
+  }
+  function handleTouchStart(e: any) {
+    if (props.loading) return
+    const touches = e.touches[0]
+    touchState.value = {
+      ...touchState.value,
+      startX: touches.clientX,
+      startY: touches.clientY,
+      isDragging: false,
+      isLock: false,
+      curX: 0,
+      curY: 0
+    }
+  }
+  function handleTouchMove(e: TouchEvent) {
+    if (props.loading || touchState.value.isLock) return
+    const touches = e.touches[0]
+    if (!touchState.value.isDragging) {
+    const absDeltaX = Math.abs(touchState.value.curX - touchState.value.startX)
+    const absDeltaY = Math.abs(touchState.value.curY - touchState.value.startY)
+    if (absDeltaX < 5 || absDeltaY > absDeltaX) {
+        touchState.value = {
+          ...touchState.value,
+          isLock: true
+        }
+        return
+      }
+    }
+      touchState.value = {
+        ...touchState.value,
+        curX: touches.clientX,
+        curY: touches.clientY,
+        isDragging: true
+      }
+    }
+  function handleTouchEnd() {
+    const deltaX = touchState.value.curX - touchState.value.startX
+    const deltaY = touchState.value.curY - touchState.value.startY
+    if (touchState.value.isDragging && Math.abs(deltaX) > 80 && Math.abs(deltaY) < 50) {
+      changeMonth(deltaX > 0 ? 'prev' : 'next')
+    }
+    touchState.value = {
+      curX: 0,
+      curY: 0,
+      startX: 0,
+      startY: 0,
+      isDragging: false,
+      isLock: false
+    }
+  }
+  function handleDateClick(item: Calendar, index: number) {
+    if (selectedDate.value !== null && selectedDate.value.index === index) return
+    selectedDate.value = { item, index }
+    emit('dateClick', { year: item.year, month: item.month, date: item.date, index })
+  }
+
+  defineOptions({
+    name: 'YtCalendar'
+  })
+</script>
+
+<template>
+  <view
+    :class="calendarClass"
+    :style="calendarStyle"
+  >
+    <view class="yt-calendar--header">
+      <view class="yt-calendar--header-month-text">
+        <span class="yt-calendar--header-month-text-number">{{ state.month }}</span>
+        <span class="yt-calendar--header-month-text-word">{{ monthNameMap[state.month] }}</span>
+      </view>
+      <view class="yt-calendar--header-year-month">
+        <span
+          @click="changeMonth('prev')"
+          class="arrow-left"
+        >
+          {{ '<' }}
+        </span>
+        <!-- date-picker -->
+        <yt-picker
+          type="date"
+          fields="month"
+          @change="handleDatePickerChange"
+          :start="start"
+          :end="end"
+        >
+          <span>{{ `${state.year}年${state.month}月` }}</span>
+        </yt-picker>
+        <span
+          @click="changeMonth('next')"
+          class="arrow-right"
+        >
+          {{ '>' }}
+        </span>
+      </view>
+    </view>
+    <view
+      class="yt-calendar--body"
+      @touchstart="handleTouchStart"
+      @touchmove="handleTouchMove"
+      @touchend="handleTouchEnd"
+      @touchcancel="handleTouchEnd"
+    >
+      <view class="yt-calendar--body-week">
+        <span
+          v-for="(day, index) in calendar.weekDays"
+          :key="index"
+        >
+          {{ day }}
+        </span>
+      </view>
+      <view
+        :class="['yt-calendar--body-grid', { 'yt-calendar--body-grid-loading': props.loading }]"
+      >
+        <span
+          v-for="(item, index) in calendarData"
+          :key="index"
+          :class="calendarGridClass(item, index)"
+          @click="handleDateClick(item, index)"
+        >
+          <p class="yt-calendar--body-grid-item-date">{{ item.date }}</p>
+          <p class="yt-calendar--body-grid-item-extra">
+            {{ getExtra(item) }}
+          </p>
+          <p
+            class="yt-calendar--body-grid-item-holiday"
+            v-if="isHoliday(item)"
+          >
+            休
+          </p>
+        </span>
+        <!-- background-text -->
+        <span class="yt-calendar--body-grid-background-text">{{ backgroundText }}</span>
+      </view>
+      <!-- loading -->
+      <yt-loading
+        class="yt-calendar--body-loading"
+        :theme="theme"
+        :visible="loading"
+      />
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+  @use '../../styles/components/_calendar.scss';
+  @use '../../styles/_themes.scss';
+  @use '../../styles/var' as var;
+
+  .yt-calendar--body {
+    opacity: v-bind(calendarOpacity);
+  }
+
+  .arrow-left {
+    transform: scale(v-bind('arrowScale.leftScale'));
+  }
+
+  .arrow-right {
+    transform: scale(v-bind('arrowScale.rightScale'));
+  }
+</style>