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

package/components/wd-grid/types.ts

@@ -0,0 +1,97 @@
+import { type ExtractPropTypes, type InjectionKey } from 'vue'
+import { baseProps, makeBooleanProp, makeStringProp } from '../../common/props'
+
+/**
+ * 格子内容排列方向
+ */
+export type GridDirection = 'horizontal' | 'vertical'
+
+/**
+ * Grid 组件属性定义
+ */
+export const gridProps = {
+  ...baseProps,
+  /**
+   * 是否开启格子点击反馈
+   * 类型: boolean
+   * 默认值: false
+   */
+  clickable: makeBooleanProp(false),
+  /**
+   * 是否将格子固定为正方形
+   * 类型: boolean
+   * 默认值: false
+   */
+  square: makeBooleanProp(false),
+  /**
+   * 列数
+   * 类型: number
+   * 默认值: 0（自动根据子元素数量计算）
+   */
+  column: Number,
+  /**
+   * 是否显示边框
+   * 类型: boolean
+   * 默认值: false
+   */
+  border: makeBooleanProp(false),
+  /**
+   * 背景颜色
+   * 类型: string
+   * 默认值: ''
+   */
+  bgColor: makeStringProp(''),
+  /**
+   * 格子之间的间距，默认单位为px
+   * 类型: number
+   * 默认值: 0
+   */
+  gutter: Number,
+  /**
+   * 自定义内容区域hover-class
+   * 类型: string
+   * 默认值: ''
+   */
+  hoverClass: String,
+  /**
+   * 是否将格子内容居中显示
+   * 类型: boolean
+   * 默认值: true
+   */
+  center: makeBooleanProp(true),
+  /**
+   * 格子内容排列的方向
+   * 可选值: 'horizontal' | 'vertical'
+   * 默认值: 'vertical'
+   */
+  direction: makeStringProp<GridDirection>('vertical'),
+  /**
+   * 是否调换图标和文本的位置
+   * 类型: boolean
+   * 默认值: false
+   */
+  reverse: makeBooleanProp(false),
+  /**
+   * 图标大小，默认单位为px
+   * 类型: string
+   * 默认值: '28px'
+   */
+  iconSize: String
+}
+
+/**
+ * Grid 组件属性类型
+ */
+export type GridProps = ExtractPropTypes<typeof gridProps>
+
+/**
+ * Grid 组件注入给子组件的数据
+ */
+export type GridProvide = {
+  props: Partial<GridProps>
+}
+
+/**
+ * Grid 组件注入键
+ */
+export const GRID_KEY: InjectionKey<GridProvide> = Symbol('wd-grid')

package/components/wd-grid/wd-grid.vue

@@ -0,0 +1,48 @@
+<template>
+  <view :class="`wd-grid ${customClass}`" :style="rootStyle">
+    <slot />
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-grid',
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, type CSSProperties } from 'vue'
+import { useChildren } from '../../composables/useChildren'
+import { GRID_KEY, gridProps } from './types'
+import { addUnit, isDef, objToStyle } from '../../common/util'
+
+const props = defineProps(gridProps)
+
+const { linkChildren } = useChildren(GRID_KEY)
+linkChildren({ props })
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (isDef(props.gutter)) {
+    style.paddingLeft = addUnit(props.gutter)
+    console.log(props.square)
+
+    if (props.square) {
+      style.marginBottom = addUnit(-props.gutter)
+    }
+  }
+
+  return `${objToStyle(style)}${props.customStyle || ''}`
+})
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-grid-item/index.scss

