Merge pull request #279 from codex-team/dropdown-component-impl

[Feature] Select component for Codex UI

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

@@ -2,13 +2,51 @@
   <PageHeader>
     Select
     <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"
+    :default-item="defaultItem"
+  />
 </template>
 
 <script setup lang="ts">
 import PageHeader from '../../components/PageHeader.vue';
+import { ContextMenuItem, DefaultItem, Select } from '../../../src';
+
+const defaultItem: DefaultItem = {
+  title: 'Choose an option',
+  onActivate: () => {},
+};
+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: 'default',
+    title: 'Image',
+    icon: 'Picture',
+    // eslint-disable-next-line no-console
+    onActivate: console.log,
+  },
+  {
+    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/context-menu/ContextMenuItem.vue

@@ -1,12 +1,12 @@
 <template>
-  <div :class="$style['item']">
+  <div :class="$style['context-menu-item']">
     <div
       v-if="item.type === 'default' || !item.type"
-      :class="[$style['item__default']]"
+      :class="[$style['context-menu-item__default']]"
+      @click="item.onActivate"
     >
       <div
-        :class="$style['item__body']"
-        @click="item.onActivate"
+        :class="$style['context-menu-item__body']"
       >
         <Icon
           v-if="item.icon !== undefined"
@@ -19,14 +19,14 @@
     </div>
     <div
       v-if="item.type === 'separator'"
-      :class="$style['item__separator']"
+      :class="$style['context-menu-item__separator']"
     >
-      <div :class="$style['item__line']" />
+      <div :class="$style['context-menu-item__line']" />
     </div>
     <div
       v-if="item.type === 'message'"
-      :class="[$style['item__default'],
-               $style['item__default--no-hover']]"
+      :class="[$style['context-menu-item__default'],
+               $style['context-menu-item__default--no-hover']]"
     >
       {{ item.message }}
     </div>
@@ -46,7 +46,7 @@ defineProps<{
 </script>
 
 <style lang="postcss" module>
-.item {
+.context-menu-item {
   &__separator {
     padding: var(--spacing-very-x) var(--spacing-xxs);
   }
@@ -67,7 +67,7 @@ defineProps<{
     }
   }
 
-  .item__default:not(.item__default--no-hover):hover {
+  .context-menu-item__default:not(.context-menu-item__default--no-hover):hover {
     background-color: var(--base--bg-secondary-hover);
     cursor: pointer;
   }

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

@@ -0,0 +1,61 @@
+<template>
+  <Button
+    :icon="activeItem.icon"
+    trailing-icon="BracketsVertical"
+    secondary
+    @click="togglePopover($event.currentTarget, {vertically: 'below', horizontally: 'left'})"
+  >
+    {{ activeItem.title }}
+  </Button>
+</template>
+<script setup lang="ts">
+import type { ContextMenuItem as SelectItem, DefaultItem } 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: SelectItem[];
+  defaultItem: DefaultItem;
+}>();
+
+const items = props.items;
+const { showPopover, hide, isOpen } = usePopover();
+
+const togglePopover = (el: HTMLElement, align: PopoverShowParams['align']) => {
+  if (!isOpen.value) {
+    showPopover({
+      targetEl: el,
+      with: {
+        component: ContextMenu,
+        props: {
+          items: items,
+        },
+      },
+      align,
+    });
+  } else {
+    hide();
+  }
+};
+
+/* Default item value for select on page load */
+const defaultValue: SelectItem = props.defaultItem;
+const activeItem = ref(defaultValue);
+
+/* Main function to update selected item */
+const updateActiveItem = (item: DefaultItem) => {
+  activeItem.value = item;
+  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