refactor(cell): move to script setup (#3015)

src/config.json

@@ -80,6 +80,7 @@
           "name": "Cell",
           "cName": "单元格",
           "desc": "展示列表",
+          "setup": true,
           "author": "richard1015"
         },
         {
@@ -88,6 +89,7 @@
           "cName": "单元格组件",
           "show": false,
           "desc": "展示分组列表",
+          "setup": true,
           "author": "richard1015"
         },
         {

src/packages/__VUE/cell/cell.taro.vue

@@ -0,0 +1,96 @@
+<template>
+  <view :class="classes" :style="baseStyle" @click="handleClick">
+    <slot>
+      <view v-if="$slots.icon" class="nut-cell__icon">
+        <slot name="icon"></slot>
+      </view>
+      <view v-if="title || subTitle || $slots.title" class="nut-cell__title">
+        <template v-if="subTitle">
+          <slot name="title">
+            <view class="title">{{ title }}</view>
+          </slot>
+          <view class="nut-cell__title-desc">{{ subTitle }}</view>
+        </template>
+        <template v-else>
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </template>
+      </view>
+      <view
+        v-if="desc || $slots.desc"
+        class="nut-cell__value"
+        :class="{ 'nut-cell__value--alone': !title && !subTitle && !$slots.title }"
+        :style="descStyle"
+      >
+        <slot name="desc">
+          {{ desc }}
+        </slot>
+      </view>
+      <slot name="link">
+        <Right v-if="isLink" class="nut-cell__link"></Right>
+      </slot>
+    </slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, type CSSProperties } from 'vue'
+import { pxCheck } from '@/packages/utils/pxCheck'
+import { Right } from '@nutui/icons-vue-taro'
+import type { CellSize } from './types'
+
+defineOptions({
+  name: 'NutCell'
+})
+
+export type CellProps = Partial<{
+  title: string
+  subTitle: string
+  desc: string
+  descTextAlign: string
+  isLink: boolean
+  roundRadius: string | number
+  center: boolean
+  size: CellSize
+}>
+
+const props = withDefaults(defineProps<CellProps>(), {
+  title: '',
+  subTitle: '',
+  desc: '',
+  descTextAlign: 'right',
+  isLink: false,
+  roundRadius: '',
+  center: false,
+  size: 'normal'
+})
+
+const emit = defineEmits(['click'])
+
+const classes = computed(() => {
+  const prefixCls = 'nut-cell'
+  return {
+    [prefixCls]: true,
+    [`${prefixCls}--clickable`]: props.isLink,
+    [`${prefixCls}--center`]: props.center,
+    [`${prefixCls}--large`]: props.size === 'large'
+  }
+})
+
+const baseStyle = computed(() => {
+  return {
+    borderRadius: pxCheck(props.roundRadius)
+  }
+})
+
+const descStyle = computed(() => {
+  return {
+    textAlign: props.descTextAlign
+  } as CSSProperties
+})
+
+const handleClick = (event: Event) => {
+  emit('click', event)
+}
+</script>

src/packages/__VUE/cell/cell.vue

