@bexis2/bexis2-core-ui 0.0.25 → 0.0.27

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 (24) hide show
  1. package/README.md +47 -9
  2. package/dist/components/Table/TableFilter.svelte +95 -95
  3. package/dist/components/Table/TablePagination.svelte +38 -38
  4. package/dist/components/form/CheckboxKvPList.svelte +7 -1
  5. package/dist/components/form/DropdownKvP.svelte +4 -4
  6. package/dist/components/form/DropdownKvP.svelte.d.ts +10 -10
  7. package/dist/components/form/MultiSelect.svelte +6 -4
  8. package/dist/components/page/BackToTop.svelte +30 -0
  9. package/dist/components/page/BackToTop.svelte.d.ts +23 -0
  10. package/dist/components/page/Page.svelte +3 -0
  11. package/dist/components/page/Page.svelte.d.ts +27 -0
  12. package/dist/css/themes/theme-bexis2.css +24 -23
  13. package/dist/index.d.ts +7 -1
  14. package/dist/index.js +5 -0
  15. package/package.json +99 -101
  16. package/src/lib/components/Table/TableFilter.svelte +176 -176
  17. package/src/lib/components/Table/TablePagination.svelte +61 -61
  18. package/src/lib/components/form/CheckboxKvPList.svelte +7 -1
  19. package/src/lib/components/form/DropdownKvP.svelte +4 -4
  20. package/src/lib/components/form/MultiSelect.svelte +6 -4
  21. package/src/lib/components/page/BackToTop.svelte +30 -0
  22. package/src/lib/components/page/Page.svelte +3 -0
  23. package/src/lib/css/themes/theme-bexis2.css +24 -23
  24. package/src/lib/index.ts +58 -45
