oxy-uni-ui 1.2.0 → 1.2.3

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))
+}

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

@@ -0,0 +1,94 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(date-strip-item) {
+  display: flex;
+  flex-direction: row;
+  padding: $-date-strip-padding-y $-date-strip-padding-x;
+  box-sizing: border-box;
+  /* #ifndef UNI-APP-X && APP */
+  height: 100%;
+  /* #endif */
+  &--week {
+    flex: 1;
+    .oxy-date-strip-item__grid {
+      flex: 1;
+    }
+  }
+  &--none {
+    .oxy-date-strip-item__grid {
+      width: $-date-strip-grid-width;
+    }
+  }
+  &__grid {
+		/* #ifndef UNI-APP-X && APP */
+		flex-shrink: 0;
+		/* #endif */
+		display: flex;
+		flex-direction: column;
+		margin: 0 4rpx;
+		transition-duration: 300ms;
+		transition-property: background-color, color;
+		transition-timing-function: linear;
+
+		&-prefix,&-day,&-suffix {
+			text-align: center;
+			transition-duration: 200ms;
+			transition-property: color;
+			transition-timing-function: linear;
+		}
+		&-prefix {
+			font-size: $-date-strip-prefix-font-size;
+			color: $-date-strip-prefix-color;
+		}
+		&--none {
+			.oxy-date-strip-item__grid-prefix {
+				padding-bottom: 4px;
+				padding-top: 4px;
+			}
+		}
+		&--circle {
+			.oxy-date-strip-item__grid-prefix {
+				padding-bottom: 4px;
+			}
+			.oxy-date-strip-item__grid-info {
+				border-radius: $-date-strip-grid-circle-radius;
+			}
+		}
+		&--square {
+			border-radius: $-date-strip-square-radius;
+			padding: $-date-strip-grid-square-padding-y $-date-strip-grid-square-padding-x;
+		}
+		&-suffix {
+			position: absolute;
+			top: 50%;
+			transform: translateY(60%);
+			font-size: $-date-strip-suffix-font-size;
+			color: $-date-strip-suffix-color;
+		}
+		&-day {
+			font-size: $-date-strip-font-size;
+			color: $-date-strip-color;
+			font-weight: bold;
+		}
+		&-info {
+			display: flex;
+			flex: 1;
+			justify-content: center;
+			align-items: center;
+			position: relative;
+		}
+		&--active-bg {
+			background-color: $-date-strip-active-color;
+		}
+		&--active-text {
+			color: white;
+			&-none {
+				color:  $-date-strip-active-color;
+			}
+		}
+		&--disabled {
+			opacity: 0.4;
+		}
+	}
+}

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

