oxy-uni-ui 1.2.0 → 2.0.0

package/components/oxy-corner/index.scss

@@ -11,8 +11,8 @@
     position: absolute;
     top: 0;
     right: 0;
-    width: 80px;
-    height: 80px;
+    width: 160rpx;
+    height: 160rpx;
     overflow: hidden;
     @include when(round) {
       border-top-right-radius: $-corner-radius;
@@ -103,8 +103,8 @@
         }
         .oxy-corner__text {
           transform: rotate(-45deg);
-          top: 10px;
-          left: -26px;
+          top: 20rpx;
+          left: -52rpx;
         }
       }
       &.is-bottom-left{
@@ -117,8 +117,8 @@
         }
         .oxy-corner__text {
           transform: rotate(-135deg);
-          bottom: 10px;
-          left: -26px;
+          bottom: 20rpx;
+          left: -52rpx;
           top: auto;
           > span{
             transform: rotate(180deg);
@@ -136,8 +136,8 @@
         }
         .oxy-corner__text {
           transform: rotate(135deg);
-          bottom: 10px;
-          right: -26px;
+          bottom: 20rpx;
+          right: -52rpx;
           top: auto;
           > span{
             transform: rotate(180deg);
@@ -149,7 +149,7 @@
         &.is-top-left{
           &::after {
             left: auto;
-            right: -6px;
+            right: -12rpx;
             bottom: 0;
             transform: skewX(-30deg);
           }
@@ -158,15 +158,15 @@
             top: 0;
             left: 0;
             border-bottom-left-radius: 0;
-            border-bottom-right-radius: 32px;
+            border-bottom-right-radius: 64rpx;
             padding-left: 0;
-            padding-right: 12px;
+            padding-right: 24rpx;
           }
         }
         &.is-bottom-left{
           &::after {
             left: auto;
-            right: -6px;
+            right: -12rpx;
             bottom: 0;
             transform: skewX(30deg);
           }
@@ -175,9 +175,9 @@
             bottom: 0;
             left: 0;
             border-bottom-left-radius: 0;
-            border-top-right-radius: 32px;
+            border-top-right-radius: 64rpx;
             padding-left: 0;
-            padding-right: 12px;
+            padding-right: 24rpx;
             > span{
               transform: none;
             }
@@ -185,7 +185,7 @@
         }
         &.is-bottom-right{
           &::after {
-            left: -6px;
+            left: -12rpx;
             bottom: 0;
             transform: skewX(-30deg);
           }
@@ -194,7 +194,7 @@
             bottom: 0;
             right: 0;
             border-bottom-left-radius: 0;
-            border-top-left-radius: 32px;
+            border-top-left-radius: 64rpx;
             > span{
               transform: none;
             }
@@ -202,13 +202,13 @@
         }
       }
       .oxy-corner__text {
-        width: 106px;
-        height: 32px;
+        width: 212rpx;
+        height: 64rpx;
         position: absolute;
-        right: -26px;
-        top: 10px;
+        right: -52rpx;
+        top: 20rpx;
         text-align: center;
-        line-height: 32px;
+        line-height: 64rpx;
         overflow: hidden;
         transform: rotate(45deg);
         box-sizing: border-box;
@@ -219,27 +219,27 @@
       }
     }
     &.is-horizontal {
-      width: 160px;
-      height: 40px;
+      width: 320rpx;
+      height: 80rpx;
       .oxy-corner__text {
-        padding-right: 20px;
+        padding-right: 40rpx;
         box-sizing: border-box;
         font-size: $-corner-horizontal-font-size;
         font-weight: $-corner-horizontal-font-weight;
-        line-height: 40px;
+        line-height: 80rpx;
         text-align: right;
       }
     }
     &.is-embedded {
-      width: 106px;
-      height: 32px;
+      width: 212rpx;
+      height: 64rpx;
       &::after {
         content: '';
         position: absolute;
-        left: -6px;
+        left: -12rpx;
         bottom: 0;
-        width: 16px;
-        height: 32px;
+        width: 32rpx;
+        height: 64rpx;
         background-color: #ffffff;
         transform: skewX(30deg);
       }
@@ -247,11 +247,11 @@
         right: 0;
         top: 0;
         transform: none;
-        padding-left: 12px;
+        padding-left: 24rpx;
         box-sizing: border-box;
         font-size: $-corner-embedded-font-size;
         font-weight: $-corner-embedded-font-weight;
-        border-bottom-left-radius: 32px;
+        border-bottom-left-radius: 64rpx;
       }
     }
   }

