oxy-uni-ui 1.0.1

package/components/oxy-progress/oxy-progress.vue

@@ -0,0 +1,197 @@
+<template>
+  <view :class="`oxy-progress ${customClass}`" :style="customStyle">
+    <view class="oxy-progress__outer">
+      <view :class="`oxy-progress__inner ${innerClass}`" :style="rootStyle"></view>
+    </view>
+    <view v-if="!hideText" class="oxy-progress__label">{{ percentage }}%</view>
+    <oxy-icon
+      v-else-if="status"
+      :custom-class="`oxy-progress__label oxy-progress__icon ${innerClass}`"
+      :name="iconName"
+      :color="typeof color === 'string' ? color : ''"
+    ></oxy-icon>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-progress',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import { computed, ref, watch } from 'vue'
+import { isArray, isDef, isObj, objToStyle, pause } from '../common/util'
+import { progressProps, type ProgressColor } from './types'
+
+const props = defineProps(progressProps)
+const showColor = ref<string>('')
+const showPercent = ref<number>(0)
+const changeCount = ref<number>(0)
+let timer: ReturnType<typeof setTimeout> | null = null
+
+const rootStyle = computed(() => {
+  return objToStyle({
+    background: showColor.value,
+    width: `${showPercent.value}%`,
+    'transition-duration': `${changeCount.value * props.duration * 0.001}s`
+  })
+})
+
+const innerClass = computed(() => (props.status ? `is-${props.status}` : ''))
+
+const iconName = computed(() => {
+  let icon: string = ''
+  switch (props.status) {
+    case 'danger':
+      icon = 'close-outline'
+      break
+    case 'success':
+      icon = 'check-outline'
+      break
+    case 'warning':
+      icon = 'warn-bold'
+      break
+    default:
+      break
+  }
+  return icon
+})
+
+watch(
+  () => [props.percentage, props.color, props.duration],
+  () => {
+    validatePercentage(props.percentage)
+    updateProgress()
+  },
+  { immediate: true }
+)
+
+function validatePercentage(value: number) {
+  if (Number.isNaN(value) || value < 0 || value > 100) {
+    console.error('The value of percentage must be between 0 and 100')
+  }
+}
+
+/**
+ * 进度条前进
+ * @param partList 颜色数组
+ * @param percentage 进度值
+ */
+function updateProgressForward(partList: ProgressColor[], percentage: number) {
+  return partList.some((part, index) => {
+    if (showPercent.value < part.percentage && part.percentage <= percentage) {
+      update(part.percentage, part.color)
+      return true
+    } else if (index === partList.length - 1) {
+      update(percentage, part.color)
+    }
+  })
+}
+
+/**
+ * 进度条后退
+ * @param partList 颜色数组
+ * @param percentage 进度值
+ */
+function updateProgressBackward(partList: ProgressColor[], percentage: number) {
+  return partList.some((part) => {
+    if (percentage <= part.percentage) {
+      update(percentage, part.color)
+      return true
+    }
+  })
+}
+
+/**
+ * 更新进度条
+ */
+async function updateProgress() {
+  const { percentage, color } = props
+  if (!isDef(color) || (isArray(color) && color.length === 0)) {
+    changeCount.value = Math.abs(percentage - showPercent.value)
+    await pause()
+    showPercent.value = percentage
+    return
+  }
+  if (showPercent.value === percentage) return
+
+  const colorArray = isArray(color) ? color : [color]
+  validateColorArray(colorArray)
+  const partList = createPartList(colorArray)
+  showPercent.value > percentage ? updateProgressBackward(partList, percentage) : updateProgressForward(partList, percentage)
+}
+
+/**
+ * 判断是否是颜色数组
+ * @param array 颜色数组
+ */
+function isProgressColorArray(array: string[] | ProgressColor[]): array is ProgressColor[] {
+  return array.every(
+    (color) => isObj(color) && Object.prototype.hasOwnProperty.call(color, 'color') && Object.prototype.hasOwnProperty.call(color, 'percentage')
+  )
+}
+
+/**
+ * 判断是否是字符串数组
+ * @param array 颜色数组
+ */
+function isStringArray(array: string[] | ProgressColor[]): array is string[] {
+  return array.every((item) => typeof item === 'string')
+}
+
+/**
+ * 颜色数组校验
+ * @param colorArray 颜色数组
+ */
+function validateColorArray(colorArray: string[] | ProgressColor[]) {
+  const isStrArray = isStringArray(colorArray)
+  const isObjArray = isProgressColorArray(colorArray)
+  if (!isStrArray && !isObjArray) {
+    throw Error('Color must be String or Object with color and percentage')
+  }
+  if (isObjArray && colorArray.some(({ percentage }) => Number.isNaN(percentage))) {
+    throw Error('All the percentage must can be formatted to Number')
+  }
+}
+
+/**
+ * 创建颜色数组
+ * @param colorArray 颜色数组
+ * @return 颜色数组
+ */
+function createPartList(colorArray: string[] | ProgressColor[]) {
+  const partNum = 100 / colorArray.length
+  return isProgressColorArray(colorArray)
+    ? colorArray.sort((a, b) => a.percentage - b.percentage)
+    : colorArray.map((item, index) => ({
+        color: item,
+        percentage: (index + 1) * partNum
+      }))
+}
+
+function update(targetPercent: number, color: string) {
+  if (timer) return
+  const { duration } = props
+  changeCount.value = Math.abs(targetPercent - showPercent.value)
+  setTimeout(() => {
+    showPercent.value = targetPercent
+    showColor.value = color
+    timer = setTimeout(() => {
+      timer && clearTimeout(timer)
+      timer = null
+      updateProgress()
+    }, changeCount.value * duration)
+  }, 50)
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-progress/types.ts

@@ -0,0 +1,35 @@
+import type { PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp } from '../common/props'
+
+export type ProgressStatus = 'success' | 'danger' | 'warning' // 状态类型
+
+export type ProgressColor = {
+  color: string // 颜色
+  percentage: number // 百分比
+}
+
+export const progressProps = {
+  ...baseProps,
+  /**
+   * 进度数值，最大值100
+   */
+  percentage: makeNumberProp(0),
+  /**
+   * 是否隐藏进度条上的文字，默认值为false
+   */
+  hideText: makeBooleanProp(false),
+  /**
+   * 进度条颜色
+   */
+  color: {
+    type: [String, Array] as PropType<string | string[] | ProgressColor[]>
+  },
+  /**
+   * 进度增加1%所需毫秒数
+   */
+  duration: makeNumberProp(30),
+  /**
+   * 进度条状态
+   */
+  status: String as PropType<ProgressStatus>
+}

package/components/oxy-radio/index.scss

@@ -0,0 +1,301 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+.oxy-theme-dark {
+  @include b(radio) {
+    @include e(shape) {
+      background: transparent;
+    }
+    @include e(label) {
+      color: $-dark-color;
+    }
+    @include when(button) {
+      .oxy-radio__label {
+        background-color: $-dark-background;
+      }
+      @include when(checked) {
+        .oxy-radio__label {
+          background-color: $-dark-background2;
+        }
+      }
+    }
+
+    @include when(disabled) {
+      .oxy-radio__label {
+        color: $-dark-color-gray;
+      }
+      @include when(checked) {
+        .oxy-radio__label {
+          color: $-dark-color-gray;
+        }
+      }
+  
+      @include when(button) {
+        .oxy-radio__label {
+          border-color: #c8c9cc;
+          background: #3a3a3c;
+          color: $-dark-color-gray;
+        }
+        @include when(checked) {
+          .oxy-radio__label {
+            border-color: #c8c9cc;
+            background: #3a3a3c;
+            color: #c8c9cc;
+          }
+        }
+      }
+  
+      @include when(dot) {
+        .oxy-radio__shape {
+          border-color: #c8c9cc;
+          background: #3a3a3c;
+          &::before {
+            background-color: #c8c9cc;
+          }
+        }
+      }
+    }
+  }
+}
+
+@include b(radio) {
+  display: flex;
+  margin-top: $-radio-margin;
+  justify-content: space-between;
+  align-items: center;
+  text-align: center;
+  line-height: 1.2;
+
+  @include when(first) {
+    margin-top: 0;
+  }
+  @include e(shape) {
+    position: relative;
+    display: inline-block;
+    width: $-radio-size;
+    height: $-radio-size;
+    font-size: $-radio-size;
+    color: transparent;
+    display: none;
+    vertical-align: middle;
+    transition: background 0.2s;
+  }
+  @include e(input) {
+    position: absolute;
+    width: 0;
+    height: 0;
+    margin: 0;
+    opacity: 0;
+  }
+  @include e(label) {
+    display: inline-block;
+    vertical-align: top;
+    font-size: $-radio-label-fs;
+    color: $-radio-label-color;
+    line-height: 20px;
+    word-break: break-all;
+  }
+  @include when(checked) {
+    .oxy-radio__shape {
+      color: $-radio-checked-color;
+      border-color: currentColor;
+      display: inline-block;
+    }
+    .oxy-radio__check {
+      color: $-radio-checked-color;
+      opacity: 1;
+    }
+  }
+
+  @include when(dot) {
+    .oxy-radio__shape {
+      border: 2px solid $-radio-dot-border-color;
+      border-radius: 50%;
+      position: relative;
+      display: inline-block;
+      box-sizing: border-box;
+      transition: none;
+
+      &::before {
+        content: "";
+        position: absolute;
+        width: $-radio-dot-size;
+        height: $-radio-dot-size;
+        left: calc(50% - #{$-radio-dot-size / 2});
+        top: calc(50% - #{$-radio-dot-size / 2});
+        border-radius: 50%;
+        background-color: #fff;
+        transform: scale(0);
+        transition: transform .2s ease-in;
+      }
+    }
+    @include when(checked) {
+      .oxy-radio__shape {
+        background-color: currentColor;
+        border-color: currentColor;
+        // background-color: $-radio-dot-checked-bg;
+        // border-color: $-radio-dot-checked-border-color;
+        &::before {
+          transform: scale(1);
+        }
+      }
+    }
+  }
+
+  @include when(button) {
+    display: inline-block;
+    margin-top: 0;
+    margin-right: 10px;
+
+    .oxy-radio__shape {
+      display: none;
+    }
+    .oxy-radio__label {
+      height: $-radio-button-height;
+      min-width: $-radio-button-min-width;
+      max-width: $-radio-button-max-width;
+      padding: 5px 15px;
+      margin-right: 0;
+      border-radius: $-radio-button-radius;
+      background-color: $-radio-button-bg;
+      font-size: $-radio-button-fs;
+      box-sizing: border-box;
+      border: 1px solid $-radio-button-border;
+      transition: all 0.2s;
+      @include lineEllipsis;
+    }
+    @include when(checked) {
+      .oxy-radio__label {
+        color: $-radio-checked-color;
+        border-color: currentColor;
+        background-color: $-radio-bg;
+      }
+    }
+  }
+
+  &.icon-placement-left {
+    flex-direction: row-reverse;
+  }
+
+  @include when(inline) {
+    display: inline-block;
+    margin-top: 0;
+    margin-right: $-radio-margin;
+
+    @include when(first) {
+      margin-left: 0;
+    }
+    .oxy-radio__shape {
+      display: block;
+      margin-right: 4px;
+      float: left;
+      &::after {
+        content: "";
+        display: table;
+        clear: both;
+      }
+    }
+
+    @include when(dot) {
+      .oxy-radio__shape {
+        margin-top: 2px;
+      }
+      @include when(large) {
+        .oxy-radio__shape {
+          margin-top: 0;
+        }
+      }
+    }
+
+    &.icon-placement-right {
+      .oxy-radio__shape {
+        margin-right: 0;
+        margin-left: 4px;
+        float: right;
+      }
+    }
+  }
+
+  @include when(disabled) {
+    .oxy-radio__label {
+      color: $-radio-disabled-label-color;
+    }
+    @include when(checked) {
+      .oxy-radio__shape {
+        color: $-radio-disabled-label-color;
+      }
+      .oxy-radio__check {
+        color: $-radio-disabled-label-color;
+      }
+      .oxy-radio__label {
+        color: $-radio-disabled-label-color;
+      }
+    }
+
+    @include when(button) {
+      .oxy-radio__label {
+        border-color: $-radio-disabled-color;
+        background: $-radio-disabled-color;
+        border-color: $-radio-button-border;
+        color: $-radio-disabled-label-color;
+      }
+      @include when(checked) {
+        .oxy-radio__label {
+          border-color: $-radio-button-disabled-border;
+          background: $-radio-disabled-color;
+        }
+      }
+    }
+
+    @include when(dot) {
+      .oxy-radio__shape {
+        background: $-radio-dot-disabled-bg;
+        border-color: $-radio-dot-disabled-border;
+      }
+    }
+  }
+
+  // 以下内容用于解决父子组件样式隔离的问题 —— START
+  @include when(cell-radio) {
+    padding: 13px 15px;
+    margin: 0;
+
+    @include when(large) {
+      padding: 14px 15px;
+    }
+  }
+
+  @include when(button-radio) {
+    display: inline-flex;
+    width: 33.3333%;
+    padding: 12px 12px 0px 0px;
+    box-sizing: border-box;
+
+    .oxy-radio__label {
+      width: 100%;
+      max-width: inherit;
+    }
+  }
+  @include when(large) {
+    .oxy-radio__shape {
+      width: $-radio-large-size;
+      height: $-radio-large-size;
+      font-size: $-radio-large-size;
+    }
+    .oxy-radio__label {
+      font-size: $-radio-large-label-fs;
+    }
+
+    @include when(dot) {
+      .oxy-radio__shape {
+        &::before {
+          width: $-radio-dot-large-size;
+          height: $-radio-dot-large-size;
+          left: calc(50% - #{$-radio-dot-large-size / 2});
+          top: calc(50% - #{$-radio-dot-large-size / 2});
+        }
+      }
+    }
+  }
+  // 以下内容用于解决父子组件样式隔离的问题 —— END
+}

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

@@ -0,0 +1,118 @@
+<template>
+  <view
+    :class="`oxy-radio ${cellValue ? 'is-cell-radio' : ''} ${cellValue && shapeValue == 'button' ? 'is-button-radio' : ''} ${
+      sizeValue ? 'is-' + sizeValue : ''
+    } ${inlineValue ? 'is-inline' : ''} ${isChecked ? 'is-checked' : ''} ${shapeValue !== 'check' ? 'is-' + shapeValue : ''} ${
+      disabledValue ? 'is-disabled' : ''
+    } icon-placement-${iconPlacement} ${customClass}`"
+    :style="customStyle"
+    @click="handleClick"
+  >
+    <view
+      class="oxy-radio__label"
+      :style="`${maxWidth ? 'max-width:' + maxWidth : ''};  ${
+        isChecked && shapeValue === 'button' && !disabledValue ? 'color :' + checkedColorValue : ''
+      }`"
+    >
+      <slot></slot>
+    </view>
+    <view class="oxy-radio__shape" :style="isChecked && !disabledValue ? 'color: ' + checkedColorValue : ''">
+      <oxy-icon v-if="shapeValue === 'check'" :style="isChecked && !disabledValue ? 'color: ' + checkedColorValue : ''" name="check"></oxy-icon>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'oxy-radio',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import { computed, watch } from 'vue'
+import { useParent } from '../composables/useParent'
+import { RADIO_GROUP_KEY } from '../oxy-radio-group/types'
+import { radioProps, type RadioIconPlacement } from './types'
+import { getPropByPath, isDef } from '../common/util'
+
+const props = defineProps(radioProps)
+
+const { parent: radioGroup } = useParent(RADIO_GROUP_KEY)
+
+const isChecked = computed(() => {
+  if (radioGroup) {
+    return props.value === radioGroup.props.modelValue
+  } else {
+    return false
+  }
+})
+
+const shapeValue = computed(() => {
+  return props.shape || getPropByPath(radioGroup, 'props.shape')
+})
+
+const checkedColorValue = computed(() => {
+  return props.checkedColor || getPropByPath(radioGroup, 'props.checkedColor')
+})
+
+const disabledValue = computed(() => {
+  if (isDef(props.disabled)) {
+    return props.disabled
+  } else {
+    return getPropByPath(radioGroup, 'props.disabled')
+  }
+})
+
+const inlineValue = computed(() => {
+  if (isDef(props.inline)) {
+    return props.inline
+  } else {
+    return getPropByPath(radioGroup, 'props.inline')
+  }
+})
+
+const sizeValue = computed(() => {
+  return props.size || getPropByPath(radioGroup, 'props.size')
+})
+
+const cellValue = computed(() => {
+  if (isDef(props.cell)) {
+    return props.cell
+  } else {
+    return getPropByPath(radioGroup, 'props.cell')
+  }
+})
+
+const iconPlacement = computed<RadioIconPlacement>(() => {
+  if (isDef(props.iconPlacement)) {
+    return props.iconPlacement
+  } else {
+    return getPropByPath(radioGroup, 'props.iconPlacement')
+  }
+})
+
+watch(
+  () => props.shape,
+  (newValue) => {
+    const type = ['check', 'dot', 'button']
+    if (!newValue || type.indexOf(newValue) === -1) console.error(`shape must be one of ${type.toString()}`)
+  }
+)
+
+/**
+ * 点击子元素，通知父元素触发change事件
+ */
+function handleClick() {
+  const { value } = props
+  if (!disabledValue.value && radioGroup && isDef(value)) {
+    radioGroup.updateValue(value)
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-radio/types.ts

@@ -0,0 +1,42 @@
+import type { PropType } from 'vue'
+import { baseProps, makeRequiredProp, makeStringProp } from '../common/props'
+
+export type RadioShape = 'dot' | 'button' | 'check'
+
+export type RadioIconPlacement = 'left' | 'right' | 'auto'
+
+export const radioProps = {
+  ...baseProps,
+  /** 选中时的值 */
+  value: makeRequiredProp([String, Number, Boolean]),
+  /** 单选框的形状 */
+  shape: String as PropType<RadioShape>,
+  /** 选中的颜色 */
+  checkedColor: String,
+  /** 禁用 */
+  disabled: {
+    type: [Boolean, null] as PropType<boolean | null>,
+    default: null
+  },
+  /** 单元格 */
+  cell: {
+    type: [Boolean, null] as PropType<boolean | null>,
+    default: null
+  },
+  /** 大小 */
+  size: String,
+  /** 内联 */
+  inline: {
+    type: [Boolean, null] as PropType<boolean | null>,
+    default: null
+  },
+  /** 最大宽度 */
+  maxWidth: String,
+  /**
+   * 图标位置
+   * 可选值: 'left' | 'right' | 'auto'
+   */
+  iconPlacement: {
+    type: String as PropType<RadioIconPlacement>
+  }
+}

package/components/oxy-radio-group/index.scss

@@ -0,0 +1,23 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+.oxy-theme-dark {
+  @include b(radio-group) {
+    background-color: $-dark-background2;
+  }
+}
+
+@include b(radio-group) {
+  background-color: $-radio-bg;
+  font-size: 0;
+
+  // 上下20px 左右15px 内部间隔12px
+  @include when(button) {
+    width: 100%;
+    height: 100%;
+    padding: 8px 3px 20px 15px;
+    box-sizing: border-box;
+    overflow: hidden;
+    height: auto;
+  }
+}