quasar-ui-danx 0.2.4 → 0.2.6

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 (89) hide show
  1. package/README.md +24 -109
  2. package/demo/.eslintrc.cjs +15 -0
  3. package/demo/.prettierrc.json +8 -0
  4. package/demo/.vscode/extensions.json +7 -0
  5. package/demo/README.md +45 -0
  6. package/demo/env.d.ts +5 -0
  7. package/demo/index.html +13 -0
  8. package/demo/package.json +42 -0
  9. package/demo/public/favicon.ico +0 -0
  10. package/demo/src/App.vue +86 -0
  11. package/demo/src/assets/base.css +86 -0
  12. package/demo/src/assets/logo.svg +1 -0
  13. package/demo/src/assets/main.css +35 -0
  14. package/demo/src/components/DemoActionTable/demoTableActions.ts +26 -0
  15. package/demo/src/components/DemoActionTable/demoTableCallbacks.ts +109 -0
  16. package/demo/src/components/DemoActionTable/demoTableColumns.ts +34 -0
  17. package/demo/src/components/DemoActionTable/demoTableFilterFields.ts +40 -0
  18. package/demo/src/components/HelloWorld.vue +41 -0
  19. package/demo/src/components/TheWelcome.vue +88 -0
  20. package/demo/src/components/WelcomeItem.vue +87 -0
  21. package/demo/src/components/__tests__/HelloWorld.spec.ts +11 -0
  22. package/demo/src/components/icons/IconCommunity.vue +7 -0
  23. package/demo/src/components/icons/IconDocumentation.vue +7 -0
  24. package/demo/src/components/icons/IconEcosystem.vue +7 -0
  25. package/demo/src/components/icons/IconSupport.vue +7 -0
  26. package/demo/src/components/icons/IconTooling.vue +19 -0
  27. package/demo/src/main.ts +11 -0
  28. package/demo/src/router/index.ts +28 -0
  29. package/demo/src/views/AboutView.vue +15 -0
  30. package/demo/src/views/DemoView.vue +17 -0
  31. package/demo/src/views/HomeView.vue +9 -0
  32. package/demo/tsconfig.app.json +14 -0
  33. package/demo/tsconfig.json +19 -0
  34. package/demo/tsconfig.node.json +19 -0
  35. package/demo/tsconfig.vitest.json +11 -0
  36. package/demo/vite.config.ts +18 -0
  37. package/demo/vitest.config.ts +14 -0
  38. package/dist/components/ActionTable/Columns/index.d.ts +4 -0
  39. package/dist/components/ActionTable/Filters/index.d.ts +6 -0
  40. package/dist/components/ActionTable/Form/Fields/index.d.ts +24 -0
  41. package/dist/components/ActionTable/Form/index.d.ts +2 -0
  42. package/dist/components/ActionTable/Layouts/ActionTableLayout.vue.d.ts +12 -0
  43. package/dist/components/ActionTable/Layouts/index.d.ts +1 -0
  44. package/dist/components/ActionTable/index.d.ts +12 -0
  45. package/dist/components/ActionTable/listControls.d.ts +50 -0
  46. package/dist/components/ActionTable/listHelpers.d.ts +12 -0
  47. package/dist/components/ActionTable/tableColumns.d.ts +8 -0
  48. package/dist/components/AuditHistory/index.d.ts +2 -0
  49. package/dist/components/DragAndDrop/dragAndDrop.d.ts +111 -0
  50. package/dist/components/DragAndDrop/index.d.ts +4 -0
  51. package/dist/components/DragAndDrop/listDragAndDrop.d.ts +74 -0
  52. package/dist/components/PanelsDrawer/index.d.ts +3 -0
  53. package/dist/components/Utility/Buttons/index.d.ts +2 -0
  54. package/dist/components/Utility/Controls/index.d.ts +1 -0
  55. package/dist/components/Utility/Dialogs/index.d.ts +5 -0
  56. package/dist/components/Utility/Files/index.d.ts +2 -0
  57. package/dist/components/Utility/Formats/index.d.ts +5 -0
  58. package/dist/components/Utility/Layouts/index.d.ts +2 -0
  59. package/dist/components/Utility/Popovers/index.d.ts +2 -0
  60. package/dist/components/Utility/Tabs/index.d.ts +2 -0
  61. package/dist/components/Utility/Tools/index.d.ts +3 -0
  62. package/dist/components/Utility/Transitions/index.d.ts +3 -0
  63. package/dist/components/Utility/index.d.ts +10 -0
  64. package/dist/components/index.d.ts +5 -0
  65. package/dist/config/index.d.ts +8 -0
  66. package/dist/danx.es.js +6 -6
  67. package/dist/danx.umd.js +2 -2
  68. package/dist/helpers/FileUpload.d.ts +107 -0
  69. package/dist/helpers/FlashMessages.d.ts +24 -0
  70. package/dist/helpers/actions.d.ts +58 -0
  71. package/dist/helpers/array.d.ts +16 -0
  72. package/dist/helpers/compatibility.d.ts +8 -0
  73. package/dist/helpers/date.d.ts +1 -0
  74. package/dist/helpers/download.d.ts +1 -0
  75. package/dist/helpers/downloadPdf.d.ts +24 -0
  76. package/dist/helpers/files.d.ts +1 -0
  77. package/dist/helpers/formats.d.ts +112 -0
  78. package/dist/helpers/http.d.ts +23 -0
  79. package/dist/helpers/index.d.ts +15 -0
  80. package/dist/helpers/multiFileUpload.d.ts +11 -0
  81. package/dist/helpers/singleFileUpload.d.ts +11 -0
  82. package/dist/helpers/storage.d.ts +2 -0
  83. package/dist/helpers/utils.d.ts +46 -0
  84. package/dist/svg/index.d.ts +12 -0
  85. package/dist/vendor/tinymce-config.d.ts +1 -0
  86. package/package.json +6 -5
  87. package/src/helpers/FileUpload.ts +16 -7
  88. package/tsconfig.json +24 -13
  89. package/vite.config.js +7 -1
