oxy-uni-ui 1.0.1

package/components/oxy-radio-group/oxy-radio-group.vue

@@ -0,0 +1,51 @@
+<template>
+  <view :class="`oxy-radio-group  ${customClass} ${cell && shape === 'button' ? 'is-button' : ''}`" :style="customStyle">
+    <slot />
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'oxy-radio-group',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { watch } from 'vue'
+import { useChildren } from '../composables/useChildren'
+import { RADIO_GROUP_KEY, radioGroupProps } from './types'
+
+const props = defineProps(radioGroupProps)
+const emit = defineEmits(['change', 'update:modelValue'])
+
+const { linkChildren, children } = useChildren(RADIO_GROUP_KEY)
+
+linkChildren({ props, updateValue })
+
+watch(
+  () => props.shape,
+  (newValue) => {
+    // type: 'dot', 'button', 'check'
+    const type = ['check', 'dot', 'button']
+    if (type.indexOf(newValue) === -1) console.error(`shape must be one of ${type.toString()}`)
+  },
+  { deep: true, immediate: true }
+)
+
+/**
+ * @description 处理radio子节点通知
+ */
+function updateValue(value: string | number | boolean) {
+  emit('update:modelValue', value)
+  emit('change', {
+    value
+  })
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-radio-group/types.ts

@@ -0,0 +1,39 @@
+import { type InjectionKey } from 'vue'
+import type { RadioShape, RadioIconPlacement } from '../oxy-radio/types'
+import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
+
+export type RadioGroupProvide = {
+  props: {
+    modelValue?: string | number | boolean
+    shape?: RadioShape
+    checkedColor?: string
+    disabled?: boolean
+    cell?: boolean
+    size?: string
+    inline?: boolean
+    iconPlacement?: RadioIconPlacement
+  }
+  updateValue: (value: string | number | boolean) => void
+}
+
+export const RADIO_GROUP_KEY: InjectionKey<RadioGroupProvide> = Symbol('oxy-radio-group')
+
+export const radioGroupProps = {
+  ...baseProps,
+  /** 会自动选中value对应的单选框 */
+  modelValue: [String, Number, Boolean],
+  /** 单选框形状，可选值为 dot / button / check，默认为 check */
+  shape: makeStringProp<RadioShape>('check'),
+  /** 选中的颜色，默认为 #4D80F0 */
+  checkedColor: String,
+  /** 是否禁用，默认为 false */
+  disabled: makeBooleanProp(false),
+  /** 表单模式，默认为 false */
+  cell: makeBooleanProp(false),
+  /** 设置大小，默认为空 */
+  size: makeStringProp(''),
+  /** 同行展示，默认为 false */
+  inline: makeBooleanProp(false),
+  /** 图标位置，默认为 left */
+  iconPlacement: makeStringProp<RadioIconPlacement>('auto')
+}

package/components/oxy-rate/index.scss

@@ -0,0 +1,25 @@
+@import './../common/abstracts/_mixin.scss';
+@import './../common/abstracts/variable.scss';
+
+@include b(rate) {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 1;
+
+  @include e(item) {
+    position: relative;
+    display: inline-block;
+    touch-action: none; // 禁用默认触摸行为
+  }
+  @include edeep(item-star) {
+    -webkit-background-clip: text !important;
+    color: transparent;
+  }
+  @include e(item-half) {
+    position: absolute;
+    left: 0;
+    top: 0;
+    overflow: hidden;
+    width: 50%;
+  }
+}

package/components/oxy-rate/oxy-rate.vue

@@ -0,0 +1,178 @@
+<template>
+  <view :class="`oxy-rate ${customClass}`" :style="customStyle" @touchmove="onTouchMove">
+    <view
+      v-for="(rate, index) in rateList"
+      :key="index"
+      :data-index="index"
+      :style="{ 'margin-right': index == rateList.length - 1 ? 0 : space }"
+      class="oxy-rate__item"
+    >
+      <oxy-icon
+        custom-class="oxy-rate__item-star"
+        :name="isActive(rate) ? activeIcon : icon"
+        :size="size"
+        :custom-style="rate === '100%' ? iconActiveStyle : iconStyle"
+        @click="handleClick(index, false)"
+      />
+      <view v-if="props.allowHalf" class="oxy-rate__item-half" @click.stop="handleClick(index, true)">
+        <oxy-icon
+          custom-class="oxy-rate__item-star"
+          :name="isActive(rate) ? activeIcon : icon"
+          :size="size"
+          :custom-style="rate !== '0' ? iconActiveStyle : iconStyle"
+        />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-rate',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import { computed, getCurrentInstance, ref, watch } from 'vue'
+import { rateProps } from './types'
+import { getRect } from '../common/util'
+const { proxy } = getCurrentInstance() as any
+
+const props = defineProps(rateProps)
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const rateList = ref<Array<string>>([])
+const activeValue = ref<string>('')
+
+const iconStyle = computed(() => {
+  return `background:${props.color};`
+})
+
+const iconActiveStyle = computed(() => {
+  return `background:${props.disabled ? props.disabledColor : activeValue.value};`
+})
+
+watch(
+  () => props.activeColor,
+  (newVal) => {
+    if (Array.isArray(newVal) && !newVal.length) {
+      console.error('activeColor cannot be an empty array')
+    }
+    computeActiveValue()
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+watch(
+  [() => props.num, () => props.modelValue],
+  () => {
+    computeRateList()
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+// 当前选项是否为激活状态
+const isActive = (rate: string) => {
+  return rate !== '0'
+}
+
+/**
+ * @description 计算当前应当展示的rate数量
+ */
+function computeRateList() {
+  const { modelValue, num, allowHalf } = props
+  // value和num都准备好才能计算
+  if (modelValue === null || !num) return
+  if (typeof modelValue !== 'number') {
+    console.error('[Oxy ui] error(oxy-rate): the value of oxy-rate should be a number')
+    return
+  }
+  const tempRateList: string[] = []
+  const fullLength = Math.floor(modelValue)
+  for (let i = 0; i < num; i++) {
+    if (i < fullLength) {
+      tempRateList.push('100%')
+    } else if (i === fullLength && allowHalf && modelValue % 1 !== 0) {
+      tempRateList.push('50%')
+    } else {
+      tempRateList.push('0')
+    }
+  }
+  rateList.value = tempRateList
+  computeActiveValue()
+}
+/**
+ * @description 计算当前应当展示的rate颜色
+ */
+function computeActiveValue() {
+  const { activeColor, modelValue, num } = props
+  let tempActiveValue: string = ''
+  if (Array.isArray(activeColor) && activeColor.length) {
+    tempActiveValue = Number(modelValue) <= num * 0.6 || !activeColor[1] ? activeColor[0] : activeColor[1]
+  } else {
+    tempActiveValue = activeColor as string
+  }
+  activeValue.value = tempActiveValue
+}
+
+/**
+ * @description 处理点击事件
+ * @param index 点击的索引
+ * @param isHalf 是否为半星
+ */
+function handleClick(index: number, isHalf: boolean) {
+  const { readonly, disabled, clearable, allowHalf, modelValue } = props
+  if (readonly || disabled) return
+  let value = isHalf ? index + 0.5 : index + 1
+  // 点击清空逻辑：当点击的值与当前modelValue相等且等于最小值时允许清空
+  if (clearable) {
+    const minValue = allowHalf ? 0.5 : 1
+    if (value === modelValue && value === minValue) {
+      value = 0
+    }
+  }
+  updateValue(value)
+}
+
+/**
+ * @description 设置评分值并触发事件
+ */
+function updateValue(value: number) {
+  emit('update:modelValue', value)
+  emit('change', {
+    value
+  })
+}
+
+async function onTouchMove(event: TouchEvent) {
+  const { clientX } = event.touches[0]
+  const rateItems = await getRect('.oxy-rate__item', true, proxy)
+  const targetIndex = Array.from(rateItems).findIndex((rect) => {
+    return clientX >= rect.left! && clientX <= rect.right!
+  })
+  if (targetIndex !== -1) {
+    const target = rateItems[targetIndex]
+    const itemWidth = target.width!
+    const isHalf = props.allowHalf && clientX - target.left! < itemWidth / 2
+    const value = isHalf ? targetIndex + 0.5 : targetIndex + 1
+    if (value >= 0.5) {
+      const value = isHalf ? targetIndex + 0.5 : targetIndex + 1
+      updateValue(value)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-rate/types.ts

@@ -0,0 +1,103 @@
+import type { PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+
+export const rateProps = {
+  ...baseProps,
+
+  /**
+   * 评分最大值
+   * 类型: number
+   * 默认值: 5
+   */
+  num: makeNumberProp(5),
+
+  /**
+   * 当前分数，使用v-model进行双向绑定
+   * 类型: string | number | null
+   * 默认值: null
+   */
+  modelValue: {
+    type: [String, Number, null] as PropType<string | number | null>,
+    default: null
+  },
+
+  /**
+   * 是否只读
+   * 类型: boolean
+   * 默认值: false
+   */
+  readonly: makeBooleanProp(false),
+
+  /**
+   * 图标大小
+   * 类型: string
+   * 默认值: '16px'
+   */
+  size: makeStringProp('16px'),
+
+  /**
+   * 图标间距
+   * 类型: string
+   * 默认值: '4px'
+   */
+  space: makeStringProp('4px'),
+
+  /**
+   * 未选中的图标颜色
+   * 类型: string
+   * 默认值: '#E8E8E8'
+   */
+  color: makeStringProp('#E8E8E8'),
+
+  /**
+   * 选中的图标颜色，支持传颜色数组（用于分段颜色）
+   * 类型: string | Array<string>
+   * 默认值: 'linear-gradient(180deg, rgba(255,238,0,1) 0%,rgba(250,176,21,1) 100%)'
+   */
+  activeColor: {
+    type: [String, Array] as PropType<string | Array<string>>,
+    default: 'linear-gradient(180deg, rgba(255,238,0,1) 0%,rgba(250,176,21,1) 100%)'
+  },
+
+  /**
+   * 未选中的图标类名
+   * 类型: string
+   * 默认值: 'star-on'
+   */
+  icon: makeStringProp('star-on'),
+
+  /**
+   * 选中的图标类名
+   * 类型: string
+   * 默认值: 'star-on'
+   */
+  activeIcon: makeStringProp('star-on'),
+
+  /**
+   * 是否禁用
+   * 类型: boolean
+   * 默认值: false
+   */
+  disabled: makeBooleanProp(false),
+
+  /**
+   * 禁用的图标颜色
+   * 类型: string
+   * 默认值: 'linear-gradient(315deg, rgba(177,177,177,1) 0%,rgba(199,199,199,1) 100%)'
+   */
+  disabledColor: makeStringProp('linear-gradient(315deg, rgba(177,177,177,1) 0%,rgba(199,199,199,1) 100%)'),
+
+  /**
+   * 是否允许半选
+   * 类型: boolean
+   * 默认值: false
+   */
+  allowHalf: makeBooleanProp(false),
+
+  /**
+   * 当 clearable 属性设置为 true，再次点击相同的值时，可以将值重置为 0。
+   * 类型: boolean
+   * 默认值: false
+   */
+  clearable: makeBooleanProp(false)
+}

package/components/oxy-resize/index.scss

@@ -0,0 +1,27 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(resize) {
+
+  @include e(container) {
+    position: absolute;
+    min-width: 1px;
+    min-height: 1px;
+  }
+
+  @include e(wrapper) {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: -9999;
+    overflow: hidden;
+    visibility: hidden;
+
+    @include m(placeholder) {
+      transition: 0s;
+      animation: none;
+    }
+  }
+}

package/components/oxy-resize/oxy-resize.vue

@@ -0,0 +1,144 @@
+<template>
+  <view :class="`oxy-resize ${customClass}`" :style="rootStyle">
+    <!--插槽需要脱离父容器文档流，防止父容器固宽固高，进而导致插槽大小被被父容器限制-->
+    <view :id="resizeId" :class="`oxy-resize__container ${customContainerClass}`">
+      <!--被监听的插槽-->
+      <slot />
+      <!--监听插槽变大-->
+      <scroll-view
+        class="oxy-resize__wrapper"
+        :scroll-y="true"
+        :scroll-top="expandScrollTop"
+        :scroll-x="true"
+        :scroll-left="expandScrollLeft"
+        @scroll="onScrollHandler"
+      >
+        <view class="oxy-resize__wrapper--placeholder" style="height: 100000px; width: 100000px"></view>
+      </scroll-view>
+      <!--监听插槽变小-->
+      <scroll-view
+        class="oxy-resize__wrapper"
+        :scroll-y="true"
+        :scroll-top="shrinkScrollTop"
+        :scroll-x="true"
+        :scroll-left="shrinkScrollLeft"
+        @scroll="onScrollHandler"
+      >
+        <view class="oxy-resize__wrapper--placeholder" style="height: 250%; width: 250%"></view>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-resize',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, getCurrentInstance, onMounted, ref } from 'vue'
+import { addUnit, objToStyle, uuid } from '../common/util'
+import { resizeProps } from './types'
+
+const props = defineProps(resizeProps)
+const emit = defineEmits(['resize'])
+
+const expandScrollTop = ref<number>(0)
+const shrinkScrollTop = ref<number>(0)
+const expandScrollLeft = ref<number>(0)
+const shrinkScrollLeft = ref<number>(0)
+const height = ref<number>(0)
+const width = ref<number>(0)
+const scrollEventCount = ref<number>(0)
+
+const rootStyle = computed(() => {
+  const style: Record<string, string | number> = {
+    width: addUnit(width.value),
+    height: addUnit(height.value)
+  }
+  return `${objToStyle(style)}${props.customStyle}`
+})
+let onScrollHandler = () => {}
+const { proxy } = getCurrentInstance() as any
+
+const resizeId = ref<string>(`resize${uuid()}`)
+
+onMounted(() => {
+  // 初始化数据获取
+  const query = uni.createSelectorQuery().in(proxy).select(`#${resizeId.value}`).boundingClientRect()
+  query.exec(([res]) => {
+    // 闭包记录容器高度
+    let lastHeight = res.height
+    let lastWidth = res.width
+    // 立即填充父容器高宽
+    height.value = lastHeight
+    width.value = lastWidth
+    // 监听滚动事件
+    onScrollHandler = () => {
+      const query = uni.createSelectorQuery().in(proxy).select(`#${resizeId.value}`).boundingClientRect()
+      query.exec(([res]) => {
+        // 前两次滚动事件被触发，说明 created 的修改已渲染，通知用户代码当前容器大小
+        if (scrollEventCount.value++ === 0) {
+          const result: Record<string, string | number> = {}
+          ;['bottom', 'top', 'left', 'right', 'height', 'width'].forEach((propName) => {
+            result[propName] = res[propName]
+          })
+          emit('resize', result)
+        }
+        // 滚动条拉到底部会触发两次多余的事件，屏蔽掉。
+        if (scrollEventCount.value < 3) return
+        // 手动设置父容器高宽，防止父容器坍塌
+        // 滚动完，重新获取容器新的高度
+        const newHeight = res.height
+        const newWidth = res.width
+        // 立即填充父容器高宽
+        height.value = newHeight
+        width.value = newWidth
+        // 宽高都改变时，只需要触发一次 size 事件
+        const emitStack: number[] = []
+        if (newHeight !== lastHeight) {
+          lastHeight = newHeight
+          emitStack.push(1)
+        }
+        if (newWidth !== lastWidth) {
+          lastWidth = newWidth
+          emitStack.push(1)
+        }
+        if (emitStack.length !== 0) {
+          const result: Record<string, any> = {}
+          ;['bottom', 'top', 'left', 'right', 'height', 'width'].forEach((propName) => {
+            result[propName] = res[propName]
+          })
+          emit('resize', result)
+        }
+        // 滚动条拉到底部（如果使用 nextTick 效果更佳）
+        scrollToBottom({
+          lastWidth: lastWidth,
+          lastHeight: lastHeight
+        })
+      })
+    }
+    // 滚动条拉到底部（如果使用 nextTick 效果更佳）
+    scrollToBottom({
+      lastWidth: lastWidth,
+      lastHeight: lastHeight
+    })
+  })
+})
+
+function scrollToBottom({ lastWidth, lastHeight }: { lastWidth: number; lastHeight: number }) {
+  expandScrollTop.value = 100000 + lastHeight
+  shrinkScrollTop.value = 3 * height.value + lastHeight
+  expandScrollLeft.value = 100000 + lastWidth
+  shrinkScrollLeft.value = 3 * width.value + lastWidth
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-resize/types.ts

@@ -0,0 +1,6 @@
+import { baseProps, makeStringProp } from '../common/props'
+
+export const resizeProps = {
+  ...baseProps,
+  customContainerClass: makeStringProp('')
+}

package/components/oxy-root-portal/oxy-root-portal.vue

@@ -0,0 +1,50 @@
+<template>
+  <!-- #ifdef H5 -->
+  <!-- H5端使用 teleport -->
+  <teleport to="body">
+    <!-- #endif -->
+    <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
+    <!-- #ifndef MP-DINGTALK -->
+    <!-- 小程序使用 root-portal -->
+    <root-portal>
+      <!-- #endif -->
+      <!-- #endif -->
+      <slot />
+      <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
+      <!-- #ifndef MP-DINGTALK -->
+    </root-portal>
+    <!-- #endif -->
+    <!-- #endif -->
+    <!-- #ifdef H5 -->
+  </teleport>
+  <!-- #endif -->
+</template>
+<script>
+export default {
+  name: 'oxy-root-portal',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup></script>
+
+<!-- #ifdef APP-PLUS -->
+<script module="render" lang="renderjs">
+export default {
+  mounted() {
+    if (this.$ownerInstance.$el) {
+      (document.querySelector('uni-app') || document.body).appendChild(this.$ownerInstance.$el)
+    }
+  },
+  beforeDestroy() {
+    // 清理，将元素移回原位置
+    if (this.$ownerInstance.$el) {
+      (document.querySelector('uni-app') || document.body).removeChild(this.$ownerInstance.$el)
+    }
+  }
+}
+</script>
+<!-- #endif -->

package/components/oxy-row/index.scss

@@ -0,0 +1,10 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(row) {
+  &::after {
+    display: table;
+    clear: both;
+    content: "";
+  }
+}

package/components/oxy-row/oxy-row.vue

@@ -0,0 +1,42 @@
+<template>
+  <view :class="`oxy-row ${customClass}`" :style="rowStyle">
+    <!-- 每一行 -->
+    <slot />
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'oxy-row',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import { computed, type CSSProperties } from 'vue'
+import { useChildren } from '../composables/useChildren'
+import { ROW_KEY, rowProps } from './types'
+import { addUnit, objToStyle } from '../common/util'
+
+const props = defineProps(rowProps)
+const { linkChildren } = useChildren(ROW_KEY)
+
+linkChildren({ props })
+
+const rowStyle = computed(() => {
+  const style: CSSProperties = {}
+  const { gutter } = props
+  if (gutter < 0) {
+    console.error('[Oxy ui] warning(oxy-row): attribute gutter must be greater than or equal to 0')
+  } else if (gutter) {
+    style.marginLeft = addUnit(gutter / 2)
+    style.marginRight = addUnit(gutter / 2)
+  }
+  return `${objToStyle(style)}${props.customStyle}`
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-row/types.ts

@@ -0,0 +1,16 @@
+import { type InjectionKey } from 'vue'
+import { baseProps, makeNumberProp } from '../common/props'
+
+export type RowProvide = {
+  props: { gutter?: number }
+}
+
+export const ROW_KEY: InjectionKey<RowProvide> = Symbol('oxy-row')
+
+export const rowProps = {
+  ...baseProps,
+  /**
+   * 列元素之间的间距（单位为px）
+   */
+  gutter: makeNumberProp(0)
+}