Mrc 4804 Single Select

demo/App.vue

@@ -1,8 +1,94 @@
 <template>
-  <div>Hello World</div>
+  <div style="margin-top: 90vh; margin-bottom: 90vh;">
+    <div style="margin: 2rem; width: 15rem;">
+      <h2>Single Select With Nesting</h2>
+      <single-select :options="options" :modelValue="value" @update:modelValue="updateValue"/>
+      <h2 style="margin-top: 3rem;">Single Select Without Nesting</h2>
+      <single-select :options="nonNestedOptions" :modelValue="nonNestedvalue" @update:modelValue="updateNonNestedValue"/>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
-  import { defineComponent } from "vue";
-  export default defineComponent({});
+  import { defineComponent, ref } from "vue";
+  import SingleSelect from "../src/components/SingleSelect.vue";
+  import { Option } from "../src/types.ts";
+
+  export default defineComponent({
+    components: {
+      SingleSelect
+    },
+    setup() {
+      const value = ref<string | null>(null);
+      const updateValue = (node: Option) => {
+        value.value = node.id
+      };
+
+      const nonNestedvalue = ref<string | null>(null);
+      const updateNonNestedValue = (node: Option) => {
+        nonNestedvalue.value = node.id
+      };
+
+      const options: Option[] = [
+        {
+          id: "MWI_1",
+          label: "Parent",
+          children: [
+            {
+              id: "MWI_1_1",
+              label: "ChildWithLongNameAndNoSpacesAtAll"
+            },
+            {
+              id: "MWI_1_2",
+              label: "Another child"
+            },
+            {
+              id: "MWI_1_3",
+              label: "ThirdChild",
+              children: [
+                {
+                  id: "MWI_1_3_1",
+                  label: "Nested child with long name"
+                }
+              ]
+            },
+          ]
+        },
+        {
+          id: "MWI_2",
+          label: "Parent with a long name and spaces",
+          children: [
+            {
+              id: "MWI_2_1",
+              label: "Different child"
+            }
+          ]
+        }
+      ]
+
+      const nonNestedOptions: Option[] = [
+        {
+          id: "MWI_1",
+          label: "Option1WithLongNameAndNoSpaces",
+        },
+        {
+          id: "MWI_2",
+          label: "Option 2 with a long name and spaces",
+        },
+        {
+          id: "MWI_3",
+          label: "Option 3",
+        },
+      ]
+
+      return {
+        options,
+        value,
+        updateValue,
+        nonNestedOptions,
+        nonNestedvalue,
+        updateNonNestedValue,
+      }
+    }
+  });
 </script>

demo/main.ts

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import '../src/style.css'
 import App from './App.vue'
+import '@coreui/coreui/dist/css/coreui.min.css'
 
 createApp(App).mount('#app')

src/components/SingleSelect.vue

@@ -0,0 +1,73 @@
+<template>
+  <base-select :options="options"
+               :show-dropdown-menu="showDropdownMenu"
+               @hide="() => showDropdownMenu = false"
+               @toggle-click="toggleDropdownMenu"
+               @select-item="handleSelectItem">
+    <span class="label">{{ label || placeholder }}</span>
+  </base-select>
+</template>
+
+<script lang="ts">
+  import { PropType, computed, defineComponent, ref } from 'vue';
+  import { Option } from "../types";
+  import useBaseSelect from '../mixins/useBaseSelect';
+  import BaseSelect from './BaseSelect.vue';
+  import { getNode } from '../utils';
+
+  export default defineComponent({
+    emits: ["update:modelValue"],
+    components: {
+      BaseSelect
+    },
+    props: {
+      options: {
+        type: Array as PropType<Option[]>,
+        required: true
+      },
+      placeholder: {
+        type: String,
+        default: "Select..."
+      },
+      modelValue: {
+        type: String as PropType<string | undefined | null>
+      }
+    },
+    setup(props, { emit }) {
+      const { flatOptions } = useBaseSelect(props.options);
+
+      const showDropdownMenu = ref<boolean>(false);
+      const toggleDropdownMenu = () => {
+        showDropdownMenu.value = !showDropdownMenu.value;
+      }
+
+      const label = computed(() => {
+        return flatOptions.value.find(op => op.id === props.modelValue)?.label
+      });
+
+      const handleSelectItem = (optionId: string) => {
+        const { id, label } = getNode(optionId, flatOptions.value, props.options);
+        emit("update:modelValue", { id, label });
+        showDropdownMenu.value = false;
+      };
+
+      return {
+        flatOptions,
+        showDropdownMenu,
+        toggleDropdownMenu,
+        label,
+        handleSelectItem
+      }
+    },
+  })
+</script>
+
+<style scoped>
+.label {
+  margin-right: 10px;
+  white-space: normal;
+  overflow: auto;
+  overflow-wrap: break-word;
+  text-align: left;
+}
+</style>