package/components/oxy-corner/oxy-corner.vue

@@ -1,8 +1,8 @@
 <template>
-  <view class="oxy-corner">
+  <view :class="`oxy-corner ${customClass}`" :style="customStyle">
     <slot />
     <view v-if="text || $slots.text" :class="textClass">
-      <view class="oxy-corner__text">
+      <view class="oxy-corner__text" :style="textStyle">
         <slot name="text">
           <span>{{ text }}</span>
         </slot>
@@ -22,6 +22,7 @@ export default {
 }
 </script>
 <script lang="ts" setup>
+import { objToStyle } from '../common/util'
 import { computed, ref, watch } from 'vue'
 import { cornerProps } from './types'
 
@@ -49,7 +50,18 @@ watch(
 )
 
 const textClass = computed(() => {
-  return `oxy-corner__box ${props.customClass} ${cornerClass.value}`
+  return `oxy-corner__box ${cornerClass.value}`
+})
+
+const textStyle = computed(() => {
+  const textStyle: Record<string, any> = {}
+  if (props.color) {
+    textStyle['color'] = props.color
+  }
+  if (props.bgColor) {
+    textStyle['background'] = props.bgColor
+  }
+  return objToStyle(textStyle)
 })
 
 function computeCornerClass() {

package/components/oxy-corner/types.ts

@@ -44,7 +44,21 @@ export const cornerProps = {
    * 类型：string
    * 默认值：空字符串
    */
-  text: makeStringProp('')
+  text: makeStringProp(''),
+
+  /**
+   * 文字颜色
+   * 类型：string
+   * 默认值：空字符串
+   */
+  color: makeStringProp(''),
+
+  /**
+   * 背景色和边框色
+   * 类型：string
+   * 默认值：空字符串
+   */
+  bgColor: makeStringProp('')
 }
 
 export type CornerProps = ExtractPropTypes<typeof cornerProps>

package/components/oxy-count-to/oxy-count-to.vue

@@ -2,15 +2,15 @@
   <view :class="rootClass">
     <!-- 前缀插槽 -->
     <slot name="prefix">
-      <oxy-text :type="props.type" :color="props.color" :size="`${props.fontSize * 0.7}px`" :text="props.prefix"></oxy-text>
+      <oxy-text :type="props.type" :color="props.color" :size="`${props.fontSize * 1.4}rpx`" :text="props.prefix"></oxy-text>
     </slot>
     <!-- 默认文本插槽 -->
     <slot>
-      <oxy-text :type="props.type" :color="props.color" :size="`${props.fontSize}px`" :text="timeText"></oxy-text>
+      <oxy-text :type="props.type" :color="props.color" :size="`${props.fontSize * 2}rpx`" :text="timeText"></oxy-text>
     </slot>
     <!-- 后缀插槽 -->
     <slot name="suffix">
-      <oxy-text :type="props.type" :color="props.color" :size="`${props.fontSize * 0.7}px`" :text="props.suffix"></oxy-text>
+      <oxy-text :type="props.type" :color="props.color" :size="`${props.fontSize * 1.4}rpx`" :text="props.suffix"></oxy-text>
     </slot>
   </view>
 </template>

package/components/oxy-curtain/index.scss

@@ -33,53 +33,53 @@
   @include edeep(content-close) {
     position: absolute;
     margin: 0;
-    padding: 6px;
-    top: 10px;
-    right: 10px;
+    padding: 12rpx;
+    top: 20rpx;
+    right: 20rpx;
     color: $-curtain-content-close-color;
     font-size: $-curtain-content-close-fs;
     -webkit-tap-highlight-color: transparent;
     &.top {
-      margin: 0 0 0 -18px;
-      top: -62px;
+      margin: 0 0 0 -36rpx;
+      top: -124rpx;
       right: unset;
       left: 50%;
       bottom: unset;
     }
     &.top-left {
       margin: 0;
-      top: -62px;
+      top: -124rpx;
       right: unset;
-      left: -6px;
+      left: -12rpx;
       bottom: unset;
     }
     &.top-right {
       margin: 0;
-      top: -62px;
-      right: -6px;
+      top: -124rpx;
+      right: -12rpx;
       left: unset;
       bottom: unset;
     }
     &.bottom {
-      margin: 0 0 0 -18px;
+      margin: 0 0 0 -36rpx;
       top: unset;
       right: unset;
       left: 50%;
-      bottom: -62px;
+      bottom: -124rpx;
     }
     &.bottom-left {
       margin: 0;
       top: unset;
       right: unset;
-      left: -6px;
-      bottom: -62px;
+      left: -12rpx;
+      bottom: -124rpx;
     }
     &.bottom-right {
       margin: 0;
       top: unset;
-      right: -6px;
+      right: -12rpx;
       left: unset;
-      bottom: -62px;
+      bottom: -124rpx;
     }
   }
 }

