Dropdowns buttons ✨ colorized ✨ (#66)

* Buttons ✨ colorized ✨

* Update package.json

docs/components/dropdown-button.md

@@ -4,6 +4,7 @@
     :options="['delete', 'save', 'recycle', 'reduce', 'reuse']"
     default-value="delete"
     name="dropdown-one"
+    color="primary"
   >
     <template #delete>
       <TrashIcon /> Delete
@@ -95,6 +96,7 @@
   :options="['delete', 'save', 'recycle', 'reduce', 'reuse']"
   default-value="delete"
   @option-click="handleOptionClick"
+  color="primary"
   render-up
 >
   <template #delete>

lib/components/base/DropdownButton.vue

@@ -14,24 +14,24 @@
           'render-up': dropdownVisible && renderUp && !disabled,
         }"
         :disabled="disabled"
+        :color="color"
         @click="clickOption"
       >
         <slot :name="selectedOption" />
       </Button>
-      <div
+      <Button
         class="selected"
         :class="{
-          disabled: disabled,
-          'button-base': !disabled,
           'render-down': dropdownVisible && !renderUp && !disabled,
           'render-up': dropdownVisible && renderUp && !disabled,
         }"
+        icon-only
+        :color="color"
+        :disabled="disabled"
         @click="toggleDropdown"
       >
-        <div class="arrow" :class="{ rotate: dropdownVisible }">
+        <DropdownIcon class="arrow" :class="{ rotate: dropdownVisible }" />
-          <DropdownIcon />
+      </Button>
-        </div>
-      </div>
     </div>
     <div class="options-wrapper" :class="{ down: !renderUp, up: renderUp }">
       <transition name="options">
@@ -99,6 +99,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  color: {
+    type: String,
+    default: '',
+  },
 })
 
 const emit = defineEmits(['input', 'change', 'update:modelValue', 'option-click'])
@@ -196,21 +200,11 @@ onBeforeUnmount(() => {
   }
 
   .selected {
-    display: flex;
+    height: auto;
-    align-items: center;
+    width: auto;
-    justify-content: space-between;
+    margin-left: 1px;
-    padding: var(--gap-sm) var(--gap-lg);
+    padding: var(--gap-sm);
-    background-color: var(--color-button-bg);
-    cursor: pointer;
-    user-select: none;
     border-radius: 0 var(--radius-md) var(--radius-md) 0;
-    box-shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
-
-    &.disabled {
-      cursor: not-allowed;
-      filter: grayscale(50%);
-      opacity: 0.5;
-    }
 
     &.render-up {
       border-radius: 0 0 var(--radius-md) 0;
@@ -227,9 +221,10 @@ onBeforeUnmount(() => {
     }
 
     .arrow {
+      min-width: 1.125rem;
+      min-height: 1.125rem;
       display: inline-block;
       transition: transform 0.2s ease;
-      height: 18px;
 
       &.rotate {
         transform: rotate(180deg);

package.json

@@ -1,7 +1,7 @@
 {
   "name": "omorphia",
   "type": "module",
-  "version": "0.4.25",
+  "version": "0.4.26",
   "files": [
     "dist",
     "lib"