@keenmate/web-multiselect 1.4.0 → 1.5.0-rc01
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 +39 -4
- package/dist/multiselect.js +673 -695
- package/dist/multiselect.umd.js +8 -8
- package/dist/style.css +1 -1
- package/package.json +2 -2
- package/src/scss/_badges-display.scss +71 -70
- package/src/scss/_base.scss +3 -2
- package/src/scss/_css-variables.scss +263 -266
- package/src/scss/_debug.scss +23 -23
- package/src/scss/_input-dropdown.scss +73 -70
- package/src/scss/_modifiers.scss +6 -65
- package/src/scss/_options.scss +87 -88
- package/src/scss/_rtl.scss +10 -10
- package/src/scss/_tooltips-popover.scss +45 -45
- package/src/scss/_variables.scss +297 -314
package/README.md
CHANGED
|
@@ -1504,6 +1504,41 @@ interface MultiSelectOption {
|
|
|
1504
1504
|
|
|
1505
1505
|
The component uses Shadow DOM for style encapsulation, but exposes CSS custom properties (CSS variables) that you can override to customize the appearance.
|
|
1506
1506
|
|
|
1507
|
+
### Sizing
|
|
1508
|
+
|
|
1509
|
+
The component uses `--ms-rem` as a base unit for proportional scaling. Default is `10px`, meaning `calc(1.4 * var(--ms-rem))` equals `14px`.
|
|
1510
|
+
|
|
1511
|
+
**Global Scaling:**
|
|
1512
|
+
```html
|
|
1513
|
+
<!-- Compact (80%) -->
|
|
1514
|
+
<web-multiselect style="--ms-rem: 8px;"></web-multiselect>
|
|
1515
|
+
|
|
1516
|
+
<!-- Default (100%) -->
|
|
1517
|
+
<web-multiselect></web-multiselect>
|
|
1518
|
+
|
|
1519
|
+
<!-- Large (120%) -->
|
|
1520
|
+
<web-multiselect style="--ms-rem: 12px;"></web-multiselect>
|
|
1521
|
+
|
|
1522
|
+
<!-- Pure Admin integration (inherits from html { font-size: 10px }) -->
|
|
1523
|
+
<web-multiselect style="--ms-rem: 1rem;"></web-multiselect>
|
|
1524
|
+
```
|
|
1525
|
+
|
|
1526
|
+
**Via CSS class:**
|
|
1527
|
+
```css
|
|
1528
|
+
web-multiselect.compact { --ms-rem: 8px; }
|
|
1529
|
+
web-multiselect.large { --ms-rem: 12px; }
|
|
1530
|
+
```
|
|
1531
|
+
|
|
1532
|
+
**Shadow DOM Note:** CSS variables must be set on the `<web-multiselect>` element itself, not on wrapper divs.
|
|
1533
|
+
|
|
1534
|
+
**Fine-grained Control:**
|
|
1535
|
+
Override individual sizing variables for specific adjustments:
|
|
1536
|
+
- `--ms-input-height` - Input field height
|
|
1537
|
+
- `--ms-input-font-size` - Input font size
|
|
1538
|
+
- `--ms-input-padding` - Input padding
|
|
1539
|
+
- `--ms-badge-height` - Badge height
|
|
1540
|
+
- `--ms-option-height` - Option height in dropdown
|
|
1541
|
+
|
|
1507
1542
|
### Theme Designer
|
|
1508
1543
|
|
|
1509
1544
|
The easiest way to customize the appearance of this component is using the **KeenMate Theme Designer** at:
|
|
@@ -1762,9 +1797,9 @@ For users with a build system, you can import and customize the SCSS:
|
|
|
1762
1797
|
```scss
|
|
1763
1798
|
// Import and override SCSS variables
|
|
1764
1799
|
@use '@keenmate/web-multiselect/scss' with (
|
|
1765
|
-
$
|
|
1766
|
-
$
|
|
1767
|
-
$
|
|
1800
|
+
$ms-accent-color: #10b981,
|
|
1801
|
+
$ms-border-radius: 0.5rem,
|
|
1802
|
+
$ms-font-size-base: 1rem
|
|
1768
1803
|
);
|
|
1769
1804
|
```
|
|
1770
1805
|
|
|
@@ -1804,7 +1839,7 @@ npm run package
|
|
|
1804
1839
|
|
|
1805
1840
|
## License
|
|
1806
1841
|
|
|
1807
|
-
Copyright (c)
|
|
1842
|
+
Copyright (c) 2025 Keenmate
|
|
1808
1843
|
|
|
1809
1844
|
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
|
1810
1845
|
|