@wot-ui/ui 1.0.0 → 2.0.0-alpha.4

package/components/wd-backtop/types.ts

@@ -0,0 +1,66 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeNumberProp, makeRequiredProp, makeStringProp } from '../../common/props'
+
+/**
+ * 回到顶部按钮形状
+ * 可选值: 'circle' | 'square'
+ */
+export type BacktopShape = 'circle' | 'square'
+
+/**
+ * 回到顶部组件属性定义
+ */
+export const backtopProps = {
+  ...baseProps,
+  /**
+   * 页面滚动距离
+   * 类型: number
+   */
+  scrollTop: makeRequiredProp(Number),
+  /**
+   * 按钮文本
+   */
+  text: String,
+  /**
+   * 滚动距离超过该值时显示回到顶部按钮，单位 px
+   * 默认值: 300
+   */
+  top: makeNumberProp(300),
+  /**
+   * 返回顶部的滚动时长，单位 ms
+   * 默认值: 100
+   */
+  duration: makeNumberProp(100),
+  /**
+   * 层级
+   * 默认值: 10
+   */
+  zIndex: makeNumberProp(10),
+  /**
+   * 自定义图标样式
+   * 默认值: ''
+   */
+  iconStyle: makeStringProp(''),
+  /**
+   * 按钮形状
+   * 类型: BacktopShape
+   * 可选值: 'circle' | 'square'
+   * 默认值: 'circle'
+   */
+  shape: makeStringProp<BacktopShape>('circle'),
+  /**
+   * 距离屏幕底部的距离，单位 px
+   * 默认值: 100
+   */
+  bottom: makeNumberProp(100),
+  /**
+   * 距离屏幕右侧的距离，单位 px
+   * 默认值: 20
+   */
+  right: makeNumberProp(20)
+}
+
+/**
+ * 回到顶部组件属性
+ */
+export type BacktopProps = ExtractPropTypes<typeof backtopProps>

package/components/wd-backtop/wd-backtop.vue

@@ -0,0 +1,57 @@
+<template>
+  <wd-transition :show="show" name="fade">
+    <view
+      :class="`wd-backtop ${customClass} is-${shape}`"
+      :style="`z-index: ${zIndex}; bottom: ${bottom}px; right: ${right}px; ${customStyle}`"
+      @click="handleBacktop"
+    >
+      <slot>
+        <view class="wd-backtop__content">
+          <wd-icon custom-class="wd-backtop__backicon" name="to-top" :custom-style="iconStyle" />
+          <text class="wd-backtop__text" v-if="text">{{ text }}</text>
+        </view>
+      </slot>
+    </view>
+  </wd-transition>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-backtop',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdTransition from '../wd-transition/wd-transition.vue'
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { computed } from 'vue'
+import { backtopProps } from './types'
+
+const props = defineProps(backtopProps)
+
+/**
+ * 是否显示回到顶部按钮
+ */
+const show = computed(() => props.scrollTop > props.top)
+
+/**
+ * 处理点击回到顶部
+ */
+function handleBacktop() {
+  uni.pageScrollTo({
+    scrollTop: 0,
+    duration: props.duration
+  })
+}
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-badge/index.scss

@@ -0,0 +1,116 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+
+// 徽标高度
+$badge-height: var(--wot-badge-height, $n-16) !default;
+// 徽标最小宽度
+$badge-min-width: var(--wot-badge-min-width, $n-16) !default;
+// 徽标内边距
+$badge-padding: var(--wot-badge-padding, $padding-zero $padding-super-tight) !default;
+// 危险类型背景色
+$badge-danger-bg: var(--wot-badge-danger-bg, $danger-main) !default;
+// 成功类型背景色
+$badge-success-bg: var(--wot-badge-success-bg, $success-main) !default;
+// 警告类型背景色
+$badge-warning-bg: var(--wot-badge-warning-bg, $warning-main) !default;
+// 信息类型背景色
+$badge-info-bg: var(--wot-badge-info-bg, $filled-content) !default;
+// 主类型背景色
+$badge-primary-bg: var(--wot-badge-primary-bg, $primary-6) !default;
+// 徽标文本颜色
+$badge-color: var(--wot-badge-color, $text-white) !default;
+// 信息类型文本颜色
+$badge-info-color: var(--wot-badge-info-color, $text-secondary) !default;
+// 徽标文本字号
+$badge-font-size: var(--wot-badge-font-size, $typography-label-size-extra-small) !default;
+// 徽标文本行高
+$badge-line-height: var(--wot-badge-line-height, $typography-label-line--height-size-extra-small) !default;
+// 默认圆角
+$badge-border-radius: var(--wot-badge-border-radius, $radius-radius-full) !default;
+// 方形圆角
+$badge-square-border-radius: var(--wot-badge-square-border-radius, $radius-main) !default;
+// 气泡圆角
+$badge-bubble-border-radius: var(--wot-badge-bubble-border-radius, $radius-large $radius-large $radius-large $radius-zero) !default;
+// 圆点尺寸
+$badge-dot-size: var(--wot-badge-dot-size, $n-6) !default;
+// 徽标文本字重
+$badge-font-weight: var(--wot-badge-font-weight, $font-weight-medium) !default;
+// 固定定位偏移
+$badge-transform: var(--wot-badge-transform, translateY(-50%) translateX(50%)) !default;
+// 徽标边框颜色
+$badge-border-color: var(--wot-badge-border-color, $border-white) !default;
+
+@include b(badge) {
+  position: relative;
+  vertical-align: middle;
+  display: inline-block;
+
+  @include e(content) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    height: $badge-height;
+    padding: $badge-padding;
+    background: $badge-danger-bg;
+    border-radius: $badge-border-radius;
+    color: $badge-color;
+    font-size: $badge-font-size;
+    line-height: $badge-line-height;
+    font-weight: $badge-font-weight;
+    min-width: $badge-min-width;
+
+    @include when(dot) {
+      height: $badge-dot-size;
+      width: $badge-dot-size;
+      min-width: $badge-dot-size;
+      padding: 0;
+      border-radius: $badge-border-radius;
+    }
+
+    @include when(square) {
+      border-radius: $badge-square-border-radius;
+    }
+
+    @include when(bubble) {
+      border-radius: $badge-bubble-border-radius;
+    }
+
+    @include when(border) {
+      @include pixelBorderSurround($badge-border-color);
+    }
+
+    @include when(fixed) {
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      z-index: 1;
+      transform: $badge-transform;
+    }
+
+    @each $type in (primary, success, warning, info, danger) {
+      @include m($type) {
+        @if $type==primary {
+          background: $badge-primary-bg;
+        }
+
+        @else if $type==success {
+          background: $badge-success-bg;
+        }
+
+        @else if $type==warning {
+          background: $badge-warning-bg;
+        }
+
+        @else if $type==info {
+          background: $badge-info-bg;
+          color: $badge-info-color;
+        }
+
+        @else {
+          background: $badge-danger-bg;
+        }
+      }
+    }
+  }
+}

