From a7e3d443c982fa45b675c623888b63e7978eab1f Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 20 Nov 2024 03:55:45 +0530
Subject: [PATCH] feat: Add the new select menu component (#10445)

---
 .../selectmenu/SelectMenu.story.vue           | 46 ++++++++++++
 .../components-next/selectmenu/SelectMenu.vue | 71 +++++++++++++++++++
 2 files changed, 117 insertions(+)
 create mode 100644 app/javascript/dashboard/components-next/selectmenu/SelectMenu.story.vue
 create mode 100644 app/javascript/dashboard/components-next/selectmenu/SelectMenu.vue

diff --git a/app/javascript/dashboard/components-next/selectmenu/SelectMenu.story.vue b/app/javascript/dashboard/components-next/selectmenu/SelectMenu.story.vue
new file mode 100644
index 000000000..13d823889
--- /dev/null
+++ b/app/javascript/dashboard/components-next/selectmenu/SelectMenu.story.vue
@@ -0,0 +1,46 @@
+<script setup>
+import { ref } from 'vue';
+import SelectMenu from './SelectMenu.vue';
+
+const sampleOptions = [
+  { label: 'Option 1', value: 'option1' },
+  { label: 'Option 2', value: 'option2' },
+  { label: 'Option 3', value: 'option3' },
+  { label: 'Option 4', value: 'option4' },
+];
+
+const selectedValue = ref('option1');
+</script>
+
+<template>
+  <Story
+    title="Components/SelectMenu"
+    :layout="{ type: 'grid', width: '400px' }"
+  >
+    <Variant title="Default">
+      <div class="flex flex-col gap-4 p-4 h-[400px]">
+        <SelectMenu
+          v-model="selectedValue"
+          :options="sampleOptions"
+          :label="sampleOptions.find(opt => opt.value === selectedValue)?.label"
+        />
+        <div class="text-sm">Selected value: {{ selectedValue }}</div>
+      </div>
+    </Variant>
+
+    <Variant title="With Many Options">
+      <div class="flex flex-col gap-4 p-4 h-[400px]">
+        <SelectMenu
+          v-model="selectedValue"
+          :options="
+            Array.from({ length: 10 }, (_, i) => ({
+              label: `Option ${i + 1}`,
+              value: `value${i + 1}`,
+            }))
+          "
+          label="Select from many"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/selectmenu/SelectMenu.vue b/app/javascript/dashboard/components-next/selectmenu/SelectMenu.vue
new file mode 100644
index 000000000..cc584dcbb
--- /dev/null
+++ b/app/javascript/dashboard/components-next/selectmenu/SelectMenu.vue
@@ -0,0 +1,71 @@
+<script setup>
+import { ref, computed } from 'vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  options: {
+    type: Array,
+    required: true,
+  },
+  modelValue: {
+    type: String,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const isOpen = ref(false);
+
+const labelValue = computed(() => props.label);
+
+const toggleMenu = () => {
+  isOpen.value = !isOpen.value;
+};
+
+const handleSelect = value => {
+  emit('update:modelValue', value);
+  isOpen.value = false;
+};
+</script>
+
+<template>
+  <div
+    v-on-clickaway="() => (isOpen = false)"
+    class="relative flex flex-col gap-1 w-fit"
+  >
+    <Button
+      icon="i-lucide-chevron-down"
+      size="sm"
+      trailing-icon
+      color="slate"
+      variant="faded"
+      class="!w-fit"
+      :class="{ 'dark:!bg-n-alpha-2 !bg-n-slate-9/20': isOpen }"
+      :label="labelValue"
+      @click="toggleMenu"
+    />
+    <div
+      v-if="isOpen"
+      class="absolute ltr:left-full rtl:right-full select-none max-w-48 ltr:ml-1 rtl:mr-1 flex flex-col gap-1 bg-n-alpha-3 backdrop-blur-[100px] p-1 top-0 shadow-lg rounded-lg border border-n-weak"
+    >
+      <Button
+        v-for="option in options"
+        :key="option.value"
+        :label="option.label"
+        :icon="option.value === modelValue ? 'i-lucide-check' : ''"
+        size="sm"
+        variant="ghost"
+        color="slate"
+        trailing-icon
+        class="!justify-end !px-2.5 !h-7"
+        :class="{ '!bg-n-alpha-2': option.value === modelValue }"
+        @click="handleSelect(option.value)"
+      />
+    </div>
+  </div>
+</template>