@netang/quasar 0.0.25 → 0.0.28

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,12 +1,41 @@
1
1
  <template>
2
2
  <q-select
3
-
3
+ v-model="currentModelValue"
4
+ :options="currentOptions"
5
+ :option-label="optionLabel"
6
+ :use-input="filter"
7
+ @filter="onFilter"
8
+ v-bind="$attrs"
4
9
  >
10
+ <!-- 占位符 -->
11
+ <template v-slot:selected v-if="! currentModelValue && placeholder">
12
+ <div class="n-placeholder q-mr-xs">{{placeholder}}</div>
13
+ </template>
14
+
15
+ <!-- 插槽 -->
16
+ <template
17
+ v-for="slotName in slotNames"
18
+ v-slot:[slotName]="props"
19
+ >
20
+ <!-- 有传参的插槽 -->
21
+ <slot
22
+ :name="slotName"
23
+ v-bind="props"
24
+ v-if="props"
25
+ />
5
26
 
27
+ <!-- 无传参的插槽 -->
28
+ <slot
29
+ :name="slotName"
30
+ v-else
31
+ />
32
+ </template>
6
33
  </q-select>
7
34
  </template>
8
35
 
9
36
  <script>
37
+ import { ref, computed, watch } from 'vue'
38
+
10
39
  export default {
11
40
 
12
41
  /**
@@ -22,6 +51,19 @@ export default {
22
51
  modelValue: {
23
52
  required: true,
24
53
  },
54
+ options: {
55
+ type: Array,
56
+ default: () => []
57
+ },
58
+ // 选项标签
59
+ optionLabel: {
60
+ type: String,
61
+ default: 'label',
62
+ },
63
+ // 占位符
64
+ placeholder: String,
65
+ // 筛选
66
+ filter: Boolean,
25
67
  },
26
68
 
27
69
  /**
@@ -34,37 +76,78 @@ export default {
34
76
  /**
35
77
  * 组合式
36
78
  */
37
- setup(props, { emit }) {
79
+ setup(props, { emit, slots }) {
80
+
81
+ // ==========【计算属性】=========================================================================================
82
+
83
+ /**
84
+ * 插槽标识
85
+ */
86
+ const slotNames = computed(function() {
87
+ return utils.isValidObject(slots) ? Object.keys(slots) : []
88
+ })
38
89
 
39
90
  // ==========【当前值】===========================================================================================
40
91
 
92
+ // 当前值
93
+ const currentModelValue = ref(props.modelValue)
94
+
95
+ // 原始选项
96
+ const rawOptions = props.options
97
+
98
+ // 当前选项
99
+ const currentOptions = ref(rawOptions)
100
+
101
+ // ==========【监听数据】=========================================================================================
102
+
41
103
  /**
42
- * 原始值
104
+ * 监听声明值
43
105
  */
44
- const rawModelValue = props.modelValue
106
+ watch(()=>props.modelValue, function (val) {
107
+ // 设置当前值
108
+ currentModelValue.value = val
109
+ })
110
+
111
+ /**
112
+ * 监听当前值
113
+ */
114
+ watch(currentModelValue, function (val) {
115
+ // 更新值
116
+ emit('update:modelValue', val)
117
+ })
45
118
 
46
119
  // ==========【方法】============================================================================================
47
120
 
48
121
  /**
49
122
  * 筛选
50
123
  */
51
- function filter(value, update) {
124
+ function onFilter(value, update) {
52
125
  update(function() {
53
- // 更新值
54
- emit(
55
- 'update:modelValue',
56
- value === '' ? rawModelValue : utils.collection(rawModelValue)
57
- .where(props.optionLabel, 'like', value)
58
- .toArray()
59
- )
126
+ // 更新选项
127
+ currentOptions.value =
128
+ // 如果搜索值为空
129
+ value === '' ?
130
+ // 选项还原为初始值
131
+ rawOptions
132
+ // 否则筛选选项
133
+ : utils.collection(rawOptions)
134
+ .where(props.optionLabel, 'like', value)
135
+ .toArray()
60
136
  })
61
137
  }
62
138
 
63
139
  // ==========【返回】=============================================================================================
64
140
 
65
141
  return {
142
+ // 插槽标识
143
+ slotNames,
144
+ // 当前值
145
+ currentModelValue,
146
+ // 当前选项
147
+ currentOptions,
148
+
66
149
  // 筛选
67
- filter,
150
+ onFilter,
68
151
  }
69
152
  }
70
153
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@netang/quasar",
3
- "version": "0.0.25",
3
+ "version": "0.0.28",
4
4
  "description": "netang-quasar",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1"
@@ -1,67 +0,0 @@
1
- /**
2
- * 删除前后字符
3
- * @param {string} value
4
- * @param {string} char
5
- * @param {RegExp} regExp
6
- * @returns {string}
7
- */
8
- function trimExtraChar(value, char, regExp) {
9
- const index = value.indexOf(char)
10
- let prefix = ''
11
-
12
- if (index === -1) {
13
- return value
14
- }
15
-
16
- if (char === '-' && index !== 0) {
17
- return value.slice(0, index)
18
- }
19
-
20
- if (char === '.' && value.match(/^(\.|-\.)/)) {
21
- prefix = index ? '-0' : '0'
22
- }
23
-
24
- return (
25
- prefix + value.slice(0, index + 1) + value.slice(index).replace(regExp, '')
26
- )
27
- }
28
-
29
- /**
30
- * 格式化数字
31
- * @param {string} value
32
- * @param {boolean} allowDot
33
- * @param {boolean} allowMinus
34
- * @returns {string}
35
- */
36
- export function formatNumbers(
37
- value,
38
- allowDot = true,
39
- allowMinus = true
40
- ) {
41
- if (allowDot) {
42
- value = trimExtraChar(value, '.', /\./g)
43
- } else {
44
- value = value.split('.')[0]
45
- }
46
-
47
- if (allowMinus) {
48
- value = trimExtraChar(value, '-', /-/g)
49
- } else {
50
- value = value.replace(/-/, '')
51
- }
52
-
53
- const regExp = allowDot ? /[^-0-9.]/g : /[^-0-9]/g
54
-
55
- return value.replace(regExp, '')
56
- }
57
-
58
- /**
59
- * 增加数字
60
- * @param {number} num1
61
- * @param {number} num2
62
- * @returns {number}
63
- */
64
- export function addNumber(num1, num2) {
65
- const cardinal = 10 ** 10
66
- return Math.round((num1 + num2) * cardinal) / cardinal
67
- }
@@ -1,213 +0,0 @@
1
- <template>
2
- <q-input
3
- v-model="currentValue"
4
- @blur="onBlur"
5
- v-bind="$attrs"
6
- >
7
- <template
8
- v-for="slotName in slotNames"
9
- v-slot:[slotName]
10
- >
11
- <slot :name="slotName" />
12
- </template>
13
- </q-input>
14
- </template>
15
-
16
- <script>
17
- import { computed, ref, watch } from 'vue'
18
-
19
- /**
20
- * 金额(分转元)
21
- */
22
- export default {
23
-
24
- /**
25
- * 标识
26
- */
27
- name: 'NInputPrice',
28
-
29
- /**
30
- * 声明属性
31
- */
32
- props: {
33
- // 值
34
- modelValue: [String, Number],
35
- // 最小值(分)
36
- min: {
37
- type: Number,
38
- default: 1,
39
- },
40
- // 最大值(分)
41
- max: Number,
42
- },
43
-
44
- /**
45
- * 声明事件
46
- */
47
- emits: [
48
- 'update:modelValue',
49
- ],
50
-
51
- /**
52
- * 组合式
53
- */
54
- setup(props, { emit, slots }) {
55
-
56
- // ==========【数据】============================================================================================
57
-
58
- // 当前值
59
- const currentValue = ref(formatModelValue())
60
-
61
- // ==========【计算属性】==========================================================================================
62
-
63
- /**
64
- * 插槽标识数组
65
- */
66
- const slotNames = computed(function() {
67
- if (utils.isValidObject(slots)) {
68
- return Object.keys(slots)
69
- }
70
- return []
71
- })
72
-
73
- /**
74
- * 最大值
75
- */
76
- const maxValue = computed(function() {
77
- const maxValue = new BigNumber(props.max)
78
- if (maxValue.isFinite()) {
79
- return maxValue
80
- .dividedBy(100)
81
- .toNumber()
82
- }
83
- return null
84
- })
85
-
86
- /**
87
- * 最小值
88
- */
89
- const minValue = computed(function() {
90
- const maxValue = new BigNumber(props.min)
91
- if (maxValue.isFinite()) {
92
- return maxValue
93
- .dividedBy(100)
94
- .toNumber()
95
- }
96
- return null
97
- })
98
-
99
- // ==========【监听数据】=========================================================================================
100
-
101
- /**
102
- * 监听声明值
103
- */
104
- watch(()=>props.modelValue, function() {
105
- currentValue.value = formatModelValue()
106
- })
107
-
108
- // ==========【方法】=============================================================================================
109
-
110
- /**
111
- * 格式化传值
112
- */
113
- function formatModelValue() {
114
- // 分转元
115
- return utils.price(props.modelValue, '')
116
- }
117
-
118
- /**
119
- * 提交值
120
- */
121
- function emitModelValue(newVal) {
122
- // 更新值(元转分)
123
- emit('update:modelValue', utils.priceYuanToCent(newVal, ''))
124
- }
125
-
126
- /**
127
- * 失去焦点触发
128
- */
129
- function onBlur() {
130
-
131
- if (utils.isValidValue(currentValue.value)) {
132
-
133
- let val = new BigNumber(currentValue.value)
134
-
135
- if (val.isFinite()) {
136
-
137
- // 值是否有更新
138
- let isChange = false
139
-
140
- if (
141
- // 如果值 > 0
142
- val.isGreaterThan(0)
143
- // 如果值精度 > 2
144
- && val.decimalPlaces() > 2
145
- ) {
146
- // 值有更新
147
- isChange = true
148
-
149
- // 将元向下舍入 2 位精度(如 68.345 -> 68.34)
150
- val = val.decimalPlaces(2, BigNumber.ROUND_DOWN)
151
- }
152
-
153
- // 如果值 >= 最大值
154
- if (maxValue.value !== null) {
155
- if (val.isGreaterThanOrEqualTo(maxValue.value)) {
156
-
157
- // 更新当前值
158
- currentValue.value = maxValue.value
159
-
160
- // 提交值
161
- emitModelValue(currentValue.value)
162
- return
163
- }
164
- }
165
-
166
- // 如果值 <= 最小值
167
- if (minValue.value !== null) {
168
- if (val.isLessThanOrEqualTo(minValue.value)) {
169
-
170
- // 更新当前值
171
- currentValue.value = minValue.value
172
-
173
- // 提交值
174
- emitModelValue(currentValue.value)
175
- return
176
- }
177
- }
178
-
179
- // 获取最新值
180
- val = val.toNumber()
181
-
182
- if (isChange) {
183
- // 更新当前值
184
- currentValue.value = val
185
- }
186
-
187
- // 提交值
188
- emitModelValue(val)
189
- return
190
- }
191
- }
192
-
193
- // 更新当前值
194
- currentValue.value = ''
195
-
196
- // 提交值
197
- emitModelValue(currentValue.value)
198
- }
199
-
200
- // ==========【返回】=============================================================================================
201
-
202
- return {
203
- // 当前值
204
- currentValue,
205
- // 插槽标识数组
206
- slotNames,
207
-
208
- // 失去焦点触发
209
- onBlur,
210
- }
211
- },
212
- }
213
- </script>
@@ -1,179 +0,0 @@
1
- <template>
2
- <q-input
3
- v-model="currentValue"
4
- @blur="onBlur"
5
- v-bind="$attrs"
6
- >
7
- <template
8
- v-for="slotName in slotNames"
9
- v-slot:[slotName]
10
- >
11
- <slot :name="slotName" />
12
- </template>
13
- </q-input>
14
- </template>
15
-
16
- <script>
17
- import { computed, ref, watch } from 'vue'
18
-
19
- /**
20
- * 金额(元)
21
- */
22
- export default {
23
-
24
- /**
25
- * 标识
26
- */
27
- name: 'NInputPrice',
28
-
29
- /**
30
- * 声明属性
31
- */
32
- props: {
33
- // 值
34
- modelValue: [String, Number],
35
- // 最小值(元)
36
- min: {
37
- type: Number,
38
- default: 1,
39
- },
40
- // 最大值(元)
41
- max: Number,
42
- },
43
-
44
- /**
45
- * 声明事件
46
- */
47
- emits: [
48
- 'update:modelValue',
49
- ],
50
-
51
- /**
52
- * 组合式
53
- */
54
- setup(props, { emit, slots }) {
55
-
56
- // ==========【数据】============================================================================================
57
-
58
- // 当前值
59
- const currentValue = ref(props.modelValue)
60
-
61
- // ==========【计算属性】==========================================================================================
62
-
63
- /**
64
- * 插槽标识数组
65
- */
66
- const slotNames = computed(function() {
67
- if (utils.isValidObject(slots)) {
68
- return Object.keys(slots)
69
- }
70
- return []
71
- })
72
-
73
- // ==========【监听数据】=========================================================================================
74
-
75
- /**
76
- * 监听声明值
77
- */
78
- watch(()=>props.modelValue, function(val) {
79
- currentValue.value = val
80
- })
81
-
82
- // ==========【方法】=============================================================================================
83
-
84
- /**
85
- * 提交值
86
- */
87
- function emitModelValue(newVal) {
88
- // 更新值
89
- emit('update:modelValue', newVal)
90
- }
91
-
92
- /**
93
- * 失去焦点触发
94
- */
95
- function onBlur() {
96
-
97
- if (utils.isValidValue(currentValue.value)) {
98
-
99
- let val = new BigNumber(currentValue.value)
100
-
101
- if (val.isFinite()) {
102
-
103
- // 值是否有更新
104
- let isChange = false
105
-
106
- if (
107
- // 如果值 > 0
108
- val.isGreaterThan(0)
109
- // 如果值精度 > 2
110
- && val.decimalPlaces() > 2
111
- ) {
112
- // 值有更新
113
- isChange = true
114
-
115
- // 将元向下舍入 2 位精度(如 68.345 -> 68.34)
116
- val = val.decimalPlaces(2, BigNumber.ROUND_DOWN)
117
- }
118
-
119
- // 如果值 >= 最大值
120
- if (Number.isFinite(props.max)) {
121
- if (val.isGreaterThanOrEqualTo(props.max)) {
122
-
123
- // 更新当前值
124
- currentValue.value = props.max
125
-
126
- // 提交值
127
- emitModelValue(currentValue.value)
128
- return
129
- }
130
- }
131
-
132
- // 如果值 <= 最小值
133
- if (Number.isFinite(props.min)) {
134
- if (val.isLessThanOrEqualTo(props.min)) {
135
-
136
- // 更新当前值
137
- currentValue.value = props.min
138
-
139
- // 提交值
140
- emitModelValue(currentValue.value)
141
- return
142
- }
143
- }
144
-
145
- // 获取最新值
146
- val = val.toNumber()
147
-
148
- if (isChange) {
149
- // 更新当前值
150
- currentValue.value = val
151
- }
152
-
153
- // 提交值
154
- emitModelValue(val)
155
- return
156
- }
157
- }
158
-
159
- // 更新当前值
160
- currentValue.value = ''
161
-
162
- // 提交值
163
- emitModelValue(currentValue.value)
164
- }
165
-
166
- // ==========【返回】=============================================================================================
167
-
168
- return {
169
- // 当前值
170
- currentValue,
171
- // 插槽标识数组
172
- slotNames,
173
-
174
- // 失去焦点触发
175
- onBlur,
176
- }
177
- },
178
- }
179
- </script>
@@ -1,75 +0,0 @@
1
- <template>
2
- <slot
3
- :filter="filter"
4
- :optionLabel="optionLabel"
5
- />
6
- </template>
7
-
8
- <script>
9
- export default {
10
-
11
- /**
12
- * 标识
13
- */
14
- name: 'NSelectFilter',
15
-
16
- /**
17
- * 声明属性
18
- */
19
- props: {
20
- // 值
21
- modelValue: {
22
- required: true,
23
- },
24
- // 选项标签
25
- optionLabel: {
26
- type: String,
27
- default: 'label',
28
- }
29
- },
30
-
31
- /**
32
- * 声明事件
33
- */
34
- emits: [
35
- 'update:modelValue',
36
- ],
37
-
38
- /**
39
- * 组合式
40
- */
41
- setup(props, { emit }) {
42
-
43
- // ==========【当前值】===========================================================================================
44
-
45
- /**
46
- * 原始值
47
- */
48
- const rawModelValue = props.modelValue
49
-
50
- // ==========【方法】============================================================================================
51
-
52
- /**
53
- * 筛选
54
- */
55
- function filter(value, update) {
56
- update(function() {
57
- // 更新值
58
- emit(
59
- 'update:modelValue',
60
- value === '' ? rawModelValue : utils.collection(rawModelValue)
61
- .where(props.optionLabel, 'like', value)
62
- .toArray()
63
- )
64
- })
65
- }
66
-
67
- // ==========【返回】=============================================================================================
68
-
69
- return {
70
- // 筛选
71
- filter,
72
- }
73
- }
74
- }
75
- </script>