oxy-uni-ui 1.0.1

package/components/oxy-gap/oxy-gap.vue

@@ -0,0 +1,36 @@
+<template>
+  <view :class="`oxy-gap ${safeAreaBottom ? 'oxy-gap--safe' : ''} ${customClass}`" :style="rootStyle"></view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-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/oxy-gap/types.ts

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

package/components/oxy-grid/index.scss

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

package/components/oxy-grid/oxy-grid.vue

@@ -0,0 +1,106 @@
+<template>
+  <view :class="`oxy-grid ${customClass}`" :style="rootStyle">
+    <!-- 默认插入的 item -->
+    <slot />
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-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.scss';
+</style>

package/components/oxy-grid/types.ts

@@ -0,0 +1,50 @@
+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
+    hoverClass?: string
+  }
+}
+
+export const GRID_KEY: InjectionKey<GridProvide> = Symbol('oxy-grid')
+
+export const gridProps = {
+  ...baseProps,
+  /**
+   * 是否开启格子点击反馈
+   */
+  clickable: makeBooleanProp(false),
+  /**
+   * 是否将格子固定为正方形
+   */
+  square: makeBooleanProp(false),
+  /**
+   * 列数
+   */
+  column: Number,
+  /**
+   * 是否显示边框
+   */
+  border: makeBooleanProp(false),
+  /**
+   * 背景颜色
+   */
+  bgColor: makeStringProp(''),
+  /**
+   * 格子之间的间距，默认单位为px
+   */
+  gutter: Number,
+  /**
+   * 自定义内容区域hover-class
+   */
+  hoverClass: String
+}
+
+export type GridProps = ExtractPropTypes<typeof gridProps>

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

