Merge remote-tracking branch 'origin/main' into dropdown-component-impl

Popover component's logic changed

codex-ui/dev/Playground.vue

@@ -30,6 +30,7 @@
       </div>
     </div>
     <Popover />
+    <Popup />
   </div>
 </template>
 
@@ -38,7 +39,8 @@ import { computed } from 'vue';
 import {
   VerticalMenu,
   Tabbar,
-  Popover
+  Popover,
+  Popup
 } from '../src/vue';
 import { useTheme } from '../src/vue/composables/useTheme';
 
@@ -197,6 +199,16 @@ const pages = computed(() => [
         onActivate: () => router.push('/components/editor'),
         isActive: route.path === '/components/editor',
       },
+      {
+        title: 'Popup',
+        onActivate: () => router.push('/components/popup'),
+        isActive: route.path === '/components/popup',
+      },
+      {
+        title: 'Confirm',
+        onActivate: () => router.push('/components/confirm'),
+        isActive: route.path === '/components/confirm',
+      },
     ],
   },
 ]);

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

@@ -0,0 +1,41 @@
+<template>
+  <PageHeader>
+    Confirm
+    <template #description>
+      A component that allows you to accept or reject a message that appears
+    </template>
+  </PageHeader>
+  <Button
+    secondary
+    data-dimensions="large"
+    @click="show()"
+  >
+    Press here to open confirm window
+  </Button>
+</template>
+
+<script setup lang="ts">
+import PageHeader from '../../components/PageHeader.vue';
+import { Button, useConfirm } from '../../../src/vue';
+
+const { confirm } = useConfirm();
+
+async function show() {
+  const res = await confirm(
+    'CodeX',
+    'Are you sure you want to delete the page?'
+  );
+
+  if (res) {
+    // eslint-disable-next-line no-console
+    console.log('The confirm button was pressed');
+  } else {
+    // eslint-disable-next-line no-console
+    console.log('The cancel button was pressed');
+  }
+}
+
+</script>
+
+<style scoped>
+</style>

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

@@ -15,7 +15,7 @@
     <div>
       <Button
         secondary
-        @click="show($event.target, {vertically: 'below', horizontally: 'left'})"
+        @click="!isOpen ? show($event.target, {vertically: 'below', horizontally: 'left'}) : hide()"
       >
         Open below left
       </Button>
@@ -82,7 +82,7 @@
 import PageHeader from '../../components/PageHeader.vue';
 import { usePopover, PopoverShowParams, Button, ContextMenu, Heading } from '../../../src/vue';
 
