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

package/components/wd-cell-group/types.ts

@@ -0,0 +1,97 @@
+import { type PropType, type ExtractPropTypes, type InjectionKey } from 'vue'
+import { baseProps, makeBooleanProp, numericProp } from '../../common/props'
+import type { CellLayout, CellSize, CellValueAlign } from '../wd-cell/types'
+
+export type CellGroupProvide = {
+  props: {
+    /**
+     * 是否显示边框线
+     * 类型: boolean
+     */
+    border?: boolean
+    /**
+     * 是否使内容垂直居中
+     * 类型: boolean
+     */
+    center?: boolean
+    /**
+     * 单元格大小
+     * 类型: CellSize
+     */
+    size?: CellSize
+    /**
+     * 左侧标题宽度
+     * 类型: string | number
+     */
+    titleWidth?: string | number
+    /**
+     * 单元格布局方式
+     * 类型: CellLayout
+     */
+    layout?: CellLayout
+    /**
+     * 右侧内容对齐方式
+     * 类型: CellValueAlign
+     */
+    valueAlign?: CellValueAlign
+  }
+}
+
+export const CELL_GROUP_KEY: InjectionKey<CellGroupProvide> = Symbol('wd-cell-group')
+
+export const cellGroupProps = {
+  ...baseProps,
+  /**
+   * 分组标题
+   * 类型: string
+   */
+  title: String,
+  /**
+   * 分组右侧内容
+   * 类型: string
+   */
+  value: String,
+  /**
+   * 是否展示外边框
+   * 类型: boolean
+   * 默认值: false
+   */
+  border: makeBooleanProp(false),
+  /**
+   * 是否展示为圆角卡片风格
+   * 类型: boolean
+   * 默认值: false
+   */
+  insert: makeBooleanProp(false),
+  /**
+   * 是否使内容垂直居中
+   * 类型: boolean
+   * 默认值: false
+   */
+  center: makeBooleanProp(false),
+  /**
+   * 单元格大小
+   * 类型: CellSize
+   * 可选值: 'large'
+   */
+  size: String as PropType<CellSize>,
+  /**
+   * 左侧标题宽度
+   * 类型: string | number
+   */
+  titleWidth: numericProp,
+  /**
+   * 单元格布局方式
+   * 类型: CellLayout
+   * 可选值: 'horizontal' | 'vertical'
+   */
+  layout: String as PropType<CellLayout>,
+  /**
+   * 右侧内容对齐方式
+   * 类型: CellValueAlign
+   * 可选值: 'left' | 'right' | 'center'
+   */
+  valueAlign: String as PropType<CellValueAlign>
+}
+
+export type CellGroupProps = ExtractPropTypes<typeof cellGroupProps>

package/components/wd-cell-group/wd-cell-group.vue

@@ -0,0 +1,48 @@
+<template>
+  <view :class="['wd-cell-group', border ? 'is-border' : '', customClass, insert ? 'wd-cell-group--insert' : '']" :style="customStyle">
+    <view v-if="title || value || $slots.title || $slots.value" class="wd-cell-group__title">
+      <!--左侧标题-->
+      <view class="wd-cell-group__left">
+        <text v-if="!$slots.title">{{ title }}</text>
+        <slot v-else name="title"></slot>
+      </view>
+      <!--右侧标题-->
+      <view class="wd-cell-group__right">
+        <text v-if="!$slots.value">{{ value }}</text>
+        <slot v-else name="value"></slot>
+      </view>
+    </view>
+    <view class="wd-cell-group__body">
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-cell-group',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { useChildren } from '../../composables/useChildren'
+import { CELL_GROUP_KEY, cellGroupProps } from './types'
+
+const props = defineProps(cellGroupProps)
+
+const { linkChildren } = useChildren(CELL_GROUP_KEY)
+
+// 向子组件提供共享属性
+linkChildren({ props })
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-checkbox/index.scss

