jb-select 6.5.0 → 7.0.1

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 (28) hide show
  1. package/README.md +5 -7
  2. package/dist/i18n.d.ts +2 -2
  3. package/dist/index.cjs.js +1 -1
  4. package/dist/index.cjs.js.br +0 -0
  5. package/dist/index.cjs.js.gz +0 -0
  6. package/dist/index.cjs.js.map +1 -1
  7. package/dist/index.js +1 -1
  8. package/dist/index.js.br +0 -0
  9. package/dist/index.js.gz +0 -0
  10. package/dist/index.js.map +1 -1
  11. package/dist/index.umd.js +1 -1
  12. package/dist/index.umd.js.br +0 -0
  13. package/dist/index.umd.js.gz +0 -0
  14. package/dist/index.umd.js.map +1 -1
  15. package/dist/jb-option/jb-option.d.ts.map +1 -1
  16. package/dist/jb-select.d.ts +6 -4
  17. package/dist/jb-select.d.ts.map +1 -1
  18. package/dist/render.d.ts.map +1 -1
  19. package/dist/types.d.ts +6 -1
  20. package/dist/types.d.ts.map +1 -1
  21. package/lib/i18n.ts +2 -2
  22. package/lib/jb-option/jb-option.ts +22 -16
  23. package/lib/jb-select.css +120 -193
  24. package/lib/jb-select.ts +54 -19
  25. package/lib/render.ts +20 -23
  26. package/lib/types.ts +6 -1
  27. package/lib/variables.css +14 -10
  28. package/package.json +4 -2
package/lib/types.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  import type { JBOptionWebComponent } from "./jb-option/jb-option";
2
2
  import type {EventTypeWithTarget} from "jb-core";
3
3
  import type{ JBSelectWebComponent } from "./jb-select";
4
+ import type {JBButtonWebComponent} from "jb-button";
5
+ import type { JBPopoverWebComponent } from "jb-popover";
4
6
  export type JBSelectCallbacks<TValue> = {
5
7
  getSelectedValueDOM?:(value:TValue,content:HTMLElement) => HTMLElement;
6
8
  }
@@ -11,14 +13,17 @@ export type JBSelectElements = {
11
13
  selectedValueWrapper: HTMLDivElement,
12
14
  messageBox:HTMLDivElement,
13
15
  optionList: HTMLDivElement,
14
- optionListWrapper: HTMLDivElement,
16
+ optionListWrapper: JBPopoverWebComponent,
15
17
  optionListSlot:HTMLSlotElement,
16
18
  arrowIcon: HTMLDivElement,
19
+ clearButton: JBButtonWebComponent,
17
20
  label:{
18
21
  wrapper: HTMLLabelElement,
19
22
  text: HTMLSpanElement
20
23
  },
21
24
  emptyListPlaceholder: HTMLDivElement,
25
+ mobileSearchInputWrapper:HTMLDivElement,
26
+ frontBox:HTMLDivElement
22
27
  }
23
28
  export type ValidationValue<TValue> = {
24
29
  selectedOption:JBOptionWebComponent<TValue> | null,
package/lib/variables.css CHANGED
@@ -1,11 +1,18 @@
1
1
  :host {
2
- --border-radius:var(--jb-select-border-radius, var(--jb-radius));
3
- --middle-div-height: var(--jb-select-middle-div-height, 0px);
2
+ /*Sizes*/
3
+ --height: var(--jb-select-height, 2.5rem);
4
+ /*its rounded because it's only one value and not all radius 4 part value and needed to be one vale due to change in different situation*/
5
+ --rounded: var(--jb-select-rounded, var(--jb-radius));
6
+ --box-border-radius: var(--jb-select-box-border-radius, var(--rounded));
7
+ --list-border-radius: 0 0 var(--rounded) var(--rounded);
4
8
  --border-width: var(--jb-select-border-width, 1px);
5
9
  --border-bottom-width: var(--jb-select-border-bottom-width, var(--jb-select-border-width, 3px));
6
10
  --base-z-index: 1;
7
- --mobile-modal-z-index: 900;
8
- --mobile-modal-height: var(--jb-select-mobile-modal-height, 100vh);
11
+ /* put message and label forward base on border radius*/
12
+ --inline-space: calc(var(--rounded) / 1.75);
13
+ --label-margin: var(--jb-select-label-margin, 0.125rem var(--inline-space));
14
+ --label-font-size: var(--jb-select-label-font-size, 0.8rem);
15
+ --message-font-size:var(--jb-select-message-font-size, 0.7rem);
9
16
  /*colors*/
10
17
  --border-color: var(--jb-select-border-color, var(--jb-neutral-10));
11
18
  --message-color: var(--jb-select-message-color, var(--jb-text-secondary));
@@ -13,12 +20,9 @@
13
20
  --value-color: var(--jb-select-value-color, var(--jb-text-primary));
14
21
  --placeholder-color: var(--jb-select-placeholder-color, var(--jb-neutral-6));
15
22
  --select-box-bg-color: var(--jb-select-bgcolor, var(--jb-neutral-10));
16
- --overlay-bg-color:var(--jb-select-overlay-bg-color, oklch(from var(--jb-neutral) l c h / calc(alpha - 0.5)));
17
- --modal-label-color:var(--jb-select-modal-label-color, var(--jb-text-contrast));
18
- --modal-close-color:var(--jb-select-modal-close-color, var(--jb-white));
19
- --close-bg-color:var(--jb-select-close-bg-color, var(--jb-neutral-2));
20
- --list-scroll-color:var(--jb-select-list-scroll-color, oklch(from var(--select-box-bg-color) calc(l - 0.2) c h));
21
- --empty-list-placeholder-color:var(--jb-select-empty-list-placeholder-color, var(--jb-text-secondary))
23
+ --overlay-bg-color: var(--jb-select-overlay-bg-color, oklch(from var(--jb-black) l c h / calc(alpha - 0.5)));
24
+ --list-scroll-color: var(--jb-select-list-scroll-color, oklch(from var(--select-box-bg-color) calc(l - 0.2) c h));
25
+ --empty-list-placeholder-color: var(--jb-select-empty-list-placeholder-color, var(--jb-text-secondary))
22
26
  }
23
27
 
24
28
  :host(:state(invalid)) {
package/package.json CHANGED
@@ -16,7 +16,7 @@
16
16
  "web component",
17
17
  "react component"
18
18
  ],
19
- "version": "6.5.0",
19
+ "version": "7.0.1",
20
20
  "bugs": "https://github.com/javadbat/jb-select/issues",
21
21
  "license": "MIT",
22
22
  "files": [
@@ -35,7 +35,9 @@
35
35
  },
36
36
  "dependencies": {
37
37
  "jb-validation": ">=0.4.0",
38
- "jb-core":">=0.18.1"
38
+ "jb-button": ">=3.7.0",
39
+ "jb-popover": ">=1.5.0",
40
+ "jb-core":">=0.22.0"
39
41
  },
40
42
  "devDependencies": {
41
43
  "jb-form":">=0.7.1"