@a2simcode/ui 0.0.69 → 0.0.71
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/barcode/index.d.ts +3 -3
- package/dist/components/barcode/src/barcode.vue.d.ts +1 -1
- package/dist/components/date/index.d.ts +98 -0
- package/dist/components/date/src/date.vue.d.ts +78 -0
- package/dist/components/index.d.ts +3 -1
- package/dist/components/slider/index.d.ts +3 -3
- package/dist/components/slider/src/slider.vue.d.ts +1 -1
- package/dist/components/tabs/index.d.ts +3 -3
- package/dist/components/tabs/src/tabs.vue.d.ts +1 -1
- package/dist/simcode-ui.es.js +5074 -4879
- package/dist/simcode-ui.umd.js +2 -2
- package/dist/stats.html +1 -1
- package/dist/ui.css +1 -1
- package/docs/components/date.md +76 -0
- package/docs/components/meta/comp.ts +230 -230
- package/docs/components/meta/date.ts +275 -0
- package/docs/components/meta/dynamic-layer.ts +99 -99
- package/docs/components/meta/form-item.ts +50 -50
- package/docs/components/meta/guid.ts +42 -42
- package/docs/components/meta/input.ts +411 -411
- package/docs/components/meta/number.ts +296 -296
- package/docs/components/meta/page.ts +67 -67
- package/docs/components/meta/radio.ts +55 -55
- package/docs/components/meta/table-panel.ts +178 -154
- package/docs/components/meta/table.ts +1 -1
- package/docs/components/page.md +15 -0
- package/docs/components/table-panel.md +19 -0
- package/docs/examples/date/basic.vue +73 -0
- package/docs/examples/date/default-value.vue +59 -0
- package/docs/examples/date/format.vue +75 -0
- package/docs/examples/date/range.vue +66 -0
- package/docs/examples/date/types.vue +79 -0
- package/docs/examples/page/log.vue +439 -0
- package/docs/examples/table/editable.vue +1 -0
- package/docs/examples/table-panel/filter.vue +12 -2
- package/docs/examples/table-panel/sub-table-lazy.vue +118 -0
- package/package.json +1 -1
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="demo-date-basic">
|
|
3
|
+
<div class="block">
|
|
4
|
+
<span class="demonstration">Default</span>
|
|
5
|
+
<j-date v-model="value1" placeholder="Pick a day" />
|
|
6
|
+
</div>
|
|
7
|
+
<div class="block">
|
|
8
|
+
<span class="demonstration">Picker with quick options</span>
|
|
9
|
+
<j-date
|
|
10
|
+
v-model="value2"
|
|
11
|
+
placeholder="Pick a day"
|
|
12
|
+
:disabled-date="disabledDate"
|
|
13
|
+
:shortcuts="shortcuts"
|
|
14
|
+
/>
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|
|
17
|
+
</template>
|
|
18
|
+
|
|
19
|
+
<script setup lang="ts">
|
|
20
|
+
import { ref } from 'vue'
|
|
21
|
+
|
|
22
|
+
const value1 = ref('')
|
|
23
|
+
const value2 = ref('')
|
|
24
|
+
|
|
25
|
+
const shortcuts = [
|
|
26
|
+
{
|
|
27
|
+
text: 'Today',
|
|
28
|
+
value: new Date(),
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
text: 'Yesterday',
|
|
32
|
+
value: () => {
|
|
33
|
+
const date = new Date()
|
|
34
|
+
date.setTime(date.getTime() - 3600 * 1000 * 24)
|
|
35
|
+
return date
|
|
36
|
+
},
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
text: 'A week ago',
|
|
40
|
+
value: () => {
|
|
41
|
+
const date = new Date()
|
|
42
|
+
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
|
|
43
|
+
return date
|
|
44
|
+
},
|
|
45
|
+
},
|
|
46
|
+
]
|
|
47
|
+
|
|
48
|
+
const disabledDate = (time: Date) => {
|
|
49
|
+
return time.getTime() > Date.now()
|
|
50
|
+
}
|
|
51
|
+
</script>
|
|
52
|
+
|
|
53
|
+
<style scoped>
|
|
54
|
+
.demo-date-basic {
|
|
55
|
+
display: flex;
|
|
56
|
+
flex-wrap: wrap;
|
|
57
|
+
}
|
|
58
|
+
.demo-date-basic .block {
|
|
59
|
+
padding: 30px 0;
|
|
60
|
+
text-align: center;
|
|
61
|
+
border-right: solid 1px var(--el-border-color);
|
|
62
|
+
flex: 1;
|
|
63
|
+
}
|
|
64
|
+
.demo-date-basic .block:last-child {
|
|
65
|
+
border-right: none;
|
|
66
|
+
}
|
|
67
|
+
.demo-date-basic .demonstration {
|
|
68
|
+
display: block;
|
|
69
|
+
color: var(--el-text-color-secondary);
|
|
70
|
+
font-size: 14px;
|
|
71
|
+
margin-bottom: 20px;
|
|
72
|
+
}
|
|
73
|
+
</style>
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="demo-date-default">
|
|
3
|
+
<div class="block">
|
|
4
|
+
<span class="demonstration">Default Value</span>
|
|
5
|
+
<j-date
|
|
6
|
+
v-model="value1"
|
|
7
|
+
select-type="date"
|
|
8
|
+
placeholder="Pick a day"
|
|
9
|
+
:default-value="new Date(2010, 9, 1)"
|
|
10
|
+
/>
|
|
11
|
+
</div>
|
|
12
|
+
<div class="block">
|
|
13
|
+
<span class="demonstration">Default Time for Range</span>
|
|
14
|
+
<j-date
|
|
15
|
+
v-model="value2"
|
|
16
|
+
select-type="datetimerange"
|
|
17
|
+
start-placeholder="Start Date"
|
|
18
|
+
end-placeholder="End Date"
|
|
19
|
+
:default-time="defaultTime"
|
|
20
|
+
/>
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
23
|
+
</template>
|
|
24
|
+
|
|
25
|
+
<script setup lang="ts">
|
|
26
|
+
import { ref } from 'vue'
|
|
27
|
+
|
|
28
|
+
const value1 = ref('')
|
|
29
|
+
const value2 = ref('')
|
|
30
|
+
|
|
31
|
+
const defaultTime = [
|
|
32
|
+
new Date(2000, 1, 1, 12, 0, 0),
|
|
33
|
+
new Date(2000, 2, 1, 8, 0, 0),
|
|
34
|
+
]
|
|
35
|
+
</script>
|
|
36
|
+
|
|
37
|
+
<style scoped>
|
|
38
|
+
.demo-date-default {
|
|
39
|
+
display: flex;
|
|
40
|
+
flex-wrap: wrap;
|
|
41
|
+
gap: 20px;
|
|
42
|
+
}
|
|
43
|
+
.demo-date-default .block {
|
|
44
|
+
padding: 30px 0;
|
|
45
|
+
text-align: center;
|
|
46
|
+
border-right: solid 1px var(--el-border-color);
|
|
47
|
+
flex: 1;
|
|
48
|
+
min-width: 300px;
|
|
49
|
+
}
|
|
50
|
+
.demo-date-default .block:last-child {
|
|
51
|
+
border-right: none;
|
|
52
|
+
}
|
|
53
|
+
.demo-date-default .demonstration {
|
|
54
|
+
display: block;
|
|
55
|
+
color: var(--el-text-color-secondary);
|
|
56
|
+
font-size: 14px;
|
|
57
|
+
margin-bottom: 20px;
|
|
58
|
+
}
|
|
59
|
+
</style>
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="demo-date-format">
|
|
3
|
+
<div class="block">
|
|
4
|
+
<span class="demonstration">Format</span>
|
|
5
|
+
<div class="demonstration-value">Value: {{ value1 }}</div>
|
|
6
|
+
<j-date
|
|
7
|
+
v-model="value1"
|
|
8
|
+
select-type="date"
|
|
9
|
+
placeholder="Pick a day"
|
|
10
|
+
format="YYYY/MM/DD"
|
|
11
|
+
value-format="YYYY-MM-DD"
|
|
12
|
+
/>
|
|
13
|
+
</div>
|
|
14
|
+
<div class="block">
|
|
15
|
+
<span class="demonstration">Timestamp</span>
|
|
16
|
+
<div class="demonstration-value">Value: {{ value2 }}</div>
|
|
17
|
+
<j-date
|
|
18
|
+
v-model="value2"
|
|
19
|
+
select-type="date"
|
|
20
|
+
placeholder="Pick a day"
|
|
21
|
+
format="YYYY/MM/DD"
|
|
22
|
+
value-format="x"
|
|
23
|
+
/>
|
|
24
|
+
</div>
|
|
25
|
+
<div class="block">
|
|
26
|
+
<span class="demonstration">Month Format</span>
|
|
27
|
+
<div class="demonstration-value">Value: {{ value3 }}</div>
|
|
28
|
+
<j-date
|
|
29
|
+
v-model="value3"
|
|
30
|
+
select-type="month"
|
|
31
|
+
placeholder="Pick a month"
|
|
32
|
+
format="MMM"
|
|
33
|
+
value-format="M"
|
|
34
|
+
/>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
</template>
|
|
38
|
+
|
|
39
|
+
<script setup lang="ts">
|
|
40
|
+
import { ref } from 'vue'
|
|
41
|
+
|
|
42
|
+
const value1 = ref('')
|
|
43
|
+
const value2 = ref('')
|
|
44
|
+
const value3 = ref('')
|
|
45
|
+
</script>
|
|
46
|
+
|
|
47
|
+
<style scoped>
|
|
48
|
+
.demo-date-format {
|
|
49
|
+
display: flex;
|
|
50
|
+
flex-wrap: wrap;
|
|
51
|
+
gap: 20px;
|
|
52
|
+
}
|
|
53
|
+
.demo-date-format .block {
|
|
54
|
+
padding: 30px 0;
|
|
55
|
+
text-align: center;
|
|
56
|
+
border-right: solid 1px var(--el-border-color);
|
|
57
|
+
flex: 1;
|
|
58
|
+
min-width: 300px;
|
|
59
|
+
}
|
|
60
|
+
.demo-date-format .block:last-child {
|
|
61
|
+
border-right: none;
|
|
62
|
+
}
|
|
63
|
+
.demo-date-format .demonstration {
|
|
64
|
+
display: block;
|
|
65
|
+
color: var(--el-text-color-secondary);
|
|
66
|
+
font-size: 14px;
|
|
67
|
+
margin-bottom: 20px;
|
|
68
|
+
}
|
|
69
|
+
.demo-date-format .demonstration-value {
|
|
70
|
+
display: block;
|
|
71
|
+
color: var(--el-text-color-primary);
|
|
72
|
+
font-size: 12px;
|
|
73
|
+
margin-bottom: 10px;
|
|
74
|
+
}
|
|
75
|
+
</style>
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="demo-date-range">
|
|
3
|
+
<div class="block">
|
|
4
|
+
<span class="demonstration">Date Range</span>
|
|
5
|
+
<j-date
|
|
6
|
+
v-model="value1"
|
|
7
|
+
select-type="daterange"
|
|
8
|
+
range-separator="To"
|
|
9
|
+
start-placeholder="Start date"
|
|
10
|
+
end-placeholder="End date"
|
|
11
|
+
/>
|
|
12
|
+
</div>
|
|
13
|
+
<div class="block">
|
|
14
|
+
<span class="demonstration">Datetime Range</span>
|
|
15
|
+
<j-date
|
|
16
|
+
v-model="value2"
|
|
17
|
+
select-type="datetimerange"
|
|
18
|
+
range-separator="To"
|
|
19
|
+
start-placeholder="Start date"
|
|
20
|
+
end-placeholder="End date"
|
|
21
|
+
/>
|
|
22
|
+
</div>
|
|
23
|
+
<div class="block">
|
|
24
|
+
<span class="demonstration">Month Range</span>
|
|
25
|
+
<j-date
|
|
26
|
+
v-model="value3"
|
|
27
|
+
select-type="monthrange"
|
|
28
|
+
range-separator="To"
|
|
29
|
+
start-placeholder="Start month"
|
|
30
|
+
end-placeholder="End month"
|
|
31
|
+
/>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
</template>
|
|
35
|
+
|
|
36
|
+
<script setup lang="ts">
|
|
37
|
+
import { ref } from 'vue'
|
|
38
|
+
|
|
39
|
+
const value1 = ref('')
|
|
40
|
+
const value2 = ref('')
|
|
41
|
+
const value3 = ref('')
|
|
42
|
+
</script>
|
|
43
|
+
|
|
44
|
+
<style scoped>
|
|
45
|
+
.demo-date-range {
|
|
46
|
+
display: flex;
|
|
47
|
+
flex-wrap: wrap;
|
|
48
|
+
gap: 20px;
|
|
49
|
+
}
|
|
50
|
+
.demo-date-range .block {
|
|
51
|
+
padding: 30px 0;
|
|
52
|
+
text-align: center;
|
|
53
|
+
border-right: solid 1px var(--el-border-color);
|
|
54
|
+
flex: 1;
|
|
55
|
+
min-width: 300px;
|
|
56
|
+
}
|
|
57
|
+
.demo-date-range .block:last-child {
|
|
58
|
+
border-right: none;
|
|
59
|
+
}
|
|
60
|
+
.demo-date-range .demonstration {
|
|
61
|
+
display: block;
|
|
62
|
+
color: var(--el-text-color-secondary);
|
|
63
|
+
font-size: 14px;
|
|
64
|
+
margin-bottom: 20px;
|
|
65
|
+
}
|
|
66
|
+
</style>
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="demo-date-types">
|
|
3
|
+
<div class="block">
|
|
4
|
+
<span class="demonstration">Week</span>
|
|
5
|
+
<j-date
|
|
6
|
+
v-model="value1"
|
|
7
|
+
select-type="week"
|
|
8
|
+
format="[Week] ww"
|
|
9
|
+
placeholder="Pick a week"
|
|
10
|
+
/>
|
|
11
|
+
</div>
|
|
12
|
+
<div class="block">
|
|
13
|
+
<span class="demonstration">Month</span>
|
|
14
|
+
<j-date
|
|
15
|
+
v-model="value2"
|
|
16
|
+
select-type="month"
|
|
17
|
+
placeholder="Pick a month"
|
|
18
|
+
/>
|
|
19
|
+
</div>
|
|
20
|
+
<div class="block">
|
|
21
|
+
<span class="demonstration">Year</span>
|
|
22
|
+
<j-date
|
|
23
|
+
v-model="value3"
|
|
24
|
+
select-type="year"
|
|
25
|
+
placeholder="Pick a year"
|
|
26
|
+
/>
|
|
27
|
+
</div>
|
|
28
|
+
<div class="block">
|
|
29
|
+
<span class="demonstration">Dates</span>
|
|
30
|
+
<j-date
|
|
31
|
+
v-model="value4"
|
|
32
|
+
select-type="dates"
|
|
33
|
+
placeholder="Pick one or more dates"
|
|
34
|
+
/>
|
|
35
|
+
</div>
|
|
36
|
+
<div class="block">
|
|
37
|
+
<span class="demonstration">Datetime</span>
|
|
38
|
+
<j-date
|
|
39
|
+
v-model="value5"
|
|
40
|
+
select-type="datetime"
|
|
41
|
+
placeholder="Select date and time"
|
|
42
|
+
/>
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
</template>
|
|
46
|
+
|
|
47
|
+
<script setup lang="ts">
|
|
48
|
+
import { ref } from 'vue'
|
|
49
|
+
|
|
50
|
+
const value1 = ref('')
|
|
51
|
+
const value2 = ref('')
|
|
52
|
+
const value3 = ref('')
|
|
53
|
+
const value4 = ref('')
|
|
54
|
+
const value5 = ref('')
|
|
55
|
+
</script>
|
|
56
|
+
|
|
57
|
+
<style scoped>
|
|
58
|
+
.demo-date-types {
|
|
59
|
+
display: flex;
|
|
60
|
+
flex-wrap: wrap;
|
|
61
|
+
gap: 20px;
|
|
62
|
+
}
|
|
63
|
+
.demo-date-types .block {
|
|
64
|
+
padding: 30px 0;
|
|
65
|
+
text-align: center;
|
|
66
|
+
border-right: solid 1px var(--el-border-color);
|
|
67
|
+
flex: 1;
|
|
68
|
+
min-width: 300px;
|
|
69
|
+
}
|
|
70
|
+
.demo-date-types .block:last-child {
|
|
71
|
+
border-right: none;
|
|
72
|
+
}
|
|
73
|
+
.demo-date-types .demonstration {
|
|
74
|
+
display: block;
|
|
75
|
+
color: var(--el-text-color-secondary);
|
|
76
|
+
font-size: 14px;
|
|
77
|
+
margin-bottom: 20px;
|
|
78
|
+
}
|
|
79
|
+
</style>
|