refactor(grid): move to script setup (#3037)

src/config.json

@@ -184,6 +184,7 @@
           "name": "Grid",
           "cName": "宫格",
           "desc": "用于分隔成等宽区块进行页面导航",
+          "setup": true,
           "author": "haiweilian"
         },
         {
@@ -192,6 +193,7 @@
           "cName": "宫格子组件",
           "desc": "",
           "show": false,
+          "setup": true,
           "author": "haiweilian"
         },
         {

src/packages/__VUE/grid/doc.en-US.md

@@ -77,6 +77,18 @@ app.use(GridItem)
 | --- | --- | --- |
 | click | Emitted when component is clicked | event: Event |
 
+### Types version
+
+The component exports the following type definitions:
+
+```js
+import type {
+  GridDirection,
+  GridProps,
+  GridInstance
+} from '@nutui/nutui';
+```
+
 ## Theming
 
 ### CSS Variables

src/packages/__VUE/grid/doc.md

@@ -77,6 +77,18 @@ app.use(GridItem)
 | --- | --- | --- |
 | click | 点击格子时触发 | event: Event |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  GridDirection,
+  GridProps,
+  GridInstance
+} from '@nutui/nutui';
+```
+
 ## 主题定制
 
 ### 样式变量

src/packages/__VUE/grid/doc.taro.md

@@ -77,6 +77,18 @@ app.use(GridItem)
 | --- | --- | --- |
 | click | 点击格子时触发 | event: Event |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  GridDirection,
+  GridProps,
+  GridInstance
+} from '@nutui/nutui-taro';
+```
+
 ## 主题定制
 
 ### 样式变量

src/packages/__VUE/grid/grid.taro.vue

@@ -0,0 +1,54 @@
+<template>
+  <view :class="rootClass" :style="rootStyle">
+    <slot></slot>
+  </view>
+</template>
+<script setup lang="ts">
+import { pxCheck, useChildren } from '@/packages/utils'
+import { GRID_KEY, type GridDirection } from './types'
+import { computed, type CSSProperties } from 'vue'
+
+defineOptions({
+  name: 'NutGrid'
+})
+
+export type GridProps = Partial<{
+  columnNum: string | number
+  border: boolean
+  gutter: string | number
+  center: boolean
+  square: boolean
+  reverse: boolean
+  direction: GridDirection
+  clickable: boolean
+}>
+
+const props = withDefaults(defineProps<GridProps>(), {
+  columnNum: 4,
+  border: true,
+  gutter: 0,
+  center: true,
+  square: false,
+  reverse: false,
+  clickable: false
+})
+
+const { linkChildren } = useChildren(GRID_KEY)
+linkChildren({ props })
+
+const rootClass = computed(() => {
+  const prefixCls = 'nut-grid'
+  return {
+    [prefixCls]: true,
+    [`${prefixCls}--border`]: props.border && !props.gutter
+  }
+})
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (props.gutter) {
+    style.paddingLeft = pxCheck(props.gutter)
+  }
+  return style
+})
+</script>

src/packages/__VUE/grid/grid.vue

@@ -0,0 +1,54 @@
+<template>
+  <view :class="rootClass" :style="rootStyle">
+    <slot></slot>
+  </view>
+</template>
+<script setup lang="ts">
+import { pxCheck, useChildren } from '@/packages/utils'
+import { GRID_KEY, type GridDirection } from './types'
+import { computed, type CSSProperties } from 'vue'
+
+defineOptions({
+  name: 'NutGrid'
+})
+
+export type GridProps = Partial<{
+  columnNum: string | number
+  border: boolean
+  gutter: string | number
+  center: boolean
+  square: boolean
+  reverse: boolean
+  direction: GridDirection
+  clickable: boolean
+}>
+
+const props = withDefaults(defineProps<GridProps>(), {
+  columnNum: 4,
+  border: true,
+  gutter: 0,
+  center: true,
+  square: false,
+  reverse: false,
+  clickable: false
+})
+
+const { linkChildren } = useChildren(GRID_KEY)
+linkChildren({ props })
+
+const rootClass = computed(() => {
+  const prefixCls = 'nut-grid'
+  return {
+    [prefixCls]: true,
+    [`${prefixCls}--border`]: props.border && !props.gutter
+  }
+})
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (props.gutter) {
+    style.paddingLeft = pxCheck(props.gutter)
+  }
+  return style
+})
+</script>

src/packages/__VUE/grid/index.taro.ts

@@ -0,0 +1,13 @@
+import Grid from './grid.taro.vue'
+import type { ComponentPublicInstance } from 'vue'
+import { withInstall } from '@/packages/utils'
+
+withInstall(Grid)
+
+export type { GridProps } from './grid.taro.vue'
+
+export type { GridDirection } from './types'
+
+export type GridInstance = ComponentPublicInstance & InstanceType<typeof Grid>
+
+export { Grid, Grid as default }

src/packages/__VUE/grid/index.ts

@@ -0,0 +1,13 @@
+import Grid from './grid.vue'
+import type { ComponentPublicInstance } from 'vue'
+import { withInstall } from '@/packages/utils'
+
+withInstall(Grid)
+
+export type { GridProps } from './grid.vue'
+
+export type { GridDirection } from './types'
+
+export type GridInstance = ComponentPublicInstance & InstanceType<typeof Grid>
+
+export { Grid, Grid as default }

src/packages/__VUE/grid/types.ts

@@ -0,0 +1,2 @@
+export const GRID_KEY = Symbol('grid')
+export type GridDirection = 'horizontal' | 'vertical'

src/packages/__VUE/griditem/grid-item.taro.vue

@@ -0,0 +1,65 @@
+<template>
+  <view class="nut-grid-item" :style="rootStyle" @click="handleClick">
+    <view :class="contentClass">
+      <slot></slot>
+      <view class="nut-grid-item__text">
+        <template v-if="text">{{ text }}</template>
+        <slot v-else name="text"></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties } from 'vue'
+import { pxCheck, useParent } from '@/packages/utils'
+import { GRID_KEY } from '../grid/types'
+
+defineOptions({
+  name: 'NutGridItem'
+})
+
+export type GridItemProps = Partial<{
+  text: string
+}>
+
+withDefaults(defineProps<GridItemProps>(), {})
+
+const emit = defineEmits(['click'])
+
+const { parent: parentObj, index } = useParent(GRID_KEY)
+const parent = parentObj?.props || {}
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {
+    flexBasis: `${100 / +parent.columnNum}%`
+  }
+  if (parent.square) {
+    style.paddingTop = `${100 / +parent.columnNum}%`
+  } else if (parent.gutter) {
+    style.paddingRight = pxCheck(parent.gutter)
+    if (index.value >= +parent.columnNum) {
+      style.marginTop = pxCheck(parent.gutter)
+    }
+  }
+  return style
+})
+
+const contentClass = computed(() => {
+  const prefixCls = `nut-grid-item__content`
+  return {
+    [`${prefixCls}`]: true,
+    [`${prefixCls}--border`]: parent.border,
+    [`${prefixCls}--surround`]: parent.border && parent.gutter,
+    [`${prefixCls}--center`]: parent.center,
+    [`${prefixCls}--square`]: parent.square,
+    [`${prefixCls}--reverse`]: parent.reverse,
+    [`${prefixCls}--${parent.direction}`]: !!parent.direction,
+    [`${prefixCls}--clickable`]: parent.clickable
+  }
+})
+
+const handleClick = (event: Event) => {
+  emit('click', event)
+}
+</script>