refactor(layout): move to script setup (#2951)

src/config.json

@@ -185,6 +185,7 @@
           "cName": "布局",
           "type": "component",
           "show": true,
+          "setup": true,
           "desc": "简便地创建布局",
           "author": "undo"
         },
@@ -196,6 +197,7 @@
           "type": "component",
           "show": false,
           "taro": true,
+          "setup": true,
           "exportEmpty": true,
           "desc": "布局组件Col",
           "author": "undo"
@@ -208,6 +210,7 @@
           "type": "component",
           "show": false,
           "taro": true,
+          "setup": true,
           "exportEmpty": true,
           "desc": "布局组件Row",
           "author": "undo"

src/packages/__VUE/col/__tests__/index.spec.ts

@@ -1,5 +1,5 @@
-import Col from '../index.vue';
-import Row from '../../row/index.vue';
+import Col from '../';
+import Row from '../../row';
 import { mount } from '@vue/test-utils';
 
 // 测试用例

src/packages/__VUE/col/col.taro.vue

@@ -0,0 +1,40 @@
+<template>
+  <view :class="classes" :style="style">
+    <slot></slot>
+  </view>
+</template>
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import { LAYOUT_KEY } from '../layout/types';
+
+defineOptions({
+  name: 'NutCol'
+});
+
+export type ColProps = Partial<{
+  span: string | number;
+  offset: string | number;
+}>;
+
+const props = withDefaults(defineProps<ColProps>(), {
+  span: 24,
+  offset: 0
+});
+
+const prefixCls = 'nut-col';
+const gutter = inject(LAYOUT_KEY) as number;
+const classes = computed(() => {
+  return {
+    [prefixCls]: true,
+    [prefixCls + '-gutter']: gutter,
+    ['nut-col-' + props.span]: true,
+    ['nut-col-offset-' + props.offset]: true
+  };
+});
+const style = computed(() => {
+  return {
+    paddingLeft: gutter / 2 + 'px',
+    paddingRight: gutter / 2 + 'px'
+  };
+});
+</script>

src/packages/__VUE/col/col.vue

@@ -0,0 +1,40 @@
+<template>
+  <view :class="classes" :style="style">
+    <slot></slot>
+  </view>
+</template>
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import { LAYOUT_KEY } from '../layout/types';
+
+defineOptions({
+  name: 'NutCol'
+});
+
+export type ColProps = Partial<{
+  span: string | number;
+  offset: string | number;
+}>;
+
+const props = withDefaults(defineProps<ColProps>(), {
+  span: 24,
+  offset: 0
+});
+
+const prefixCls = 'nut-col';
+const gutter = inject(LAYOUT_KEY) as number;
+const classes = computed(() => {
+  return {
+    [prefixCls]: true,
+    [prefixCls + '-gutter']: gutter,
+    ['nut-col-' + props.span]: true,
+    ['nut-col-offset-' + props.offset]: true
+  };
+});
+const style = computed(() => {
+  return {
+    paddingLeft: gutter / 2 + 'px',
+    paddingRight: gutter / 2 + 'px'
+  };
+});
+</script>

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

@@ -0,0 +1,11 @@
+import Col from './col.taro.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(Col);
+
+export type { ColProps } from './col.taro.vue';
+
+export type ColInstance = ComponentPublicInstance & InstanceType<typeof Col>;
+
+export { Col, Col as default };

src/packages/__VUE/col/index.ts

@@ -0,0 +1,11 @@
+import Col from './col.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(Col);
+
+export type { ColProps } from './col.vue';
+
+export type ColInstance = ComponentPublicInstance & InstanceType<typeof Col>;
+
+export { Col, Col as default };

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

@@ -59,3 +59,16 @@ The Layout component provides a 24-column grid, by adding the span attribute on
 | Event | Description | callback parameter |
 | --- | --- | --- |
 | click | Triggered when clicked | `event: MouseEvent` |
+
+### Types version
+
+The component exports the following type definitions:
+
+```js
+import type {
+  RowProps,
+  RowInstance,
+  ColProps,
+  ColInstance
+} from '@nutui/nutui';
+```

src/packages/__VUE/layout/doc.md

@@ -59,3 +59,16 @@ Layout 组件提供 24 列栅格，通过在 Col 上添加 span 属性设置列
 | 事件名 | 说明 | 回调参数 |
 | --- | --- | --- |
 | click | 点击时触发 | `event: MouseEvent` |
+
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  RowProps,
+  RowInstance,
+  ColProps,
+  ColInstance
+} from '@nutui/nutui';
+```

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

@@ -59,3 +59,16 @@ Layout 组件提供 24 列栅格，通过在 Col 上添加 span 属性设置列
 | 事件名 | 说明 | 回调参数 |
 | --- | --- | --- |
 | click | 点击时触发 | `event: MouseEvent` |
+
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  RowProps,
+  RowInstance,
+  ColProps,
+  ColInstance
+} from '@nutui/nutui-taro';
+```

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

@@ -0,0 +1,9 @@
+import Layout from './layout.taro.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(Layout);
+
+export type LayoutInstance = ComponentPublicInstance & InstanceType<typeof Layout>;
+
+export { Layout, Layout as default };

src/packages/__VUE/layout/index.ts

@@ -0,0 +1,9 @@
+import Layout from './layout.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(Layout);
+
+export type LayoutInstance = ComponentPublicInstance & InstanceType<typeof Layout>;
+
+export { Layout, Layout as default };

src/packages/__VUE/row/__tests__/index.spec.ts

@@ -1,4 +1,4 @@
-import Row from '../index.vue';
+import Row from '../';
 import { mount } from '@vue/test-utils';
 
 test('should add "nut-row-flex-nowrap" class when wrap prop is false', () => {

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

@@ -0,0 +1,11 @@
+import Row from './row.taro.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(Row);
+
+export type { RowProps } from './row.taro.vue';
+
+export type RowInstance = ComponentPublicInstance & InstanceType<typeof Row>;
+
+export { Row, Row as default };

src/packages/__VUE/row/index.ts

@@ -0,0 +1,11 @@
+import Row from './row.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(Row);
+
+export type { RowProps } from './row.vue';
+
+export type RowInstance = ComponentPublicInstance & InstanceType<typeof Row>;
+
+export { Row, Row as default };