@tplc/wot 0.0.1

package/components/wd-checkbox/index.scss

@@ -0,0 +1,285 @@
+@import './../common/abstracts/_mixin';
+@import './../common/abstracts/variable';
+
+.wot-theme-dark {
+  @include b(checkbox) {
+    @include e(shape) {
+      color: $-checkbox-check-color;
+      background: transparent;
+      border-color: $-checkbox-border-color;
+    }
+
+    @include e(label) {
+      color: $-dark-color;
+    }
+
+    @include when(disabled) {
+      .wd-checkbox__shape {
+        background: $-dark-background4;
+        border-color: $-dark-color-gray;
+      }
+
+      .wd-checkbox__label {
+        color: $-dark-color-gray;
+      }
+
+      :deep(.wd-checkbox__check) {
+        color: $-dark-color-gray;
+      }
+
+      @include when(checked) {
+        .wd-checkbox__shape {
+          color: $-dark-color-gray;
+        }
+
+        .wd-checkbox__label {
+          color: $-dark-color-gray;
+        }
+      }
+
+      @include when(button) {
+        .wd-checkbox__label {
+          color: $-dark-color-gray;
+          background: #3a3a3c;
+          border-color: #c8c9cc;
+        }
+
+        @include when(checked) {
+          .wd-checkbox__label {
+            color: #c8c9cc;
+            background: #3a3a3c;
+            border-color: #c8c9cc;
+          }
+        }
+      }
+    }
+
+    @include when(button) {
+      .wd-checkbox__label {
+        background-color: $-dark-background;
+      }
+
+      @include when(checked) {
+        .wd-checkbox__label {
+          background-color: $-dark-background2;
+        }
+      }
+    }
+  }
+}
+
+@include b(checkbox) {
+  display: block;
+  margin-bottom: $-checkbox-margin;
+  font-size: 0;
+  -webkit-tap-highlight-color: transparent;
+  line-height: 1.2;
+
+  @include when(last-child) {
+    margin-bottom: 0;
+  }
+
+  @include e(shape) {
+    position: relative;
+    box-sizing: border-box;
+    display: inline-block;
+    width: $-checkbox-size;
+    height: $-checkbox-size;
+    color: $-checkbox-check-color;
+    vertical-align: middle;
+    background: $-checkbox-bg;
+    border: 2px solid $-checkbox-border-color;
+    border-radius: 50%;
+    transition: background 0.2s;
+
+    @include when(square) {
+      border-radius: $-checkbox-square-radius;
+    }
+  }
+
+  @include e(input) {
+    position: absolute;
+    width: 0;
+    height: 0;
+    margin: 0;
+    opacity: 0;
+  }
+
+  @include edeep(btn-check) {
+    display: inline-block;
+    margin-right: 4px;
+    font-size: $-checkbox-icon-size;
+    vertical-align: middle;
+  }
+
+  @include e(txt) {
+    display: inline-block;
+    line-height: 20px;
+    vertical-align: middle;
+    @include lineEllipsis;
+  }
+
+  @include e(label) {
+    position: relative;
+    display: inline-block;
+    margin-left: $-checkbox-label-margin;
+    font-size: $-checkbox-label-fs;
+    color: $-checkbox-label-color;
+    vertical-align: middle;
+  }
+
+  @include edeep(check) {
+    font-size: $-checkbox-icon-size;
+    color: $-checkbox-check-color;
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+
+  @include when(checked) {
+    .wd-checkbox__shape {
+      color: $-checkbox-checked-color;
+      background: currentColor;
+      border-color: currentColor;
+    }
+
+    :deep(.wd-checkbox__check) {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      opacity: 1;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  @include when(button) {
+    display: inline-block;
+    margin-right: $-checkbox-margin;
+    margin-bottom: 0;
+    font-size: $-checkbox-button-font-size;
+    vertical-align: top;
+
+    @include when(last-child) {
+      margin-right: 0;
+    }
+
+    .wd-checkbox__shape {
+      width: 0;
+      height: 0;
+      overflow: hidden;
+      border: none;
+      opacity: 0;
+    }
+
+    .wd-checkbox__label {
+      box-sizing: border-box;
+      display: inline-flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      min-width: $-checkbox-button-min-width;
+      height: $-checkbox-button-height;
+      padding: 5px 15px;
+      margin-left: 0;
+      font-size: $-checkbox-button-font-size;
+      background-color: $-checkbox-button-bg;
+      border: 1px solid $-checkbox-button-border;
+      border-radius: $-checkbox-button-radius;
+      transition:
+        color 0.2s,
+        border 0.2s;
+    }
+
+    @include when(checked) {
+      .wd-checkbox__label {
+        color: $-checkbox-checked-color;
+        background-color: $-checkbox-bg;
+        border-color: $-checkbox-checked-color;
+        border-color: currentColor;
+      }
+    }
+  }
+
+  @include when(inline) {
+    display: inline-block;
+    margin-right: $-checkbox-margin;
+    margin-bottom: 0;
+
+    @include when(last-child) {
+      margin-right: 0;
+    }
+  }
+
+  @include when(disabled) {
+    .wd-checkbox__shape {
+      background: $-checkbox-disabled-check-bg;
+      border-color: $-checkbox-border-color;
+    }
+
+    .wd-checkbox__label {
+      color: $-checkbox-disabled-label-color;
+    }
+
+    @include when(checked) {
+      .wd-checkbox__shape {
+        color: $-checkbox-disabled-check-color;
+      }
+
+      .wd-checkbox__label {
+        color: $-checkbox-disabled-label-color;
+      }
+    }
+
+    @include when(button) {
+      .wd-checkbox__label {
+        color: $-checkbox-disabled-label-color;
+        background: $-checkbox-disabled-color;
+        border-color: $-checkbox-button-border;
+      }
+
+      @include when(checked) {
+        .wd-checkbox__label {
+          border-color: $-checkbox-button-disabled-border;
+        }
+      }
+    }
+  }
+
+  // 以下内容用于解决父子组件样式隔离的问题 —— START
+  @include when(cell-box) {
+    padding: 13px 15px;
+    margin: 0;
+
+    @include when(large) {
+      padding: 14px 15px;
+    }
+  }
+
+  @include when(button-box) {
+    box-sizing: border-box;
+    display: inline-flex;
+    width: 33.3333%;
+    padding: 12px 12px 0 0;
+
+    .wd-checkbox__label {
+      width: 100%;
+    }
+
+    &:last-child::after {
+      display: table;
+      clear: both;
+      content: '';
+    }
+  }
+
+  @include when(large) {
+    .wd-checkbox__shape {
+      width: $-checkbox-large-size;
+      height: $-checkbox-large-size;
+      font-size: $-checkbox-large-size;
+    }
+
+    .wd-checkbox__label {
+      font-size: $-checkbox-large-label-fs;
+    }
+  }
+}

package/components/wd-checkbox/types.ts

@@ -0,0 +1,68 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeStringProp } from '../common/props'
+
+export type CheckShape = 'circle' | 'square' | 'button'
+
+export const checkboxProps = {
+  ...baseProps,
+  customLabelClass: makeStringProp(''),
+  customShapeClass: makeStringProp(''),
+  /**
+   * 单选框选中时的值
+   */
+  modelValue: {
+    type: [String, Number, Boolean],
+    required: true,
+    default: false,
+  },
+  /**
+   * 单选框形状，可选值：circle / square / button
+   */
+  shape: {
+    type: String as PropType<CheckShape>,
+  },
+  /**
+   * 选中的颜色
+   */
+  checkedColor: String,
+  /**
+   * 禁用
+   */
+  disabled: {
+    type: [Boolean, null] as PropType<boolean | null>,
+    default: null,
+  },
+  /**
+   * 选中值，在 checkbox-group 中使用无效，需同 false-value 一块使用
+   */
+  trueValue: {
+    type: [String, Number, Boolean],
+    default: true,
+  },
+  /**
+   * 非选中时的值，在 checkbox-group 中使用无效，需同 true-value 一块使用
+   */
+  falseValue: {
+    type: [String, Number, Boolean],
+    default: false,
+  },
+  /**
+   * 设置大小，可选值：large
+   */
+  size: String,
+  /**
+   * 文字位置最大宽度
+   */
+  maxWidth: 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,185 @@
+<template>
+  <view
+    :class="`wd-checkbox ${innerCell ? 'is-cell-box' : ''} ${innerShape === 'button' ? 'is-button-box' : ''} ${isChecked ? 'is-checked' : ''} ${
+      isFirst ? 'is-first-child' : ''
+    } ${isLast ? 'is-last-child' : ''} ${innerInline ? 'is-inline' : ''} ${innerShape === 'button' ? 'is-button' : ''} ${
+      innerDisabled ? 'is-disabled' : ''
+    } ${innerSize ? 'is-' + innerSize : ''} ${customClass}`"
+    :style="customStyle"
+    @click="toggle"
+  >
+    <!--shape为button时，移除wd-checkbox__shape，只保留wd-checkbox__label-->
+    <view
+      v-if="innerShape !== 'button'"
+      :class="`wd-checkbox__shape ${innerShape === 'square' ? 'is-square' : ''} ${customShapeClass}`"
+      :style="isChecked && !innerDisabled && innerCheckedColor ? 'color :' + innerCheckedColor : ''"
+    >
+      <wd-icon custom-class="wd-checkbox__check" name="check-bold" />
+    </view>
+    <!--shape为button时只保留wd-checkbox__label-->
+    <view
+      :class="`wd-checkbox__label ${customLabelClass}`"
+      :style="
+        isChecked && innerShape === 'button' && !innerDisabled && innerCheckedColor
+          ? 'color:' + innerCheckedColor
+          : ''
+      "
+    >
+      <!--button选中时展示的icon-->
+      <wd-icon
+        v-if="innerShape === 'button' && isChecked"
+        custom-class="wd-checkbox__btn-check"
+        name="check-bold"
+      />
+      <!--文案-->
+      <view class="wd-checkbox__txt" :style="maxWidth ? 'max-width:' + maxWidth : ''">
+        <slot></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-checkbox',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+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 } from './types'
+
+const props = defineProps(checkboxProps)
+const emit = defineEmits(['change', 'update:modelValue'])
+
+defineExpose<CheckboxExpose>({
+  toggle,
+})
+
+const { parent: checkboxGroup, index } = useParent(CHECKBOX_GROUP_KEY)
+
+const isChecked = computed(() => {
+  if (checkboxGroup) {
+    return checkboxGroup.props.modelValue.indexOf(props.modelValue) > -1
+  } else {
+    return props.modelValue === props.trueValue
+  }
+}) // 是否被选中
+
+const isFirst = computed(() => {
+  return index.value === 0
+})
+
+const isLast = computed(() => {
+  const children = isDef(checkboxGroup) ? checkboxGroup.children : []
+  return index.value === children.length - 1
+})
+const { proxy } = getCurrentInstance() as any
+
+watch(
+  () => props.modelValue,
+  () => {
+    // 组合使用走这个逻辑
+    if (checkboxGroup) {
+      checkName()
+    }
+  },
+)
+
+watch(
+  () => props.shape,
+  (newValue) => {
+    const type = ['circle', 'square', 'button']
+    if (isDef(newValue) && type.indexOf(newValue) === -1)
+      console.error(`shape must be one of ${type.toString()}`)
+  },
+)
+
+const innerShape = computed(() => {
+  return props.shape || getPropByPath(checkboxGroup, 'props.shape') || 'circle'
+})
+
+const innerCheckedColor = computed(() => {
+  return props.checkedColor || getPropByPath(checkboxGroup, 'props.checkedColor')
+})
+
+const innerDisabled = computed(() => {
+  if (!checkboxGroup) {
+    return props.disabled
+  }
+  const { max, min, modelValue, disabled } = checkboxGroup.props
+  if (
+    (max && modelValue.length >= max && !isChecked.value) ||
+    (min && modelValue.length <= min && isChecked.value) ||
+    props.disabled === true ||
+    (disabled && props.disabled === null)
+  ) {
+    return true
+  }
+
+  return props.disabled
+})
+
+const innerInline = computed(() => {
+  return getPropByPath(checkboxGroup, 'props.inline') || false
+})
+
+const innerCell = computed(() => {
+  return getPropByPath(checkboxGroup, 'props.cell') || false
+})
+
+const innerSize = computed(() => {
+  return props.size || getPropByPath(checkboxGroup, 'props.size')
+})
+
+onBeforeMount(() => {
+  // eslint-disable-next-line quotes
+  if (props.modelValue === null) console.error("checkbox's value must be set")
+})
+
+/**
+ * @description 检测checkbox绑定的value是否和其它checkbox的value冲突
+ * @param {Object} self 自身
+ * @param  myName 自己的标识符
+ */
+function checkName() {
+  checkboxGroup &&
+    checkboxGroup.children &&
+    checkboxGroup.children.forEach((child: any) => {
+      if (child.$.uid !== proxy.$.uid && child.modelValue === props.modelValue) {
+        console.error(`The checkbox's bound value: ${props.modelValue} has been used`)
+      }
+    })
+}
+/**
+ * @description 点击checkbox的Event handle
+ */
+function toggle() {
+  if (innerDisabled.value) return
+  // 复选框单独使用时点击反选，并且在checkbox上触发change事件
+  if (checkboxGroup) {
+    emit('change', {
+      value: !isChecked.value,
+    })
+    checkboxGroup.changeSelectState(props.modelValue)
+  } else {
+    const newVal = props.modelValue === props.trueValue ? props.falseValue : props.trueValue
+    emit('update:modelValue', newVal)
+    emit('change', {
+      value: newVal,
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index';
+</style>

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

@@ -0,0 +1,20 @@
+@import './../common/abstracts/_mixin';
+@import './../common/abstracts/variable';
+
+.wot-theme-dark {
+  @include b(checkbox-group) {
+    background-color: $-dark-background2;
+  }
+}
+@include b(checkbox-group) {
+  background-color: $-checkbox-bg;
+
+  // 上下20px 左右15px 内部间隔12px
+  @include when(button) {
+    box-sizing: border-box;
+    width: 100%;
+    height: auto;
+    padding: 8px 3px 20px 15px;
+    overflow: hidden;
+  }
+}

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

@@ -0,0 +1,59 @@
+import { type ExtractPropTypes, type InjectionKey, type PropType } from 'vue'
+import type { CheckShape } from '../wd-checkbox/types'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+
+export type RequiredModelValue = {
+  modelValue: Array<string | number | boolean>
+}
+
+export type checkboxGroupProvide = {
+  props: Partial<Omit<CheckboxGroupProps, 'modelValue'>> & RequiredModelValue
+  changeSelectState: (value: string | number | boolean) => void
+}
+
+export const CHECKBOX_GROUP_KEY: InjectionKey<checkboxGroupProvide> = Symbol('wd-checkbox-group')
+
+export const checkboxGroupProps = {
+  ...baseProps,
+  /**
+   * 绑定值
+   */
+  modelValue: {
+    type: Array as PropType<Array<string | number | boolean>>,
+    default: () => [],
+  },
+  /**
+   * 表单模式
+   */
+  cell: makeBooleanProp(false),
+  /**
+   * 单选框形状，可选值：circle / square / button
+   */
+  shape: makeStringProp<CheckShape>('circle'),
+  /**
+   * 选中的颜色
+   */
+  checkedColor: String,
+  /**
+   * 禁用
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 最小选中的数量
+   */
+  min: makeNumberProp(0),
+  /**
+   * 最大选中的数量，0 为无限数量，默认为 0
+   */
+  max: makeNumberProp(0),
+  /**
+   * 同行展示
+   */
+  inline: makeBooleanProp(false),
+  /**
+   * 设置大小，可选值：large
+   */
+  size: String,
+}
+
+export type CheckboxGroupProps = ExtractPropTypes<typeof checkboxGroupProps>

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

@@ -0,0 +1,103 @@
+<template>
+  <view
+    :class="`wd-checkbox-group ${shape === 'button' && cell ? 'is-button' : ''} ${customClass}`"
+    :style="customStyle"
+  >
+    <slot />
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-checkbox-group',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { watch } from 'vue'
+import { checkNumRange, deepClone } from '../common/util'
+import { useChildren } from '../composables/useChildren'
+import { CHECKBOX_GROUP_KEY, checkboxGroupProps } from './types'
+
+const props = defineProps(checkboxGroupProps)
+const emit = defineEmits(['change', 'update:modelValue'])
+
+const { linkChildren } = useChildren(CHECKBOX_GROUP_KEY)
+
+linkChildren({ props, changeSelectState })
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    // 传入的value数组中包括重复的元素，这种情况非法。
+    if (new Set(newValue).size !== newValue.length) {
+      // eslint-disable-next-line quotes
+      console.error("checkboxGroup's bound value includes same value")
+    }
+    if (newValue.length < props.min) {
+      // eslint-disable-next-line quotes
+      console.error("checkboxGroup's bound value's length can't be less than min")
+    }
+    if (props.max !== 0 && newValue.length > props.max) {
+      // eslint-disable-next-line quotes
+      console.error("checkboxGroup's bound value's length can't be large than max")
+    }
+    // 每次value变化都会触发重新匹配选中项
+  },
+  { deep: true, immediate: true },
+)
+
+watch(
+  () => props.shape,
+  (newValue) => {
+    const type = ['circle', 'square', 'button']
+    if (type.indexOf(newValue) === -1) console.error(`shape must be one of ${type.toString()}`)
+  },
+  { deep: true, immediate: true },
+)
+
+watch(
+  () => props.min,
+  (newValue) => {
+    checkNumRange(newValue, 'min')
+  },
+  { deep: true, immediate: true },
+)
+
+watch(
+  () => props.max,
+  (newValue) => {
+    checkNumRange(newValue, 'max')
+  },
+  { deep: true, immediate: true },
+)
+
+/**
+ * @description 子节点通知父节点修改子节点选中状态
+ * @param {any} value 子组件的标识符
+ */
+function changeSelectState(value: string | number | boolean) {
+  const temp: (string | number | boolean)[] = deepClone(props.modelValue)
+  const index = temp.indexOf(value)
+  if (index > -1) {
+    // 已经选中，则从 value 列表中删除子节点的标识符。
+    temp.splice(index, 1)
+  } else {
+    // 之前未选中，则现在把加子节点的标识符加到 value 列表中。
+    temp.push(value)
+  }
+  emit('update:modelValue', temp)
+
+  emit('change', {
+    value: temp,
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index';
+</style>