quasar-ui-danx 0.2.4 → 0.2.6

Sign up to get free protection for your applications and to get access to all the features.
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
+ ];