@tplc/wot 0.0.1

package/components/wd-sidebar-item/wd-sidebar-item.vue

@@ -0,0 +1,114 @@
+<template>
+  <view
+    @click="handleClick"
+    :class="`wd-sidebar-item ${active ? 'wd-sidebar-item--active' : ''} ${prefix ? 'wd-sidebar-item--prefix' : ''}  ${
+      suffix ? 'wd-sidebar-item--suffix' : ''
+    } ${disabled ? 'wd-sidebar-item--disabled' : ''} ${customClass}`"
+    :style="customStyle"
+  >
+    <slot name="icon"></slot>
+    <template v-if="!$slots.icon && icon">
+      <wd-icon custom-class="wd-sidebar-item__icon" :name="icon"></wd-icon>
+    </template>
+    <wd-badge v-bind="customBadgeProps" custom-class="wd-sidebar-item__badge">
+      {{ label }}
+    </wd-badge>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-sidebar-item',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useParent } from '../composables/useParent'
+import { SIDEBAR_KEY } from '../wd-sidebar/types'
+import { sidebarItemProps } from './types'
+import type { BadgeProps } from '../wd-badge/types'
+import { deepAssign, isDef, isUndefined, omitBy } from '../common/util'
+
+const props = defineProps(sidebarItemProps)
+
+const { parent: sidebar } = useParent(SIDEBAR_KEY)
+
+const customBadgeProps = computed(() => {
+  const badgeProps: Partial<BadgeProps> = deepAssign(
+    isDef(props.badgeProps) ? omitBy(props.badgeProps, isUndefined) : {},
+    omitBy(
+      {
+        max: props.max,
+        isDot: props.isDot,
+        modelValue: props.badge,
+      },
+      isUndefined,
+    ),
+  )
+  if (!isDef(badgeProps.max)) {
+    badgeProps.max = 99
+  }
+  return badgeProps
+})
+
+const active = computed(() => {
+  let active: boolean = false
+  if (sidebar && sidebar.props.modelValue === props.value) {
+    active = true
+  }
+  return active
+})
+
+const prefix = computed(() => {
+  let prefix: boolean = false
+  if (sidebar) {
+    const activeIndex: number = sidebar.children.findIndex((c: any) => {
+      return c.value === sidebar.props.modelValue
+    })
+
+    const currentIndex: number = sidebar.children.findIndex((c: any) => {
+      return c.value === props.value
+    })
+
+    if (currentIndex === activeIndex - 1) {
+      prefix = true
+    }
+  }
+  return prefix
+})
+
+const suffix = computed(() => {
+  let suffix: boolean = false
+  if (sidebar) {
+    const activeIndex: number = sidebar.children.findIndex((c: any) => {
+      return c.value === sidebar.props.modelValue
+    })
+
+    const currentIndex: number = sidebar.children.findIndex((c: any) => {
+      return c.value === props.value
+    })
+
+    if (currentIndex === activeIndex + 1) {
+      suffix = true
+    }
+  }
+  return suffix
+})
+
+function handleClick() {
+  if (props.disabled) {
+    return
+  }
+  sidebar && sidebar.setChange(props.value, props.label)
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index';
+</style>

package/components/wd-skeleton/index.scss

@@ -0,0 +1,101 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(skeleton) {
+    @include e(col) {
+      background-color: $-dark-background4;
+    }
+  }
+}
+@include b(skeleton) {
+  box-sizing: border-box;
+
+  @include e(row) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: $-skeleton-row-margin-bottom;
+
+    &:only-child,
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  @include e(col) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: $-skeleton-background-color;
+    border-radius: $-skeleton-border-radius-text;
+
+    &:first-child:last-child,
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+  @include m(type) {
+    &-text {
+      width: 100%;
+      height: $-skeleton-text-height-default;
+      border-radius: $-skeleton-border-radius-text;
+    }
+
+    &-rect {
+      width: 100%;
+      height: $-skeleton-rect-height-default;
+      border-radius: $-skeleton-border-radius-rect;
+    }
+
+    &-circle {
+      flex-shrink: 0;
+      width: $-skeleton-circle-height-default;
+      height: $-skeleton-circle-height-default;
+      border-radius: $-skeleton-border-radius-circle;
+    }
+  }
+  @include m(animation) {
+    &-gradient {
+      position: relative;
+      overflow-x: hidden;
+
+      &::after {
+        position: absolute;
+        inset: 0;
+        content: ' ';
+        background: linear-gradient(
+          90deg,
+          rgba(255, 255, 255, 0),
+          $-skeleton-animation-gradient,
+          rgba(255, 255, 255, 0)
+        );
+        animation: wd-skeleton-gradient 1.5s linear 2s infinite;
+      }
+    }
+
+    &-flashed {
+      animation: wd-skeleton-flashed 2s linear 2s infinite;
+    }
+  }
+
+  @keyframes wd-skeleton-gradient {
+    0% {
+      transform: translateX(-100%) skewX(-15deg);
+    }
+    100% {
+      transform: translateX(100%) skewX(-15deg);
+    }
+  }
+  @keyframes wd-skeleton-flashed {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      background-color: $-skeleton-animation-flashed;
+      opacity: 0.3;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+}

package/components/wd-skeleton/index.ts

@@ -0,0 +1 @@
+export type { SkeletonThemeVars } from './types'

package/components/wd-skeleton/types.ts

@@ -0,0 +1,69 @@
+import type { PropType, ExtractPropTypes, CSSProperties } from 'vue'
+import { makeArrayProp, makeBooleanProp, makeStringProp } from '../common/props'
+
+type SkeletonTheme = 'text' | 'avatar' | 'paragraph' | 'image'
+type SkeletonAnimation = 'gradient' | 'flashed'
+export type SkeletonRowColObj = {
+  [key: string]: any
+  type?: 'rect' | 'circle' | 'text'
+  size?: string | number
+  width?: string | number
+  height?: string | number
+  margin?: string | number
+  background?: string
+  marginLeft?: string | number
+  marginRight?: string | number
+  borderRadius?: string | number
+  backgroundColor?: string
+}
+export type SkeletonRowCol = number | SkeletonRowColObj | Array<SkeletonRowColObj>
+export type SkeletonThemeVars = {
+  notifyPadding?: string
+  notifyFontSize?: string
+  notifyTextColor?: string
+  notifyLineHeight?: number | string
+  notifyDangerBackground?: string
+  notifyPrimaryBackground?: string
+  notifySuccessBackground?: string
+  notifyWarningBackground?: string
+}
+export const skeletonProps = {
+  /**
+   * 骨架图风格，有基础、头像组合等两大类
+   */
+  theme: makeStringProp<SkeletonTheme>('text'),
+  /**
+   * 用于设置行列数量、宽度高度、间距等。
+   * @example
+   * 【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。
+   * 【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。
+   * 【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度和间距
+   */
+  rowCol: makeArrayProp<SkeletonRowCol>(),
+  /**
+   * 是否为加载状态，如果是则显示骨架图，如果不是则显示加载完成的内容
+   * @default true
+   */
+  loading: makeBooleanProp(true),
+  /**
+   * 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为空则表示没有动画
+   */
+  animation: {
+    type: String as PropType<SkeletonAnimation>,
+    default: '',
+  },
+  // 自定义类名
+  customClass: {
+    type: [String, Array, Object],
+    default: '',
+  },
+  // 自定义样式
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+    default() {
+      return {}
+    },
+  },
+}
+
+export type SkeletonProps = ExtractPropTypes<typeof skeletonProps>

package/components/wd-skeleton/wd-skeleton.vue

@@ -0,0 +1,135 @@
+<!--
+ * @Author: weisheng
+ * @Date: 2024-03-15 11:36:12
+ * @LastEditTime: 2024-04-01 20:24:22
+ * @LastEditors: weisheng
+ * @Description: 
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-skeleton/wd-skeleton.vue
+ * 记得注释
+-->
+<template>
+  <view :class="`wd-skeleton ${customClass}`" :style="customStyle">
+    <view class="wd-skeleton__content" v-if="show">
+      <view class="wd-skeleton__row" v-for="(row, index) of parsedRowCols" :key="`row-${index}`">
+        <view v-for="(col, idx) of row" :key="`col-${idx}`" :class="col.class" :style="col.style" />
+      </view>
+    </view>
+    <view v-else>
+      <slot />
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  // #ifdef H5
+  name: 'wd-skeleton',
+  // #endif
+  options: { virtualHost: true, addGlobalClass: true, styleIsolation: 'shared' },
+}
+</script>
+
+<script lang="ts" setup>
+import type { CSSProperties } from 'vue'
+import { ref, computed, watch } from 'vue'
+import type { SkeletonRowCol, SkeletonRowColObj } from './types'
+import { skeletonProps } from './types'
+import { isNumber, addUnit } from '../common/util'
+
+const themeMap = {
+  avatar: [{ type: 'circle', height: '64px', width: '64px' }],
+  image: [{ type: 'rect', height: '64px', width: '64px' }],
+  text: [
+    1,
+    [
+      { width: '24%', height: '16px', marginRight: '16px' },
+      { width: '76%', height: '16px' },
+    ],
+  ],
+  paragraph: [1, 1, 1, { width: '55%' }],
+}
+const props = defineProps(skeletonProps)
+const rowCols = ref<SkeletonRowCol[]>([])
+
+const parsedRowCols = computed(() => {
+  return rowCols.value.map((item) => {
+    if (isNumber(item)) {
+      return [
+        {
+          class: getColItemClass({ type: 'text' }),
+          style: {},
+        },
+      ]
+    }
+    if (Array.isArray(item)) {
+      return item.map((col) => {
+        return {
+          ...col,
+          class: getColItemClass(col),
+          style: getColItemStyle(col),
+        }
+      })
+    }
+    const nItem = item as SkeletonRowColObj
+
+    return [
+      {
+        ...nItem,
+        class: getColItemClass(nItem),
+        style: getColItemStyle(nItem),
+      },
+    ]
+  })
+})
+
+function getColItemClass(rowCol: SkeletonRowColObj) {
+  return [
+    'wd-skeleton__col',
+    `wd-skeleton--type-${rowCol.type || 'text'}`,
+    { [`wd-skeleton--animation-${props.animation}`]: props.animation },
+  ]
+}
+function getColItemStyle(rowCol: SkeletonRowColObj) {
+  const style: CSSProperties = {}
+  const styleName = [
+    'size',
+    'width',
+    'height',
+    'margin',
+    'background',
+    'marginLeft',
+    'marginRight',
+    'borderRadius',
+    'backgroundColor',
+  ]
+
+  for (const name of styleName) {
+    if (Object.prototype.hasOwnProperty.call(rowCol, name)) {
+      const px = addUnit(rowCol[name])
+
+      if (name === 'size') {
+        style.width = px
+        style.height = px
+      } else {
+        ;(style as any)[name] = px
+      }
+    }
+  }
+  return style
+}
+
+watch(
+  () => props.rowCol,
+  (rowCol) => {
+    rowCols.value = [
+      ...(Array.isArray(rowCol) && rowCol.length ? props.rowCol : themeMap[props.theme]),
+    ]
+  },
+  { immediate: true },
+)
+
+const show = computed(() => props.loading === undefined || props.loading === true)
+</script>
+
+<style lang="scss" scoped>
+@import './index';
+</style>

package/components/wd-slider/index.scss

@@ -0,0 +1,91 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(slider) {
+    @include e(label-min, label-max) {
+      color: $-dark-color;
+    }
+
+    @include e(label) {
+      color: $-dark-color;
+      background-color: rgba($color: $-dark-background2, $alpha: 0.5);
+    }
+
+    @include m(disabled) {
+      @include me(label-min, label-max) {
+        color: $-dark-color-gray;
+      }
+    }
+  }
+}
+
+@include b(slider) {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  height: calc($-slider-handle-radius * 3);
+
+  @include e(label-min, label-max) {
+    font-size: $-slider-fs;
+    color: $-slider-color;
+  }
+  @include e(label) {
+    position: absolute;
+    bottom: calc($-slider-handle-radius * 2 + 8px);
+    width: calc($-slider-handle-radius * 2);
+    font-size: $-slider-fs;
+    line-height: calc($-slider-handle-radius * 2);
+    line-height: 1.2;
+    color: $-slider-color;
+    text-align: center;
+    background-color: rgba($color: #fff, $alpha: 0.5);
+    border-radius: 100%;
+  }
+  @include e(bar-wrapper) {
+    position: relative;
+    flex: 1;
+    margin: calc($-slider-handle-radius - $-slider-axie-height / 2) 0;
+    background-color: #e5e5e5;
+    border-radius: calc($-slider-axie-height / 2);
+  }
+  @include e(bar) {
+    position: relative;
+    height: $-slider-axie-height;
+    background: $-slider-line-color;
+    border-radius: inherit;
+  }
+  @include e(button-wrapper) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: calc($-slider-handle-radius * 2);
+    transform: translate3d(-50%, -50%, 0);
+  }
+  @include e(has-label) {
+    padding-top: calc($-slider-fs * 1.2 + 8px);
+  }
+  @include e(button) {
+    box-sizing: border-box;
+    width: calc($-slider-handle-radius * 2);
+    height: calc($-slider-handle-radius * 2);
+    background: $-slider-handle-bg;
+    border: 1px solid $-slider-axie-bg;
+    border-radius: 100%;
+    box-shadow: 0 2px 4px 0 rgba($color: #9b9b9b, $alpha: 0.5);
+  }
+  @include e(label-min) {
+    margin-right: $-slider-handle-radius + 11px;
+  }
+  @include e(label-max) {
+    margin-left: $-slider-handle-radius + 11px;
+  }
+  @include m(disabled) {
+    @include me(bar) {
+      opacity: 0.25;
+    }
+    @include me(label-min, label-max) {
+      color: $-slider-disabled-color;
+    }
+  }
+}

package/components/wd-slider/types.ts

@@ -0,0 +1,104 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-06-03 23:43:43
+ * @LastEditTime: 2024-06-06 22:03:57
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-slider/types.ts
+ * 记得注释
+ */
+import type { ComponentPublicInstance, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+
+export const sliderProps = {
+  ...baseProps,
+
+  /**
+   * 自定义最小值的样式类名
+   * 类型: string
+   * 默认值: ''
+   */
+  customMinClass: makeStringProp(''),
+
+  /**
+   * 自定义最大值的样式类名
+   * 类型: string
+   * 默认值: ''
+   */
+  customMaxClass: makeStringProp(''),
+
+  /**
+   * 是否隐藏左右的最大最小值
+   * 类型: boolean
+   * 默认值: false
+   */
+  hideMinMax: makeBooleanProp(false),
+
+  /**
+   * 是否隐藏当前滑块值
+   * 类型: boolean
+   * 默认值: false
+   */
+  hideLabel: makeBooleanProp(false),
+
+  /**
+   * 是否禁用滑块
+   * 类型: boolean
+   * 默认值: false
+   */
+  disabled: makeBooleanProp(false),
+
+  /**
+   * 进度条未激活的背景颜色
+   * 类型: string
+   * 默认值: '#e5e5e5'
+   */
+  inactiveColor: makeStringProp('#e5e5e5'),
+
+  /**
+   * 进度条激活的背景颜色
+   * 类型: string
+   * 默认值: ''
+   */
+  activeColor: makeStringProp(''),
+
+  /**
+   * 滑块的最大值
+   * 类型: number
+   * 默认值: 100
+   */
+  max: makeNumberProp(100),
+
+  /**
+   * 滑块的最小值
+   * 类型: number
+   * 默认值: 0
+   */
+  min: makeNumberProp(0),
+
+  /**
+   * 滑块的步进值
+   * 类型: number
+   * 默认值: 1
+   */
+  step: makeNumberProp(1),
+
+  /**
+   * 滑块的值，如果为数组，则为双向滑块
+   * 类型: number | number[]
+   * 默认值: 0
+   */
+  modelValue: {
+    type: [Number, Array] as PropType<number | number[]>,
+    default: 0,
+  },
+}
+
+export type SliderExpose = {
+  /**
+   * 初始化slider宽度
+   */
+  initSlider: () => void
+}
+
+export type SliderInstance = ComponentPublicInstance<SliderExpose>