@@ -0,0 +1,118 @@
+<template>
+  <view :class="classes" :style="baseStyle" @click="handleClick">
+    <slot>
+      <view v-if="$slots.icon" class="nut-cell__icon">
+        <slot name="icon"></slot>
+      </view>
+      <view v-if="title || subTitle || $slots.title" class="nut-cell__title">
+        <template v-if="subTitle">
+          <slot name="title">
+            <view class="title">{{ title }}</view>
+          </slot>
+          <view class="nut-cell__title-desc">{{ subTitle }}</view>
+        </template>
+        <template v-else>
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </template>
+      </view>
+      <view
+        v-if="desc || $slots.desc"
+        class="nut-cell__value"
+        :class="{ 'nut-cell__value--alone': !title && !subTitle && !$slots.title }"
+        :style="descStyle"
+      >
+        <slot name="desc">
+          {{ desc }}
+        </slot>
+      </view>
+      <slot name="link">
+        <Right v-if="isLink || to" class="nut-cell__link"></Right>
+      </slot>
+    </slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, type CSSProperties } from 'vue'
+import { useRouter } from '@/packages/utils/useRoute'
+import { pxCheck } from '@/packages/utils/pxCheck'
+import { Right } from '@nutui/icons-vue'
+import type { CellSize } from './types'
+
+defineOptions({
+  name: 'NutCell'
+})
+
+export type CellProps = Partial<{
+  title: string
+  subTitle: string
+  desc: string
+  descTextAlign: string
+  isLink: boolean
+  roundRadius: string | number
+  center: boolean
+  size: CellSize
+  /**
+   * @deprecated It will be removed in next major version.
+   */
+  to: string | object
+  /**
+   * @deprecated It will be removed in next major version.
+   */
+  replace: boolean
+  /**
+   * @deprecated It will be removed in next major version.
+   */
+  url: string
+}>
+
+const props = withDefaults(defineProps<CellProps>(), {
+  title: '',
+  subTitle: '',
+  desc: '',
+  descTextAlign: 'right',
+  isLink: false,
+  roundRadius: '',
+  center: false,
+  size: 'normal',
+  replace: false,
+  url: ''
+})
+
+const emit = defineEmits(['click'])
+
+const classes = computed(() => {
+  const prefixCls = 'nut-cell'
+  return {
+    [prefixCls]: true,
+    [`${prefixCls}--clickable`]: props.isLink || props.to,
+    [`${prefixCls}--center`]: props.center,
+    [`${prefixCls}--large`]: props.size === 'large'
+  }
+})
+const router = useRouter()
+
+const baseStyle = computed(() => {
+  return {
+    borderRadius: pxCheck(props.roundRadius)
+  }
+})
+
+const descStyle = computed(() => {
+  return {
+    textAlign: props.descTextAlign
+  } as CSSProperties
+})
+
+const handleClick = (event: Event) => {
+  emit('click', event)
+
+  if (props.to && router) {
+    router[props.replace ? 'replace' : 'push'](props.to)
+  } else if (props.url) {
+    props.replace ? location.replace(props.url) : (location.href = props.url)
+  }
+}
+</script>

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

@@ -105,6 +105,18 @@ You can center the left and right contents of the cell vertically through the 'c
 | title | Custom `title` slot |
 | desc | Custom `desc` slot |
 
+### Types version
+
+The component exports the following type definitions:
+
+```js
+import type {
+  CellSize,
+  CellProps,
+  CellInstance
+} from '@nutui/nutui';
+```
+
 ## Theming
 
 ### CSS Variables

src/packages/__VUE/cell/doc.md

@@ -105,6 +105,18 @@ app.use(CellGroup)
 | title | 自定义 `title` 标题区域 |
 | desc | 自定义 `desc` 描述区域 |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  CellSize,
+  CellProps,
+  CellInstance
+} from '@nutui/nutui';
+```
+
 ## 主题定制
 
 ### 样式变量

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

@@ -102,6 +102,18 @@ app.use(CellGroup)
 | title | 自定义 `title` 标题区域 |
 | desc | 自定义 `desc` 描述区域 |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  CellSize,
+  CellProps,
+  CellInstance
+} from '@nutui/nutui-taro';
+```
+
 ## 主题定制
 
 ### 样式变量

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

@@ -0,0 +1,13 @@
+import Cell from './cell.taro.vue'
+import type { ComponentPublicInstance } from 'vue'
+import { withInstall } from '@/packages/utils'
+
+withInstall(Cell)
+
+export type { CellProps } from './cell.taro.vue'
+
+export type { CellSize } from './types'
+
+export type CellInstance = ComponentPublicInstance & InstanceType<typeof Cell>
+
+export { Cell, Cell as default }