oxy-uni-ui 1.0.1

package/components/oxy-cell/index.scss

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

package/components/oxy-cell/oxy-cell.vue

@@ -0,0 +1,140 @@
+<template>
+  <view
+    :class="['oxy-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="['oxy-cell__wrapper', vertical ? 'is-vertical' : '']">
+      <view v-if="showLeft" class="oxy-cell__left" :style="titleWidth ? 'min-width:' + titleWidth + ';max-width:' + titleWidth + ';' : ''">
+        <text v-if="isRequired && markerSide === 'before'" class="oxy-cell__required oxy-cell__required--left">*</text>
+        <!--左侧icon部位-->
+        <slot name="icon">
+          <oxy-icon v-if="icon" :name="icon" :size="iconSize" :custom-class="`oxy-cell__icon  ${customIconClass}`"></oxy-icon>
+        </slot>
+
+        <view class="oxy-cell__title">
+          <!--title BEGIN-->
+          <slot v-if="useTitleSlot && $slots.title" name="title"></slot>
+          <text v-else-if="title" :class="customTitleClass">{{ title }}</text>
+
+          <!--title END-->
+
+          <!--label BEGIN-->
+          <slot name="label">
+            <view v-if="label" :class="`oxy-cell__label ${customLabelClass}`">{{ label }}</view>
+          </slot>
+          <!--label END-->
+        </view>
+        <text v-if="isRequired && markerSide === 'after'" class="oxy-cell__required">*</text>
+      </view>
+      <!--right content BEGIN-->
+      <view class="oxy-cell__right">
+        <view class="oxy-cell__body">
+          <!--文案内容-->
+          <view :class="`oxy-cell__value ${customValueClass} oxy-cell__value--${valueAlign} ${ellipsis ? 'oxy-cell__value--ellipsis' : ''}`">
+            <slot>{{ value }}</slot>
+          </view>
+          <!--箭头-->
+          <oxy-icon v-if="isLink" custom-class="oxy-cell__arrow-right" name="arrow-right" />
+          <slot v-else name="right-icon" />
+        </view>
+        <view v-if="errorMessage" class="oxy-cell__error-message">{{ errorMessage }}</view>
+      </view>
+      <!--right content END-->
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-cell',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import { computed, useSlots } from 'vue'
+import { useCell } from '../composables/useCell'
+import { useParent } from '../composables/useParent'
+import { FORM_KEY } from '../oxy-form/types'
+import { cellProps } from './types'
+import { isDef } from '../common/util'
+
+const props = defineProps(cellProps)
+const emit = defineEmits(['click'])
+
+// 获取插槽
+const slots = useSlots()
+
+const cell = useCell()
+
+const isBorder = computed(() => {
+  return Boolean(isDef(props.border) ? props.border : cell.border.value)
+})
+
+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
+})
+
+// 是否展示左侧部分
+const showLeft = computed(() => {
+  // 插槽优先级高于props
+  // 有icon插槽或icon属性
+  const hasIcon = slots.icon || props.icon
+  // 有title插槽或title属性
+  const hasTitle = (slots.title && props.useTitleSlot) || props.title
+  // 有label插槽或label属性
+  const hasLabel = slots.label || props.label
+
+  return hasIcon || hasTitle || hasLabel
+})
+
+/**
+ * @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.scss';
+</style>

package/components/oxy-cell/types.ts

@@ -0,0 +1,111 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeStringProp, makeNumericProp, numericProp } from '../common/props'
+
+import { type FormItemRule } from '../oxy-form/types'
+
+export const cellProps = {
+  ...baseProps,
+  /**
+   * 标题
+   */
+  title: String,
+  /**
+   * 右侧内容
+   */
+  value: makeNumericProp(''),
+  /**
+   * 图标类名
+   */
+  icon: String,
+  /**
+   * 图标大小
+   */
+  iconSize: numericProp,
+  /**
+   * 描述信息
+   */
+  label: String,
+  /**
+   * 是否为跳转链接
+   */
+  isLink: makeBooleanProp(false),
+  /**
+   * 跳转地址
+   */
+  to: String,
+  /**
+   * 跳转时是否替换栈顶页面
+   */
+  replace: makeBooleanProp(false),
+  /**
+   * 开启点击反馈，is-link 默认开启
+   */
+  clickable: makeBooleanProp(false),
+  /**
+   * 设置单元格大小，可选值：large
+   */
+  size: String,
+  /**
+   * 是否展示边框线
+   */
+  border: makeBooleanProp(void 0),
+  /**
+   * 设置左侧标题宽度
+   */
+  titleWidth: String,
+  /**
+   * 是否垂直居中，默认顶部居中
+   */
+  center: makeBooleanProp(false),
+  /**
+   * 是否必填
+   */
+  required: makeBooleanProp(false),
+  /**
+   * 表单属性，上下结构
+   */
+  vertical: makeBooleanProp(false),
+  /**
+   * 表单域 model 字段名，在使用表单校验功能的情况下，该属性是必填的
+   */
+  prop: String,
+  /**
+   * 表单验证规则，结合oxy-form组件使用
+   */
+  rules: makeArrayProp<FormItemRule>(),
+  /**
+   * icon 使用 slot 时的自定义样式
+   */
+  customIconClass: makeStringProp(''),
+  /**
+   * label 使用 slot 时的自定义样式
+   */
+  customLabelClass: makeStringProp(''),
+  /**
+   * value 使用 slot 时的自定义样式
+   */
+  customValueClass: makeStringProp(''),
+  /**
+   * title 使用 slot 时的自定义样式
+   */
+  customTitleClass: makeStringProp(''),
+  /**
+   * value 文字对齐方式，可选值：left、right、center
+   */
+  valueAlign: makeStringProp<'left' | 'right'>('right'),
+  /**
+   * 是否超出隐藏，显示省略号
+   */
+  ellipsis: makeBooleanProp(false),
+  /**
+   * 是否启用title插槽，默认启用，用来解决插槽传递时v-slot和v-if冲突问题。
+   * 问题见：https://github.com/dcloudio/uni-app/issues/4847
+   */
+  useTitleSlot: makeBooleanProp(true),
+  /**
+   * 必填标记位置，可选值：before（标签前）、after（标签后）
+   */
+  markerSide: makeStringProp<'before' | 'after'>('before')
+}
+
+export type CellProps = ExtractPropTypes<typeof cellProps>

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

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

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

@@ -0,0 +1,45 @@
+<template>
+  <view :class="['oxy-cell-group', border ? 'is-border' : '', customClass]" :style="customStyle">
+    <view v-if="title || value || useSlot" class="oxy-cell-group__title">
+      <!--左侧标题-->
+      <view class="oxy-cell-group__left">
+        <text v-if="!$slots.title">{{ title }}</text>
+        <slot v-else name="title"></slot>
+      </view>
+      <!--右侧标题-->
+      <view class="oxy-cell-group__right">
+        <text v-if="!$slots.value">{{ value }}</text>
+        <slot v-else name="value"></slot>
+      </view>
+    </view>
+    <view class="oxy-cell-group__body">
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-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.scss';
+</style>

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

@@ -0,0 +1,32 @@
+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('oxy-cell-group')
+
+export const cellGroupProps = {
+  ...baseProps,
+  /**
+   * 分组标题
+   */
+  title: String,
+  /**
+   * 分组右侧内容
+   */
+  value: String,
+  /**
+   * 分组启用插槽
+   */
+  useSlot: makeBooleanProp(false),
+  /**
+   * 是否展示边框线
+   */
+  border: makeBooleanProp(false)
+}
+
+export type CellGroupProps = ExtractPropTypes<typeof cellGroupProps>