@tplc/wot 0.0.1

package/components/wd-cell/index.scss

@@ -0,0 +1,189 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/_mixin';
+
+.wot-theme-dark {
+  @include b(cell) {
+    color: $-dark-color;
+    background-color: $-dark-background2;
+
+    @include e(value) {
+      color: $-dark-color3;
+    }
+
+    @include e(label) {
+      color: $-dark-color3;
+    }
+
+    @include when(hover) {
+      background-color: $-dark-background4;
+    }
+
+    @include when(border) {
+      .wd-cell__wrapper {
+        @include halfPixelBorder('top', 0, $-dark-border-color);
+      }
+    }
+
+    :deep(.wd-cell__arrow-right) {
+      color: $-dark-color;
+    }
+  }
+}
+
+@include b(cell) {
+  position: relative;
+  padding-left: $-cell-padding;
+  line-height: $-cell-line-height;
+  color: $-cell-title-color;
+  text-decoration: none;
+  background-color: $-color-white;
+  -webkit-tap-highlight-color: transparent;
+
+  @include when(border) {
+    .wd-cell__wrapper {
+      @include halfPixelBorder('top');
+    }
+  }
+
+  @include e(wrapper) {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: $-cell-wrapper-padding $-cell-padding $-cell-wrapper-padding 0;
+
+    @include when(vertical) {
+      display: block;
+
+      .wd-cell__right {
+        margin-top: $-cell-vertical-top;
+      }
+
+      .wd-cell__value {
+        text-align: left;
+      }
+
+      .wd-cell__left {
+        margin-right: 0;
+      }
+    }
+
+    @include when(label) {
+      padding: $-cell-wrapper-padding-with-label $-cell-padding $-cell-wrapper-padding-with-label 0;
+    }
+  }
+
+  @include e(left) {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    flex: 1;
+    margin-right: $-cell-padding;
+    font-size: $-cell-title-fs;
+    text-align: left;
+
+    @include when(required) {
+      padding-left: 12px;
+
+      &::after {
+        position: absolute;
+        top: 0;
+        left: 0;
+        font-size: $-cell-required-size;
+        color: $-cell-required-color;
+        content: '*';
+      }
+    }
+  }
+
+  @include e(right) {
+    position: relative;
+    flex: 1;
+  }
+
+  @include e(title) {
+    flex: 1;
+    width: 100%;
+    font-size: $-cell-title-fs;
+  }
+
+  @include e(label) {
+    margin-top: 2px;
+    font-size: $-cell-label-fs;
+    color: $-cell-label-color;
+    @include lineEllipsis;
+  }
+
+  @include edeep(icon) {
+    position: relative;
+    display: block;
+    height: $-cell-line-height;
+    margin-right: $-cell-icon-right;
+    font-size: $-cell-icon-size;
+    line-height: $-cell-line-height;
+  }
+
+  @include e(body) {
+    display: flex;
+  }
+
+  @include e(value) {
+    position: relative;
+    flex: 1;
+    font-size: $-cell-value-fs;
+    color: $-cell-value-color;
+    text-align: right;
+    vertical-align: middle;
+  }
+
+  @include edeep(arrow-right) {
+    display: block;
+    width: $-cell-arrow-size;
+    height: $-cell-line-height;
+    margin-left: 8px;
+    font-size: $-cell-arrow-size;
+    line-height: $-cell-line-height;
+    color: $-cell-arrow-color;
+  }
+
+  @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;
+  }
+
+  @include when(link) {
+    -webkit-tap-highlight-color: $-cell-tap-bg;
+  }
+
+  @include when(hover) {
+    background-color: $-cell-tap-bg;
+  }
+
+  @include when(large) {
+    .wd-cell__title {
+      font-size: $-cell-title-fs-large;
+    }
+
+    .wd-cell__wrapper {
+      padding-top: $-cell-wrapper-padding-large;
+      padding-bottom: $-cell-wrapper-padding-large;
+    }
+
+    .wd-cell__label {
+      font-size: $-cell-label-fs-large;
+    }
+
+    :deep(.wd-cell__icon) {
+      font-size: $-cell-icon-size-large;
+    }
+  }
+
+  @include when(center) {
+    .wd-cell__wrapper {
+      align-items: center;
+    }
+  }
+}

package/components/wd-cell/types.ts

