@netang/quasar 0.0.84 → 0.0.86

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 (30) hide show
  1. package/_docs/docs/components/field-table.md +57 -57
  2. package/components/img/index.vue +6 -0
  3. package/components/select/index.vue +28 -8
  4. package/components/table-column-fixed/index.vue +36 -3
  5. package/components/uploader-query/index.vue +3 -3
  6. package/docs/404.html +33 -33
  7. package/docs/assets/404.html-60b35caa.js +1 -1
  8. package/docs/assets/404.html-d1e63d77.js +1 -1
  9. package/docs/assets/alert.html-568d4e94.js +1 -1
  10. package/docs/assets/alert.html-f5dbc3e9.js +1 -1
  11. package/docs/assets/app-8c3ae4de.js +6 -6
  12. package/docs/assets/confirm.html-7a1566f6.js +1 -1
  13. package/docs/assets/confirm.html-96f1b004.js +1 -1
  14. package/docs/assets/field-table.html-68d610b0.js +1 -1
  15. package/docs/assets/field-table.html-86cc3511.js +1 -1
  16. package/docs/assets/field-tree.html-45410c3c.js +1 -1
  17. package/docs/assets/field-tree.html-c98ac993.js +1 -1
  18. package/docs/assets/framework-204010b2.js +5 -5
  19. package/docs/assets/index.html-1695dd7c.js +1 -1
  20. package/docs/assets/index.html-65a4aa67.js +1 -1
  21. package/docs/assets/style-ac5a9aa6.css +1 -1
  22. package/docs/components/field-table.html +33 -33
  23. package/docs/components/field-tree.html +33 -33
  24. package/docs/index.html +33 -33
  25. package/docs/utils/alert.html +33 -33
  26. package/docs/utils/confirm.html +33 -33
  27. package/package.json +1 -1
  28. package/sass/variables.scss +138 -138
  29. package/utils/$power.js +27 -12
  30. package/utils/$table.js +0 -1
