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

package/components/wd-tag/index.scss

@@ -0,0 +1,325 @@
+@use "sass:map";
+@use '../../styles/variable.scss' as *;
+@use '../../styles/mixin/mixin.scss' as *;
+
+// 基础文字颜色
+$tag-color: var(--wot-tag-color, $text-white) !default;
+// 基础字号
+$tag-font-size: var(--wot-tag-font-size, $typography-label-size-main) !default;
+// 默认圆角
+$tag-radius: var(--wot-tag-radius, $radius-small) !default;
+// 圆角标签圆角
+$tag-round-radius: var(--wot-tag-round-radius, $radius-radius-full) !default;
+// 标记标签圆角
+$tag-mark-radius: var(--wot-tag-mark-radius, $radius-large $radius-main) !default;
+// 图标间距
+$tag-icon-spacing: var(--wot-tag-icon-spacing, $spacing-ultra-tight) !default;
+// 输入态宽度
+$tag-input-width: var(--wot-tag-input-width, $n-64) !default;
+// 主色浅色背景
+$tag-primary-light-bg: var(--wot-tag-primary-light-bg, $primary-1) !default;
+// 主色背景
+$tag-primary-bg: var(--wot-tag-primary-bg, $primary-6) !default;
+// 主色文字颜色
+$tag-primary-color: var(--wot-tag-primary-color, $primary-6) !default;
+// 成功色背景
+$tag-success-bg: var(--wot-tag-success-bg, $success-main) !default;
+// 成功色浅色背景
+$tag-success-light-bg: var(--wot-tag-success-light-bg, $success-surface) !default;
+// 成功色文字颜色
+$tag-success-color: var(--wot-tag-success-color, $success-main) !default;
+// 警告色背景
+$tag-warning-bg: var(--wot-tag-warning-bg, $warning-main) !default;
+// 警告色浅色背景
+$tag-warning-light-bg: var(--wot-tag-warning-light-bg, $warning-surface) !default;
+// 警告色文字颜色
+$tag-warning-color: var(--wot-tag-warning-color, $warning-main) !default;
+// 危险色背景
+$tag-danger-bg: var(--wot-tag-danger-bg, $danger-main) !default;
+// 危险色浅色背景
+$tag-danger-light-bg: var(--wot-tag-danger-light-bg, $danger-surface) !default;
+// 危险色文字颜色
+$tag-danger-color: var(--wot-tag-danger-color, $danger-main) !default;
+// 橘火色背景
+$tag-volcano-bg: var(--wot-tag-volcano-bg, $volcano-6) !default;
+// 橘火色浅色背景
+$tag-volcano-light-bg: var(--wot-tag-volcano-light-bg, $volcano-1) !default;
+// 橘火色文字颜色
+$tag-volcano-color: var(--wot-tag-volcano-color, $volcano-6) !default;
+// 默认信息色背景
+$tag-info-bg: var(--wot-tag-info-bg, $text-auxiliary) !default; 
+// 默认信息色浅色背景
+$tag-info-light-bg: var(--wot-tag-info-light-bg, $filled-content) !default;  
+// 默认信息色文字颜色
+$tag-info-color: var(--wot-tag-info-color, $text-secondary) !default;
+// 亮蓝色背景
+$tag-lightblue-bg: var(--wot-tag-lightblue-bg, $lightblue-6) !default;
+// 亮蓝色浅色背景
+$tag-lightblue-light-bg: var(--wot-tag-lightblue-light-bg, $lightblue-1) !default;
+// 亮蓝色文字颜色
+$tag-lightblue-color: var(--wot-tag-lightblue-color, $lightblue-6) !default;
+// 青色背景
+$tag-cyan-bg: var(--wot-tag-cyan-bg, $cyan-6) !default;
+// 青色浅色背景
+$tag-cyan-light-bg: var(--wot-tag-cyan-light-bg, $cyan-1) !default;
+// 青色文字颜色
+$tag-cyan-color: var(--wot-tag-cyan-color, $cyan-6) !default;
+// 粉色背景
+$tag-pink-bg: var(--wot-tag-pink-bg, $pink-6) !default;
+// 粉色浅色背景
+$tag-pink-light-bg: var(--wot-tag-pink-light-bg, $pink-1) !default;
+// 粉色文字颜色
+$tag-pink-color: var(--wot-tag-pink-color, $pink-6) !default;
+// 紫色背景
+$tag-purple-bg: var(--wot-tag-purple-bg, $purple-6) !default;
+// 紫色浅色背景
+$tag-purple-light-bg: var(--wot-tag-purple-light-bg, $purple-1) !default;
+// 紫色文字颜色
+$tag-purple-color: var(--wot-tag-purple-color, $purple-6) !default;
+// 小尺寸字号
+$tag-small-font-size: var(--wot-tag-small-font-size, $typography-label-size-small) !default;
+// 小尺寸行高
+$tag-small-line-height: var(--wot-tag-small-line-height, $typography-label-line--height-size-small) !default;
+// 小尺寸内边距
+$tag-small-padding: var(--wot-tag-small-padding, $padding-zero $padding-super-tight) !default;
+// 小尺寸圆角态内边距
+$tag-small-round-padding: var(--wot-tag-small-round-padding, $padding-zero $padding-tight) !default;
+// 小尺寸图标尺寸
+$tag-small-icon-size: var(--wot-tag-small-icon-size, $n-10) !default;
+// 中尺寸字号
+$tag-medium-font-size: var(--wot-tag-medium-font-size, $typography-label-size-main) !default;
+// 中尺寸行高
+$tag-medium-line-height: var(--wot-tag-medium-line-height, $typography-label-line--height-size-main) !default;
+// 中尺寸内边距
+$tag-medium-padding: var(--wot-tag-medium-padding, $n-1 $padding-super-tight) !default;
+// 中尺寸圆角态内边距
+$tag-medium-round-padding: var(--wot-tag-medium-round-padding, $n-1 $padding-tight) !default;
+// 中尺寸图标尺寸
+$tag-medium-icon-size: var(--wot-tag-medium-icon-size, $n-10) !default;
+// 默认尺寸字号
+$tag-default-font-size: var(--wot-tag-default-font-size, $typography-label-size-main) !default;
+// 默认尺寸行高
+$tag-default-line-height: var(--wot-tag-default-line-height, $typography-label-line--height-size-main) !default;
+// 默认尺寸内边距
+$tag-default-padding: var(--wot-tag-default-padding, $n-3 $padding-extra-tight) !default;
+// 默认尺寸圆角态内边距
+$tag-default-round-padding: var(--wot-tag-default-round-padding, $n-3 $padding-loose) !default;
+// 默认尺寸图标尺寸
+$tag-default-icon-size: var(--wot-tag-default-icon-size, $n-12) !default;
+// 大尺寸字号
+$tag-large-font-size: var(--wot-tag-large-font-size, $typography-label-size-large) !default;
+// 大尺寸行高
+$tag-large-line-height: var(--wot-tag-large-line-height, $typography-label-line--height-size-large) !default;
+// 大尺寸内边距
+$tag-large-padding: var(--wot-tag-large-padding, $n-3 $padding-extra-tight) !default;
+// 大尺寸圆角态内边距
+$tag-large-round-padding: var(--wot-tag-large-round-padding, $n-3 $padding-loose) !default;
+// 大尺寸图标尺寸
+$tag-large-icon-size: var(--wot-tag-large-icon-size, $n-12) !default;
+// 超大尺寸字号
+$tag-extra-large-font-size: var(--wot-tag-extra-large-font-size, $typography-body-size-main) !default;
+// 超大尺寸行高
+$tag-extra-large-line-height: var(--wot-tag-extra-large-line-height, $typography-body-line--height-size-main) !default;
+// 超大尺寸内边距
+$tag-extra-large-padding: var(--wot-tag-extra-large-padding, $n-3 $padding-extra-tight) !default;
+// 超大尺寸圆角态内边距
+$tag-extra-large-round-padding: var(--wot-tag-extra-large-round-padding, $n-3 $padding-loose) !default;
+// 超大尺寸图标尺寸
+$tag-extra-large-icon-size: var(--wot-tag-extra-large-icon-size, $n-12) !default;
+
+$tag-types: (
+  "default": (
+    "color": $tag-info-color,
+    "bg": $tag-info-bg, 
+    "light-bg": $tag-info-light-bg
+  ),
+  "primary": (
+    "color": $tag-primary-color,
+    "bg": $tag-primary-bg,
+    "light-bg": $tag-primary-light-bg
+  ),
+  "success": (
+    "color": $tag-success-color,
+    "bg": $tag-success-bg,
+    "light-bg": $tag-success-light-bg
+  ),
+  "danger": (
+    "color": $tag-danger-color,
+    "bg": $tag-danger-bg,
+    "light-bg": $tag-danger-light-bg
+  ),
+  "warning": (
+    "color": $tag-warning-color,
+    "bg": $tag-warning-bg,
+    "light-bg": $tag-warning-light-bg
+  ),
+  "volcano": (
+    "color": $tag-volcano-color,
+    "bg": $tag-volcano-bg,
+    "light-bg": $tag-volcano-light-bg
+  ),
+  "lightblue": (
+    "color": $tag-lightblue-color,
+    "bg": $tag-lightblue-bg,
+    "light-bg": $tag-lightblue-light-bg
+  ),
+  "cyan": (
+    "color": $tag-cyan-color,
+    "bg": $tag-cyan-bg,
+    "light-bg": $tag-cyan-light-bg
+  ),
+  "pink": (
+    "color": $tag-pink-color,
+    "bg": $tag-pink-bg,
+    "light-bg": $tag-pink-light-bg
+  ),
+  "purple": (
+    "color": $tag-purple-color,
+    "bg": $tag-purple-bg,
+    "light-bg": $tag-purple-light-bg
+  )
+);
+
+$tag-sizes: (
+  "small": (
+    "font-size": $tag-small-font-size,
+    "line-height": $tag-small-line-height,
+    "padding": $tag-small-padding,
+    "round-padding": $tag-small-round-padding,
+    "icon-size": $tag-small-icon-size
+  ),
+  "medium": (
+    "font-size": $tag-medium-font-size,
+    "line-height": $tag-medium-line-height,
+    "padding": $tag-medium-padding,
+    "round-padding": $tag-medium-round-padding,
+    "icon-size": $tag-medium-icon-size
+  ),
+  "default": (
+    "font-size": $tag-default-font-size,
+    "line-height": $tag-default-line-height,
+    "padding": $tag-default-padding,
+    "round-padding": $tag-default-round-padding,
+    "icon-size": $tag-default-icon-size
+  ),
+  "large": (
+    "font-size": $tag-large-font-size,
+    "line-height": $tag-large-line-height,
+    "padding": $tag-large-padding,
+    "round-padding": $tag-large-round-padding,
+    "icon-size": $tag-large-icon-size
+  ),
+  "extra-large": (
+    "font-size": $tag-extra-large-font-size,
+    "line-height": $tag-extra-large-line-height,
+    "padding": $tag-extra-large-padding,
+    "round-padding": $tag-extra-large-round-padding,
+    "icon-size": $tag-extra-large-icon-size
+  )
+);
+
+@include b(tag) {
+  display: inline-flex;
+  align-items: center;
+  color: $tag-color;
+  border-radius: $tag-radius;
+
+  @include e(input) {
+    width: $tag-input-width;
+    min-height: 0;
+    padding: 0;
+    margin: 0;
+    line-height: 1;
+    font-size: inherit;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: inherit;
+  }
+
+  @each $size, $conf in $tag-sizes {
+    @include when($size) {
+      font-size: map.get($conf, "font-size");
+      line-height: map.get($conf, "line-height");
+      padding: map.get($conf, "padding");
+      
+      @include when(round) {
+        padding: map.get($conf, "round-padding");
+      }
+      @include edeep(icon,add,close-icon) {
+        font-size: map.get($conf, "icon-size");
+        color: currentColor;
+      }
+
+      @include edeep(icon) {
+        margin-right: $tag-icon-spacing;
+      }
+      .wd-tag__input {
+        height: map.get($conf, "line-height");
+      }
+    }
+  }
+
+  @each $type, $conf in $tag-types {
+    @include when($type) {
+      $color: map.get($conf, "color");
+      $bg: map.get($conf, "bg");
+      $light-bg: map.get($conf, "light-bg");
+
+      @include when(light) {
+        background: $light-bg;
+        color: $color;
+      }
+
+      @include when(dark) {
+        background: $bg;
+        color: $tag-color;
+      }
+
+      @include when(plain) {
+        background: transparent;
+        color: $color;
+        @include pixelBorderSurround($color,solid);
+      }
+
+      @include when(dashed) {
+        background: transparent;
+        color: $color;
+        @include pixelBorderSurround($color,dashed);
+      }
+
+      @include when(text) {
+        background: transparent;
+        color: $color;
+      }
+
+      .wd-tag__placeholder {
+        color: currentColor;
+      }
+    }
+  }
+
+  @include when(round) {
+    border-radius: $tag-round-radius;
+  }
+
+  @include when(mark) {
+    border-radius: $tag-mark-radius;
+  }
+
+  @include when(active) {
+    color: $tag-primary-color;
+    border-color: $tag-primary-color;
+  }
+  @include when(icon) {
+    font-size: $tag-font-size;
+  }
+
+  @include e(close) {
+    margin-left: $tag-icon-spacing;
+  }
+
+  @include edeep(add) {
+    margin-right: $tag-icon-spacing;
+  }
+}