package/README.md CHANGED
@@ -5,141 +5,56 @@
5
5
 
6
6
  **Compatible with Quasar UI v2 and Vue 3**.
7
7
 
8
-
9
8
  # Component Danx
10
- > Short description of the component
11
-
12
-
13
9
 
10
+ > Component and function library built on Quasar + Vue 3
14
11
 
15
12
  # Usage
16
13
 
17
- ## Quasar CLI project
18
-
19
-
20
- Install the [App Extension](../app-extension).
21
-
22
- **OR**:
23
-
24
-
25
- Create and register a boot file:
26
-
27
- ```js
28
- import Vue from 'vue'
29
- import Plugin from 'quasar-ui-danx'
30
- import 'quasar-ui-danx/dist/index.css'
31
-
32
- Vue.use(Plugin)
33
- ```
34
-
35
- **OR**:
36
-
37
- ```html
38
- <style src="quasar-ui-danx/dist/index.css"></style>
39
-
40
- <script>
41
- import { Component as Danx } from 'quasar-ui-danx'
42
-
43
- export default {
44
-
45
- components: {
46
- Danx
47
- }
48
-
49
-
50
- }
14
+ ```vue
15
+
16
+ <template>
17
+ <ActionTable
18
+ label="Danx"
19
+ name="danx"
20
+ v-model:quasar-pagination="quasarPagination"
21
+ v-model:selected-rows="selectedRows"
22
+ :columns="columns"
23
+ />
24
+ </template>
25
+ <script setup>
26
+ import 'quasar-ui-danx/dist/index.css';
27
+ import { ActionTable, useTableColumns, useListControls } from 'quasar-ui-danx';
28
+
29
+ const { columns } = useTableColumns([{ name: 'name', label: 'Name' }, { name: 'age', label: 'Age' }]);
30
+ const { quasarPagination, selectedRows } = useListControls({});
51
31
  </script>