package/_docs/docs/components/field-table.md CHANGED
@@ -1,57 +1,57 @@
1
- # FieldTable 下拉表格
2
-
3
- ::: tip
4
- 继承 `<q-field>` 所有特性
5
- [中文文档](http://www.quasarchs.com/vue-components/field) [英文文档](https://quasar.dev/vue-components/field)
6
- :::
7
-
8
- ## FieldTable API
9
-
10
- ### FieldTable 属性
11
-
12
- | 属性名 | 说明 | 类型 | 可选值 | 默认值 |
13
- |--------------------------|-------------|---------------------|------------------------------------------|-----------------|
14
- | value / v-model | 绑定值 | - | - | - |
15
- | value-key | 值字段 | `String` | - | - |
16
- | label-key | 标签字段 | `String` | - | - |
17
- | value-type | 值类型 | `String` | `string` / `stringArray` / `objectArray` | objectArray |
18
- | value-separator | 值分隔符 | `String` | - | , |
19
- | path | 表格请求路径 | `String` | - | - |
20
- | query | 请求参数 | `object` | - | - |
21
- | data | 附加请求数据 | `object` | - | - |
22
- | no-default-load-selected | 初始不加载已选数据 | `Boolean` | - | false |
23
- | no-update-load-selected | 更新值时不加载已选数据 | `Boolean` | - | false |
24
- | format-label | 格式化显示标签 | `Function` | - | - |
25
- | show-keys | 下拉表格显示的字段数组 | `Array` | - | `[ 值字段, 标签字段 ]` |
26
- | hide-search-keys | 隐藏搜索字段数组 | `Array` | - | - |
27
- | filter-key | 默认筛选字段 | `Array` | - | `标签字段` |
28
- | filter | 是否开启筛选 | `Boolean` | - | false |
29
- | table-props | 表格声明属性 | `Object` | - | - |
30
- | dialog-props | 对话框声明属性 | `Object` | - | - |
31
- | no-dialog | 关闭对话框 | `Boolean` | - | false |
32
- | columns | 表格列数据 | `Array` | - | - |
33
- | rows | 行数据 | `Array` | - | - |
34
- | multiple | 是否多选 | `Boolean` | - | false |
35
- | collapse-tags | 多选模式下是否折叠标签 | `Boolean` | - | false |
36
- | placeholder | 占位符 | `String` | - | - |
37
- | clearable | 是否可清除 | `Boolean` | - | false |
38
- | disable | 是否禁用 | `Boolean` | - | false |
39
- | readonly | 是否只读 | `Boolean` | - | false |
40
- | input-debounce | 输入防抖(毫秒) | `Number` / `String` | - | 500 |
41
-
42
-
43
- ### FieldTable 插槽
44
-
45
- | 插槽名 | 说明 |
46
- |--------------------------|------------------------------------------|
47
- | default | 自定义默认内容（如果存在，则会隐藏下拉表格，并提供接口自定义实现） |
48
-
49
- ### FieldTable `default` 插槽 对外暴露的方法
50
-
51
- | 属性名 | 说明 | 类型 | 示例 |
52
- |--------------------------|--|----------|-----|
53
- | showValue | 显示的已选值 | `String` | - |
54
- | selected | 已选数据 | `Array` | `[ { id: 1, ... }, { id: 2, ... } ]` |
55
- | onRemove | 删除已选 | `Function` | `onRemove(index)` |
56
- | onShowDialog | 显示对话框 | `Function` | - |
57
- | onClear | 清空已选数据 | `Function` | - |
1
+ # FieldTable 下拉表格
2
+
3
+ ::: tip
4
+ 继承 `<q-field>` 所有特性
5
+ [中文文档](http://www.quasarchs.com/vue-components/field) [英文文档](https://quasar.dev/vue-components/field)
6
+ :::
7
+
8
+ ## FieldTable API
9
+
10
+ ### FieldTable 属性
11
+
12
+ | 属性名 | 说明 | 类型 | 可选值 | 默认值 |
13
+ |--------------------------|-------------|---------------------|------------------------------------------|-----------------|
14
+ | value / v-model | 绑定值 | - | - | - |
15
+ | value-key | 值字段 | `String` | - | - |
16
+ | label-key | 标签字段 | `String` | - | - |
17
+ | value-type | 值类型 | `String` | `string` / `stringArray` / `objectArray` | objectArray |
18
+ | value-separator | 值分隔符 | `String` | - | , |
19
+ | path | 表格请求路径 | `String` | - | - |
20
+ | query | 请求参数 | `object` | - | - |
21
+ | data | 附加请求数据 | `object` | - | - |
22
+ | no-default-load-selected | 初始不加载已选数据 | `Boolean` | - | false |
23
+ | no-update-load-selected | 更新值时不加载已选数据 | `Boolean` | - | false |
24
+ | format-label | 格式化显示标签 | `Function` | - | - |
25
+ | show-keys | 下拉表格显示的字段数组 | `Array` | - | `[ 值字段, 标签字段 ]` |
26
+ | hide-search-keys | 隐藏搜索字段数组 | `Array` | - | - |
27
+ | filter-key | 默认筛选字段 | `Array` | - | `标签字段` |
28
+ | filter | 是否开启筛选 | `Boolean` | - | false |
29
+ | table-props | 表格声明属性 | `Object` | - | - |
30
+ | dialog-props | 对话框声明属性 | `Object` | - | - |
31
+ | no-dialog | 关闭对话框 | `Boolean` | - | false |
32
+ | columns | 表格列数据 | `Array` | - | - |
33
+ | rows | 行数据 | `Array` | - | - |
34
+ | multiple | 是否多选 | `Boolean` | - | false |
35
+ | collapse-tags | 多选模式下是否折叠标签 | `Boolean` | - | false |
36
+ | placeholder | 占位符 | `String` | - | - |
37
+ | clearable | 是否可清除 | `Boolean` | - | false |
38
+ | disable | 是否禁用 | `Boolean` | - | false |
39
+ | readonly | 是否只读 | `Boolean` | - | false |
40
+ | input-debounce | 输入防抖(毫秒) | `Number` / `String` | - | 500 |
41
+
42
+
43
+ ### FieldTable 插槽
44
+
45
+ | 插槽名 | 说明 |
46
+ |--------------------------|------------------------------------------|
47
+ | default | 自定义默认内容（如果存在，则会隐藏下拉表格，并提供接口自定义实现） |
48
+
49
+ ### FieldTable `default` 插槽 对外暴露的方法
50
+
51
+ | 属性名 | 说明 | 类型 | 示例 |
52
+ |--------------------------|--|----------|-----|
53
+ | showValue | 显示的已选值 | `String` | - |
54
+ | selected | 已选数据 | `Array` | `[ { id: 1, ... }, { id: 2, ... } ]` |
55
+ | onRemove | 删除已选 | `Function` | `onRemove(index)` |
56
+ | onShowDialog | 显示对话框 | `Function` | - |
57
+ | onClear | 清空已选数据 | `Function` | - |
package/components/img/index.vue CHANGED
@@ -21,6 +21,9 @@
21
21
  :name="errorIcon"
22
22
  />
23
23
  </div>
24
+
25
+ <!-- 默认插槽 -->
26
+ <slot />
24
27
  </slot>
25
28
  </template>
26
29
 
@@ -55,6 +58,9 @@
55
58
  :name="errorIcon"
56
59
  />
57
60
  </div>
61
+
62
+ <!-- 默认插槽 -->
63
+ <slot />
58
64
  </slot>
59
65
  </div>
60
66
  </div>
package/components/select/index.vue CHANGED
@@ -3,12 +3,13 @@
3
3
  v-model="currentModelValue"
4
4
  :options="currentOptions"
5
5
  :option-label="optionLabel"
6
+ :multiple="multiple"
6
7
  :use-input="filter"
7
8
  @filter="onFilter"
8
9
  v-bind="$attrs"
9
10
  >
10
11
  <!-- 占位符 -->
11
- <template v-slot:selected v-if="! currentModelValue && placeholder">
12
+ <template v-slot:selected v-if="! showValue && placeholder">
12
13
  <div class="n-placeholder q-mr-xs">{{placeholder}}</div>
13
14
  </template>
14
15
 
@@ -36,6 +37,7 @@
36
37
  <script>
37
38
  import { ref, computed, watch } from 'vue'
38
39
 
40
+ import $n_isValidArray from '@netang/utils/isValidArray'
39
41
  import $n_isValidObject from '@netang/utils/isValidObject'
40
42
  import $n_collection from '@netang/utils/collection'
41
43
 
@@ -63,6 +65,8 @@ export default {
63
65
  type: String,
64
66
  default: 'label',
65
67
  },
68
+ // 是否多选
69
+ multiple: Boolean,
66
70
  // 占位符
67
71
  placeholder: String,
68
72
  // 筛选
@@ -81,6 +85,17 @@ export default {
81
85
  */
82
86
  setup(props, { emit, slots }) {
83
87
 
88
+ // ==========【当前值】===========================================================================================
89
+
90
+ // 当前值
91
+ const currentModelValue = ref(props.modelValue)
92
+
93
+ // 原始选项
94
+ const rawOptions = props.options
95
+
96
+ // 当前选项
97
+ const currentOptions = ref(rawOptions)
98
+
84
99
  // ==========【计算属性】=========================================================================================
85
100
 
86
101
  /**
@@ -90,16 +105,19 @@ export default {
90
105
  return $n_isValidObject(slots) ? Object.keys(slots) : []
91
106
  })
92
107
 
93
- // ==========【当前值】===========================================================================================
108
+ /**
109
+ * 显示值
110
+ */
111
+ const showValue = computed(function() {
94
112
 
95
- // 当前值
96
- const currentModelValue = ref(props.modelValue)
113
+ // 如果是多选
114
+ if (props.multiple) {
115
+ return $n_isValidArray(currentModelValue.value) ? '1' : ''
116
+ }
97
117
 
98
- // 原始选项
99
- const rawOptions = props.options
118
+ return currentModelValue.value
119
+ })
100
120
 
101
- // 当前选项
102
- const currentOptions = ref(rawOptions)
103
121
 
104
122
  // ==========【监听数据】=========================================================================================
105
123
 
@@ -148,6 +166,8 @@ export default {
148
166
  currentModelValue,
149
167
  // 当前选项
150
168
  currentOptions,
169
+ // 显示值
170
+ showValue,
151
171
 
152
172
  // 筛选
153
173
  onFilter,
package/components/table-column-fixed/index.vue CHANGED
@@ -1,8 +1,8 @@
1
1
  <template>
2
2
  <q-td :props="props">
3
- <div class="q-gutter-sm" v-if="tableFixedPowerBtns.length">
3
+ <div class="q-gutter-sm" v-if="currentTableFixedPowerBtns.length">
4
4
  <q-btn
5
- v-for="item in tableFixedPowerBtns"
5
+ v-for="item in currentTableFixedPowerBtns"
6
6
  :key="`btn-item-${item.id}`"
7
7
  class="n-button-icon"
8
8
  :icon="item.icon"
@@ -19,7 +19,12 @@
19
19
  </template>
20
20
 
21
21
  <script>
22
- import { inject } from 'vue'
22
+ import { inject, computed } from 'vue'
23
+
24
+ import $n_cloneDeep from 'lodash/cloneDeep'
25
+ import $n_isFunction from 'lodash/isFunction'
26
+
27
+ import $n_forEach from '@netang/utils/forEach'
23
28
 
24
29
  import { NPowerKey, NTableKey } from '../../utils/symbols'
25
30
 
@@ -49,6 +54,8 @@ export default {
49
54
  const {
50
55
  // 权限按钮点击
51
56
  powerBtnClick,
57
+ // 格式化权限按钮
58
+ formatPowerBtns,
52
59
  } = inject(NPowerKey)
53
60
 
54
61
  // 获取表格注入
@@ -57,6 +64,30 @@ export default {
57
64
  tableFixedPowerBtns,
58
65
  } = inject(NTableKey)
59
66
 
67
+ // ==========【计算属性】=========================================================================================
68
+
69
+ /**
70
+ * 当前表格固定权限按钮
71
+ */
72
+ const currentTableFixedPowerBtns = computed(function () {
73
+
74
+ const lists = []
75
+
76
+ $n_forEach(tableFixedPowerBtns.value, function (item) {
77
+
78
+ item = $n_cloneDeep(item)
79
+
80
+ // 格式化权限按钮
81
+ if (formatPowerBtns(item, true, [ props.props.row ]) === false) {
82
+ return
83
+ }
84
+
85
+ lists.push(item)
86
+ })
87
+
88
+ return lists
89
+ })
90
+
60
91
  // ==========【方法】=============================================================================================
61
92
 
62
93
  /**
@@ -71,6 +102,8 @@ export default {
71
102
  return {
72
103
  // 固定在右边的权限按钮列表
73
104
  tableFixedPowerBtns,
105
+ // 当前表格固定权限按钮
106
+ currentTableFixedPowerBtns: $n_isFunction(formatPowerBtns) ? currentTableFixedPowerBtns : tableFixedPowerBtns,
74
107
  // 权限按钮点击
75
108
  onClick,
76
109
  }
package/components/uploader-query/index.vue CHANGED
@@ -76,7 +76,7 @@
76
76
  @dragenter="dragEnter($event, fileItemIndex)"
77
77
  @dragend="dragEnd"
78
78
  >
79
- <q-img
79
+ <n-img
80
80
  :src="getImage(fileItem)"
81
81
  :spinner-size="toPx(currentSize / 2)"
82
82
  :width="toPx(currentSize)"
@@ -138,7 +138,7 @@
138
138
  size="xs"
139
139
  title="预览"
140
140
  @click="uploader.previewImage(fileItem)"
141
- v-if="! noPreview"
141
+ v-if="! noPreview && getImage(fileItem)"
142
142
  />
143
143
 
144
144
  <!-- 删除 -->
@@ -151,7 +151,7 @@
151
151
  v-if="! noDelete && ! disable && ! readonly"
152
152
  />
153
153
  </div>
154
- </q-img>
154
+ </n-img>
155
155
  </div>
156
156
 
157
157
  <!-- 右边方块按钮 -->
package/docs/404.html CHANGED
@@ -1,33 +1,33 @@
1
- <!DOCTYPE html>
2
- <html lang="en-US">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width,initial-scale=1">
6
- <meta name="generator" content="VuePress 2.0.0-beta.60">
7
- <style>
8
- :root {
9
- --c-bg: #fff;
10
- }
11
- html.dark {
12
- --c-bg: #22272e;
13
- }
14
- html, body {
15
- background-color: var(--c-bg);
16
- }
17
- </style>
18
- <script>
19
- const userMode = localStorage.getItem('vuepress-color-scheme');
20
- const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
21
- if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
22
- document.documentElement.classList.toggle('dark', true);
23
- }
24
- </script>
25
- <title>netang-quasar</title><meta name="description" content="">
26
- <link rel="preload" href="/netang-quasar/assets/style-ac5a9aa6.css" as="style"><link rel="stylesheet" href="/netang-quasar/assets/style-ac5a9aa6.css">
27
- <link rel="modulepreload" href="/netang-quasar/assets/app-8c3ae4de.js"><link rel="modulepreload" href="/netang-quasar/assets/framework-204010b2.js"><link rel="modulepreload" href="/netang-quasar/assets/404.html-60b35caa.js"><link rel="modulepreload" href="/netang-quasar/assets/404.html-d1e63d77.js"><link rel="prefetch" href="/netang-quasar/assets/index.html-65a4aa67.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/field-table.html-86cc3511.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/field-tree.html-c98ac993.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/alert.html-568d4e94.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/confirm.html-96f1b004.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/index.html-1695dd7c.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/field-table.html-68d610b0.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/field-tree.html-45410c3c.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/alert.html-f5dbc3e9.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/confirm.html-7a1566f6.js" as="script">
28
- </head>
29
- <body>
30
- <div id="app"><!--[--><div class="theme-container"><main class="page"><div class="theme-default-content"><h1>404</h1><blockquote>That&#39;s a Four-Oh-Four.</blockquote><a href="/netang-quasar/" class="">Take me home</a></div></main></div><!----><!--]--></div>
31
- <script type="module" src="/netang-quasar/assets/app-8c3ae4de.js" defer></script>
32
- </body>
33
- </html>
1
+ <!DOCTYPE html>
2
+ <html lang="en-US">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width,initial-scale=1">
6
+ <meta name="generator" content="VuePress 2.0.0-beta.60">
7
+ <style>
8
+ :root {
9
+ --c-bg: #fff;
10
+ }
11
+ html.dark {
12
+ --c-bg: #22272e;
13
+ }
14
+ html, body {
15
+ background-color: var(--c-bg);
16
+ }
17
+ </style>
18
+ <script>
19
+ const userMode = localStorage.getItem('vuepress-color-scheme');
20
+ const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
21
+ if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
22
+ document.documentElement.classList.toggle('dark', true);
23
+ }
24
+ </script>
25
+ <title>netang-quasar</title><meta name="description" content="">
26
+ <link rel="preload" href="/netang-quasar/assets/style-ac5a9aa6.css" as="style"><link rel="stylesheet" href="/netang-quasar/assets/style-ac5a9aa6.css">
27
+ <link rel="modulepreload" href="/netang-quasar/assets/app-8c3ae4de.js"><link rel="modulepreload" href="/netang-quasar/assets/framework-204010b2.js"><link rel="modulepreload" href="/netang-quasar/assets/404.html-60b35caa.js"><link rel="modulepreload" href="/netang-quasar/assets/404.html-d1e63d77.js"><link rel="prefetch" href="/netang-quasar/assets/index.html-65a4aa67.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/field-table.html-86cc3511.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/field-tree.html-c98ac993.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/alert.html-568d4e94.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/confirm.html-96f1b004.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/index.html-1695dd7c.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/field-table.html-68d610b0.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/field-tree.html-45410c3c.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/alert.html-f5dbc3e9.js" as="script"><link rel="prefetch" href="/netang-quasar/assets/confirm.html-7a1566f6.js" as="script">
28
+ </head>
29
+ <body>
30
+ <div id="app"><!--[--><div class="theme-container"><main class="page"><div class="theme-default-content"><h1>404</h1><blockquote>That&#39;s a Four-Oh-Four.</blockquote><a href="/netang-quasar/" class="">Take me home</a></div></main></div><!----><!--]--></div>
31
+ <script type="module" src="/netang-quasar/assets/app-8c3ae4de.js" defer></script>
32
+ </body>
33
+ </html>
package/docs/assets/404.html-60b35caa.js CHANGED
@@ -1 +1 @@
1
- const t=JSON.parse('{"key":"v-3706649a","path":"/404.html","title":"","lang":"en-US","frontmatter":{"layout":"NotFound"},"headers":[],"git":{},"filePathRelative":null}');export{t as data};
1
+ const t=JSON.parse('{"key":"v-3706649a","path":"/404.html","title":"","lang":"en-US","frontmatter":{"layout":"NotFound"},"headers":[],"git":{},"filePathRelative":null}');export{t as data};
package/docs/assets/404.html-d1e63d77.js CHANGED
@@ -1 +1 @@
1
- import{_ as e,p as t,q as _}from"./framework-204010b2.js";const c={};function r(n,o){return t(),_("div")}const a=e(c,[["render",r],["__file","404.html.vue"]]);export{a as default};
1
+ import{_ as e,p as t,q as _}from"./framework-204010b2.js";const c={};function r(n,o){return t(),_("div")}const a=e(c,[["render",r],["__file","404.html.vue"]]);export{a as default};
package/docs/assets/alert.html-568d4e94.js CHANGED
@@ -1 +1 @@
1
- const t=JSON.parse('{"key":"v-7b1a2a14","path":"/utils/alert.html","title":"alert","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1675652908000,"contributors":[{"name":"junmiao","email":"mj287@163.com","commits":1}]},"filePathRelative":"utils/alert.md"}');export{t as data};
1
+ const t=JSON.parse('{"key":"v-7b1a2a14","path":"/utils/alert.html","title":"alert","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1675652908000,"contributors":[{"name":"junmiao","email":"mj287@163.com","commits":1}]},"filePathRelative":"utils/alert.md"}');export{t as data};
package/docs/assets/alert.html-f5dbc3e9.js CHANGED
@@ -1 +1 @@
1
- import{_ as t,p as a,q as r,R as e,t as c}from"./framework-204010b2.js";const s={},o=e("h1",{id:"alert",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#alert","aria-hidden":"true"},"#"),c(" alert")],-1),n=[o];function _(l,d){return a(),r("div",null,n)}const h=t(s,[["render",_],["__file","alert.html.vue"]]);export{h as default};
1
+ import{_ as t,p as a,q as r,R as e,t as c}from"./framework-204010b2.js";const s={},o=e("h1",{id:"alert",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#alert","aria-hidden":"true"},"#"),c(" alert")],-1),n=[o];function _(l,d){return a(),r("div",null,n)}const h=t(s,[["render",_],["__file","alert.html.vue"]]);export{h as default};