oxy-uni-ui 1.2.0 → 1.2.3

package/components/common/abstracts/variable.scss

@@ -976,6 +976,16 @@ $-text-error-color: var(--oxy-text-error-color, $-color-danger) !default;
 $-text-warning-color: var(--oxy-text-warning-color, $-color-warning) !default;
 $-text-success-color: var(--oxy-text-success-color, $-color-success) !default;
 
+/* link */
+$-link-info-color: var(--oxy-link-info-color, $-color-content) !default;
+$-link-primary-color: var(--oxy-link-primary-color, $-color-theme) !default;
+$-link-error-color: var(--oxy-link-error-color, $-color-danger) !default;
+$-link-warning-color: var(--oxy-link-warning-color, $-color-warning) !default;
+$-link-success-color: var(--oxy-link-success-color, $-color-success) !default;
+$-link-font-size-small: var(--oxy-link-font-size-small, $-fs-content) !default;
+$-link-font-size-medium: var(--oxy-link-font-size-medium, $-fs-title) !default;
+$-link-font-size-large: var(--oxy-link-font-size-large, $-fs-important) !default;
+
 /* video-preview */
 $-video-preview-bg: var(--oxy-video-preview-bg, rgba(0, 0, 0, 0.8)) !default; // 背景色
 $-video-preview-close-color: var(--oxy-video-preview-close-color, #fff) !default; // 图标颜色
@@ -1005,6 +1015,46 @@ $-signature-button-margin-left: var(--oxy-signature-button-margin-left, 8px) !de
 
 
 /* tree */
-$-tree-node-current-bg:var(--oxy-tree-node-current-bg, var(--oxy-color-theme, #4d80ef1a));
+$-tree-node-current-bg:var(--oxy-tree-node-current-bg, #4d80ef1a);
 $-tree-node-current-color:var(--oxy-tree-node-current-color, $-text-primary-color);
 $-tree-node-disabled-color:var(--oxy-tree-node-disabled-color, $-color-icon-disabled);
+$-tree-search-input-color:var(--oxy-tree-search-input-color, #f6f6f6);
+
+/* rich-text */
+$-rich-text-primary-color: var(--oxy-rich-text-primary-color, $-color-content);
+$-rich-text-title-color: var(--oxy-rich-text-title-color, $-color-title);
+$-rich-text-blockquote-border-color: var(--oxy-rich-text-blockquote-border-color, $-color-theme);
+$-rich-text-blockquote-color: var(--oxy-rich-text-blockquote-color, #555);
+$-rich-text-blockquote-bg: var(--oxy-rich-text-blockquote-bg, #f7f8fa);
+$-rich-text-list-color: var(--oxy-rich-text-list-color, #444);
+$-rich-text-a-color: var(--oxy-rich-text-a-color, $-color-theme);
+$-rich-text-strong-color: var(--oxy-rich-text-strong-color, #222);
+$-rich-text-em-color: var(--oxy-rich-text-em-color, #222);
+$-rich-text-hr-color: var(--oxy-rich-text-hr-color, #e5e6eb);
+$-rich-text-table-border-color: var(--oxy-rich-text-table-border-color, #e5e6eb);
+$-rich-text-table-head-bg: var(--oxy-rich-text-table-head-bg, #f7f8fa);
+$-rich-text-table-head-color: var(--oxy-rich-text-table-head-color, #333);
+$-rich-text-table-text-color: var(--oxy-rich-text-table-text-color, #444);
+$-rich-text-code-bg: var(--oxy-rich-text-code-bg, #2d2d2d);
+$-rich-text-code-color: var(--oxy-rich-text-code-color, #f8f8f2);
+$-rich-text-editable-border-color: var(--oxy-rich-text-editable-border-color, #e9e9e9);
+$-rich-text-toolbox-bg: var(--oxy-rich-text-toolbox-bg, #ededed);
+$-rich-text-popup-divider-color: var(--oxy-rich-text-popup-divider-color, gray);
+
+/* date-strip */
+$-date-strip-bg-color: var(--oxy-date-strip-bg-color, $-color-white);
+$-date-strip-height: var(--oxy-date-strip-height, 86px);
+$-date-strip-padding-x: var(--oxy-date-strip-padding-x, 0);
+$-date-strip-padding-y: var(--oxy-date-strip-padding-y, 8px);
+$-date-strip-font-size: var(--oxy-date-strip-font-size, 16px);
+$-date-strip-color: var(--oxy-date-strip-color, $-color-content);
+$-date-strip-prefix-color: var(--oxy-date-strip-prefix-color, $-font-gray-2);
+$-date-strip-prefix-font-size: var(--oxy-date-strip-prefix-font-size, 14px);
+$-date-strip-suffix-color: var(--oxy-date-strip-color, $-font-gray-2);
+$-date-strip-suffix-font-size: var(--oxy-date-strip-suffix-font-size, 14px);
+$-date-strip-active-color: var(--oxy-date-strip-active-color, $-color-theme);
+$-date-strip-square-radius: var(--oxy-date-strip-square-radius, 4px);
+$-date-strip-grid-width: var(--oxy-date-strip-grid-width, 50px);
+$-date-strip-grid-square-padding-x: var(--oxy-date-strip-grid-square-padding-x, 0);
+$-date-strip-grid-square-padding-y: var(--oxy-date-strip-grid-square-padding-y, 6px);
+$-date-strip-grid-circle-radius: var(--oxy-date-strip-grid-circle-radius, 50%);

package/components/common/path.ts

@@ -0,0 +1,9 @@
+/**
+ * 获取当前页面路径
+ * @returns 当前页面路径
+ */
+export function getCurrentPath() {
+  const pages = getCurrentPages()
+  const currentPage = pages[pages.length - 1]
+  return currentPage?.route || ''
+}

package/components/common/util.ts

@@ -25,6 +25,39 @@ export function addUnit(num: number | string) {
   return Number.isNaN(Number(num)) ? `${num}` : `${num}px`
 }
 
+/**
+ * 单位转换函数，将字符串数字或带有单位的字符串转换为数字
+ * @param value 要转换的值，可以是字符串数字或带有单位的字符串
+ * @returns 转换后的数字，如果无法转换则返回0
+ */
+export function unitConvert(value: string | number | null | undefined, base: number = 0): number {
+  // 如果是字符串数字
+  if (isNumeric(value)) {
+    return Number(value)
+  }
+  // 如果有单位
+  if (isString(value)) {
+    const reg = /^-?([0-9]+)?([.]{1}[0-9]+){0,1}(em|rpx|px|%)$/g
+    const results = reg.exec(value)
+    if (!value || !results) {
+      return 0
+    }
+    const unit = results[3]
+    const _value = parseFloat(value)
+    if (unit === 'rpx') {
+      return uni.upx2px(_value)
+    }
+    if (unit === 'px') {
+      return _value * 1
+    }
+    if (unit == '%') {
+      return (_value / 100) * base
+    }
+    // 如果是其他单位，可以继续添加对应的转换逻辑
+  }
+  return 0
+}
+
 /**
  * @description 判断target是否对象
  * @param value
@@ -335,6 +368,15 @@ export function isNumber(value: any): value is number {
   return getType(value) === 'number'
 }
 
+/**
+ * 检查一个值是否为数字类型或表示数字的字符串
+ * @param value 要检查的值，可以是 string 类型或 number 类型
+ * @returns 如果值是数字类型或表示数字的字符串，则返回 true；否则返回 false
+ */
+export function isNumeric(value: any): boolean {
+  return /^(-)?\d+(\.\d+)?$/.test(value)
+}
+
 /**
  * 检查给定值是否为 Promise 对象。
  * @param {unknown} value 要检查的值

package/components/composables/useGlobalLoading.ts

@@ -0,0 +1,42 @@
+import type { ToastOptions } from '../oxy-toast/types'
+import { deepMerge } from '../common/util'
+import { getCurrentPath } from '../common/path'
+
+import { defineStore } from 'pinia'
+
+interface GlobalLoading {
+  loadingOptions: ToastOptions
+  currentPage: string
+}
+
+const defaultOptions: ToastOptions = {
+  show: false
+}
+export const useGlobalLoading = defineStore('global-loading', {
+  state: (): GlobalLoading => ({
+    loadingOptions: defaultOptions,
+    currentPage: ''
+  }),
+  getters: {},
+  actions: {
+    // 加载提示
+    loading(option: ToastOptions | string) {
+      this.currentPage = getCurrentPath()
+      this.loadingOptions = deepMerge(
+        {
+          iconName: 'loading',
+          duration: 0,
+          cover: true,
+          position: 'middle',
+          show: true
+        },
+        typeof option === 'string' ? { msg: option } : option
+      ) as ToastOptions
+    },
+    // 关闭Toast
+    close() {
+      this.loadingOptions = defaultOptions
+      this.currentPage = ''
+    }
+  }
+})

package/components/composables/useGlobalMessage.ts

@@ -0,0 +1,48 @@
+import type { MessageOptions, MessageResult } from '../oxy-message-box/types'
+import { deepMerge, isString } from '../common/util'
+import { defineStore } from 'pinia'
+import { getCurrentPath } from '../common/path'
+
+export type GlobalMessageOptions = MessageOptions & {
+  success?: (res: MessageResult) => void
+  fail?: (res: MessageResult) => void
+}
+
+interface GlobalMessage {
+  messageOptions: GlobalMessageOptions | null
+  currentPage: string
+}
+
+export const useGlobalMessage = defineStore('global-message', {
+  state: (): GlobalMessage => ({
+    messageOptions: null,
+    currentPage: ''
+  }),
+  actions: {
+    show(option: GlobalMessageOptions | string) {
+      this.currentPage = getCurrentPath()
+      this.messageOptions = {
+        ...(isString(option) ? { title: option } : option)
+      }
+    },
+    alert(option: GlobalMessageOptions | string) {
+      const messageOptions = deepMerge({ type: 'alert' }, isString(option) ? { title: option } : option) as MessageOptions
+      messageOptions.showCancelButton = false
+      this.show(messageOptions)
+    },
+    confirm(option: GlobalMessageOptions | string) {
+      const messageOptions = deepMerge({ type: 'confirm' }, isString(option) ? { title: option } : option) as MessageOptions
+      messageOptions.showCancelButton = true
+      this.show(messageOptions)
+    },
+    prompt(option: GlobalMessageOptions | string) {
+      const messageOptions = deepMerge({ type: 'prompt' }, isString(option) ? { title: option } : option) as MessageOptions
+      messageOptions.showCancelButton = true
+      this.show(messageOptions)
+    },
+    close() {
+      this.messageOptions = null
+      this.currentPage = ''
+    }
+  }
+})

package/components/composables/useGlobalToast.ts

@@ -0,0 +1,84 @@
+import type { ToastOptions } from '../oxy-toast/types'
+import { deepMerge } from '../common/util'
+import { defineStore } from 'pinia'
+
+import { getCurrentPath } from '../common/path'
+
+interface GlobalToast {
+  toastOptions: ToastOptions
+  currentPage: string
+}
+
+const defaultOptions: ToastOptions = {
+  duration: 2000,
+  show: false
+}
+export const useGlobalToast = defineStore('global-toast', {
+  state: (): GlobalToast => ({
+    toastOptions: defaultOptions,
+    currentPage: ''
+  }),
+  getters: {},
+  actions: {
+    // 打开Toast
+    show(option: ToastOptions | string) {
+      this.currentPage = getCurrentPath()
+      const options = deepMerge(defaultOptions, typeof option === 'string' ? { msg: option } : option) as ToastOptions
+      this.toastOptions = deepMerge(options, {
+        show: true,
+        position: options.position || 'middle'
+      }) as ToastOptions
+    },
+    // 成功提示
+    success(option: ToastOptions | string) {
+      this.show(
+        deepMerge(
+          {
+            iconName: 'success',
+            duration: 1500
+          },
+          typeof option === 'string' ? { msg: option } : option
+        ) as ToastOptions
+      )
+    },
+    // 关闭提示
+    error(option: ToastOptions | string) {
+      this.show(
+        deepMerge(
+          {
+            iconName: 'error',
+            direction: 'vertical'
+          },
+          typeof option === 'string' ? { msg: option } : option
+        ) as ToastOptions
+      )
+    },
+    // 常规提示
+    info(option: ToastOptions | string) {
+      this.show(
+        deepMerge(
+          {
+            iconName: 'info'
+          },
+          typeof option === 'string' ? { msg: option } : option
+        ) as ToastOptions
+      )
+    },
+    // 警告提示
+    warning(option: ToastOptions | string) {
+      this.show(
+        deepMerge(
+          {
+            iconName: 'warning'
+          },
+          typeof option === 'string' ? { msg: option } : option
+        ) as ToastOptions
+      )
+    },
+    // 关闭Toast
+    close() {
+      this.toastOptions = defaultOptions
+      this.currentPage = ''
+    }
+  }
+})

package/components/composables/useVirtualScroll.ts

@@ -41,6 +41,7 @@ export function useVirtualScroll(options: UseVirtualScrollOptions): UseVirtualSc
 
   // 响应式数据
   const scrollTop = ref<number>(0)
+  const _scrollTop = ref<number>(0)
   const showBackTopBtn = ref<boolean>(false)
   const virtualData = ref<any[]>([])
   const startIndex = ref<number>(0)
@@ -99,7 +100,7 @@ export function useVirtualScroll(options: UseVirtualScrollOptions): UseVirtualSc
     if (!virtual.value) return // 非虚拟模式不处理
 
     if (virtualEngine.value) {
-      const { visibleData, offsetY } = virtualEngine.value.updateVisibleData(scrollTop.value || 0)
+      const { visibleData, offsetY } = virtualEngine.value.updateVisibleData(_scrollTop.value || 0)
       virtualData.value = visibleData
       virtualOffsetY.value = offsetY
     }
@@ -107,7 +108,7 @@ export function useVirtualScroll(options: UseVirtualScrollOptions): UseVirtualSc
 
   // 滚动事件处理
   function onScroll(scrollTopValue: number) {
-    scrollTop.value = scrollTopValue
+    _scrollTop.value = scrollTopValue
     showBackTopBtn.value = scrollTopValue > parseFloat(backToTopThreshold.value)
     updateVisibleData()
   }

package/components/oxy-cell/oxy-cell.vue

@@ -7,7 +7,7 @@
     @click="onClick"
   >
     <view :class="['oxy-cell__wrapper', vertical ? 'is-vertical' : '']">
-      <view v-if="showLeft" class="oxy-cell__left" :style="titleWidth ? 'min-width:' + titleWidth + ';max-width:' + titleWidth + ';' : ''">
+      <view v-if="showLeft" class="oxy-cell__left" :style="leftStyle">
         <text v-if="isRequired && markerSide === 'before'" class="oxy-cell__required oxy-cell__required--left">*</text>
         <!--左侧icon部位-->
         <slot name="icon">
@@ -65,7 +65,7 @@ import { useCell } from '../composables/useCell'
 import { useParent } from '../composables/useParent'
 import { FORM_KEY } from '../oxy-form/types'
 import { cellProps } from './types'
-import { isDef } from '../common/util'
+import { isDef, objToStyle } from '../common/util'
 
 const props = defineProps(cellProps)
 const emit = defineEmits(['click'])
@@ -116,6 +116,19 @@ const showLeft = computed(() => {
   return hasIcon || hasTitle || hasLabel
 })
 
+const leftStyle = computed(() => {
+  const leftStyle: Record<string, any> = {}
+  if (props.titleWidth) {
+    leftStyle['min-width'] = props.titleWidth
+    leftStyle['max-width'] = props.titleWidth
+  }
+  if (props.titlePercent) {
+    leftStyle['flex'] = 'none'
+    leftStyle['width'] = props.titlePercent
+  }
+  return objToStyle(leftStyle)
+})
+
 /**
  * @description 点击cell的handle
  */

package/components/oxy-cell/types.ts

@@ -53,6 +53,10 @@ export const cellProps = {
    * 设置左侧标题宽度
    */
   titleWidth: String,
+  /**
+   * 设置左侧标题占比
+   */
+  titlePercent: String,
   /**
    * 是否垂直居中，默认顶部居中
    */

package/components/oxy-checkbox/index.scss

@@ -73,7 +73,7 @@
   margin-bottom: $-checkbox-margin;
   font-size: 0;
   -webkit-tap-highlight-color: transparent;
-  line-height: 1.2;
+  // line-height: 1.2;
 
   @include when(last-child) {
     margin-bottom: 0;

package/components/oxy-checkbox/oxy-checkbox.vue

@@ -14,8 +14,8 @@
       :class="`oxy-checkbox__shape ${innerShape === 'square' ? 'is-square' : ''} ${customShapeClass}`"
       :style="isChecked && !innerDisabled && innerCheckedColor ? 'color :' + innerCheckedColor : ''"
     >
-      <oxy-icon custom-class="oxy-checkbox__indeterminate" name="decrease" />
-      <oxy-icon custom-class="oxy-checkbox__check" name="check-bold" />
+      <oxy-icon v-if="indeterminate" custom-class="oxy-checkbox__indeterminate" name="decrease" />
+      <oxy-icon v-else custom-class="oxy-checkbox__check" name="check-bold" />
     </view>
     <!--shape为button时只保留oxy-checkbox__label-->
     <view

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

@@ -294,6 +294,9 @@ function showPicker() {
   const { disabled, readonly } = props
 
   if (disabled || readonly) return
+  if (isFunction(props.beforeOpen) && !props.beforeOpen()) {
+    return
+  }
   pickerShow.value = true
   lastPickerColSelected.value = pickerColSelected.value.slice(0)
   lastSelectList.value = selectList.value.slice(0)

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

@@ -152,7 +152,11 @@ export const colPickerProps = {
   /**
    * 必填标记位置，可选值：before、after
    */
-  markerSide: makeStringProp<'before' | 'after'>('before')
+  markerSide: makeStringProp<'before' | 'after'>('before'),
+  /**
+   * 打开pop之前的校验
+   */
+  beforeOpen: Function as PropType<() => boolean>
 }
 
 export type ColPickerProps = ExtractPropTypes<typeof colPickerProps>

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