@@ -0,0 +1,148 @@
+@import "../common/abstracts/variable";
+@import "../common/abstracts/mixin";
+
+.oxy-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 m(hover) {
+        background-color: $-grid-item-hover-bg-dark !important;
+      }
+    }
+  }
+}
+
+@include b(grid-item) {
+  height: 100%;
+  font-size: $-grid-item-fs;
+  box-sizing: border-box;
+
+  position: relative;
+  float: left;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  overflow: hidden;
+
+  @include when(border) {
+    &::before {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 1px;
+      transform: scaleY(0.5);
+      background-color: $-grid-item-border-color;
+      top: 0;
+      left: 0;
+      z-index: 1;
+    }
+    &::after {
+      content: "";
+      position: absolute;
+      width: 1px;
+      transform: scaleX(0.5);
+      height: 100%;
+      background-color: $-grid-item-border-color;
+      bottom: 0;
+      right: 0;
+    }
+  }
+
+  // 第一行元素
+  @include when(first) {
+    &::after {
+      content: "";
+      position: absolute;
+      width: 1px;
+      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-block;
+    margin: 0 auto;
+  }
+
+  @include e(content) {
+    height: 100%;
+    padding: $-grid-item-padding;
+    background-color: $-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;
+      padding: 0;
+      height: 100%;
+    }
+
+    @include when(round) {
+      &::after {
+        content: " ";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 200%;
+        height: 200%;
+        border: 1px 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) {
+    margin-top: 8px;
+    font-size: $-grid-item-fs;
+    line-height: $-grid-item-fs;
+    @include lineEllipsis;
+  }
+}

package/components/oxy-grid-item/oxy-grid-item.vue

@@ -0,0 +1,176 @@
+<template>
+  <view :class="`oxy-grid-item ${border && !gutter ? itemClass : ''} ${customClass}`" @click="click" :style="`${style};${customStyle}`">
+    <view
+      :class="`oxy-grid-item__content ${square ? 'is-square' : ''} ${border && gutter > 0 ? 'is-round' : ''}`"
+      :style="gutterContentStyle"
+      :hover-class="hoverClass"
+    >
+      <slot>
+        <view class="oxy-grid-item__wrapper">
+          <oxy-badge v-bind="customBadgeProps">
+            <slot name="icon">
+              <oxy-icon :name="icon" :size="iconSize" :custom-class="customIcon" />
+            </slot>
+          </oxy-badge>
+        </view>
+        <slot name="text">
+          <view :class="`oxy-grid-item__text ${customText}`">{{ text }}</view>
+        </slot>
+      </slot>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'oxy-grid-item',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import OxyBadge from '../oxy-badge/oxy-badge.vue'
+import { onMounted, ref, watch, computed } from 'vue'
+import { useParent } from '../composables/useParent'
+import { GRID_KEY } from '../oxy-grid/types'
+import { deepAssign, isDef, isUndefined, omitBy } from '../common/util'
+import { gridItemProps } from './types'
+import type { BadgeProps } from '../oxy-badge/types'
+
+const props = defineProps(gridItemProps)
+const emit = defineEmits(['itemclick'])
+
+const style = ref<string>('')
+const gutterContentStyle = ref<string>('')
+const itemClass = ref<string>('')
+const gutter = ref<number>(0)
+const square = ref<boolean>(false)
+const border = ref<boolean>(true)
+const { parent: grid } = useParent(GRID_KEY)
+
+const childCount = computed(() => {
+  if (isDef(grid) && isDef(grid.children)) {
+    return grid.children.length
+  } else {
+    return 0
+  }
+})
+
+const customBadgeProps = computed(() => {
+  const badgeProps: Partial<BadgeProps> = deepAssign(
+    isDef(props.badgeProps) ? omitBy(props.badgeProps, isUndefined) : {},
+    omitBy(
+      {
+        max: props.max,
+        isDot: props.isDot,
+        modelValue: props.value,
+        type: props.type
+      },
+      isUndefined
+    )
+  )
+  return badgeProps
+})
+
+watch(
+  () => childCount.value,
+  () => {
+    if (!grid) return
+    const width = grid.props.column ? 100 / grid.props.column + '%' : 100 / (childCount.value || 1) + '%'
+    // 单独定义间隔
+    const gutterStyle = grid.props.gutter ? `padding:${grid.props.gutter}px ${grid.props.gutter}px 0 0; background-color: transparent;` : ''
+    // 单独定义正方形
+    const squareStyle = grid.props.square ? `background-color:transparent; padding-bottom: 0; padding-top:${width}` : ''
+    style.value = `width: ${width}; ${squareStyle || gutterStyle}`
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+onMounted(() => {
+  init()
+})
+
+function init() {
+  if (!grid) return
+  const children = grid.children
+  const width = grid.props.column ? 100 / grid.props.column + '%' : 100 / children.length + '%'
+  // 单独定义间隔
+  const gutterStyle = grid.props.gutter ? `padding:${grid.props.gutter}px ${grid.props.gutter}px 0 0; background-color: transparent;` : ''
+  // 单独定义正方形
+  const squareStyle = grid.props.square ? `background-color:transparent; padding-bottom: 0; padding-top:${width}` : ''
+  // 间隔+正方形
+  gutterContentStyle.value =
+    grid.props.gutter && grid.props.square
+      ? `right: ${grid.props.gutter}px; bottom:${grid.props.gutter}px;height: auto; background-color: ${grid.props.bgColor}`
+      : `background-color: ${grid.props.bgColor}`
+
+  border.value = Boolean(grid.props.border)
+  square.value = Boolean(grid.props.square)
+  gutter.value = Number(grid.props.gutter)
+  style.value = `width: ${width}; ${squareStyle || gutterStyle}`
+}
+
+function click() {
+  if (grid && !grid.props.clickable) return
+  const { url, linkType } = props
+  emit('itemclick')
+  if (url) {
+    switch (linkType) {
+      case 'navigateTo':
+        uni.navigateTo({
+          url
+        })
+        break
+      case 'reLaunch':
+        uni.reLaunch({
+          url
+        })
+        break
+      case 'redirectTo':
+        uni.redirectTo({
+          url
+        })
+        break
+      case 'switchTab':
+        uni.switchTab({
+          url
+        })
+        break
+      default:
+        console.error(`[oxy-design] warning(oxy-grid-item): linkType can not be ${linkType}`)
+        break
+    }
+  }
+}
+/**
+ * 设置样式
+ * @param classes
+ */
+function setiIemClass(classes: string) {
+  itemClass.value = classes
+}
+
+const hoverClass = computed(() => {
+  if (grid?.props.clickable) {
+    return grid.props.hoverClass ? grid.props.hoverClass : 'oxy-grid-item__content--hover'
+  }
+  return 'none'
+})
+
+defineExpose({
+  setiIemClass,
+  itemClass,
+  init
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

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

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