oxy-uni-ui 1.2.3 → 2.0.0

package/components/oxy-footer/oxy-footer.vue

@@ -0,0 +1,78 @@
+<template>
+  <view class="oxy-footer-placeholder" :style="{ height: placeholderHeight }"></view>
+  <view class="oxy-footer-wrapper">
+    <view :class="`oxy-footer ${customClass}`" :style="`background-color: ${backgroundColor};${customStyle}`">
+      <view class="oxy-footer__content" :style="contentStyle">
+        <slot></slot>
+      </view>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'oxy-footer',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script setup lang="ts">
+import { getCurrentInstance, nextTick, onMounted, ref, computed, watch } from 'vue'
+import { footerProps } from './types'
+import { withDefaultUnit } from '../common/util'
+import NodeInfo = UniNamespace.NodeInfo
+
+const props = defineProps(footerProps)
+
+// 占位高度
+const placeholderHeight = ref('')
+
+// 内容样式
+const contentStyle = computed(() => {
+  const style: { height?: string } = {}
+
+  if (props.height && props.height != 0) {
+    style['height'] = withDefaultUnit(props.height)
+  }
+  return style
+})
+
+// 设置内容高度（rpx 语义）
+function setHeight(val: number) {
+  const pxPer100Rpx = uni.upx2px(100)
+  const heightInRpx = pxPer100Rpx ? (val / pxPer100Rpx) * 100 : val * 2
+  placeholderHeight.value = `${heightInRpx}rpx`
+}
+
+const { proxy } = getCurrentInstance()!
+
+// 获取内容高度
+function getHeight() {
+  nextTick(() => {
+    setTimeout(() => {
+      uni
+        .createSelectorQuery()
+        .in(proxy)
+        .select('.oxy-footer')
+        .boundingClientRect((res) => {
+          setHeight(Number((res as NodeInfo).height ?? 0))
+        })
+        .exec()
+    }, 0)
+  })
+}
+
+onMounted(() => {
+  getHeight()
+})
+
+watch([() => props.height, () => props.customStyle, () => props.customClass, () => props.backgroundColor], () => {
+  getHeight()
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-footer/types.ts

@@ -0,0 +1,17 @@
+import { baseProps, makeStringProp, makeNumberProp } from '../common/props'
+
+export const footerProps = {
+  ...baseProps,
+  /**
+   * 固定的内容高度
+   * 类型：number
+   * 默认值：'id'
+   */
+  height: makeNumberProp(0),
+  /**
+   * 背景色
+   * 类型：string
+   * 默认值：''
+   */
+  backgroundColor: makeStringProp('')
+}

package/components/oxy-form-item/types.ts

@@ -4,12 +4,33 @@ import type { FormItemRule } from '../oxy-form/types'
 
 export const formItemProps = {
   ...baseProps,
+  /**
+   * 表单字段标识
+   */
   prop: makeRequiredProp(String),
+  /**
+   * 当前表单项校验规则
+   */
   rules: makeArrayProp<FormItemRule>(),
+  /**
+   * 是否必填
+   */
   required: Boolean,
+  /**
+   * 是否垂直居中
+   */
   center: makeBooleanProp(false),
+  /**
+   * 标签文案
+   */
   label: String,
-  labelWidth: makeStringProp('100px'),
+  /**
+   * 标签宽度
+   */
+  labelWidth: makeStringProp('200rpx'),
+  /**
+   * 是否显示右箭头
+   */
   isLink: Boolean
 }
 

package/components/oxy-gap/oxy-gap.vue

@@ -15,7 +15,7 @@ export default {
 
 <script setup lang="ts">
 import { type CSSProperties, computed } from 'vue'
-import { addUnit, isDef, objToStyle } from '../common/util'
+import { withDefaultUnit, isDef, objToStyle } from '../common/util'
 import { gapProps } from './types'
 
 const props = defineProps(gapProps)
@@ -26,7 +26,7 @@ const rootStyle = computed(() => {
     rootStyle['background'] = props.bgColor
   }
   if (isDef(props.height)) {
-    rootStyle['height'] = addUnit(props.height)
+    rootStyle['height'] = withDefaultUnit(props.height)
   }
   return `${objToStyle(rootStyle)}${props.customStyle}`
 })

package/components/oxy-gap/types.ts

@@ -11,7 +11,7 @@ export const gapProps = {
    */
   safeAreaBottom: makeBooleanProp(false),
   /**
-   * 高度
+   * 高度，number 类型按 `rpx` 语义处理
    */
-  height: makeNumericProp(15)
+  height: makeNumericProp(30)
 }

package/components/oxy-grid/oxy-grid.vue

@@ -73,7 +73,7 @@ watch(
 )
 
 const rootStyle = computed(() => {
-  return `${props.gutter ? 'padding-left:' + props.gutter + 'px;' + 'padding-bottom:' + props.gutter + 'px;' : ''}${props.customStyle}`
+  return `${props.gutter ? 'padding-left:' + props.gutter * 2 + 'rpx;' + 'padding-bottom:' + props.gutter * 2 + 'rpx;' : ''}${props.customStyle}`
 })
 
 const handleChildrenChange = debounce(() => {

package/components/oxy-grid/types.ts

@@ -38,7 +38,7 @@ export const gridProps = {
    */
   bgColor: makeStringProp(''),
   /**
-   * 格子之间的间距，默认单位为px
+   * 格子之间的间距，number 类型按 `rpx` 语义处理
    */
   gutter: Number,
   /**

package/components/oxy-grid-item/index.scss

@@ -140,7 +140,7 @@
   }
 
   @include e(text) {
-    margin-top: 8px;
+    margin-top: 16rpx;
     font-size: $-grid-item-fs;
     line-height: $-grid-item-fs;
     @include lineEllipsis;

package/components/oxy-grid-item/oxy-grid-item.vue

@@ -37,7 +37,7 @@ import OxyBadge from '../oxy-badge/oxy-badge.vue'
 import { onMounted, ref, watch, computed } from 'vue'
 import { useParent } from '../composables/useParent'
 import { GRID_KEY } from '../oxy-grid/types'
-import { deepAssign, isDef, isUndefined, omitBy } from '../common/util'
+import { withDefaultUnit, deepAssign, isDef, isUndefined, omitBy } from '../common/util'
 import { gridItemProps } from './types'
 import type { BadgeProps } from '../oxy-badge/types'
 
@@ -81,8 +81,9 @@ watch(
   () => {
     if (!grid) return
     const width = grid.props.column ? 100 / grid.props.column + '%' : 100 / (childCount.value || 1) + '%'
+    const gutterSize = grid.props.gutter ? withDefaultUnit(grid.props.gutter) : ''
     // 单独定义间隔
-    const gutterStyle = grid.props.gutter ? `padding:${grid.props.gutter}px ${grid.props.gutter}px 0 0; background-color: transparent;` : ''
+    const gutterStyle = gutterSize ? `padding:${gutterSize} ${gutterSize} 0 0; background-color: transparent;` : ''
     // 单独定义正方形
     const squareStyle = grid.props.square ? `background-color:transparent; padding-bottom: 0; padding-top:${width}` : ''
     style.value = `width: ${width}; ${squareStyle || gutterStyle}`
@@ -101,14 +102,15 @@ function init() {
   if (!grid) return
   const children = grid.children
   const width = grid.props.column ? 100 / grid.props.column + '%' : 100 / children.length + '%'
+  const gutterSize = grid.props.gutter ? withDefaultUnit(grid.props.gutter) : ''
   // 单独定义间隔
-  const gutterStyle = grid.props.gutter ? `padding:${grid.props.gutter}px ${grid.props.gutter}px 0 0; background-color: transparent;` : ''
+  const gutterStyle = gutterSize ? `padding:${gutterSize} ${gutterSize} 0 0; background-color: transparent;` : ''
   // 单独定义正方形
   const squareStyle = grid.props.square ? `background-color:transparent; padding-bottom: 0; padding-top:${width}` : ''
   // 间隔+正方形
   gutterContentStyle.value =
-    grid.props.gutter && grid.props.square
-      ? `right: ${grid.props.gutter}px; bottom:${grid.props.gutter}px;height: auto; background-color: ${grid.props.bgColor}`
+    gutterSize && grid.props.square
+      ? `right: ${gutterSize}; bottom:${gutterSize};height: auto; background-color: ${grid.props.bgColor}`
       : `background-color: ${grid.props.bgColor}`
 
   border.value = Boolean(grid.props.border)

package/components/oxy-grid-item/types.ts

@@ -21,7 +21,7 @@ export const gridItemProps = {
   /**
    * 图标大小
    */
-  iconSize: makeStringProp('26px'),
+  iconSize: makeStringProp('52rpx'),
   /**
    * 文字
    */

package/components/oxy-guidance/index.scss

@@ -0,0 +1,75 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(guide){
+  z-index: 1001;
+  @include e(box) {
+    position: absolute;
+    z-index: 10001;
+    transition: all 0.2s;
+
+    &::before {
+      content: '';
+      box-sizing: content-box;
+      height: 100%;
+      width: 100%;
+      border: 1px dashed #fff;
+      border-radius: 8rpx;
+      position: absolute;
+      top: -8rpx;
+      left: -8rpx;
+      padding: 6rpx;
+    }
+
+    @include e(arrow) {
+      height: 20rpx;
+      width: 20rpx;
+      background: #1cbbb4;
+      position: absolute;
+      top: 144rpx;
+      left: 45%;
+      z-index: 10000;
+      transform: rotate(45deg);
+    }
+
+    @include e(tips) {
+      width: 400rpx;
+      box-shadow: 0 4rpx 18rpx 0 rgba(0, 0, 0, 0.1);
+      color: #fff;
+      position: absolute;
+      top: 152rpx;
+      z-index: 10001;
+      padding: 15rpx 20rpx;
+      font-size: 28rpx;
+      border-radius: 12rpx;
+      text-align: justify;
+
+      @include e(tool-btn) {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding-right: 0;
+        margin-top: 20rpx;
+
+        @include e(next) {
+          background: #fff;
+          height: 48rpx;
+          width: 100rpx;
+          text-align: center;
+          border-radius: 8rpx;
+          color: #666;
+          line-height: 48rpx;
+          font-size: 24rpx
+        }
+      }
+    }
+  }
+  @include e(model) {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1000;
+  }
+}

package/components/oxy-guidance/oxy-guidance.vue

@@ -0,0 +1,201 @@
+<template>
+  <view :class="['oxy-guide', customClass]" v-if="showGuide" :style="customStyle" @touchmove.stop.prevent>
+    <view class="oxy-guide__box" :style="guideStyle">
+      <view ref="tips" class="oxy-guide__box__tips" :style="tipPosition">
+        <view class="text">{{ guideInfo.tips }}</view>
+        <view class="oxy-guide__box__tips__tool-btn">
+          <text class="oxy-guide__box__tips__tool-btn-skip" @click="skip">跳过</text>
+          <view class="oxy-guide__box__tips__tool-btn__next" @click="next">{{ guideInfo.next }}</view>
+        </view>
+      </view>
+      <view class="oxy-guide__box__arrow" :style="arrowTop"></view>
+    </view>
+    <!-- 遮罩层，防止点击 -->
+    <view class="oxy-guide__model"></view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-guidance',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue'
+import { unitConvert } from '../common/util'
+import { guidanceProps, type guideListType } from './types'
+import NodeInfo = UniNamespace.NodeInfo
+
+const props = defineProps(guidanceProps)
+
+const stepName = ref('step') //该提示步骤的名称，用于不在重复展示
+
+const guideList = ref([] as guideListType[])
+
+const index = ref(0) // 当前展示的索引
+const showGuide = ref(true) // 是否显示引导
+
+const arrowTop = ref('') //步骤提示三角形的定位
+const tipPosition = ref('') //步骤提示的定位
+const systemInfo = ref({} as UniNamespace.GetSystemInfoResult) //屏幕宽度高度等信息
+const tipWidth = ref(0) //步骤提示默认的宽度
+const guideStyle = ref<Record<string, string | number>>({}) //默认样式
+const toPx = (value: number | string | null | undefined) => unitConvert(value, 0, { output: 'px' })
+
+const { proxy } = getCurrentInstance()!
+
+const guideInfo = computed(() => {
+  return guideList.value.length ? guideList.value[index.value] : ({} as guideListType)
+})
+
+onMounted(() => {
+  guideList.value = props.step.guideList
+  stepName.value = props.step.name
+  systemInfo.value = uni.getSystemInfoSync()
+  const guide = uni.getStorageSync(stepName.value)
+  if (!guide) {
+    getDomInfo()
+  } else {
+    showGuide.value = false
+  }
+})
+
+// 获取dom信息
+function getDomInfo() {
+  const { el } = guideInfo.value
+  nextTick(() => {
+    const query = uni.createSelectorQuery()
+    query.select(el).boundingClientRect()
+    // 回调结果exec一起处理，解决报错增加空回调
+    query.selectViewport().scrollOffset(() => {})
+    query.exec((res) => {
+      if (res[0]) {
+        let data = res[0]
+        let scrollTop = res[1].scrollTop
+        viewTips(data, scrollTop)
+      }
+    })
+  })
+}
+// 重置
+function openGuid() {
+  uni.setStorageSync(stepName.value, '')
+  index.value = 0
+  showGuide.value = true
+  getDomInfo()
+}
+// 跳过新手提示
+function skip() {
+  showGuide.value = false
+  uni.setStorageSync(stepName.value, 'true')
+  uni.pageScrollTo({
+    scrollTop: 0,
+    duration: 100
+  })
+}
+// 下一步
+function next() {
+  if (index.value === guideList.value.length - 1) {
+    showGuide.value = false
+    uni.setStorageSync(stepName.value, 'true')
+    uni.pageScrollTo({
+      scrollTop: 0,
+      duration: 100
+    })
+  } else {
+    index.value += 1
+    getDomInfo()
+  }
+}
+
+const tips = ref()
+
+// 展示新手提示
+function viewTips(data: any, scrollTop: number) {
+  if (data) {
+    // 如果dom宽度大于或者等于窗口宽度,需要重新调整dom展示宽度
+    let newWidth = systemInfo.value.windowWidth - 20
+    if (data.width >= newWidth) {
+      data.width = newWidth
+    }
+    // 如果距离左边为0,自动增加一点左边距
+    if (data.left == 0) {
+      data.left = 10
+    }
+    let domRW = systemInfo.value.windowWidth - data.left
+    let left = 0
+    tipWidth.value = tips.value.$el.clientWidth
+    // 如果dom距离右边没有tips的宽度大的话,就要让tips向左偏移
+    if (domRW < tipWidth.value) {
+      left = domRW - tipWidth.value
+    }
+    // 步骤条展示的高度需要加上屏幕滚动的高度
+    data.top += scrollTop
+    // 根据实际情况需要滚动到展示区域
+    uni.pageScrollTo({
+      scrollTop: data.top > 44 ? data.top - 44 : 0,
+      duration: 100
+    })
+    let obj = Object.assign(guideList.value[index.value], data)
+    // 设置三角形高度
+    let arrowTopHeight = data.height + 9
+    //如果dom在屏幕底部的话，重新调整提示框和三角形的定位
+    let newHeight = systemInfo.value.windowHeight - data.bottom
+    uni
+      .createSelectorQuery()
+      .in(proxy)
+      .select('.oxy-guide__box__tips')
+      .boundingClientRect((res) => {
+        if (newHeight > ((res as NodeInfo).height ?? 0) + 5) {
+          // 设置提示框定位
+          arrowTop.value = `top: ${toPx(arrowTopHeight)};`
+          tipPosition.value = `top: ${toPx(arrowTopHeight + 5)};${
+            left < 0 ? 'right: 0;' : 'left: ' + toPx(left) + ';'
+          }background: linear-gradient(180deg, #1cbbb4, #0081ff);`
+        } else {
+          // 设置提示框定位
+          arrowTop.value = `top: ${toPx(-19)};`
+          tipPosition.value = `top: ${toPx(-14)};${
+            left < 0 ? 'right: 0;' : 'left: ' + toPx(left) + ';'
+          }transform: translateY(-100%);background: linear-gradient(0deg, #1cbbb4, #0081ff);`
+        }
+      })
+      .exec()
+    // 重新设置guideList的值
+    guideList.value.splice(index.value, 1, obj)
+    guideStyle.value = getStyle()
+  } else {
+    index.value += 1
+    getDomInfo()
+  }
+}
+// 获取步骤提示的主要样式
+function getStyle() {
+  const { width, height, left, top, style = {} } = guideInfo.value
+  const newstyle: Record<string, string | number> = {
+    width: toPx(width),
+    height: toPx(height),
+    left: toPx(left),
+    top: toPx(top),
+    boxShadow: `rgb(33 33 33 / 80%) ${toPx(0)} ${toPx(0)} ${toPx(0)} ${toPx(0)}, rgb(33 33 33 / 50%) ${toPx(0)} ${toPx(0)} ${toPx(0)} ${toPx(5000)}`,
+    borderRadius: '8rpx',
+    margin: '0'
+  }
+  Object.assign(newstyle, style)
+  return newstyle
+}
+
+defineExpose({
+  openGuid
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-guidance/types.ts

@@ -0,0 +1,33 @@
+import type { PropType } from 'vue'
+import { baseProps } from '../common/props'
+
+export type guideListType = {
+  el: string
+  tips: string
+  next: string
+  width?: number
+  height?: number
+  left?: number
+  top?: number
+  style?: Record<string, string | number>
+}
+
+export type stepType = {
+  name: string
+  guideList: Array<guideListType>
+}
+
+export const guidanceProps = {
+  ...baseProps,
+
+  /**
+   * 步骤集合
+   * 类型: Object
+   * 默认值: null
+   */
+  step: {
+    required: true as const,
+    type: Object as PropType<stepType>,
+    default: null
+  }
+}

package/components/oxy-icon/oxy-icon.vue

@@ -17,7 +17,7 @@ export default {
 
 <script lang="ts" setup>
 import { computed, type CSSProperties } from 'vue'
-import { addUnit, isDef, objToStyle } from '../common/util'
+import { withDefaultUnit, isDef, objToStyle } from '../common/util'
 import { iconProps } from './types'
 
 const props = defineProps(iconProps)
@@ -38,7 +38,7 @@ const rootStyle = computed(() => {
     style['color'] = props.color
   }
   if (props.size) {
-    style['font-size'] = addUnit(props.size)
+    style['font-size'] = withDefaultUnit(props.size)
   }
   return `${objToStyle(style)} ${props.customStyle}`
 })

package/components/oxy-icon/types.ts

@@ -11,7 +11,7 @@ export const iconProps = {
    */
   color: String,
   /**
-   * 图标的字体大小
+   * 图标的字体大小，number 类型按 `rpx` 语义处理
    */
   size: numericProp,
   /**

package/components/oxy-img/oxy-img.vue

@@ -27,7 +27,7 @@ export default {
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import { addUnit, isDef, objToStyle } from '../common/util'
+import { withDefaultUnit, isDef, objToStyle } from '../common/util'
 import { imgProps } from './types'
 
 const props = defineProps(imgProps)
@@ -40,13 +40,13 @@ const emit = defineEmits<{
 const rootStyle = computed(() => {
   const style: Record<string, string | number> = {}
   if (isDef(props.height)) {
-    style['height'] = addUnit(props.height)
+    style['height'] = withDefaultUnit(props.height)
   }
   if (isDef(props.width)) {
-    style['width'] = addUnit(props.width)
+    style['width'] = withDefaultUnit(props.width)
   }
   if (isDef(props.radius)) {
-    style['border-radius'] = addUnit(props.radius)
+    style['border-radius'] = withDefaultUnit(props.radius)
     style['overflow'] = 'hidden'
   }
   return `${objToStyle(style)}${props.customStyle}`

package/components/oxy-img/types.ts

@@ -39,15 +39,15 @@ export const imgProps = {
    */
   lazyLoad: makeBooleanProp(false),
   /**
-   * 宽度，默认单位为px
+   * 宽度，number 类型按 `rpx` 语义处理，也支持 `px/rpx`
    */
   width: numericProp,
   /**
-   * 高度，默认单位为px
+   * 高度，number 类型按 `rpx` 语义处理，也支持 `px/rpx`
    */
   height: numericProp,
   /**
-   * 圆角大小，默认单位为px
+   * 圆角大小，number 类型按 `rpx` 语义处理，也支持 `px/rpx`
    */
   radius: numericProp,
   /**