src/index.ts

@@ -0,0 +1,3 @@
+import SingleSelect from "./components/SingleSelect.vue";
+
+export { SingleSelect };

src/style.css

@@ -0,0 +1,5 @@
+.dropdown-menu {
+    --cui-dropdown-link-active-bg: #ebedef !important;
+    --cui-dropdown-link-active-color: rbga(44, 56, 74, 0.95) !important;
+  }
+

src/utils.ts

@@ -43,6 +43,7 @@ export const expandOptions = (array: FlatOption[], optionPath: string[]) => {
 
     while (index < array.length && array[index].path.length > optionPath.length) {
         const currentOption = array[index];
+        // Show options whose immediate parents are marked as open
         const show = openOptionsPaths.some(openOpPath => {
             return openOpPath.length === array[index].path.length - 1 &&
                    arraysAreEqual(openOpPath, array[index].path.slice(0, -1));
@@ -71,3 +72,14 @@ export const collapseOptions = (array: FlatOption[], optionPath: string[]) => {
         index++;
     };
 };
+
+export const getNode = (optionId: string, flatOptions: FlatOption[], options: Option[]) => {
+    const flatOptionPath = flatOptions.find(op => op.id === optionId)!.path;
+    let nodes = options;
+    flatOptionPath.forEach((id, index) => {
+        if (index < flatOptionPath.length - 1) {
+            nodes = nodes.find(node => node.id === id)!.children!;
+        }
+    });
+    return nodes.find(node => node.id === optionId)!;
+};

tests/components/singleSelect.spec.ts

@@ -0,0 +1,73 @@
+import { mount } from "@vue/test-utils";
+import SingleSelect from "../../src/components/SingleSelect.vue";
+import BaseSelect from "../../src/components/BaseSelect.vue";
+
+describe("Dropdown item tests", () => {
+    const options = [
+        {
+            id: "id1",
+            label: "parent1",
+            children: [
+                {
+                    id: "id1_1",
+                    label: "child1"
+                }
+            ]
+        },
+        {
+            id: "id2",
+            label: "parent2"
+        }
+    ];
+
+    const getWrapper = (id: string | undefined = undefined, placeholder = undefined) => {
+        return mount(SingleSelect, {
+            props: {
+                options,
+                placeholder,
+                modelValue: id
+            }
+        });
+    };
+
+    it("renders as expected", async () => {
+        const wrapper = getWrapper();
+
+        const baseSelect = wrapper.findComponent(BaseSelect);
+        expect(baseSelect.props("options")).toStrictEqual(options);
+        expect(baseSelect.props("showDropdownMenu")).toBe(false);
+
+        const label = baseSelect.find(".label");
+        expect(label.text()).toBe("Select...");
+    });
+
+    it("sets label as expected", () => {
+        const wrapper = getWrapper("id1_1");
+        const label = wrapper.find(".label");
+        expect(label.text()).toBe("child1");
+    });
+
+    it("toggle click toggles showDropdownMenu", () => {
+        const wrapper = getWrapper();
+        const baseSelect = wrapper.findComponent(BaseSelect);
+        baseSelect.vm.$emit("toggle-click");
+        // is false by default
+        expect(wrapper.vm.showDropdownMenu).toBe(true);
+    });
+
+    it("show dropdown menu is set to false when menu hides", () => {
+        const wrapper = getWrapper();
+        const baseSelect = wrapper.findComponent(BaseSelect);
+        wrapper.vm.showDropdownMenu = true;
+        baseSelect.vm.$emit("hide");
+        expect(wrapper.vm.showDropdownMenu).toBe(false);
+    });
+
+    it("select item event correctly triggers handleSelectItem", () => {
+        const wrapper = getWrapper();
+        const baseSelect = wrapper.findComponent(BaseSelect);
+        baseSelect.vm.$emit("select-item", "id1_1");
+        expect(wrapper.emitted("update:modelValue")![0][0]).toStrictEqual({id: "id1_1", label: "child1"});
+        expect(wrapper.vm.showDropdownMenu).toBe(false);
+    });
+});

tests/utils.spec.ts

@@ -1,5 +1,5 @@
 import { FlatOption } from "../src/types";
-import { collapseOptions, expandOptions, flattenOptions } from "../src/utils";
+import { collapseOptions, expandOptions, flattenOptions, getNode } from "../src/utils";
 
 describe("Utils tests", () => {
     const dummyOptions = [
@@ -124,4 +124,10 @@ describe("Utils tests", () => {
             }
         });
     });
+
+    it("get node works as expected", () => {
+        const array: FlatOption[] = JSON.parse(JSON.stringify(flatOptionsExpanded));
+        const node = getNode("id1_1", array, dummyOptions);
+        expect(node).toStrictEqual(dummyOptions[0].children![0]);
+    });
 });