oxy-uni-ui 1.2.0 → 2.0.0

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: 8rpx;
+				padding-top: 8rpx;
+			}
+		}
+		&--circle {
+			.oxy-date-strip-item__grid-prefix {
+				padding-bottom: 8rpx;
+			}
+			.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/index.scss

@@ -21,7 +21,7 @@
 
     @include e(region) {
       color: $-dark-color;
-  
+
       @include when(active) {
         background: $-picker-region-bg-active-color;
         color: $-dark-color;
@@ -29,7 +29,7 @@
     }
   }
 }
- 
+
 
 @include b(datetime-picker) {
   @include edeep(cell) {
@@ -52,13 +52,13 @@
         font-size: $-cell-icon-size-large;
       }
     }
-    
+
     .oxy-cell__value--ellipsis {
       view {
         @include lineEllipsis;
         width: 100%;
       }
-      
+
       text {
         @include lineEllipsis;
         max-width: 100%;
@@ -69,7 +69,7 @@
   @include e(placeholder) {
     color: $-input-placeholder-color;
   }
-  
+
   @include edeep(arrow) {
     display: block;
     font-size: $-cell-icon-size;
@@ -85,7 +85,7 @@
   }
 
   @include edeep(popup) {
-    border-radius: 16px 16px 0px 0px;
+    border-radius: 32rpx 32rpx 0 0;
   }
 
   @include e(wraper) {
@@ -110,7 +110,7 @@
     font-size: $-picker-toolbar-fs;
     color: $-picker-toolbar-finish-color;
     background: transparent;
-    padding: 24px 15px 14px 15px;
+    padding: 48rpx 30rpx 28rpx 30rpx;
 
     @include m(cancel) {
       color: $-picker-toolbar-cancel-color;
@@ -135,9 +135,9 @@
     display: inline-block;
     color: $-picker-region-color;
     text-align: center;
-    padding: 14px 0;
+    padding: 28rpx 0;
     font-size: $-picker-region-fs;
-    line-height: 16px;
+    line-height: 32rpx;
     transition: all 0.15s ease-out;
 
     @include when(active) {
@@ -147,8 +147,8 @@
   }
 
   @include e(region-time) {
-    font-size: 16px;
-    margin-top: 2px;
+    font-size: 32rpx;
+    margin-top: 4rpx;
   }
 
   @include e(hidden) {

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

@@ -57,6 +57,7 @@
       position="bottom"
       :hide-when-close="false"
       :close-on-click-modal="closeOnClickModal"
+      :max-width="popupMaxWidth"
       :safe-area-inset-bottom="safeAreaInsetBottom"
       :z-index="zIndex"
       :root-portal="rootPortal"
@@ -512,7 +513,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

@@ -157,6 +157,11 @@ export const datetimePickerProps = {
    * 弹窗层级
    */
   zIndex: makeNumberProp(15),
+  /**
+   * 弹层最大宽度，支持 `rpx`、`px`、`%` 等单位；
+   * `%` 在弹层打开时按屏幕宽度换算为 `rpx`
+   */
+  popupMaxWidth: makeStringProp('1200rpx'),
   /**
    * 表单域 model 字段名，在使用表单校验功能的情况下，该属性是必填的
    */
@@ -196,7 +201,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-drop-menu/index.scss

@@ -66,9 +66,9 @@
     &::after {
       position: absolute;
       content: '';
-      width: 19px;
+      width: 38rpx;
       height: $-drop-menu-line-height;
-      bottom: 6px;
+      bottom: 12rpx;
       left: 50%;
       transform: translate(-50%, 0);
       background: $-drop-menu-line-color;
@@ -85,6 +85,6 @@
 
   @include edeep(arrow) {
     font-size: $-drop-menu-arrow-fs;
-    margin-left: 2px;
+    margin-left: 4rpx;
   }
 }

package/components/oxy-drop-menu/oxy-drop-menu.vue

@@ -47,7 +47,7 @@ export default {
 import { computed, getCurrentInstance, inject, onBeforeMount, ref, watch } from 'vue'
 import { closeOther } from '../common/clickoutside'
 import { type Queue, queueKey } from '../composables/useQueue'
-import { getRect, uuid } from '../common/util'
+import { getRect, unitConvert, uuid } from '../common/util'
 import { useChildren } from '../composables/useChildren'
 import { DROP_MENU_KEY, dropMenuProps } from './types'
 import OxyOverlay from '../oxy-overlay/oxy-overlay.vue'
@@ -59,10 +59,10 @@ const offset = ref<number>(0)
 const windowHeight = ref<number>(0)
 const modalStyle = computed(() => {
   return props.direction === 'down'
-    ? `top: calc(var(--window-top) + ${offset.value}px); bottom: 0;`
+    ? `top: calc(var(--window-top) + ${unitConvert(offset.value, 0, { output: 'px' })}); bottom: 0;`
     : props.direction === 'bottom'
     ? 'top: var(--window-top); bottom: 0;'
-    : `top: 0; bottom: calc(var(--window-bottom) + ${offset.value}px)`
+    : `top: 0; bottom: calc(var(--window-bottom) + ${unitConvert(offset.value, 0, { output: 'px' })})`
 })
 
 const { proxy } = getCurrentInstance() as any

package/components/oxy-drop-menu-item/index.scss

@@ -48,7 +48,7 @@
     display: inline-block;
     color: $-drop-menu-item-color-tip;
     font-size: $-drop-menu-item-fs-tip;
-    margin-left: 2px;
+    margin-left: 4rpx;
   }
 
   @include edeep(icon) {

package/components/oxy-drop-menu-item/oxy-drop-menu-item.vue

@@ -9,6 +9,7 @@
       :z-index="zIndex"
       :duration="duration"
       :position="position"
+      :max-width="popupMaxWidth"
       :custom-style="`position: absolute; pointer-events: auto; max-height: ${popupHeight ? popupHeight : '80%'}; ${customPopupStyle}`"
       :custom-class="customPopupClass"
       :modal="false"
@@ -61,7 +62,7 @@ import { type Queue, queueKey } from '../composables/useQueue'
 import type { PopupType } from '../oxy-popup/types'
 import { useParent } from '../composables/useParent'
 import { DROP_MENU_KEY } from '../oxy-drop-menu/types'
-import { isDef, isFunction } from '../common/util'
+import { isDef, isFunction, unitConvert } from '../common/util'
 import { dorpMenuItemProps, type DropMenuItemExpose } from './types'
 
 const props = defineProps(dorpMenuItemProps)
@@ -90,10 +91,10 @@ const positionStyle = computed(() => {
   if (showWrapper.value && dropMenu) {
     style =
       dropMenu.props.direction === 'down'
-        ? `top: calc(var(--window-top) + ${dropMenu.offset.value}px); bottom: 0;`
+        ? `top: calc(var(--window-top) + ${unitConvert(dropMenu.offset.value, 0, { output: 'px' })}); bottom: 0;`
         : dropMenu.props.direction === 'bottom'
         ? 'top: calc(var(--window-top); bottom: 0;'
-        : `top: 0; bottom: calc(var(--window-bottom) + ${dropMenu.offset.value}px)`
+        : `top: 0; bottom: calc(var(--window-bottom) + ${unitConvert(dropMenu.offset.value, 0, { output: 'px' })})`
   } else {
     style = ''
   }

package/components/oxy-drop-menu-item/types.ts

@@ -76,6 +76,11 @@ export const dorpMenuItemProps = {
    * 弹出层高度  这里设置了 就取这里的
    */
   popupHeight: makeStringProp(''),
+  /**
+   * 弹层最大宽度，支持 `rpx`、`px`、`%` 等单位；
+   * `%` 在弹层打开时按屏幕宽度换算为 `rpx`
+   */
+  popupMaxWidth: makeStringProp('1200rpx'),
   /**
    * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
    */

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>

package/components/oxy-echarts/types.ts

@@ -0,0 +1,18 @@
+import type { ExtractPropTypes } from 'vue'
+import { type ComponentPublicInstance } from 'vue'
+import { type UniEchartsInst } from '../../uni-echarts'
+
+/**
+ * Echarts 组件属性
+ */
+export const echartsProps = {}
+
+export type EchartsProps = ExtractPropTypes<typeof echartsProps>
+export type EchartsExpose = {
+  /**
+   * 当前图表实例
+   */
+  echartsInstance: UniEchartsInst | null
+}
+
+export type EchartsInstance = ComponentPublicInstance<EchartsProps, EchartsExpose>

package/components/oxy-fab/index.scss

@@ -67,44 +67,44 @@
     @include e(transition-enter) {
       @include m(top) {
         opacity: 0;
-        transform: translateY(40px);
+        transform: translateY(80rpx);
       }
 
       @include m(bottom) {
         opacity: 0;
-        transform: translateY(-40px);
+        transform: translateY(-80rpx);
       }
 
       @include m(left) {
         opacity: 0;
-        transform: translateX(40px);
+        transform: translateX(80rpx);
       }
 
       @include m(right) {
         opacity: 0;
-        transform: translateX(-40px);
+        transform: translateX(-80rpx);
       }
     }
 
     @include e(transition-leave-to) {
       @include m(top) {
         opacity: 0;
-        transform: translateY(40px);
+        transform: translateY(80rpx);
       }
 
       @include m(bottom) {
         opacity: 0;
-        transform: translateY(-40px);
+        transform: translateY(-80rpx);
       }
 
       @include m(left) {
         opacity: 0;
-        transform: translateX(40px);
+        transform: translateX(80rpx);
       }
 
       @include m(right) {
         opacity: 0;
-        transform: translateX(-40px);
+        transform: translateX(-80rpx);
       }
     }