feat: select component integration

By this update Select Component was integrated into note's settings into Role Select component.
Due to this integration, some issues were fixed:
- added ability to get selected value outside the component via @value-update attribute
- changed Popover's reactive styling to avoid unapplying component's positioning
- Updated Select Component's page in Playground

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

@@ -8,17 +8,24 @@
   <Select
     :items="options"
     :default-item="defaultItem"
+    @value-update="(value) => updatedValue = value"
   />
+  <Heading :level="3">
+    Getting selected option
+  </Heading>
+  You can use selected item outside the component via <code>@value-update</code>: <i>{{ updatedValue }}</i>
 </template>
 
 <script setup lang="ts">
 import PageHeader from '../../components/PageHeader.vue';
-import { ContextMenuItem, DefaultItem, Select } from '../../../src';
+import { ContextMenuItem, DefaultItem, Heading, Select } from '../../../src';
+import { ref } from 'vue';
 
 const defaultItem: DefaultItem = {
   title: 'Choose an option',
   onActivate: () => {},
 };
+const updatedValue = ref<DefaultItem>(defaultItem);
 const options: ContextMenuItem[] = [
   {
     type: 'default',

codex-ui/src/vue/components/popover/Popover.vue

@@ -3,6 +3,12 @@
     v-show="isOpen"
     ref="popoverEl"
     :class="$style.popover"
+    :style="{
+      left: position.left + 'px',
+      top: position.top + 'px',
+      transform: position.transform,
+      width: width + 'px' // Assuming width is in pixels
+    }"
   >
     <component
       :is="content.component"
@@ -51,10 +57,6 @@ onClickOutside(popoverEl, hide, {
   border-radius: var(--radius-field);
   border: 1px solid var(--base--border);
   padding: var(--h-padding);
-  left: v-bind('position.left');
-  top: v-bind('position.top');
-  transform: v-bind('position.transform');
-  width: v-bind('width');
   box-sizing: border-box;
 }
 </style>

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

@@ -15,6 +15,7 @@ import { onMounted, ref } from 'vue';
 import { usePopover, PopoverShowParams } from '../popover';
 import { Button } from '../button';
 
+const emit = defineEmits(['valueUpdate']);
 const props = defineProps<{
   items: SelectItem[];
   defaultItem: DefaultItem;
@@ -45,8 +46,11 @@ const defaultValue: SelectItem = props.defaultItem;
 const activeItem = ref(defaultValue);
 
 /* Main function to update selected item */
+/* Also creates new event, which could be caught outside */
+
 const updateActiveItem = (item: DefaultItem) => {
   activeItem.value = item;
+  emit('valueUpdate', activeItem.value);
   hide();
 };
 

src/presentation/components/team/RoleSelect.vue

@@ -1,17 +1,10 @@
 <template>
   <div v-if="teamMember.user.id != user?.id">
-    <select
-      v-model="selectedRole"
-      @change="updateMemberRole"
-    >
-      <option
-        v-for="(role, index) in roleOptions"
-        :key="index"
-        :value="role"
-      >
-        {{ t(`noteSettings.team.roles.${role}`) }}
-      </option>
-    </select>
+    <Select
+      :items="roleItems"
+      :default-item="defaultRole"
+      @value-update="(updatedRole) => updateMemberRole(updatedRole)"
+    />
   </div>
 </template>
 
@@ -22,6 +15,7 @@ import { computed, ref } from 'vue';
 import useNoteSettings from '@/application/services/useNoteSettings.ts';
 import { useAppState } from '@/application/services/useAppState';
 import { useI18n } from 'vue-i18n';
+import { ContextMenuItem, DefaultItem, Select } from 'codex-ui/vue';
 
 /**
  * TeamMember props
@@ -38,8 +32,20 @@ const props = defineProps<{
 }>();
 
 const selectedRole = ref(MemberRole[props.teamMember.role]);
+const defaultRole: DefaultItem = {
+  title: selectedRole.value,
+  onActivate: () => {},
+};
 
 const roleOptions = computed(() => Object.values(MemberRole).filter(value => typeof value === 'string'));
+const roleItems: ContextMenuItem[] = [];
+
+roleOptions.value.forEach((role) => {
+  roleItems.push({
+    title: role.toString(),
+    onActivate: () => {},
+  });
+});
 
 const { changeRole } = useNoteSettings();
 
@@ -50,8 +56,8 @@ const { t } = useI18n();
 /**
  * Updates the user role if it has been changed
  */
-async function updateMemberRole() {
-  changeRole(props.noteId, props.teamMember.user.id, MemberRole[selectedRole.value as keyof typeof MemberRole]);
+async function updateMemberRole(updatedRole: DefaultItem | any) {
+  changeRole(props.noteId, props.teamMember.user.id, MemberRole[updatedRole.title as keyof typeof MemberRole]);
 }
 </script>