Skip to content

Commit 2a37624

Browse files
tolkingtolking
authored
releases v1.0.0
breaking changes - Table|Crud|Form: remove global config - Layout: reimplement the KeepAlive - Layout: remove the props `fixed-main` - Layout: remove the slots `main-top` `main-bottom` - InputTag: change the trigger default value `space` to `enter` - Select|TreeSelect|Descriptions: rename the slot parameter data to item - rename `useScreenSize` to `useSharedBreakpoint` feat - Card: add a new component Card - Descriptions: add `render` and `renderLabel` in columns - Checkbox|Radio|Select|TreeSelect: cancel the conversion of the data - Layout: support transition form RouteMeta - Layout: add default slot to custom RouterView - Select|TreeSelect: sync props change from element-plus - add composables function `useBreakpointWidth` to get reactive Dialog width - sync css var change from element-plus - sync ComponentSize change from element-plus - styles: add cjs form SSR - styles: compressed CSS by cssnano fix - Form: style error when used gutter - Layout: the KeepAlive and Transition do not work ### migration guide Compare [0.18.3...v1.0.0](v0.18.3...v1.0.0) To support both Transition and KeepAlive, the Layout component had to be refactored. The original internal card-like has been removed. - It is recommended to use the new Card component to wrap your pages. - If you don't care about KeepAlive, you can use default slots to override RouterView to implement global Card wrapping, [demo](https://github.com/tolking/element-pro-components/blob/main/demo/Layout/router-view.vue). The global configuration has been removed, it is recommended to use related components to pass parameters or internationalization.
2 parents 2edd28b + c3659a6 commit 2a37624

131 files changed

Lines changed: 2287 additions & 1268 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.browserslistrc‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎.postcssrc.json‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,7 @@
33
"plugins": {
44
"postcss-import": {},
55
"postcss-preset-env": {
6-
"stage": 1,
7-
"importFrom": [
8-
"./node_modules/element-plus/theme-chalk/el-var.css",
9-
"./src/styles/vars.css"
10-
]
6+
"stage": 1
117
},
128
"autoprefixer": {}
139
}

‎CHANGELOG.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,47 @@
11
# Changelog
22

