oxy-uni-ui 1.2.0 → 2.0.0

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-global-loading/oxy-global-loading.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import { ref, nextTick, watch } from 'vue'
+import { useToast } from '../oxy-toast'
+import { storeToRefs } from 'pinia'
+import { useGlobalLoading } from '../composables/useGlobalLoading'
+import { getCurrentPath } from '../common/path'
+
+const { loadingOptions, currentPage } = storeToRefs(useGlobalLoading())
+
+const { close: closeGlobalLoading } = useGlobalLoading()
+
+const loading = useToast('globalLoading')
+
+// #ifdef MP-ALIPAY
+const hackAlipayVisible = ref(false)
+
+nextTick(() => {
+  hackAlipayVisible.value = true
+})
+// #endif
+
+watch(
+  () => loadingOptions.value,
+  (newVal) => {
+    if (newVal && newVal.show) {
+      if (currentPage.value === getCurrentPath()) {
+        loading.loading(loadingOptions.value)
+      }
+    } else {
+      loading.close()
+    }
+  }
+)
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<template>
+  <!-- #ifdef MP-ALIPAY -->
+  <oxy-toast v-if="hackAlipayVisible" selector="globalLoading" :closed="closeGlobalLoading" />
+  <!-- #endif -->
+  <!-- #ifndef MP-ALIPAY -->
+  <oxy-toast selector="globalLoading" :closed="closeGlobalLoading" />
+  <!-- #endif -->
+</template>

package/components/oxy-global-message/oxy-global-message.vue

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import { ref, nextTick, watch } from 'vue'
+import { useMessage } from '../oxy-message-box'
+import { deepClone, isFunction } from '../common/util'
+import { storeToRefs } from 'pinia'
+import { useGlobalMessage } from '../composables/useGlobalMessage'
+import { getCurrentPath } from '../common/path'
+
+const { messageOptions, currentPage } = storeToRefs(useGlobalMessage())
+
+const messageBox = useMessage('globalMessage')
+
+// #ifdef MP-ALIPAY
+const hackAlipayVisible = ref(false)
+
+nextTick(() => {
+  hackAlipayVisible.value = true
+})
+// #endif
+
+watch(
+  () => messageOptions.value,
+  (newVal) => {
+    if (newVal) {
+      if (currentPage.value === getCurrentPath()) {
+        const option = deepClone(newVal)
+        messageBox
+          .show(option)
+          .then((res) => {
+            if (isFunction(option.success)) {
+              option.success(res)
+            }
+          })
+          .catch((err) => {
+            if (isFunction(option.fail)) {
+              option.fail(err)
+            }
+          })
+      }
+    } else {
+      messageBox.close()
+    }
+  }
+)
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<template>
+  <!-- #ifdef MP-ALIPAY -->
+  <oxy-message-box v-if="hackAlipayVisible" selector="globalMessage" />
+  <!-- #endif -->
+  <!-- #ifndef MP-ALIPAY -->
+  <oxy-message-box selector="globalMessage" />
+  <!-- #endif -->
+</template>

package/components/oxy-global-toast/oxy-global-toast.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import { ref, nextTick, watch } from 'vue'
+import { useToast } from '../oxy-toast'
+import { storeToRefs } from 'pinia'
+import { useGlobalToast } from '../composables/useGlobalToast'
+import { getCurrentPath } from '../common/path'
+
+const { toastOptions, currentPage } = storeToRefs(useGlobalToast())
+
+const { close: closeGlobalToast } = useGlobalToast()
+
+const toast = useToast('globalToast')
+
+// #ifdef MP-ALIPAY
+const hackAlipayVisible = ref(false)
+
+nextTick(() => {
+  hackAlipayVisible.value = true
+})
+// #endif
+
+watch(
+  () => toastOptions.value,
+  (newVal) => {
+    if (newVal && newVal.show) {
+      if (currentPage.value === getCurrentPath()) {
+        toast.show(toastOptions.value)
+      }
+    } else {
+      toast.close()
+    }
+  }
+)
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<template>
+  <!-- #ifdef MP-ALIPAY -->
+  <oxy-toast v-if="hackAlipayVisible" selector="globalToast" :closed="closeGlobalToast" />
+  <!-- #endif -->
+  <!-- #ifndef MP-ALIPAY -->
+  <oxy-toast selector="globalToast" :closed="closeGlobalToast" />
+  <!-- #endif -->
+</template>

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