@tplc/wot 0.0.1

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

@@ -0,0 +1,94 @@
+<!--
+ * @Author: weisheng
+ * @Date: 2023-06-12 10:04:19
+ * @LastEditTime: 2024-04-07 14:01:12
+ * @LastEditors: weisheng
+ * @Description: 
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-status-tip\wd-status-tip.vue
+ * 记得注释
+-->
+<template>
+  <view :class="`wd-status-tip  ${customClass}`" :style="customStyle">
+    <wd-img
+      v-if="imgUrl"
+      :mode="imageMode"
+      :src="imgUrl"
+      custom-class="wd-status-tip__image"
+      :custom-style="imgStyle"
+    ></wd-img>
+    <view v-if="tip" class="wd-status-tip__text">{{ tip }}</view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-status-tip',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, type CSSProperties } from 'vue'
+import { addUnit, isDef, isObj, objToStyle } from '../common/util'
+import { statusTipProps } from './types'
+
+const props = defineProps(statusTipProps)
+
+// 图片地址
+const imgUrl = computed(() => {
+  // 改用网络地址，避免小程序打包的时候统一打包进去导致包过大问题
+  let img: string = ''
+  switch (props.image) {
+    case 'collect':
+      img = 'https://img.wot-design-uni.cn/wdu/collect.png'
+      break
+    case 'comment':
+      img = 'https://img.wot-design-uni.cn/wdu/comment.png'
+      break
+    case 'content':
+      img = 'https://img.wot-design-uni.cn/wdu/content.png'
+      break
+    case 'halo':
+      img = 'https://img.wot-design-uni.cn/wdu/halo.png'
+      break
+    case 'message':
+      img = 'https://img.wot-design-uni.cn/wdu/message.png'
+      break
+    case 'network':
+      img = 'https://img.wot-design-uni.cn/wdu/network.png'
+      break
+    case 'search':
+      img = 'https://img.wot-design-uni.cn/wdu/search.png'
+      break
+    default:
+      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';
+</style>

package/components/wd-step/index.scss

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

package/components/wd-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/wd-step/wd-step.vue

@@ -0,0 +1,151 @@
+<template>
+  <view
+    v-if="currentStatus"
+    :class="`wd-step ${customClass} ${currentStatus ? 'is-' + currentStatus : ''} ${canAlignCenter ? 'is-center' : ''}  ${
+      vertical ? 'is-vertical' : ''
+    }`"
+    :style="rootStyle"
+  >
+    <view :class="`wd-step__header  ${dot ? 'is-dot' : ''}`">
+      <view
+        :class="`wd-step__icon  ${dot ? 'is-dot' : !!icon || $slots.icon ? 'is-icon' : 'is-text'}`"
+      >
+        <view v-if="dot" class="wd-step__dot"></view>
+        <slot v-else-if="$slots.icon" name="icon" />
+        <wd-icon v-else-if="icon" custom-class="wd-step__icon-inner" :name="icon" />
+        <view v-else class="wd-step__icon-outer">
+          <wd-icon v-if="currentStatus === 'finished'" name="check-bold" />
+          <wd-icon v-else-if="currentStatus === 'error'" name="close-bold" />
+          <text v-else>{{ index + 1 }}</text>
+        </view>
+      </view>
+      <view v-if="index < childrenLength - 1" class="wd-step__line"></view>
+    </view>
+    <view class="wd-step__content">
+      <view :class="`wd-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="wd-step__description">
+        <slot v-if="$slots.description" name="description" />
+        <text v-else>{{ description }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-step',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useParent } from '../composables/useParent'
+import { STEPS_KEY } from '../wd-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';
+</style>

package/components/wd-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/wd-steps/types.ts

@@ -0,0 +1,59 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-01-09 11:46:46
+ * @LastEditTime: 2024-03-18 17:23:06
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-steps\types.ts
+ * 记得注释
+ */
+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('wd-steps')

package/components/wd-steps/wd-steps.vue

@@ -0,0 +1,37 @@
+<!--
+ * @Author: weisheng
+ * @Date: 2023-06-12 18:40:58
+ * @LastEditTime: 2024-03-15 13:42:55
+ * @LastEditors: weisheng
+ * @Description: 
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-steps\wd-steps.vue
+ * 记得注释
+-->
+<template>
+  <view :class="`wd-steps ${customClass} ${vertical ? 'is-vertical' : ''}`">
+    <slot />
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-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';
+</style>

package/components/wd-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;
+  }
+}

package/components/wd-sticky/types.ts

@@ -0,0 +1,13 @@
+import { baseProps, makeNumberProp } from '../common/props'
+
+export const stickyProps = {
+  ...baseProps,
+  /**
+   * 层级
+   */
+  zIndex: makeNumberProp(1),
+  /**
+   * 吸顶距离
+   */
+  offsetTop: makeNumberProp(0),
+}