52
32
  ```
53
33
 
54
- ## Vue CLI project
55
-
56
- ```js
57
- import Vue from 'vue'
58
- import Plugin from 'quasar-ui-danx'
59
- import 'quasar-ui-danx/dist/index.css'
60
-
61
- Vue.use(Plugin)
62
- ```
63
-
64
- **OR**:
65
-
66
- ```html
67
- <style src="quasar-ui-danx/dist/index.css"></style>
68
-
69
- <script>
70
- import { Component as Danx } from 'quasar-ui-danx'
71
-
72
- export default {
73
-
74
- components: {
75
- Danx
76
- }
77
-
78
-
79
- }
80
- </script>
81
- ```
82
-
83
- ## UMD variant
84
-
85
- Exports `window.danx`.
86
-
87
- Add the following tag(s) after the Quasar ones:
88
-
89
- ```html
90
- <head>
91
- <!-- AFTER the Quasar stylesheet tags: -->
92
- <link href="https://cdn.jsdelivr.net/npm/quasar-ui-danx/dist/index.min.css" rel="stylesheet" type="text/css">
93
- </head>
94
- <body>
95
- <!-- at end of body, AFTER Quasar script(s): -->
96
- <script src="https://cdn.jsdelivr.net/npm/quasar-ui-danx/dist/index.umd.min.js"></script>
97
- </body>
98
- ```
99
- If you need the RTL variant of the CSS, then go for the following (instead of the above stylesheet link):
100
- ```html
101
- <link href="https://cdn.jsdelivr.net/npm/quasar-ui-danx/dist/index.rtl.min.css" rel="stylesheet" type="text/css">
102
- ```
103
-
104
34
  # Setup
35
+
105
36
  ```bash
106
37
  $ yarn
107
38
  ```
108
39
 
109
40
  # Developing
41
+
110
42
  ```bash
111
43
  # start dev in SPA mode
112
44
  $ yarn dev
113
-
114
- # start dev in UMD mode
115
- $ yarn dev:umd
116
-
117
- # start dev in SSR mode
118
- $ yarn dev:ssr
119
-
120
- # start dev in Cordova iOS mode
121
- $ yarn dev:ios
122
-
123
- # start dev in Cordova Android mode
124
- $ yarn dev:android
125
-
126
- # start dev in Electron mode
127
- $ yarn dev:electron
128
45
  ```
129
46
 
130
47
  # Building package
48
+
131
49
  ```bash
132
50
  $ yarn build