package/package.json CHANGED
@@ -1,103 +1,101 @@
1
1
  {
2
- "name": "@bexis2/bexis2-core-ui",
3
- "version": "0.0.25",
4
- "private": false,
5
- "scripts": {
6
- "dev": "vite dev --host",
7
- "package": "svelte-package --watch",
8
- "build": "vite build",
9
- "build package": "svelte-kit sync && svelte-package --watch",
10
- "preview": "vite preview",
11
- "test": "playwright test",
12
- "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
13
- "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
14
- "test:unit": "vitest",
15
- "lint": "prettier --plugin-search-dir . --check . && eslint .",
16
- "format": "prettier --plugin-search-dir . --write .",
17
- "init": "npm init --scope bexis2",
18
- "link": "npm link",
19
- "publish": "npm publish --access public",
20
- "install bexis2-core-ui localy": "npm install ../bexis2-core-ui"
21
- },
22
- "devDependencies": {
23
- "@bexis2/bexis2-core-ui": "file:../bexis2-core-ui/dist",
24
- "@playwright/test": "^1.28.1",
25
- "@skeletonlabs/skeleton": "^1.2.5",
26
- "@sveltejs/adapter-auto": "^2.0.0",
27
- "@sveltejs/adapter-static": "^2.0.2",
28
- "@sveltejs/kit": "^1.5.0",
29
- "@sveltejs/package": "^2.0.2",
30
- "@tailwindcss/forms": "^0.5.3",
31
- "@tailwindcss/line-clamp": "^0.4.2",
32
- "@tailwindcss/typography": "^0.5.9",
33
- "@typescript-eslint/eslint-plugin": "^5.45.0",
34
- "@typescript-eslint/parser": "^5.45.0",
35
- "autoprefixer": "^10.4.14",
36
- "eslint": "^8.28.0",
37
- "eslint-config-prettier": "^8.5.0",
38
- "eslint-plugin-svelte3": "^4.0.0",
39
- "postcss": "^8.4.23",
40
- "prettier": "^2.8.0",
41
- "prettier-plugin-svelte": "^2.8.1",
42
- "raw-loader": "^4.0.2",
43
- "svelte": "^3.54.0",
44
- "svelte-check": "^3.0.1",
45
- "svelte-fa": "^3.0.3",
46
- "svelte-headless-table": "^0.17.3",
47
- "tailwindcss": "^3.3.2",
48
- "tslib": "^2.4.1",
49
- "typescript": "^5.0.0",
50
- "vite": "^4.3.0",
51
- "vitest": "^0.25.3"
52
- },
53
- "type": "module",
54
- "module": "./src/lib/index.ts",
55
- "types": "./src/lib/index.d.ts",
56
- "description": "Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).",
57
- "main": "./src/lib/index.d.ts",
58
- "directories": {
59
- "test": "tests"
60
- },
61
- "files": [
62
- "dist",
63
- "src/lib"
64
- ],
65
- "dependencies": {
66
- "@floating-ui/dom": "^1.2.7",
67
- "@fortawesome/fontawesome-free": "^6.2.1",
68
- "@fortawesome/fontawesome-svg-core": "^6.2.1",
69
- "@fortawesome/free-regular-svg-icons": "^6.2.1",
70
- "@fortawesome/free-solid-svg-icons": "^6.2.1",
71
- "axios": "^1.2.1",
72
- "highlight.js": "^11.8.0",
73
- "highlightjs-svelte": "^1.0.6",
74
- "svelte": "^3.54.0",
75
- "svelte-file-dropzone": "^2.0.1",
76
- "svelte-select": "^5.6.0",
77
- "vest": "^4.6.11"
78
- },
79
- "author": "David Schöne",
80
- "license": "ISC",
81
- "repository": {
82
- "type": "git",
83
- "url": "git+https://github.com/BEXIS2/bexis2-core-ui.git"
84
- },
85
- "bugs": {
86
- "url": "https://github.com/BEXIS2/bexis2-core-ui/issues"
87
- },
88
- "homepage": "https://github.com/BEXIS2/bexis2-core-ui#readme",
89
- "keywords": [
90
- "bexis2",
91
- "libary"
92
- ],
93
- "exports": {
94
- ".": {
95
- "types": "./dist/index.d.ts",
96
- "svelte": "./dist/index.js"
97
- },
98
- "./dist/index.css": {
99
- "import": "./dist/index.css",
100
- "require": "./dist/index.css"
101
- }
102
- }
2
+ "name": "@bexis2/bexis2-core-ui",
3
+ "version": "0.0.27",
4
+ "private": false,
5
+ "scripts": {
6
+ "dev": "vite dev --host",
7
+ "package": "svelte-package --watch",
8
+ "build": "vite build",
9
+ "build package": "svelte-kit sync && svelte-package --watch",
10
+ "preview": "vite preview",
11
+ "test": "playwright test",
12
+ "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
13
+ "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
14
+ "test:unit": "vitest",
15
+ "lint": "prettier --plugin-search-dir . --check . && eslint .",
16
+ "format": "prettier --plugin-search-dir . --write .",
17
+ "init": "npm init --scope bexis2",
18
+ "link": "npm link",
19
+ "publish": "npm publish --access public"
20
+ },
21
+ "devDependencies": {
22
+ "@playwright/test": "^1.28.1",
23
+ "@skeletonlabs/skeleton": "^1.2.5",
24
+ "@sveltejs/adapter-auto": "^2.0.0",
25
+ "@sveltejs/adapter-static": "^2.0.2",
26
+ "@sveltejs/kit": "^1.5.0",
27
+ "@sveltejs/package": "^2.0.2",
28
+ "@tailwindcss/forms": "^0.5.3",
29
+ "@tailwindcss/line-clamp": "^0.4.2",
30
+ "@tailwindcss/typography": "^0.5.9",
31
+ "@typescript-eslint/eslint-plugin": "^5.45.0",
32
+ "@typescript-eslint/parser": "^5.45.0",
33
+ "autoprefixer": "^10.4.14",
34
+ "eslint": "^8.28.0",
35
+ "eslint-config-prettier": "^8.5.0",
36
+ "eslint-plugin-svelte3": "^4.0.0",
37
+ "postcss": "^8.4.23",
38
+ "prettier": "^2.8.0",
39
+ "prettier-plugin-svelte": "^2.8.1",
40
+ "raw-loader": "^4.0.2",
41
+ "svelte": "^3.54.0",
42
+ "svelte-check": "^3.0.1",
43
+ "svelte-fa": "^3.0.3",
44
+ "svelte-headless-table": "^0.17.3",
45
+ "tailwindcss": "^3.3.2",
46
+ "tslib": "^2.4.1",
47
+ "typescript": "^5.0.0",
48
+ "vite": "^4.3.0",
49
+ "vitest": "^0.25.3"
50
+ },
51
+ "type": "module",
52
+ "module": "./src/lib/index.ts",
53
+ "types": "./src/lib/index.d.ts",
54
+ "description": "Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).",
55
+ "main": "./src/lib/index.d.ts",
56
+ "directories": {
57
+ "test": "tests"
58
+ },
59
+ "files": [
60
+ "dist",
61
+ "src/lib"
62
+ ],
63
+ "dependencies": {
64
+ "@floating-ui/dom": "^1.2.7",
65
+ "@fortawesome/fontawesome-free": "^6.2.1",
66
+ "@fortawesome/fontawesome-svg-core": "^6.2.1",
67
+ "@fortawesome/free-regular-svg-icons": "^6.2.1",
68
+ "@fortawesome/free-solid-svg-icons": "^6.2.1",
69
+ "axios": "^1.2.1",
70
+ "highlight.js": "^11.8.0",
71
+ "highlightjs-svelte": "^1.0.6",
72
+ "svelte": "^3.54.0",
73
+ "svelte-file-dropzone": "^2.0.1",
74
+ "svelte-select": "^5.6.0",
75
+ "vest": "^4.6.11"
76
+ },
77
+ "author": "David Schöne",
78
+ "license": "ISC",
79
+ "repository": {
80
+ "type": "git",
81
+ "url": "git+https://github.com/BEXIS2/bexis2-core-ui.git"
82
+ },
83
+ "bugs": {
84
+ "url": "https://github.com/BEXIS2/bexis2-core-ui/issues"
85
+ },
86
+ "homepage": "https://github.com/BEXIS2/bexis2-core-ui#readme",
87
+ "keywords": [
88
+ "bexis2",
89
+ "libary"
90
+ ],
91
+ "exports": {
92
+ ".": {
93
+ "types": "./dist/index.d.ts",
94
+ "svelte": "./dist/index.js"
95
+ },
96
+ "./dist/index.css": {
97
+ "import": "./dist/index.css",
98
+ "require": "./dist/index.css"
99
+ }
100
+ }
103
101
  }
