[Feature] Select component for Codex UI

codex-ui/dev/Playground.vue

@@ -168,9 +168,9 @@ const pages = computed(() => [
         isActive: route.path === '/components/vertical-menu',
       },
       {
-        title: 'Select',
-        onActivate: () => router.push('/components/select'),
-        isActive: route.path === '/components/select',
+        title: 'Dropdown',
+        onActivate: () => router.push('/components/dropdown'),
+        isActive: route.path === '/components/dropdown',
       },
       {
         title: 'Card',

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

@@ -0,0 +1,52 @@
+<template>
+  <PageHeader>
+    Dropdown
+    <template #description>
+      Component of the form that allows you to select one or more options from the list (currently one)
+    </template>
+  </PageHeader>
+  <Dropdown :items="dropdownItems" />
+</template>
+
+<script setup lang="ts">
+import PageHeader from '../../components/PageHeader.vue';
+import { ContextMenuItem, Dropdown } from '../../../src';
+
+const dropdownItems: 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>
+</style>

codex-ui/dev/routes.ts

@@ -21,7 +21,7 @@ import ColorShemeIcons from './pages/components/ColorShemeIcons.vue';
 import Popover from './pages/components/Popover.vue';
 import Row from './pages/components/Row.vue';
 import Section from './pages/components/Section.vue';
-import Select from './pages/components/Select.vue';
+import Dropdown from './pages/components/Dropdown.vue';
 import Switch from './pages/components/Switch.vue';
 import Tabbar from './pages/components/Tabbar.vue';
 import VerticalMenu from './pages/components/VerticalMenu.vue';
@@ -86,8 +86,8 @@ const routes: RouteRecordRaw[] = [
     component: Section as Component,
   },
   {
-    path: '/components/select',
-    component: Select as Component,
+    path: '/components/dropdown',
+    component: Dropdown as Component,
   },
   {
     path: '/components/switch',

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/dropdown/Dropdown.vue

@@ -0,0 +1,90 @@
+<template>
+  <div
+    ref="dropdown"
+    :class="$style['dropdown']"
+  >
+    <Button
+      :class="$style['dropdown__btn']"
+      :icon="activeItem.icon"
+      trailing-icon="BracketsVertical"
+      secondary
+      @click="togglePopover($event.target, {vertically: 'below', horizontally: 'left'})"
+    >
+      {{ activeItem.title }}
+    </Button>
+  </div>
+</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[];
+}>();
+
+let isOpened = false;
+const items = props.items;
+const { showPopover, hide } = usePopover();
+
+function togglePopover(el: HTMLElement, align: PopoverShowParams['align']) {
+  if (!isOpened) {
+    showPopover({
+      targetEl: el,
+      with: {
+        component: ContextMenu,
+        props: {
+          items: items,
+        },
+      },
+      align,
+    });
+  } else {
+    hide();
+  }
+  isOpened = !isOpened;
+}
+
+/* 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);
+    // eslint-disable-next-line no-console
+    activeItem.value.onActivate = console.log;
+    hide();
+  }
+};
+
+onMounted(() => {
+  items.forEach((item) => {
+    if (item.type === 'default' || !item.type) {
+      item.onActivate = () => updateActiveItem(item);
+    }
+  });
+});
+
+</script>
+<style lang="postcss" module>
+.dropdown {
+  &__btn {
+    user-select: none;
+    background-color: var(--base--bg-secondary);
+    margin-bottom: var(--spacing-s);
+    padding-right: var(--spacing-s);
+  }
+  &__btn:hover {
+    background-color: var(--base--bg-secondary-hover);
+    cursor: pointer;
+  }
+}
+</style>

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

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

codex-ui/src/vue/index.ts

@@ -18,3 +18,4 @@ export * from './components/theme-preview';
 export * from './components/popover';
 export * from './composables/useTheme';
 export * from './components/checkbox';
+export * from './components/dropdown';

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