@@ -0,0 +1,187 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+
+// 网格项文字字号
+$grid-item-font-size: var(--wot-grid-item-font-size, $typography-body-size-extra-large) !default;
+// 网格项文字行高
+$grid-item-line-height: var(--wot-grid-item-line-height, $typography-body-line--height-size-extra-large) !default;
+// 网格项背景色
+$grid-item-bg: var(--wot-grid-item-bg, $filled-oppo) !default;
+// 网格项内容内边距
+$grid-item-padding: var(--wot-grid-item-padding, $padding-loose $padding-loose) !default;
+// 网格项悬浮背景色
+$grid-item-hover-bg: var(--wot-grid-item-hover-bg, $feedback-hover) !default;
+// 网格项图标尺寸
+$grid-item-icon-size: var(--wot-grid-item-icon-size, $n-32) !default;
+// 网格项图标颜色
+$grid-item-icon-color: var(--wot-grid-item-icon-color, $icon-secondary) !default;
+// 网格项边框宽度
+$grid-item-border-width: var(--wot-grid-item-border-width, $stroke-main) !default;
+// 网格项边框颜色
+$grid-item-border-color: var(--wot-grid-item-border-color, $border-main) !default;
+// 网格项文字颜色
+$grid-item-text-color: var(--wot-grid-item-text-color, $text-main) !default;
+// 网格项文字间距
+$grid-item-text-spacing: var(--wot-grid-item-text-spacing, $spacing-super-tight) !default;
+
+@include b(grid-item) {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  overflow: hidden;
+
+  @include when(border) {
+    &::before {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: $grid-item-border-width;
+      transform: scaleY(0.5);
+      background-color: $grid-item-border-color;
+      top: 0;
+      left: 0;
+      z-index: 1;
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      width: $grid-item-border-width;
+      transform: scaleX(0.5);
+      height: 100%;
+      background-color: $grid-item-border-color;
+      bottom: 0;
+      right: 0;
+    }
+  }
+
+  // 第一行元素
+  @include when(first) {
+    &::after {
+      content: "";
+      position: absolute;
+      width: $grid-item-border-width;
+      transform: scaleX(0.5);
+      height: 100%;
+      background-color: $grid-item-border-color;
+      bottom: 0;
+      right: 0;
+    }
+  }
+
+  // 每行右侧的元素
+  @include when(right) {
+    &::after {
+      display: none;
+    }
+  }
+
+  @include when(last) {
+    &::after {
+      display: none;
+    }
+  }
+
+  @include e(wrapper) {
+    display: inline-flex;
+
+    // 当 wrapper 后面紧跟 text 时，给 text 添加间距
+    + .wd-grid-item__text {
+      margin-top: $grid-item-text-spacing;
+    }
+  }
+
+  @include e(content) {
+    height: 100%;
+    padding: $grid-item-padding;
+    background: $grid-item-bg;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    @include when(square) {
+      box-sizing: border-box;
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      height: 100%;
+    }
+
+    @include when(center) {
+      align-items: center;
+      justify-content: center;
+    }
+
+    @include when(horizontal) {
+      flex-direction: row;
+
+      .wd-grid-item__wrapper + .wd-grid-item__text {
+        margin-top: 0;
+        margin-left: $grid-item-text-spacing;
+      }
+    }
+
+    @include when(reverse) {
+      flex-direction: column-reverse;
+
+      .wd-grid-item__wrapper + .wd-grid-item__text {
+        margin-top: 0;
+        margin-bottom: $grid-item-text-spacing;
+      }
+
+      &.is-horizontal {
+        flex-direction: row-reverse;
+
+        .wd-grid-item__wrapper + .wd-grid-item__text {
+          margin-left: 0;
+          margin-right: $grid-item-text-spacing;
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    @include when(around) {
+      &::after {
+        content: " ";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 200%;
+        height: 200%;
+        border: $grid-item-border-width solid $grid-item-border-color;
+        transform-origin: top left;
+        transform: scale(0.5);
+        box-sizing: border-box;
+      }
+    }
+
+    @include m(hover) {
+      background-color: $grid-item-hover-bg !important;
+    }
+  }
+
+  @include e(text) {
+    width: 100%;
+    font-size: $grid-item-font-size;
+    line-height: $grid-item-line-height;
+    color: $grid-item-text-color;
+
+    @include when(ellipsis) {
+      @include lineEllipsis;
+    }
+  }
+
+  @include edeep(icon) {
+    font-size: $grid-item-icon-size;
+    color: $grid-item-icon-color;
+  }
+
+  @include e(badge) {
+    display: inline-flex;
+  }
+}

package/components/wd-grid-item/types.ts

@@ -0,0 +1,98 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeStringProp, numericProp, makeBooleanProp } from '../../common/props'
+import type { BadgeProps } from '../wd-badge/types'
+
+/**
+ * 页面跳转方式
+ */
+export type LinkType = 'navigateTo' | 'switchTab' | 'reLaunch' | 'redirectTo'
+
+/**
+ * GridItem 组件属性定义
+ */
+export const gridItemProps = {
+  ...baseProps,
+  /**
+   * GridItem 下方文字样式
+   * 类型: string
+   * 默认值: ''
+   */
+  customText: makeStringProp(''),
+  /**
+   * GridItem 上方 icon 样式
+   * 类型: string
+   * 默认值: ''
+   */
+  customIcon: makeStringProp(''),
+  /**
+   * 文字
+   * 类型: string
+   * 默认值: ''
+   */
+  text: String,
+  /**
+   * 点击后跳转的链接地址
+   * 类型: string
+   * 默认值: ''
+   */
+  url: String,
+  /**
+   * 页面跳转方式
+   * 可选值: 'navigateTo' | 'switchTab' | 'reLaunch' | 'redirectTo'
+   * 默认值: 'navigateTo'
+   */
+  linkType: makeStringProp<LinkType>('navigateTo'),
+  /**
+   * 图标名称，可选值见 wd-icon 组件
+   * 类型: string
+   * 默认值: ''
+   */
+  icon: makeStringProp(''),
+  /**
+   * 图标颜色
+   * 类型: string
+   * 默认值: ''
+   */
+  iconColor: String,
+  /**
+   * 图标类名前缀
+   * 类型: string
+   * 默认值: ''
+   */
+  iconPrefix: String,
+  /**
+   * 徽标显示值
+   * 类型: string | number
+   * 默认值: ''
+   */
+  value: numericProp,
+  /**
+   * 是否点状徽标
+   * 类型: boolean
+   * 默认值: false
+   */
+  isDot: Boolean,
+  /**
+   * 徽标最大值
+   * 类型: number
+   * 默认值: 99
+   */
+  max: Number,
+  /**
+   * 徽标属性，透传给 Badge 组件
+   * 类型: Partial<BadgeProps>
+   * 默认值: {}
+   */
+  badgeProps: Object as PropType<Partial<BadgeProps>>,
+  /**
+   * 是否超出隐藏，显示省略号
+   * 类型: boolean
+   * 默认值: false
+   */
+  ellipsis: makeBooleanProp(false)
+}
+
+/**
+ * GridItem 组件属性类型
+ */
+export type GridItemProps = ExtractPropTypes<typeof gridItemProps>