stellar-ui-v2 1.40.20 → 1.40.21

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.
@@ -1,106 +1,106 @@
1
- <template>
2
- <picker-view
3
- style="height: 450rpx; width: 100%"
4
- indicator-style="height: 43px"
5
- immediate-change
6
- :value="selectedIndex"
7
- @change="onChange"
8
- >
9
- <picker-view-column v-for="(col, index) in dataOptions" :key="index">
10
- <view class="time-item" v-for="(item, i) in col" :key="item.title">
11
- <text>
12
- {{ dateUnit ? item.title : item.value }}
13
- </text>
14
- </view>
15
- </picker-view-column>
16
- </picker-view>
17
- </template>
18
-
19
- <script>
20
- import { getDateOptions, getFormatStr, getNowDate } from './defaultDate';
21
- export default {
22
- name: 'date-time',
23
- props: {
24
- value: { type: [String, Number, Array, null], default: () => [] },
25
- mode: { type: [String, null], default: () => 'date' },
26
- minDate: { type: [Number, String, Date, null], default: () => null },
27
- maxDate: { type: [Number, String, Date, null], default: () => null },
28
- dateUnit: { type: [Boolean, null], default: () => true },
29
- },
30
- data() {
31
- return {
32
- dataOptions: [],
33
- selectedValue: [],
34
- selectedIndex: [],
35
- };
36
- },
37
- watch: {
38
- value: {
39
- handler(v) {
40
- let values = [];
41
- if (Array.isArray(v)) {
42
- values = [...v];
43
- } else {
44
- const str = ['date', 'datetime', 'month'].includes(this.mode) ? 'YYYY MM DD HH mm ss' : 'HH mm ss';
45
- const value = utils.dayjs(v).format(str).split(' ');
46
- values = value.map((item) => Number(item));
47
- }
48
- this.selectedValue = values;
49
- },
50
- immediate: true,
51
- },
52
- minDate() {
53
- this.initOptions();
54
- this.initSelectIndex();
55
- },
56
- maxDate() {
57
- this.initOptions();
58
- this.initSelectIndex();
59
- },
60
- },
61
- created() {
62
- this.initOptions();
63
- this.initSelectIndex();
64
- },
65
- methods: {
66
- initOptions(values = this.selectedValue) {
67
- const { options, value } = getDateOptions(values, this.mode, this.minDate, this.maxDate);
68
- this.dataOptions = options;
69
- },
70
- initSelectIndex(values = this.selectedValue) {
71
- this.$nextTick(() => {
72
- const indexs = [];
73
- const _values = getNowDate(values, this.mode);
74
- this.dataOptions.forEach((item, index) => {
75
- let i = item.map(({ value }) => value).indexOf(_values[index]);
76
- if (i === -1) {
77
- i = _values[index] > item[item.length - 1].value ? item.length - 1 : 0;
78
- }
79
- indexs.push(i);
80
- });
81
- this.selectedIndex = indexs;
82
- this.selectedValue = indexs.map((i, index) => this.dataOptions[index][i].value);
83
- this.$emit('change', this.selectedValue);
84
- this.$emit('input', this.selectedValue);
85
- });
86
- },
87
- onChange(e) {
88
- const indexs = e.detail.value;
89
- const newValues = indexs.map((i, index) => this.dataOptions[index][i].value);
90
- this.initOptions(newValues);
91
- this.initSelectIndex(newValues);
92
- },
93
- },
94
- };
95
- </script>
96
-
97
- <style scoped lang="scss">
98
- .time-item {
99
- width: 100%;
100
- height: 100%;
101
- display: flex;
102
- align-items: center;
103
- justify-content: center;
104
- font-size: var(--ste-select-font-size);
105
- }
106
- </style>
1
+ <template>
2
+ <picker-view
3
+ style="height: 450rpx; width: 100%"
4
+ indicator-style="height: 43px"
5
+ immediate-change
6
+ :value="selectedIndex"
7
+ @change="onChange"
8
+ >
9
+ <picker-view-column v-for="(col, index) in dataOptions" :key="index">
10
+ <view class="time-item" v-for="(item, i) in col" :key="item.title">
11
+ <text>
12
+ {{ dateUnit ? item.title : item.value }}
13
+ </text>
14
+ </view>
15
+ </picker-view-column>
16
+ </picker-view>
17
+ </template>
18
+
19
+ <script>
20
+ import { getDateOptions, getFormatStr, getNowDate } from './defaultDate';
21
+ export default {
22
+ name: 'date-time',
23
+ props: {
24
+ value: { type: [String, Number, Array, null], default: () => [] },
25
+ mode: { type: [String, null], default: () => 'date' },
26
+ minDate: { type: [Number, String, Date, null], default: () => null },
27
+ maxDate: { type: [Number, String, Date, null], default: () => null },
28
+ dateUnit: { type: [Boolean, null], default: () => true },
29
+ },
30
+ data() {
31
+ return {
32
+ dataOptions: [],
33
+ selectedValue: [],
34
+ selectedIndex: [],
35
+ };
36
+ },
37
+ watch: {
38
+ value: {
39
+ handler(v) {
40
+ let values = [];
41
+ if (Array.isArray(v)) {
42
+ values = [...v];
43
+ } else {
44
+ const str = ['date', 'datetime', 'month'].includes(this.mode) ? 'YYYY MM DD HH mm ss' : 'HH mm ss';
45
+ const value = utils.dayjs(v).format(str).split(' ');
46
+ values = value.map((item) => Number(item));
47
+ }
48
+ this.selectedValue = values;
49
+ },
50
+ immediate: true,
51
+ },
52
+ minDate() {
53
+ this.initOptions();
54
+ this.initSelectIndex();
55
+ },
56
+ maxDate() {
57
+ this.initOptions();
58
+ this.initSelectIndex();
59
+ },
60
+ },
61
+ created() {
62
+ this.initOptions();
63
+ this.initSelectIndex();
64
+ },
65
+ methods: {
66
+ initOptions(values = this.selectedValue) {
67
+ const { options, value } = getDateOptions(values, this.mode, this.minDate, this.maxDate);
68
+ this.dataOptions = options;
69
+ },
70
+ initSelectIndex(values = this.selectedValue) {
71
+ this.$nextTick(() => {
72
+ const indexs = [];
73
+ const _values = getNowDate(values, this.mode);
74
+ this.dataOptions.forEach((item, index) => {
75
+ let i = item.map(({ value }) => value).indexOf(_values[index]);
76
+ if (i === -1) {
77
+ i = _values[index] > item[item.length - 1].value ? item.length - 1 : 0;
78
+ }
79
+ indexs.push(i);
80
+ });
81
+ this.selectedIndex = indexs;
82
+ this.selectedValue = indexs.map((i, index) => this.dataOptions[index][i].value);
83
+ this.$emit('change', this.selectedValue);
84
+ this.$emit('input', this.selectedValue);
85
+ });
86
+ },
87
+ onChange(e) {
88
+ const indexs = e.detail.value;
89
+ const newValues = indexs.map((i, index) => this.dataOptions[index][i].value);
90
+ this.initOptions(newValues);
91
+ this.initSelectIndex(newValues);
92
+ },
93
+ },
94
+ };
95
+ </script>
96
+
97
+ <style scoped lang="scss">
98
+ .time-item {
99
+ width: 100%;
100
+ height: 100%;
101
+ display: flex;
102
+ align-items: center;
103
+ justify-content: center;
104
+ font-size: var(--ste-select-font-size);
105
+ }
106
+ </style>
@@ -1,65 +1,65 @@
1
- <template>
2
- <view class="ste-table-checkbox-icon">
3
- <ste-icon
4
- code="&#xe6ae;"
5
- :color="iconColorConfig.disabled || selectionColor.disabled"
6
- :size="checkIconSize"
7
- v-if="disabled"
8
- />
9
- <ste-icon
10
- code="&#xe6ac;"
11
- :color="iconColorConfig.readonly || selectionColor.readonly"
12
- :size="checkIconSize"
13
- v-else-if="readonly"
14
- />
15
- <template v-else>
16
- <ste-icon
17
- code="&#xe6ac;"
18
- :color="iconColorConfig.main || selectionColor.main"
19
- :size="checkIconSize"
20
- v-if="checked"
21
- />
22
- <ste-icon
23
- code="&#xe6af;"
24
- :color="iconColorConfig.unSelected || selectionColor.unSelected"
25
- :size="checkIconSize"
26
- v-else
27
- />
28
- </template>
29
- </view>
30
- </template>
31
-
32
- <script>
33
- import { selectionColorConfig } from '../ste-table/common';
34
- export default {
35
- options: {
36
- virtualHost: true,
37
- },
38
- props: {
39
- checked: {
40
- type: [Boolean, null],
41
- default: false,
42
- },
43
- disabled: {
44
- type: [Boolean, null],
45
- default: false,
46
- },
47
- readonly: {
48
- type: [Boolean, null],
49
- default: false,
50
- },
51
- iconColorConfig: {
52
- type: [Object, null],
53
- default: () => selectionColorConfig,
54
- },
55
- },
56
- data() {
57
- return {
58
- checkIconSize: 36,
59
- selectionColor: selectionColorConfig,
60
- };
61
- },
62
- };
63
- </script>
64
-
65
- <style lang="scss" scoped></style>
1
+ <template>
2
+ <view class="ste-table-checkbox-icon">
3
+ <ste-icon
4
+ code="&#xe6ae;"
5
+ :color="iconColorConfig.disabled || selectionColor.disabled"
6
+ :size="checkIconSize"
7
+ v-if="disabled"
8
+ />
9
+ <ste-icon
10
+ code="&#xe6ac;"
11
+ :color="iconColorConfig.readonly || selectionColor.readonly"
12
+ :size="checkIconSize"
13
+ v-else-if="readonly"
14
+ />
15
+ <template v-else>
16
+ <ste-icon
17
+ code="&#xe6ac;"
18
+ :color="iconColorConfig.main || selectionColor.main"
19
+ :size="checkIconSize"
20
+ v-if="checked"
21
+ />
22
+ <ste-icon
23
+ code="&#xe6af;"
24
+ :color="iconColorConfig.unSelected || selectionColor.unSelected"
25
+ :size="checkIconSize"
26
+ v-else
27
+ />
28
+ </template>
29
+ </view>
30
+ </template>
31
+
32
+ <script>
33
+ import { selectionColorConfig } from '../ste-table/common';
34
+ export default {
35
+ options: {
36
+ virtualHost: true,
37
+ },
38
+ props: {
39
+ checked: {
40
+ type: [Boolean, null],
41
+ default: false,
42
+ },
43
+ disabled: {
44
+ type: [Boolean, null],
45
+ default: false,
46
+ },
47
+ readonly: {
48
+ type: [Boolean, null],
49
+ default: false,
50
+ },
51
+ iconColorConfig: {
52
+ type: [Object, null],
53
+ default: () => selectionColorConfig,
54
+ },
55
+ },
56
+ data() {
57
+ return {
58
+ checkIconSize: 36,
59
+ selectionColor: selectionColorConfig,
60
+ };
61
+ },
62
+ };
63
+ </script>
64
+
65
+ <style lang="scss" scoped></style>
@@ -1,110 +1,110 @@
1
- <template>
2
- <view class="radio-icon-root" :class="[cmpRootClass]" :style="[comRootStyle]">
3
- <view class="icon-1"></view>
4
- </view>
5
- </template>
6
-
7
- <script>
8
- import utils from '../../utils/utils.js';
9
- import { selectionColorConfig } from '../ste-table/common';
10
- export default {
11
- options: {
12
- virtualHost: true,
13
- },
14
- props: {
15
- checked: {
16
- type: [Boolean, null],
17
- default: false,
18
- },
19
- disabled: {
20
- type: [Boolean, null],
21
- default: false,
22
- },
23
- readonly: {
24
- type: [Boolean, null],
25
- default: false,
26
- },
27
- iconColorConfig: {
28
- type: [Object, null],
29
- default: () => selectionColorConfig,
30
- },
31
- },
32
- data() {
33
- return {
34
- selectionColor: selectionColorConfig,
35
- };
36
- },
37
- computed: {
38
- cmpRootClass() {
39
- let classArr = [];
40
- if (this.checked) {
41
- classArr.push('checked');
42
- }
43
- if (this.disabled) {
44
- classArr.push('disabled');
45
- }
46
- if (this.readonly) {
47
- classArr.push('readonly');
48
- }
49
-
50
- return classArr.join(' ');
51
- },
52
- comRootStyle() {
53
- let tmpCorloConfig = selectionColorConfig;
54
- if (this.iconColorConfig) {
55
- tmpCorloConfig = this.iconColorConfig;
56
- }
57
- return {
58
- '--main-color': tmpCorloConfig.main,
59
- '--main-outer-color': utils.Color.formatColor(tmpCorloConfig.main, 0.2),
60
- '--disabled-color': tmpCorloConfig.disabled,
61
- '--un-selected-color': tmpCorloConfig.unSelected,
62
- '--readonly-color': tmpCorloConfig.readonly,
63
- '--readonly-outer-color': utils.Color.formatColor(tmpCorloConfig.readonly, 0.2),
64
- };
65
- },
66
- },
67
- };
68
- </script>
69
-
70
- <style lang="scss" scoped>
71
- .radio-icon-root {
72
- width: 32rpx;
73
- height: 32rpx;
74
-
75
- border-radius: 50%;
76
- border: 2rpx solid var(--un-selected-color);
77
- position: relative;
78
-
79
- &.checked {
80
- border: none;
81
- background-color: var(--main-outer-color);
82
- .icon-1 {
83
- background-color: var(--main-color);
84
- }
85
- }
86
-
87
- &.readonly {
88
- border: none;
89
- background-color: var(--readonly-outer-color);
90
- .icon-1 {
91
- background-color: var(--readonly-color);
92
- }
93
- }
94
-
95
- &.disabled {
96
- border: none;
97
- background-color: var(--disabled-color);
98
- }
99
- .icon-1 {
100
- width: 16rpx;
101
- height: 16rpx;
102
- border-radius: 50%;
103
-
104
- position: absolute;
105
- left: 50%;
106
- top: 50%;
107
- transform: translate(-50%, -50%);
108
- }
109
- }
110
- </style>
1
+ <template>
2
+ <view class="radio-icon-root" :class="[cmpRootClass]" :style="[comRootStyle]">
3
+ <view class="icon-1"></view>
4
+ </view>
5
+ </template>
6
+
7
+ <script>
8
+ import utils from '../../utils/utils.js';
9
+ import { selectionColorConfig } from '../ste-table/common';
10
+ export default {
11
+ options: {
12
+ virtualHost: true,
13
+ },
14
+ props: {
15
+ checked: {
16
+ type: [Boolean, null],
17
+ default: false,
18
+ },
19
+ disabled: {
20
+ type: [Boolean, null],
21
+ default: false,
22
+ },
23
+ readonly: {
24
+ type: [Boolean, null],
25
+ default: false,
26
+ },
27
+ iconColorConfig: {
28
+ type: [Object, null],
29
+ default: () => selectionColorConfig,
30
+ },
31
+ },
32
+ data() {
33
+ return {
34
+ selectionColor: selectionColorConfig,
35
+ };
36
+ },
37
+ computed: {
38
+ cmpRootClass() {
39
+ let classArr = [];
40
+ if (this.checked) {
41
+ classArr.push('checked');
42
+ }
43
+ if (this.disabled) {
44
+ classArr.push('disabled');
45
+ }
46
+ if (this.readonly) {
47
+ classArr.push('readonly');
48
+ }
49
+
50
+ return classArr.join(' ');
51
+ },
52
+ comRootStyle() {
53
+ let tmpCorloConfig = selectionColorConfig;
54
+ if (this.iconColorConfig) {
55
+ tmpCorloConfig = this.iconColorConfig;
56
+ }
57
+ return {
58
+ '--main-color': tmpCorloConfig.main,
59
+ '--main-outer-color': utils.Color.formatColor(tmpCorloConfig.main, 0.2),
60
+ '--disabled-color': tmpCorloConfig.disabled,
61
+ '--un-selected-color': tmpCorloConfig.unSelected,
62
+ '--readonly-color': tmpCorloConfig.readonly,
63
+ '--readonly-outer-color': utils.Color.formatColor(tmpCorloConfig.readonly, 0.2),
64
+ };
65
+ },
66
+ },
67
+ };
68
+ </script>
69
+
70
+ <style lang="scss" scoped>
71
+ .radio-icon-root {
72
+ width: 32rpx;
73
+ height: 32rpx;
74
+
75
+ border-radius: 50%;
76
+ border: 2rpx solid var(--un-selected-color);
77
+ position: relative;
78
+
79
+ &.checked {
80
+ border: none;
81
+ background-color: var(--main-outer-color);
82
+ .icon-1 {
83
+ background-color: var(--main-color);
84
+ }
85
+ }
86
+
87
+ &.readonly {
88
+ border: none;
89
+ background-color: var(--readonly-outer-color);
90
+ .icon-1 {
91
+ background-color: var(--readonly-color);
92
+ }
93
+ }
94
+
95
+ &.disabled {
96
+ border: none;
97
+ background-color: var(--disabled-color);
98
+ }
99
+ .icon-1 {
100
+ width: 16rpx;
101
+ height: 16rpx;
102
+ border-radius: 50%;
103
+
104
+ position: absolute;
105
+ left: 50%;
106
+ top: 50%;
107
+ transform: translate(-50%, -50%);
108
+ }
109
+ }
110
+ </style>