oxy-uni-ui 1.1.0 → 1.2.3

package/components/oxy-corner/index.scss

@@ -14,6 +14,9 @@
     width: 80px;
     height: 80px;
     overflow: hidden;
+    @include when(round) {
+      border-top-right-radius: $-corner-radius;
+    }
     @include when(primary) {
       .oxy-corner__text {
         @include corner-type-style($-corner-color, $-corner-primary-bg);
@@ -23,6 +26,11 @@
           @include corner-type-style($-corner-primary-color, $-corner-horizontal-primary-bg);
         }
       }
+      &.is-embedded {
+        .oxy-corner__text {
+          @include corner-type-style($-corner-primary-color, $-corner-embedded-primary-bg);
+        }
+      }
     }
     @include when(info) {
       .oxy-corner__text {
@@ -33,6 +41,11 @@
           @include corner-type-style($-corner-info-color, $-corner-horizontal-info-bg);
         }
       }
+      &.is-embedded {
+        .oxy-corner__text {
+          @include corner-type-style($-corner-info-color, $-corner-embedded-info-bg);
+        }
+      }
     }
     @include when(success) {
       .oxy-corner__text {
@@ -43,6 +56,11 @@
           @include corner-type-style($-corner-success-color, $-corner-horizontal-success-bg);
         }
       }
+      &.is-embedded {
+        .oxy-corner__text {
+          @include corner-type-style($-corner-success-color, $-corner-embedded-success-bg);
+        }
+      }
     }
     @include when(warning) {
       .oxy-corner__text {
@@ -53,6 +71,11 @@
           @include corner-type-style($-corner-warning-color, $-corner-horizontal-warning-bg);
         }
       }
+      &.is-embedded {
+        .oxy-corner__text {
+          @include corner-type-style($-corner-warning-color, $-corner-embedded-warning-bg);
+        }
+      }
     }
     @include when(danger) {
       .oxy-corner__text {
@@ -63,12 +86,21 @@
           @include corner-type-style($-corner-danger-color, $-corner-horizontal-danger-bg);
         }
       }
+      &.is-embedded {
+        .oxy-corner__text {
+          @include corner-type-style($-corner-danger-color, $-corner-embedded-danger-bg);
+        }
+      }
     }
     &:not(.is-horizontal) {
       &.is-top-left{
         top: 0;
         left: 0;
         right: auto;
+        &.is-round {
+          border-top-right-radius: 0;
+          border-top-left-radius: $-corner-radius;
+        }
         .oxy-corner__text {
           transform: rotate(-45deg);
           top: 10px;
@@ -79,6 +111,10 @@
         bottom: 0;
         left: 0;
         top: auto;
+        &.is-round {
+          border-top-right-radius: 0;
+          border-bottom-left-radius: $-corner-radius;
+        }
         .oxy-corner__text {
           transform: rotate(-135deg);
           bottom: 10px;
@@ -94,6 +130,10 @@
         bottom: 0;
         right: 0;
         top: auto;
+        &.is-round {
+          border-top-right-radius: 0;
+          border-bottom-right-radius: $-corner-radius;
+        }
         .oxy-corner__text {
           transform: rotate(135deg);
           bottom: 10px;
@@ -105,6 +145,62 @@
           }
         }
       }
+      &.is-embedded {
+        &.is-top-left{
+          &::after {
+            left: auto;
+            right: -6px;
+            bottom: 0;
+            transform: skewX(-30deg);
+          }
+          .oxy-corner__text {
+            transform: none;
+            top: 0;
+            left: 0;
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 32px;
+            padding-left: 0;
+            padding-right: 12px;
+          }
+        }
+        &.is-bottom-left{
+          &::after {
+            left: auto;
+            right: -6px;
+            bottom: 0;
+            transform: skewX(30deg);
+          }
+          .oxy-corner__text {
+            transform: none;
+            bottom: 0;
+            left: 0;
+            border-bottom-left-radius: 0;
+            border-top-right-radius: 32px;
+            padding-left: 0;
+            padding-right: 12px;
+            > span{
+              transform: none;
+            }
+          }
+        }
+        &.is-bottom-right{
+          &::after {
+            left: -6px;
+            bottom: 0;
+            transform: skewX(-30deg);
+          }
+          .oxy-corner__text {
+            transform: none;
+            bottom: 0;
+            right: 0;
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 32px;
+            > span{
+              transform: none;
+            }
+          }
+        }
+      }
       .oxy-corner__text {
         width: 106px;
         height: 32px;
@@ -134,5 +230,29 @@
         text-align: right;
       }
     }
+    &.is-embedded {
+      width: 106px;
+      height: 32px;
+      &::after {
+        content: '';
+        position: absolute;
+        left: -6px;
+        bottom: 0;
+        width: 16px;
+        height: 32px;
+        background-color: #ffffff;
+        transform: skewX(30deg);
+      }
+      .oxy-corner__text {
+        right: 0;
+        top: 0;
+        transform: none;
+        padding-left: 12px;
+        box-sizing: border-box;
+        font-size: $-corner-embedded-font-size;
+        font-weight: $-corner-embedded-font-weight;
+        border-bottom-left-radius: 32px;
+      }
+    }
   }
