@tplc/wot 0.0.1

package/components/wd-swiper-nav/index.scss

@@ -0,0 +1,153 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(swiper-nav) {
+  @include e(btn) {
+    @include m(prev, next) {
+      position: absolute;
+      top: 50%;
+      width: $-swiper-nav-btn-size;
+      height: $-swiper-nav-btn-size;
+      background: $-swiper-nav-btn-bg-color;
+      border-radius: 50%;
+      transform: translateY(-50%);
+
+      &::after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: block;
+        width: 12rpx;
+        height: 12rpx;
+        content: '';
+        border-color: $-swiper-nav-btn-color;
+        border-style: solid;
+      }
+    }
+
+    @include m(prev) {
+      left: 30rpx;
+
+      &::after {
+        margin-left: 4rpx;
+        border-width: 2rpx 0 0 2rpx;
+        transform: translate(-50%, -50%) rotateZ(-45deg);
+      }
+    }
+
+    @include m(next) {
+      right: 30rpx;
+
+      &::after {
+        margin-left: -4rpx;
+        border-width: 2rpx 2rpx 0 0;
+        transform: translate(-50%, -50%) rotateZ(45deg);
+      }
+    }
+  }
+
+  @include m(dots, dots-bar) {
+    display: flex;
+    flex-direction: row;
+  }
+
+  @include m(fraction) {
+    height: $-swiper-nav-fraction-height;
+    padding: 0 16rpx;
+    font-size: $-swiper-nav-fraction-font-size;
+    line-height: $-swiper-nav-fraction-height;
+    color: $-swiper-nav-fraction-color;
+    background: $-swiper-nav-fraction-bg-color;
+    border-radius: calc($-swiper-nav-fraction-height / 2);
+  }
+
+  @include e(item) {
+    @include m(dots, dots-bar) {
+      width: $-swiper-nav-dot-size;
+      height: $-swiper-nav-dot-size;
+      margin: 0 10rpx;
+      background: $-swiper-nav-dot-color;
+      border-radius: 50%;
+      transition: all 0.4s ease-in;
+
+      @include when(vertical) {
+        margin: 10rpx 0;
+      }
+
+      @include when(active) {
+        background-color: $-swiper-nav-dot-active-color;
+      }
+    }
+
+    @include m(dots-bar) {
+      @include when(vertical) {
+        @include when(active) {
+          width: $-swiper-nav-dot-size;
+          height: $-swiper-nav-dots-bar-active-width;
+        }
+      }
+
+      @include when(active) {
+        width: $-swiper-nav-dots-bar-active-width;
+        background-color: $-swiper-nav-dot-active-color;
+        border-radius: calc($-swiper-nav-dot-size / 2);
+      }
+    }
+  }
+
+  @include m(left) {
+    position: absolute;
+    top: 50%;
+    left: 24rpx;
+    transform: translateY(-50%);
+  }
+
+  @include m(right) {
+    position: absolute;
+    top: 50%;
+    right: 24rpx;
+    transform: translateY(-50%);
+  }
+
+  @include m(top-left) {
+    position: absolute;
+    top: 24rpx;
+    left: 24rpx;
+  }
+
+  @include m(top) {
+    position: absolute;
+    top: 24rpx;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  @include m(top-right) {
+    position: absolute;
+    top: 24rpx;
+    right: 24rpx;
+  }
+
+  @include m(bottom-left) {
+    position: absolute;
+    bottom: 24rpx;
+    left: 24rpx;
+  }
+
+  @include m(bottom) {
+    position: absolute;
+    bottom: 24rpx;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  @include m(bottom-right) {
+    position: absolute;
+    right: 24rpx;
+    bottom: 24rpx;
+  }
+
+  @include m(vertical) {
+    flex-direction: column;
+  }
+}

package/components/wd-swiper-nav/types.ts

@@ -0,0 +1,42 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+import type { DirectionType, IndicatorPositionType } from '../wd-swiper/types'
+
+/**
+ * 指示器类型，点状(dots)、点条状(dots-bar)、分式(fraction)等
+ */
+export type SwiperIndicatorType = 'dots' | 'dots-bar' | 'fraction'
+
+export const swiperNavprops = {
+  ...baseProps,
+  /**
+   * 当前轮播在哪一项（下标）
+   */
+  current: makeNumberProp(0),
+  /**
+   * 轮播滑动方向，包括横向滑动和纵向滑动两个方向
+   */
+  direction: makeStringProp<DirectionType>('horizontal'),
+  /**
+   * 小于这个数字不会显示导航器
+   */
+  minShowNum: makeNumberProp(2),
+  /**
+   * 指示器位置
+   */
+  indicatorPosition: makeStringProp<IndicatorPositionType>('bottom'),
+  /**
+   * 是否显示两侧的控制按钮
+   */
+  showControls: makeBooleanProp(false),
+  /**
+   * 总共的项数
+   */
+  total: makeNumberProp(0),
+  /**
+   * 指示器类型，点状(dots)、点条状(dots-bar)、分式(fraction)等
+   */
+  type: makeStringProp<SwiperIndicatorType>('dots'),
+}
+
+export type SwiperNavProps = ExtractPropTypes<typeof swiperNavprops>

package/components/wd-swiper-nav/wd-swiper-nav.vue

@@ -0,0 +1,37 @@
+<template>
+  <view v-if="showControls" class="wd-swiper-nav__btn">
+    <view class="wd-swiper-nav__btn--prev" @click="handleNav('prev')" />
+    <view class="wd-swiper-nav__btn--next" @click="handleNav('next')" />
+  </view>
+  <view
+    v-if="total >= minShowNum"
+    :style="customStyle"
+    :class="`wd-swiper-nav wd-swiper-nav--${direction} wd-swiper-nav--${type} wd-swiper-nav--${indicatorPosition} ${customClass}`"
+  >
+    <block v-if="type === 'dots' || type === 'dots-bar'">
+      <view
+        v-for="(item, index) in total"
+        :key="index"
+        :class="`wd-swiper-nav__item--${type} ${current === index ? 'is-active' : ''} is-${direction}`"
+      ></view>
+    </block>
+    <block v-if="type === 'fraction'">{{ current + 1 }}/{{ total }}</block>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { swiperNavprops } from './types'
+
+defineProps(swiperNavprops)
+
+const emit = defineEmits(['change'])
+
+function handleNav(dir: 'prev' | 'next') {
+  const source: string = 'nav'
+  emit('change', { dir, source })
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index';
+</style>

package/components/wd-switch/index.scss

@@ -0,0 +1,58 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(switch) {
+  position: relative;
+  display: inline-block;
+  width: $-switch-width;
+  height: $-switch-height;
+  font-size: $-switch-size;
+  background: $-switch-inactive-color;
+  border-radius: $-switch-circle-size;
+  transition: all 0.3s;
+
+  @include e(checkbox) {
+    position: absolute;
+    width: 0;
+    height: 0;
+    margin: 0;
+    opacity: 0;
+  }
+  @include e(circle) {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    box-sizing: border-box;
+    display: inline-block;
+    width: $-switch-circle-size;
+    height: $-switch-circle-size;
+    background: #fff;
+    border-radius: 50%;
+    box-shadow: 0 2px 4px 0 $-switch-inactive-shadow-color;
+    transition: left 0.3s ease-out;
+
+    &::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: calc(200% - 2px);
+      height: calc(200% - 2px);
+      content: '';
+      border: 1px solid $-switch-border-color;
+      border-radius: 50%;
+      transform: translate(-50%, -50%) scale(0.5);
+    }
+  }
+  @include when(checked) {
+    background: $-switch-active-color;
+    border-color: $-switch-active-color;
+
+    .wd-switch__circle {
+      left: calc($-switch-width - $-switch-circle-size - 2px);
+      box-shadow: 0 2px 4px 0 $-switch-active-shadow-color;
+    }
+  }
+  @include when(disabled) {
+    opacity: 0.5;
+  }
+}

package/components/wd-switch/types.ts

@@ -0,0 +1,56 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp } from '../common/props'
+
+export type SwitchBeforeChangeOption = {
+  value: number | string | boolean
+  resolve: (pass: boolean) => void
+}
+
+export type SwitchBeforeChange = (option: SwitchBeforeChangeOption) => void
+
+export const switchProps = {
+  ...baseProps,
+  /**
+   * 绑定值
+   */
+  modelValue: {
+    type: [Boolean, String, Number],
+    required: true,
+    default: false,
+  },
+  /**
+   * 是否禁用
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 激活值
+   */
+  activeValue: {
+    type: [Boolean, String, Number],
+    default: true,
+  },
+  /**
+   * 非激活值
+   */
+  inactiveValue: {
+    type: [Boolean, String, Number],
+    default: false,
+  },
+  /**
+   * 激活颜色
+   */
+  activeColor: String,
+  /**
+   * 非激活颜色
+   */
+  inactiveColor: String,
+  /**
+   * 大小
+   */
+  size: makeNumericProp(28),
+  /**
+   * 在改变前执行的函数
+   */
+  beforeChange: Function as PropType<SwitchBeforeChange>,
+}
+export type SwitchProps = ExtractPropTypes<typeof switchProps>

