diff --git a/src/Svelecte.svelte b/src/Svelecte.svelte index e9788ec..c3fc078 100644 --- a/src/Svelecte.svelte +++ b/src/Svelecte.svelte @@ -305,8 +305,8 @@ */ function emitChangeEvent() { tick().then(() => { - dispatch('change', readSelection) - refSelectAction && refSelectElement.dispatchEvent(new Event('input')); + dispatch('change', readSelection); + refSelectElement && refSelectElement.dispatchEvent(new Event('input')); // required for svelte-use-form }); } @@ -644,4 +644,42 @@ .svelecte.is-disabled { pointer-events: none; } .icon-slot { display: flex; } .is-hidden { opacity: 0; position: absolute; z-index: -2; top: 0; height: 38px} + + /** globally available styles for control/dropdown Item components */ + :global(.svelecte-control .has-multiSelection .sv-item) { + background-color: var(--sv-item-selected-bg); + margin: 2px 4px 2px 0; + } + :global(.svelecte-control .has-multiSelection .sv-item-content), + :global(.svelecte-control .sv-dropdown-content .sv-item) { + padding: 3px 3px 3px 6px; + } + :global(.svelecte-control .sv-item) { + display: flex; + min-width: 0px; + box-sizing: border-box; + border-radius: 2px; + cursor: default; + } + :global(.svelecte-control .sv-item.is-disabled) { opacity: 0.5; cursor: not-allowed; } + + :global(.svelecte-control .sv-item-content) { + color: var(--sv-item-color, var(--sv-color)); + text-overflow: ellipsis; + white-space: nowrap; + box-sizing: border-box; + border-radius: 2px; + overflow: hidden; + width: 100%; + } + :global(.svelecte-control .sv-dd-item-active > .sv-item) { + background-color: var(--sv-item-active-bg); + } + :global(.svelecte-control .sv-dd-item-active > .sv-item .sv-item-content) { + color: var(--sv-item-active-color, var(--sv-item-color)); + } + :global(.svelecte-control .highlight) { + background-color: var(--sv-highlight-bg); + color: var(--sv-highlight-color, var(--sv-color)); + } diff --git a/src/components/Dropdown.svelte b/src/components/Dropdown.svelte index 69797f4..d0a6b93 100644 --- a/src/components/Dropdown.svelte +++ b/src/components/Dropdown.svelte @@ -270,7 +270,7 @@ .creatable-row:hover, .creatable-row:active, .creatable-row.active { - background-color: var(--sv-item-active); + background-color: var(--sv-item-active-bg); } .creatable-row.active.is-disabled { opacity: 0.5; diff --git a/src/components/Item.svelte b/src/components/Item.svelte index 85e4766..4071aa6 100644 --- a/src/components/Item.svelte +++ b/src/components/Item.svelte @@ -36,40 +36,4 @@ padding: 3px 3px 3px 6px; font-weight: bold; } -:global(.has-multiSelection .sv-item) { - background-color: var(--sv-item-selected-bg); - margin: 2px 4px 2px 0; -} -:global(.has-multiSelection .sv-item-content), -:global(.sv-dropdown-content .sv-item) { - padding: 3px 3px 3px 6px; -} -:global(.sv-item) { - display: flex; - min-width: 0px; - box-sizing: border-box; - border-radius: 2px; - cursor: default; -} -:global(.sv-item.is-disabled) { opacity: 0.5; cursor: not-allowed; } - -:global(.sv-item-content) { - color: var(--sv-item-color, var(--sv-color)); - text-overflow: ellipsis; - white-space: nowrap; - box-sizing: border-box; - border-radius: 2px; - overflow: hidden; - width: 100%; -} -:global(.sv-dd-item-active > .sv-item) { - background-color: var(--sv-item-active-bg); -} -:global(.sv-dd-item-active > .sv-item .sv-item-content) { - color: var(--sv-item-active-color, var(--sv-item-color)); -} -:global(.highlight) { - background-color: var(--sv-highlight-bg); - color: var(--sv-highlight-color, var(--sv-color)); -} diff --git a/src/components/ItemClose.svelte b/src/components/ItemClose.svelte index ecfcc85..b9f307e 100644 --- a/src/components/ItemClose.svelte +++ b/src/components/ItemClose.svelte @@ -1,14 +1,14 @@ -