@@ -0,0 +1,96 @@
+import type { ExtractPropTypes } from 'vue'
+import {
+  baseProps,
+  makeArrayProp,
+  makeBooleanProp,
+  makeStringProp,
+  makeNumericProp,
+} from '../common/props'
+
+import { type FormItemRule } from '../wd-form/types'
+
+export const cellProps = {
+  ...baseProps,
+  /**
+   * 标题
+   */
+  title: String,
+  /**
+   * 右侧内容
+   */
+  value: makeNumericProp(''),
+  /**
+   * 图标类名
+   */
+  icon: String,
+  /**
+   * 描述信息
+   */
+  label: String,
+  /**
+   * 是否为跳转链接
+   */
+  isLink: makeBooleanProp(false),
+  /**
+   * 跳转地址
+   */
+  to: String,
+  /**
+   * 跳转时是否替换栈顶页面
+   */
+  replace: makeBooleanProp(false),
+  /**
+   * 开启点击反馈，is-link 默认开启
+   */
+  clickable: makeBooleanProp(false),
+  /**
+   * 设置单元格大小，可选值：large
+   */
+  size: String,
+  /**
+   * 是否展示边框线
+   */
+  border: Boolean,
+  /**
+   * 设置左侧标题宽度
+   */
+  titleWidth: String,
+  /**
+   * 是否垂直居中，默认顶部居中
+   */
+  center: makeBooleanProp(false),
+  /**
+   * 是否必填
+   */
+  required: makeBooleanProp(false),
+  /**
+   * 表单属性，上下结构
+   */
+  vertical: makeBooleanProp(false),
+  /**
+   * 表单域 model 字段名，在使用表单校验功能的情况下，该属性是必填的
+   */
+  prop: String,
+  /**
+   * 表单验证规则，结合wd-form组件使用
+   */
+  rules: makeArrayProp<FormItemRule>(),
+  /**
+   * icon 使用 slot 时的自定义样式
+   */
+  customIconClass: makeStringProp(''),
+  /**
+   * label 使用 slot 时的自定义样式
+   */
+  customLabelClass: makeStringProp(''),
+  /**
+   * value 使用 slot 时的自定义样式
+   */
+  customValueClass: makeStringProp(''),
+  /**
+   * title 使用 slot 时的自定义样式
+   */
+  customTitleClass: makeStringProp(''),
+}
+
+export type CellProps = ExtractPropTypes<typeof cellProps>

package/components/wd-cell/wd-cell.vue