-}
+}

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'
 
@@ -30,7 +31,7 @@ const props = defineProps(cornerProps)
 const cornerClass = ref<string>('')
 
 watch(
-  [() => () => props.position, () => props.mode],
+  [() => () => props.position, () => props.mode, () => props.round],
   () => {
     computeCornerClass()
   },
@@ -49,15 +50,27 @@ 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() {
-  const { type, position, mode } = props
+  const { type, position, mode, round } = props
   let cornerClassList: string[] = []
   type && cornerClassList.push(`is-${type}`)
   position && cornerClassList.push(`is-${position}`)
   mode && cornerClassList.push(`is-${mode}`)
+  round && cornerClassList.push('is-round')
   cornerClass.value = cornerClassList.join(' ')
 }
 </script>

package/components/oxy-corner/types.ts

@@ -3,7 +3,7 @@ import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
 
 export type CornerType = 'primary' | 'info' | 'success' | 'warning' | 'danger'
 export type CornerPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
-export type CornerMode = '' | 'horizontal'
+export type CornerMode = '' | 'horizontal' | 'embedded'
 
 export const cornerProps = {
   ...baseProps,
@@ -24,10 +24,17 @@ export const cornerProps = {
    */
   position: makeStringProp<CornerPosition>('top-right'),
 
+  /**
+   * 圆角类型
+   * 类型：boolean
+   * 默认值：false
+   */
+  round: makeBooleanProp(false),
+
   /**
    * 角标模式
    * 类型：string
-   * 可选值：'horizontal'
+   * 可选值：'horizontal' / 'embedded'
    * 默认值：''
    */
   mode: makeStringProp<CornerMode>(''),
@@ -37,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-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, unitConvert } 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 = unitConvert(props.gridWidth || 50) * 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(''),
+  // 主题色，对底部按钮和选中日期生效
+  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>

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

@@ -0,0 +1,67 @@
+import type { WeekRange, DateType, DisableDate } from './types'
+
+/**
+ * 获取指定日期所在周的日期范围。
+ * @param {Date} date - 指定日期。
+ * @param {number} firstDayOfWeek - 一周的第一天，0 表示周日，1 表示周一，以此类推。
+ * @returns {WeekRange} 返回一个包含周起始和结束日期的对象。
+ */
+
+export function getWeekRange(date: Date, firstDayOfWeek: number): WeekRange {
+  const start = new Date(date.getTime())
+  const dayOffset = (date.getDay() - firstDayOfWeek + 7) % 7
+  start.setDate(start.getDate() - dayOffset)
+
+  const end = new Date(start.getTime())
+  end.setDate(end.getDate() + 6)
+  return { start, end } as WeekRange
+}
+
+/**
+ * 向指定日期添加天数。
+ * @param {Date} date - 基础日期。
+ * @param {number} days - 要添加的天数，可以是正数或负数。
+ * @returns {Date} 返回一个新的日期对象，该对象是基础日期加上指定天数后的结果。
+ */
+export function addDays(date: Date, days: number): Date {
+  const result = new Date(date.getTime())
+  result.setDate(result.getDate() + days)
+  return result
+}
+
+export function addWeeks(date: Date, weeks: number): Date {
+  const result = new Date(date.getTime())
+  result.setDate(result.getDate() + weeks * 7)
+  return result
+}
+
+/**
+ * 判断两个日期是否表示同一天（忽略时间部分）。
+ *
+ * @param date1 - 第一个日期。
+ * @param date2 - 第二个日期。
+ * @returns 如果两个日期是同一天，返回 true；否则返回 false。
+ */
+function isSameDay(date1: Date, date2: Date): boolean {
+  return date1.getFullYear() == date2.getFullYear() && date1.getMonth() == date2.getMonth() && date1.getDate() == date2.getDate()
+}
+export function calcType(date: Date, minDate: Date, maxDate: Date, selectedDate: Date | null, disableDate?: DisableDate): DateType {
+  // 检查日期是否早于 minDate 或晚于 maxDate
+  if (date.getTime() < minDate.getTime() || date.getTime() > maxDate.getTime()) {
+    return 'disabled'
+  }
+  if (disableDate && disableDate(date)) {
+    return 'disabled'
+  }
+  // 如果 selectedDate 不为 null，检查日期是否等于 selectedDate
+  if (selectedDate != null && isSameDay(date, selectedDate)) {
+    return 'selected'
+  }
+  return ''
+}
+
+export function daysBetween(date1: Date, date2: Date): number {
+  // 将两个日期转换为毫秒
+  const diffInMilliseconds = Math.abs(date2.getTime() - date1.getTime())
+  return Math.floor(diffInMilliseconds / (1000 * 3600 * 24))
+}