oxy-uni-ui 1.0.1

package/components/oxy-status-tip/index.scss

@@ -0,0 +1,37 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.oxy-theme-dark {
+  background-color: $-dark-background2;
+  @include b(status-tip) {
+    @include e(text) {
+      color: $-dark-color3;
+    }
+  }
+}
+
+@include b(status-tip) {
+  padding: $-statustip-padding;
+  width: 100%;
+  margin: 0 auto;
+  color: $-statustip-color;
+  font-size: $-statustip-fs;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  @include edeep(image) {
+    margin: 0 auto;
+    width: 160px;
+    height: 160px;
+  }
+  @include e(text) {
+    margin: 20px auto 0;
+    font-size: $-statustip-fs;
+    line-height: $-statustip-line-height;
+    color: $-statustip-color;
+    text-align: center;
+    overflow-wrap: break-word;
+  }
+}

package/components/oxy-status-tip/oxy-status-tip.vue

@@ -0,0 +1,71 @@
+<template>
+  <view :class="`oxy-status-tip  ${customClass}`" :style="customStyle">
+    <slot name="image" v-if="$slots.image"></slot>
+    <oxy-img v-else-if="imgUrl" :mode="imageMode" :src="imgUrl" custom-class="oxy-status-tip__image" :custom-style="imgStyle"></oxy-img>
+    <view v-if="tip" class="oxy-status-tip__text">{{ tip }}</view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-status-tip',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyImg from '../oxy-img/oxy-img.vue'
+import ImgCollect from './images/collect.png'
+import ImgContent from './images/content.png'
+import ImgNetwork from './images/network.png'
+import ImgSearch from './images/search.png'
+import { computed, type CSSProperties } from 'vue'
+import { addUnit, isDef, isObj, objToStyle } from '../common/util'
+import { statusTipProps } from './types'
+
+const imgs: AnyObject = {
+  collect: ImgCollect,
+  content: ImgContent,
+  network: ImgNetwork,
+  search: ImgSearch
+}
+const props = defineProps(statusTipProps)
+
+// 图片地址
+const imgUrl = computed(() => {
+  // 改用网络地址，避免小程序打包的时候统一打包进去导致包过大问题
+  let img: string = ''
+  if (['search', 'network', 'content', 'collect'].includes(props.image)) {
+    img = imgs[props.image]
+  } else {
+    img = props.image
+  }
+  return img
+})
+
+/**
+ * 图片样式
+ */
+const imgStyle = computed(() => {
+  let style: CSSProperties = {}
+  if (props.imageSize) {
+    if (isObj(props.imageSize)) {
+      isDef(props.imageSize.height) && (style.height = addUnit(props.imageSize.height))
+      isDef(props.imageSize.width) && (style.width = addUnit(props.imageSize.width))
+    } else {
+      style = {
+        height: addUnit(props.imageSize),
+        width: addUnit(props.imageSize)
+      }
+    }
+  }
+  return `${objToStyle(style)}`
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-status-tip/types.ts

@@ -0,0 +1,50 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeStringProp } from '../common/props'
+import type { ImageMode } from '../oxy-img/types'
+
+export type ImageSize = {
+  /**
+   * 宽度
+   */
+  width: number | string
+  /**
+   * 高度
+   */
+  height: number | string
+}
+
+export const statusTipProps = {
+  ...baseProps,
+
+  /**
+   * 缺省图片类型，支持传入图片 URL。
+   * 类型: string
+   * 可选值: search, network, content, collect, comment, halo, message
+   * 默认值: network
+   */
+  image: makeStringProp('network'),
+
+  /**
+   * 图片大小，默认单位为 `px`。
+   * 类型: string 或 number 或 ImageSize
+   * 默认值: 空字符串
+   */
+  imageSize: {
+    type: [String, Number, Object] as PropType<string | number | ImageSize>,
+    default: ''
+  },
+  /**
+   * 提示文案。
+   * 类型: string
+   * 默认值: 空字符串
+   */
+  tip: makeStringProp(''),
+  /**
+   * 图片裁剪、缩放的模式
+   * 类型：string
+   * 默认值：'aspectFill'
+   */
+  imageMode: makeStringProp<ImageMode>('aspectFill')
+}
+
+export type StatusTipProps = ExtractPropTypes<typeof statusTipProps>

package/components/oxy-step/index.scss

@@ -0,0 +1,235 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.oxy-theme-dark {
+  @include b(step) {
+    @include e(icon) {
+      background: $-dark-background2;
+    }
+
+    @include e(content){
+      color: $-dark-color3;
+    }
+
+    @include e(line) {
+      background: $-dark-color-gray;
+    }
+
+    @include e(dot) {
+      background: $-dark-color-gray;
+    }
+
+    @include e(description) {
+      color: $-dark-color3;
+    }
+
+    @include when(wait) {
+      .oxy-step__description {
+        color: $-dark-color-gray;
+      }
+    }
+
+    :deep(.oxy-step__icon-outer),:deep(.oxy-step__icon-inner){
+      color: $-dark-color3; 
+      border-color: $-dark-color-gray;
+    }
+  }
+}
+
+
+@include b(step) {
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+
+  @include e(header) {
+    position: relative;
+    font-size: 0;
+
+    @include when(dot) {
+      .oxy-step__line {
+        margin-top: -1px;
+      }
+    }
+  }
+  @include e(icon) {
+    display: inline-block;
+    position: relative;
+    width: $-steps-icon-size;
+    height: $-steps-icon-size;
+    background: #fff;
+    z-index: 1;
+
+    @include when(icon) {
+      width: $-steps-is-icon-width;
+      text-align: center;
+    }
+    @include when(dot) {
+      width: $-steps-dot-size;
+      height: $-steps-dot-size;
+      border: 1px solid transparent;
+      margin-left: -1px;
+      border-radius: 50%;
+      background: transparent;
+    }
+  }
+  @include edeep(icon-inner) {
+    font-size: $-steps-icon-size;
+    color: $-steps-inactive-color;
+  }
+  @include e(icon-outer) {
+    width: calc($-steps-icon-size - 2px);
+    height: calc($-steps-icon-size - 2px);
+    border: 1px solid $-steps-inactive-color;
+    color: $-steps-inactive-color;
+    text-align: center;
+    line-height: calc($-steps-icon-size - 2px);
+    border-radius: 50%;
+    font-size: $-steps-icon-text-fs;
+  }
+  @include e(line) {
+    position: absolute;
+    width: 100%;
+    height: 1px;
+    background: $-steps-line-color;
+    transform: scaleY(0.5);
+    top: 50%;
+    left: 0;
+  }
+  @include e(dot) {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: $-steps-line-color;
+  }
+  @include e(content){
+    margin-top: 7px;
+    color: $-steps-inactive-color;
+    font-size: $-steps-label-fs;
+  }
+  @include e(title) {
+    font-weight: $-steps-title-fw;
+    line-height: 1.43;
+
+    @include when(description) {
+      font-size: $-steps-title-fs;
+    }
+  }
+  @include e(description) {
+    margin-top: 5px;
+    padding: 0 2px;
+    color: $-steps-description-color;
+  }
+  @include when(wait) {
+    .oxy-step__description {
+      color: $-steps-inactive-color;
+    }
+  }
+  @include when(finished) {
+    :deep(.oxy-step__icon-inner) {
+      color: $-steps-finished-color;
+    }
+    .oxy-step__icon-outer {
+      color: $-steps-finished-color;
+      border-color: $-steps-finished-color;
+    }
+    .oxy-step__title {
+      color: $-steps-finished-color;
+    }
+    .oxy-step__dot {
+      background: $-steps-finished-color;
+    }
+  }
+  @include when(process) {
+    .oxy-step__icon.is-icon {
+      :deep(.oxy-step__icon-inner) {
+        color: $-steps-finished-color;
+      }
+    }
+    .oxy-step__icon-outer {
+      color: #fff;
+      background: $-steps-finished-color;
+      border-color: $-steps-finished-color;
+    }
+    .oxy-step__title {
+      color: $-steps-finished-color;
+    }
+    .oxy-step__icon {
+      border-color: $-steps-finished-color;
+
+      &.is-dot {
+        &::after {
+          position: absolute;
+          content: '';
+          width: $-steps-dot-size + 10px;
+          height: $-steps-dot-size + 10px;
+          left: -5px;
+          top: -5px;
+          border-radius: 50%;
+          background: $-steps-finished-color;
+          opacity: 0.2;
+        }
+      }
+    }
+    .oxy-step__dot {
+      background: $-steps-finished-color;
+    }
+  }
+  @include when(error) {
+    :deep(.oxy-step__icon-inner), .oxy-step__title {
+      color: $-steps-error-color;
+    }
+    .oxy-step__icon-outer {
+      color: $-steps-error-color;
+      border-color: $-steps-error-color;
+    }
+    .oxy-step__dot {
+      background: $-steps-error-color;
+    }
+  }
+  @include when(center) {
+    text-align: center;
+
+    .oxy-step__line {
+      left: 50%;
+      right: -50%;
+    }
+  }
+  @include when(vertical) {
+    display: block;
+
+    .oxy-step__header {
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 100%;
+
+      &.is-dot {
+        top: 6px;
+
+        .oxy-step__line {
+          margin-left: -1px;
+          margin-top: 0;
+        }
+      }
+    }
+    .oxy-step__content {
+      margin-left: 30px;
+      margin-top: 0;
+      padding-bottom: 20px;
+    }
+    .oxy-step__line {
+      top: 0;
+      left: 50%;
+      width: 1px;
+      height: 100%;
+      transform: scaleX(0.5);
+    }
+    .oxy-step__icon.is-dot {
+      margin-left: 0;
+      margin-top: -1px;
+    }
+  }
+}

package/components/oxy-step/oxy-step.vue

@@ -0,0 +1,150 @@
+<template>
+  <view
+    v-if="currentStatus"
+    :class="`oxy-step ${customClass} ${currentStatus ? 'is-' + currentStatus : ''} ${canAlignCenter ? 'is-center' : ''}  ${
+      vertical ? 'is-vertical' : ''
+    }`"
+    :style="rootStyle"
+  >
+    <view :class="`oxy-step__header  ${dot ? 'is-dot' : ''}`">
+      <view :class="`oxy-step__icon  ${dot ? 'is-dot' : !!icon || $slots.icon ? 'is-icon' : 'is-text'}`">
+        <view v-if="dot" class="oxy-step__dot"></view>
+        <slot v-else-if="$slots.icon" name="icon" />
+        <oxy-icon v-else-if="icon" custom-class="oxy-step__icon-inner" :name="icon" />
+        <view v-else class="oxy-step__icon-outer">
+          <oxy-icon v-if="currentStatus === 'finished'" name="check-bold" />
+          <oxy-icon v-else-if="currentStatus === 'error'" name="close-bold" />
+          <text v-else>{{ index + 1 }}</text>
+        </view>
+      </view>
+      <view v-if="index < childrenLength - 1" class="oxy-step__line"></view>
+    </view>
+    <view class="oxy-step__content">
+      <view :class="`oxy-step__title ${$slots.description || description ? 'is-description' : ''}`">
+        <slot v-if="$slots.title" name="title" />
+        <text v-else>{{ currentTitle }}</text>
+      </view>
+      <view v-if="$slots.description || description" class="oxy-step__description">
+        <slot v-if="$slots.description" name="description" />
+        <text v-else>{{ description }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'oxy-step',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import { computed } from 'vue'
+import { useParent } from '../composables/useParent'
+import { STEPS_KEY } from '../oxy-steps/types'
+import { isDef, objToStyle } from '../common/util'
+import { useTranslate } from '../composables/useTranslate'
+import { stepProps } from './types'
+import type { CSSProperties } from 'vue'
+
+const props = defineProps(stepProps)
+
+const { parent: steps, index } = useParent(STEPS_KEY)
+
+const { translate } = useTranslate('steps')
+
+const currentStatus = computed(() => {
+  return getCurrentStatus(index.value)
+})
+
+const currentTitle = computed(() => {
+  return getCurrentTitle(currentStatus.value)
+})
+const rootStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (steps) {
+    const { vertical, space } = steps.props
+    if (vertical) {
+      if (isDef(space)) {
+        style['height'] = space
+      }
+    } else {
+      style['width'] = space || 100 / steps.children.length + '%'
+    }
+  }
+  return `${objToStyle(style)}${props.customStyle}`
+})
+
+const canAlignCenter = computed(() => {
+  if (isDef(steps)) {
+    const { vertical, alignCenter } = steps.props
+    return Boolean(!vertical && alignCenter)
+  } else {
+    return false
+  }
+})
+
+const vertical = computed(() => {
+  if (isDef(steps)) {
+    return Boolean(steps.props.vertical)
+  } else {
+    return false
+  }
+})
+const dot = computed(() => {
+  if (isDef(steps)) {
+    return Boolean(steps.props.dot)
+  } else {
+    return false
+  }
+})
+
+const childrenLength = computed(() => {
+  if (isDef(steps)) {
+    return Number(steps.children.length)
+  } else {
+    return 0
+  }
+})
+
+function getCurrentStatus(index: number) {
+  if (props.status) {
+    return props.status
+  }
+
+  if (steps) {
+    const { active } = steps.props
+    if (Number(active) > index) {
+      return 'finished'
+    } else if (Number(active) === index) {
+      return 'process'
+    } else {
+      return 'wait'
+    }
+  } else {
+    return 'wait'
+  }
+}
+function getCurrentTitle(currentStatus: string) {
+  if (props.title) return props.title
+
+  switch (currentStatus) {
+    case 'finished':
+      return translate('finished')
+    case 'error':
+      return translate('failed')
+    case 'process':
+      return translate('process')
+    case 'wait':
+    default:
+      return translate('wait')
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-step/types.ts

@@ -0,0 +1,33 @@
+import type { PropType } from 'vue'
+import { baseProps, makeBooleanProp } from '../common/props'
+
+export type StepStatus = 'finished' | 'process' | 'error'
+
+export const stepProps = {
+  ...baseProps,
+
+  /**
+   * 步骤标题，如果没有则使用默认文案。
+   * 当只有标题而没有描述时，标题的字号会小2号。
+   * 类型: string
+   */
+  title: String,
+
+  /**
+   * 步骤描述。
+   * 类型: string
+   */
+  description: String,
+
+  /**
+   * 步骤图标。
+   * 类型: string
+   */
+  icon: String,
+
+  /**
+   * 步骤状态，可选值为 'finished'（已完成）、'process'（进行中）、'error'（出错）。
+   * 类型: string
+   */
+  status: String as PropType<StepStatus>
+}

package/components/oxy-steps/index.scss

@@ -0,0 +1,10 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(steps) {
+  font-size: 0;
+
+  @include when(vertical) {
+    display: block;
+  }
+}

package/components/oxy-steps/oxy-steps.vue

@@ -0,0 +1,28 @@
+<template>
+  <view :class="`oxy-steps ${customClass} ${vertical ? 'is-vertical' : ''}`" :style="customStyle">
+    <slot />
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'oxy-steps',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import { useChildren } from '../composables/useChildren'
+import { STEPS_KEY, stepsProps } from './types'
+
+const props = defineProps(stepsProps)
+
+const { linkChildren } = useChildren(STEPS_KEY)
+
+linkChildren({ props })
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-steps/types.ts

@@ -0,0 +1,50 @@
+import { type ExtractPropTypes, type InjectionKey } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp } from '../common/props'
+
+export const stepsProps = {
+  ...baseProps,
+
+  /**
+   * 当前激活的步骤进度，以数字表示。
+   * 类型: number
+   * 默认值: 0
+   */
+  active: makeNumberProp(0),
+
+  /**
+   * 是否为垂直方向的步骤条。
+   * 类型: boolean
+   * 默认值: false
+   */
+  vertical: makeBooleanProp(false),
+
+  /**
+   * 是否为点状步骤条样式。
+   * 类型: boolean
+   * 默认值: false
+   */
+  dot: makeBooleanProp(false),
+
+  /**
+   * 步骤条之间的间距，默认为自动计算。
+   * 如果指定，则使用此值作为间距。
+   * 类型: string
+   * 默认值: 自动计算
+   */
+  space: String,
+
+  /**
+   * 是否将步骤条水平居中显示，只对横向步骤条有效。
+   * 类型: boolean
+   * 默认值: false
+   */
+  alignCenter: makeBooleanProp(false)
+}
+
+export type StepsProps = ExtractPropTypes<typeof stepsProps>
+
+export type StepsProvide = {
+  props: Partial<StepsProps>
+}
+
+export const STEPS_KEY: InjectionKey<StepsProvide> = Symbol('oxy-steps')

package/components/oxy-sticky/index.scss

@@ -0,0 +1,9 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(sticky) {
+  display: inline-block;
+  @include e(container) {
+    display: inline-block;
+  }
+}