@@ -0,0 +1,135 @@
+<template>
+  <view
+    :class="[
+      'wd-cell',
+      isBorder ? 'is-border' : '',
+      size ? 'is-' + size : '',
+      center ? 'is-center' : '',
+      customClass,
+    ]"
+    :style="customStyle"
+    :hover-class="isLink || clickable ? 'is-hover' : 'none'"
+    hover-stay-time="70"
+    @click="onClick"
+  >
+    <view :class="['wd-cell__wrapper', vertical ? 'is-vertical' : '']">
+      <view
+        :class="['wd-cell__left', isRequired ? 'is-required' : '']"
+        :style="titleWidth ? 'min-width:' + titleWidth + ';max-width:' + titleWidth + ';' : ''"
+      >
+        <!--左侧icon部位-->
+        <wd-icon
+          v-if="icon"
+          :name="icon"
+          :custom-class="`wd-cell__icon  ${customIconClass}`"
+        ></wd-icon>
+        <slot v-else name="icon" />
+
+        <view class="wd-cell__title">
+          <!--title BEGIN-->
+          <view v-if="title" :class="customTitleClass">{{ title }}</view>
+          <slot v-else name="title"></slot>
+          <!--title END-->
+
+          <!--label BEGIN-->
+          <view v-if="label" :class="`wd-cell__label ${customLabelClass}`">{{ label }}</view>
+          <slot v-else name="label" />
+          <!--label END-->
+        </view>
+      </view>
+      <!--right content BEGIN-->
+      <view class="wd-cell__right">
+        <view class="wd-cell__body">
+          <!--文案内容-->
+          <view :class="`wd-cell__value ${customValueClass}`">
+            <slot>{{ value }}</slot>
+          </view>
+          <!--箭头-->
+          <wd-icon v-if="isLink" custom-class="wd-cell__arrow-right" name="arrow-right" />
+          <slot v-else name="right-icon" />
+        </view>
+        <view v-if="errorMessage" class="wd-cell__error-message">{{ errorMessage }}</view>
+      </view>
+      <!--right content END-->
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-cell',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useCell } from '../composables/useCell'
+import { useParent } from '../composables/useParent'
+import { FORM_KEY } from '../wd-form/types'
+import { cellProps } from './types'
+import { isDef } from '../common/util'
+
+const props = defineProps(cellProps)
+const emit = defineEmits(['click'])
+
+const cell = useCell()
+
+const isBorder = computed(() => {
+  return isDef(cell.border.value) ? cell.border.value : props.border
+})
+
+const { parent: form } = useParent(FORM_KEY)
+
+const errorMessage = computed(() => {
+  if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
+    return form.errorMessages[props.prop]
+  } else {
+    return ''
+  }
+})
+
+// 是否展示必填
+const isRequired = computed(() => {
+  let formRequired = false
+  if (form && form.props.rules) {
+    const rules = form.props.rules
+    for (const key in rules) {
+      if (
+        Object.prototype.hasOwnProperty.call(rules, key) &&
+        key === props.prop &&
+        Array.isArray(rules[key])
+      ) {
+        formRequired = rules[key].some((rule) => rule.required)
+      }
+    }
+  }
+  return props.required || props.rules.some((rule) => rule.required) || formRequired
+})
+
+/**
+ * @description 点击cell的handle
+ */
+function onClick() {
+  const url = props.to
+
+  if (props.clickable || props.isLink) {
+    emit('click')
+  }
+  if (url && props.isLink) {
+    if (props.replace) {
+      uni.redirectTo({ url })
+    } else {
+      uni.navigateTo({ url })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index';
+</style>

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

@@ -0,0 +1,55 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/_mixin';
+
+.wot-theme-dark {
+  @include b(cell-group) {
+    background-color: $-dark-background2;
+
+    @include when(border) {
+      .wd-cell-group__title {
+        @include halfPixelBorder('bottom', 0, $-dark-border-color);
+      }
+    }
+
+    @include e(title) {
+      color: $-dark-color;
+      background: $-dark-background2;
+    }
+
+    @include e(right) {
+      color: $-dark-color3;
+    }
+
+    @include e(body) {
+      background: $-dark-background2;
+    }
+  }
+}
+
+@include b(cell-group) {
+  background-color: $-color-white;
+
+  @include when(border) {
+    .wd-cell-group__title {
+      @include halfPixelBorder;
+    }
+  }
+  @include e(title) {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    padding: $-cell-group-padding;
+    font-size: $-cell-group-title-fs;
+    font-weight: $-fw-medium;
+    line-height: 1.43;
+    color: $-cell-group-title-color;
+    background: $-color-white;
+  }
+  @include e(right) {
+    font-size: $-cell-group-value-fs;
+    color: $-cell-group-value-color;
+  }
+  @include e(body) {
+    background: $-color-white;
+  }
+}

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

@@ -0,0 +1,41 @@
+/*
+ * @Author: weisheng
+ * @Date: 2023-12-14 11:21:58
+ * @LastEditTime: 2024-03-18 13:57:14
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-cell-group\types.ts
+ * 记得注释
+ */
+import { type ExtractPropTypes, type InjectionKey } from 'vue'
+import { baseProps, makeBooleanProp } from '../common/props'
+
+export type CelllGroupProvide = {
+  props: {
+    border?: boolean
+  }
+}
+
+export const CELL_GROUP_KEY: InjectionKey<CelllGroupProvide> = Symbol('wd-cell-group')
+
+export const cellGroupProps = {
+  ...baseProps,
+  /**
+   * 分组标题
+   */
+  title: String,
+  /**
+   * 分组右侧内容
+   */
+  value: String,
+  /**
+   * 分组启用插槽
+   */
+  useSlot: makeBooleanProp(false),
+  /**
+   * 是否展示边框线
+   */
+  border: makeBooleanProp(false),
+}
+
+export type CellGroupProps = ExtractPropTypes<typeof cellGroupProps>

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

@@ -0,0 +1,45 @@
+<template>
+  <view :class="['wd-cell-group', border ? 'is-border' : '', customClass]" :style="customStyle">
+    <view v-if="title || value || useSlot" class="wd-cell-group__title">
+      <!--左侧标题-->
+      <view class="wd-cell-group__left">
+        <text v-if="title">{{ title }}</text>
+        <slot v-else name="title"></slot>
+      </view>
+      <!--右侧标题-->
+      <view class="wd-cell-group__right">
+        <text v-if="value">{{ value }}</text>
+        <slot v-else name="value"></slot>
+      </view>
+    </view>
+    <view class="wd-cell-group__body">
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-cell-group',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { useChildren } from '../composables/useChildren'
+import { CELL_GROUP_KEY, cellGroupProps } from './types'
+
+const props = defineProps(cellGroupProps)
+
+const { linkChildren } = useChildren(CELL_GROUP_KEY)
+
+linkChildren({ props })
+</script>
+
+<style lang="scss" scoped>
+@import './index';
+</style>