@fecp/mobile 1.0.24 → 1.0.26
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/es/mobile.css +6 -0
- package/es/packages/mobile/src/components/form/field/Field.vue.mjs +6 -2
- package/es/packages/mobile/src/components/form/fieldCalendarPicker/FieldCalendarPicker.vue.mjs +22 -7
- package/es/packages/mobile/src/components/form/fieldCascaderPicker/fieldCascaderPicker.vue.mjs +27 -9
- package/es/packages/mobile/src/components/form/fieldCheckbox/FieldCheckbox.vue.mjs +14 -3
- package/es/packages/mobile/src/components/form/fieldDatePicker/FieldDatePicker.vue.mjs +73 -26
- package/es/packages/mobile/src/components/form/fieldPicker/FieldPicker.vue.mjs +23 -8
- package/es/packages/mobile/src/components/form/fieldRadio/FieldRadio.vue.mjs +0 -1
- package/es/packages/mobile/src/components/form/fieldTimePicker/FieldTimePicker.vue.mjs +72 -24
- package/es/packages/mobile/src/utils/dateUtil.mjs +54 -0
- package/lib/mobile.css +6 -0
- package/lib/packages/mobile/src/components/form/field/Field.vue.js +5 -1
- package/lib/packages/mobile/src/components/form/fieldCalendarPicker/FieldCalendarPicker.vue.js +21 -6
- package/lib/packages/mobile/src/components/form/fieldCascaderPicker/fieldCascaderPicker.vue.js +26 -8
- package/lib/packages/mobile/src/components/form/fieldCheckbox/FieldCheckbox.vue.js +13 -2
- package/lib/packages/mobile/src/components/form/fieldDatePicker/FieldDatePicker.vue.js +72 -25
- package/lib/packages/mobile/src/components/form/fieldPicker/FieldPicker.vue.js +22 -7
- package/lib/packages/mobile/src/components/form/fieldRadio/FieldRadio.vue.js +0 -1
- package/lib/packages/mobile/src/components/form/fieldTimePicker/FieldTimePicker.vue.js +71 -23
- package/lib/packages/mobile/src/utils/dateUtil.js +54 -0
- package/package.json +1 -1
|
@@ -11,11 +11,13 @@
|
|
|
11
11
|
/* empty css */
|
|
12
12
|
/* empty css */
|
|
13
13
|
/* empty css */
|
|
14
|
-
import { ref, computed, watch, createBlock, openBlock, unref, mergeProps, isRef, withCtx, createVNode } from "vue";
|
|
14
|
+
import { ref, computed, watch, createBlock, openBlock, unref, mergeProps, isRef, createSlots, withCtx, createVNode, withModifiers } from "vue";
|
|
15
15
|
import { MobileField } from "../field/index.mjs";
|
|
16
16
|
import hooks from "../../../../../../node_modules/.pnpm/moment@2.30.1/node_modules/moment/dist/moment.mjs";
|
|
17
|
+
import { parseTimeFormatter } from "../../../utils/dateUtil.mjs";
|
|
17
18
|
import { TimePicker } from "../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/time-picker/index.mjs";
|
|
18
19
|
import { Popup } from "../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/popup/index.mjs";
|
|
20
|
+
import { Icon } from "../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/icon/index.mjs";
|
|
19
21
|
const _sfc_main = {
|
|
20
22
|
__name: "FieldTimePicker",
|
|
21
23
|
props: {
|
|
@@ -23,13 +25,18 @@ const _sfc_main = {
|
|
|
23
25
|
type: String,
|
|
24
26
|
default: ""
|
|
25
27
|
},
|
|
26
|
-
textFormat: {
|
|
28
|
+
// textFormat: {
|
|
29
|
+
// type: String,
|
|
30
|
+
// default: "HH:mm:ss",
|
|
31
|
+
// },
|
|
32
|
+
// valueFormat: {
|
|
33
|
+
// type: String,
|
|
34
|
+
// default: "HH:mm:ss",
|
|
35
|
+
// },
|
|
36
|
+
timeTextFormat: {
|
|
37
|
+
//0:HH:mm:ss;1: HH时mm分ss秒
|
|
27
38
|
type: String,
|
|
28
|
-
default: "
|
|
29
|
-
},
|
|
30
|
-
valueFormat: {
|
|
31
|
-
type: String,
|
|
32
|
-
default: "HH:mm:ss"
|
|
39
|
+
default: "0"
|
|
33
40
|
},
|
|
34
41
|
timeColumnsType: {
|
|
35
42
|
type: String,
|
|
@@ -45,27 +52,54 @@ const _sfc_main = {
|
|
|
45
52
|
const fieldTextValue = ref("");
|
|
46
53
|
const showPicker = ref(false);
|
|
47
54
|
const emit = __emit;
|
|
55
|
+
let textFormat = parseTimeFormatter(
|
|
56
|
+
props.timeTextFormat,
|
|
57
|
+
props.timeColumnsType
|
|
58
|
+
);
|
|
59
|
+
let valueFormat = parseTimeFormatter("0", props.timeColumnsType);
|
|
48
60
|
const pickerValue = computed(() => {
|
|
61
|
+
let date;
|
|
49
62
|
if (!props.modelValue) {
|
|
50
|
-
|
|
51
|
-
|
|
63
|
+
date = hooks();
|
|
64
|
+
} else {
|
|
65
|
+
date = hooks(props.modelValue, props.valueFormat);
|
|
66
|
+
}
|
|
67
|
+
const hours = date.hours();
|
|
68
|
+
const minutes = date.minutes();
|
|
69
|
+
const seconds = date.seconds();
|
|
70
|
+
let value = [];
|
|
71
|
+
const columnsTypeArr = props.timeColumnsType.split(",");
|
|
72
|
+
if (columnsTypeArr.length == 1) {
|
|
73
|
+
value = [hours];
|
|
74
|
+
} else if (columnsTypeArr.length == 2) {
|
|
75
|
+
value = [hours, minutes];
|
|
76
|
+
} else if (columnsTypeArr.length == 3) {
|
|
77
|
+
value = [hours, minutes, seconds];
|
|
52
78
|
}
|
|
53
|
-
const date = hooks(props.modelValue, props.valueFormat);
|
|
54
|
-
const value = [date.hours(), date.minutes(), date.seconds()];
|
|
55
79
|
return value;
|
|
56
80
|
});
|
|
57
81
|
const columnsType = computed(() => {
|
|
58
|
-
return props.timeColumnsType.
|
|
82
|
+
return props.timeColumnsType.split(",");
|
|
59
83
|
});
|
|
84
|
+
const formatter = (type, option) => {
|
|
85
|
+
console.log(type);
|
|
86
|
+
if (type === "hour") {
|
|
87
|
+
option.text += "时";
|
|
88
|
+
} else if (type === "minute") {
|
|
89
|
+
option.text += "分";
|
|
90
|
+
} else if (type === "second") {
|
|
91
|
+
option.text += "秒";
|
|
92
|
+
}
|
|
93
|
+
return option;
|
|
94
|
+
};
|
|
60
95
|
watch(
|
|
61
96
|
() => props.modelValue,
|
|
62
97
|
(value) => {
|
|
63
98
|
if (!value) {
|
|
99
|
+
fieldTextValue.value = "";
|
|
64
100
|
return;
|
|
65
101
|
}
|
|
66
|
-
fieldTextValue.value = hooks(value,
|
|
67
|
-
props.textFormat
|
|
68
|
-
);
|
|
102
|
+
fieldTextValue.value = hooks(value, valueFormat).format(textFormat);
|
|
69
103
|
},
|
|
70
104
|
{ immediate: true }
|
|
71
105
|
);
|
|
@@ -73,42 +107,56 @@ const _sfc_main = {
|
|
|
73
107
|
const val = hooks(
|
|
74
108
|
`${selectedValues[0]}${selectedValues[1]}${selectedValues[2]}`,
|
|
75
109
|
"HH:mm:ss"
|
|
76
|
-
).format(
|
|
110
|
+
).format(valueFormat);
|
|
77
111
|
emit("update:modelValue", val);
|
|
78
112
|
showPicker.value = false;
|
|
79
113
|
};
|
|
80
114
|
return (_ctx, _cache) => {
|
|
115
|
+
const _component_van_icon = Icon;
|
|
81
116
|
const _component_van_time_picker = TimePicker;
|
|
82
117
|
const _component_van_popup = Popup;
|
|
83
118
|
return openBlock(), createBlock(unref(MobileField), mergeProps(_ctx.$attrs, {
|
|
84
119
|
modelValue: unref(fieldTextValue),
|
|
85
|
-
"onUpdate:modelValue": _cache[
|
|
120
|
+
"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => isRef(fieldTextValue) ? fieldTextValue.value = $event : null),
|
|
86
121
|
"is-link": "",
|
|
87
122
|
readonly: "",
|
|
88
|
-
onClick: _cache[
|
|
89
|
-
}), {
|
|
123
|
+
onClick: _cache[5] || (_cache[5] = ($event) => showPicker.value = true)
|
|
124
|
+
}), createSlots({
|
|
90
125
|
default: withCtx(() => [
|
|
91
126
|
createVNode(_component_van_popup, {
|
|
92
127
|
show: unref(showPicker),
|
|
93
|
-
"onUpdate:show": _cache[
|
|
128
|
+
"onUpdate:show": _cache[3] || (_cache[3] = ($event) => isRef(showPicker) ? showPicker.value = $event : null),
|
|
94
129
|
"destroy-on-close": "",
|
|
95
130
|
position: "bottom"
|
|
96
131
|
}, {
|
|
97
132
|
default: withCtx(() => [
|
|
98
133
|
createVNode(_component_van_time_picker, mergeProps(_ctx.$attrs, {
|
|
99
134
|
modelValue: unref(pickerValue),
|
|
100
|
-
"onUpdate:modelValue": _cache[
|
|
135
|
+
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(pickerValue) ? pickerValue.value = $event : null),
|
|
101
136
|
readonly: false,
|
|
102
137
|
columnsType: unref(columnsType),
|
|
138
|
+
formatter,
|
|
103
139
|
onConfirm,
|
|
104
|
-
onCancel: _cache[
|
|
140
|
+
onCancel: _cache[2] || (_cache[2] = ($event) => showPicker.value = false)
|
|
105
141
|
}), null, 16, ["modelValue", "columnsType"])
|
|
106
142
|
]),
|
|
107
143
|
_: 1
|
|
108
144
|
}, 8, ["show"])
|
|
109
145
|
]),
|
|
110
|
-
_:
|
|
111
|
-
},
|
|
146
|
+
_: 2
|
|
147
|
+
}, [
|
|
148
|
+
unref(fieldTextValue) ? {
|
|
149
|
+
name: "right-icon",
|
|
150
|
+
fn: withCtx(() => [
|
|
151
|
+
createVNode(_component_van_icon, {
|
|
152
|
+
name: "clear",
|
|
153
|
+
class: "custom-close-icon",
|
|
154
|
+
onClick: _cache[0] || (_cache[0] = withModifiers(($event) => emit("update:modelValue", null), ["stop"]))
|
|
155
|
+
})
|
|
156
|
+
]),
|
|
157
|
+
key: "0"
|
|
158
|
+
} : void 0
|
|
159
|
+
]), 1040, ["modelValue"]);
|
|
112
160
|
};
|
|
113
161
|
}
|
|
114
162
|
};
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
const parseDateFormatter = (textFormatType, columnsType) => {
|
|
2
|
+
const columnsTypeArr = columnsType.split(",");
|
|
3
|
+
if (columnsTypeArr.length == 1) {
|
|
4
|
+
if (textFormatType == "3") {
|
|
5
|
+
return "YYYY年";
|
|
6
|
+
}
|
|
7
|
+
return "YYYY";
|
|
8
|
+
} else if (columnsTypeArr.length == 2) {
|
|
9
|
+
if (textFormatType == "0") {
|
|
10
|
+
return "YYYYMM";
|
|
11
|
+
} else if (textFormatType == "1") {
|
|
12
|
+
return "YYYY-MM";
|
|
13
|
+
} else if (textFormatType == "2") {
|
|
14
|
+
return "YYYY/MM";
|
|
15
|
+
} else if (textFormatType == "3") {
|
|
16
|
+
return "YYYY年MM月";
|
|
17
|
+
}
|
|
18
|
+
} else if (columnsTypeArr.length == 3) {
|
|
19
|
+
if (textFormatType == "0") {
|
|
20
|
+
return "YYYYMMDD";
|
|
21
|
+
} else if (textFormatType == "1") {
|
|
22
|
+
return "YYYY-MM-DD";
|
|
23
|
+
} else if (textFormatType == "2") {
|
|
24
|
+
return "YYYY/MM/DD";
|
|
25
|
+
} else if (textFormatType == "3") {
|
|
26
|
+
return "YYYY年MM月DD日";
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
const parseTimeFormatter = (textFormatType, columnsType) => {
|
|
31
|
+
const columnsTypeArr = columnsType.split(",");
|
|
32
|
+
if (columnsTypeArr.length == 1) {
|
|
33
|
+
if (textFormatType == "1") {
|
|
34
|
+
return "HH时";
|
|
35
|
+
}
|
|
36
|
+
return "HH";
|
|
37
|
+
} else if (columnsTypeArr.length == 2) {
|
|
38
|
+
if (textFormatType == "0") {
|
|
39
|
+
return "HH:mm";
|
|
40
|
+
} else if (textFormatType == "1") {
|
|
41
|
+
return "HH时mm分";
|
|
42
|
+
}
|
|
43
|
+
} else if (columnsTypeArr.length == 3) {
|
|
44
|
+
if (textFormatType == "0") {
|
|
45
|
+
return "HH:mm:ss";
|
|
46
|
+
} else if (textFormatType == "1") {
|
|
47
|
+
return "HH时mm分ss秒";
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
export {
|
|
52
|
+
parseDateFormatter,
|
|
53
|
+
parseTimeFormatter
|
|
54
|
+
};
|
package/lib/mobile.css
CHANGED
|
@@ -28,6 +28,12 @@
|
|
|
28
28
|
.van-checkbox-group--horizontal{display:flex;flex-wrap:wrap}
|
|
29
29
|
:root,:host{--van-checkbox-size: 20px;--van-checkbox-border-color: var(--van-gray-5);--van-checkbox-duration: var(--van-duration-fast);--van-checkbox-label-margin: var(--van-padding-xs);--van-checkbox-label-color: var(--van-text-color);--van-checkbox-checked-icon-color: var(--van-primary-color);--van-checkbox-disabled-icon-color: var(--van-gray-5);--van-checkbox-disabled-label-color: var(--van-text-color-3);--van-checkbox-disabled-background: var(--van-border-color)}.van-checkbox{display:flex;align-items:center;overflow:hidden;cursor:pointer;-webkit-user-select:none;user-select:none}.van-checkbox--disabled{cursor:not-allowed}.van-checkbox--label-disabled{cursor:default}.van-checkbox--horizontal{margin-right:var(--van-padding-sm)}.van-checkbox__icon{flex:none;height:1em;font-size:var(--van-checkbox-size);line-height:1em;cursor:pointer}.van-checkbox__icon .van-icon{display:block;box-sizing:border-box;width:1.25em;height:1.25em;color:transparent;font-size:.8em;line-height:1.25;text-align:center;border:1px solid var(--van-checkbox-border-color);transition-duration:var(--van-checkbox-duration);transition-property:color,border-color,background-color}.van-checkbox__icon--round .van-icon{border-radius:100%}.van-checkbox__icon--indeterminate .van-icon{display:flex;align-items:center;justify-content:center;color:var(--van-white);border-color:var(--van-checkbox-checked-icon-color);background-color:var(--van-checkbox-checked-icon-color)}.van-checkbox__icon--checked .van-icon{color:var(--van-white);background-color:var(--van-checkbox-checked-icon-color);border-color:var(--van-checkbox-checked-icon-color)}.van-checkbox__icon--disabled{cursor:not-allowed}.van-checkbox__icon--disabled .van-icon{background-color:var(--van-checkbox-disabled-background);border-color:var(--van-checkbox-disabled-icon-color)}.van-checkbox__icon--disabled.van-checkbox__icon--checked .van-icon{color:var(--van-checkbox-disabled-icon-color)}.van-checkbox__label{margin-left:var(--van-checkbox-label-margin);color:var(--van-checkbox-label-color);line-height:var(--van-checkbox-size)}.van-checkbox__label--left{margin:0 var(--van-checkbox-label-margin) 0 0}.van-checkbox__label--disabled{color:var(--van-checkbox-disabled-label-color)}
|
|
30
30
|
:root,:host{--van-field-label-width: 6.2em;--van-field-label-color: var(--van-text-color);--van-field-label-margin-right: var(--van-padding-sm);--van-field-input-text-color: var(--van-text-color);--van-field-input-error-text-color: var(--van-danger-color);--van-field-input-disabled-text-color: var(--van-text-color-3);--van-field-placeholder-text-color: var(--van-text-color-3);--van-field-icon-size: 18px;--van-field-clear-icon-size: 18px;--van-field-clear-icon-color: var(--van-gray-5);--van-field-right-icon-color: var(--van-gray-6);--van-field-error-message-color: var(--van-danger-color);--van-field-error-message-font-size: 12px;--van-field-text-area-min-height: 60px;--van-field-word-limit-color: var(--van-gray-7);--van-field-word-limit-font-size: var(--van-font-size-sm);--van-field-word-limit-line-height: 16px;--van-field-disabled-text-color: var(--van-text-color-3);--van-field-required-mark-color: var(--van-red)}.van-field{flex-wrap:wrap}.van-field__label{flex:none;box-sizing:border-box;width:var(--van-field-label-width);margin-right:var(--van-field-label-margin-right);color:var(--van-field-label-color);text-align:left;word-wrap:break-word}.van-field__label--center{text-align:center}.van-field__label--right{text-align:right}.van-field__label--top{display:flex;width:100%;text-align:left;margin-bottom:var(--van-padding-base);overflow-wrap:break-word}.van-field__label--required:before{margin-right:2px;color:var(--van-field-required-mark-color);content:"*"}.van-field--disabled .van-field__label{color:var(--van-field-disabled-text-color)}.van-field__value{overflow:visible}.van-field__body{display:flex;align-items:center}.van-field__control{display:block;box-sizing:border-box;width:100%;min-width:0;margin:0;padding:0;color:var(--van-field-input-text-color);line-height:inherit;text-align:left;background-color:transparent;border:0;resize:none;-webkit-user-select:auto;user-select:auto}.van-field__control::-webkit-input-placeholder{color:var(--van-field-placeholder-text-color)}.van-field__control::placeholder{color:var(--van-field-placeholder-text-color)}.van-field__control:read-only{cursor:default}.van-field__control:disabled{color:var(--van-field-input-disabled-text-color);cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--van-field-input-disabled-text-color)}.van-field__control--center{justify-content:center;text-align:center}.van-field__control--right{justify-content:flex-end;text-align:right}.van-field__control--custom{display:flex;align-items:center;min-height:var(--van-cell-line-height)}.van-field__control--error::-webkit-input-placeholder{color:var(--van-field-input-error-text-color);-webkit-text-fill-color:currentColor}.van-field__control--error,.van-field__control--error::placeholder{color:var(--van-field-input-error-text-color);-webkit-text-fill-color:currentColor}.van-field__control--min-height{min-height:var(--van-field-text-area-min-height)}.van-field__control[type=date],.van-field__control[type=time],.van-field__control[type=datetime-local]{min-height:var(--van-cell-line-height)}.van-field__control[type=search]{-webkit-appearance:none}.van-field__clear,.van-field__icon,.van-field__button,.van-field__right-icon{flex-shrink:0}.van-field__clear,.van-field__right-icon{margin-right:calc(var(--van-padding-xs) * -1);padding:0 var(--van-padding-xs);line-height:inherit}.van-field__clear{color:var(--van-field-clear-icon-color);font-size:var(--van-field-clear-icon-size);cursor:pointer}.van-field__left-icon .van-icon,.van-field__right-icon .van-icon{display:block;font-size:var(--van-field-icon-size);line-height:inherit}.van-field__left-icon{margin-right:var(--van-padding-base)}.van-field__right-icon{color:var(--van-field-right-icon-color)}.van-field__button{padding-left:var(--van-padding-xs)}.van-field__error-message{color:var(--van-field-error-message-color);font-size:var(--van-field-error-message-font-size);text-align:left}.van-field__error-message--center{text-align:center}.van-field__error-message--right{text-align:right}.van-field__word-limit{margin-top:var(--van-padding-base);color:var(--van-field-word-limit-color);font-size:var(--van-field-word-limit-font-size);line-height:var(--van-field-word-limit-line-height);text-align:right}
|
|
31
|
+
|
|
32
|
+
.custom-close-icon {
|
|
33
|
+
color: var(--van-field-clear-icon-color);
|
|
34
|
+
font-size: var(--van-field-clear-icon-size);
|
|
35
|
+
cursor: pointer;
|
|
36
|
+
}
|
|
31
37
|
:root,:host{--van-sticky-z-index: 99}.van-sticky--fixed{position:fixed;z-index:var(--van-sticky-z-index)}
|
|
32
38
|
:root,:host{--van-tab-text-color: var(--van-gray-7);--van-tab-active-text-color: var(--van-text-color);--van-tab-disabled-text-color: var(--van-text-color-3);--van-tab-font-size: var(--van-font-size-md);--van-tab-line-height: var(--van-line-height-md);--van-tabs-default-color: var(--van-primary-color);--van-tabs-line-height: 44px;--van-tabs-card-height: 30px;--van-tabs-nav-background: var(--van-background-2);--van-tabs-bottom-bar-width: 40px;--van-tabs-bottom-bar-height: 3px;--van-tabs-bottom-bar-color: var(--van-primary-color)}.van-tab{position:relative;display:flex;flex:1;align-items:center;justify-content:center;box-sizing:border-box;padding:0 var(--van-padding-base);color:var(--van-tab-text-color);font-size:var(--van-tab-font-size);line-height:var(--van-tab-line-height);cursor:pointer}.van-tab--active{color:var(--van-tab-active-text-color);font-weight:var(--van-font-bold)}.van-tab--disabled{color:var(--van-tab-disabled-text-color);cursor:not-allowed}.van-tab--grow{flex:1 0 auto;padding:0 var(--van-padding-sm)}.van-tab--shrink{flex:none;padding:0 var(--van-padding-xs)}.van-tab--card{color:var(--van-tabs-default-color);border-right:var(--van-border-width) solid var(--van-tabs-default-color)}.van-tab--card:last-child{border-right:none}.van-tab--card.van-tab--active{color:var(--van-white);background-color:var(--van-tabs-default-color)}.van-tab--card.van-tab--disabled{color:var(--van-tab-disabled-text-color)}.van-tab__text--ellipsis{display:-webkit-box;overflow:hidden;-webkit-line-clamp:1;-webkit-box-orient:vertical}.van-tabs{position:relative}.van-tabs__wrap{overflow:hidden}.van-tabs__wrap--page-top{position:fixed}.van-tabs__wrap--content-bottom{top:auto;bottom:0}.van-tabs__nav{position:relative;display:flex;background:var(--van-tabs-nav-background);-webkit-user-select:none;user-select:none}.van-tabs__nav--complete{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.van-tabs__nav--complete::-webkit-scrollbar{display:none}.van-tabs__nav--line{box-sizing:content-box;height:100%;padding-bottom:15px}.van-tabs__nav--line.van-tabs__nav--shrink,.van-tabs__nav--line.van-tabs__nav--complete{padding-right:var(--van-padding-xs);padding-left:var(--van-padding-xs)}.van-tabs__nav--card{box-sizing:border-box;height:var(--van-tabs-card-height);margin:0 var(--van-padding-md);border:var(--van-border-width) solid var(--van-tabs-default-color);border-radius:var(--van-radius-sm)}.van-tabs__nav--card.van-tabs__nav--shrink{display:inline-flex}.van-tabs__line{position:absolute;bottom:15px;left:0;z-index:1;width:var(--van-tabs-bottom-bar-width);height:var(--van-tabs-bottom-bar-height);background:var(--van-tabs-bottom-bar-color);border-radius:var(--van-tabs-bottom-bar-height)}.van-tabs__track{position:relative;display:flex;width:100%;height:100%;will-change:left}.van-tabs__content--animated{overflow:hidden}.van-tabs--line .van-tabs__wrap{height:var(--van-tabs-line-height)}.van-tabs--card>.van-tabs__wrap{height:var(--van-tabs-card-height)}
|
|
33
39
|
.van-tab__panel,.van-tab__panel-wrapper{flex-shrink:0;box-sizing:border-box;width:100%}.van-tab__panel-wrapper--inactive{height:0;overflow:visible}
|
|
@@ -6,13 +6,17 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
|
|
|
6
6
|
;/* empty css */
|
|
7
7
|
;/* empty css */
|
|
8
8
|
const vue = require("vue");
|
|
9
|
+
;/* empty css */
|
|
9
10
|
const _pluginVue_exportHelper = require("../../../../../../_virtual/_plugin-vue_export-helper.js");
|
|
10
11
|
const index = require("../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/field/index.js");
|
|
11
12
|
const _sfc_main = {};
|
|
12
13
|
function _sfc_render(_ctx, _cache) {
|
|
13
14
|
const _component_van_field = index.Field;
|
|
14
15
|
return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
|
|
15
|
-
vue.createVNode(_component_van_field, vue.
|
|
16
|
+
vue.createVNode(_component_van_field, vue.mergeProps(_ctx.$attrs, {
|
|
17
|
+
clearable: "",
|
|
18
|
+
"clear-trigger": "always"
|
|
19
|
+
}), vue.createSlots({ _: 2 }, [
|
|
16
20
|
vue.renderList(_ctx.$slots, (item, key) => {
|
|
17
21
|
return {
|
|
18
22
|
name: key,
|
package/lib/packages/mobile/src/components/form/fieldCalendarPicker/FieldCalendarPicker.vue.js
CHANGED
|
@@ -20,6 +20,7 @@ const vue = require("vue");
|
|
|
20
20
|
const index = require("../field/index.js");
|
|
21
21
|
const moment = require("../../../../../../node_modules/.pnpm/moment@2.30.1/node_modules/moment/dist/moment.js");
|
|
22
22
|
const index$1 = require("../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/calendar/index.js");
|
|
23
|
+
const index$2 = require("../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/icon/index.js");
|
|
23
24
|
const _sfc_main = {
|
|
24
25
|
__name: "FieldCalendarPicker",
|
|
25
26
|
props: {
|
|
@@ -89,6 +90,7 @@ const _sfc_main = {
|
|
|
89
90
|
() => props.modelValue,
|
|
90
91
|
(value) => {
|
|
91
92
|
if (!value) {
|
|
93
|
+
fieldTextValue.value = "";
|
|
92
94
|
return;
|
|
93
95
|
}
|
|
94
96
|
if (props.calendarType == "single") {
|
|
@@ -125,18 +127,19 @@ const _sfc_main = {
|
|
|
125
127
|
showCalendar.value = false;
|
|
126
128
|
};
|
|
127
129
|
return (_ctx, _cache) => {
|
|
130
|
+
const _component_van_icon = index$2.Icon;
|
|
128
131
|
const _component_van_calendar = index$1.Calendar;
|
|
129
132
|
return vue.openBlock(), vue.createBlock(vue.unref(index.MobileField), vue.mergeProps(_ctx.$attrs, {
|
|
130
133
|
modelValue: vue.unref(fieldTextValue),
|
|
131
|
-
"onUpdate:modelValue": _cache[
|
|
134
|
+
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => vue.isRef(fieldTextValue) ? fieldTextValue.value = $event : null),
|
|
132
135
|
"is-link": "",
|
|
133
136
|
readonly: "",
|
|
134
|
-
onClick: _cache[
|
|
135
|
-
}), {
|
|
137
|
+
onClick: _cache[3] || (_cache[3] = ($event) => showCalendar.value = true)
|
|
138
|
+
}), vue.createSlots({
|
|
136
139
|
default: vue.withCtx(() => [
|
|
137
140
|
vue.createVNode(_component_van_calendar, vue.mergeProps(_ctx.$attrs, {
|
|
138
141
|
show: vue.unref(showCalendar),
|
|
139
|
-
"onUpdate:show": _cache[
|
|
142
|
+
"onUpdate:show": _cache[1] || (_cache[1] = ($event) => vue.isRef(showCalendar) ? showCalendar.value = $event : null),
|
|
140
143
|
"default-date": vue.unref(defaultDate),
|
|
141
144
|
title: __props.title,
|
|
142
145
|
type: __props.calendarType,
|
|
@@ -145,8 +148,20 @@ const _sfc_main = {
|
|
|
145
148
|
onConfirm
|
|
146
149
|
}), null, 16, ["show", "default-date", "title", "type"])
|
|
147
150
|
]),
|
|
148
|
-
_:
|
|
149
|
-
},
|
|
151
|
+
_: 2
|
|
152
|
+
}, [
|
|
153
|
+
vue.unref(fieldTextValue) ? {
|
|
154
|
+
name: "right-icon",
|
|
155
|
+
fn: vue.withCtx(() => [
|
|
156
|
+
vue.createVNode(_component_van_icon, {
|
|
157
|
+
name: "clear",
|
|
158
|
+
class: "custom-close-icon",
|
|
159
|
+
onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => defaultDate.value = null, ["stop"]))
|
|
160
|
+
})
|
|
161
|
+
]),
|
|
162
|
+
key: "0"
|
|
163
|
+
} : void 0
|
|
164
|
+
]), 1040, ["modelValue"]);
|
|
150
165
|
};
|
|
151
166
|
}
|
|
152
167
|
};
|
package/lib/packages/mobile/src/components/form/fieldCascaderPicker/fieldCascaderPicker.vue.js
CHANGED
|
@@ -15,6 +15,7 @@ const vue = require("vue");
|
|
|
15
15
|
const index = require("../field/index.js");
|
|
16
16
|
const index$2 = require("../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/cascader/index.js");
|
|
17
17
|
const index$1 = require("../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/popup/index.js");
|
|
18
|
+
const index$3 = require("../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/icon/index.js");
|
|
18
19
|
const _sfc_main = {
|
|
19
20
|
__name: "fieldCascaderPicker",
|
|
20
21
|
props: {
|
|
@@ -81,6 +82,10 @@ const _sfc_main = {
|
|
|
81
82
|
vue.watch(
|
|
82
83
|
() => props.modelValue,
|
|
83
84
|
(value) => {
|
|
85
|
+
if (!value) {
|
|
86
|
+
fieldTextValue.value = "";
|
|
87
|
+
return;
|
|
88
|
+
}
|
|
84
89
|
fieldTextValue.value = getDisplayValue(
|
|
85
90
|
props.treeOptions,
|
|
86
91
|
props.treeOptionsFieldNames,
|
|
@@ -94,38 +99,51 @@ const _sfc_main = {
|
|
|
94
99
|
showPicker.value = false;
|
|
95
100
|
};
|
|
96
101
|
return (_ctx, _cache) => {
|
|
102
|
+
const _component_van_icon = index$3.Icon;
|
|
97
103
|
const _component_van_cascader = index$2.Cascader;
|
|
98
104
|
const _component_van_popup = index$1.Popup;
|
|
99
105
|
return vue.openBlock(), vue.createBlock(vue.unref(index.MobileField), vue.mergeProps(_ctx.$attrs, {
|
|
100
106
|
modelValue: vue.unref(fieldTextValue),
|
|
101
|
-
"onUpdate:modelValue": _cache[
|
|
107
|
+
"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => vue.isRef(fieldTextValue) ? fieldTextValue.value = $event : null),
|
|
102
108
|
"is-link": "",
|
|
103
109
|
readonly: "",
|
|
104
|
-
onClick: _cache[
|
|
105
|
-
}), {
|
|
110
|
+
onClick: _cache[5] || (_cache[5] = ($event) => showPicker.value = true)
|
|
111
|
+
}), vue.createSlots({
|
|
106
112
|
default: vue.withCtx(() => [
|
|
107
113
|
vue.createVNode(_component_van_popup, {
|
|
108
114
|
show: vue.unref(showPicker),
|
|
109
|
-
"onUpdate:show": _cache[
|
|
115
|
+
"onUpdate:show": _cache[3] || (_cache[3] = ($event) => vue.isRef(showPicker) ? showPicker.value = $event : null),
|
|
110
116
|
"destroy-on-close": "",
|
|
111
117
|
position: "bottom"
|
|
112
118
|
}, {
|
|
113
119
|
default: vue.withCtx(() => [
|
|
114
120
|
vue.createVNode(_component_van_cascader, vue.mergeProps(_ctx.$attrs, {
|
|
115
121
|
modelValue: vue.unref(pickerValue),
|
|
116
|
-
"onUpdate:modelValue": _cache[
|
|
122
|
+
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => vue.isRef(pickerValue) ? pickerValue.value = $event : null),
|
|
117
123
|
options: __props.treeOptions,
|
|
118
124
|
"field-names": __props.treeOptionsFieldNames,
|
|
119
125
|
placeholder: "请选择",
|
|
120
126
|
onFinish,
|
|
121
|
-
onClose: _cache[
|
|
127
|
+
onClose: _cache[2] || (_cache[2] = ($event) => showPicker.value = false)
|
|
122
128
|
}), null, 16, ["modelValue", "options", "field-names"])
|
|
123
129
|
]),
|
|
124
130
|
_: 1
|
|
125
131
|
}, 8, ["show"])
|
|
126
132
|
]),
|
|
127
|
-
_:
|
|
128
|
-
},
|
|
133
|
+
_: 2
|
|
134
|
+
}, [
|
|
135
|
+
vue.unref(fieldTextValue) ? {
|
|
136
|
+
name: "right-icon",
|
|
137
|
+
fn: vue.withCtx(() => [
|
|
138
|
+
vue.createVNode(_component_van_icon, {
|
|
139
|
+
name: "clear",
|
|
140
|
+
class: "custom-close-icon",
|
|
141
|
+
onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => pickerValue.value = null, ["stop"]))
|
|
142
|
+
})
|
|
143
|
+
]),
|
|
144
|
+
key: "0"
|
|
145
|
+
} : void 0
|
|
146
|
+
]), 1040, ["modelValue"]);
|
|
129
147
|
};
|
|
130
148
|
}
|
|
131
149
|
};
|
|
@@ -31,8 +31,19 @@ const _sfc_main = {
|
|
|
31
31
|
emit("update:modelValue", val.join(","));
|
|
32
32
|
}
|
|
33
33
|
});
|
|
34
|
+
const inputValue = vue.computed({
|
|
35
|
+
get: () => {
|
|
36
|
+
return compValue.value.join(",");
|
|
37
|
+
},
|
|
38
|
+
set: (val) => {
|
|
39
|
+
emit("update:modelValue", val);
|
|
40
|
+
}
|
|
41
|
+
});
|
|
34
42
|
return (_ctx, _cache) => {
|
|
35
|
-
return vue.openBlock(), vue.createBlock(vue.unref(index.MobileField), vue.mergeProps(_ctx.$attrs, {
|
|
43
|
+
return vue.openBlock(), vue.createBlock(vue.unref(index.MobileField), vue.mergeProps(_ctx.$attrs, {
|
|
44
|
+
modelValue: vue.unref(inputValue),
|
|
45
|
+
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => vue.isRef(inputValue) ? inputValue.value = $event : null)
|
|
46
|
+
}), {
|
|
36
47
|
input: vue.withCtx(() => [
|
|
37
48
|
vue.createVNode(vue.unref(index$1.MobileCheckboxGroup), vue.mergeProps(_ctx.$attrs, {
|
|
38
49
|
modelValue: vue.unref(compValue),
|
|
@@ -40,7 +51,7 @@ const _sfc_main = {
|
|
|
40
51
|
}), null, 16, ["modelValue"])
|
|
41
52
|
]),
|
|
42
53
|
_: 1
|
|
43
|
-
}, 16);
|
|
54
|
+
}, 16, ["modelValue"]);
|
|
44
55
|
};
|
|
45
56
|
}
|
|
46
57
|
};
|
|
@@ -16,8 +16,10 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
|
|
|
16
16
|
const vue = require("vue");
|
|
17
17
|
const index = require("../field/index.js");
|
|
18
18
|
const moment = require("../../../../../../node_modules/.pnpm/moment@2.30.1/node_modules/moment/dist/moment.js");
|
|
19
|
+
const dateUtil = require("../../../utils/dateUtil.js");
|
|
19
20
|
const index$2 = require("../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/date-picker/index.js");
|
|
20
21
|
const index$1 = require("../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/popup/index.js");
|
|
22
|
+
const index$3 = require("../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/icon/index.js");
|
|
21
23
|
const _sfc_main = {
|
|
22
24
|
__name: "FieldDatePicker",
|
|
23
25
|
props: {
|
|
@@ -25,18 +27,23 @@ const _sfc_main = {
|
|
|
25
27
|
type: String,
|
|
26
28
|
default: ""
|
|
27
29
|
},
|
|
28
|
-
textFormat: {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
},
|
|
32
|
-
valueFormat: {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
},
|
|
30
|
+
// textFormat: {
|
|
31
|
+
// type: String,
|
|
32
|
+
// default: "YYYY-MM-DD",
|
|
33
|
+
// },
|
|
34
|
+
// valueFormat: {
|
|
35
|
+
// type: String,
|
|
36
|
+
// default: "YYYYMMDD",
|
|
37
|
+
// },
|
|
36
38
|
dateColumnsType: {
|
|
37
39
|
type: String,
|
|
38
40
|
default: "year,month,day"
|
|
39
41
|
},
|
|
42
|
+
dateTextFormat: {
|
|
43
|
+
//0:YYYYMMDD;1: YYYY-MM-DD;2：YYYY/MM/DD；3：YYYY年MM月DD日
|
|
44
|
+
type: String,
|
|
45
|
+
default: "1"
|
|
46
|
+
},
|
|
40
47
|
readonly: false,
|
|
41
48
|
"is-link": false
|
|
42
49
|
},
|
|
@@ -46,27 +53,53 @@ const _sfc_main = {
|
|
|
46
53
|
const fieldTextValue = vue.ref("");
|
|
47
54
|
const showPicker = vue.ref(false);
|
|
48
55
|
const emit = __emit;
|
|
56
|
+
let textFormat = dateUtil.parseDateFormatter(
|
|
57
|
+
props.dateTextFormat,
|
|
58
|
+
props.dateColumnsType
|
|
59
|
+
);
|
|
60
|
+
let valueFormat = dateUtil.parseDateFormatter("0", props.dateColumnsType);
|
|
49
61
|
const pickerValue = vue.computed(() => {
|
|
62
|
+
let date;
|
|
50
63
|
if (!props.modelValue) {
|
|
51
|
-
|
|
52
|
-
|
|
64
|
+
date = moment.default();
|
|
65
|
+
} else {
|
|
66
|
+
date = moment.default(props.modelValue, valueFormat);
|
|
67
|
+
}
|
|
68
|
+
const year = date.year();
|
|
69
|
+
const month = date.month() + 1;
|
|
70
|
+
const day = date.date();
|
|
71
|
+
let value = [];
|
|
72
|
+
const columnsTypeArr = props.dateColumnsType.split(",");
|
|
73
|
+
if (columnsTypeArr.length == 1) {
|
|
74
|
+
value = [year];
|
|
75
|
+
} else if (columnsTypeArr.length == 2) {
|
|
76
|
+
value = [year, month];
|
|
77
|
+
} else if (columnsTypeArr.length == 3) {
|
|
78
|
+
value = [year, month, day];
|
|
53
79
|
}
|
|
54
|
-
const date = moment.default(props.modelValue, props.valueFormat);
|
|
55
|
-
const value = [date.year(), date.month() + 1, date.date()];
|
|
56
80
|
return value;
|
|
57
81
|
});
|
|
58
82
|
const columnsType = vue.computed(() => {
|
|
59
|
-
return props.dateColumnsType.
|
|
83
|
+
return props.dateColumnsType.split(",");
|
|
60
84
|
});
|
|
85
|
+
const formatter = (type, option) => {
|
|
86
|
+
if (type === "year") {
|
|
87
|
+
option.text += "年";
|
|
88
|
+
} else if (type === "month") {
|
|
89
|
+
option.text += "月";
|
|
90
|
+
} else if (type === "day") {
|
|
91
|
+
option.text += "日";
|
|
92
|
+
}
|
|
93
|
+
return option;
|
|
94
|
+
};
|
|
61
95
|
vue.watch(
|
|
62
96
|
() => props.modelValue,
|
|
63
97
|
(value) => {
|
|
64
98
|
if (!value) {
|
|
99
|
+
fieldTextValue.value = "";
|
|
65
100
|
return;
|
|
66
101
|
}
|
|
67
|
-
fieldTextValue.value = moment.default(value,
|
|
68
|
-
props.textFormat
|
|
69
|
-
);
|
|
102
|
+
fieldTextValue.value = moment.default(value, valueFormat).format(textFormat);
|
|
70
103
|
},
|
|
71
104
|
{ immediate: true }
|
|
72
105
|
);
|
|
@@ -74,42 +107,56 @@ const _sfc_main = {
|
|
|
74
107
|
const val = moment.default(
|
|
75
108
|
`${selectedValues[0]}${selectedValues[1]}${selectedValues[2]}`,
|
|
76
109
|
"YYYYMMDD"
|
|
77
|
-
).format(
|
|
110
|
+
).format(valueFormat);
|
|
78
111
|
emit("update:modelValue", val);
|
|
79
112
|
showPicker.value = false;
|
|
80
113
|
};
|
|
81
114
|
return (_ctx, _cache) => {
|
|
115
|
+
const _component_van_icon = index$3.Icon;
|
|
82
116
|
const _component_van_date_picker = index$2.DatePicker;
|
|
83
117
|
const _component_van_popup = index$1.Popup;
|
|
84
118
|
return vue.openBlock(), vue.createBlock(vue.unref(index.MobileField), vue.mergeProps(_ctx.$attrs, {
|
|
85
119
|
modelValue: vue.unref(fieldTextValue),
|
|
86
|
-
"onUpdate:modelValue": _cache[
|
|
120
|
+
"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => vue.isRef(fieldTextValue) ? fieldTextValue.value = $event : null),
|
|
87
121
|
"is-link": "",
|
|
88
122
|
readonly: "",
|
|
89
|
-
onClick: _cache[
|
|
90
|
-
}), {
|
|
123
|
+
onClick: _cache[5] || (_cache[5] = ($event) => showPicker.value = true)
|
|
124
|
+
}), vue.createSlots({
|
|
91
125
|
default: vue.withCtx(() => [
|
|
92
126
|
vue.createVNode(_component_van_popup, {
|
|
93
127
|
show: vue.unref(showPicker),
|
|
94
|
-
"onUpdate:show": _cache[
|
|
128
|
+
"onUpdate:show": _cache[3] || (_cache[3] = ($event) => vue.isRef(showPicker) ? showPicker.value = $event : null),
|
|
95
129
|
"destroy-on-close": "",
|
|
96
130
|
position: "bottom"
|
|
97
131
|
}, {
|
|
98
132
|
default: vue.withCtx(() => [
|
|
99
133
|
vue.createVNode(_component_van_date_picker, vue.mergeProps(_ctx.$attrs, {
|
|
100
134
|
modelValue: vue.unref(pickerValue),
|
|
101
|
-
"onUpdate:modelValue": _cache[
|
|
135
|
+
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => vue.isRef(pickerValue) ? pickerValue.value = $event : null),
|
|
102
136
|
readonly: false,
|
|
103
137
|
onConfirm,
|
|
104
138
|
columnsType: vue.unref(columnsType),
|
|
105
|
-
|
|
139
|
+
formatter,
|
|
140
|
+
onCancel: _cache[2] || (_cache[2] = ($event) => showPicker.value = false)
|
|
106
141
|
}), null, 16, ["modelValue", "columnsType"])
|
|
107
142
|
]),
|
|
108
143
|
_: 1
|
|
109
144
|
}, 8, ["show"])
|
|
110
145
|
]),
|
|
111
|
-
_:
|
|
112
|
-
},
|
|
146
|
+
_: 2
|
|
147
|
+
}, [
|
|
148
|
+
vue.unref(fieldTextValue) ? {
|
|
149
|
+
name: "right-icon",
|
|
150
|
+
fn: vue.withCtx(() => [
|
|
151
|
+
vue.createVNode(_component_van_icon, {
|
|
152
|
+
name: "clear",
|
|
153
|
+
class: "custom-close-icon",
|
|
154
|
+
onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => emit("update:modelValue", null), ["stop"]))
|
|
155
|
+
})
|
|
156
|
+
]),
|
|
157
|
+
key: "0"
|
|
158
|
+
} : void 0
|
|
159
|
+
]), 1040, ["modelValue"]);
|
|
113
160
|
};
|
|
114
161
|
}
|
|
115
162
|
};
|