package/components/wd-switch/wd-switch.vue

@@ -0,0 +1,83 @@
+<template>
+  <view :class="rootClass" :style="rootStyle" @click="switchValue">
+    <view class="wd-switch__circle" :style="circleStyle"></view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-switch',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, onBeforeMount } from 'vue'
+import { addUnit, isFunction, objToStyle } from '../common/util'
+import { switchProps } from './types'
+
+const props = defineProps(switchProps)
+const emit = defineEmits(['change', 'update:modelValue'])
+
+const rootClass = computed(() => {
+  return `wd-switch ${props.customClass} ${props.disabled ? 'is-disabled' : ''} ${props.modelValue === props.activeValue ? 'is-checked' : ''}`
+})
+
+const rootStyle = computed(() => {
+  const rootStyle: Record<string, any> = {
+    'font-size': addUnit(props.size),
+    background: props.modelValue === props.activeValue ? props.activeColor : props.inactiveColor,
+    'border-color':
+      props.modelValue === props.activeValue ? props.activeColor : props.inactiveColor,
+  }
+  return `${objToStyle(rootStyle)};${props.customStyle}`
+})
+
+const circleStyle = computed(() => {
+  const circleStyle: string =
+    (props.modelValue === props.activeValue && props.activeColor) ||
+    (props.modelValue !== props.activeValue && props.inactiveColor)
+      ? 'box-shadow: none;'
+      : ''
+  return circleStyle
+})
+
+function switchValue() {
+  if (props.disabled) return
+  const newVal = props.modelValue === props.activeValue ? props.inactiveValue : props.activeValue
+
+  if (props.beforeChange && isFunction(props.beforeChange)) {
+    props.beforeChange({
+      value: newVal,
+      resolve: (pass: boolean) => {
+        if (pass) {
+          emit('update:modelValue', newVal)
+          emit('change', {
+            value: newVal,
+          })
+        }
+      },
+    })
+  } else {
+    emit('update:modelValue', newVal)
+    emit('change', {
+      value: newVal,
+    })
+  }
+}
+
+onBeforeMount(() => {
+  if ([props.activeValue, props.inactiveValue].indexOf(props.modelValue) === -1) {
+    emit('update:modelValue', props.inactiveValue)
+    emit('change', {
+      value: props.inactiveValue,
+    })
+  }
+})
+</script>
+<style lang="scss" scoped>
+@import './index';
+</style>

