@bexis2/bexis2-core-ui 0.4.100 → 0.4.102

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.
package/README.md CHANGED
@@ -1,4 +1,11 @@
1
1
  # bexis-core-ui
2
+ ## 0.4.101
3
+ - NumericInput
4
+ - add integerOnly flag to prevent add numbers instead of integers
5
+
6
+ ## 0.4.101
7
+ - Checkbox
8
+ - fix layout
2
9
 
3
10
  ## 0.4.100
4
11
  - Big Table
@@ -22,7 +22,7 @@ $: {
22
22
  <input
23
23
  {id}
24
24
  {title}
25
- class="input variant-form-material bg-zinc-50 dark:bg-zinc-50"
25
+ class="checkbox"
26
26
  type="checkbox"
27
27
  class:input-success={valid}
28
28
  class:input-error={invalid}
@@ -1,6 +1,4 @@
1
1
  <script>import InputContainer from "./InputContainer.svelte";
2
- import { helpStore } from "../../stores/pageStores";
3
- import { convertServerColumns } from "../Table/utils";
4
2
  export let id = "";
5
3
  export let label = "";
6
4
  export let title = "";
@@ -17,6 +15,7 @@ export let showDescription = false;
17
15
  export let showIcon = false;
18
16
  export let min = void 0;
19
17
  export let max = void 0;
18
+ export let integerOnly = false;
20
19
  $: {
21
20
  if ((!label || label.trim() === "") && title && title.trim() !== "") {
22
21
  label = title;
@@ -30,6 +29,14 @@ $: if (max != void 0 && parseInt(value) > max) {
30
29
  $: if (min != void 0 && parseInt(value) < min) {
31
30
  value = min.toString();
32
31
  }
32
+ function keyDownFn(event) {
33
+ if (integerOnly) {
34
+ if (event.key === "." || event.key === ",") {
35
+ event.preventDefault();
36
+ return;
37
+ }
38
+ }
39
+ }
33
40
  </script>
34
41
 
35
42
  <InputContainer
@@ -56,6 +63,7 @@ $: if (min != void 0 && parseInt(value) < min) {
56
63
  {max}
57
64
  on:input
58
65
  on:change
66
+ on:keydown={keyDownFn}
59
67
  {placeholder}
60
68
  {disabled}
61
69
  />
@@ -17,6 +17,7 @@ declare const __propDef: {
17
17
  showIcon?: boolean;
18
18
  min?: number | undefined;
19
19
  max?: number | undefined;
20
+ integerOnly?: boolean;
20
21
  };
21
22
  events: {
22
23
  showDescription: CustomEvent<any>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bexis2/bexis2-core-ui",
3
- "version": "0.4.100",
3
+ "version": "0.4.102",
4
4
  "private": false,
5
5
  "description": "Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).",
6
6
  "keywords": [
@@ -29,7 +29,7 @@ $: {
29
29
  <input
30
30
  {id}
31
31
  {title}
32
- class="input variant-form-material bg-zinc-50 dark:bg-zinc-50"
32
+ class="checkbox"
33
33
  type="checkbox"
34
34
  class:input-success={valid}
35
35
  class:input-error={invalid}
@@ -1,7 +1,5 @@
1
1
  <script lang="ts">
2
2
  import InputContainer from './InputContainer.svelte';
3
- import { helpStore } from '$store/pageStores';
4
- import { convertServerColumns } from '../Table/utils';
5
3
 
6
4
  export let id: string = '';
7
5
  export let label: string = '';
@@ -20,6 +18,7 @@
20
18
  export let showIcon: boolean = false;
21
19
  export let min: number | undefined = undefined;
22
20
  export let max: number | undefined = undefined;
21
+ export let integerOnly: boolean = false;
23
22
 
24
23
  $: {
25
24
  if ((!label || label.trim() === '') && title && title.trim() !== '') {
@@ -37,6 +36,17 @@
37
36
  $: if (min != undefined && parseInt(value) < min) {
38
37
  value = min.toString();
39
38
  }
39
+
40
+ function keyDownFn(event: KeyboardEvent) {
41
+ if (integerOnly) {
42
+ // 1. Block decimals explicitly (, and .)
43
+ if (event.key === '.' || event.key === ',') {
44
+ event.preventDefault();
45
+ return;
46
+ }
47
+ }
48
+ }
49
+
40
50
  </script>
41
51
 
42
52
  <InputContainer
@@ -63,6 +73,7 @@
63
73
  {max}
64
74
  on:input
65
75
  on:change
76
+ on:keydown={keyDownFn}
66
77
  {placeholder}
67
78
  {disabled}
68
79
  />
@@ -1,100 +0,0 @@
1
- [data-theme='bexis2theme'] {
2
- /* =~= Theme Properties =~= */
3
- --base-font-family: system-ui;
4
- --base-font-color: var(--color-surface-900);
5
- --base-font-color-dark: 255 255 255;
6
- /*--theme-rounded-base: 4px;
7
- --theme-rounded-container: 4px;
8
- --theme-border-base: 1px;*/
9
- --radius-base: 4px;
10
- --radius-container: 4px;
11
- --default-border-width: 1px;
12
- --default-divide-width: 1px;
13
- --default-ring-width: 1px;
14
- /* =~= Theme On-X Colors =~= */
15
- --on-primary: 255 255 255;
16
- --on-secondary: 255 255 255;
17
- --on-tertiary: 0 0 0;
18
- --on-success: 255 255 255;
19
- --on-warning: 255 255 255;
20
- --on-error: 255 255 255;
21
- --on-surface: 0 0 0;
22
- /* =~= Theme Colors =~= */
23
- /* primary | #45b2a1 */
24
- --color-primary-50: #e3f3f1;
25
- --color-primary-100: #daf0ec;
26
- --color-primary-200: #d1ece8;
27
- --color-primary-300: #b5e0d9;
28
- --color-primary-400: #7dc9bd;
29
- --color-primary-500: #45b2a1;
30
- --color-primary-600: #3ea091;
31
- --color-primary-700: #348679;
32
- --color-primary-800: #296b61;
33
- --color-primary-900: #22574f;
34
- /* secondary | #ff9700 */
35
- --color-secondary-50: #ffefd9;
36
- --color-secondary-100: #ffeacc;
37
- --color-secondary-200: #ffe5bf;
38
- --color-secondary-300: #ffd599;
39
- --color-secondary-400: #ffb64d;
40
- --color-secondary-500: #ff9700;
41
- --color-secondary-600: #e68800;
42
- --color-secondary-700: #bf7100;
43
- --color-secondary-800: #995b00;
44
- --color-secondary-900: #7d4a00;
45
- /* tertiary | #bee1da */
46
- --color-tertiary-50: #f5fbf9;
47
- --color-tertiary-100: #f2f9f8;
48
- --color-tertiary-200: #eff8f6;
49
- --color-tertiary-300: #e5f3f0;
50
- --color-tertiary-400: #d2eae5;
51
- --color-tertiary-500: #bee1da;
52
- --color-tertiary-600: #abcbc4;
53
- --color-tertiary-700: #8fa9a4;
54
- --color-tertiary-800: #728783;
55
- --color-tertiary-900: #5d6e6b;
56
- /* success | #4BB543 */
57
- --color-success-50: #e4f4e3;
58
- --color-success-100: #dbf0d9;
59
- --color-success-200: #d2edd0;
60
- --color-success-300: #b7e1b4;
61
- --color-success-400: #81cb7b;
62
- --color-success-500: #4bb543;
63
- --color-success-600: #44a33c;
64
- --color-success-700: #388832;
65
- --color-success-800: #2d6d28;
66
- --color-success-900: #255921;
67
- /* warning | #EAB308 */
68
- --color-warning-50: #fcf4da;
69
- --color-warning-100: #fbf0ce;
70
- --color-warning-200: #faecc1;
71
- --color-warning-300: #f7e19c;
72
- --color-warning-400: #f0ca52;
73
- --color-warning-500: #eab308;
74
- --color-warning-600: #d3a107;
75
- --color-warning-700: #b08606;
76
- --color-warning-800: #8c6b05;
77
- --color-warning-900: #735804;
78
- /* error | #FF0000 */
79
- --color-error-50: #ffd9d9;
80
- --color-error-100: #ffcccc;
81
- --color-error-200: #ffbfbf;
82
- --color-error-300: #ff9999;
83
- --color-error-400: #ff4d4d;
84
- --color-error-500: #ff0000;
85
- --color-error-600: #e60000;
86
- --color-error-700: #bf0000;
87
- --color-error-800: #990000;
88
- --color-error-900: #7d0000;
89
- /* surface | #c7c7c7 */
90
- --color-surface-50: #f7f7f7;
91
- --color-surface-100: #f4f4f4;
92
- --color-surface-200: #f1f1f1;
93
- --color-surface-300: #e9e9e9;
94
- --color-surface-400: #d8d8d8;
95
- --color-surface-500: #c7c7c7;
96
- --color-surface-600: #b3b3b3;
97
- --color-surface-700: #959595;
98
- --color-surface-800: #777777;
99
- --color-surface-900: #626262;
100
- }
@@ -1,2 +0,0 @@
1
- import type { CustomThemeConfig } from '@skeletonlabs/tw-plugin';
2
- export declare const bexis2theme: CustomThemeConfig;
@@ -1,112 +0,0 @@
1
- export const bexis2theme = {
2
- name: 'bexis2theme',
3
- properties: {
4
- // =~= Theme Properties =~=
5
- '--theme-font-family-base': `system-ui`,
6
- '--theme-font-family-heading': `system-ui`,
7
- '--theme-font-color-base': 'var(--color-surface-900)',
8
- '--theme-font-color-dark': '#ffffff',
9
- '--theme-rounded-base': '4px',
10
- '--theme-rounded-container': '4px',
11
- '--theme-border-base': '1px',
12
- // =~= Theme On-X Colors =~=
13
- '--on-primary': '255 255 255',
14
- '--on-secondary': '255 255 255',
15
- '--on-tertiary': '0 0 0',
16
- '--on-success': '255 255 255',
17
- '--on-warning': '255 255 255',
18
- '--on-error': '255 255 255',
19
- '--on-surface': '255 255 255',
20
- // =~= Theme Colors =~=
21
- // primary | #45b2a1
22
- '--color-primary-50': '#e3f3f1',
23
- '--color-primary-100': '#daf0ec',
24
- '--color-primary-200': '#d1ece8',
25
- '--color-primary-300': '#b5e0d9',
26
- '--color-primary-400': '#7dc9bd',
27
- '--color-primary-500': '#45b2a1',
28
- '--color-primary-600': '#3ea091',
29
- '--color-primary-700': '#348679',
30
- '--color-primary-800': '#296b61',
31
- '--color-primary-900': '#22574f',
32
- // secondary | #ff9700
33
- '--color-secondary-50': '#ffefd9',
34
- '--color-secondary-100': '#ffeacc',
35
- '--color-secondary-200': '#ffe5bf',
36
- '--color-secondary-300': '#ffd599',
37
- '--color-secondary-400': '#ffb64d',
38
- '--color-secondary-500': '#ff9700',
39
- '--color-secondary-600': '#e68800',
40
- '--color-secondary-700': '#bf7100',
41
- '--color-secondary-800': '#995b00',
42
- '--color-secondary-900': '#7d4a00',
43
- // tertiary | #bee1da
44
- '--color-tertiary-50': '#f5fbf9',
45
- '--color-tertiary-100': '#f2f9f8',
46
- '--color-tertiary-200': '#eff8f6',
47
- '--color-tertiary-300': '#e5f3f0',
48
- '--color-tertiary-400': '#d2eae5',
49
- '--color-tertiary-500': '#bee1da',
50
- '--color-tertiary-600': '#abcbc4',
51
- '--color-tertiary-700': '#8fa9a4',
52
- '--color-tertiary-800': '#728783',
53
- '--color-tertiary-900': '#5d6e6b',
54
- // success | #4BB543
55
- '--color-success-50': '#e4f4e3',
56
- '--color-success-100': '#dbf0d9',
57
- '--color-success-200': '#d2edd0',
58
- '--color-success-300': '#b7e1b4',
59
- '--color-success-400': '#81cb7b',
60
- '--color-success-500': '#4bb543',
61
- '--color-success-600': '#44a33c',
62
- '--color-success-700': '#388832',
63
- '--color-success-800': '#2d6d28',
64
- '--color-success-900': '#255921',
65
- // warning | #EAB308
66
- '--color-warning-50': '#fcf4da',
67
- '--color-warning-100': '#fbf0ce',
68
- '--color-warning-200': '#faecc1',
69
- '--color-warning-300': '#f7e19c',
70
- '--color-warning-400': '#f0ca52',
71
- '--color-warning-500': '#eab308',
72
- '--color-warning-600': '#d3a107',
73
- '--color-warning-700': '#b08606',
74
- '--color-warning-800': '#8c6b05',
75
- '--color-warning-900': '#735804',
76
- // error | #FF0000
77
- '--color-error-50': '#ffd9d9',
78
- '--color-error-100': '#ffcccc',
79
- '--color-error-200': '#ffbfbf',
80
- '--color-error-300': '#ff9999',
81
- '--color-error-400': '#ff4d4d',
82
- '--color-error-500': '#ff0000',
83
- '--color-error-600': '#e60000',
84
- '--color-error-700': '#bf0000',
85
- '--color-error-800': '#990000',
86
- '--color-error-900': '#7d0000',
87
- // surface | #c7c7c7
88
- '--color-surface-50': '#f7f7f7',
89
- '--color-surface-100': '#f4f4f4',
90
- '--color-surface-200': '#f1f1f1',
91
- '--color-surface-300': '#e9e9e9',
92
- '--color-surface-400': '#d8d8d8',
93
- '--color-surface-500': '#c7c7c7',
94
- '--color-surface-600': '#b3b3b3',
95
- '--color-surface-700': '#959595',
96
- '--color-surface-800': '#777777',
97
- '--color-surface-900': '#626262'
98
- },
99
- properties_dark: {
100
- // surface | #2e2e2e
101
- '--color-surface-50': '#e0e0e0',
102
- '--color-surface-100': '#d5d5d5',
103
- '--color-surface-200': '#cbcbcb',
104
- '--color-surface-300': '#ababab',
105
- '--color-surface-400': '#6d6d6d',
106
- '--color-surface-500': '#2e2e2e',
107
- '--color-surface-600': '#292929',
108
- '--color-surface-700': '#232323',
109
- '--color-surface-800': '#1c1c1c',
110
- '--color-surface-900': '#171717'
111
- }
112
- };
@@ -1,100 +0,0 @@
1
- [data-theme='bexis2theme'] {
2
- /* =~= Theme Properties =~= */
3
- --base-font-family: system-ui;
4
- --base-font-color: var(--color-surface-900);
5
- --base-font-color-dark: 255 255 255;
6
- /*--theme-rounded-base: 4px;
7
- --theme-rounded-container: 4px;
8
- --theme-border-base: 1px;*/
9
- --radius-base: 4px;
10
- --radius-container: 4px;
11
- --default-border-width: 1px;
12
- --default-divide-width: 1px;
13
- --default-ring-width: 1px;
14
- /* =~= Theme On-X Colors =~= */
15
- --on-primary: 255 255 255;
16
- --on-secondary: 255 255 255;
17
- --on-tertiary: 0 0 0;
18
- --on-success: 255 255 255;
19
- --on-warning: 255 255 255;
20
- --on-error: 255 255 255;
21
- --on-surface: 0 0 0;
22
- /* =~= Theme Colors =~= */
23
- /* primary | #45b2a1 */
24
- --color-primary-50: #e3f3f1;
25
- --color-primary-100: #daf0ec;
26
- --color-primary-200: #d1ece8;
27
- --color-primary-300: #b5e0d9;
28
- --color-primary-400: #7dc9bd;
29
- --color-primary-500: #45b2a1;
30
- --color-primary-600: #3ea091;
31
- --color-primary-700: #348679;
32
- --color-primary-800: #296b61;
33
- --color-primary-900: #22574f;
34
- /* secondary | #ff9700 */
35
- --color-secondary-50: #ffefd9;
36
- --color-secondary-100: #ffeacc;
37
- --color-secondary-200: #ffe5bf;
38
- --color-secondary-300: #ffd599;
39
- --color-secondary-400: #ffb64d;
40
- --color-secondary-500: #ff9700;
41
- --color-secondary-600: #e68800;
42
- --color-secondary-700: #bf7100;
43
- --color-secondary-800: #995b00;
44
- --color-secondary-900: #7d4a00;
45
- /* tertiary | #bee1da */
46
- --color-tertiary-50: #f5fbf9;
47
- --color-tertiary-100: #f2f9f8;
48
- --color-tertiary-200: #eff8f6;
49
- --color-tertiary-300: #e5f3f0;
50
- --color-tertiary-400: #d2eae5;
51
- --color-tertiary-500: #bee1da;
52
- --color-tertiary-600: #abcbc4;
53
- --color-tertiary-700: #8fa9a4;
54
- --color-tertiary-800: #728783;
55
- --color-tertiary-900: #5d6e6b;
56
- /* success | #4BB543 */
57
- --color-success-50: #e4f4e3;
58
- --color-success-100: #dbf0d9;
59
- --color-success-200: #d2edd0;
60
- --color-success-300: #b7e1b4;
61
- --color-success-400: #81cb7b;
62
- --color-success-500: #4bb543;
63
- --color-success-600: #44a33c;
64
- --color-success-700: #388832;
65
- --color-success-800: #2d6d28;
66
- --color-success-900: #255921;
67
- /* warning | #EAB308 */
68
- --color-warning-50: #fcf4da;
69
- --color-warning-100: #fbf0ce;
70
- --color-warning-200: #faecc1;
71
- --color-warning-300: #f7e19c;
72
- --color-warning-400: #f0ca52;
73
- --color-warning-500: #eab308;
74
- --color-warning-600: #d3a107;
75
- --color-warning-700: #b08606;
76
- --color-warning-800: #8c6b05;
77
- --color-warning-900: #735804;
78
- /* error | #FF0000 */
79
- --color-error-50: #ffd9d9;
80
- --color-error-100: #ffcccc;
81
- --color-error-200: #ffbfbf;
82
- --color-error-300: #ff9999;
83
- --color-error-400: #ff4d4d;
84
- --color-error-500: #ff0000;
85
- --color-error-600: #e60000;
86
- --color-error-700: #bf0000;
87
- --color-error-800: #990000;
88
- --color-error-900: #7d0000;
89
- /* surface | #c7c7c7 */
90
- --color-surface-50: #f7f7f7;
91
- --color-surface-100: #f4f4f4;
92
- --color-surface-200: #f1f1f1;
93
- --color-surface-300: #e9e9e9;
94
- --color-surface-400: #d8d8d8;
95
- --color-surface-500: #c7c7c7;
96
- --color-surface-600: #b3b3b3;
97
- --color-surface-700: #959595;
98
- --color-surface-800: #777777;
99
- --color-surface-900: #626262;
100
- }
@@ -1,114 +0,0 @@
1
- import type { CustomThemeConfig } from '@skeletonlabs/tw-plugin';
2
-
3
- export const bexis2theme: CustomThemeConfig = {
4
- name: 'bexis2theme',
5
- properties: {
6
- // =~= Theme Properties =~=
7
- '--theme-font-family-base': `system-ui`,
8
- '--theme-font-family-heading': `system-ui`,
9
- '--theme-font-color-base': 'var(--color-surface-900)',
10
- '--theme-font-color-dark': '#ffffff',
11
- '--theme-rounded-base': '4px',
12
- '--theme-rounded-container': '4px',
13
- '--theme-border-base': '1px',
14
- // =~= Theme On-X Colors =~=
15
- '--on-primary': '255 255 255',
16
- '--on-secondary': '255 255 255',
17
- '--on-tertiary': '0 0 0',
18
- '--on-success': '255 255 255',
19
- '--on-warning': '255 255 255',
20
- '--on-error': '255 255 255',
21
- '--on-surface': '255 255 255',
22
- // =~= Theme Colors =~=
23
- // primary | #45b2a1
24
- '--color-primary-50': '#e3f3f1',
25
- '--color-primary-100': '#daf0ec',
26
- '--color-primary-200': '#d1ece8',
27
- '--color-primary-300': '#b5e0d9',
28
- '--color-primary-400': '#7dc9bd',
29
- '--color-primary-500': '#45b2a1',
30
- '--color-primary-600': '#3ea091',
31
- '--color-primary-700': '#348679',
32
- '--color-primary-800': '#296b61',
33
- '--color-primary-900': '#22574f',
34
- // secondary | #ff9700
35
- '--color-secondary-50': '#ffefd9',
36
- '--color-secondary-100': '#ffeacc',
37
- '--color-secondary-200': '#ffe5bf',
38
- '--color-secondary-300': '#ffd599',
39
- '--color-secondary-400': '#ffb64d',
40
- '--color-secondary-500': '#ff9700',
41
- '--color-secondary-600': '#e68800',
42
- '--color-secondary-700': '#bf7100',
43
- '--color-secondary-800': '#995b00',
44
- '--color-secondary-900': '#7d4a00',
45
- // tertiary | #bee1da
46
- '--color-tertiary-50': '#f5fbf9',
47
- '--color-tertiary-100': '#f2f9f8',
48
- '--color-tertiary-200': '#eff8f6',
49
- '--color-tertiary-300': '#e5f3f0',
50
- '--color-tertiary-400': '#d2eae5',
51
- '--color-tertiary-500': '#bee1da',
52
- '--color-tertiary-600': '#abcbc4',
53
- '--color-tertiary-700': '#8fa9a4',
54
- '--color-tertiary-800': '#728783',
55
- '--color-tertiary-900': '#5d6e6b',
56
- // success | #4BB543
57
- '--color-success-50': '#e4f4e3',
58
- '--color-success-100': '#dbf0d9',
59
- '--color-success-200': '#d2edd0',
60
- '--color-success-300': '#b7e1b4',
61
- '--color-success-400': '#81cb7b',
62
- '--color-success-500': '#4bb543',
63
- '--color-success-600': '#44a33c',
64
- '--color-success-700': '#388832',
65
- '--color-success-800': '#2d6d28',
66
- '--color-success-900': '#255921',
67
- // warning | #EAB308
68
- '--color-warning-50': '#fcf4da',
69
- '--color-warning-100': '#fbf0ce',
70
- '--color-warning-200': '#faecc1',
71
- '--color-warning-300': '#f7e19c',
72
- '--color-warning-400': '#f0ca52',
73
- '--color-warning-500': '#eab308',
74
- '--color-warning-600': '#d3a107',
75
- '--color-warning-700': '#b08606',
76
- '--color-warning-800': '#8c6b05',
77
- '--color-warning-900': '#735804',
78
- // error | #FF0000
79
- '--color-error-50': '#ffd9d9',
80
- '--color-error-100': '#ffcccc',
81
- '--color-error-200': '#ffbfbf',
82
- '--color-error-300': '#ff9999',
83
- '--color-error-400': '#ff4d4d',
84
- '--color-error-500': '#ff0000',
85
- '--color-error-600': '#e60000',
86
- '--color-error-700': '#bf0000',
87
- '--color-error-800': '#990000',
88
- '--color-error-900': '#7d0000',
89
- // surface | #c7c7c7
90
- '--color-surface-50': '#f7f7f7',
91
- '--color-surface-100': '#f4f4f4',
92
- '--color-surface-200': '#f1f1f1',
93
- '--color-surface-300': '#e9e9e9',
94
- '--color-surface-400': '#d8d8d8',
95
- '--color-surface-500': '#c7c7c7',
96
- '--color-surface-600': '#b3b3b3',
97
- '--color-surface-700': '#959595',
98
- '--color-surface-800': '#777777',
99
- '--color-surface-900': '#626262'
100
- },
101
- properties_dark: {
102
- // surface | #2e2e2e
103
- '--color-surface-50': '#e0e0e0',
104
- '--color-surface-100': '#d5d5d5',
105
- '--color-surface-200': '#cbcbcb',
106
- '--color-surface-300': '#ababab',
107
- '--color-surface-400': '#6d6d6d',
108
- '--color-surface-500': '#2e2e2e',
109
- '--color-surface-600': '#292929',
110
- '--color-surface-700': '#232323',
111
- '--color-surface-800': '#1c1c1c',
112
- '--color-surface-900': '#171717'
113
- }
114
- };