3+
## 1.0.0
4+
5+
breaking changes
6+
7+
- Table|Crud|Form: remove global config
8+
- Layout: reimplement the KeepAlive
9+
- Layout: remove the props `fixed-main`
10+
- Layout: remove the slots `main-top` `main-bottom`
11+
- InputTag: change the trigger default value `space` to `enter`
12+
- Select|TreeSelect|Descriptions: rename the slot parameter data to item
13+
- rename `useScreenSize` to `useSharedBreakpoint`
14+
15+
feat
16+
17+
- Card: add a new component Card
18+
- Descriptions: add `render` and `renderLabel` in columns
19+
- Checkbox|Radio|Select|TreeSelect: cancel the conversion of the data
20+
- Layout: support transition form RouteMeta
21+
- Layout: add default slot to custom RouterView
22+
- Select|TreeSelect: sync props change from element-plus
23+
- add composables function `useBreakpointWidth` to get reactive Dialog width
24+
- sync css var change from element-plus
25+
- sync ComponentSize change from element-plus
26+
- styles: add cjs form SSR
27+
- styles: compressed CSS by cssnano
28+
29+
fix
30+
31+
- Form: style error when used gutter
32+
- Layout: the KeepAlive and Transition do not work
33+
34+
### migration guide
35+
36+
Compare [0.18.3...v1.0.0](https://github.com/tolking/element-pro-components/compare/v0.18.3...v1.0.0)
37+
38+
To support both Transition and KeepAlive, the Layout component had to be refactored. The original internal card-like has been removed.
39+
40+
- It is recommended to use the new Card component to wrap your pages.
41+
- If you don't care about KeepAlive, you can use default slots to override RouterView to implement global Card wrapping, [demo](https://github.com/tolking/element-pro-components/blob/main/demo/Layout/router-view.vue).
42+
43+
The global configuration has been removed, it is recommended to use related components to pass parameters or internationalization.
44+
345
## 0.18.3
446

547
feat

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
[![License](https://img.shields.io/github/license/tolking/element-pro-components.svg?style=flat-square&logo=opensourceinitiative)](https://github.com/tolking/element-pro-components/blob/master/LICENSE)
22
[![Latest tag via npm](https://img.shields.io/npm/v/element-pro-components.svg?style=flat-square&logo=npm)](https://npmjs.com/package/element-pro-components)
3-
[![npm bundle size](https://img.shields.io/bundlephobia/min/element-pro-components?label=size&logo=npm&style=flat-square)](https://npmjs.com/package/element-pro-components)
3+
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/element-pro-components?label=minzip&logo=npm&style=flat-square)](https://npmjs.com/package/element-pro-components)
44
[![Npm Last Updated](https://img.shields.io/badge/dynamic/json.svg?style=flat-square&logo=npm&label=last%20release&url=http%3A%2F%2Fregistry.npmjs.org%2Felement-pro-components&query=$.time.modified)](https://www.npmjs.com/package/element-pro-components)
55
[![Github last commit](https://img.shields.io/github/last-commit/tolking/element-pro-components.svg?&style=flat-square&logo=github)](https://github.com/tolking/element-pro-components/commits)
66
[![Latest tag via GitHub](https://img.shields.io/github/v/tag/tolking/element-pro-components.svg?sort=semver&style=flat-square&logo=github)](https://github.com/tolking/element-pro-components/tags)
77

8-
# element-pro-components (rc)
8+
# element-pro-components
99

1010
> a component library for Vue 3 base on element-plus
1111

‎build/build-styles.ts‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,27 @@
1-
import { readFile } from 'fs'
1+
import { readFile, readFileSync } from 'fs'
22
import fg from 'fast-glob'
33
import postcss from 'postcss'
44
import postcssImport from 'postcss-import'
55
import postcssPresetEnv from 'postcss-preset-env'
66
import autoprefixer from 'autoprefixer'
7+
import cssnano from 'cssnano'
78
import { writeFileRecursive, copyFileRecursive, toAbsolute } from './utils'
89

10+
function transformSSR(input: string) {
11+
const fileContent = readFileSync(input, 'utf-8')
12+
return fileContent.replace(/import\s*'(.*)'/g, (_, item) => {
13+
let path = item
14+
15+
if (/^element-plus/.test(item)) {
16+
path = item.replace(/\/es\//g, '/lib/') + '.js'
17+
} else if (!/\.css$/.test(item)) {
18+
path = `${path}.cjs`
19+
}
20+
21+
return `require('${path}')`
22+
})
23+
}
24+
925
function transform(input: string) {
1026
const outDir = input.replace(/\/src\//, '/lib/').replace(/\.ts$/, '.js')
1127

@@ -14,21 +30,19 @@ function transform(input: string) {
1430
if (err) return console.error(err)
1531
postcss([
1632
postcssImport,
17-
postcssPresetEnv({
18-
stage: 1,
19-
importFrom: [
20-
toAbsolute('../node_modules/element-plus/theme-chalk/el-var.css'),
21-
toAbsolute('../src/styles/vars.css'),
22-
],
23-
}),
33+
postcssPresetEnv({ stage: 1 }),
2434
autoprefixer,
35+
cssnano({ preset: 'default' }),
2536
])
2637
.process(css, { from: input, to: outDir })
2738
.then((result) => {
2839
writeFileRecursive(outDir, result.css)
2940
})
3041
})
3142
} else {
43+
const SSROutDir = outDir.replace(/\.js$/, '.cjs')
44+
const SSRStyles = transformSSR(input)
45+
writeFileRecursive(SSROutDir, SSRStyles)
3246
copyFileRecursive(input, outDir)
3347
}
3448
}

‎demo/Breadcrumb/separator.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<template>
2+
<pro-breadcrumb separator=">" />
3+
</template>

‎demo/Card/base.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<pro-card header="header">
3+
Content
4+
</pro-card>
5+
</template>

‎demo/Card/direction.vue‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<template>
2+
<pro-radio-button
3+
v-model="direction"
4+
:data="data"
5+
/>
6+
<pro-card :direction="direction">
7+
<pro-card
8+
:span="12"
9+
shadow="never"
10+
>
11+
span-12
12+
</pro-card>
13+
<pro-card
14+
:span="6"
15+
shadow="never"
16+
>
17+
span-6
18+
</pro-card>
19+
<pro-card
20+
:span="3"
21+
shadow="never"
22+
>
23+
span-3
24+
</pro-card>
25+
</pro-card>
26+
</template>
27+
28+
<script>
29+
import { defineComponent, ref } from 'vue'
30+
31+
export default defineComponent({
32+
setup() {
33+
const direction = ref('row')
34+
const data = [
35+
{ label: 'row', value: 'row' },
36+
{ label: 'row-reverse', value: 'row-reverse' },
37+
{ label: 'column', value: 'column' },
38+
{ label: 'column-reverse', value: 'column-reverse' },
39+
]
40+
41+
return { direction, data }
42+
},
43+
})
44+
</script>

‎demo/Card/ghost.vue‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<template>
2+
<el-switch v-model="ghost" />
3+
<pro-card :ghost="ghost">
4+
Content
5+
</pro-card>
6+
</template>
7+
8+
<script>
9+
import { defineComponent, ref } from 'vue'
10+
11+
export default defineComponent({
12+
setup() {
13+
const ghost = ref(true)
14+
15+
return { ghost }
16+
},
17+
})
18+
</script>

‎demo/Card/layout.vue‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<template>
2+
<pro-card ghost>
3+
<pro-card
4+
:span="24"
5+
shadow="never"
6+
>
7+
span-24
8+
</pro-card>
9+
<pro-card
10+
:span="12"
11+
shadow="never"
12+
>
13+
span-12
14+
</pro-card>
15+
<pro-card
16+
:span="6"
17+
shadow="never"
18+
>
19+
span-6
20+
</pro-card>
21+
</pro-card>
22+
<pro-card
23+
:gutter="20"
24+
ghost
25+
>
26+
<pro-card
27+
:span="12"
28+
shadow="never"
29+
>
30+
span-12
31+
</pro-card>
32+
<pro-card
33+
:span="6"
34+
shadow="never"
35+
>
36+
span-6
37+
</pro-card>
38+
<pro-card
39+
:span="6"
40+
shadow="never"
41+
>
42+
span-6
43+
</pro-card>
44+
</pro-card>
45+
<pro-card ghost>
46+
<pro-card
47+
:span="8"
48+
shadow="never"
49+
>
50+
span-8
51+
</pro-card>
52+
<pro-card shadow="never">
53+
auto
54+
</pro-card>
55+
</pro-card>
56+
<pro-card ghost>
57+
<pro-card shadow="never">
58+
auto
59+
</pro-card>
60+
<pro-card
61+
:span="8"
62+
shadow="never"
63+
>
64+
span-8
65+
</pro-card>
66+
</pro-card>
67+
<pro-card ghost>
68+
<pro-card
69+
shadow="never"
70+
style="max-width: 200px"
71+
>
72+
max-width-200px
73+
</pro-card>
74+
<pro-card shadow="never">
75+
auto
76+
</pro-card>
77+
</pro-card>
78+
<pro-card ghost>
79+
<pro-card
80+
shadow="never"
81+
style="flex: 0.4"
82+
>
83+
flex-0.4
84+
</pro-card>
85+
<pro-card shadow="never">
86+
flex-1
87+
</pro-card>
88+
</pro-card>
89+
</template>

0 commit comments

Comments
 (0)