@stonecrop/atable 0.4.2 → 0.4.3

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 (13) hide show
  1. package/dist/assets/index.css +1 -1
  2. package/dist/atable.d.ts +6 -0
  3. package/dist/atable.js +251 -231
  4. package/dist/atable.js.map +1 -1
  5. package/dist/atable.umd.cjs +2 -2
  6. package/dist/atable.umd.cjs.map +1 -1
  7. package/dist/index.js +5 -1
  8. package/dist/src/index.d.ts +3 -1
  9. package/dist/src/index.d.ts.map +1 -1
  10. package/package.json +3 -3
  11. package/src/components/ATableLoading.vue +86 -0
  12. package/src/components/ATableLoadingBar.vue +81 -0
  13. package/src/index.ts +5 -1
package/dist/index.js CHANGED
@@ -3,6 +3,8 @@ import AExpansionRow from './components/AExpansionRow.vue';
3
3
  import ARow from './components/ARow.vue';
4
4
  import ATable from './components/ATable.vue';
5
5
  import ATableHeader from './components/ATableHeader.vue';
6
+ import ATableLoading from './components/ATableLoading.vue';
7
+ import ATableLoadingBar from './components/ATableLoadingBar.vue';
6
8
  import ATableModal from './components/ATableModal.vue';
7
9
  export { createTableStore } from './stores/table';
8
10
  /**
@@ -16,6 +18,8 @@ function install(app /* options */) {
16
18
  app.component('ARow', ARow);
17
19
  app.component('ATable', ATable);
18
20
  app.component('ATableHeader', ATableHeader);
21
+ app.component('ATableLoading', ATableLoading);
22
+ app.component('ATableLoadingBar', ATableLoadingBar);
19
23
  app.component('ATableModal', ATableModal);
20
24
  }
21
- export { install, ACell, AExpansionRow, ARow, ATable, ATableHeader, ATableModal };
25
+ export { install, ACell, AExpansionRow, ARow, ATable, ATableHeader, ATableLoading, ATableLoadingBar, ATableModal };
package/dist/src/index.d.ts CHANGED
@@ -4,6 +4,8 @@ import AExpansionRow from './components/AExpansionRow.vue';
4
4
  import ARow from './components/ARow.vue';
5
5
  import ATable from './components/ATable.vue';
6
6
  import ATableHeader from './components/ATableHeader.vue';
7
+ import ATableLoading from './components/ATableLoading.vue';
8
+ import ATableLoadingBar from './components/ATableLoadingBar.vue';
7
9
  import ATableModal from './components/ATableModal.vue';
8
10
  export { createTableStore } from './stores/table';
9
11
  export type { CellContext, TableColumn, TableConfig, TableDisplay, TableModal, TableModalProps, TableRow, } from './types';
