@netang/quasar 0.0.103 → 0.0.104

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 (4) hide show
  1. package/components/search/index.vue +224 -222
  2. package/components/search-item/index.vue +212 -210
  3. package/package.json +1 -1
  4. package/sass/common.scss +179 -174
package/components/search/index.vue CHANGED
@@ -1,222 +1,224 @@
1
- <template>
2
- <div class="flex column absolute-full" v-if="isValidArray(options)">
3
- <q-scroll-area class="n-flex-1">
4
-
5
- <div class="n-search q-pa-sm q-pt-sm q-gutter-sm">
6
-
7
- <template
8
- v-for="(item, itemIndex) in options"
9
- >
10
- <template v-if="! item.hide">
11
-
12
- <!-- 如果有 name 插槽 -->
13
- <slot
14
- :name="`name-${item.name}`"
15
- :item="item"
16
- :item-index="itemIndex"
17
- v-if="$slots[`name-${item.name}`]"
18
- />
19
-
20
- <!-- 否则自定义组件 -->
21
- <n-search-item
22
- :data="item"
23
- v-model="modelValue[itemIndex]"
24
- v-slot="{ label, index, multiple }"
25
- v-else
26
- >
27
- <!-- 日期 -->
28
- <template v-if="item.type === 'date'">
29
-
30
- <!-- 日期 -->
31
- <n-field-date
32
- class="n-field-fieldset n-flex-1"
33
- :label="label"
34
- v-model="modelValue[itemIndex][index].value"
35
- :type="modelValue[itemIndex][0].dateType"
36
- dense
37
- :is-end-date="index === 1"
38
- outlined
39
- clearable
40
- />
41
-
42
- <!-- 日期类型 -->
43
- <q-select
44
- v-model="modelValue[itemIndex][0].dateType"
45
- :options="[
46
- { label: '年', value: 'year' },
47
- { label: '月', value: 'month' },
48
- { label: '日', value: 'day' },
49
- { label: '时', value: 'datetime' },
50
- ]"
51
- map-options
52
- emit-value
53
- outlined
54
- dense
55
- options-dense
56
- v-if="index === 0"
57
- />
58
- </template>
59
-
60
- <!-- 数字输入框 价格 -->
61
- <n-input-number
62
- class="n-field-fieldset"
63
- :label="label"
64
- v-model="modelValue[itemIndex][index].value"
65
- dense
66
- outlined
67
- clearable
68
-
69
- :decimal-length="2"
70
- :cent-to-yuan="centToYuan"
71
-
72
- v-bind="item.input"
73
- v-else-if="item.type === 'price'"
74
- />
75
-
76
- <!-- 输入框 -->
77
- <template v-else-if="item.searchType === 'input'">
78
- <q-input
79
- class="n-field-fieldset"
80
- :label="label"
81
- v-model="modelValue[itemIndex][index].value"
82
- dense
83
- outlined
84
- clearable
85
- v-bind="item.input"
86
- />
87
- </template>
88
-
89
- <!-- 下拉列表 -->
90
- <q-select
91
- class="n-field-fieldset"
92
- :label="label"
93
- v-model="modelValue[itemIndex][index].value"
94
- map-options
95
- emit-value
96
- outlined
97
- dense
98
- :multiple="multiple"
99
- :use-chips="multiple"
100
- options-dense
101
- clearable
102
- v-bind="item.select"
103
- v-else-if="item.searchType === 'select'"
104
- />
105
-
106
- <!-- 下拉树 -->
107
- <n-field-tree
108
- class="n-field-fieldset"
109
- :label="label"
110
- v-model="modelValue[itemIndex][index].value"
111
- dense
112
- outlined
113
- :multiple="multiple"
114
- v-bind="item.tree"
115
- v-else-if="item.searchType === 'tree'"
116
- />
117
-
118
- <!-- 下拉表格 -->
119
- <n-field-table
120
- class="n-field-fieldset"
121
- :label="label"
122
- v-model="modelValue[itemIndex][index].value"
123
- dense
124
- outlined
125
- :value-type="multiple ? 'stringArray' : 'string'"
126
- :multiple="multiple"
127
- v-bind="item.table"
128
- v-else-if="item.searchType === 'table'"
129
- />
130
-
131
- </n-search-item>
132
- </template>
133
- </template>
134
- </div>
135
- </q-scroll-area>
136
-
137
- <!-- 底部 -->
138
- <q-toolbar
139
- class="q-footer q-footer--bordered"
140
- :class="{
141
- 'bg-grey-2': ! $q.dark.isActive,
142
- }"
143
- >
144
- <div class="row n-flex-1 q-gutter-sm">
145
- <q-btn
146
- class="n-flex-1"
147
- color="default"
148
- outline
149
- label="搜索"
150
- icon="search"
151
- @click="onSearch"
152
- unelevated
153
- />
154
- <q-btn
155
- class="q-pl-md"
156
- color="default"
157
- outline
158
- label="重置"
159
- @click="onReset"
160
- unelevated
161
- />
162
- </div>
163
- </q-toolbar>
164
- </div>
165
- </template>
166
-
167
- <script>
168
- import NSearchItem from '../search-item'
169
- import NFieldDate from '../field-date'
170
- import NInputNumber from '../input-number'
171
- import NFieldTree from '../field-tree'
172
- import NFieldTable from '../field-table'
173
-
174
- import $n_isValidArray from '@netang/utils/isValidArray'
175
-
176
- import $n_config from '../../utils/config'
177
-
178
- export default {
179
-
180
- /**
181
- * 标识
182
- */
183
- name: 'NSearch',
184
-
185
- /**
186
- * 组件
187
- */
188
- components: {
189
- NSearchItem,
190
- NFieldDate,
191
- NInputNumber,
192
- NFieldTree,
193
- NFieldTable,
194
- },
195
-
196
- /**
197
- * 声明属性
198
- */
199
- props: {
200
- // 值
201
- modelValue: Array,
202
- // 参数
203
- options: Array,
204
- // 搜索
205
- onSearch: Function,
206
- // 重置
207
- onReset: Function,
208
- },
209
-
210
- /**
211
- * 组合式
212
- */
213
- setup() {
214
- return {
215
- // 如果金额为分
216
- centToYuan: $n_config('priceCentToYuan') === true,
217
-
218
- isValidArray: $n_isValidArray,
219
- }
220
- }
221
- }
222
- </script>
1
+ <template>
2
+ <div class="flex column absolute-full" v-if="isValidArray(options)">
3
+ <q-scroll-area
4
+ class="n-flex-1"
5
+ content-style="n-overflow-hidden-x"
6
+ >
7
+ <div class="n-search q-pa-sm q-pt-sm q-gutter-sm">
8
+
9
+ <template
10
+ v-for="(item, itemIndex) in options"
11
+ >
12
+ <template v-if="! item.hide">
13
+
14
+ <!-- 如果有 name 插槽 -->
15
+ <slot
16
+ :name="`name-${item.name}`"
17
+ :item="item"
18
+ :item-index="itemIndex"
19
+ v-if="$slots[`name-${item.name}`]"
20
+ />
21
+
22
+ <!-- 否则自定义组件 -->
23
+ <n-search-item
24
+ :data="item"
25
+ v-model="modelValue[itemIndex]"
26
+ v-slot="{ label, index, multiple }"
27
+ v-else
28
+ >
29
+ <!-- 日期 -->
30
+ <template v-if="item.type === 'date'">
31
+
32
+ <!-- 日期 -->
33
+ <n-field-date
34
+ class="n-field-fieldset n-flex-1"
35
+ :label="label"
36
+ v-model="modelValue[itemIndex][index].value"
37
+ :type="modelValue[itemIndex][0].dateType"
38
+ dense
39
+ :is-end-date="index === 1"
40
+ outlined
41
+ clearable
42
+ />
43
+
44
+ <!-- 日期类型 -->
45
+ <q-select
46
+ v-model="modelValue[itemIndex][0].dateType"
47
+ :options="[
48
+ { label: '年', value: 'year' },
49
+ { label: '月', value: 'month' },
50
+ { label: '日', value: 'day' },
51
+ { label: '时', value: 'datetime' },
52
+ ]"
53
+ map-options
54
+ emit-value
55
+ outlined
56
+ dense
57
+ options-dense
58
+ v-if="index === 0"
59
+ />
60
+ </template>
61
+
62
+ <!-- 数字输入框 价格 -->
63
+ <n-input-number
64
+ class="n-field-fieldset"
65
+ :label="label"
66
+ v-model="modelValue[itemIndex][index].value"
67
+ dense
68
+ outlined
69
+ clearable
70
+
71
+ :decimal-length="2"
72
+ :cent-to-yuan="centToYuan"
73
+
74
+ v-bind="item.input"
75
+ v-else-if="item.type === 'price'"
76
+ />
77
+
78
+ <!-- 输入框 -->
79
+ <template v-else-if="item.searchType === 'input'">
80
+ <q-input
81
+ class="n-field-fieldset"
82
+ :label="label"
83
+ v-model="modelValue[itemIndex][index].value"
84
+ dense
85
+ outlined
86
+ clearable
87
+ v-bind="item.input"
88
+ />
89
+ </template>
90
+
91
+ <!-- 下拉列表 -->
92
+ <q-select
93
+ class="n-field-fieldset"
94
+ :label="label"
95
+ v-model="modelValue[itemIndex][index].value"
96
+ map-options
97
+ emit-value
98
+ outlined
99
+ dense
100
+ :multiple="multiple"
101
+ :use-chips="multiple"
102
+ options-dense
103
+ clearable
104
+ v-bind="item.select"
105
+ v-else-if="item.searchType === 'select'"
106
+ />
107
+
108
+ <!-- 下拉树 -->
109
+ <n-field-tree
110
+ class="n-field-fieldset"
111
+ :label="label"
112
+ v-model="modelValue[itemIndex][index].value"
113
+ dense
114
+ outlined
115
+ :multiple="multiple"
116
+ v-bind="item.tree"
117
+ v-else-if="item.searchType === 'tree'"
118
+ />
119
+
120
+ <!-- 下拉表格 -->
121
+ <n-field-table
122
+ class="n-field-fieldset"
123
+ :label="label"
124
+ v-model="modelValue[itemIndex][index].value"
125
+ dense
126
+ outlined
127
+ :value-type="multiple ? 'stringArray' : 'string'"
128
+ :multiple="multiple"
129
+ v-bind="item.table"
130
+ v-else-if="item.searchType === 'table'"
131
+ />
132
+
133
+ </n-search-item>
134
+ </template>
135
+ </template>
136
+ </div>
137
+ </q-scroll-area>
138
+
139
+ <!-- 底部 -->
140
+ <q-toolbar
141
+ class="q-footer q-footer--bordered"
142
+ :class="{
143
+ 'bg-grey-2': ! $q.dark.isActive,
144
+ }"
145
+ >
146
+ <div class="row n-flex-1 q-gutter-sm">
147
+ <q-btn
148
+ class="n-flex-1"
149
+ color="default"
150
+ outline
151
+ label="搜索"
152
+ icon="search"
153
+ @click="onSearch"
154
+ unelevated
155
+ />
156
+ <q-btn
157
+ class="q-pl-md"
158
+ color="default"
159
+ outline
160
+ label="重置"
161
+ @click="onReset"
162
+ unelevated
163
+ />
164
+ </div>
165
+ </q-toolbar>
166
+ </div>
167
+ </template>
168
+
169
+ <script>
170
+ import NSearchItem from '../search-item'
171
+ import NFieldDate from '../field-date'
172
+ import NInputNumber from '../input-number'
173
+ import NFieldTree from '../field-tree'
174
+ import NFieldTable from '../field-table'
175
+
176
+ import $n_isValidArray from '@netang/utils/isValidArray'
177
+
178
+ import $n_config from '../../utils/config'
179
+
180
+ export default {
181
+
182
+ /**
183
+ * 标识
184
+ */
185
+ name: 'NSearch',
186
+
187
+ /**
188
+ * 组件
189
+ */
190
+ components: {
191
+ NSearchItem,
192
+ NFieldDate,
193
+ NInputNumber,
194
+ NFieldTree,
195
+ NFieldTable,
196
+ },
197
+
198
+ /**
199
+ * 声明属性
200
+ */
201
+ props: {
202
+ // 值
203
+ modelValue: Array,
204
+ // 参数
205
+ options: Array,
206
+ // 搜索
207
+ onSearch: Function,
208
+ // 重置
209
+ onReset: Function,
210
+ },
211
+
212
+ /**
213
+ * 组合式
214
+ */
215
+ setup() {
216
+ return {
217
+ // 如果金额为分
218
+ centToYuan: $n_config('priceCentToYuan') === true,
219
+
220
+ isValidArray: $n_isValidArray,
221
+ }
222
+ }
223
+ }
224
+ </script>
package/components/search-item/index.vue CHANGED
@@ -1,210 +1,212 @@
1
- <template>
2
- <div class="n-search__item n-field-group">
3
-
4
- <!-- 比较1 -->
5
- <div class="n-field-group row no-wrap">
6
-
7
- <!-- 比较类型1 -->
8
- <q-select
9
- class="n-field-group__select"
10
- v-model="modelValue[0].compare"
11
- :options="data.compareOptions1"
12
- :disable="data.compareOptions1.length === 1"
13
- map-options
14
- emit-value
15
- outlined
16
- stack-label
17
- dense
18
- options-dense
19
- />
20
-
21
- <q-input
22
- class="n-field-fieldset"
23
- :label="data.label"
24
- dense
25
- outlined
26
- disable
27
- v-if="data.type === 'date' && modelValue[0].compare >= 20"
28
- />
29
-
30
- <!-- 多选(类型为 in / not in)-->
31
- <slot
32
- :label="data.label"
33
- :index="0"
34
- :multiple="indexOf([dicts.SEARCH_COMPARE_TYPE__IN, dicts.SEARCH_COMPARE_TYPE__NOT_IN], modelValue[0].compare) > -1"
35
- v-else
36
- />
37
- </div>
38
-
39
- <!-- 比较2(类型为 > / >=) -->
40
- <div
41
- class="n-field-group row"
42
- v-if="data.compareOptions2.length && indexOf([dicts.SEARCH_TYPE__GT, dicts.SEARCH_TYPE__GTE], modelValue[0].compare) > -1"
43
- >
44
- <!-- 比较类型2 -->
45
- <q-select
46
- class="n-field-group__select"
47
- v-model="modelValue[1].compare"
48
- :options="data.compareOptions2"
49
- :disable="data.compareOptions2.length === 1"
50
- map-options
51
- emit-value
52
- outlined
53
- dense
54
- options-dense
55
- />
56
-
57
- <slot
58
- :label="undefined"
59
- :multiple="false"
60
- :index="1"
61
- />
62
- </div>
63
- </div>
64
- </template>
65
-
66
- <script>
67
- import { watch } from 'vue'
68
-
69
- import $n_isArray from 'lodash/isArray'
70
- import $n_cloneDeep from 'lodash/cloneDeep'
71
-
72
- import $n_split from '@netang/utils/split'
73
- import $n_indexOf from '@netang/utils/indexOf'
74
- import $n_numberDeep from '@netang/utils/numberDeep'
75
-
76
- import { configs } from '../../utils/config'
77
-
78
- const {
79
- // 字典常量
80
- dicts,
81
- } = configs
82
-
83
- export default {
84
-
85
- /**
86
- * 标识
87
- */
88
- name: 'NSearchItem',
89
-
90
- /**
91
- * 声明属性
92
- */
93
- props: {
94
- // 值
95
- modelValue: Array,
96
- // 数据
97
- data: Object,
98
- },
99
-
100
- /**
101
- * 声明事件
102
- */
103
- emits: [
104
- 'update:modelValue',
105
- ],
106
-
107
- /**
108
- * 组合式
109
- */
110
- setup(props, { emit }) {
111
-
112
- // ==========【监听数据】=========================================================================================
113
-
114
- /**
115
- * 监听值的比较类型
116
- */
117
- watch(()=>props.modelValue[0].compare, function(compare) {
118
-
119
- // 获取当前值
120
- const value = props.modelValue[0].value
121
-
122
- // 如果类型为 in / not in, 则为多选
123
- // --------------------------------------------------
124
- if ($n_indexOf([dicts.SEARCH_COMPARE_TYPE__IN, dicts.SEARCH_COMPARE_TYPE__NOT_IN], compare) > -1) {
125
-
126
- // 如果当前值不为数组
127
- if (! $n_isArray(value)) {
128
-
129
- // 则将值转为数组
130
- // 触发更新值
131
- emitModelValue($n_split(value, ','))
132
- }
133
-
134
- // 否则为单选 && 如果值为: 数组
135
- // --------------------------------------------------
136
- } else if ($n_isArray(value)) {
137
-
138
- // 触发更新值
139
- emitModelValue(value.length ? $n_numberDeep(value[0]) : '')
140
-
141
- // 否则为单选 && 值为: 字符串 / 数字
142
- // --------------------------------------------------
143
- } else {
144
-
145
- // 将值转为数组
146
- const arr = $n_split(value, ',')
147
-
148
- // 如果数组长度不为 1, 则说明有多个值 || 无值
149
- if (arr.length !== 1) {
150
-
151
- // 触发更新值
152
- emitModelValue(arr.length > 1 ? arr[0] : '')
153
- }
154
- }
155
- })
156
-
157
- // ==========【方法】=============================================================================================
158
-
159
- /**
160
- * 触发更新值
161
- */
162
- function emitModelValue(value) {
163
-
164
- // 克隆值
165
- const _modelValue = $n_cloneDeep(props.modelValue)
166
-
167
- // 更新值
168
- _modelValue[0].value = value
169
-
170
- // 更新值
171
- emit('update:modelValue', _modelValue)
172
- }
173
-
174
- // ==========【返回】=============================================================================================
175
-
176
- return {
177
- dicts,
178
- indexOf: $n_indexOf,
179
- }
180
- },
181
- }
182
- </script>
183
-
184
- <style lang="scss">
185
- .n-search__item {
186
- .n-field-group {
187
- > .q-field--outlined {
188
-
189
- // 第一个子节点
190
- &:first-child,
191
- // 第三个子节点
192
- &:nth-child(3) {
193
- .q-field__control {
194
- height: 100% !important;
195
- background-color: rgba(var(--n-reverse-color-rgb), 0.04);
196
-
197
- .q-field__marginal {
198
- height: 100% !important;
199
- }
200
- }
201
- }
202
-
203
- // 第二个子节点
204
- &:nth-child(2) {
205
- flex: 1;
206
- }
207
- }
208
- }
209
- }
210
- </style>
1
+ <template>
2
+ <div class="n-search__item n-field-group">
3
+
4
+ <!-- 比较1 -->
5
+ <div class="n-field-group row no-wrap">
6
+
7
+ <!-- 比较类型1 -->
8
+ <q-select
9
+ class="n-field-group__select"
10
+ v-model="modelValue[0].compare"
11
+ :options="data.compareOptions1"
12
+ :disable="data.compareOptions1.length === 1"
13
+ map-options
14
+ emit-value
15
+ outlined
16
+ stack-label
17
+ dense
18
+ options-dense
19
+ />
20
+
21
+ <q-input
22
+ class="n-field-fieldset"
23
+ :label="data.label"
24
+ dense
25
+ outlined
26
+ disable
27
+ v-if="data.type === 'date' && modelValue[0].compare >= 20"
28
+ />
29
+
30
+ <!-- 多选(类型为 in / not in)-->
31
+ <slot
32
+ :label="data.label"
33
+ :index="0"
34
+ :multiple="indexOf([dicts.SEARCH_COMPARE_TYPE__IN, dicts.SEARCH_COMPARE_TYPE__NOT_IN], modelValue[0].compare) > -1"
35
+ v-else
36
+ />
37
+ </div>
38
+
39
+ <!-- 比较2(类型为 > / >=) -->
40
+ <div
41
+ class="n-field-group row"
42
+ v-if="data.compareOptions2.length && indexOf([dicts.SEARCH_COMPARE_TYPE__GT, dicts.SEARCH_COMPARE_TYPE__GTE], modelValue[0].compare) > -1"
43
+ >
44
+ <!-- 比较类型2 -->
45
+ <q-select
46
+ class="n-field-group__select"
47
+ v-model="modelValue[1].compare"
48
+ :options="data.compareOptions2"
49
+ :disable="data.compareOptions2.length === 1"
50
+ map-options
51
+ emit-value
52
+ outlined
53
+ dense
54
+ options-dense
55
+ />
56
+
57
+ <slot
58
+ :label="undefined"
59
+ :multiple="false"
60
+ :index="1"
61
+ />
62
+ </div>
63
+ </div>
64
+ </template>
65
+
66
+ <script>
67
+ import { watch } from 'vue'
68
+
69
+ import $n_isArray from 'lodash/isArray'
70
+ import $n_cloneDeep from 'lodash/cloneDeep'
71
+
72
+ import $n_split from '@netang/utils/split'
73
+ import $n_indexOf from '@netang/utils/indexOf'
74
+ import $n_numberDeep from '@netang/utils/numberDeep'
75
+
76
+ import { configs } from '../../utils/config'
77
+
78
+ const {
79
+ // 字典常量
80
+ dicts,
81
+ } = configs
82
+
83
+ export default {
84
+
85
+ /**
86
+ * 标识
87
+ */
88
+ name: 'NSearchItem',
89
+
90
+ /**
91
+ * 声明属性
92
+ */
93
+ props: {
94
+ // 值
95
+ modelValue: Array,
96
+ // 数据
97
+ data: Object,
98
+ },
99
+
100
+ /**
101
+ * 声明事件
102
+ */
103
+ emits: [
104
+ 'update:modelValue',
105
+ ],
106
+
107
+ /**
108
+ * 组合式
109
+ */
110
+ setup(props, { emit }) {
111
+
112
+ // ==========【监听数据】=========================================================================================
113
+
114
+ /**
115
+ * 监听值的比较类型
116
+ */
117
+ watch(() => props.modelValue[0].compare, function(compare) {
118
+
119
+ console.log('compare', props.data, props.modelValue[0].compare)
120
+
121
+ // 获取当前值
122
+ const value = props.modelValue[0].value
123
+
124
+ // 如果类型为 in / not in, 则为多选
125
+ // --------------------------------------------------
126
+ if ($n_indexOf([dicts.SEARCH_COMPARE_TYPE__IN, dicts.SEARCH_COMPARE_TYPE__NOT_IN], compare) > -1) {
127
+
128
+ // 如果当前值不为数组
129
+ if (! $n_isArray(value)) {
130
+
131
+ // 则将值转为数组
132
+ // 触发更新值
133
+ emitModelValue($n_split(value, ','))
134
+ }
135
+
136
+ // 否则为单选 && 如果值为: 数组
137
+ // --------------------------------------------------
138
+ } else if ($n_isArray(value)) {
139
+
140
+ // 触发更新值
141
+ emitModelValue(value.length ? $n_numberDeep(value[0]) : '')
142
+
143
+ // 否则为单选 && 值为: 字符串 / 数字
144
+ // --------------------------------------------------
145
+ } else {
146
+
147
+ // 将值转为数组
148
+ const arr = $n_split(value, ',')
149
+
150
+ // 如果数组长度不为 1, 则说明有多个值 || 无值
151
+ if (arr.length !== 1) {
152
+
153
+ // 触发更新值
154
+ emitModelValue(arr.length > 1 ? arr[0] : '')
155
+ }
156
+ }
157
+ })
158
+
159
+ // ==========【方法】=============================================================================================
160
+
161
+ /**
162
+ * 触发更新值
163
+ */
164
+ function emitModelValue(value) {
165
+
166
+ // 克隆值
167
+ const _modelValue = $n_cloneDeep(props.modelValue)
168
+
169
+ // 更新值
170
+ _modelValue[0].value = value
171
+
172
+ // 更新值
173
+ emit('update:modelValue', _modelValue)
174
+ }
175
+
176
+ // ==========【返回】=============================================================================================
177
+
178
+ return {
179
+ dicts,
180
+ indexOf: $n_indexOf,
181
+ }
182
+ },
183
+ }
184
+ </script>
185
+
186
+ <style lang="scss">
187
+ .n-search__item {
188
+ .n-field-group {
189
+ > .q-field--outlined {
190
+
191
+ // 第一个子节点
192
+ &:first-child,
193
+ // 第三个子节点
194
+ &:nth-child(3) {
195
+ .q-field__control {
196
+ height: 100% !important;
197
+ background-color: rgba(var(--n-reverse-color-rgb), 0.04);
198
+
199
+ .q-field__marginal {
200
+ height: 100% !important;
201
+ }
202
+ }
203
+ }
204
+
205
+ // 第二个子节点
206
+ &:nth-child(2) {
207
+ flex: 1;
208
+ }
209
+ }
210
+ }
211
+ }
212
+ </style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@netang/quasar",
3
- "version": "0.0.103",
3
+ "version": "0.0.104",
4
4
  "description": "netang-quasar",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1"
