Skip to content

Commit

Permalink
feat(space): 新增space组件（#2386） (#2584)
Browse files Browse the repository at this point in the history
  • Loading branch information
@yi-boide
yi-boide authored Oct 18, 2023
1 parent 0a0a8a8 commit 90976e9
Show file tree
Hide file tree
Showing 14 changed files with 986 additions and 0 deletions.
3 changes: 3 additions & 0 deletions packages/nutui-taro-demo/src/basic/pages/space/index.config.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default {
navigationBarTitleText: 'Space'
};
60 changes: 60 additions & 0 deletions packages/nutui-taro-demo/src/basic/pages/space/index.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<template>
<view class="demo" :class="{ web: env === 'WEB' }">
<Header v-if="env === 'WEB'" />
<h2>基础用法</h2>
<nut-cell>
<nut-space>
<nut-button type="primary">按钮</nut-button>
<nut-button type="primary">按钮</nut-button>
<nut-button type="primary">按钮</nut-button>
<nut-button type="primary">按钮</nut-button>
</nut-space>
</nut-cell>
<h2>垂直排列</h2>
<nut-cell>
<nut-space direction="vertical" fill>
<nut-button type="primary" block>按钮</nut-button>
<nut-button type="primary" block>按钮</nut-button>
<nut-button type="primary" block>按钮</nut-button>
<nut-button type="primary" block>按钮</nut-button>
</nut-space>
</nut-cell>
<h2>自定义间距</h2>
<nut-cell>
<nut-space :gutter="20">
<nut-button type="primary">按钮</nut-button>
<nut-button type="primary">按钮</nut-button>
<nut-button type="primary">按钮</nut-button>
<nut-button type="primary">按钮</nut-button>
</nut-space>
</nut-cell>
<nut-cell :style="{ '--nut-space-gap': '30px' }">
<nut-space>
<nut-button type="primary">按钮</nut-button>
<nut-button type="primary">按钮</nut-button>
<nut-button type="primary">按钮</nut-button>
<nut-button type="primary">按钮</nut-button>
</nut-space>
</nut-cell>
<h2>自动换行</h2>
<nut-cell>
<nut-space wrap>
<nut-button type="primary" block>按钮</nut-button>
<nut-button type="primary" block>按钮</nut-button>
<nut-button type="primary" block>按钮</nut-button>
<nut-button type="primary" block>按钮</nut-button>
<nut-button type="primary" block>按钮</nut-button>
<nut-button type="primary" block>按钮</nut-button>
<nut-button type="primary" block>按钮</nut-button>
<nut-button type="primary" block>按钮</nut-button>
</nut-space>
</nut-cell>
</view>
</template>

<script setup>
import Taro from '@tarojs/taro';
import Header from '../../../components/header.vue';
const env = Taro.getEnv();
console.log(111);
</script>
11 changes: 11 additions & 0 deletions src/config.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,17 @@
"tarodoc": true,
"type": "component",
"author": "yangxiaolu"
},
{
"version": "1.0.0",
"name": "Space",
"cName": "间距",
"desc": "设置元素之间的间距。",
"show": true,
"taro": true,
"tarodoc": true,
"type": "component",
"author": "Marvin"
}
]
},
Expand Down
33 changes: 33 additions & 0 deletions src/packages/__VUE/space/__tests__/__snapshots__/space.spec.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`space: should match snapshot 1`] = `
"<div class=\\"nut-space nut-space-horizontal\\">
<div class=\\"nut-space-item\\">
<view class=\\"nut-button nut-button--default nut-button--normal nut-button--round\\">
<view class=\\"nut-button__wrap\\">
<!--v-if-->
<!--v-if-->
<view class=\\"\\">按钮</view>
</view>
</view>
</div>
<div class=\\"nut-space-item\\">
<view class=\\"nut-button nut-button--default nut-button--normal nut-button--round\\">
<view class=\\"nut-button__wrap\\">
<!--v-if-->
<!--v-if-->
<view class=\\"\\">按钮</view>
</view>
</view>
</div>
<div class=\\"nut-space-item\\">
<view class=\\"nut-button nut-button--default nut-button--normal nut-button--round\\">
<view class=\\"nut-button__wrap\\">
<!--v-if-->
<!--v-if-->
<view class=\\"\\">按钮</view>
</view>
</view>
</div>
</div>"
`;
101 changes: 101 additions & 0 deletions src/packages/__VUE/space/__tests__/space.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
import { mount } from '@vue/test-utils';
import Space from '../index.vue';
import NutButton from '../../button/index.vue';
import { h } from 'vue';

const prefixCls = 'nut-space';

test('space: should match snapshot', () => {
const wrapper = mount(Space, {
slots: {
default: [h(NutButton, () => '按钮'), h(NutButton, () => '按钮'), h(NutButton, () => '按钮')]
}
});
expect(wrapper.html()).toMatchSnapshot();
});

test('space: with props direction', () => {
const wrapper = mount(Space, {
props: {
direction: 'vertical'
},
slots: {
default: [h(NutButton, () => '按钮'), h(NutButton, () => '按钮'), h(NutButton, () => '按钮')]
}
});
expect(wrapper.classes()).toContain(`${prefixCls}-vertical`);
});