package/components/wd-tag/types.ts

@@ -0,0 +1,90 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeStringProp } from '../../common/props'
+
+/**
+ * 标签类型
+ * 可选值: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'volcano' | 'lightblue' | 'cyan' | 'pink' | 'purple'
+ */
+export type TagType = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'volcano' | 'lightblue' | 'cyan' | 'pink' | 'purple'
+
+/**
+ * 标签变体
+ * 可选值: 'light' | 'dark' | 'plain' | 'dashed' | 'text'
+ */
+export type TagVariant = 'light' | 'dark' | 'plain' | 'dashed' | 'text'
+
+/**
+ * 标签尺寸
+ * 可选值: 'small' | 'medium' | 'large' | 'extra-large' | 'default'
+ */
+export type TagSize = 'small' | 'medium' | 'large' | 'extra-large' | 'default'
+
+export const tagProps = {
+  ...baseProps,
+
+  /**
+   * 标签尺寸
+   * 类型: TagSize
+   * 可选值: 'small' | 'medium' | 'large' | 'extra-large' | 'default'
+   * 默认值: 'default'
+   */
+  size: makeStringProp<TagSize>('default'),
+  /**
+   * 标签类型
+   * 类型: TagType
+   * 可选值: 'default' | 'primary' | 'danger' | 'warning' | 'success' | 'volcano' | 'lightblue' | 'cyan' | 'pink' | 'purple'
+   * 默认值: 'default'
+   */
+  type: makeStringProp<TagType>('default'),
+  /**
+   * 左侧图标
+   * 类型: string
+   * 默认值: ''
+   */
+  icon: makeStringProp(''),
+  /**
+   * 是否可关闭（只对圆角类型支持）
+   * 类型: boolean
+   * 默认值: false
+   */
+  closable: makeBooleanProp(false),
+  /**
+   * 是否为新增标签
+   * 类型: boolean
+   * 默认值: false
+   */
+  dynamic: makeBooleanProp(false),
+  /**
+   * 文字颜色
+   * 类型: string
+   * 默认值: ''
+   */
+  color: makeStringProp(''),
+  /**
+   * 背景色和边框色
+   * 类型: string
+   * 默认值: ''
+   */
+  bgColor: makeStringProp(''),
+  /**
+   * 圆角类型
+   * 类型: boolean
+   * 默认值: false
+   */
+  round: makeBooleanProp(false),
+  /**
+   * 标记类型
+   * 类型: boolean
+   * 默认值: false
+   */
+  mark: makeBooleanProp(false),
+  /**
+   * 标签变体
+   * 类型: TagVariant
+   * 可选值: 'light' | 'dark' | 'plain' | 'dashed' | 'text'
+   * 默认值: 'dark'
+   */
+  variant: makeStringProp<TagVariant>('dark')
+}
+
+export type TagProps = ExtractPropTypes<typeof tagProps>