package/sass/common.scss CHANGED
@@ -1,174 +1,179 @@
1
- /**
2
- * 亮色
3
- */
4
- .body--light {
5
- // 反色
6
- --n-reverse-color: var(--q-dark);
7
- // 反色 rgb(亮色是黑色)
8
- --n-reverse-color-rgb: 0, 0, 0;
9
- // 主题颜色
10
- --n-mode-color: #ffffff;;
11
- // 占位符颜色
12
- --n-placeholder-color: rgba(0, 0, 0, 0.5);
13
- }
14
-
15
- /**
16
- * 暗色
17
- */
18
- .body--dark {
19
- // 反色
20
- --n-reverse-color: #ffffff;
21
- // 反色 rgb(暗色是白色)
22
- --n-reverse-color-rgb: 255, 255, 255;
23
- // 主题颜色
24
- --n-mode-color: var(--q-dark);
25
- // 占位符颜色
26
- --n-placeholder-color: rgba(255, 255, 255, 0.5);
27
- }
28
-
29
- body {
30
- --n-bg-grey-1: rgba(var(--n-reverse-color-rgb), 0.02);
31
- --n-bg-grey-2: rgba(var(--n-reverse-color-rgb), 0.04);
32
- --n-bg-grey-3: rgba(var(--n-reverse-color-rgb), 0.07);
33
- --n-bg-grey-4: rgba(var(--n-reverse-color-rgb), 0.12);
34
- --n-bg-grey-5: rgba(var(--n-reverse-color-rgb), 0.26);
35
- --n-bg-grey-6: rgba(var(--n-reverse-color-rgb), 0.38);
36
- --n-bg-grey-7: rgba(var(--n-reverse-color-rgb), 0.54);
37
- --n-bg-grey-8: rgba(var(--n-reverse-color-rgb), 0.62);
38
- --n-bg-grey-9: rgba(var(--n-reverse-color-rgb), 0.75);
39
- --n-bg-grey-10: rgba(var(--n-reverse-color-rgb), 0.86);
40
- }
41
-
42
- // 自动显示横向滚动条
43
- .n-overflow-auto-x {
44
- overflow-x: auto !important;
45
- }
46
-
47
- // 自动显示竖向滚动条
48
- .n-overflow-auto-y {
49
- overflow-y: auto !important;
50
- }
51
-
52
- // 字体大小 12 像素
53
- .n-font-size-12 {
54
- font-size: 12px;
55
- }
56
- // 字体大小 13 像素
57
- .n-font-size-13 {
58
- font-size: 13px;
59
- }
60
- // 字体大小 14 像素
61
- .n-font-size-14 {
62
- font-size: 14px;
63
- }
64
- // 字体大小 15 像素
65
- .n-font-size-15 {
66
- font-size: 15px;
67
- }
68
- // 字体大小 16 像素
69
- .n-font-size-16 {
70
- font-size: 16px;
71
- }
72
-
73
- // 占位符
74
- .n-placeholder {
75
- color: var(--n-placeholder-color);
76
- }
77
-
78
- // 不可点击
79
- .n-pointer-none {
80
- pointer-events: none;
81
- }
82
-
83
- //.n-color-primary,
84
- //.n-color-main {
85
- // color: var(--q-primary);
86
- //}
87
- //.n-color-success {
88
- // color: var(--q-positive);
89
- //}
90
- //.n-color-warning {
91
- // color: var(--q-warning);
92
- //}
93
- //.n-color-danger {
94
- // color: var(--q-negative);
95
- //}
96
- //.n-color-info {
97
- // color: var(--q-info);
98
- //}
99
-
100
- // flex 1
101
- .n-flex-1 {
102
- flex: 1;
103
- }
104
-
105
- // 网格行填充
106
- .n-col-space {
107
- width: 100%;
108
- padding: 0;
109
- margin: 0;
110
- }
111
-
112
- .n-bg-grey-1 {
113
- background-color: var(--n-bg-grey-1)
114
- }
115
- .n-bg-grey-2 {
116
- background-color: var(--n-bg-grey-2)
117
- }
118
- .n-bg-grey-3 {
119
- background-color: var(--n-bg-grey-3)
120
- }
121
- .n-bg-grey-4 {
122
- background-color: var(--n-bg-grey-4)
123
- }
124
- .n-bg-grey-5 {
125
- background-color: var(--n-bg-grey-5)
126
- }
127
- .n-bg-grey-6 {
128
- background-color: var(--n-bg-grey-6)
129
- }
130
- .n-bg-grey-7 {
131
- background-color: var(--n-bg-grey-7)
132
- }
133
- .n-bg-grey-8 {
134
- background-color: var(--n-bg-grey-8)
135
- }
136
- .n-bg-grey-9 {
137
- background-color: var(--n-bg-grey-9)
138
- }
139
- .n-bg-grey-10 {
140
- background-color: var(--n-bg-grey-10)
141
- }
142
-
143
- /**
144
- * 桌面
145
- */
146
- body.desktop {
147
- ::-webkit-scrollbar {
148
- height: 10px;
149
- width: 10px;
150
- overflow: visible;
151
- }
152
- ::-webkit-scrollbar-button {
153
- height: 0;
154
- width: 0;
155
- }
156
- ::-webkit-scrollbar-corner {
157
- background: transparent;
158
- }
159
- ::-webkit-scrollbar-thumb,
160
- ::-webkit-scrollbar-track {
161
- border-radius: 0;
162
- border: none;
163
- background-clip: padding-box;
164
- }
165
-
166
- ::-webkit-scrollbar-thumb,
167
- ::-webkit-scrollbar-track,
168
- ::-webkit-scrollbar-thumb:hover {
169
- background-color: rgba(var(--n-reverse-color-rgb), 0.2);
170
- }
171
- ::-webkit-scrollbar-track {
172
- background-color: rgba(var(--n-reverse-color-rgb), 0.05);
173
- }
174
- }
1
+ /**
2
+ * 亮色
3
+ */
4
+ .body--light {
5
+ // 反色
6
+ --n-reverse-color: var(--q-dark);
7
+ // 反色 rgb(亮色是黑色)
8
+ --n-reverse-color-rgb: 0, 0, 0;
9
+ // 主题颜色
10
+ --n-mode-color: #ffffff;;
11
+ // 占位符颜色
12
+ --n-placeholder-color: rgba(0, 0, 0, 0.5);
13
+ }
14
+
15
+ /**
16
+ * 暗色
17
+ */
18
+ .body--dark {
19
+ // 反色
20
+ --n-reverse-color: #ffffff;
21
+ // 反色 rgb(暗色是白色)
22
+ --n-reverse-color-rgb: 255, 255, 255;
23
+ // 主题颜色
24
+ --n-mode-color: var(--q-dark);
25
+ // 占位符颜色
26
+ --n-placeholder-color: rgba(255, 255, 255, 0.5);
27
+ }
28
+
29
+ body {
30
+ --n-bg-grey-1: rgba(var(--n-reverse-color-rgb), 0.02);
31
+ --n-bg-grey-2: rgba(var(--n-reverse-color-rgb), 0.04);
32
+ --n-bg-grey-3: rgba(var(--n-reverse-color-rgb), 0.07);
33
+ --n-bg-grey-4: rgba(var(--n-reverse-color-rgb), 0.12);
34
+ --n-bg-grey-5: rgba(var(--n-reverse-color-rgb), 0.26);
35
+ --n-bg-grey-6: rgba(var(--n-reverse-color-rgb), 0.38);
36
+ --n-bg-grey-7: rgba(var(--n-reverse-color-rgb), 0.54);
37
+ --n-bg-grey-8: rgba(var(--n-reverse-color-rgb), 0.62);
38
+ --n-bg-grey-9: rgba(var(--n-reverse-color-rgb), 0.75);
39
+ --n-bg-grey-10: rgba(var(--n-reverse-color-rgb), 0.86);
40
+ }
41
+
42
+ // 隐藏横向滚动条
43
+ .n-overflow-hidden-x {
44
+ overflow-x: hidden !important;
45
+ }
46
+
47
+ // 自动显示横向滚动条
48
+ .n-overflow-auto-x {
49
+ overflow-x: auto !important;
50
+ }
51
+
52
+ // 自动显示竖向滚动条
53
+ .n-overflow-auto-y {
54
+ overflow-y: auto !important;
55
+ }
56
+
57
+ // 字体大小 12 像素
58
+ .n-font-size-12 {
59
+ font-size: 12px;
60
+ }
61
+ // 字体大小 13 像素
62
+ .n-font-size-13 {
63
+ font-size: 13px;
64
+ }
65
+ // 字体大小 14 像素
66
+ .n-font-size-14 {
67
+ font-size: 14px;
68
+ }
69
+ // 字体大小 15 像素
70
+ .n-font-size-15 {
71
+ font-size: 15px;
72
+ }
73
+ // 字体大小 16 像素
74
+ .n-font-size-16 {
75
+ font-size: 16px;
76
+ }
77
+
78
+ // 占位符
79
+ .n-placeholder {
80
+ color: var(--n-placeholder-color);
81
+ }
82
+
83
+ // 不可点击
84
+ .n-pointer-none {
85
+ pointer-events: none;
86
+ }
87
+
88
+ //.n-color-primary,
89
+ //.n-color-main {
90
+ // color: var(--q-primary);
91
+ //}
92
+ //.n-color-success {
93
+ // color: var(--q-positive);
94
+ //}
95
+ //.n-color-warning {
96
+ // color: var(--q-warning);
97
+ //}
98
+ //.n-color-danger {
99
+ // color: var(--q-negative);
100
+ //}
101
+ //.n-color-info {
102
+ // color: var(--q-info);
103
+ //}
104
+
105
+ // flex 1
106
+ .n-flex-1 {
107
+ flex: 1;
108
+ }
109
+
110
+ // 网格行填充
111
+ .n-col-space {
112
+ width: 100%;
113
+ padding: 0;
114
+ margin: 0;
115
+ }
116
+
117
+ .n-bg-grey-1 {
118
+ background-color: var(--n-bg-grey-1)
119
+ }
120
+ .n-bg-grey-2 {
121
+ background-color: var(--n-bg-grey-2)
122
+ }
123
+ .n-bg-grey-3 {
124
+ background-color: var(--n-bg-grey-3)
125
+ }
126
+ .n-bg-grey-4 {
127
+ background-color: var(--n-bg-grey-4)
128
+ }
129
+ .n-bg-grey-5 {
130
+ background-color: var(--n-bg-grey-5)
131
+ }
132
+ .n-bg-grey-6 {
133
+ background-color: var(--n-bg-grey-6)
134
+ }
135
+ .n-bg-grey-7 {
136
+ background-color: var(--n-bg-grey-7)
137
+ }
138
+ .n-bg-grey-8 {
139
+ background-color: var(--n-bg-grey-8)
140
+ }
141
+ .n-bg-grey-9 {
142
+ background-color: var(--n-bg-grey-9)
143
+ }
144
+ .n-bg-grey-10 {
145
+ background-color: var(--n-bg-grey-10)
146
+ }
147
+
148
+ /**
149
+ * 桌面
150
+ */
151
+ body.desktop {
152
+ ::-webkit-scrollbar {
153
+ height: 10px;
154
+ width: 10px;
155
+ overflow: visible;
156
+ }
157
+ ::-webkit-scrollbar-button {
158
+ height: 0;
159
+ width: 0;
160
+ }
161
+ ::-webkit-scrollbar-corner {
162
+ background: transparent;
163
+ }
164
+ ::-webkit-scrollbar-thumb,
165
+ ::-webkit-scrollbar-track {
166
+ border-radius: 0;
167
+ border: none;
168
+ background-clip: padding-box;
169
+ }
170
+
171
+ ::-webkit-scrollbar-thumb,
172
+ ::-webkit-scrollbar-track,
173
+ ::-webkit-scrollbar-thumb:hover {
174
+ background-color: rgba(var(--n-reverse-color-rgb), 0.2);
175
+ }
176
+ ::-webkit-scrollbar-track {
177
+ background-color: rgba(var(--n-reverse-color-rgb), 0.05);
178
+ }
179
+ }