package/src/lib/components/Table/TableFilter.svelte CHANGED
@@ -1,176 +1,176 @@
1
- <script lang="ts">
2
- import Fa from 'svelte-fa/src/fa.svelte';
3
- import { faFilter } from '@fortawesome/free-solid-svg-icons';
4
- import { popup } from '@skeletonlabs/skeleton';
5
- import type { PopupSettings } from '@skeletonlabs/skeleton';
6
-
7
- export let filterValue;
8
- export let values;
9
- export let id;
10
- export let tableId;
11
-
12
- let firstOption;
13
- let firstValue;
14
- let secondOption;
15
- let secondValue;
16
- let active = false;
17
-
18
- const options = {
19
- number: [
20
- {
21
- value: 'isequal',
22
- label: 'Is equal to'
23
- },
24
- {
25
- value: 'isgreaterorequal',
26
- label: 'Is greater than or equal to'
27
- },
28
- {
29
- value: 'isgreater',
30
- label: 'Is greater than'
31
- },
32
- {
33
- value: 'islessorequal',
34
- label: 'Is less than or equal to'
35
- },
36
- {
37
- value: 'isless',
38
- label: 'Is less than'
39
- },
40
- {
41
- value: 'isnotequal',
42
- label: 'Is not equal to'
43
- }
44
- ],
45
- string: [
46
- {
47
- value: 'isequal',
48
- label: 'Is equal to'
49
- },
50
- {
51
- value: 'isnotequal',
52
- label: 'Is not equal to'
53
- },
54
- {
55
- value: 'starts',
56
- label: 'Starts with'
57
- },
58
- {
59
- value: 'contains',
60
- label: 'Contains'
61
- },
62
- {
63
- value: 'notcontains',
64
- label: 'Does not contain'
65
- },
66
- {
67
- value: 'ends',
68
- label: 'Ends with'
69
- }
70
- ]
71
- };
72
-
73
- const popupId = `${tableId}-${id}`;
74
-
75
- const popupFeatured: PopupSettings = {
76
- event: 'click',
77
- target: popupId,
78
- placement: 'bottom-start'
79
- };
80
-
81
- const type = typeof $values[0];
82
- </script>
83
-
84
- <form class="">
85
- <button
86
- class:variant-filled-primary={active}
87
- class="btn w-max p-2"
88
- type="button"
89
- use:popup={popupFeatured}
90
- >
91
- <Fa icon={faFilter} size="12" />
92
- </button>
93
-
94
- <div data-popup={`${popupId}`}>
95
- <div class="card p-3 absolute grid gap-2 shadow-lg z-10 w-min">
96
- <button
97
- class="btn variant-filled-primary btn-sm"
98
- type="submit"
99
- on:click={() => {
100
- firstOption = 'isequal';
101
- firstValue = undefined;
102
- secondOption = 'isequal';
103
- secondValue = undefined;
104
-
105
- $filterValue = [firstOption, firstValue, secondOption, secondValue];
106
- active = false;
107
- }}>Clear Filter</button
108
- >
109
-
110
- <label for="" class="label normal-case text-sm">Show rows with value that</label>
111
- <div class="grid gap-2 w-full">
112
- <select
113
- class="select border border-primary-500 text-sm p-1"
114
- aria-label="Show rows with value that"
115
- bind:value={firstOption}
116
- on:click|stopPropagation
117
- >
118
- {#each options[type] as option (option)}
119
- <option value={option.value}>{option.label}</option>
120
- {/each}
121
- </select>
122
- {#if type === 'number'}
123
- <input
124
- type="number"
125
- class="input p-1 border border-primary-500"
126
- bind:value={firstValue}
127
- on:click|stopPropagation
128
- />
129
- {:else}
130
- <input
131
- type="text"
132
- class="input p-1 border border-primary-500"
133
- bind:value={firstValue}
134
- on:click|stopPropagation
135
- />
136
- {/if}
137
- </div>
138
- <label for="" class="label normal-case">And</label>
139
- <div class="grid gap-2 w-max">
140
- <select
141
- class="select border border-primary-500 text-sm p-1"
142
- aria-label="Show rows with value that"
143
- bind:value={secondOption}
144
- on:click|stopPropagation
145
- >
146
- {#each options[type] as option (option)}
147
- <option value={option.value}>{option.label}</option>
148
- {/each}
149
- </select>
150
- {#if type === 'number'}
151
- <input
152
- type="number"
153
- class="input p-1 border border-primary-500"
154
- bind:value={secondValue}
155
- on:click|stopPropagation
156
- />
157
- {:else}
158
- <input
159
- type="text"
160
- class="input p-1 border border-primary-500"
161
- bind:value={secondValue}
162
- on:click|stopPropagation
163
- />
164
- {/if}
165
- </div>
166
- <button
167
- class="btn variant-filled-primary btn-sm"
168
- type="submit"
169
- on:click={() => {
170
- active = firstValue?.toString().length > 0 || secondValue?.toString().length > 0;
171
- $filterValue = [firstOption, firstValue, secondOption, secondValue];
172
- }}>Submit</button
173
- >
174
- </div>
175
- </div>
176
- </form>
1
+ <script lang="ts">
2
+ import Fa from 'svelte-fa/src/fa.svelte';
3
+ import { faFilter } from '@fortawesome/free-solid-svg-icons';
4
+ import { popup } from '@skeletonlabs/skeleton';
5
+ import type { PopupSettings } from '@skeletonlabs/skeleton';
6
+
7
+ export let filterValue;
8
+ export let values;
9
+ export let id;
10
+ export let tableId;
11
+
12
+ let firstOption;
13
+ let firstValue;
14
+ let secondOption;
15
+ let secondValue;
16
+ let active = false;
17
+
18
+ const options = {
19
+ number: [
20
+ {
21
+ value: 'isequal',
22
+ label: 'Is equal to'
23
+ },
24
+ {
25
+ value: 'isgreaterorequal',
26
+ label: 'Is greater than or equal to'
27
+ },
28
+ {
29
+ value: 'isgreater',
30
+ label: 'Is greater than'
31
+ },
32
+ {
33
+ value: 'islessorequal',
34
+ label: 'Is less than or equal to'
35
+ },
36
+ {
37
+ value: 'isless',
38
+ label: 'Is less than'
39
+ },
40
+ {
41
+ value: 'isnotequal',
42
+ label: 'Is not equal to'
43
+ }
44
+ ],
45
+ string: [
46
+ {
47
+ value: 'isequal',
48
+ label: 'Is equal to'
49
+ },
50
+ {
51
+ value: 'isnotequal',
52
+ label: 'Is not equal to'
53
+ },
54
+ {
55
+ value: 'starts',
56
+ label: 'Starts with'
57
+ },
58
+ {
59
+ value: 'contains',
60
+ label: 'Contains'
61
+ },
62
+ {
63
+ value: 'notcontains',
64
+ label: 'Does not contain'
65
+ },
66
+ {
67
+ value: 'ends',
68
+ label: 'Ends with'
69
+ }
70
+ ]
71
+ };
72
+
73
+ const popupId = `${tableId}-${id}`;
74
+
75
+ const popupFeatured: PopupSettings = {
76
+ event: 'click',
77
+ target: popupId,
78
+ placement: 'bottom-start'
79
+ };
80
+
81
+ const type = typeof $values[0];
82
+ </script>
83
+
84
+ <form class="">
85
+ <button
86
+ class:variant-filled-primary={active}
87
+ class="btn w-max p-2"
88
+ type="button"
89
+ use:popup={popupFeatured}
90
+ >
91
+ <Fa icon={faFilter} size="12" />
92
+ </button>
93
+
94
+ <div data-popup={`${popupId}`}>
95
+ <div class="card p-3 absolute grid gap-2 shadow-lg z-10 w-min">
96
+ <button
97
+ class="btn variant-filled-primary btn-sm"
98
+ type="submit"
99
+ on:click|preventDefault={() => {
100
+ firstOption = 'isequal';
101
+ firstValue = undefined;
102
+ secondOption = 'isequal';
103
+ secondValue = undefined;
104
+
105
+ $filterValue = [firstOption, firstValue, secondOption, secondValue];
106
+ active = false;
107
+ }}>Clear Filter</button
108
+ >
109
+
110
+ <label for="" class="label normal-case text-sm">Show rows with value that</label>
111
+ <div class="grid gap-2 w-full">
112
+ <select
113
+ class="select border border-primary-500 text-sm p-1"
114
+ aria-label="Show rows with value that"
115
+ bind:value={firstOption}
116
+ on:click|stopPropagation
117
+ >
118
+ {#each options[type] as option (option)}
119
+ <option value={option.value}>{option.label}</option>
120
+ {/each}
121
+ </select>
122
+ {#if type === 'number'}
123
+ <input
124
+ type="number"
125
+ class="input p-1 border border-primary-500"
126
+ bind:value={firstValue}
127
+ on:click|stopPropagation
128
+ />
129
+ {:else}
130
+ <input
131
+ type="text"
132
+ class="input p-1 border border-primary-500"
133
+ bind:value={firstValue}
134
+ on:click|stopPropagation
135
+ />
136
+ {/if}
137
+ </div>
138
+ <label for="" class="label normal-case">And</label>
139
+ <div class="grid gap-2 w-max">
140
+ <select
141
+ class="select border border-primary-500 text-sm p-1"
142
+ aria-label="Show rows with value that"
143
+ bind:value={secondOption}
144
+ on:click|stopPropagation
145
+ >
146
+ {#each options[type] as option (option)}
147
+ <option value={option.value}>{option.label}</option>
148
+ {/each}
149
+ </select>
150
+ {#if type === 'number'}
151
+ <input
152
+ type="number"
153
+ class="input p-1 border border-primary-500"
154
+ bind:value={secondValue}
155
+ on:click|stopPropagation
156
+ />
157
+ {:else}
158
+ <input
159
+ type="text"
160
+ class="input p-1 border border-primary-500"
161
+ bind:value={secondValue}
162
+ on:click|stopPropagation
163
+ />
164
+ {/if}
165
+ </div>
166
+ <button
167
+ class="btn variant-filled-primary btn-sm"
168
+ type="submit"
169
+ on:click|preventDefault={() => {
170
+ active = firstValue?.toString().length > 0 || secondValue?.toString().length > 0;
171
+ $filterValue = [firstOption, firstValue, secondOption, secondValue];
172
+ }}>Submit</button
173
+ >
174
+ </div>
175
+ </div>
176
+ </form>