package/components/wd-tag/wd-tag.vue

@@ -0,0 +1,158 @@
+<template>
+  <view :class="rootClass" :style="rootStyle" @click="handleClick">
+    <input
+      v-if="dynamicInput && dynamic"
+      class="wd-tag__input"
+      :placeholder="translate('placeholder')"
+      placeholder-class="wd-tag__placeholder"
+      type="text"
+      :focus="true"
+      v-model="dynamicValue"
+      @blur="handleBlur"
+      @confirm="handleConfirm"
+    />
+    <view v-else-if="dynamic" class="wd-tag__text" :style="textStyle" @click.stop="handleAdd">
+      <slot name="add">
+        <wd-icon name="plus" custom-class="wd-tag__add" />
+        <text>{{ translate('add') }}</text>
+      </slot>
+    </view>
+
+    <template v-else>
+      <slot name="icon" v-if="$slots.icon || icon">
+        <wd-icon :name="icon" custom-class="wd-tag__icon" />
+      </slot>
+      <text class="wd-tag__text" :style="textStyle" v-if="$slots.default">
+        <slot />
+      </text>
+      <view class="wd-tag__close" v-if="closable" @click.stop="handleClose">
+        <wd-icon name="close" custom-class="wd-tag__close-icon"></wd-icon>
+      </view>
+    </template>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-tag',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { objToStyle } from '../../common/util'
+import { computed, ref } from 'vue'
+import { useTranslate } from '../../composables/useTranslate'
+import { tagProps } from './types'
+
+const props = defineProps(tagProps)
+const emit = defineEmits(['click', 'close', 'confirm'])
+
+const { translate } = useTranslate('tag')
+
+const dynamicValue = ref<string>('')
+const dynamicInput = ref<boolean>(false)
+
+/**
+ * 根节点类名
+ */
+const rootClass = computed<string>(() => {
+  const { type, variant, size, round, mark, customClass } = props
+  const classList: string[] = []
+  type && classList.push(`is-${type}`)
+  variant && classList.push(`is-${variant}`)
+  size && classList.push(`is-${size}`)
+  round && classList.push('is-round')
+  mark && classList.push('is-mark')
+  return `wd-tag ${customClass} ${classList.join(' ')}`
+})
+
+/**
+ * 根节点样式
+ */
+const rootStyle = computed<string>(() => {
+  const rootStyle: Record<string, any> = {}
+  if (props.variant !== 'plain' && props.variant !== 'dashed' && props.variant !== 'text' && props.bgColor) {
+    rootStyle['background'] = props.bgColor
+  }
+  if (props.bgColor) {
+    rootStyle['border-color'] = props.bgColor
+  }
+  return `${objToStyle(rootStyle)}${props.customStyle}`
+})
+
+/**
+ * 文本样式
+ */
+const textStyle = computed<string>(() => {
+  const textStyle: Record<string, any> = {}
+  if (props.color) {
+    textStyle['color'] = props.color
+  }
+  return objToStyle(textStyle)
+})
+
+/**
+ * 处理点击事件
+ * @param {MouseEvent} event 鼠标事件对象
+ * @returns {void}
+ */
+function handleClick(event: MouseEvent) {
+  emit('click', event)
+}
+
+/**
+ * 处理关闭事件
+ * @param {MouseEvent} event 鼠标事件对象
+ * @returns {void}
+ */
+function handleClose(event: MouseEvent): void {
+  emit('close', event)
+}
+
+/**
+ * 处理添加事件
+ * @returns {void}
+ */
+function handleAdd(): void {
+  dynamicInput.value = true
+  dynamicValue.value = ''
+}
+
+/**
+ * 处理输入框失焦事件
+ * @returns {void}
+ */
+function handleBlur(): void {
+  setDynamicInput()
+}
+
+/**
+ * 处理输入完成事件
+ * @param {any} event 回车或完成事件对象
+ * @returns {void}
+ */
+function handleConfirm(event: any): void {
+  setDynamicInput()
+  emit('confirm', {
+    value: event.detail.value
+  })
+}
+
+/**
+ * 重置动态输入框状态
+ * @returns {void}
+ */
+function setDynamicInput() {
+  dynamicInput.value = false
+}
+</script>
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-text/index.scss

