From 7c5abe958fe79e435f1a59b9c9444ab2ff3bfeaf Mon Sep 17 00:00:00 2001 From: anlyyao Date: Wed, 19 Jun 2024 17:08:44 +0800 Subject: [PATCH] chore: using useTNodeJSX to render content --- .../__test__/__snapshots__/demo.test.jsx.snap | 320 ++++++++++++++++++ src/col/__test__/index.test.jsx | 33 +- src/col/col.tsx | 18 +- src/col/demos/mobile.vue | 5 +- src/col/style/css.js | 1 + src/row/row.tsx | 15 +- src/row/style/css.js | 1 + 7 files changed, 366 insertions(+), 27 deletions(-) create mode 100644 src/col/__test__/__snapshots__/demo.test.jsx.snap create mode 100644 src/col/style/css.js create mode 100644 src/row/style/css.js diff --git a/src/col/__test__/__snapshots__/demo.test.jsx.snap b/src/col/__test__/__snapshots__/demo.test.jsx.snap new file mode 100644 index 000000000..cb103cad4 --- /dev/null +++ b/src/col/__test__/__snapshots__/demo.test.jsx.snap @@ -0,0 +1,320 @@ +// Vitest Snapshot v1 + +exports[`Col > Col baseVue demo works fine 1`] = ` +
+ +
+ +
+ + col-8 + +
+
+ + col-8 + +
+
+ + col-8 + +
+ +
+
+ +
+ + col-4 + +
+
+ + col-16 col-offset-4 + +
+ +
+
+ +
+ + col-12 col-offset-12 + +
+ +
+ +
+`; + +exports[`Col > Col mobileVue demo works fine 1`] = ` +
+

+ Layout 布局 +

+

+ 以规则的网格阵列来指导和规范页面中的版面布局以及信息分布，提高界面内布局的一致性，节约成本。 +

+
+
+

+ 01 组件类型 +

+

+ 基础用法 +

+
+
+ + +
+ +
+ + col-8 + +
+
+ + col-8 + +
+
+ + col-8 + +
+ +
+
+ +
+ + col-4 + +
+
+ + col-16 col-offset-4 + +
+ +
+
+ +
+ + col-12 col-offset-12 + +
+ +
+ + +
+
+
+
+ +

+ 在列元素之间增加间距 +

+
+
+ +
+ +
+ +
+ col-8 +
+ +
+
+ +
+ col-8 +
+ +
+
+ +
+ col-8 +
+ +
+ +
+ +
+
+
+`; + +exports[`Col > Col offsetVue demo works fine 1`] = ` +
+ +
+ +
+ col-8 +
+ +
+
+ +
+ col-8 +
+ +
+
+ +
+ col-8 +
+ +
+ +
+`; diff --git a/src/col/__test__/index.test.jsx b/src/col/__test__/index.test.jsx index ccbd1c91d..55b4d9dbf 100644 --- a/src/col/__test__/index.test.jsx +++ b/src/col/__test__/index.test.jsx @@ -14,10 +14,10 @@ describe('row', () => { it(':gutter', async () => { const wrapper = mount(Row, { props: { - gutter: '100', + gutter: 100, }, }); - expect(wrapper.attributes.style).toBe('margin-right: -50px; margin-left: -50px;'); + expect(wrapper.attributes().style).toBe('margin-right: -50px; margin-left: -50px;'); expect(wrapper.classes()).toContain(`${rowName}`); }); }); @@ -26,23 +26,28 @@ describe('row', () => { describe('col', () => { describe('props', () => { it(':offset', async () => { - const wrapper = mount(Col, { - props: { - offset: '2', - }, + const wrapper = mount(() => { + return ( + + + + ); }); - expect(wrapper.classes()).toContain(`${colName}--offset-2`); + const col = wrapper.findComponent(Col); + expect(col.classes()).toContain(`${colName}--offset-2`); }); it(':span', async () => { - const wrapper = mount(Col, { - props: { - span: '2', - content: TEXT, - }, + const wrapper = mount(() => { + return ( + + {TEXT} + + ); }); - expect(wrapper.classes()).toContain(`${colName}--2`); - expect(wrapper.text()).toBe(TEXT); + const col = wrapper.findComponent(Col); + expect(col.classes()).toContain(`${colName}--2`); + expect(col.text()).toBe(TEXT); }); }); }); diff --git a/src/col/col.tsx b/src/col/col.tsx index a6374f5fa..48a756763 100644 --- a/src/col/col.tsx +++ b/src/col/col.tsx @@ -1,16 +1,20 @@ import { computed, defineComponent, CSSProperties, inject } from 'vue'; import { convertUnit } from '../shared'; -import ColProps from './props'; +import props from './props'; import config from '../config'; import { rowInjectionKey } from '../row/constants'; +import { useTNodeJSX } from '../hooks/tnode'; +import { usePrefixClass } from '../hooks/useClass'; const { prefix } = config; const name = `${prefix}-col`; export default defineComponent({ name, - props: ColProps, - setup(props, { slots }) { + props, + setup(props) { + const renderTNodeJSX = useTNodeJSX(); + const componentName = usePrefixClass('col'); const { gutter } = inject(rowInjectionKey); // 设置col gutter style @@ -27,12 +31,12 @@ export default defineComponent({ // 设置col class const colClass = computed(() => { - let colClass = `${prefix}-col`; + let colClass = componentName.value; if (props.offset) { - colClass += ` ${prefix}-col--offset-${props.offset}`; + colClass += ` ${componentName.value}--offset-${props.offset}`; } if (props.span) { - colClass += ` ${prefix}-col--${props.span}`; + colClass += ` ${componentName.value}--${props.span}`; } return colClass; }); @@ -40,7 +44,7 @@ export default defineComponent({ return () => { return (
- {slots.default?.()} + {renderTNodeJSX('default')}
); }; diff --git a/src/col/demos/mobile.vue b/src/col/demos/mobile.vue index 2611e42fe..524e2b491 100644 --- a/src/col/demos/mobile.vue +++ b/src/col/demos/mobile.vue @@ -15,8 +15,11 @@ import BaseDemo from './base.vue'; import OffsetDemo from './offset.vue'; - diff --git a/src/col/style/css.js b/src/col/style/css.js new file mode 100644 index 000000000..6a9a4b132 --- /dev/null +++ b/src/col/style/css.js @@ -0,0 +1 @@ +import './index.css'; diff --git a/src/row/row.tsx b/src/row/row.tsx index a7621e810..aaea6e75c 100644 --- a/src/row/row.tsx +++ b/src/row/row.tsx @@ -1,16 +1,21 @@ import { computed, defineComponent, CSSProperties, provide } from 'vue'; import { convertUnit } from '../shared'; -import RowProps from './props'; +import props from './props'; import config from '../config'; import { rowInjectionKey } from './constants'; +import { useTNodeJSX } from '../hooks/tnode'; +import { usePrefixClass } from '../hooks/useClass'; const { prefix } = config; const name = `${prefix}-row`; export default defineComponent({ name, - props: RowProps, - setup(props, { slots }) { + props, + setup(props) { + const renderTNodeJSX = useTNodeJSX(); + const componentName = usePrefixClass('row'); + // row gutter style const style = computed(() => { const styles: CSSProperties = {}; @@ -30,8 +35,8 @@ export default defineComponent({ return () => { return ( -
- {slots.default?.()} +
+ {renderTNodeJSX('default')}
); }; diff --git a/src/row/style/css.js b/src/row/style/css.js new file mode 100644 index 000000000..6a9a4b132 --- /dev/null +++ b/src/row/style/css.js @@ -0,0 +1 @@ +import './index.css';