@@ -0,0 +1,102 @@
+<template>
+  <view :class="`oxy-date-strip-item oxy-date-strip-item--${switchMode} ${customClass}`" :style="customStyle">
+    <view
+      class="oxy-date-strip-item__grid"
+      v-for="item in dates"
+      :style="[
+        styles,
+        item.type == 'selected' && shape == 'square' && activeBgColor != null ? { background: activeBgColor } : {},
+        shape == 'square' && radius != null ? { 'border-radius': radius } : {}
+      ]"
+      :class="[
+        'oxy-date-strip-item__grid--' + shape,
+        {
+          'oxy-date-strip-item__grid--active-bg': shape == 'square' && item.type == 'selected',
+          'oxy-date-strip-item__grid--disabled': item.type == 'disabled',
+          'oxy-date-strip-item__grid--selected': item.type == 'selected'
+        }
+      ]"
+      @click="onClick(item)"
+      :key="item.key"
+    >
+      <text
+        class="oxy-date-strip-item__grid-prefix"
+        :class="{
+          'oxy-date-strip-item__grid--active-text': item.type == 'selected' && shape == 'square',
+          'oxy-date-strip-item__grid--active-text-none': item.type == 'selected' && shape == 'none'
+        }"
+        :style="[item.type == 'selected' && activeColor ? { color: activeColor } : {}]"
+      >
+        {{ item.prefix }}
+      </text>
+      <view
+        class="oxy-date-strip-item__grid-info"
+        :class="{
+          'oxy-date-strip-item__grid--active-bg': shape == 'circle' && item.type == 'selected'
+        }"
+        :style="[
+          item.type == 'selected' && shape == 'circle' && activeBgColor ? { background: activeBgColor } : {},
+          shape == 'square' && radius ? { 'border-radius': radius } : {}
+        ]"
+      >
+        <text
+          class="oxy-date-strip-item__grid-day"
+          :class="{
+            'oxy-date-strip-item__grid--active-text': item.type == 'selected' && shape != 'none',
+            'oxy-date-strip-item__grid--active-text-none': item.type == 'selected' && shape == 'none'
+          }"
+          :style="[item.type == 'selected' && activeColor ? { color: activeColor } : {}]"
+        >
+          {{ item.text }}
+        </text>
+        <text
+          class="oxy-date-strip-item__grid-suffix"
+          :class="{
+            'oxy-date-strip-item__grid--active-text': item.type == 'selected' && shape != 'none',
+            'oxy-date-strip-item__grid--active-text-none': item.type == 'selected' && shape == 'none'
+          }"
+          :style="[item.type == 'selected' && activeColor ? { color: activeColor } : {}]"
+          v-if="item.suffix"
+        >
+          {{ item.suffix }}
+        </text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-date-strip-item',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import { dateStripItemProps } from './types'
+import type { DateStriPDay } from '../oxy-date-strip/types'
+
+const props = defineProps(dateStripItemProps)
+const emit = defineEmits(['click'])
+
+const styles = computed(() => {
+  const style: Record<string, any> = {}
+  if (props.gridWidth && props.switchMode == 'none') {
+    style['width'] = props.gridWidth
+  }
+  return style
+})
+
+const onClick = (day: DateStriPDay) => {
+  emit('click', day)
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

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

@@ -0,0 +1,53 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps } from '../common/props'
+import type { DateStriPDay, DateStripShape, DateStripSwitchMode } from '../oxy-date-strip/types'
+
+export const dateStripItemProps = {
+  ...baseProps,
+  dates: {
+    type: Array as PropType<DateStriPDay[]>,
+    default: () => []
+  },
+  // 网格宽度
+  gridWidth: {
+    type: String,
+    default: null
+  },
+  // 主题色，对底部按钮和选中日期生效
+  color: {
+    type: String,
+    default: null
+  },
+  // 选中日期的背景色
+  activeBgColor: {
+    type: String,
+    default: null
+  },
+  // 选中日期的文字颜色
+  activeColor: {
+    type: String,
+    default: null
+  },
+  // 背景色
+  bgColor: {
+    type: String,
+    default: null
+  },
+  // 圆角半径
+  radius: {
+    type: String,
+    default: null
+  },
+  // 切换模式，'week' 或 'none'
+  switchMode: {
+    type: String as PropType<DateStripSwitchMode>,
+    default: 'week'
+  },
+  // 形状，'square'、'circle' 或 'none'
+  shape: {
+    type: String as PropType<DateStripShape>,
+    default: 'square'
+  }
+}
+
+export type DateStripItemProps = ExtractPropTypes<typeof dateStripItemProps>

package/components/oxy-datetime-picker/oxy-datetime-picker.vue

@@ -512,7 +512,9 @@ function close() {
 
 function showPopup() {
   if (props.disabled || props.readonly) return
-
+  if (isFunction(props.beforeOpen) && !props.beforeOpen()) {
+    return
+  }
   emit('open')
   if (region.value) {
     popupShow.value = true

package/components/oxy-datetime-picker/types.ts

@@ -196,7 +196,11 @@ export const datetimePickerProps = {
   /**
    * 必填标记位置，可选值：before、after
    */
-  markerSide: makeStringProp<'before' | 'after'>('before')
+  markerSide: makeStringProp<'before' | 'after'>('before'),
+  /**
+   * 打开pop之前的校验
+   */
+  beforeOpen: Function as PropType<() => boolean>
 }
 
 export type DatetimePickerDisplayFormat = (items: Record<string, any>[]) => string

package/components/oxy-echarts/index.scss

@@ -0,0 +1,17 @@
+.uni-echarts {
+  position: relative;
+}
+
+.uni-echarts__canvas {
+  width: 100%;
+  height: 100%;
+}
+
+.uni-echarts__mask {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+}

package/components/oxy-echarts/index.ts

@@ -0,0 +1 @@
+export * from '../../uni-echarts'

package/components/oxy-echarts/oxy-echarts.vue

@@ -0,0 +1,32 @@
+<template>
+  <uni-echarts ref="echartsRef" v-bind="$attrs">
+    <slot></slot>
+  </uni-echarts>
+</template>
+<script lang="ts">
+import { ref } from 'vue'
+import { echartsProps } from './types'
+import UniEcharts from '../../../../uni_modules/oxy-uni-ui/uni-echarts/components/uni-echarts/uni-echarts.vue'
+import type { UniEchartsInst } from '../../../../uni_modules/oxy-uni-ui/uni-echarts'
+
+export default {
+  name: 'oxy-echarts',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+const props = defineProps(echartsProps)
+const echartsRef = ref<UniEchartsInst | null>(null)
+defineExpose({
+  echartsInstance: echartsRef
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>