@@ -0,0 +1,52 @@
+@use '../../styles/variable.scss'as *;
+@use '../../styles/mixin/mixin.scss'as *;
+
+// 默认文字字号
+$text-font-size: var(--wot-text-font-size, $typography-body-size-main) !default;
+// 默认文字行高
+$text-line-height: var(--wot-text-line-height, $typography-body-line--height-size-main) !default;
+// 主色文字颜色
+$text-primary-color: var(--wot-text-primary-color, $primary-6) !default;
+// 成功文字颜色
+$text-success-color: var(--wot-text-success-color, $success-main) !default;
+// 错误文字颜色
+$text-error-color: var(--wot-text-error-color, $danger-main) !default;
+// 警告文字颜色
+$text-warning-color: var(--wot-text-warning-color, $warning-main) !default;
+// 默认文字颜色
+$text-default-color: var(--wot-text-default-color, $text-auxiliary) !default;
+
+@include b(text) {
+  font-size: $text-font-size;
+  line-height: $text-line-height;
+
+  @include when(bold) {
+    font-weight: bold;
+  }
+
+  @for $i from 1 through 5 {
+    &.is-lines-#{$i} {
+      @include multiEllipsis($i);
+    }
+  }
+
+  @include when(default) {
+    color: $text-default-color;
+  }
+
+  @include when(primary) {
+    color: $text-primary-color;
+  }
+
+  @include when(error) {
+    color: $text-error-color;
+  }
+
+  @include when(warning) {
+    color: $text-warning-color;
+  }
+
+  @include when(success) {
+    color: $text-success-color;
+  }
+}