@@ -13,5 +15,5 @@ export type { CellContext, TableColumn, TableConfig, TableDisplay, TableModal, T
13
15
  * @public
14
16
  */
15
17
  declare function install(app: App): void;
16
- export { install, ACell, AExpansionRow, ARow, ATable, ATableHeader, ATableModal };
18
+ export { install, ACell, AExpansionRow, ARow, ATable, ATableHeader, ATableLoading, ATableLoadingBar, ATableModal };
17
19
  //# sourceMappingURL=index.d.ts.map
package/dist/src/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,OAAO,KAAK,MAAM,wBAAwB,CAAA;AAC1C,OAAO,aAAa,MAAM,gCAAgC,CAAA;AAC1D,OAAO,IAAI,MAAM,uBAAuB,CAAA;AACxC,OAAO,MAAM,MAAM,yBAAyB,CAAA;AAC5C,OAAO,YAAY,MAAM,+BAA+B,CAAA;AACxD,OAAO,WAAW,MAAM,8BAA8B,CAAA;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACjD,YAAY,EACX,WAAW,EACX,WAAW,EACX,WAAW,EACX,YAAY,EACZ,UAAU,EACV,eAAe,EACf,QAAQ,GACR,MAAM,SAAS,CAAA;AAEhB;;;;GAIG;AACH,iBAAS,OAAO,CAAC,GAAG,EAAE,GAAG,QAOxB;AAED,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,OAAO,KAAK,MAAM,wBAAwB,CAAA;AAC1C,OAAO,aAAa,MAAM,gCAAgC,CAAA;AAC1D,OAAO,IAAI,MAAM,uBAAuB,CAAA;AACxC,OAAO,MAAM,MAAM,yBAAyB,CAAA;AAC5C,OAAO,YAAY,MAAM,+BAA+B,CAAA;AACxD,OAAO,aAAa,MAAM,gCAAgC,CAAA;AAC1D,OAAO,gBAAgB,MAAM,mCAAmC,CAAA;AAChE,OAAO,WAAW,MAAM,8BAA8B,CAAA;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACjD,YAAY,EACX,WAAW,EACX,WAAW,EACX,WAAW,EACX,YAAY,EACZ,UAAU,EACV,eAAe,EACf,QAAQ,GACR,MAAM,SAAS,CAAA;AAEhB;;;;GAIG;AACH,iBAAS,OAAO,CAAC,GAAG,EAAE,GAAG,QASxB;AAED,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,WAAW,EAAE,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stonecrop/atable",
3
- "version": "0.4.2",
3
+ "version": "0.4.3",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "author": {
@@ -38,8 +38,8 @@
38
38
  "@vueuse/core": "^12.0.0",
39
39
  "pinia": "^2.3.0",
40
40
  "vue": "^3.5.11",
41
- "@stonecrop/themes": "0.4.2",
42
- "@stonecrop/utilities": "0.4.2"
41
+ "@stonecrop/utilities": "0.4.3",
42
+ "@stonecrop/themes": "0.4.3"
43
43
  },
44
44
  "devDependencies": {
45
45
  "@microsoft/api-documenter": "^7.26.2",
package/src/components/ATableLoading.vue ADDED
@@ -0,0 +1,86 @@
1
+ <template>
2
+ <div class="aloading">
3
+ <h2 class="aloading-header">
4
+ <slot></slot>
5
+ </h2>
6
+ <div class="aloading-bar"></div>
7
+ </div>
8
+ </template>
9
+
10
+ <style scoped>
11
+ .aloading {
12
+ width: 100%;
13
+ border-top: 1px solid var(--sc-row-border-color);
14
+ border-bottom: 1px solid var(--sc-row-border-color);
15
+ display: flex;
16
+ background-color: white;
17
+ border-left: 4px solid var(--sc-row-border-color);
18
+ padding-left: 0.5ch !important;
19
+ padding-right: 0.5ch;
20
+ padding-top: var(--sc-atable-row-padding);
21
+ padding-bottom: var(--sc-atable-row-padding);
22
+ align-items: center;
23
+ box-sizing: border-box;
24
+ background: var(--sc-focus-cell-background);
25
+ overflow: hidden;
26
+ position: relative;
27
+ }
28
+ .aloading-bar {
29
+ width: 100%;
30
+ height: 100%;
31
+ position: absolute;
32
+ left: -100%;
33
+ top: 0;
34
+ background: linear-gradient(
35
+ 90deg,
36
+ rgba(var(--sc-table-loading-color), 0) 0%,
37
+ rgba(var(--sc-table-loading-color), 1) 50%,
38
+ rgba(var(--sc-table-loading-color), 0) 100%
39
+ );
40
+ animation: gradient infinite 2s;
41
+ z-index: 0;
42
+ }
43
+ .aloading-header {
44
+ color: var(--sc-cell-text-color);
45
+ font-family: var(--sc-atable-font-family);
46
+ -webkit-font-smoothing: antialiased;
47
+ -moz-osx-font-smoothing: grayscale;
48
+ font-size: var(--sc-table-font-size);
49
+ padding: 0;
50
+ margin: 0;
51
+ font-weight: normal;
52
+ z-index: 1;
53
+ }
54
+ .aloading-header::after {
55
+ content: '...';
56
+ animation: ellipse 2s;
57
+ animation-iteration-count: infinite;
58
+ }
59
+
60
+ @keyframes gradient {
61
+ 0% {
62
+ left: -100%;
63
+ }
64
+ 100% {
65
+ left: 100%;
66
+ }
67
+ }
68
+
69
+ @keyframes ellipse {
70
+ 0% {
71
+ content: '';
72
+ }
73
+ 20% {
74
+ content: '';
75
+ }
76
+ 40% {
77
+ content: '.';
78
+ }
79
+ 60% {
80
+ content: '..';
81
+ }
82
+ 80% {
83
+ content: '...';
84
+ }
85
+ }
86
+ </style>
package/src/components/ATableLoadingBar.vue ADDED
@@ -0,0 +1,81 @@
1
+ <template>
2
+ <div class="aloading">
3
+ <h2 class="aloading-header">
4
+ <slot></slot>
5
+ </h2>
6
+ <div class="aloading-bar"></div>
7
+ </div>
8
+ </template>
9
+
10
+ <style scoped>
11
+ .aloading {
12
+ width: 100%;
13
+ border-top: 1px solid var(--sc-row-border-color);
14
+ border-bottom: 1px solid var(--sc-row-border-color);
15
+ display: flex;
16
+ background-color: white;
17
+ border-left: 4px solid var(--sc-row-border-color);
18
+ padding-left: 0.5ch !important;
19
+ padding-right: 0.5ch;
20
+ padding-top: var(--sc-atable-row-padding);
21
+ padding-bottom: var(--sc-atable-row-padding);
22
+ align-items: center;
23
+ box-sizing: border-box;
24
+ background: var(--sc-focus-cell-background);
25
+ overflow: hidden;
26
+ position: relative;
27
+ }
28
+ .aloading-bar {
29
+ width: 50%;
30
+ height: 3px;
31
+ position: absolute;
32
+ left: -100%;
33
+ bottom: 0;
34
+ background: var(--sc-row-border-color);
35
+ animation: bar-left infinite 2s;
36
+ z-index: 0;
37
+ }
38
+ .aloading-header {
39
+ color: var(--sc-cell-text-color);
40
+ font-family: var(--sc-atable-font-family);
41
+ -webkit-font-smoothing: antialiased;
42
+ -moz-osx-font-smoothing: grayscale;
43
+ font-size: var(--sc-table-font-size);
44
+ padding: 0;
45
+ margin: 0;
46
+ font-weight: normal;
47
+ z-index: 1;
48
+ }
49
+ .aloading-header::after {
50
+ content: '...';
51
+ animation: ellipse 2s;
52
+ animation-iteration-count: infinite;
53
+ }
54
+
55
+ @keyframes bar-left {
56
+ 0% {
57
+ left: -50%;
58
+ }
59
+ 100% {
60
+ left: 100%;
61
+ }
62
+ }
63
+
64
+ @keyframes ellipse {
65
+ 0% {
66
+ content: '';
67
+ }
68
+ 20% {
69
+ content: '';
70
+ }
71
+ 40% {
72
+ content: '.';
73
+ }
74
+ 60% {
75
+ content: '..';
76
+ }
77
+ 80% {
78
+ content: '...';
79
+ }
80
+ }
81
+ </style>
package/src/index.ts CHANGED
@@ -5,6 +5,8 @@ import AExpansionRow from './components/AExpansionRow.vue'
5
5
  import ARow from './components/ARow.vue'
6
6
  import ATable from './components/ATable.vue'
7
7
  import ATableHeader from './components/ATableHeader.vue'
8
+ import ATableLoading from './components/ATableLoading.vue'
9
+ import ATableLoadingBar from './components/ATableLoadingBar.vue'
8
10
  import ATableModal from './components/ATableModal.vue'
9
11
  export { createTableStore } from './stores/table'
10
12
  export type {
@@ -28,7 +30,9 @@ function install(app: App /* options */) {
28
30
  app.component('ARow', ARow)
29
31
  app.component('ATable', ATable)
30
32
  app.component('ATableHeader', ATableHeader)
33
+ app.component('ATableLoading', ATableLoading)
34
+ app.component('ATableLoadingBar', ATableLoadingBar)
31
35
  app.component('ATableModal', ATableModal)
32
36
  }
33
37
 
34
- export { install, ACell, AExpansionRow, ARow, ATable, ATableHeader, ATableModal }
38
+ export { install, ACell, AExpansionRow, ARow, ATable, ATableHeader, ATableLoading, ATableLoadingBar, ATableModal }