Merge pull request #17 from CodeWithDennis/bugfix/css-and-js-fixes

CSS fixes, return empty array when multiple is empty

Author: CodeWithDennis

resources/css/custom.css

@@ -179,18 +179,43 @@ html.dark .treeselect-list__item-checkbox-container {
 }
 
 .treeselect-input__tags-element:hover {
-    background-color: rgba(0, 0, 0, 0.1);
+    background-color: rgba(var(--primary-50), var(--tw-bg-opacity));
 }
 
-.treeselect-input__tags-element:hover {
-    background-color: rgba(var(--primary-600), var(--tw-text-opacity));
-    color: white;
+.treeselect-input__tags-element:hover .treeselect-input__tags-cross svg {
+    stroke: rgba(var(--gray-950),var(--tw-text-opacity));
 }
 
-.treeselect-input__tags-element:hover .treeselect-input__tags-cross svg {
+html.dark .treeselect-input__tags-element:hover .treeselect-input__tags-cross svg {
+    stroke: rgb(255 255 255/var(--tw-text-opacity));
+}
+
+.treeselect-input__tags-element {
+    color: rgba(var(--primary-600), var(--tw-text-opacity));
+}
+
+html.dark .treeselect-input__tags-element {
+    color: rgba(var(--primary-400), var(--tw-text-opacity));
+}
+
+html.dark .treeselect-input__tags-cross svg {
+    stroke-width: 3px;
+}
+
+html.dark .treeselect-input__tags-cross svg {
     stroke: rgb(255 255 255/var(--tw-text-opacity));
+    opacity: 0.5;
+}
+
+html.dark .treeselect-input__tags-element:hover svg {
+    opacity: 0.6;
+}
+
+.treeselect-input__clear svg {
+    stroke: rgb(255 255 255/var(--tw-text-opacity));
+    opacity: 0.5;
 }
 
 .treeselect-input__tags {
     margin-left: 3px;
-}
+}

resources/dist/custom.css

@@ -24,7 +24,7 @@ export default function tree({
         init() {
             const values = isSingleSelect
                 ? (this.state !== null ? this.state : '')
-                : (this.state !== null ? this.state.split(',') : '');
+                : (this.state !== null ? this.state.split(',') : []);
 
             this.tree = new Treeselect({
                 id: `tree-${name}-id`,