package/components/oxy-curtain/oxy-curtain.vue

@@ -6,6 +6,7 @@
       position="center"
       :close-on-click-modal="closeOnClickModal"
       :hide-when-close="hideWhenClose"
+      :max-width="popupMaxWidth"
       :z-index="zIndex"
       :root-portal="rootPortal"
       @before-enter="beforeenter"
@@ -57,6 +58,7 @@ export default {
 import OxyIcon from '../oxy-icon/oxy-icon.vue'
 import OxyPopup from '../oxy-popup/oxy-popup.vue'
 import { computed, ref, watch } from 'vue'
+import { withDefaultUnit } from '../common/util'
 import { curtainProps } from './types'
 
 const props = defineProps(curtainProps)
@@ -105,8 +107,8 @@ const imgScale = ref<number>(1)
 const imgStyle = computed(() => {
   let style = ''
   if (props.width) {
-    style += `width: ${props.width}px ;`
-    style += `height: ${props.width / imgScale.value}px`
+    style += `width: ${withDefaultUnit(props.width)};`
+    style += `height: ${withDefaultUnit(props.width / imgScale.value)}`
   }
   return style
 })

package/components/oxy-curtain/types.ts

@@ -27,7 +27,7 @@ export const curtainProps = {
    */
   to: String,
   /**
-   * 幕帘图片宽度
+   * 幕帘图片宽度，number 类型按 `rpx` 语义处理
    */
   width: Number,
   /**
@@ -44,6 +44,11 @@ export const curtainProps = {
    * 默认值：10
    */
   zIndex: makeNumberProp(10),
+  /**
+   * 弹层最大宽度，支持 `rpx`、`px`、`%` 等单位；
+   * `%` 在弹层打开时按屏幕宽度换算为 `rpx`
+   */
+  popupMaxWidth: makeStringProp('1200rpx'),
   /**
    * 自定义关闭按钮的类名
    * 类型：string

package/components/oxy-date-strip/index.scss

@@ -0,0 +1,10 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(date-strip) {
+  height: $-date-strip-height;
+	background-color: $-date-strip-bg-color;
+  @include e(scroll) {
+    flex-direction: row;
+  }
+}

package/components/oxy-date-strip/oxy-date-strip.vue

@@ -0,0 +1,198 @@
+<template>
+  <scroll-view
+    :class="`oxy-date-strip oxy-date-strip__scroll ${customClass}`"
+    :scroll-x="true"
+    :scroll-left="scrollLeft"
+    :show-scrollbar="false"
+    direction="horizontal"
+    :style="rootStyle"
+    v-if="switchMode === 'none'"
+  >
+    <oxy-date-strip-item
+      :dates="displayWeeks[0].dates"
+      :color="color"
+      :activeBgColor="activeBgColor"
+      :activeColor="activeColor"
+      :bgColor="bgColor"
+      :radius="radius"
+      :switchMode="switchMode"
+      :shape="shape"
+      @click="onClick"
+    ></oxy-date-strip-item>
+  </scroll-view>
+  <swiper
+    v-else
+    :class="`oxy-date-strip ${customClass}`"
+    :style="rootStyle"
+    :current="currentWeekIndex"
+    :circular="swiperCircular"
+    @change="swiperChange"
+  >
+    <swiper-item v-for="(week, g) in displayWeeks" :key="g">
+      <oxy-date-strip-item
+        :dates="week.dates"
+        :color="color"
+        :activeBgColor="activeBgColor"
+        :activeColor="activeColor"
+        :bgColor="bgColor"
+        :radius="radius"
+        :switchMode="switchMode"
+        :shape="shape"
+        @click="onClick"
+      ></oxy-date-strip-item>
+    </swiper-item>
+  </swiper>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-date-strip',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyDateStripItem from '../oxy-date-strip-item/oxy-date-strip-item.vue'
+import { ref, computed, watch, onMounted, nextTick, reactive } from 'vue'
+import { objToStyle, unitConvertWithDefault } from '../common/util'
+import { getWeekRange, addDays, addWeeks, calcType, daysBetween } from './utils'
+import { dateStripProps, type WeekDateCollection, type DateStriPDay } from './types'
+
+const props = defineProps(dateStripProps)
+const emit = defineEmits(['change', 'select', 'update:modelValue', 'input'])
+
+// 当前选中的周索引
+const currentWeekIndex = ref(0)
+const scrollLeft = ref(0)
+// 是否循环滚动
+const swiperCircular = ref(true)
+const selectedDate = ref<Date | null>(null)
+// 计算一周的星期顺序
+const firstDayOfWeek = computed((): number => Math.min(Math.max(props.firstDayOfWeek, 0), 6))
+
+// 计算最小和最大日期
+const today = new Date()
+const minDate = computed((): Date => (props.minDate !== null ? new Date(props.minDate!) : today))
+const maxDate = computed((): Date => (props.maxDate !== null ? new Date(props.maxDate!) : addDays(today, 31)))
+
+const days = computed((): number => {
+  return daysBetween(maxDate.value, minDate.value)
+})
+
+const rootStyle = computed(() => {
+  const style: Record<string, any> = {}
+  if (props.height) {
+    style['height'] = props.height
+  }
+  if (props.bgColor) {
+    style['background'] = props.bgColor
+  }
+  return `${objToStyle(style)}${props.customStyle}`
+})
+
+const cache = new Map<number, WeekDateCollection>()
+const createWeek = (currentStartDate: Date, length: number): WeekDateCollection => {
+  const dates: DateStriPDay[] = []
+  const time = currentStartDate.getTime()
+  if (cache.has(time)) {
+    return cache.get(time)!
+  }
+  for (let i = 0; i < length; i++) {
+    const date = new Date(time)
+    date.setDate(currentStartDate.getDate() + i)
+    const week = date.getDay()
+    const year = date.getFullYear()
+    const month = date.getMonth() + 1
+    const day = date.getDate()
+    const dateObj = reactive<DateStriPDay>({
+      key: `${year}-${month}-${day}`,
+      date,
+      year,
+      month,
+      day,
+      text: `${day}`.padStart(2, '0'),
+      type: calcType(date, minDate.value, maxDate.value, selectedDate.value, props.disableDate),
+      prefix: props.weekdays[week]
+    })
+    dates.push(props.format !== null ? props.format!(dateObj) : dateObj)
+  }
+  const obj: WeekDateCollection = {
+    start: new Date(dates[0].year, dates[0].month - 1, dates[0].day).getTime(),
+    end: new Date(dates[length - 1].year, dates[length - 1].month - 1, dates[length - 1].day).getTime(),
+    dates
+  } as WeekDateCollection
+  return obj
+}
+
+const currentDate = ref<Date>(today)
+
+// 计算要显示的三周数据
+const displayWeeks = computed((): WeekDateCollection[] => {
+  const weeks: WeekDateCollection[] = []
+  if (props.switchMode === 'week') {
+    const currentRange = getWeekRange(currentDate.value, firstDayOfWeek.value)
+    const offsetMap = new Map<number, number[]>([
+      [0, [0, 1, -1]],
+      [1, [-1, 0, 1]],
+      [2, [1, -1, 0]]
+    ])
+    let indices = offsetMap.get(currentWeekIndex.value)!
+    indices.forEach((i) => {
+      const weekDate = addWeeks(currentRange.start, i)
+      weeks.push(createWeek(weekDate, 7))
+    })
+  } else {
+    weeks.push(createWeek(minDate.value, days.value))
+  }
+  return weeks
+})
+
+const swiperChange = (event: any) => {
+  const delta = event.detail.current - currentWeekIndex.value
+  const newDate = addWeeks(currentDate.value, delta == 1 || delta == -2 ? 1 : -1)
+  currentDate.value = newDate
+  currentWeekIndex.value = event.detail.current
+}
+
+const onClick = (day: DateStriPDay) => {
+  if (day.type == 'disabled') return
+  selectedDate.value = day.date
+  const v = day.date.getTime()
+  emit('change', v)
+  emit('select', v)
+  emit('update:modelValue', v)
+}
+
+const scrollToDate = (date: Date) => {
+  currentDate.value = date
+  if (props.switchMode !== 'none') return
+  scrollLeft.value = unitConvertWithDefault(props.gridWidth, { defaultUnit: 'rpx' }) * daysBetween(date, minDate.value)
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (!value) return
+    selectedDate.value = new Date(value)
+  },
+  { deep: true, immediate: true }
+)
+
+onMounted(() => {
+  nextTick(() => {
+    scrollToDate(currentDate.value)
+  })
+})
+
+defineExpose({
+  scrollToDate
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-date-strip/types.ts

@@ -0,0 +1,98 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+
+import { baseProps, makeArrayProp, makeNumberProp, makeStringProp } from '../common/props'
+
+export type DateType = 'selected' | 'disabled' | ''
+export type DisableDate = (date: Date) => boolean
+export type FormatDate = (day: DateStriPDay) => DateStriPDay
+
+export type DateStripSwitchMode = 'week' | 'none'
+export type DateStripShape = 'square' | 'circle' | 'none'
+
+/**
+ * 定义一个表示周范围的类
+ */
+export type WeekRange = {
+  start: Date
+  end: Date
+}
+
+export type DateStriPDay = {
+  date: Date
+  key: string
+  day: number
+  year: number
+  month: number
+  text: string
+  type: DateType
+  prefix: string
+  suffix?: string
+}
+
+export type WeekDateCollection = {
+  start: number
+  end: number
+  dates: DateStriPDay[]
+}
+
+export const dateStripProps = {
+  ...baseProps,
+  // 当前选择的日期
+  modelValue: {
+    type: [Number, null] as PropType<number | null>,
+    default: null
+  },
+  // 日期行高
+  height: makeStringProp(''),
+  // 第一天从星期几开始，默认 1 = 周一
+  firstDayOfWeek: makeNumberProp(0),
+  // 日期格式，可选
+  format: {
+    type: Function as PropType<FormatDate>,
+    default: null
+  },
+  // 最大可选日期，不传则默认半年后
+  maxDate: {
+    type: [Number, null] as PropType<number | null>,
+    default: null
+  },
+  // 最小可选日期，不传则默认今天
+  minDate: {
+    type: [Number, null] as PropType<number | null>,
+    default: null
+  },
+  // 网格宽度
+  gridWidth: makeStringProp('100rpx'),
+  // 主题色，对底部按钮和选中日期生效
+  color: makeStringProp(''),
+  // 选中日期的背景色
+  activeBgColor: makeStringProp(''),
+  // 选中日期的文字颜色
+  activeColor: makeStringProp(''),
+  // 背景色
+  bgColor: makeStringProp(''),
+  // 圆角半径
+  radius: makeStringProp(''),
+  // 切换模式，'week' 或 'none'
+  switchMode: makeStringProp<DateStripSwitchMode>('week'),
+  // 形状，'square'、'circle' 或 'none'
+  shape: makeStringProp<DateStripShape>('square'),
+  // 星期几的名称数组
+  weekdays: {
+    ...makeArrayProp<string>(),
+    default: () => ['日', '一', '二', '三', '四', '五', '六']
+  },
+  // 禁用日期函数
+  disableDate: {
+    type: Function as PropType<DisableDate>,
+    default: null
+  }
+}
+
+export type DateStripProps = ExtractPropTypes<typeof dateStripProps>
+
+export type DateStripExpose = {
+  scrollToDate: (date: Date) => void
+}
+
+export type DateStripInstance = ComponentPublicInstance<DateStripProps, DateStripExpose>