133
51
  ```
134
52
 
135
53
  # Adding Testing Components
136
- in the `ui/dev/src/pages` you can add Vue files to test your component/directive. When using `yarn dev` to build the UI, any pages in that location will automatically be picked up by dynamic routing and added to the test page.
137
54
 
138
- # Adding Assets
139
- If you have a component that has assets, like language or icon-sets, you will need to provide these for UMD. In the `ui/build/script.javascript.js` file, you will find a couple of commented out commands that call `addAssets`. Uncomment what you need and add your assets to have them be built and put into the `ui/dist` folder.
140
-
141
- # Donate
142
- If you appreciate the work that went into this, please consider [donating to Quasar](https://donate.quasar.dev).
55
+ in the `ui/dev/src/pages` you can add Vue files to test your component/directive. When using `yarn dev` to build the UI,
56
+ any pages in that location will automatically be picked up by dynamic routing and added to the test page.
143
57
 
144
58
  # License
59
+
145
60
  MIT (c) Dan <dan@flytedesk.com>
package/demo/.eslintrc.cjs ADDED
@@ -0,0 +1,15 @@
1
+ /* eslint-env node */
2
+ require('@rushstack/eslint-patch/modern-module-resolution')
3
+
4
+ module.exports = {
5
+ root: true,
6
+ 'extends': [
7
+ 'plugin:vue/vue3-essential',
8
+ 'eslint:recommended',
9
+ '@vue/eslint-config-typescript',
10
+ '@vue/eslint-config-prettier/skip-formatting'
11
+ ],
12
+ parserOptions: {
13
+ ecmaVersion: 'latest'
14
+ }
15
+ }
package/demo/.prettierrc.json ADDED
@@ -0,0 +1,8 @@
1
+ {
2
+ "$schema": "https://json.schemastore.org/prettierrc",
3
+ "semi": false,
4
+ "tabWidth": 2,
5
+ "singleQuote": true,
6
+ "printWidth": 100,
7
+ "trailingComma": "none"
8
+ }
package/demo/.vscode/extensions.json ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "recommendations": [
3
+ "Vue.volar",
4
+ "dbaeumer.vscode-eslint",
5
+ "esbenp.prettier-vscode"
6
+ ]
7
+ }
package/demo/README.md ADDED
@@ -0,0 +1,45 @@
1
+ # demo
2
+
3
+ This template should help get you started developing with Vue 3 in Vite.
4
+
5
+ ## Recommended IDE Setup
6
+
7
+ [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
8
+
9
+ ## Type Support for `.vue` Imports in TS
10
+
11
+ TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
12
+
13
+ ## Customize configuration
14
+
15
+ See [Vite Configuration Reference](https://vitejs.dev/config/).
16
+
17
+ ## Project Setup
18
+
19
+ ```sh
20
+ yarn
21
+ ```
22
+
23
+ ### Compile and Hot-Reload for Development
24
+
25
+ ```sh
26
+ yarn dev
27
+ ```
28
+
29
+ ### Type-Check, Compile and Minify for Production
30
+
31
+ ```sh
32
+ yarn build
33
+ ```
34
+
35
+ ### Run Unit Tests with [Vitest](https://vitest.dev/)
36
+
37
+ ```sh
38
+ yarn test:unit
39
+ ```
40
+
41
+ ### Lint with [ESLint](https://eslint.org/)
42
+
43
+ ```sh
44
+ yarn lint
45
+ ```
package/demo/env.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ /// <reference types="vite/client" />
2
+ declare module "*.vue" {
3
+ import Vue from "vue";
4
+ export default Vue;
5
+ }
package/demo/index.html ADDED
@@ -0,0 +1,13 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <link rel="icon" href="/favicon.ico">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Vite App</title>
8
+ </head>
9
+ <body>
10
+ <div id="app"></div>
11
+ <script type="module" src="/src/main.ts"></script>
12
+ </body>
13
+ </html>
package/demo/package.json ADDED
@@ -0,0 +1,42 @@
1
+ {
2
+ "name": "demo",
3
+ "version": "0.0.0",
4
+ "private": true,
5
+ "type": "module",
6
+ "scripts": {
7
+ "dev": "vite",
8
+ "build": "run-p type-check \"build-only {@}\" --",
9
+ "preview": "vite preview",
10
+ "test:unit": "vitest",
11
+ "build-only": "vite build",
12
+ "type-check": "vue-tsc --build --force",
13
+ "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
14
+ "format": "prettier --write src/"
15
+ },
16
+ "dependencies": {
17
+ "quasar-ui-danx": "^0.2.5",
18
+ "vue": "^3.4.21",
19
+ "vue-router": "^4.3.0"
20
+ },
21
+ "devDependencies": {
22
+ "@rushstack/eslint-patch": "^1.3.3",
23
+ "@tsconfig/node20": "^20.1.2",
24
+ "@types/jsdom": "^21.1.6",
25
+ "@types/node": "^20.11.28",
26
+ "@vitejs/plugin-vue": "^5.0.4",
27
+ "@vue/eslint-config-prettier": "^8.0.0",
28
+ "@vue/eslint-config-typescript": "^12.0.0",
29
+ "@vue/test-utils": "^2.4.5",
30
+ "@vue/tsconfig": "^0.5.1",
31
+ "eslint": "^8.49.0",
32
+ "eslint-plugin-vue": "^9.17.0",
33
+ "jsdom": "^24.0.0",
34
+ "npm-run-all2": "^6.1.2",
35
+ "prettier": "^3.0.3",
36
+ "typescript": "~5.4.0",
37
+ "vite": "^5.1.6",
38
+ "vite-plugin-vue-devtools": "^7.0.18",
39
+ "vitest": "^1.4.0",
40
+ "vue-tsc": "^2.0.6"
41
+ }
42
+ }
package/demo/public/favicon.ico ADDED
Binary file
package/demo/src/App.vue ADDED
@@ -0,0 +1,86 @@
1
+ <script setup lang="ts">
2
+ import { RouterLink, RouterView } from "vue-router";
3
+ import HelloWorld from "./components/HelloWorld.vue";
4
+ </script>
5
+
6
+ <template>
7
+ <header>
8
+ <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
9
+
10
+ <div class="wrapper">
11
+ <HelloWorld msg="You did it!" />
12
+
13
+ <nav>
14
+ <RouterLink to="/">Home</RouterLink>
15
+ <RouterLink to="/demo">Demo</RouterLink>
16
+ <RouterLink to="/about">About</RouterLink>
17
+ </nav>
18
+ </div>
19
+ </header>
20
+
21
+ <RouterView />
22
+ </template>
23
+
24
+ <style scoped>
25
+ header {
26
+ line-height: 1.5;
27
+ max-height: 100vh;
28
+ }
29
+
30
+ .logo {
31
+ display: block;
32
+ margin: 0 auto 2rem;
33
+ }
34
+
35
+ nav {
36
+ width: 100%;
37
+ font-size: 12px;
38
+ text-align: center;
39
+ margin-top: 2rem;
40
+ }
41
+
42
+ nav a.router-link-exact-active {
43
+ color: var(--color-text);
44
+ }
45
+
46
+ nav a.router-link-exact-active:hover {
47
+ background-color: transparent;
48
+ }
49
+
50
+ nav a {
51
+ display: inline-block;
52
+ padding: 0 1rem;
53
+ border-left: 1px solid var(--color-border);
54
+ }
55
+
56
+ nav a:first-of-type {
57
+ border: 0;
58
+ }
59
+
60
+ @media (min-width: 1024px) {
61
+ header {
62
+ display: flex;
63
+ place-items: center;
64
+ padding-right: calc(var(--section-gap) / 2);
65
+ }
66
+
67
+ .logo {
68
+ margin: 0 2rem 0 0;
69
+ }
70
+
71
+ header .wrapper {
72
+ display: flex;
73
+ place-items: flex-start;
74
+ flex-wrap: wrap;
75
+ }
76
+
77
+ nav {
78
+ text-align: left;
79
+ margin-left: -1rem;
80
+ font-size: 1rem;
81
+
82
+ padding: 1rem 0;
83
+ margin-top: 1rem;
84
+ }
85
+ }
86
+ </style>
package/demo/src/assets/base.css ADDED
@@ -0,0 +1,86 @@
1
+ /* color palette from <https://github.com/vuejs/theme> */
2
+ :root {
3
+ --vt-c-white: #ffffff;
4
+ --vt-c-white-soft: #f8f8f8;
5
+ --vt-c-white-mute: #f2f2f2;
6
+
7
+ --vt-c-black: #181818;
8
+ --vt-c-black-soft: #222222;
9
+ --vt-c-black-mute: #282828;
10
+
11
+ --vt-c-indigo: #2c3e50;
12
+
13
+ --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
14
+ --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
15
+ --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
16
+ --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
17
+
18
+ --vt-c-text-light-1: var(--vt-c-indigo);
19
+ --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
20
+ --vt-c-text-dark-1: var(--vt-c-white);
21
+ --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
22
+ }
23
+
24
+ /* semantic color variables for this project */
25
+ :root {
26
+ --color-background: var(--vt-c-white);
27
+ --color-background-soft: var(--vt-c-white-soft);
28
+ --color-background-mute: var(--vt-c-white-mute);
29
+
30
+ --color-border: var(--vt-c-divider-light-2);
31
+ --color-border-hover: var(--vt-c-divider-light-1);
32
+
33
+ --color-heading: var(--vt-c-text-light-1);
34
+ --color-text: var(--vt-c-text-light-1);
35
+
36
+ --section-gap: 160px;
37
+ }
38
+
39
+ @media (prefers-color-scheme: dark) {
40
+ :root {
41
+ --color-background: var(--vt-c-black);
42
+ --color-background-soft: var(--vt-c-black-soft);
43
+ --color-background-mute: var(--vt-c-black-mute);
44
+
45
+ --color-border: var(--vt-c-divider-dark-2);
46
+ --color-border-hover: var(--vt-c-divider-dark-1);
47
+
48
+ --color-heading: var(--vt-c-text-dark-1);
49
+ --color-text: var(--vt-c-text-dark-2);
50
+ }
51
+ }
52
+
53
+ *,
54
+ *::before,
55
+ *::after {
56
+ box-sizing: border-box;
57
+ margin: 0;
58
+ font-weight: normal;
59
+ }
60
+
61
+ body {
62
+ min-height: 100vh;
63
+ color: var(--color-text);
64
+ background: var(--color-background);
65
+ transition:
66
+ color 0.5s,
67
+ background-color 0.5s;
68
+ line-height: 1.6;
69
+ font-family:
70
+ Inter,
71
+ -apple-system,
72
+ BlinkMacSystemFont,
73
+ 'Segoe UI',
74
+ Roboto,
75
+ Oxygen,
76
+ Ubuntu,
77
+ Cantarell,
78
+ 'Fira Sans',
79
+ 'Droid Sans',
80
+ 'Helvetica Neue',
81
+ sans-serif;
82
+ font-size: 15px;
83
+ text-rendering: optimizeLegibility;
84
+ -webkit-font-smoothing: antialiased;
85
+ -moz-osx-font-smoothing: grayscale;
86
+ }
package/demo/src/assets/logo.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
package/demo/src/assets/main.css ADDED
@@ -0,0 +1,35 @@
1
+ @import './base.css';
2
+
3
+ #app {
4
+ max-width: 1280px;
5
+ margin: 0 auto;
6
+ padding: 2rem;
7
+ font-weight: normal;
8
+ }
9
+
10
+ a,
11
+ .green {
12
+ text-decoration: none;
13
+ color: hsla(160, 100%, 37%, 1);
14
+ transition: 0.4s;
15
+ padding: 3px;
16
+ }
17
+
18
+ @media (hover: hover) {
19
+ a:hover {
20
+ background-color: hsla(160, 100%, 37%, 0.2);
21
+ }
22
+ }
23
+
24
+ @media (min-width: 1024px) {
25
+ body {
26
+ display: flex;
27
+ place-items: center;
28
+ }
29
+
30
+ #app {
31
+ display: grid;
32
+ grid-template-columns: 1fr 1fr;
33
+ padding: 0 2rem;
34
+ }
35
+ }
package/demo/src/components/DemoActionTable/demoTableActions.ts ADDED
@@ -0,0 +1,26 @@
1
+ import { useListControls } from "quasar-ui-danx";
2
+ import { applyActionCb, filterFieldOptionsCb, itemListCb, summaryCb } from "./demoTableCallbacks";
3
+
4
+ export const {
5
+ // State
6
+ filter,
7
+ filterFieldOptions,
8
+ showFilters,
9
+ isLoadingList,
10
+ isLoadingSummary,
11
+ quasarPagination,
12
+ selectedRows,
13
+ summary,
14
+ pagedItems,
15
+
16
+ // Actions
17
+ refreshAll,
18
+ applyAction
19
+ } = useListControls("items", {
20
+ listRoute: itemListCb,
21
+ summaryRoute: summaryCb,
22
+ filterFieldOptionsRoute: filterFieldOptionsCb,
23
+ applyActionRoute: applyActionCb,
24
+ refreshFilters: true,
25
+ urlPattern: /\/admin-v4\/campaigns/
26
+ });
package/demo/src/components/DemoActionTable/demoTableCallbacks.ts ADDED
@@ -0,0 +1,109 @@
1
+ import { dbDateTime } from "quasar-ui-danx";
2
+
3
+ /**
4
+ * Generate a list of items with statuses To Do, In Progress, and Done
5
+ * Randomized start and end dates that occur in the current year.
6
+ * The end date is anywhere from 1 to 31 days after the start date.
7
+ */
8
+ const listItems = (() => {
9
+ const items = [];
10
+ const year = new Date().getFullYear();
11
+ for (let i = 0; i < 100; i++) {
12
+ const status = Math.random() * 3 < 1 ? "To Do" : Math.random() * 3 < 2 ? "In Progress" : "Done";
13
+ const start_date = new Date(year, Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1);
14
+ const end_date = new Date(start_date);
15
+ end_date.setDate(start_date.getDate() + Math.floor(Math.random() * 31) + 1);
16
+ items.push({
17
+ name: `Item ${i + 1}`,
18
+ start_date: start_date.toISOString().split("T")[0],
19
+ end_date: end_date.toISOString().split("T")[0],
20
+ status
21
+ });
22
+ }
23
+ return items;
24
+ })();
25
+
26
+ function getFilteredItems(filter) {
27
+ let filteredItems = [...listItems];
28
+
29
+ if (filter.status) {
30
+ filteredItems = filteredItems.filter((item) => filter.status.includes(item.status));
31
+ }
32
+
33
+ if (filter.filterDateRange) {
34
+ const [start, end] = [dbDateTime(filter.filterDateRange.from), dbDateTime(filter.filterDateRange.to)];
35
+ filteredItems = filteredItems.filter((item) => {
36
+ return dbDateTime(item.start_date) <= end && dbDateTime(item.end_date) >= start;
37
+ });
38
+ }
39
+
40
+ return filteredItems;
41
+ }
42
+
43
+ function sortListItems(items, column, dir) {
44
+ items.sort((a, b) => {
45
+ if (a[column] > b[column]) {
46
+ return dir === "asc" ? 1 : -1;
47
+ }
48
+ if (a[column] < b[column]) {
49
+ return dir === "asc" ? -1 : 1;
50
+ }
51
+ return 0;
52
+ });
53
+ }
54
+
55
+ function paginateListItems(items, perPage, page) {
56
+ const start = (page - 1) * perPage;
57
+ const end = start + perPage;
58
+ return items.slice(start, end);
59
+ }
60
+
61
+ export async function itemListCb(pager) {
62
+ const filteredListItems = getFilteredItems(pager.filter || {});
63
+
64
+ // Perform sort
65
+ if (pager.sort) {
66
+ sortListItems(filteredListItems, pager.sort[0].column, pager.sort[0].order);
67
+ }
68
+
69
+ // Perform pagination
70
+ const perPage = pager.perPage || 10;
71
+ const page = pager.page || 1;
72
+ const pagedListItems = paginateListItems(filteredListItems, perPage, page);
73
+
74
+ return {
75
+ data: pagedListItems,
76
+ meta: {
77
+ total: filteredListItems.length,
78
+ page,
79
+ perPage,
80
+ }
81
+ };
82
+ }
83
+
84
+ export async function summaryCb(filter) {
85
+ const filteredListItems = getFilteredItems(filter || {});
86
+ const completedItems = filteredListItems.filter((item) => item.status === "Done");
87
+ const minStartDate = filteredListItems.reduce((min, item) => item.start_date < min ? item.start_date : min, filteredListItems[0].start_date);
88
+ const maxEndDate = filteredListItems.reduce((max, item) => item.end_date > max ? item.end_date : max, filteredListItems[0].end_date);
89
+ return {
90
+ name: "",
91
+ start_date: minStartDate,
92
+ end_date: maxEndDate,
93
+ status: completedItems.length + " / " + filteredListItems.length,
94
+ };
95
+ }
96
+
97
+ export async function filterFieldOptionsCb() {
98
+ return {
99
+ statuses: [
100
+ { value: "To Do", label: "To Do" },
101
+ { value: "In Progress", label: "In Progress" },
102
+ { value: "Done", label: "Done" },
103
+ ],
104
+ };
105
+ }
106
+
107
+ export async function applyActionCb(action) {
108
+ console.log("Action applied:", action);
109
+ }
package/demo/src/components/DemoActionTable/demoTableColumns.ts ADDED
@@ -0,0 +1,34 @@
1
+ import { fDate } from "quasar-ui-danx";
2
+
3
+ export const columns = [
4
+ {
5
+ name: "name",
6
+ label: "Name",
7
+ field: "name",
8
+ sortable: true,
9
+ align: "left",
10
+ },
11
+ {
12
+ name: "start_date",
13
+ label: "Start Date",
14
+ field: "start_date",
15
+ sortable: true,
16
+ align: "left",
17
+ format: fDate,
18
+ },
19
+ {
20
+ name: "end_date",
21
+ label: "End Date",
22
+ field: "end_date",
23
+ sortable: true,
24
+ align: "left",
25
+ format: fDate,
26
+ },
27
+ {
28
+ name: "status",
29
+ label: "Campaign Status",
30
+ field: "status",
31
+ align: "left",
32
+ sortable: true,
33
+ }
34
+ ];