@tplc/wot 0.0.1

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

@@ -0,0 +1,17 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(form-item) {
+  }
+}
+
+@include b(form-item) {
+  @include e(error-message) {
+    font-size: $-form-item-error-message-font-size;
+    line-height: $-form-item-error-message-line-height;
+    color: $-form-item-error-message-color;
+    text-align: left;
+    vertical-align: middle;
+  }
+}

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

@@ -0,0 +1,22 @@
+import type { ExtractPropTypes } from 'vue'
+import {
+  baseProps,
+  makeArrayProp,
+  makeBooleanProp,
+  makeRequiredProp,
+  makeStringProp,
+} from '../common/props'
+import type { FormItemRule } from '../wd-form/types'
+
+export const formItemProps = {
+  ...baseProps,
+  prop: makeRequiredProp(String),
+  rules: makeArrayProp<FormItemRule>(),
+  required: Boolean,
+  center: makeBooleanProp(false),
+  label: String,
+  labelWidth: makeStringProp('100px'),
+  isLink: Boolean,
+}
+
+export type FormItemProps = ExtractPropTypes<typeof formItemProps>

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

@@ -0,0 +1,65 @@
+<!--
+ * @Author: weisheng
+ * @Date: 2023-12-14 11:21:58
+ * @LastEditTime: 2024-03-15 21:29:33
+ * @LastEditors: weisheng
+ * @Description: 
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-form-item/wd-form-item.vue
+ * 记得注释
+-->
+<template>
+  <wd-cell
+    custom-class="wd-form-item"
+    :required="required"
+    :title="label"
+    :center="center"
+    :border="border"
+    :title-width="labelWidth"
+    :is-link="isLink"
+  >
+    <slot></slot>
+    <view v-if="errorMessage" class="wd-form-item__error-message">{{ errorMessage }}</view>
+  </wd-cell>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-form-item',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useParent } from '../composables/useParent'
+import WdCell from '../wd-cell/wd-cell.vue'
+import { FORM_KEY } from '../wd-form/types'
+import { formItemProps } from './types'
+
+const props = defineProps(formItemProps)
+
+const { parent: form, index } = useParent(FORM_KEY)
+
+const errorMessage = computed(() => {
+  if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
+    return form.errorMessages[props.prop]
+  } else {
+    return ''
+  }
+})
+
+const border = computed(() => {
+  if (index.value > 0 && form && form.props.border) {
+    return true
+  } else {
+    return false
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index';
+</style>

package/components/wd-gap/index.scss

@@ -0,0 +1,9 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(gap) {
+  @include m(safe) {
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}

package/components/wd-gap/types.ts

@@ -0,0 +1,23 @@
+import {
+  baseProps,
+  makeBooleanProp,
+  makeNumberProp,
+  makeNumericProp,
+  makeStringProp,
+} from '../common/props'
+
+export const gapProps = {
+  ...baseProps,
+  /**
+   * 背景颜色
+   */
+  bgColor: makeStringProp('transparent'),
+  /**
+   * 是否开启底部安全区
+   */
+  safeAreaBottom: makeBooleanProp(false),
+  /**
+   * 高度
+   */
+  height: makeNumericProp(15),
+}

package/components/wd-gap/wd-gap.vue

@@ -0,0 +1,39 @@
+<template>
+  <view
+    :class="`wd-gap ${safeAreaBottom ? 'wd-gap--safe' : ''} ${customClass}`"
+    :style="rootStyle"
+  ></view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-gap',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { type CSSProperties, computed } from 'vue'
+import { addUnit, isDef, objToStyle } from '../common/util'
+import { gapProps } from './types'
+
+const props = defineProps(gapProps)
+
+const rootStyle = computed(() => {
+  const rootStyle: CSSProperties = {}
+  if (isDef(props.bgColor)) {
+    rootStyle.background = props.bgColor
+  }
+  if (isDef(props.height)) {
+    rootStyle.height = addUnit(props.height)
+  }
+  return `${objToStyle(rootStyle)};${props.customStyle}`
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/wd-grid/index.scss

@@ -0,0 +1,9 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(grid) {
+  position: relative;
+  box-sizing: border-box;
+  height: auto;
+  overflow: hidden;
+}

package/components/wd-grid/types.ts

@@ -0,0 +1,54 @@
+/*
+ * @Author: weisheng
+ * @Date: 2023-12-14 11:21:58
+ * @LastEditTime: 2024-03-18 14:38:35
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-grid\types.ts
+ * 记得注释
+ */
+import { type ExtractPropTypes, type InjectionKey } from 'vue'
+import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
+
+export type GridProvide = {
+  props: {
+    clickable?: boolean
+    square?: boolean
+    column?: number
+    border?: boolean
+    bgColor?: string
+    gutter?: number
+  }
+}
+
+export const GRID_KEY: InjectionKey<GridProvide> = Symbol('wd-grid')
+
+export const gridProps = {
+  ...baseProps,
+  /**
+   * 是否开启格子点击反馈
+   */
+  clickable: makeBooleanProp(false),
+  /**
+   * 是否将格子固定为正方形
+   */
+  square: makeBooleanProp(false),
+  /**
+   * 列数
+   */
+  column: Number,
+  /**
+   * 是否显示边框
+   */
+  border: makeBooleanProp(false),
+  /**
+   * 背景颜色
+   */
+  bgColor: makeStringProp(''),
+  /**
+   * 格子之间的间距，默认单位为px
+   */
+  gutter: Number,
+}
+
+export type GridProps = ExtractPropTypes<typeof gridProps>

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

@@ -0,0 +1,107 @@
+<template>
+  <view :class="`wd-grid ${customClass}`" :style="rootStyle">
+    <!-- 默认插入的 item -->
+    <slot />
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-grid',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, watch } from 'vue'
+import { useChildren } from '../composables/useChildren'
+import { GRID_KEY, gridProps } from './types'
+import { debounce } from '../common/util'
+const nextTick = () => new Promise((resolve) => setTimeout(resolve, 20))
+
+const props = defineProps(gridProps)
+
+// 子元素个数
+const { linkChildren, children } = useChildren(GRID_KEY)
+linkChildren({ props })
+
+watch(
+  () => props.column,
+  (val, oldVal) => {
+    if (val === oldVal) return
+    if (!val || val <= 0) {
+      console.error(
+        'The number of columns attribute value is invalid. The attribute must be greater than 0 and it is not recommended to use a larger value attribute.',
+      )
+    }
+    oldVal && init()
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+)
+
+watch(
+  () => props.border,
+  (val) => {
+    val &&
+      Promise.resolve()
+        .then(nextTick)
+        .then(() => {
+          init()
+        })
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+)
+
+watch(
+  () => children,
+  () => {
+    handleChildrenChange()
+  },
+  {
+    deep: true,
+  },
+)
+
+const rootStyle = computed(() => {
+  return `${props.gutter ? 'padding-left:' + props.gutter + 'px;' + 'padding-bottom:' + props.gutter + 'px;' : ''}${props.customStyle}`
+})
+
+const handleChildrenChange = debounce(() => {
+  init()
+}, 50)
+
+function init() {
+  if (!children) return
+  children.forEach((item, index) => {
+    if (props.border) {
+      const { column } = props
+      if (column) {
+        const isRightItem = children.length - 1 === index || (index + 1) % column === 0
+        const isFirstLine = index + 1 <= column
+        isFirstLine && item.$.exposed!.setiIemClass('is-first')
+        isRightItem && item.$.exposed!.setiIemClass('is-right')
+        !isFirstLine && item.$.exposed!.setiIemClass('is-border')
+      } else {
+        item.$.exposed!.setiIemClass('is-first')
+      }
+      children.length - 1 === index &&
+        item.$.exposed!.setiIemClass(item.$.exposed!.itemClass.value + ' is-last')
+    }
+    item.$.exposed!.init()
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index';
+</style>

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

@@ -0,0 +1,137 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(grid-item) {
+    @include when(border) {
+      &::before {
+        background-color: $-dark-border-color;
+      }
+      &::after {
+        background-color: $-dark-border-color;
+      }
+    }
+
+    // 第一行元素
+    @include when(first) {
+      &::after {
+        background-color: $-dark-border-color;
+      }
+    }
+
+    @include e(content) {
+      background-color: $-dark-background2;
+    }
+  }
+}
+
+@include b(grid-item) {
+  position: relative;
+  box-sizing: border-box;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  float: left;
+  height: 100%;
+  overflow: hidden;
+  font-size: $-grid-item-fs;
+  text-align: center;
+
+  @include when(border) {
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      width: 100%;
+      height: 1px;
+      content: '';
+      background-color: $-grid-item-border-color;
+      transform: scaleY(0.5);
+    }
+    &::after {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 1px;
+      height: 100%;
+      content: '';
+      background-color: $-grid-item-border-color;
+      transform: scaleX(0.5);
+    }
+  }
+
+  // 第一行元素
+  @include when(first) {
+    &::after {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 1px;
+      height: 100%;
+      content: '';
+      background-color: $-grid-item-border-color;
+      transform: scaleX(0.5);
+    }
+  }
+
+  // 每行右侧的元素
+  @include when(right) {
+    &::after {
+      display: none;
+    }
+  }
+
+  @include when(last) {
+    &::after {
+      display: none;
+    }
+  }
+  @include e(wrapper) {
+    display: inline-block;
+    margin: 0 auto;
+  }
+
+  @include e(content) {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+    padding: $-grid-item-padding;
+    background-color: $-grid-item-bg;
+
+    @include when(square) {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      box-sizing: border-box;
+      height: 100%;
+      padding: 0;
+    }
+
+    @include when(round) {
+      &::after {
+        position: absolute;
+        top: 0;
+        left: 0;
+        box-sizing: border-box;
+        width: 200%;
+        height: 200%;
+        content: ' ';
+        border: 1px solid $-grid-item-border-color;
+        transform: scale(0.5);
+        transform-origin: top left;
+      }
+    }
+  }
+
+  @include e(text) {
+    margin-top: 8px;
+    font-size: $-grid-item-fs;
+    line-height: $-grid-item-fs;
+    @include lineEllipsis;
+  }
+}

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

@@ -0,0 +1,74 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
+import type { BadgeProps, BadgeType } from '../wd-badge/types'
+
+export type LinkType = 'navigateTo' | 'switchTab' | 'reLaunch' | 'redirectTo'
+
+export const gridItemProps = {
+  ...baseProps,
+  /**
+   * GridItem 下方文字样式
+   */
+  customText: makeStringProp(''),
+  /**
+   * GridItem 上方 icon 样式
+   */
+  customIcon: makeStringProp(''),
+  /**
+   * 图标名称，可选值见 wd-icon 组件
+   */
+  icon: makeStringProp(''),
+  /**
+   * 图标大小
+   */
+  iconSize: makeStringProp('26px'),
+  /**
+   * 文字
+   */
+  text: String,
+  /**
+   * 点击后跳转的链接地址
+   */
+  url: String,
+  /**
+   * 页面跳转方式, 参考微信小程序路由文档，可选值：navigateTo / switchTab / reLaunch
+   */
+  linkType: makeStringProp<LinkType>('navigateTo'),
+  /**
+   * 是否开启 GridItem 内容插槽
+   */
+  useSlot: makeBooleanProp(false),
+  /**
+   * 是否开启 GridItem icon 插槽
+   */
+  useIconSlot: makeBooleanProp(false),
+  /**
+   * 是否开启 GridItem text 内容插槽
+   */
+  useTextSlot: makeBooleanProp(false),
+  /**
+   * 是否显示图标右上角小红点
+   */
+  isDot: {
+    type: Boolean,
+    default: undefined,
+  },
+  /**
+   * 图标右上角显示的 badge 类型，可选值：primary / success / warning / danger / info
+   */
+  type: String as PropType<BadgeType>,
+  /**
+   * 图标右上角 badge 显示值
+   */
+  value: Number,
+  /**
+   * 图标右上角 badge 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型
+   */
+  max: Number,
+  /**
+   * 徽标属性，透传给 Badge 组件
+   */
+  badgeProps: Object as PropType<Partial<BadgeProps>>,
+}
+
+export type GridItemProps = ExtractPropTypes<typeof gridItemProps>