@tplc/wot 0.0.1

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

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

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

@@ -0,0 +1,36 @@
+import { type InjectionKey } from 'vue'
+import type { RadioShape } from '../wd-radio/types'
+import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
+
+export type RadioGroupProvide = {
+  props: {
+    modelValue?: string | number | boolean
+    shape?: RadioShape
+    checkedColor?: string
+    disabled?: boolean
+    cell?: boolean
+    size?: string
+    inline?: boolean
+  }
+  updateValue: (value: string | number | boolean) => void
+}
+
+export const RADIO_GROUP_KEY: InjectionKey<RadioGroupProvide> = Symbol('wd-radio-group')
+
+export const radioGroupProps = {
+  ...baseProps,
+  /** 会自动选中value对应的单选框 */
+  modelValue: [String, Number, Boolean],
+  /** 单选框形状，可选值为 dot / button / check，默认为 check */
+  shape: makeStringProp<RadioShape>('check'),
+  /** 选中的颜色，默认为 #4D80F0 */
+  checkedColor: String,
+  /** 是否禁用，默认为 false */
+  disabled: makeBooleanProp(false),
+  /** 表单模式，默认为 false */
+  cell: makeBooleanProp(false),
+  /** 设置大小，默认为空 */
+  size: makeStringProp(''),
+  /** 同行展示，默认为 false */
+  inline: makeBooleanProp(false),
+}

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

@@ -0,0 +1,54 @@
+<template>
+  <view
+    :class="`wd-radio-group  ${customClass} ${cell && shape === 'button' ? 'is-button' : ''}`"
+    :style="customStyle"
+  >
+    <slot />
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-radio-group',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { watch } from 'vue'
+import { useChildren } from '../composables/useChildren'
+import { RADIO_GROUP_KEY, radioGroupProps } from './types'
+
+const props = defineProps(radioGroupProps)
+const emit = defineEmits(['change', 'update:modelValue'])
+
+const { linkChildren, children } = useChildren(RADIO_GROUP_KEY)
+
+linkChildren({ props, updateValue })
+
+watch(
+  () => props.shape,
+  (newValue) => {
+    // type: 'dot', 'button', 'check'
+    const type = ['check', 'dot', 'button']
+    if (type.indexOf(newValue) === -1) console.error(`shape must be one of ${type.toString()}`)
+  },
+  { deep: true, immediate: true },
+)
+
+/**
+ * @description 处理radio子节点通知
+ */
+function updateValue(value: string | number | boolean) {
+  emit('update:modelValue', value)
+  emit('change', {
+    value,
+  })
+}
+</script>
+<style lang="scss" scoped>
+@import './index';
+</style>

package/components/wd-rate/index.scss

@@ -0,0 +1,24 @@
+@import './../common/abstracts/_mixin';
+@import './../common/abstracts/variable';
+
+@include b(rate) {
+  display: inline-block;
+  line-height: 1;
+  vertical-align: middle;
+
+  @include e(item) {
+    position: relative;
+    display: inline-block;
+  }
+  @include e(item-star) {
+    display: inline-block;
+    vertical-align: top;
+
+    @include m(active) {
+      position: absolute;
+      top: 0;
+      left: 0;
+      overflow: hidden;
+    }
+  }
+}

package/components/wd-rate/types.ts

