Dropdown Input + move to chevron (#78)

docs/components/text-inputs.md

@@ -50,3 +50,52 @@ const inputText = ref(null)
   </Button>
 </div>
 ```
+
+<DemoContainer>
+<div class="dropdown-input">
+  <DropdownSelect
+    v-model="value"
+    :options="['Daily', 'Weekly', 'Monthly', 'Tomorrow', 'Yesterday', 'Today', 'Biweekly', 'Tuesday', 'January']"
+    placeholder="Choose Frequency"
+  />
+  <div class="iconified-input">
+    <SearchIcon/>
+    <input
+        v-model="inputText"
+        type="text"
+        placeholder="Text input"
+    />
+    <Button @click="() => inputText = ''">
+      <XIcon/>
+    </Button>
+  </div>
+</div>
+</DemoContainer>
+
+```vue
+<script setup>
+import { ref } from "vue";
+const inputText = ref(null)
+const value = ref(null)
+</script>
+
+<div class="dropdown-input">
+  <DropdownSelect
+    v-model="value"
+    :options="['Daily', 'Weekly', 'Monthly', 'Tomorrow', 'Yesterday', 'Today', 'Biweekly', 'Tuesday', 'January']"
+    placeholder="Choose Frequency"
+  />
+  <div class="iconified-input">
+    <SearchIcon/>
+    <input
+      v-model="inputText"
+      type="text"
+      placeholder="Text input"
+    />
+    <Button @click="() => inputText = ''">
+      <XIcon/>
+    </Button>
+  </div>
+</div>
+```
+

lib/assets/styles/defaults.scss

@@ -93,6 +93,31 @@ input[type='number'] {
   }
 }
 
+.dropdown-input {
+  display: flex;
+  flex-direction: row;
+  gap: 1px;
+  .animated-dropdown {
+    width: unset;
+
+    .selected {
+      border-radius: var(--radius-md) 0 0 var(--radius-md);
+
+      &.render-down {
+        border-radius: var(--radius-md) 0 0 0;
+      }
+
+      &.render-up {
+        border-radius: 0 0 0 var(--radius-md);
+      }
+    }
+  }
+
+  input {
+    border-radius: 0 var(--radius-md) var(--radius-md) 0;
+  }
+}
+
 .iconified-input {
   align-items: center;
   display: inline-flex;

lib/components/base/DropdownSelect.vue

@@ -23,7 +23,7 @@
       @click="toggleDropdown"
     >
       <span>{{ selectedOption }}</span>
-      <i class="arrow" :class="{ rotate: dropdownVisible }"></i>
+      <DropdownIcon class="arrow" :class="{ rotate: dropdownVisible }" />
     </div>
     <div class="options-wrapper" :class="{ down: !renderUp, up: renderUp }">
       <transition name="options">
@@ -61,6 +61,7 @@
 </template>
 
 <script setup>
+import { DropdownIcon } from '@/components'
 import { computed, ref, watch } from 'vue'
 
 const props = defineProps({
@@ -203,6 +204,7 @@ const isChildOfDropdown = (element) => {
     justify-content: space-between;
     padding: var(--gap-sm) var(--gap-lg);
     background-color: var(--color-button-bg);
+    gap: var(--gap-md);
     cursor: pointer;
     user-select: none;
     border-radius: var(--radius-md);
@@ -229,13 +231,6 @@ const isChildOfDropdown = (element) => {
     }
 
     .arrow {
-      display: inline-block;
-      width: 0;
-      height: 0;
-      margin-left: 0.4rem;
-      border-left: 0.4rem solid transparent;
-      border-right: 0.4rem solid transparent;
-      border-top: 0.4rem solid var(--color-base);
       transition: transform 0.2s ease;
       &.rotate {
         transform: rotate(180deg);

package.json

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