.storybook/preview.js

@@ -32,7 +32,8 @@ Vue.prototype.$LWC_UI = {
 	iconMap: IconMap,
 	formats: {
 		active: ({ cellValue }) => {
-			return cellValue === true ? '正常' : '禁止'
+			console.log('cellValue:', cellValue)
+			return cellValue ? '正常' : '禁止'
 		}
 	}
 }

CHANGELOG.md

+## [0.1.31](http://git.leadwaycloud.com/package/lwc-ui-components/compare/v0.1.30...v0.1.31) (2021-06-21)
+
+
+### Bug Fixes
+
+* 修复lwc-data-display-descriptions组件项value=false时获取默认值错误 ([27b987d](http://git.leadwaycloud.com/package/lwc-ui-components/commits/27b987d3ecaf49c9ba690ed7e1aa34c6d3c7e3b1))
+* 修复lwc-select-dialog lwc-select-down-table 多选状态默认值不显示错误 ([7c3d687](http://git.leadwaycloud.com/package/lwc-ui-components/commits/7c3d6879b980db71f3d83c89ea2006b171147145))
+
+
+### Features
+
+* 新增lwc-tags-list标签列表组件 lwc-data-display-detail-content-item-list详情内容列表组件 ([841675b](http://git.leadwaycloud.com/package/lwc-ui-components/commits/841675b81f3e7a06f7f38ec61b64883048e53e68))
+* 优化 formatter，返回 data 对象 ([368cf34](http://git.leadwaycloud.com/package/lwc-ui-components/commits/368cf34459b93688ed6c2eea76b8932b56d2f86b))
+* 优化组件 events，支持合并外部自定义事件 ([a3ad39e](http://git.leadwaycloud.com/package/lwc-ui-components/commits/a3ad39ef0872557da7b808de943b58637dfede4b))
+* 组件lwc-select-dialog/lwc-select-down-table新增initConfig字段,适用于type为int类型数据显示 ([b6b0536](http://git.leadwaycloud.com/package/lwc-ui-components/commits/b6b05363c85e5d50810ed9c60f707ef2b1642ffc))
+
+
+### Performance Improvements
+
+* lwc-data-display-detail-header组件样式优化 ([82c16ac](http://git.leadwaycloud.com/package/lwc-ui-components/commits/82c16ac344b5a226876306c51a3ef0aa858e6493))
+
+
+
 ## [0.1.30](http://git.leadwaycloud.com/package/lwc-ui-components/compare/v0.1.29...v0.1.30) (2021-06-09)
 
 

package-lock.json

 {
 	"name": "@package/lwc-ui-components",
-	"version": "0.1.31",
+	"version": "0.1.32",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {

package.json

 {
   "name": "@package/lwc-ui-components",
-  "version": "0.1.31",
+  "version": "0.1.32",
   "private": false,
   "license": "UNLICENSED",
   "scripts": {

src/index.js

@@ -40,6 +40,7 @@ import LwcDashboardRankingVmallSearch from './stories/dashboard/ranking-vmall-se
 import LwcDashboardTaskProgress from './stories/dashboard/task-progress/index.js';
 import LwcDashboardTicketOverview from './stories/dashboard/ticket-overview/index.js';
 import LwcDashboardVmallTaskList from './stories/dashboard/vmall-task-list/index.js';
+import LwcDataDisplayBadgeText from './stories/data-display/badge-text/index.js';
 import LwcDataDisplayBasicList from './stories/data-display/basic-list/index.js';
 import LwcDataDisplayDescriptions from './stories/data-display/descriptions/index.js';
 import LwcDataDisplayDetailContentItem from './stories/data-display/detail-content-item/index.js';
@@ -125,6 +126,7 @@ const components = [
   LwcDashboardTaskProgress,
   LwcDashboardTicketOverview,
   LwcDashboardVmallTaskList,
+  LwcDataDisplayBadgeText,
   LwcDataDisplayBasicList,
   LwcDataDisplayDescriptions,
   LwcDataDisplayDetailContentItem,
@@ -195,7 +197,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '0.1.30',
+  version: '0.1.31',
   install,
   LwcBasicButton,
   LwcBasicButtonIcon,
@@ -237,6 +239,7 @@ export default {
   LwcDashboardTaskProgress,
   LwcDashboardTicketOverview,
   LwcDashboardVmallTaskList,
+  LwcDataDisplayBadgeText,
   LwcDataDisplayBasicList,
   LwcDataDisplayDescriptions,
   LwcDataDisplayDetailContentItem,

src/stories/changelog.stories.mdx

@@ -8,6 +8,25 @@
 `新特性`
 `非兼容性更新`
 
+---
+### **v0.1.32 20210626**
+
+#### 新增
+
+- 新增 `lwc-data-display-badge-text` 组件
+- 新增 `lwc-table-basic` footer left button 配置示例
+- 新增 `lwc-select-group` 组件
+
+#### Bug修复
+
+- 修复 `lwc-table-basic` 组件不配置分页时， padding 样式问题
+
+#### 优化
+
+- 调整 `lwc-data-display-descriptions` column 默认 3 => 2
+
+---
+
 ---
 ### **v0.1.31 20210621**
 

src/stories/checkbox/group/index.js

+import LwcCheckboxGroup from './src/index.js';
+
+/* istanbul ignore next */
+LwcCheckboxGroup.install = function(Vue) {
+	Vue.component(LwcCheckboxGroup.name, LwcCheckboxGroup);
+};
+
+export default LwcCheckboxGroup;

src/stories/checkbox/group/index.stories.js

+import LwcCheckboxGroup from './src/index.js';
+export default {
+	title: "Design System/Checkbox/复选框组",
+	component: LwcCheckboxGroup,
+	argTypes: {},
+	decorators: [() => ({ template: '<el-col class="bg-white p-4"><story/></el-col>' })]
+};
+
+const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { LwcCheckboxGroup },
+	data() {
+		return {
+			value: ['sum']
+		}
+	},
+	render(h) {
+		const _this = this;
+		return h('lwc-checkbox-group', {
+			props: {
+				value: this.value,
+				options: [
+					{
+						label: "sum",
+						text: "周日"
+					},
+					{
+						label: "mon",
+						text: "周一"
+					},
+					{
+						label: "tue",
+						text: "周二"
+					},
+					{
+						label: "wec",
+						text: "周三"
+					},
+					{
+						label: "thu",
+						text: "周四"
+					},
+					{
+						label: "fri",
+						text: "周五"
+					},
+					{
+						label: "sat",
+						text: "周六"
+					}
+				]
+			},
+			on: {
+				"update:value"(val) {
+					_this.value = val;
+				}
+			}
+		})
+	},
+});
+
+export const Default = Template.bind({});
+Default.args = {};

src/stories/checkbox/group/src/index.js

+
+function renderItems(h, _vm, items) {
+	let VNodes = []
+
+	items.forEach(item => {
+		VNodes.push(h('el-checkbox', {
+			props: {
+				key: item.label,
+				label: item.label,
+				disable: item.disable,
+				border: item.border,
+				size: item.size
+			}
+		}, item.text))
+	});
+
+	return VNodes;
+}
+
+export default {
+	name: "lwc-checkbox-group",
+	props: {
+		value: {
+			type: [String, Number, Array, Object, Boolean],
+			require: true
+		},
+		size: {
+			type: String
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		min: {
+			type: Number
+		},
+		max: {
+			type: Number
+		},
+		options: {
+			type: Array,
+			require: true
+		}
+	},
+	render(h) {
+		const { value, size, disabled, min, max, options } = this.$props;
+		const _this = this;
+		return h('el-checkbox-group', {
+			props: {
+				value: value,
+				size, disabled, min, max
+			},
+			on: {
+				input(val) {
+					_this.$emit('update:value', val)
+				}
+			}
+		}, renderItems(h, this, options))
+	}
+}

src/stories/data-display/badge-text/index.js

+import LwcDataDisplayBadgeText from './src/index.js';
+
+/* istanbul ignore next */
+LwcDataDisplayBadgeText.install = function(Vue) {
+	Vue.component(LwcDataDisplayBadgeText.name, LwcDataDisplayBadgeText);
+};
+
+export default LwcDataDisplayBadgeText;

src/stories/data-display/badge-text/index.stories.js

+import LwcDataDisplayBadgeText from './src/index.js';
+export default {
+	title: "Design System/Data Display/文本徽标",
+	component: LwcDataDisplayBadgeText,
+	argTypes: {},
+	decorators: [() => ({ template: '<el-col class="bg-white p-4"><story/></el-col>' })]
+};
+
+const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { LwcDataDisplayBadgeText },
+	template: '<lwc-data-display-badge-text v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	value: "启用",
+	badgeConfig: {
+		type: 'success'
+	}
+};
+
+export const FullParasm = Template.bind({});
+FullParasm.storyName = "完全参数"
+FullParasm.args = {
+	value: true,
+	options: [{
+		label: '启用',
+		type: 'success',
+		value: true
+	}, {
+		label: '禁用',
+		type: 'danger',
+		value: false
+	}],
+	visible: () => true,
+	className: [],
+	textClassName: [],
+	badgeConfig: {
+		type: 'success'
+	}
+};

src/stories/data-display/badge-text/src/index.js

+function renderItem(h, _vm, { text, className }) {
+	return h('div', {
+		class: className
+	}, text)
+}
+
+export default {
+	name: 'lwc-data-display-badge-text',
+	props: {
+		value: {
+			type: [String, Number, Boolean],
+			require: true
+		},
+		options: {
+			type: Array,
+			default() { return  [] }
+		},
+		visible: {
+			type: Function,
+			default: () => true
+		},
+		className: {
+			type: Array,
+			default() { return [] }
+		},
+		textClassName: {
+			type: Array,
+			default() { return [] }
+		},
+		badgeConfig: {
+			type: Object,
+			default() { return {} }
+		}
+	},
+	render(h) {
+		const { value, options, badgeConfig, className, textClassName } = this.$props;
+		let renderText = value;
+		let badgeType = badgeConfig.type || '';
+		if (options && options.length > 0) {
+			const find = _.find(options, (i) => i.value === value)
+			renderText = find.label;
+			badgeType = find.type;
+		}
+
+		let _badgeConfig = { "is-dot": true }
+		if (badgeConfig) _badgeConfig = { ..._badgeConfig, ...badgeConfig }
+
+		return h('div', {
+			class: ['lwc-data-display-badge-text', 'flex', 'items-center', ...className]
+		}, [
+			h('el-badge', {
+				class: badgeConfig.className ? ['flex', 'mr-1', ...badgeConfig.className] : ['flex', 'mr-1'],
+				props: {
+					..._badgeConfig,
+					type: badgeType
+				}
+			}),
+			renderItem(h, this, { text: renderText, className: textClassName })
+		]);
+	}
+}
+

src/stories/data-display/descriptions/src/index.js

@@ -80,7 +80,7 @@ export default {
 			{
 				props: {
 					bordered: true,
-					column: 3,
+					column: 2,
 					size: "default",
 					layout: "horizontal",
 					colon: true,

src/stories/table/basic/index.stories.js

@@ -164,6 +164,21 @@ DefaultList.args = {
 		pagerConfig: {
 			currentPage: 1,
 			pageSize: 5,
+			className: 'relative',
+			slots: {
+				left: ({ $grid }, h) => {
+					const { $createElement } = $grid
+					return $createElement('div', {
+						class: ['left-4', 'absolute', 'top-2/4', '-translate-y-1/2'],
+						style: { left: '12px' }
+					}, [
+						$createElement('el-button', {
+						}, '设为已读'),
+						$createElement('el-button', {
+						}, '全部已读'),
+					])
+				}
+			}
 		},
 		editConfig: {
 			trigger: "click",

src/stories/table/basic/src/index.js

@@ -281,7 +281,8 @@ const renderTable = (h, contentConfig, formConfig, _vm) => {
 			},
 			class: [{
 				'lwc-table-basic': true,
-				hidden: _vm.currentGridType !== "list"
+				hidden: _vm.currentGridType !== "list",
+				'pb-4': !_vm.showPager // 如果未启用footer 分页
 			}],
 			ref: _vm.gridTable,
 			on: {

src/theme-chalk/lib/index.css

-@charset "UTF-8";.lwc-table-border-none .el-table::before,.lwc-table-outline-border-none .el-table::before,body,html{background-color:unset}body,html{font-size:14px!important}.el-avatar>img{width:100%}.lwc-table-border-none .el-table td,.lwc-table-border-none th.is-leaf{border-bottom:none!important}.lwc-table-header-pt-0 .el-table th{padding-top:0}.ant-descriptions .ant-descriptions-title{margin-bottom:1rem!important}.lwc-table-basic.vxe-grid.is--loading:before{background-color:unset!important}.lwc-table-basic.vxe-grid .vxe-table .vxe-loading{display:none!important}.el-card.dashboard-card .el-card__header{padding-top:0;padding-bottom:0;height:58px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.el-card.dashboard-card .el-card__header>div{width:100%}.el-card.is-auto-size{height:100%}.el-card.is-auto-size .el-card__body{height:calc(100% - 58px);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.el-card.is-auto-size .el-card__body>div{width:100%;height:100%}.el-card.is-auto-size_no_header{height:100%}.el-card.is-auto-size_no_header .el-card__body{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.el-card.is-auto-size_no_header .el-card__body>div{width:100%;height:100%}.lwc-layout-card .el-card__header{padding:0}.lwc-layout-card .el-card__header>div{height:50px;padding-left:18px}
\ No newline at end of file
+@charset "UTF-8";.lwc-table-border-none .el-table::before,.lwc-table-outline-border-none .el-table::before,body,html{background-color:unset}body,html{font-size:14px!important}.el-avatar>img{width:100%}.lwc-table-border-none .el-table td,.lwc-table-border-none th.is-leaf{border-bottom:none!important}.lwc-table-header-pt-0 .el-table th{padding-top:0}.ant-descriptions .ant-descriptions-title{margin-bottom:1rem!important}.lwc-table-basic.vxe-grid.is--loading:before{background-color:unset!important}.lwc-table-basic.vxe-grid .vxe-table .vxe-loading{display:none!important}.lwc-data-display-badge-text .el-badge sup{top:0!important;height:12px;width:12px}.el-card.dashboard-card .el-card__header{padding-top:0;padding-bottom:0;height:58px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.el-card.dashboard-card .el-card__header>div{width:100%}.el-card.is-auto-size{height:100%}.el-card.is-auto-size .el-card__body{height:calc(100% - 58px);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.el-card.is-auto-size .el-card__body>div{width:100%;height:100%}.el-card.is-auto-size_no_header{height:100%}.el-card.is-auto-size_no_header .el-card__body{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.el-card.is-auto-size_no_header .el-card__body>div{width:100%;height:100%}.lwc-layout-card .el-card__header{padding:0}.lwc-layout-card .el-card__header>div{height:50px;padding-left:18px}
\ No newline at end of file

src/theme-chalk/src/default.scss

@@ -42,10 +42,25 @@ html {
 	margin-bottom: 1rem !important;
 }
 
+/* 覆盖 vxe-table 默认 loading 样式 */
 .lwc-table-basic.vxe-grid.is--loading:before {
 	background-color: unset !important;
 }
 
 .lwc-table-basic.vxe-grid .vxe-table .vxe-loading {
 	display: none !important;
+}
+
+/* 覆盖 vxe-table footer left slot 样式 */
+// .lwc-table-basic .vxe-pager .vxe-pager--left-wrapper {
+// 	float: left;
+// }
+
+/* 覆盖 ant-badge sup 样式，因为其默认影响了 el-badge 样式 */
+.lwc-data-display-badge-text .el-badge {
+	sup {
+		top: 0 !important;
+		height: 12px;
+		width: 12px;
+	}
 }
\ No newline at end of file