@@ -0,0 +1,91 @@
+import type { PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+
+export const rateProps = {
+  ...baseProps,
+
+  /**
+   * 评分最大值
+   * 类型: number
+   * 默认值: 5
+   */
+  num: makeNumberProp(5),
+
+  /**
+   * 当前分数，使用v-model进行双向绑定
+   * 类型: string | number | null
+   * 默认值: null
+   */
+  modelValue: {
+    type: [String, Number, null] as PropType<string | number | null>,
+    default: null,
+  },
+
+  /**
+   * 是否只读
+   * 类型: boolean
+   * 默认值: false
+   */
+  readonly: makeBooleanProp(false),
+
+  /**
+   * 图标大小
+   * 类型: string
+   * 默认值: '16px'
+   */
+  size: makeStringProp('16px'),
+
+  /**
+   * 图标间距
+   * 类型: string
+   * 默认值: '4px'
+   */
+  space: makeStringProp('4px'),
+
+  /**
+   * 未选中的图标颜色
+   * 类型: string
+   * 默认值: '#E8E8E8'
+   */
+  color: makeStringProp('#E8E8E8'),
+
+  /**
+   * 选中的图标颜色，支持传颜色数组（用于分段颜色）
+   * 类型: string | Array<string>
+   * 默认值: 'linear-gradient(180deg, rgba(255,238,0,1) 0%,rgba(250,176,21,1) 100%)'
+   */
+  activeColor: {
+    type: [String, Array] as PropType<string | Array<string>>,
+    default: 'linear-gradient(180deg, rgba(255,238,0,1) 0%,rgba(250,176,21,1) 100%)',
+  },
+
+  /**
+   * 未选中的图标类名
+   * 类型: string
+   * 默认值: 'star-on'
+   */
+  icon: makeStringProp('star-on'),
+
+  /**
+   * 选中的图标类名
+   * 类型: string
+   * 默认值: 'star-on'
+   */
+  activeIcon: makeStringProp('star-on'),
+
+  /**
+   * 是否禁用
+   * 类型: boolean
+   * 默认值: false
+   */
+  disabled: makeBooleanProp(false),
+
+  /**
+   * 禁用的图标颜色
+   * 类型: string
+   * 默认值: 'linear-gradient(315deg, rgba(177,177,177,1) 0%,rgba(199,199,199,1) 100%)'
+   */
+  disabledColor: makeStringProp(
+    'linear-gradient(315deg, rgba(177,177,177,1) 0%,rgba(199,199,199,1) 100%)',
+  ),
+}

package/components/wd-rate/wd-rate.vue

@@ -0,0 +1,131 @@
+<template>
+  <view :class="`wd-rate ${customClass}`" :style="customStyle">
+    <view
+      v-for="(rate, index) in rateList"
+      :key="index"
+      :data-index="index"
+      :style="{ 'margin-right': index == rateList.length - 1 ? 0 : space }"
+      class="wd-rate__item"
+      @click="changeRate(index)"
+    >
+      <view class="wd-rate__item-star" :style="{ width: size, height: size }">
+        <wd-icon :name="icon" :size="size" :custom-style="iconStyle" />
+      </view>
+      <view
+        class="wd-rate__item-star wd-rate__item-star--active"
+        :style="{ width: rate, height: size }"
+      >
+        <wd-icon :name="activeIcon" :size="size" :custom-style="iconActiveStyle" />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-rate',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+import { rateProps } from './types'
+
+const props = defineProps(rateProps)
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const rateList = ref<Array<string>>([])
+const activeValue = ref<string>('')
+
+const iconStyle = computed(() => {
+  return `background:${props.color}; -webkit-background-clip: text; color: transparent`
+})
+
+const iconActiveStyle = computed(() => {
+  return `background:${props.disabled ? props.disabledColor : activeValue.value}; -webkit-background-clip: text; color: transparent`
+})
+
+watch(
+  () => props.activeColor,
+  (newVal) => {
+    if (Array.isArray(newVal) && !newVal.length) {
+      console.error('activeColor cannot be an empty array')
+    }
+    computeActiveValue()
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+
+watch(
+  [() => props.num, () => props.modelValue],
+  () => {
+    computeRateList()
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+
+/**
+ * @description 计算当前应当展示的rate数量
+ */
+function computeRateList() {
+  const { modelValue, num } = props
+  // value和num都准备好才能计算
+  if (modelValue === null || !num) return
+  if (typeof modelValue !== 'number') {
+    console.error('[Wot Design] error(wd-rate): the value of wd-rate should be a number')
+    return
+  }
+  const tempRateList: string[] = []
+  const fullLength = Math.ceil(modelValue) - 1
+  for (let i = 0; i < num; i++) {
+    if (i < fullLength) {
+      tempRateList.push('100%')
+    } else if (i === fullLength) {
+      const rate = modelValue - fullLength > 0.5 ? 1 : 0.5
+      tempRateList.push(rate * 100 + '%')
+    } else {
+      tempRateList.push('0')
+    }
+  }
+  rateList.value = tempRateList
+  computeActiveValue()
+}
+/**
+ * @description 计算当前应当展示的rate颜色
+ */
+function computeActiveValue() {
+  const { activeColor, modelValue, num } = props
+  let tempActiveValue: string = ''
+  if (Array.isArray(activeColor) && activeColor.length) {
+    tempActiveValue =
+      Number(modelValue) <= num * 0.6 || !activeColor[1] ? activeColor[0] : activeColor[1]
+  } else {
+    tempActiveValue = activeColor as string
+  }
+  activeValue.value = tempActiveValue
+}
+/**
+ * @description 点击icon触发组件的change事件
+ * @param Event
+ */
+function changeRate(index: number) {
+  if (props.readonly || props.disabled) return
+  emit('update:modelValue', index + 1)
+  emit('change', {
+    value: index + 1,
+  })
+}
+</script>
+<style lang="scss" scoped>
+@import './index';
+</style>

package/components/wd-resize/index.scss

@@ -0,0 +1,26 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(resize) {
+  @include e(container) {
+    position: absolute;
+    min-width: 1px;
+    min-height: 1px;
+  }
+
+  @include e(wrapper) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -9999;
+    overflow: hidden;
+    visibility: hidden;
+
+    @include m(placeholder) {
+      transition: 0s;
+      animation: none;
+    }
+  }
+}

package/components/wd-resize/types.ts

@@ -0,0 +1,6 @@
+import { baseProps, makeStringProp } from '../common/props'
+
+export const resizeProps = {
+  ...baseProps,
+  customContainerClass: makeStringProp(''),
+}

package/components/wd-resize/wd-resize.vue

@@ -0,0 +1,155 @@
+<template>
+  <view :class="`wd-resize ${customClass}`" :style="rootStyle">
+    <!--插槽需要脱离父容器文档流，防止父容器固宽固高，进而导致插槽大小被被父容器限制-->
+    <view :id="resizeId" :class="`wd-resize__container ${customContainerClass}`">
+      <!--被监听的插槽-->
+      <slot />
+      <!--监听插槽变大-->
+      <scroll-view
+        class="wd-resize__wrapper"
+        :scroll-y="true"
+        :scroll-top="expandScrollTop"
+        :scroll-x="true"
+        :scroll-left="expandScrollLeft"
+        @scroll="onScrollHandler"
+      >
+        <view
+          class="wd-resize__wrapper--placeholder"
+          style="height: 100000px; width: 100000px"
+        ></view>
+      </scroll-view>
+      <!--监听插槽变小-->
+      <scroll-view
+        class="wd-resize__wrapper"
+        :scroll-y="true"
+        :scroll-top="shrinkScrollTop"
+        :scroll-x="true"
+        :scroll-left="shrinkScrollLeft"
+        @scroll="onScrollHandler"
+      >
+        <view class="wd-resize__wrapper--placeholder" style="height: 250%; width: 250%"></view>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-resize',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, getCurrentInstance, onMounted, ref } from 'vue'
+import { addUnit, objToStyle, uuid } from '../common/util'
+import { resizeProps } from './types'
+
+const props = defineProps(resizeProps)
+const emit = defineEmits(['resize'])
+
+const expandScrollTop = ref<number>(0)
+const shrinkScrollTop = ref<number>(0)
+const expandScrollLeft = ref<number>(0)
+const shrinkScrollLeft = ref<number>(0)
+const height = ref<number>(0)
+const width = ref<number>(0)
+const scrollEventCount = ref<number>(0)
+
+const rootStyle = computed(() => {
+  const style: Record<string, string | number> = {
+    width: addUnit(width.value),
+    height: addUnit(height.value),
+  }
+  return `${objToStyle(style)};${props.customStyle}`
+})
+let onScrollHandler = () => {}
+const { proxy } = getCurrentInstance() as any
+
+const resizeId = ref<string>(`resize${uuid()}`)
+
+onMounted(() => {
+  // 初始化数据获取
+  const query = uni
+    .createSelectorQuery()
+    .in(proxy)
+    .select(`#${resizeId.value}`)
+    .boundingClientRect()
+  query.exec(([res]) => {
+    // 闭包记录容器高度
+    let lastHeight = res.height
+    let lastWidth = res.width
+    // 立即填充父容器高宽
+    height.value = lastHeight
+    width.value = lastWidth
+    // 监听滚动事件
+    onScrollHandler = () => {
+      const query = uni
+        .createSelectorQuery()
+        .in(proxy)
+        .select(`#${resizeId.value}`)
+        .boundingClientRect()
+      query.exec(([res]) => {
+        // 前两次滚动事件被触发，说明 created 的修改已渲染，通知用户代码当前容器大小
+        if (scrollEventCount.value++ === 0) {
+          const result: Record<string, string | number> = {}
+          ;['bottom', 'top', 'left', 'right', 'height', 'width'].forEach((propName) => {
+            result[propName] = res[propName]
+          })
+          emit('resize', result)
+        }
+        // 滚动条拉到底部会触发两次多余的事件，屏蔽掉。
+        if (scrollEventCount.value < 3) return
+        // 手动设置父容器高宽，防止父容器坍塌
+        // 滚动完，重新获取容器新的高度
+        const newHeight = res.height
+        const newWidth = res.width
+        // 立即填充父容器高宽
+        height.value = newHeight
+        width.value = newWidth
+        // 宽高都改变时，只需要触发一次 size 事件
+        const emitStack: number[] = []
+        if (newHeight !== lastHeight) {
+          lastHeight = newHeight
+          emitStack.push(1)
+        }
+        if (newWidth !== lastWidth) {
+          lastWidth = newWidth
+          emitStack.push(1)
+        }
+        if (emitStack.length !== 0) {
+          const result: Record<string, any> = {}
+          ;['bottom', 'top', 'left', 'right', 'height', 'width'].forEach((propName) => {
+            result[propName] = res[propName]
+          })
+          emit('resize', result)
+        }
+        // 滚动条拉到底部（如果使用 nextTick 效果更佳）
+        scrollToBottom({
+          lastWidth,
+          lastHeight,
+        })
+      })
+    }
+    // 滚动条拉到底部（如果使用 nextTick 效果更佳）
+    scrollToBottom({
+      lastWidth,
+      lastHeight,
+    })
+  })
+})
+
+function scrollToBottom({ lastWidth, lastHeight }: { lastWidth: number; lastHeight: number }) {
+  expandScrollTop.value = 100000 + lastHeight
+  shrinkScrollTop.value = 3 * height.value + lastHeight
+  expandScrollLeft.value = 100000 + lastWidth
+  shrinkScrollLeft.value = 3 * width.value + lastWidth
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/wd-row/index.scss

@@ -0,0 +1,10 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(row) {
+  &::after {
+    display: table;
+    clear: both;
+    content: '';
+  }
+}

package/components/wd-row/types.ts

@@ -0,0 +1,16 @@
+import { type InjectionKey } from 'vue'
+import { baseProps, makeNumberProp } from '../common/props'
+
+export type RowProvide = {
+  props: { gutter?: number }
+}
+
+export const ROW_KEY: InjectionKey<RowProvide> = Symbol('wd-row')
+
+export const rowProps = {
+  ...baseProps,
+  /**
+   * 列元素之间的间距（单位为px）
+   */
+  gutter: makeNumberProp(0),
+}

package/components/wd-row/wd-row.vue

@@ -0,0 +1,63 @@
+<template>
+  <view :class="`wd-row ${customClass}`" :style="style">
+    <!-- 每一行 -->
+    <slot />
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-row',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import { useChildren } from '../composables/useChildren'
+import { ROW_KEY, rowProps } from './types'
+
+const props = defineProps(rowProps)
+const { linkChildren } = useChildren(ROW_KEY)
+
+linkChildren({ props })
+
+const style = ref<string>('')
+
+watch(
+  () => props.gutter,
+  () => {
+    setGutter()
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+)
+
+function setGutter() {
+  const { gutter } = props
+  if (gutter < 0) {
+    console.error(
+      '[wot design] warning(wd-row): attribute gutter must be greater than or equal to 0',
+    )
+  }
+  const margin = `${gutter / 2}px`
+  const gutterStyle = gutter ? `margin-left: -${margin}; margin-right: -${margin};` : ''
+  style.value = `${gutterStyle}${props.customStyle}`
+}
+</script>
+<style lang="scss" scoped>
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(row) {
+  &::after {
+    display: table;
+    clear: both;
+    content: '';
+  }
+}
+</style>