oxy-uni-ui 1.2.3 → 2.1.0

package/components/oxy-fab/oxy-fab.vue

@@ -44,12 +44,13 @@ import OxyButton from '../oxy-button/oxy-button.vue'
 import OxyIcon from '../oxy-icon/oxy-icon.vue'
 import OxyTransition from '../oxy-transition/oxy-transition.vue'
 import { type CSSProperties, computed, ref, watch, inject, getCurrentInstance, onBeforeUnmount, onMounted, nextTick } from 'vue'
-import { getRect, isDef, isH5, objToStyle } from '../common/util'
+import { getRect, isDef, isH5, objToStyle, unitConvert } from '../common/util'
 import { type Queue, queueKey } from '../composables/useQueue'
 import { closeOther, pushToQueue, removeFromQueue } from '../common/clickoutside'
 import { fabProps, type FabExpose } from './types'
 import { reactive } from 'vue'
 import { useRaf } from '../composables/useRaf'
+import { useWindowResize } from '../composables/useWindowResize'
 
 const props = defineProps(fabProps)
 const emit = defineEmits(['update:active', 'click'])
@@ -121,6 +122,24 @@ async function getBounding() {
   bounding.maxTop = screen.height - fabSize.height - bottom
 }
 
+function clampPosition() {
+  if (!inited.value) return
+  const { minLeft, minTop, maxLeft, maxTop } = bounding
+  left.value = Math.min(Math.max(left.value, minLeft), maxLeft)
+  top.value = Math.min(Math.max(top.value, minTop), maxTop)
+}
+
+const handleWindowResize = async () => {
+  await getBounding()
+  if (props.draggable) {
+    clampPosition()
+    return
+  }
+  initPosition()
+}
+
+useWindowResize(handleWindowResize)
+
 function initPosition() {
   const pos = props.position
   const { minLeft, minTop, maxLeft, maxTop } = bounding
@@ -210,8 +229,8 @@ function handleTouchEnd() {
 
 const rootStyle = computed(() => {
   const style: CSSProperties = {
-    top: top.value + 'px',
-    left: left.value + 'px',
+    top: unitConvert(top.value, 0, { output: 'px' }),
+    left: unitConvert(left.value, 0, { output: 'px' }),
     transition: attractTransition.value ? 'all ease 0.3s' : 'none'
   }
   if (isDef(props.zIndex)) {

package/components/oxy-file-list/index.scss

@@ -5,12 +5,12 @@
   position: relative;
   display: flex;
   flex-wrap: wrap;
-  margin: 0 -8px;
+  margin: 0 -16rpx;
   @include e(item) {
     position: relative;
-    width: calc(33.33% - 16px);
+    width: calc(33.33% - 32rpx);
     height: $-file-list-height;
-    margin: 0 8px 32px;
+    margin: 0 16rpx 64rpx;
   }
   @include e(content) {
     display: flex;
@@ -20,7 +20,7 @@
     width: 100%;
     height: 100%;
     border: 1px solid $-color-border;
-    border-radius: 8px;
+    border-radius: $-file-list-card-radius;
     position: relative;
   }
   @include e(picture) {
@@ -28,20 +28,20 @@
     display: block;
     width: 100%;
     height: 100%;
-    border-radius: 8px;
+    border-radius: $-file-list-card-radius;
   }
   @include e(icon) {
-    width: 32px;
-    height: 32px;
+    width: 64rpx;
+    height: 64rpx;
   }
   @include e(name) {
     display: block;
     width: 100%;
-    font-size: $-upload-file-fs;
-    color: $-upload-file-color;
-    padding: 0 4px;
+    font-size: $-file-list-file-name-fs;
+    color: $-file-list-file-name-color;
+    padding: 0 12rpx;
     text-align: center;
-    margin-top: 8px;
+    margin-top: 20rpx;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -59,16 +59,16 @@
     margin: 0;
     .oxy-file-list__list--item {
       width: 100%;
-      background: #f8f9ff;
-      padding: 8px 12px;
-      border-radius: 4px;
+      background: $-file-list-bg;
+      padding: 20rpx 24rpx;
+      border-radius: $-file-list-list-item-radius;
       display: flex;
       flex-direction: row;
       align-items: center;
       .oxy-file-list__icon {
-        width: 24px;
-        height: 24px;
-        margin-right: 8px;
+        width: 48rpx;
+        height: 48rpx;
+        margin-right: 20rpx;
       }
       .oxy-file-list__name {
         flex: 1;
@@ -77,33 +77,34 @@
         padding: 0;
       }
       .oxy-file-list__download {
-        font-size: 18px;
-        color: $-cell-arrow-color;
+        font-size: $-file-list-action-icon-size;
+        color: $-file-list-action-icon-color;
       }
       .oxy-file-list__delete {
-        font-size: 18px;
-        color: $-cell-arrow-color;
-        margin-left: 12px;
+        font-size: $-file-list-action-icon-size;
+        color: $-file-list-action-icon-color;
+        margin-left: 24rpx;
       }
       & + .oxy-file-list__list--item {
-        margin-top: 8px;
+        margin-top: 20rpx;
       }
     }
   }
 
   .oxy-file-list__download-btn {
     position: absolute;
-    top: 6px;
-    right: 6px;
-    background: rgba(0, 0, 0, 0.45);
-    border-radius: 6px;
-    padding: 4px 5px;
+    top: 16rpx;
+    right: 16rpx;
+    background: $-file-list-download-bg;
+    border-radius: $-file-list-card-radius;
+    padding: 12rpx 16rpx;
+    display: flex;
   }
   .oxy-file-list__download {
     color: $-color-white;
   }
   .oxy-file-list__delete {
     color: $-color-white;
-    margin-left: 6px;
+    margin-left: 12rpx;
   }
 }

package/components/oxy-file-list/oxy-file-list.vue

@@ -4,7 +4,7 @@
       <view v-for="(file, index) in props.data" :key="index" class="oxy-file-list__list--item" @click="handleClick(file, index)">
         <image :src="getUploadImage(file)" mode="aspectFill" class="oxy-file-list__icon" />
         <text class="oxy-file-list__name">{{ file.name }}</text>
-        <oxy-loading v-if="props.enableDownload && isDownloading(file)" size="18px" custom-class="oxy-file-list__download" />
+        <oxy-loading v-if="props.enableDownload && isDownloading(file)" size="36rpx" custom-class="oxy-file-list__download" />
         <view @tap.stop="onDownload(file)" v-if="props.enableDownload && !isDownloading(file)">
           <oxy-icon name="download" custom-class="oxy-file-list__download" />
         </view>
@@ -20,7 +20,7 @@
           <image v-else :src="getUploadImage(file)" mode="aspectFill" class="oxy-file-list__icon" @click="handleClick(file, index)" />
           <view v-if="props.enableDownload || props.enableDelete" class="oxy-file-list__download-btn">
             <template v-if="props.enableDownload">
-              <oxy-loading v-if="isDownloading(file)" size="18px" color="#ffffff" custom-class="oxy-file-list__download" />
+              <oxy-loading v-if="isDownloading(file)" size="36rpx" color="#ffffff" custom-class="oxy-file-list__download" />
               <view @tap.stop="onDownload(file)">
                 <oxy-icon name="download" custom-class="oxy-file-list__download" />
               </view>

package/components/oxy-floating-panel/oxy-floating-panel.vue

@@ -35,10 +35,11 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, onBeforeMount, ref, watch, type CSSProperties } from 'vue'
-import { floatingPanelProps } from './type'
-import { addUnit, closest, objToStyle } from '../common/util'
+import { computed, ref, watch, type CSSProperties } from 'vue'
+import { floatingPanelProps } from './types'
+import { closest, objToStyle, unitConvert } from '../common/util'
 import { useTouch } from '../composables/useTouch'
+import { useWindowResize, type WindowResizeResult } from '../composables/useWindowResize'
 
 const touch = useTouch()
 
@@ -61,8 +62,8 @@ const anchors = computed(() => (props.anchors.length >= 2 ? props.anchors : [bou
 
 const rootStyle = computed(() => {
   const style: CSSProperties = {
-    height: addUnit(boundary.value.max),
-    transform: `translateY(calc(100% + ${addUnit(-heightValue.value)}))`,
+    height: unitConvert(boundary.value.max, 0, { output: 'px' }),
+    transform: `translateY(calc(100% + ${unitConvert(-heightValue.value, 0, { output: 'px' })}))`,
     transition: !dragging.value ? `transform ${props.duration}ms cubic-bezier(0.18, 0.89, 0.32, 1.28)` : 'none'
   }
 
@@ -129,10 +130,13 @@ watch(
   { immediate: true }
 )
 
-onBeforeMount(() => {
-  const { windowHeight: _windowHeight } = uni.getSystemInfoSync()
-  windowHeight.value = _windowHeight
-})
+const syncWindowHeight = (res?: WindowResizeResult) => {
+  const resizeHeight = Number(res?.size?.windowHeight ?? res?.windowHeight)
+  const systemHeight = uni.getSystemInfoSync().windowHeight
+  windowHeight.value = Number.isFinite(resizeHeight) && resizeHeight > 0 ? resizeHeight : systemHeight
+}
+
+useWindowResize(syncWindowHeight, { immediate: true })
 </script>
 
 <style lang="scss" scoped>

package/components/oxy-floating-panel/{type.ts → types.ts}

@@ -1,30 +1,30 @@
 import type { ExtractPropTypes } from 'vue'
-import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeNumericProp, truthProp } from '../common/props'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, truthProp } from '../common/props'
 
 export const floatingPanelProps = {
   ...baseProps,
   /**
-   * 面板的显示高度
+   * 面板当前高度
    */
   height: makeNumberProp(0),
   /**
-   * 设置自定义锚点，默认值 [100, windowHeight * 0.6]
+   * 拖拽吸附锚点列表
    */
   anchors: makeArrayProp<number>(),
   /**
-   * 弹出面板是否设置底部安全距离（iphone X 类型的机型）
+   * 是否预留底部安全区
    */
   safeAreaInsetBottom: makeBooleanProp(false),
   /**
-   * 是否显示滚动条，默认值为 true
+   * 内容区是否显示滚动条
    */
   showScrollbar: truthProp,
   /**
-   * 动画时长，单位毫秒，默认值为 300ms
+   * 高度变化动画时长，单位毫秒
    */
-  duration: makeNumericProp(300),
+  duration: makeNumberProp(300),
   /**
-   * 是否允许内容区容器拖拽，默认值为 true
+   * 内容区是否允许拖拽
    */
   contentDraggable: truthProp
 }

package/components/oxy-footer/index.scss

@@ -0,0 +1,19 @@
+@import './../common/abstracts/_mixin.scss';
+@import './../common/abstracts/variable.scss';
+@include b(footer-wrapper) {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  overflow: visible;
+}
+
+@include b(footer) {
+  overflow: visible;
+  padding: 0;
+  background-color: $--footer-bg;
+  @include e(content) {
+    overflow: visible;
+    padding: $--footer-padding;
+  }
+}

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 $-guide-highlight-border-color;
+      border-radius: $-guide-highlight-radius;
+      position: absolute;
+      top: -8rpx;
+      left: -8rpx;
+      padding: 8rpx;
+    }
+
+    @include e(arrow) {
+      height: 20rpx;
+      width: 20rpx;
+      background: $-guide-tip-bg;
+      position: absolute;
+      top: 144rpx;
+      left: 45%;
+      z-index: 10000;
+      transform: rotate(45deg);
+    }
+
+    @include e(tips) {
+      width: 400rpx;
+      box-shadow: $-guide-tip-shadow;
+      color: $-guide-tip-color;
+      position: absolute;
+      top: 152rpx;
+      z-index: 10001;
+      padding: 16rpx 20rpx;
+      font-size: $-fs-content;
+      border-radius: $-guide-tip-radius;
+      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: $-guide-tip-action-bg;
+          height: 48rpx;
+          width: 100rpx;
+          text-align: center;
+          border-radius: $-guide-tip-action-radius;
+          color: $-guide-tip-action-color;
+          line-height: 48rpx;
+          font-size: $-fs-secondary;
+        }
+      }
+    }
+  }
+  @include e(model) {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1000;
+  }
+}