fix: renaming and toggle imlementation

There was some mess with component's name, because Dropdown and Select lots in common, so now this is Select component

Also added ability to toggle select by clicking on selection button

codex-ui/dev/Playground.vue

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

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

@@ -5,14 +5,14 @@
       Component of the form that allows you to select one or more options from the list (currently one)
     </template>
   </PageHeader>
-  <Dropdown :items="dropdownItems" />
+  <Select :items="options" />
 </template>
 
 <script setup lang="ts">
 import PageHeader from '../../components/PageHeader.vue';
-import { ContextMenuItem, Dropdown } from '../../../src';
+import { ContextMenuItem, Select } from '../../../src';
 
-const dropdownItems: ContextMenuItem[] = [
+const options: ContextMenuItem[] = [
   {
     type: 'default',
     title: 'Header',

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 Dropdown from './pages/components/Dropdown.vue';
+import Select from './pages/components/Select.vue';
 import Switch from './pages/components/Switch.vue';
 import Tabbar from './pages/components/Tabbar.vue';
 import VerticalMenu from './pages/components/VerticalMenu.vue';
@@ -88,8 +88,8 @@ const routes: RouteRecordRaw[] = [
     component: Section as Component,
   },
   {
-    path: '/components/dropdown',
-    component: Dropdown as Component,
+    path: '/components/select',
+    component: Select as Component,
   },
   {
     path: '/components/switch',

codex-ui/src/vue/components/dropdown/Dropdown.vue → codex-ui/src/vue/components/select/Select.vue

@@ -1,16 +1,12 @@
 <template>
-  <div
-    ref="dropdown"
+  <Button
+    :icon="activeItem.icon"
+    trailing-icon="BracketsVertical"
+    secondary
+    @click="!isOpen ? togglePopover($event.currentTarget, {vertically: 'below', horizontally: 'left'}) : hide()"
   >
-    <Button
-      :icon="activeItem.icon"
-      trailing-icon="BracketsVertical"
-      secondary
-      @click="togglePopover($event.target, {vertically: 'below', horizontally: 'left'})"
-    >
-      {{ activeItem.title }}
-    </Button>
-  </div>
+    {{ activeItem.title }}
+  </Button>
 </template>
 <script setup lang="ts">
 import type { ContextMenuItem as Item } from '../context-menu/ContextMenu.types';
@@ -23,27 +19,21 @@ const props = defineProps<{
   items: Item[];
 }>();
 
-let isOpened = false;
 const items = props.items;
-const { showPopover, hide } = usePopover();
+const { showPopover, hide, isOpen } = usePopover();
 
-function togglePopover(el: HTMLElement, align: PopoverShowParams['align']) {
-  if (!isOpened) {
-    showPopover({
-      targetEl: el,
-      with: {
-        component: ContextMenu,
-        props: {
-          items: items,
-        },
+const togglePopover = (el: HTMLElement, align: PopoverShowParams['align']) => {
+  showPopover({
+    targetEl: el,
+    with: {
+      component: ContextMenu,
+      props: {
+        items: items,
       },
-      align,
-    });
-  } else {
-    hide();
-  }
-  isOpened = !isOpened;
-}
+    },
+    align,
+  });
+};
 
 /* Default item value for select on page load */
 const defaultValue: Item = {
@@ -57,8 +47,7 @@ const activeItem = ref(defaultValue);
 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;
+    activeItem.value.onActivate = () => {};
     hide();
   }
 };

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,4 +20,4 @@ export * from './components/popup';
 export * from './components/confirm';
 export * from './composables/useTheme';
 export * from './components/checkbox';
-export * from './components/dropdown';
+export * from './components/select';