-const { showPopover } = usePopover();
+const { showPopover, isOpen, hide } = usePopover();
 
 /**
  * Example of working with Popover

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

@@ -0,0 +1,34 @@
+<template>
+  <PageHeader>
+    Popup
+    <template #description>
+      A component that appears on top of other components. Can include any other component.
+    </template>
+  </PageHeader>
+  <Button
+    secondary
+    data-dimensions="large"
+    @click="show()"
+  >
+    Press here to open popup
+  </Button>
+</template>
+
+<script setup lang="ts">
+import PageHeader from '../../components/PageHeader.vue';
+import { Button, usePopup } from '../../../src/vue';
+import StubText from './StubText.vue';
+
+const { showPopup } = usePopup();
+
+function show(): void {
+  showPopup({
+    component: StubText,
+    props: {},
+  });
+}
+
+</script>
+
+<style scoped>
+</style>

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

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    Popup can include any component
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+</style>

codex-ui/dev/routes.ts

@@ -28,6 +28,8 @@ import VerticalMenu from './pages/components/VerticalMenu.vue';
 import ContextMenu from './pages/components/ContextMenu.vue';
 import Editor from './pages/components/Editor.vue';
 import ThemePreview from './pages/components/ThemePreview.vue';
+import Popup from './pages/components/Popup.vue';
+import Confirm from './pages/components/Confirm.vue';
 
 /**
  * Vue router routes list
@@ -145,6 +147,14 @@ const routes: RouteRecordRaw[] = [
     path: '/components/theme-preview',
     component: ThemePreview as Component,
   },
+  {
+    path: '/components/popup',
+    component: Popup as Component,
+  },
+  {
+    path: '/components/confirm',
+    component: Confirm as Component,
+  },
 ];
 
 export default routes;

codex-ui/src/styles/z-axis.pcss

@@ -1,3 +1,4 @@
 :root {
   --z-popover: 3;
+  --z-popup: calc(var(--z-popover) + 1);
 }

codex-ui/src/vue/components/confirm/Confirm.vue

@@ -0,0 +1,135 @@
+<template>
+  <div
+    :class="$style['confirm']"
+    data-dimensions="large"
+  >
+    <div class="text-ui-base-bold">
+      {{ title }}
+    </div>
+    <div :class="[$style['confirm__body'], 'text-ui-base-medium']">
+      {{ text }}
+    </div>
+    <div :class="$style['confirm__controls']">
+      <Button
+        secondary
+        @click="onCancel"
+      >
+        <div :class="$style['confirm__button-inner']">
+          {{ cancelText }}
+        </div>
+      </Button>
+      <Button
+        primary
+        @click="onConfirm"
+      >
+        <div :class="$style['confirm__button-inner']">
+          {{ confirmText }}
+        </div>
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from '../button/Button.vue';
+import { onMounted, onUnmounted } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Text that will be displayed at the top of comfirm container
+     */
+    title: string;
+
+    /**
+     * Text that will be displayed in the middle part of the confirm container
+     */
+    text: string;
+
+    /**
+     * Text that will be displayed in the confirm button
+     */
+    confirmText?: string;
+
+    /**
+     * Text that will be displayed in the cancel button
+     */
+    cancelText?: string;
+
+    /**
+     * Function that is executed after pressing the Cancel button
+     */
+    onCancel: () => void;
+
+    /**
+     * Function that is executed after pressing the Confirm button
+     */
+    onConfirm: () => void;
+  }>(),
+  {
+    confirmText: 'Confirm',
+    cancelText: 'Cancel',
+  }
+);
+
+/**
+ * Call onConfirm when enter was pressed
+ *
+ * @param event - the event object representing the keyboard event
+ * @param event.key - the property of the event object that holds the value of the pressed key
+ */
+const confirmOnEnter = (event: { key: string }) => {
+  if (event.key === 'Enter') {
+    props.onConfirm();
+  }
+};
+
+/**
+ * Call onCancel when esc was pressed
+ *
+ * @param event - the event object representing the keyboard event
+ * @param event.key - the property of the event object that holds the value of the pressed key
+ */
+const closeOnEsc = (event: { key: string }) => {
+  if (event.key === 'Escape') {
+    props.onCancel();
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('keydown', confirmOnEnter);
+  document.addEventListener('keydown', closeOnEsc);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', confirmOnEnter);
+  document.removeEventListener('keydown', closeOnEsc);
+});
+
+</script>
+
+<style module>
+.confirm {
+  display: flex;
+  flex-direction: column;
+  gap: var(--v-padding);
+  text-align: center;
+  width: min-content;
+
+  &__body {
+    padding: 0 var(--spacing-ml) 0 var(--spacing-ml);
+    word-wrap: break-word;
+  }
+
+  &__controls {
+    display: flex;
+    padding: var(--v-padding) 0 0 0;
+    gap: var(--spacing-m);
+  }
+
+  &__button-inner {
+    width: 84px;
+  }
+}
+
+</style>

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

@@ -0,0 +1,4 @@
+import Confirm from './Confirm.vue';
+export * from './useConfirm';
+
+export { Confirm };

codex-ui/src/vue/components/confirm/useConfirm.ts

@@ -0,0 +1,40 @@
+import { createSharedComposable } from '@vueuse/core';
+import { usePopup } from '../popup';
+import { Confirm } from '.';
+
+export const useConfirm = createSharedComposable(() => {
+  /**
+   * Used to create a Popup component that will display the current Confirm
+   */
+  const { showPopup, hidePopup } = usePopup();
+
+  /**
+   * @param title - title of the confirm window
+   * @param text - message to be displayed in confirm window
+   * @returns user selection result
+   */
+  async function confirm(title: string, text: string): Promise<boolean> {
+    return new Promise<boolean>((resolve) => {
+      showPopup({
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        component: Confirm,
+        props: {
+          title: title,
+          text: text,
+          onCancel: () => {
+            resolve(false);
+            hidePopup();
+          },
+          onConfirm: () => {
+            resolve(true);
+            hidePopup();
+          },
+        },
+      });
+    });
+  }
+
+  return {
+    confirm,
+  };
+});

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

@@ -29,12 +29,18 @@ const {
   hide,
   content,
   width,
+  targetElement,
 } = usePopover();
 
 /**
  * Close the popover when clicking outside of it
  */
-onClickOutside(popoverEl, hide);
+onClickOutside(popoverEl, hide, {
+  /**
+   * Allow clicks on the target element to implemet toggle behavior
+   */
+  ignore: [targetElement],
+});
 </script>
 
 <style module>