feat: major improvements, restructure DOM, split components, improve styles

Author: TotomInc

src/Indicators.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { defineExpose, useTemplateRef } from "vue";
+
+import ChevronDownIcon from "./icons/ChevronDownIcon.vue";
+import XMarkIcon from "./icons/XMarkIcon.vue";
+import Spinner from "./Spinner.vue";
+
+defineProps<{
+  hasSelectedOption: boolean;
+  isClearable: boolean;
+  isLoading: boolean;
+  isDisabled: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: "clear"): void;
+  (e: "toggle"): void;
+}>();
+
+const container = useTemplateRef("container");
+const clearButton = useTemplateRef("clearButton");
+const dropdownButton = useTemplateRef("dropdownButton");
+
+defineExpose({ container, clearButton, dropdownButton });
+</script>
+
+<template>
+  <div ref="container" class="indicators-container">
+    <button
+      v-if="hasSelectedOption && isClearable && !isLoading"
+      ref="clearButton"
+      type="button"
+      class="clear-button"
+      tabindex="-1"
+      :disabled="isDisabled"
+      @click.stop="emit('clear')"
+    >
+      <slot name="clear">
+        <XMarkIcon />
+      </slot>
+    </button>
+
+    <button
+      v-if="!isLoading"
+      ref="dropdownButton"
+      type="button"
+      class="dropdown-icon"
+      tabindex="-1"
+      :disabled="isDisabled"
+      @click.stop="emit('toggle')"
+    >
+      <slot name="dropdown">
+        <ChevronDownIcon />
+      </slot>
+    </button>
+
+    <slot name="loading">
+      <Spinner v-if="isLoading" />
+    </slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.indicators-container {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  flex-shrink: 0;
+  gap: var(--vs-indicators-gap);
+  padding: var(--vs-padding);
+}
+
+.clear-button {
+  appearance: none;
+  display: inline-block;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  width: var(--vs-icon-size);
+  height: var(--vs-icon-size);
+  color: var(--vs-icon-color);
+  background: none;
+  outline: none;
+  cursor: pointer;
+}
+
+.dropdown-icon {
+  appearance: none;
+  display: inline-block;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  width: var(--vs-icon-size);
+  height: var(--vs-icon-size);
+  color: var(--vs-icon-color);
+  background: none;
+  outline: none;
+  cursor: pointer;
+  transition: var(--vs-dropdown-transition);
+}
+</style>

src/MultiValue.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import XMarkIcon from "./icons/XMarkIcon.vue";
+
+defineProps<{
+  label: string;
+}>();
+
+const emit = defineEmits<{
+  (e: "remove"): void;
+}>();
+</script>
+
+<template>
+  <div
+    class="multi-value"
+  >
+    <div class="multi-value-label">
+      {{ label }}
+    </div>
+
+    <button
+      type="button"
+      class="multi-value-remove"
+      :aria-label="`Remove ${label}`"
+      @click="emit('remove')"
+    >
+      <XMarkIcon />
+    </button>
+  </div>
+</template>
+
+<style lang="css" scoped>
+.multi-value {
+  display: flex;
+  min-width: 0px;
+  margin: 2px;
+  border-radius: var(--vs-multi-value-border-radius);
+  background: var(--vs-multi-value-bg);
+}
+
+.multi-value-label {
+  border-radius: var(--vs-multi-value-border-radius);
+  padding: 3px 3px 3px 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 85%;
+  color: var(--vs-multi-value-text-color);
+}
+
+.multi-value-remove {
+  border-radius: var(--vs-multi-value-border-radius);
+  appearance: none;
+  display: flex;
+  align-items: center;
+  padding: 0 4px;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  background-color: var(--vs-multi-value-bg);
+}
+
+.multi-value-remove svg {
+  width: var(--vs-multi-value-xmark-size);
+  height: var(--vs-multi-value-xmark-size);
+  fill: var(--vs-multi-value-xmark-color);
+}
+</style>

src/Placeholder.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+defineProps<{
+  text: string;
+}>();
+</script>
+
+<template>
+  <div class="placeholder">
+    {{ text }}
+  </div>
+</template>
+
+<style lang="css" scoped>
+.placeholder {
+  grid-area: 1 / 1 / 2 / 3;
+  color: var(--vs-placeholder-color);
+}
+</style>

src/Select.spec.ts

@@ -40,10 +40,10 @@ it("should render the component", () => {
 });
 
 describe("input + menu interactions behavior", () => {
-  it("should display the placeholder in the input when no option is selected", () => {
-    const wrapper = mount(VueSelect, { props: { modelValue: null, options } });
+  it("should display the placeholder when no option is selected", () => {
+    const wrapper = mount(VueSelect, { props: { modelValue: null, options, placeholder: "Select an option" } });
 
-    expect(wrapper.find("input").attributes("placeholder"));
+    expect(wrapper.find(".placeholder").text()).toBe("Select an option");
   });
 
   it("should not open the menu when focusing the input", async () => {
@@ -355,7 +355,7 @@ describe("multi-select options", () => {
 
     expect(wrapper.findAll(".menu-option").length).toBe(options.length - 1);
 
-    await wrapper.get(".multi-value").trigger("click");
+    await wrapper.get(".multi-value-remove").trigger("click");
     await openMenu(wrapper);
 
     expect(wrapper.findAll(".menu-option").length).toBe(options.length);
@@ -469,12 +469,6 @@ describe("component props", () => {
     expect(wrapper.get(".single-value").text()).toBe("Admin");
   });
 
-  it("should display the placeholder in the input when no option is selected", () => {
-    const wrapper = mount(VueSelect, { props: { modelValue: null, options, placeholder: "Pick an option" } });
-
-    expect(wrapper.find("input").attributes("placeholder")).toBe("Pick an option");
-  });
-
   it("should disable the input when passing the isDisabled prop", () => {
     const wrapper = mount(VueSelect, { props: { modelValue: null, options, isDisabled: true } });