package/components/wd-badge/types.ts

@@ -0,0 +1,94 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeStringProp, numericProp } from '../../common/props'
+
+/**
+ * 徽标类型
+ * 可选值: 'primary' | 'success' | 'warning' | 'danger' | 'info'
+ */
+export type BadgeType = 'primary' | 'success' | 'warning' | 'danger' | 'info'
+
+/**
+ * 徽标形状
+ * 可选值: 'circle' | 'square' | 'bubble'
+ */
+export type BadgeShape = 'circle' | 'square' | 'bubble'
+
+/**
+ * Badge 组件 Props 定义
+ */
+export const badgeProps = {
+  ...baseProps,
+  /**
+   * 徽标形状
+   * 类型: BadgeShape
+   * 可选值: 'circle' | 'square' | 'bubble'
+   * 默认值: 'circle'
+   */
+  shape: makeStringProp<BadgeShape>('circle'),
+  /**
+   * 显示值
+   * 类型: string | number
+   * 默认值: undefined
+   */
+  value: numericProp,
+  /**
+   * 当数值为 0 时，是否展示徽标
+   * 类型: boolean
+   * 默认值: false
+   */
+  showZero: makeBooleanProp(false),
+  /**
+   * 背景颜色
+   * 类型: string
+   * 默认值: undefined
+   */
+  bgColor: String,
+  /**
+   * 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型
+   * 类型: number
+   * 默认值: undefined
+   */
+  max: Number,
+  /**
+   * 是否为红色点状标注
+   * 类型: boolean
+   * 默认值: false
+   */
+  isDot: Boolean,
+  /**
+   * 是否隐藏 badge
+   * 类型: boolean
+   * 默认值: false
+   */
+  hidden: Boolean,
+  /**
+   * 徽标类型
+   * 类型: BadgeType
+   * 可选值: 'primary' | 'success' | 'warning' | 'danger' | 'info'
+   * 默认值: undefined
+   */
+  type: String as PropType<BadgeType>,
+  /**
+   * 为正时，角标向下偏移对应的像素
+   * 类型: string | number
+   * 默认值: undefined
+   */
+  top: numericProp,
+  /**
+   * 为正时，角标向左偏移对应的像素
+   * 类型: string | number
+   * 默认值: undefined
+   */
+  right: numericProp,
+  /**
+   * 是否显示白色描边
+   * 类型: boolean
+   * 默认值: false
+   */
+  border: makeBooleanProp(false)
+}
+
+/**
+ * Badge 组件 Props 类型
+ */
+export type BadgeProps = ExtractPropTypes<typeof badgeProps>

package/components/wd-badge/wd-badge.vue

@@ -0,0 +1,78 @@
+<template>
+  <view :class="['wd-badge', customClass]" :style="customStyle">
+    <slot></slot>
+    <view
+      v-if="shouldShowBadge"
+      :class="[
+        'wd-badge__content',
+        props.border ? 'is-border' : '',
+        'is-fixed',
+        type ? 'wd-badge__content--' + type : '',
+        isDot ? 'is-dot' : '',
+        shape ? 'is-' + shape : ''
+      ]"
+      :style="contentStyle"
+    >
+      {{ content }}
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-badge',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import { computed, type CSSProperties } from 'vue'
+import { badgeProps } from './types'
+import { addUnit, isDef, isNumber, objToStyle } from '../../common/util'
+
+const props = defineProps(badgeProps)
+
+/**
+ * 计算徽标显示内容
+ */
+const content = computed(() => {
+  const { value, max, isDot } = props
+  if (isDot) return ''
+  if (value && max && isNumber(value) && !Number.isNaN(value) && !Number.isNaN(max)) {
+    return max < value ? `${max}+` : value
+  }
+  return value
+})
+
+/**
+ * 计算徽标样式
+ */
+const contentStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (isDef(props.bgColor)) {
+    style.backgroundColor = props.bgColor
+  }
+
+  if (isDef(props.top)) {
+    style.top = addUnit(props.top)
+  }
+
+  if (isDef(props.right)) {
+    style.right = addUnit(props.right)
+  }
+  return objToStyle(style)
+})
+
+/**
+ * 是否展示徽标
+ */
+const shouldShowBadge = computed(() => !props.hidden && (content.value || (content.value === 0 && props.showZero) || props.isDot))
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>