package/components/wd-tab/index.scss

@@ -0,0 +1,8 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(tab) {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  width: 100%;
+}

package/components/wd-tab/types.ts

@@ -0,0 +1,20 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, numericProp } from '../common/props'
+
+export const tabProps = {
+  ...baseProps,
+  /**
+   * 唯一标识符
+   */
+  name: numericProp,
+  /**
+   * tab的标题
+   */
+  title: String,
+  /**
+   *  是否禁用，无法点击
+   */
+  disabled: makeBooleanProp(false),
+}
+
+export type TabProps = ExtractPropTypes<typeof tabProps>

package/components/wd-tab/wd-tab.vue

@@ -0,0 +1,100 @@
+<template>
+  <view :class="`wd-tab ${customClass}`" :style="customStyle">
+    <view v-if="painted" class="wd-tab__body" :style="isShow ? '' : 'display: none;'">
+      <slot />
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-tab',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+<script lang="ts" setup>
+import { getCurrentInstance, ref, watch, computed } from 'vue'
+import { isDef, isNumber, isString } from '../common/util'
+import { useParent } from '../composables/useParent'
+import { TABS_KEY } from '../wd-tabs/types'
+import { tabProps } from './types'
+
+const props = defineProps(tabProps)
+
+const painted = ref<boolean>(false) // 初始状态tab不会渲染，必须通过tabs来设置painted使tab渲染
+const isShow = ref<boolean>(false)
+const { proxy } = getCurrentInstance() as any
+const { parent: tabs, index } = useParent(TABS_KEY)
+
+// 激活项下标
+const activeIndex = computed(() => {
+  return isDef(tabs) ? tabs.state.activeIndex : 0
+})
+
+watch(
+  () => props.name,
+  (newValue) => {
+    if (isDef(newValue) && !isNumber(newValue) && !isString(newValue)) {
+      console.error('[wot design] error(wd-tab): the type of name should be number or string')
+      return
+    }
+    if (tabs) {
+      checkName(proxy)
+    }
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+)
+
+watch(
+  () => activeIndex.value,
+  (newValue) => {
+    if (newValue === index.value) {
+      setShow(true, true)
+    } else {
+      setShow(painted.value, false)
+    }
+  },
+  { deep: true, immediate: true },
+)
+
+/**
+ * @description 检测tab绑定的name是否和其它tab的name冲突
+ * @param {Object} self 自身
+ */
+function checkName(self: any) {
+  const { name: myName } = props
+  if (myName === undefined || myName === null || myName === '') {
+    return
+  }
+  tabs &&
+    tabs.children.forEach((child: any) => {
+      if (child.$.uid !== self.$.uid && child.name === myName) {
+        console.error(`The tab's bound value: ${myName} has been used`)
+      }
+    })
+}
+
+/**
+ * 设置子组件展示
+ * @param setPainted
+ * @param setIsShow
+ */
+function setShow(setPainted: boolean, setIsShow: boolean) {
+  painted.value = setPainted
+  isShow.value = setIsShow
+}
+
+defineExpose({
+  setShow,
+  painted,
+})
+</script>
+<style lang="scss" scoped>
+@import './index';
+</style>

package/components/wd-tabbar/index.scss

@@ -0,0 +1,57 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(tabbar) {
+    background: $-dark-background;
+  }
+}
+
+@include b(tabbar) {
+  position: relative;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  height: $-tabbar-height;
+  background: $-color-white;
+
+  @include e(placeholder) {
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
+  @include m(round) {
+    margin-right: 32rpx;
+    margin-left: 32rpx;
+    border-radius: 999px;
+    box-shadow: $-tabbar-box-shadow;
+
+    @include when(fixed) {
+      @include when(safe) {
+        bottom: constant(safe-area-inset-bottom);
+        bottom: env(safe-area-inset-bottom);
+      }
+    }
+  }
+
+  @include m(default) {
+    @include when(fixed) {
+      @include when(safe) {
+        padding-bottom: constant(safe-area-inset-bottom);
+        padding-bottom: env(safe-area-inset-bottom);
+      }
+    }
+
+    @include when(border) {
+      @include halfPixelBorder('top');
+    }
+  }
+
+  @include when(fixed) {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 500;
+  }
+}

package/components/wd-tabbar/types.ts

@@ -0,0 +1,88 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-15 20:40:34
+ * @LastEditTime: 2024-03-18 15:38:37
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-tabbar\types.ts
+ * 记得注释
+ */
+import { type ExtractPropTypes, type InjectionKey } from 'vue'
+import {
+  baseProps,
+  makeBooleanProp,
+  makeNumberProp,
+  makeNumericProp,
+  makeStringProp,
+} from '../common/props'
+import type { TabbarItem } from '../wd-tabbar-item/types'
+
+type TabbarShape = 'default' | 'round'
+
+export type TabbarProvide = {
+  props: {
+    // 选中标签的索引值或者名称
+    modelValue?: number | string
+    // 是否固定在底部
+    fixed?: boolean
+    // 是否设置底部安全距离（iphone X 类型的机型）
+    safeAreaInsetBottom?: boolean
+    // 是否显示顶部边框
+    bordered?: boolean
+    // 标签栏的形状。可选项：default/round
+    shape?: TabbarShape
+    // 激活标签的颜色
+    activeColor?: string
+    // 未激活标签的颜色
+    inactiveColor?: string
+    // 固定在底部时，是否在标签位置生成一个等高的占位元素
+    placeholder?: boolean
+    // 自定义组件的层级
+    zIndex?: number
+  }
+  setChange: (child: TabbarItem) => void
+}
+
+export const TABBAR_KEY: InjectionKey<TabbarProvide> = Symbol('wd-tabbar')
+
+export const tabbarProps = {
+  ...baseProps,
+  /**
+   * 选中标签的索引值或者名称
+   */
+  modelValue: makeNumericProp(0),
+  /**
+   * 是否固定在底部
+   */
+  fixed: makeBooleanProp(false),
+  /**
+   * 是否显示顶部边框
+   */
+  bordered: makeBooleanProp(true),
+  /**
+   * 是否设置底部安全距禿（iPhone X 类型的机型）
+   */
+  safeAreaInsetBottom: makeBooleanProp(false),
+  /**
+   * 标签栏的形状。可选项：default/round
+   */
+  shape: makeStringProp<TabbarShape>('default'),
+  /**
+   * 激活标签的颜色
+   */
+  activeColor: String,
+  /**
+   * 未激活标签的颜色
+   */
+  inactiveColor: String,
+  /**
+   * 固定在底部时，是否在标签位置生成一个等高的占位元素
+   */
+  placeholder: makeBooleanProp(false),
+  /**
+   * 自定义组件的层级
+   */
+  zIndex: makeNumberProp(99),
+}
+
+export type TabbarProps = ExtractPropTypes<typeof tabbarProps>