fix multiple issues with item styling and not triggering change event…

… for custom-element
mskocik · Nov 14, 2021 · 958f3d1 · 958f3d1
1 parent 24133ef
commit 958f3d1
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 42 deletions.
diff --git 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));
+  }
 </style>
diff --git 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
@@ -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));
-}
 </style>
diff --git a/src/components/ItemClose.svelte b/src/components/ItemClose.svelte
@@ -1,14 +1,14 @@
-<button class="sv-item-btn" tabindex="-1" data-action="deselect">
+<button class="sv-item-btn" tabindex="-1" data-action="deselect" type="button">
   <svg height="16" width="16" viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"></path></svg>
 </button>
 
 <style>
   .sv-item-btn {
     position: relative;
+    display: inline-flex;
     align-items: center;
     align-self: stretch;
-    padding-left: 4px;
-    padding-right: 4px;
+    padding: 0 4px;
     box-sizing: border-box;
     border-radius: 2px;
     border-width: 0;