@netang/quasar 0.0.104 → 0.0.106

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.
Files changed (3) hide show
  1. package/components/field-tree/index.vue +25 -27
  2. package/package.json +1 -1
  3. package/sass/quasar/field.scss +250 -243
package/components/field-tree/index.vue CHANGED
@@ -214,25 +214,14 @@ export default {
214
214
  */
215
215
  setup(props, { emit }) {
216
216
 
217
- // ==========【计算属性】=========================================================================================
218
-
219
- /**
220
- * 显示值
221
- */
222
- const showValue = computed(function () {
223
-
224
- // 如果有已选数据
225
- return $n_isValidArray(treeTickedNodes.value)
226
- // 取已选数据第一条的标签
227
- ? treeTickedNodes.value[0].label
228
- : ''
229
- })
230
-
231
217
  // ==========【数据】============================================================================================
232
218
 
233
219
  // 是否为初始加载树节点树
234
220
  const isDefaultLoadNodes = $n_isFunction(props.nodes)
235
221
 
222
+ // 树节点是否已加载
223
+ let __treeNodesLoaded = false
224
+
236
225
  // 输入框节点
237
226
  const inputRef = ref(null)
238
227
 
@@ -251,8 +240,11 @@ export default {
251
240
  // 树节点
252
241
  const treeRef = ref(null)
253
242
 
243
+ // 当前树节点数据
244
+ const currentTreeNodes = ref(isDefaultLoadNodes ? [] : props.nodes)
245
+
254
246
  // tree all
255
- const treeAll = ref({})
247
+ const treeAll = ref(getTreeAll())
256
248
 
257
249
  // 树展开数据
258
250
  const treeExpanded = ref(getExpanded())
@@ -260,12 +252,6 @@ export default {
260
252
  // 树选择数据
261
253
  const treeTicked = ref(formatModelValue(props.modelValue))
262
254
 
263
- // 当前树节点数据
264
- const currentTreeNodes = ref(isDefaultLoadNodes ? [] : props.nodes)
265
-
266
- // 树节点是否已加载
267
- let __treeNodesLoaded = false
268
-
269
255
  // 如果为初始加载树节点树
270
256
  if (isDefaultLoadNodes) {
271
257
 
@@ -300,6 +286,18 @@ export default {
300
286
  return lists
301
287
  })
302
288
 
289
+ /**
290
+ * 显示值
291
+ */
292
+ const showValue = computed(function () {
293
+
294
+ // 如果有已选数据
295
+ return $n_isValidArray(treeTickedNodes.value)
296
+ // 取已选数据第一条的标签
297
+ ? treeTickedNodes.value[0].label
298
+ : ''
299
+ })
300
+
303
301
  // ==========【监听数据】=========================================================================================
304
302
 
305
303
  /**
@@ -365,9 +363,9 @@ export default {
365
363
  }
366
364
 
367
365
  /**
368
- * 设置 tree all
366
+ * 获取 tree all
369
367
  */
370
- function setTreeAll() {
368
+ function getTreeAll() {
371
369
 
372
370
  const all = {}
373
371
 
@@ -376,7 +374,7 @@ export default {
376
374
  _getTreeChildren(all, currentTreeNodes.value, 0, '')
377
375
  }
378
376
 
379
- treeAll.value = all
377
+ return all
380
378
  }
381
379
 
382
380
  /**
@@ -658,7 +656,7 @@ export default {
658
656
  currentTreeNodes.value = resNodes
659
657
 
660
658
  // 设置 tree all
661
- setTreeAll()
659
+ treeAll.value = getTreeAll()
662
660
 
663
661
  // 设置开数据
664
662
  treeExpanded.value = getExpanded()
@@ -669,7 +667,7 @@ export default {
669
667
  currentTreeNodes.value = []
670
668
 
671
669
  // 设置 tree all
672
- setTreeAll()
670
+ treeAll.value = getTreeAll()
673
671
  }
674
672
 
675
673
  // 否则为节点数组数据
@@ -679,7 +677,7 @@ export default {
679
677
  currentTreeNodes.value = $n_isValidArray(props.nodes) ? props.nodes : []
680
678
 
681
679
  // 设置 tree all
682
- setTreeAll()
680
+ treeAll.value = getTreeAll()
683
681
  }
684
682
 
685
683
  // 设置显示树
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@netang/quasar",
3
- "version": "0.0.104",
3
+ "version": "0.0.106",
4
4
  "description": "netang-quasar",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1"
package/sass/quasar/field.scss CHANGED
@@ -1,243 +1,250 @@
1
- /**
2
- * 输入框
3
- */
4
- .q-field {
5
- &--outlined {
6
- .q-field__control {
7
- // 输入框边框颜色
8
- &:after {
9
- border-width: 1px !important;
10
- }
11
-
12
- // 输入框边框颜色
13
- &:before {
14
- border-color: rgba(var(--n-reverse-color-rgb), 0.15) !important;
15
- }
16
- }
17
-
18
- // 输入框激活后高亮
19
- &.q-field--highlighted {
20
- // 输入框激活后高亮边框宽度
21
- .q-field__control:after {
22
- border-width: 1px !important;
23
- }
24
-
25
- // 输入框触碰边框颜色
26
- &:hover:before {
27
- border-color: rgba(var(--n-reverse-color-rgb), 0.4) !important;
28
- }
29
- }
30
- }
31
-
32
- &--labeled {
33
- &.q-field--float {
34
- .q-field__native,
35
- .q-field__input {
36
- &::-webkit-input-placeholder {
37
- color: var(--n-placeholder-color) !important;
38
- }
39
- &::-moz-placeholder {
40
- color: var(--n-placeholder-color) !important;
41
- }
42
- &::-ms-input-placeholder {
43
- color: var(--n-placeholder-color) !important;
44
- }
45
- &::-ms-input-placeholder {
46
- color: var(--n-placeholder-color) !important;
47
- }
48
- &::placeholder {
49
- color: var(--n-placeholder-color) !important;
50
- }
51
- }
52
- }
53
- }
54
- }
55
-
56
- /**
57
- * 分组
58
- */
59
- .n-field-group {
60
- > .q-field--outlined {
61
- // 非第一个子节点
62
- &:not(:first-child) {
63
- .q-field__control {
64
- &:before {
65
- left: -1px;
66
- border-left-color: transparent !important;
67
- }
68
- border-top-left-radius: inherit !important;
69
- border-bottom-left-radius: inherit !important;
70
- }
71
- }
72
- // 非最后一个子节点
73
- &:not(:last-child) {
74
- .q-field__control {
75
- border-top-right-radius: inherit !important;
76
- border-bottom-right-radius: inherit !important;
77
- }
78
- }
79
- }
80
-
81
- > .n-field-group {
82
-
83
- // 非第一个子节点
84
- &:not(:first-child) {
85
- margin-top: -1px;
86
-
87
- .q-field--outlined {
88
-
89
- // 第一个子节点
90
- &:first-child {
91
- .q-field__control {
92
- border-top-left-radius: inherit !important;
93
- }
94
- }
95
-
96
- // 最后一个子节点
97
- &:first-child {
98
- .q-field__control {
99
- border-top-right-radius: inherit !important;
100
- }
101
- }
102
-
103
- .q-field__control {
104
- &:before {
105
- border-top-color: transparent !important;
106
- }
107
- }
108
- }
109
- }
110
-
111
- // 非最后一个子节点
112
- &:not(:last-child) {
113
- .q-field--outlined {
114
-
115
- // 第一个子节点
116
- &:first-child {
117
- .q-field__control {
118
- border-bottom-left-radius: inherit !important;
119
- }
120
- }
121
-
122
- // 最后一个子节点
123
- &:first-child {
124
- .q-field__control {
125
- border-bottom-right-radius: inherit !important;
126
- }
127
- }
128
- }
129
- }
130
- }
131
- }
132
-
133
- /**
134
- * 字段集样式
135
- */
136
- .n-field-fieldset {
137
- &.q-field {
138
-
139
- // 紧凑模式
140
- &--dense {
141
- // 紧凑模式最小高度
142
- //.q-field__control,
143
- //.q-field__marginal {
144
- // min-height: 44px;
145
- //}
146
-
147
- &.q-field--float {
148
- .q-field__label {
149
- transform: translateY(-80%) scale(0.85) !important;
150
- }
151
- }
152
-
153
- // 文本框的上边距
154
- &.q-textarea.q-field--labeled .q-field__control-container {
155
- padding-top: 5px;
156
- }
157
-
158
- // 底部
159
- .q-field__bottom {
160
- position: absolute;
161
- padding: 0;
162
-
163
- .q-field__messages {
164
- position: absolute;
165
- top: -8px;
166
- right: 5px;
167
- line-height: 16px;
168
- padding: 0 6px;
169
- border-radius: 6px;
170
- background-color: #ffffff;
171
- }
172
- }
173
- }
174
-
175
- &--labeled {
176
- .q-field__prefix,
177
- .q-field__suffix,
178
- .q-field__native {
179
- padding-top: 5px !important;
180
- padding-bottom: 5px !important;
181
- }
182
-
183
- .q-field__label {
184
- left: -6px;
185
- padding: 0 6px;
186
- z-index: 1 !important;
187
- border-radius: 6px;
188
- }
189
- }
190
-
191
- &--float {
192
- .q-field__prefix,
193
- .q-field__suffix,
194
- .q-field__native {
195
- padding-top: 7px !important;
196
- }
197
-
198
- .q-field__label {
199
- transform: translateY(-120%) scale(0.85) !important;
200
- background-color: var(--n-mode-color) !important;
201
- }
202
- }
203
-
204
- .q-field__native,
205
- .q-field__input {
206
- z-index: 2;
207
- }
208
-
209
- // 底部
210
- &--with-bottom {
211
- padding-bottom: 0;
212
- }
213
- }
214
-
215
- &.q-field--auto-height.q-field--labeled .q-field__control-container {
216
- padding-top: 4px;
217
- }
218
- }
219
-
220
- /**
221
- * 亮色
222
- */
223
- .body--light {
224
- // 输入框背景 白色
225
- .n-field-fieldset {
226
- &.q-field {
227
- &--outlined {
228
- .q-field__inner {
229
- &:before {
230
- content: "";
231
- position: absolute;
232
- top: 1px;
233
- left: 0;
234
- right: 0;
235
- bottom: 1px;
236
- border-radius: 4px;
237
- background-color: #ffffff;
238
- }
239
- }
240
- }
241
- }
242
- }
243
- }
1
+ /**
2
+ * 输入框
3
+ */
4
+ .q-field {
5
+ &--outlined {
6
+ .q-field__control {
7
+ // 输入框边框颜色
8
+ &:after {
9
+ border-width: 1px !important;
10
+ }
11
+
12
+ // 输入框边框颜色
13
+ &:before {
14
+ border-color: rgba(var(--n-reverse-color-rgb), 0.15) !important;
15
+ }
16
+ }
17
+
18
+ // 输入框激活后高亮
19
+ &.q-field--highlighted {
20
+ // 输入框激活后高亮边框宽度
21
+ .q-field__control:after {
22
+ border-width: 1px !important;
23
+ }
24
+
25
+ // 输入框触碰边框颜色
26
+ &:hover:before {
27
+ border-color: rgba(var(--n-reverse-color-rgb), 0.4) !important;
28
+ }
29
+ }
30
+ }
31
+
32
+ &--labeled {
33
+ &.q-field--float {
34
+ .q-field__native,
35
+ .q-field__input {
36
+ &::-webkit-input-placeholder {
37
+ color: var(--n-placeholder-color) !important;
38
+ }
39
+ &::-moz-placeholder {
40
+ color: var(--n-placeholder-color) !important;
41
+ }
42
+ &::-ms-input-placeholder {
43
+ color: var(--n-placeholder-color) !important;
44
+ }
45
+ &::-ms-input-placeholder {
46
+ color: var(--n-placeholder-color) !important;
47
+ }
48
+ &::placeholder {
49
+ color: var(--n-placeholder-color) !important;
50
+ }
51
+ }
52
+ }
53
+ }
54
+ }
55
+
56
+ /**
57
+ * 分组
58
+ */
59
+ .n-field-group {
60
+ > .q-field--outlined {
61
+ // 非第一个子节点
62
+ &:not(:first-child) {
63
+ .q-field__control {
64
+ &:before {
65
+ left: -1px;
66
+ border-left-color: transparent !important;
67
+ }
68
+ border-top-left-radius: inherit !important;
69
+ border-bottom-left-radius: inherit !important;
70
+ }
71
+ }
72
+ // 非最后一个子节点
73
+ &:not(:last-child) {
74
+ .q-field__control {
75
+ border-top-right-radius: inherit !important;
76
+ border-bottom-right-radius: inherit !important;
77
+ }
78
+ }
79
+ }
80
+
81
+ > .n-field-group {
82
+
83
+ // 非第一个子节点
84
+ &:not(:first-child) {
85
+ margin-top: -1px;
86
+
87
+ .q-field--outlined {
88
+
89
+ // 第一个子节点
90
+ &:first-child {
91
+ .q-field__control {
92
+ border-top-left-radius: inherit !important;
93
+ }
94
+ }
95
+
96
+ // 最后一个子节点
97
+ &:first-child {
98
+ .q-field__control {
99
+ border-top-right-radius: inherit !important;
100
+ }
101
+ }
102
+
103
+ .q-field__control {
104
+ &:before {
105
+ border-top-color: transparent !important;
106
+ }
107
+ }
108
+ }
109
+ }
110
+
111
+ // 非最后一个子节点
112
+ &:not(:last-child) {
113
+ .q-field--outlined {
114
+
115
+ // 第一个子节点
116
+ &:first-child {
117
+ .q-field__control {
118
+ border-bottom-left-radius: inherit !important;
119
+ }
120
+ }
121
+
122
+ // 最后一个子节点
123
+ &:first-child {
124
+ .q-field__control {
125
+ border-bottom-right-radius: inherit !important;
126
+ }
127
+ }
128
+ }
129
+ }
130
+ }
131
+ }
132
+
133
+ /**
134
+ * 字段集样式
135
+ */
136
+ .n-field-fieldset {
137
+ &.q-field {
138
+
139
+ // 紧凑模式
140
+ &--dense {
141
+ // 紧凑模式最小高度
142
+ //.q-field__control,
143
+ //.q-field__marginal {
144
+ // min-height: 44px;
145
+ //}
146
+
147
+ &.q-field--float {
148
+ .q-field__label {
149
+ transform: translateY(-80%) scale(0.85) !important;
150
+ }
151
+ }
152
+
153
+ // 文本框的上边距
154
+ &.q-textarea.q-field--labeled .q-field__control-container {
155
+ padding-top: 5px;
156
+ }
157
+
158
+ // 底部
159
+ .q-field__bottom {
160
+ position: absolute;
161
+ padding: 0;
162
+
163
+ .q-field__messages {
164
+ position: absolute;
165
+ top: -8px;
166
+ right: 5px;
167
+ line-height: 16px;
168
+ padding: 0 6px;
169
+ border-radius: 6px;
170
+ background-color: #ffffff;
171
+ }
172
+ }
173
+ }
174
+
175
+ &--labeled {
176
+ .q-field__prefix,
177
+ .q-field__suffix,
178
+ .q-field__native {
179
+ padding-top: 5px !important;
180
+ padding-bottom: 5px !important;
181
+ }
182
+
183
+ .q-field__label {
184
+ left: -6px;
185
+ padding: 0 6px;
186
+ z-index: 1 !important;
187
+ border-radius: 6px;
188
+ }
189
+ }
190
+
191
+ &--float {
192
+ .q-field__prefix,
193
+ .q-field__suffix,
194
+ .q-field__native {
195
+ padding-top: 7px !important;
196
+ }
197
+
198
+ .q-field__label {
199
+ transform: translateY(-120%) scale(0.85) !important;
200
+ background-color: var(--n-mode-color) !important;
201
+ }
202
+ }
203
+
204
+ .q-field__native,
205
+ .q-field__input {
206
+ z-index: 2;
207
+ }
208
+
209
+ // 底部
210
+ &--with-bottom {
211
+ padding-bottom: 0;
212
+ }
213
+
214
+ // 用于解决搜索中撑破的问题
215
+ .q-field__control {
216
+ .q-field__input.col {
217
+ width: 100%;
218
+ }
219
+ }
220
+ }
221
+
222
+ &.q-field--auto-height.q-field--labeled .q-field__control-container {
223
+ padding-top: 4px;
224
+ }
225
+ }
226
+
227
+ /**
228
+ * 亮色
229
+ */
230
+ .body--light {
231
+ // 输入框背景 白色
232
+ .n-field-fieldset {
233
+ &.q-field {
234
+ &--outlined {
235
+ .q-field__inner {
236
+ &:before {
237
+ content: "";
238
+ position: absolute;
239
+ top: 1px;
240
+ left: 0;
241
+ right: 0;
242
+ bottom: 1px;
243
+ border-radius: 4px;
244
+ background-color: #ffffff;
245
+ }
246
+ }
247
+ }
248
+ }
249
+ }
250
+ }