[Feature] Select component for Codex UI

codex-ui/dev/pages/components/Select.vue

@@ -1,14 +1,51 @@
 <template>
   <PageHeader>
-    Select
+    Dropdown
     <template #description>
-      Component of the form that allows you to select one or more options from the list
+      Component of the form that allows you to select one or more options from the list (currently one)
     </template>
   </PageHeader>
+  <Select :items="options" />
 </template>
 
 <script setup lang="ts">
 import PageHeader from '../../components/PageHeader.vue';
+import { ContextMenuItem, Select } from '../../../src';
+
+const options: ContextMenuItem[] = [
+  {
+    type: 'default',
+    title: 'Header',
+    // eslint-disable-next-line no-console
+    onActivate: console.log,
+  },
+  {
+    title: 'Header 1',
+    icon: 'H1',
+    // eslint-disable-next-line no-console
+    onActivate: console.log,
+  },
+  {
+    type: 'separator',
+  },
+  {
+    type: 'default',
+    title: 'Image',
+    icon: 'Picture',
+    // eslint-disable-next-line no-console
+    onActivate: console.log,
+  },
+  {
+    type: 'separator',
+  },
+  {
+    type: 'default',
+    title: 'Text',
+    icon: 'Text',
+    // eslint-disable-next-line no-console
+    onActivate: console.log,
+  },
+];
 </script>
 
 <style scoped>

codex-ui/package.json

@@ -26,7 +26,7 @@
     }
   },
   "devDependencies": {
-    "@codexteam/icons": "^0.3.0",
+    "@codexteam/icons": "^0.3.3",
     "@editorjs/header": "^2.8.6",
     "@editorjs/nested-list": "^1.4.2",
     "@types/node": "^20.11.15",

codex-ui/src/vue/components/select/Select.vue

@@ -0,0 +1,63 @@
+<template>
+  <Button
+    :icon="activeItem.icon"
+    trailing-icon="BracketsVertical"
+    secondary
+    @click="!isOpen ? togglePopover($event.currentTarget, {vertically: 'below', horizontally: 'left'}) : hide()"
+  >
+    {{ activeItem.title }}
+  </Button>
+</template>
+<script setup lang="ts">
+import type { ContextMenuItem as Item } from '../context-menu/ContextMenu.types';
+import { ContextMenu } from '../context-menu';
+import { onMounted, ref } from 'vue';
+import { usePopover, PopoverShowParams } from '../popover';
+import { Button } from '../button';
+
+const props = defineProps<{
+  items: Item[];
+}>();
+
+const items = props.items;
+const { showPopover, hide, isOpen } = usePopover();
+
+const togglePopover = (el: HTMLElement, align: PopoverShowParams['align']) => {
+  showPopover({
+    targetEl: el,
+    with: {
+      component: ContextMenu,
+      props: {
+        items: items,
+      },
+    },
+    align,
+  });
+};
+
+/* Default item value for select on page load */
+const defaultValue: Item = {
+  title: 'Choose an option',
+  type: 'default',
+  onActivate: () => {},
+};
+const activeItem = ref(defaultValue);
+
+/* Main function to update selected item */
+const updateActiveItem = (item: Item) => {
+  if (item.type === 'default' || !item.type) {
+    activeItem.value = Object.create(item);
+    activeItem.value.onActivate = () => {};
+    hide();
+  }
+};
+
+onMounted(() => {
+  items.forEach((item) => {
+    if (item.type === 'default' || !item.type) {
+      item.onActivate = () => updateActiveItem(item);
+    }
+  });
+});
+
+</script>

codex-ui/src/vue/components/select/index.ts

@@ -0,0 +1,3 @@
+import Select from './Select.vue';
+
+export { Select };

codex-ui/src/vue/index.ts

@@ -20,3 +20,4 @@ export * from './components/popup';
 export * from './components/confirm';
 export * from './composables/useTheme';
 export * from './components/checkbox';
+export * from './components/select';

package.json

@@ -18,7 +18,7 @@
     "codex-ui"
   ],
   "dependencies": {
-    "@codexteam/icons": "^0.3.0",
+    "@codexteam/icons": "^0.3.3",
     "@hawk.so/javascript": "^3.0.2",
     "@vueuse/core": "^10.3.0",
     "codex-ui": "workspace:^",

yarn.lock

@@ -53,10 +53,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@codexteam/icons@npm:^0.3.0":
-  version: 0.3.0
-  resolution: "@codexteam/icons@npm:0.3.0"
-  checksum: 4949e753a9f8d0442c581512566167dddf7853fce0aa388ec9ddd9acc2aa3f081192d266c0eb1a2f78154492f376f7ce042f69ca45cad9a1f02583ab70e0000b
+"@codexteam/icons@npm:^0.3.3":
+  version: 0.3.3
+  resolution: "@codexteam/icons@npm:0.3.3"
+  checksum: aa3c2ea96122e981ab6a6544cfe88f2381da4ab56a09230b9123229d85e7f2134409a694e38efe31657d13265198e2391d23347d4be2b64a2bab85b223ef5d83
   languageName: node
   linkType: hard
 
@@ -2165,7 +2165,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "codex-ui@workspace:codex-ui"
   dependencies:
-    "@codexteam/icons": ^0.3.0
+    "@codexteam/icons": ^0.3.3
     "@editorjs/editorjs": 2.30.2
     "@editorjs/header": ^2.8.6
     "@editorjs/nested-list": ^1.4.2
@@ -4325,7 +4325,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "notes.web@workspace:."
   dependencies:
-    "@codexteam/icons": ^0.3.0
+    "@codexteam/icons": ^0.3.3
     "@eslint/eslintrc": ^3.1.0
     "@eslint/js": ^9.3.0
     "@hawk.so/javascript": ^3.0.2