@@ -0,0 +1,166 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+
+$checkbox-label-margin: var(--wot-checkbox-label-margin, $spacing-tight) !default; // 文字与图标距离
+$checkbox-color-checked: var(--wot-checkbox-color-checked, $primary-6) !default; // 选中颜色
+$checkbox-icon-size: var(--wot-checkbox-icon-size, $n-22) !default; // 图标尺寸
+$checkbox-unchecked-color: var(--wot-checkbox-unchecked-color, $coolgrey-3) !default; // 未选中图标颜色
+$checkbox-label-font-size: var(--wot-checkbox-label-font-size, $typography-body-size-main) !default; // 文字字号
+$checkbox-label-color: var(--wot-checkbox-label-color, $text-main) !default; // 文字颜色
+$checkbox-label-line-height: var(--wot-checkbox-label-line-height, $typography-body-line--height-size-main) !default; // 文字行高
+$checkbox-opacity-disabled: var(--wot-checkbox-opacity-disabled, $opacity-disabled) !default; // 禁用态透明度
+$checkbox-horizontal-margin: var(--wot-checkbox-horizontal-margin, $spacing-zero $spacing-extra-loose $spacing-zero $spacing-zero) !default; // 水平模式多个单选框距离
+$checkbox-button-margin: var(--wot-checkbox-button-margin, $spacing-zero $spacing-extra-loose $spacing-extra-loose $spacing-zero) !default; // 按钮模式多个单选框距离
+$checkbox-button-border-width: var(--wot-checkbox-button-border-width, $stroke-main) !default; // 边框宽度
+$checkbox-button-shape-border-radius: var(--wot-checkbox-button-shape-border-radius, $radius-radius-full) !default; // 按钮模式图标圆角大小
+$checkbox-button-shape-size: var(--wot-checkbox-button-shape-size, $n-26) !default; // 按钮模式图标容器大小
+$checkbox-button-font-size: var(--wot-checkbox-button-font-size, $typography-body-size-main) !default; // 按钮模式字号
+$checkbox-button-line-height: var(--wot-checkbox-button-line-height, $typography-body-line--height-size-main) !default; // 按钮模式行高
+$checkbox-button-bg: var(--wot-checkbox-button-bg, $filled-bottom) !default; // 按钮模式背景颜色
+$checkbox-button-bg-checked: var(--wot-checkbox-button-bg-checked, $filled-oppo) !default; // 按钮模式选中状态背景颜色
+$checkbox-button-icon-size: var(--wot-checkbox-icon-size, $n-10) !default; // 按钮模式图标尺寸
+$checkbox-button-min-width: var(--wot-checkbox-button-min-width, calc(74 * #{$n-1})) !default; // 按钮模式最小宽
+$checkbox-button-max-width: var(--wot-checkbox-button-max-width, calc(148 * #{$n-1})) !default; // 按钮模式最大宽
+$checkbox-button-border-radius: var(--wot-checkbox-button-border-radius, $radius-main) !default; // 按钮圆角大小
+$checkbox-button-padding: var(--wot-checkbox-button-padding, $padding-extra-tight $padding-extra-loose) !default; // 按钮模式内边距
+$checkbox-button-icon-color: var(--wot-checkbox-button-icon-color, $icon-white) !default; // 按钮模式图标颜色
+$checkbox-button-shape-top: var(--wot-checkbox-button-shape-top, calc(-1 * #{$n-11})) !default; // 按钮模式勾角顶部偏移
+$checkbox-button-shape-left: var(--wot-checkbox-button-shape-left, calc(-1 * #{$n-9})) !default; // 按钮模式勾角左侧偏移
+$checkbox-button-shape-right: var(--wot-checkbox-button-shape-right, calc(-1 * #{$n-9})) !default; // 按钮模式勾角右侧偏移
+$checkbox-button-icon-top: var(--wot-checkbox-button-icon-top, calc(13 * #{$n-1})) !default; // 按钮模式图标顶部偏移
+$checkbox-button-icon-right: var(--wot-checkbox-button-icon-right, $n-4) !default; // 按钮模式图标右侧偏移
+$checkbox-button-icon-left: var(--wot-checkbox-button-icon-left, $n-4) !default; // 按钮模式图标左侧偏移
+
+@include b(checkbox) {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  overflow: hidden;
+
+  @include m(horizontal) {
+    display: inline-flex;
+    justify-content: flex-start;
+    vertical-align: middle;
+
+    &:not(:last-child) {
+      margin: $checkbox-horizontal-margin;
+    }
+  }
+
+  @include m(right) {
+    .wd-checkbox__label {
+      margin-right: $checkbox-label-margin;
+    }
+  }
+
+  @include m(left) {
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+
+    .wd-checkbox__label {
+      margin-left: $checkbox-label-margin;
+    }
+  }
+
+  @include edeep(icon) {
+    font-size: $checkbox-icon-size;
+    height: $checkbox-icon-size;
+    line-height: $checkbox-icon-size;
+    color: $checkbox-unchecked-color;
+    transition: all 0.2s;
+  }
+
+  @include e(label) {
+    font-size: $checkbox-label-font-size;
+    color: $checkbox-label-color;
+    line-height: $checkbox-label-line-height;
+    word-break: break-all;
+  }
+
+  @include e(shape) {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  @include when(checked) {
+    :deep(.wd-checkbox__icon) {
+      color: $checkbox-color-checked;
+    }
+  }
+
+  @include when(indeterminate) {
+    :deep(.wd-checkbox__icon) {
+      color: $checkbox-color-checked;
+    }
+  }
+
+  @include when(button) {
+    display: inline-block;
+    min-width: $checkbox-button-min-width;
+    max-width: $checkbox-button-max-width;
+    margin: $checkbox-button-margin;
+    border-radius: $checkbox-button-border-radius;
+    background: $checkbox-button-bg;
+    font-size: $checkbox-button-font-size;
+    box-sizing: border-box;
+    border: $checkbox-button-border-width solid $checkbox-button-bg;
+
+    .wd-checkbox__label {
+      position: relative;
+      padding: $checkbox-button-padding;
+      margin: auto;
+      text-align: center;
+      @include lineEllipsis;
+    }
+
+    .wd-checkbox__shape {
+      position: absolute;
+      top: $checkbox-button-shape-top;
+      left: $checkbox-button-shape-left;
+      width: $checkbox-button-shape-size;
+      height: $checkbox-button-shape-size;
+      border-radius: $checkbox-button-shape-border-radius;
+      background: transparent;
+    }
+
+    :deep(.wd-checkbox__icon) {
+      position: absolute;
+      top: $checkbox-button-icon-top;
+      right: $checkbox-button-icon-right;
+      font-size: $checkbox-button-icon-size;
+      line-height: $checkbox-button-icon-size;
+      height: $checkbox-button-icon-size;
+      color: $checkbox-button-icon-color;
+    }
+
+    &.wd-checkbox--right {
+      .wd-checkbox__shape {
+        left: auto;
+        right: $checkbox-button-shape-right;
+      }
+
+      :deep(.wd-checkbox__icon) {
+        right: auto;
+        left: $checkbox-button-icon-left;
+      }
+    }
+
+    @include when(checked) {
+      color: $checkbox-color-checked;
+      border-color: currentColor;
+      background: $checkbox-button-bg-checked;
+
+      .wd-checkbox__shape {
+        color: $checkbox-color-checked;
+        background: currentColor;
+      }
+    }
+  }
+
+  @include when(disabled) {
+    opacity: $checkbox-opacity-disabled;
+  }
+}

package/components/wd-checkbox/types.ts

@@ -0,0 +1,118 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps } from '../../common/props'
+import type { RadioDirection, RadioPlacement, RadioType } from '../wd-radio/types'
+
+export type CheckboxType = RadioType
+export type CheckboxPlacement = RadioPlacement
+export type CheckboxDirection = RadioDirection
+
+export const checkboxProps = {
+  ...baseProps,
+  /**
+   * 单选框选中时的值
+   * 默认值: false
+   */
+  modelValue: {
+    type: [String, Number, Boolean],
+    default: false
+  },
+  name: {
+    type: [String, Number, Boolean],
+    default: ''
+  },
+  /**
+   * 单选框形状
+   * 可选值: circle | square | button | dot
+   * 默认值: 继承自 wd-checkbox-group
+   */
+  type: {
+    type: String as PropType<CheckboxType>
+  },
+  /**
+   * 选中的颜色
+   * 默认值: 继承自 wd-checkbox-group
+   */
+  checkedColor: String,
+  /**
+   * 未选中时的颜色
+   * 默认值: 继承自 wd-checkbox-group
+   */
+  uncheckedColor: String,
+  /**
+   * 禁用
+   * 默认值: 继承自 wd-checkbox-group
+   */
+  disabled: {
+    type: [Boolean, null] as PropType<boolean | null>,
+    default: null
+  },
+  /**
+   * 是否为不确定状态（样式优先级最高）
+   * 默认值: false
+   */
+  indeterminate: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 只读
+   * 默认值: 继承自 wd-checkbox-group
+   */
+  readonly: {
+    type: [Boolean, null] as PropType<boolean | null>,
+    default: null
+  },
+  /**
+   * 选中值，在 checkbox-group 中使用无效，需同 false-value 一块使用
+   * 默认值: true
+   */
+  trueValue: {
+    type: [String, Number, Boolean],
+    default: true
+  },
+  /**
+   * 非选中时的值，在 checkbox-group 中使用无效，需同 true-value 一块使用
+   * 默认值: false
+   */
+  falseValue: {
+    type: [String, Number, Boolean],
+    default: false
+  },
+  /**
+   * 设置大小
+   * 可选值: large
+   * 默认值: 继承自 wd-checkbox-group
+   */
+  size: String,
+  /**
+   * 文字位置最大宽度
+   */
+  maxWidth: String,
+  /**
+   * 文本位置
+   * 可选值: left | right
+   * 默认值: 继承自 wd-checkbox-group
+   */
+  placement: String as PropType<CheckboxPlacement>,
+  /**
+   * 布局方向
+   * 可选值: horizontal | vertical
+   * 默认值: 继承自 wd-checkbox-group
+   */
+  direction: String as PropType<CheckboxDirection>,
+  /**
+   * 自定义label文本类名
+   */
+  customLabelClass: String
+}
+
+export type CheckboxProps = ExtractPropTypes<typeof checkboxProps>
+
+export type CheckboxExpose = {
+  /**
+   *  切换当前选中状态
+   */
+  toggle: () => void
+}
+
+export type CheckboxInstance = ComponentPublicInstance<CheckboxProps, CheckboxExpose>

package/components/wd-checkbox/wd-checkbox.vue

@@ -0,0 +1,216 @@
+<template>
+  <view
+    :class="`wd-checkbox wd-checkbox--${placementValue} ${isButton ? 'is-button' : 'wd-checkbox--' + directionValue} ${
+      isChecked ? 'is-checked' : ''
+    } ${indeterminate ? 'is-indeterminate' : ''} ${disabledValue ? 'is-disabled' : ''} ${customClass}`"
+    :style="customStyle"
+    @click="toggle"
+  >
+    <view :class="`wd-checkbox__label ${customLabelClass || ''}`" v-if="$slots.default">
+      <slot></slot>
+    </view>
+
+    <template v-if="isButton">
+      <slot name="icon" :is-checked="isChecked">
+        <view v-if="isChecked" class="wd-checkbox__shape">
+          <wd-icon custom-class="wd-checkbox__icon" :custom-style="iconStyle" :name="iconValue"></wd-icon>
+        </view>
+      </slot>
+    </template>
+    <view v-else class="wd-checkbox__shape">
+      <slot name="icon" :is-checked="isChecked">
+        <wd-icon custom-class="wd-checkbox__icon" :custom-style="iconStyle" :name="iconValue"></wd-icon>
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-checkbox',
+  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 { computed, getCurrentInstance, onBeforeMount, watch } from 'vue'
+import { useParent } from '../../composables/useParent'
+import { CHECKBOX_GROUP_KEY } from '../wd-checkbox-group/types'
+import { getPropByPath, isDef } from '../../common/util'
+import { checkboxProps, type CheckboxExpose, type CheckboxDirection, type CheckboxPlacement, type CheckboxType } from './types'
+
+const props = defineProps(checkboxProps)
+const emit = defineEmits(['change', 'update:modelValue'])
+
+defineExpose<CheckboxExpose>({
+  toggle
+})
+
+const { parent: checkboxGroup } = useParent(CHECKBOX_GROUP_KEY)
+const { proxy } = getCurrentInstance() as any
+
+const isChecked = computed(() => {
+  if (checkboxGroup.value) {
+    return checkboxGroup.value.props.modelValue.indexOf(props.name) > -1
+  } else {
+    return props.modelValue === props.trueValue
+  }
+})
+
+const typeValue = computed(() => {
+  return props.type || getPropByPath(checkboxGroup.value, 'props.type') || 'circle'
+})
+
+const isButton = computed(() => {
+  return typeValue.value === 'button'
+})
+
+const iconValue = computed(() => {
+  // indeterminate 状态下，且非 button 类型，使用 minus-circle-fill
+  if (props.indeterminate && !isButton.value) {
+    return 'minus-circle-fill'
+  }
+  let icon = ''
+  switch (typeValue.value) {
+    case 'circle':
+      icon = isChecked.value ? 'check-circle-fill' : 'uncheck-circle'
+      break
+    case 'square':
+      icon = isChecked.value ? 'check-square-fill' : 'uncheck-square'
+      break
+    case 'dot':
+      icon = isChecked.value ? 'check-circle-radio-fill' : 'uncheck-circle'
+      break
+    case 'button':
+      icon = isChecked.value ? 'check' : ''
+      break
+  }
+  return icon
+})
+
+const checkedColorValue = computed(() => {
+  return props.checkedColor || getPropByPath(checkboxGroup.value, 'props.checkedColor')
+})
+
+const uncheckedColorValue = computed(() => {
+  return props.uncheckedColor || getPropByPath(checkboxGroup.value, 'props.uncheckedColor')
+})
+
+const disabledValue = computed(() => {
+  if (isDef(props.disabled)) {
+    return props.disabled
+  }
+  if (checkboxGroup.value) {
+    const { max, min, modelValue, disabled } = checkboxGroup.value.props
+    if ((max && modelValue.length >= max && !isChecked.value) || (min && modelValue.length <= min && isChecked.value) || disabled) {
+      return true
+    }
+  }
+  return false
+})
+
+const readonlyValue = computed(() => {
+  if (isDef(props.readonly)) {
+    return props.readonly
+  } else {
+    return getPropByPath(checkboxGroup.value, 'props.readonly')
+  }
+})
+
+const directionValue = computed(() => {
+  if (isDef(props.direction)) {
+    return props.direction
+  } else {
+    return getPropByPath(checkboxGroup.value, 'props.direction') as CheckboxDirection
+  }
+})
+
+const placementValue = computed<CheckboxPlacement>(() => {
+  if (isDef(props.placement)) {
+    return props.placement
+  } else {
+    return getPropByPath(checkboxGroup.value, 'props.placement')
+  }
+})
+
+const iconStyle = computed(() => {
+  if (isButton.value) return ''
+  if ((isChecked.value || props.indeterminate) && checkedColorValue.value) {
+    return `color: ${checkedColorValue.value}`
+  }
+  if (!isChecked.value && uncheckedColorValue.value) {
+    return `color: ${uncheckedColorValue.value}`
+  }
+  return ''
+})
+
+watch(
+  () => props.name,
+  () => {
+    // 组合使用走这个逻辑
+    if (checkboxGroup.value) {
+      checkName()
+    }
+  }
+)
+
+watch(
+  () => props.type,
+  (newValue) => {
+    const type = ['circle', 'square', 'button', 'dot']
+    if (isDef(newValue) && type.indexOf(newValue) === -1) console.error(`type must be one of ${type.toString()}`)
+  }
+)
+
+onBeforeMount(() => {
+  // eslint-disable-next-line quotes
+  if (props.modelValue === null && !checkboxGroup.value) console.warn("checkbox's value must be set")
+  if (checkboxGroup.value && !props.name) {
+    // eslint-disable-next-line quotes
+    console.warn("checkbox's name must be set when used in checkbox-group")
+  }
+})
+
+/**
+ * @description 检测checkbox绑定的value是否和其它checkbox的value冲突
+ * @param {Object} self 自身
+ * @param  myName 自己的标识符
+ */
+function checkName() {
+  checkboxGroup.value &&
+    checkboxGroup.value.children &&
+    checkboxGroup.value.children.forEach((child: any) => {
+      if (child.$.uid !== proxy.$.uid && child.name === props.name) {
+        console.error(`The checkbox's bound value: ${props.name} has been used`)
+      }
+    })
+}
+
+/**
+ * @description 点击checkbox的Event handle
+ */
+function toggle() {
+  if (disabledValue.value || readonlyValue.value) return
+  // 复选框单独使用时点击反选，并且在checkbox上触发change事件
+  if (checkboxGroup.value) {
+    checkboxGroup.value.changeSelectState(props.name)
+  } else {
+    const newVal = props.modelValue === props.trueValue ? props.falseValue : props.trueValue
+    emit('update:modelValue', newVal)
+    emit('change', {
+      value: newVal
+    })
+  }
+}
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-checkbox-group/index.scss

@@ -0,0 +1,5 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+
+@include b(checkbox-group) {
+}