@netang/quasar 0.0.74 → 0.0.75

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 (27) hide show
  1. package/_docs/docs/components/field-table.md +57 -57
  2. package/components/empty/index.vue +9 -1
  3. package/components/power-page/index.vue +37 -4
  4. package/components/thumbnail/index.vue +41 -2
  5. package/docs/404.html +33 -33
  6. package/docs/assets/404.html-60b35caa.js +1 -1
  7. package/docs/assets/404.html-d1e63d77.js +1 -1
  8. package/docs/assets/alert.html-568d4e94.js +1 -1
  9. package/docs/assets/alert.html-f5dbc3e9.js +1 -1
  10. package/docs/assets/app-8c3ae4de.js +6 -6
  11. package/docs/assets/confirm.html-7a1566f6.js +1 -1
  12. package/docs/assets/confirm.html-96f1b004.js +1 -1
  13. package/docs/assets/field-table.html-68d610b0.js +1 -1
  14. package/docs/assets/field-table.html-86cc3511.js +1 -1
  15. package/docs/assets/field-tree.html-45410c3c.js +1 -1
  16. package/docs/assets/field-tree.html-c98ac993.js +1 -1
  17. package/docs/assets/framework-204010b2.js +5 -5
  18. package/docs/assets/index.html-1695dd7c.js +1 -1
  19. package/docs/assets/index.html-65a4aa67.js +1 -1
  20. package/docs/assets/style-ac5a9aa6.css +1 -1
  21. package/docs/components/field-table.html +33 -33
  22. package/docs/components/field-tree.html +33 -33
  23. package/docs/index.html +33 -33
  24. package/docs/utils/alert.html +33 -33
  25. package/docs/utils/confirm.html +33 -33
  26. package/package.json +1 -1
  27. package/sass/variables.scss +138 -138
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/empty/index.vue CHANGED
@@ -9,7 +9,10 @@
9
9
  />
10
10
 
11
11
  <!-- 描述文字 -->
12
- <div class="text-subtitle1 text-grey-7" v-if="description">{{description}}</div>
12
+ <div
13
+ :class="descriptionClass"
14
+ v-if="description"
15
+ >{{description}}</div>
13
16
  </div>
14
17
  </template>
15
18
 
@@ -37,6 +40,11 @@ export default {
37
40
  type: [ String, Number ],
38
41
  default: 70,
39
42
  },
43
+ // 描述类名
44
+ descriptionClass: {
45
+ type: String,
46
+ default: 'text-subtitle1 text-grey-7',
47
+ },
40
48
  // 描述文字
41
49
  description: String,
42
50
  },
package/components/power-page/index.vue CHANGED
@@ -1,16 +1,28 @@
1
1
  <template>
2
+ <div v-if="container">
3
+ <!-- 空数据 -->
4
+ <n-empty
5
+ :description="emptyDescription"
6
+ v-if="pageStatus === false"
7
+ />
8
+ <!-- 插槽 -->
9
+ <slot v-else-if="pageStatus === true" />
10
+ <!-- 加载 -->
11
+ <q-inner-loading
12
+ :showing="pageLoading"
13
+ />
14
+ </div>
2
15
  <q-page
3
16
  v-bind="$attrs"
17
+ v-else
4
18
  >
5
19
  <!-- 空数据 -->
6
20
  <n-empty
7
21
  :description="emptyDescription"
8
22
  v-if="pageStatus === false"
9
23
  />
10
-
11
24
  <!-- 插槽 -->
12
25
  <slot v-else-if="pageStatus === true" />
13
-
14
26
  <!-- 加载 -->
15
27
  <q-inner-loading
16
28
  :showing="pageLoading"
@@ -32,6 +44,14 @@ export default {
32
44
  */
33
45
  name: 'NPowerPage',
34
46
 
47
+ /**
48
+ * 声明属性
49
+ */
50
+ props: {
51
+ // 是否容器化
52
+ container: Boolean,
53
+ },
54
+
35
55
  /**
36
56
  * 组件
37
57
  */
@@ -43,14 +63,27 @@ export default {
43
63
  * 组合式
44
64
  */
45
65
  setup() {
66
+
46
67
  // ==========【数据】============================================================================================
47
68
 
48
69
  // 获取注入权限数据
49
- const $power = inject(NPowerKey)
70
+ const {
71
+ // 页面状态
72
+ pageStatus,
73
+ // 空状态描述
74
+ emptyDescription,
75
+ // 页面加载
76
+ pageLoading,
77
+ } = inject(NPowerKey)
50
78
 
51
79
  // ==========【返回】============================================================================================
52
80
  return {
53
- ...$power,
81
+ // 页面状态
82
+ pageStatus,
83
+ // 空状态描述
84
+ emptyDescription,
85
+ // 页面加载
86
+ pageLoading,
54
87
  }
55
88
  },
56
89
  }
package/components/thumbnail/index.vue CHANGED
@@ -5,8 +5,18 @@
5
5
  :width="toPx(size)"
6
6
  :height="toPx(size)"
7
7
  fit="fill"
8
+ v-bind="$attrs"
8
9
  v-if="currentSrc"
9
10
  >
11
+ <template v-slot:error>
12
+ <div class="absolute-full flex flex-center bg-grey-5 text-white no-padding">
13
+ <q-icon
14
+ :size="errorIconSize"
15
+ :name="errorIcon"
16
+ />
17
+ </div>
18
+ </template>
19
+
10
20
  <!-- 预览点击 -->
11
21
  <div
12
22
  class="absolute-full transparent cursor-pointer"
@@ -15,6 +25,21 @@
15
25
  v-if="preview"
16
26
  ></div>
17
27
  </q-img>
28
+
29
+ <!-- 错误图标 -->
30
+ <div
31
+ class="flex flex-center bg-grey-5 text-white no-padding"
32
+ :style="{
33
+ width: toPx(size),
34
+ height: toPx(size),
35
+ }"
36
+ v-else
37
+ >
38
+ <q-icon
39
+ :size="errorIconSize"
40
+ :name="errorIcon"
41
+ />
42
+ </div>
18
43
  </template>
19
44
 
20
45
  <script>
@@ -24,8 +49,8 @@ import { useQuasar } from 'quasar'
24
49
  import $n_px from '@netang/utils/px'
25
50
  import $n_noop from '@netang/utils/noop'
26
51
 
27
- import $n_previewImage from '../../utils/previewImage'
28
52
  import $n_getImage from '../../utils/getImage'
53
+ import $n_previewImage from '../../utils/previewImage'
29
54
 
30
55
  export default {
31
56
 
@@ -34,6 +59,11 @@ export default {
34
59
  */
35
60
  name: 'NThumbnail',
36
61
 
62
+ /**
63
+ * 关闭组件 attribute 透传行为
64
+ */
65
+ inheritAttrs: false,
66
+
37
67
  /**
38
68
  * 声明属性
39
69
  */
@@ -45,6 +75,16 @@ export default {
45
75
  type: Number,
46
76
  default: 40,
47
77
  },
78
+ // 错误图标大小
79
+ errorIconSize: {
80
+ type: String,
81
+ default: 'sm',
82
+ },
83
+ // 错误图标
84
+ errorIcon: {
85
+ type: String,
86
+ default: 'image',
87
+ },
48
88
  // 是否点击放大预览
49
89
  preview: Boolean,
50
90
  },
@@ -86,7 +126,6 @@ export default {
86
126
  currentSrc,
87
127
  // 预览
88
128
  onPreview,
89
-
90
129
  // 转像素
91
130
  toPx: $n_px,
92
131
  // 点击空方法
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};