test('space: with props align', () => {
const wrapper = mount(Space, {
props: {
align: 'end'
},
slots: {
default: [h(NutButton, () => '按钮'), h(NutButton, () => '按钮'), h(NutButton, () => '按钮')]
}
});
expect(wrapper.classes()).toContain(`${prefixCls}-align-end`);
});

test('space: with props justify', () => {
const wrapper = mount(Space, {
props: {
justify: 'center'
},
slots: {
default: [h(NutButton, () => '按钮'), h(NutButton, () => '按钮'), h(NutButton, () => '按钮')]
}
});
expect(wrapper.classes()).toContain(`${prefixCls}-justify-center`);
});

test('space: with props wrap', () => {
const wrapper = mount(Space, {
props: {
wrap: true
},
slots: {
default: [h(NutButton, () => '按钮'), h(NutButton, () => '按钮'), h(NutButton, () => '按钮')]
}
});
expect(wrapper.classes()).toContain(`${prefixCls}-wrap`);
});

test('space: with props fill', () => {
const wrapper = mount(Space, {
props: {
fill: true
},
slots: {
default: [h(NutButton, () => '按钮'), h(NutButton, () => '按钮'), h(NutButton, () => '按钮')]
}
});
expect(wrapper.classes()).toContain(`${prefixCls}-fill`);
});

test('space: with props gutter number', () => {
const wrapper = mount(Space, {
props: {
gutter: 20
},
slots: {
default: [h(NutButton, () => '按钮'), h(NutButton, () => '按钮'), h(NutButton, () => '按钮')]
}
});
const nutSpaceItem = wrapper.find('.nut-space-item');
expect(nutSpaceItem.attributes('style')).toBe('margin-right: 20px;');
});

test('space: with props gutter string', () => {
const wrapper = mount(Space, {
props: {
gutter: '1rem'
},
slots: {
default: [h(NutButton, () => '按钮'), h(NutButton, () => '按钮'), h(NutButton, () => '按钮')]
}
});
const nutSpaceItem = wrapper.find('.nut-space-item');
expect(nutSpaceItem.attributes('style')).toBe('margin-right: 1rem;');
});
74 changes: 74 additions & 0 deletions src/packages/__VUE/space/demo.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
<template>
<div class="demo full">
<h2>{{ translate('title1') }}</h2>
<nut-cell>
<nut-space>
<nut-button type="primary">{{ translate('btn') }}</nut-button>
<nut-button type="primary">{{ translate('btn') }}</nut-button>
<nut-button type="primary">{{ translate('btn') }}</nut-button>
<nut-button type="primary">{{ translate('btn') }}</nut-button>
</nut-space>
</nut-cell>
<h2>{{ translate('title2') }}</h2>
<nut-cell>
<nut-space direction="vertical" fill>
<nut-button type="primary" block>{{ translate('btn') }}</nut-button>
<nut-button type="primary" block>{{ translate('btn') }}</nut-button>
<nut-button type="primary" block>{{ translate('btn') }}</nut-button>
</nut-space>
</nut-cell>
<h2>{{ translate('title3') }}</h2>
<nut-cell>
<nut-space :gutter="20">
<nut-button type="primary" block>{{ translate('btn') }}</nut-button>
<nut-button type="primary" block>{{ translate('btn') }}</nut-button>
<nut-button type="primary" block>{{ translate('btn') }}</nut-button>
</nut-space>
</nut-cell>
<nut-cell :style="{ '--nut-space-gap': '30px' }">
<nut-space>
<nut-button type="primary" block>{{ translate('btn') }}</nut-button>
<nut-button type="primary" block>{{ translate('btn') }}</nut-button>
<nut-button type="primary" block>{{ translate('btn') }}</nut-button>
</nut-space>
</nut-cell>
<h2>{{ translate('title4') }}</h2>
<nut-cell>
<nut-space wrap>
<nut-button type="primary" block>{{ translate('btn') }}</nut-button>
<nut-button type="primary" block>{{ translate('btn') }}</nut-button>
<nut-button type="primary" block>{{ translate('btn') }}</nut-button>
<nut-button type="primary" block>{{ translate('btn') }}</nut-button>
<nut-button type="primary" block>{{ translate('btn') }}</nut-button>
<nut-button type="primary" block>{{ translate('btn') }}</nut-button>
<nut-button type="primary" block>{{ translate('btn') }}</nut-button>
<nut-button type="primary" block>{{ translate('btn') }}</nut-button>
</nut-space>
</nut-cell>
</div>
</template>

<script lang="ts" setup>
import { createComponent } from '@/packages/utils/create';
const { translate } = createComponent('cell');
import { useTranslate } from '@/sites/assets/util/useTranslate';
const initTranslate = () =>
useTranslate({
'zh-CN': {
title1: '基础用法：默认间距为 8px',
title2: '垂直排列',
title3: '自定义间距',
title4: '自动换行',
btn: '按钮'
},
'en-US': {
title1: 'Grammar and Usage：The default spacing is 8px',
title2: 'Vertical Alignment',
title3: 'Custom spacing',
title4: 'word wrap',
btn: 'Button'
}
});
initTranslate();
</script>
Loading

0 comments on commit 90976e9

Please sign in to comment.