feat(codex-ui): popup and confirm implementation

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,11 @@ 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',
+      },
     ],
   },
 ]);

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

@@ -0,0 +1,48 @@
+<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, Confirm, usePopup } from '../../../src/vue';
+
+function onCancelFunction(): void {
+  // eslint-disable-next-line no-console
+  console.log('The cancel button was pressed');
+}
+
+function onConfirmFunction(): void {
+  // eslint-disable-next-line no-console
+  console.log('The confirm button was pressed');
+}
+
+const { showPopup } = usePopup();
+
+function show() {
+  showPopup({
+    component: Confirm,
+    props: {
+      title: 'CodeX',
+      body: 'Are you sure you want to delete the page?',
+      onCancel: onCancelFunction,
+      onConfirm: onConfirmFunction,
+    },
+  });
+}
+
+</script>
+
+<style scoped>
+</style>

codex-ui/dev/routes.ts

@@ -28,6 +28,7 @@ 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';
 
 /**
  * Vue router routes list
@@ -145,6 +146,10 @@ const routes: RouteRecordRaw[] = [
     path: '/components/theme-preview',
     component: ThemePreview as Component,
   },
+  {
+    path: '/components/popup',
+    component: Popup as Component,
+  },
 ];
 
 export default routes;

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

@@ -0,0 +1,93 @@
+<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']">
+      {{ body }}
+    </div>
+    <div :class="$style['confirm__controls']">
+      <Button
+        secondary
+        @click="onCancel"
+      >
+        <div :class="$style['confirm__button-inner']">
+          Cancel
+        </div>
+      </Button>
+      <Button
+        primary
+        @click="onConfirm"
+      >
+        <div :class="$style['confirm__button-inner']">
+          {{ confirmButton }}
+        </div>
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from '../button/Button.vue';
+
+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
+     */
+    body: string;
+
+    /**
+     * Text that will be displayed in the confirm button
+     */
+    confirmButton?: string;
+
+    /**
+     * The function that is called when click on the cancel button
+     */
+    onCancel: () => void;
+
+    /**
+     * The function that is called when click on the confirm button
+     */
+    onConfirm: () => void;
+  }>(),
+  {
+    confirmButton: 'Confirm',
+  }
+);
+</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/popup/Popup.types.ts

@@ -0,0 +1,14 @@
+import type { Component } from 'vue';
+
+export interface PopupContent {
+  /**
+   * Component to render in the popup
+   */
+  component: Component;
+
+  /**
+   * Props to pass to the component
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  props: Record<string, any>;
+}

codex-ui/src/vue/components/popup/Popup.vue

@@ -0,0 +1,79 @@
+<template>
+  <div
+    v-show="isActive"
+    :class="$style['popup']"
+  >
+    <div :class="$style['popup__container']">
+      <component
+        :is="content.component"
+        v-if="content"
+        v-bind="content.props"
+      />
+    </div>
+    <Icon
+      v-if="hasCloseButton"
+      :class="$style['popup__icon']"
+      name="Cross"
+      @click="hidePopup"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Icon from '../icon/Icon.vue';
+import { usePopup } from './usePopup';
+
+const {
+  isActive,
+  hidePopup,
+  content,
+} = usePopup();
+
+withDefaults(
+  defineProps<{
+    /**
+     * If true, a button to close the popup appears
+     */
+    hasCloseButton?: boolean;
+  }>(),
+  {
+    hasCloseButton: true,
+  }
+);
+
+</script>
+
+<style module>
+
+.popup {
+  z-index: var(--z-popover);
+  inset: 0;
+  display: grid;
+  grid-template-columns: auto auto;
+  position: fixed;
+  align-content: center;
+  gap: var(--spacing-l);
+  justify-content: center;
+  align-items: start;
+  background-color: rgba(0, 0, 0, 0.49);
+  align-items: baseline;
+  color: var(--base--text);
+
+  &__container {
+    gap: var(--spacing-ml);
+    padding: var(--spacing-l);
+    border-radius: var(--radius-ml);
+    background-color: var(--base--bg-primary);
+    box-shadow: inset 0 0 0 var(--delimiter-height) var(--base--border);
+  }
+
+  &__icon {
+    cursor: pointer;
+    color: var(--base--text-secondary);
+    padding: var(--spacing-very-x);
+    box-shadow: inset 0 0 0 var(--delimiter-height);
+    border-radius: var(--radius-l);
+  }
+}
+
+</style>

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

@@ -0,0 +1,6 @@
+import Popup from './Popup.vue';
+import Confirm from './Confirm.vue';
+export * from './usePopup';
+export * from './Popup.types';
+
+export { Popup, Confirm };

codex-ui/src/vue/components/popup/usePopup.ts

@@ -0,0 +1,58 @@
+import { createSharedComposable } from '@vueuse/core';
+import { ref, shallowRef } from 'vue';
+import type { PopupContent } from './Popup.types';
+
+export const usePopup = createSharedComposable(() => {
+  /**
+   * Popup active state
+   */
+  const isActive = ref(false);
+
+  /**
+   * Popup content: component and props
+   */
+  const content = shallowRef<PopupContent | null>(null);
+
+  /**
+   * Method for attaching a component to the popup
+   * @param component - component to attach
+   * @param props - props to pass to the component
+   */
+  function mountComponent(component: PopupContent['component'], props: PopupContent['props']): void {
+    content.value = {
+      component,
+      props,
+    };
+  }
+
+  /**
+   * Show popup
+   */
+  function show(): void {
+    isActive.value = true;
+  }
+
+  /**
+   * Mount component into popup and show it
+   * @param params - popup showing configuration
+   */
+  function showPopup(params: PopupContent): void {
+    mountComponent(params.component, params.props);
+    show();
+  }
+
+  /**
+   * Сlear the content inside the popup and hide popup
+   */
+  function hidePopup(): void {
+    content.value = null;
+    isActive.value = false;
+  }
+
+  return {
+    isActive,
+    showPopup,
+    hidePopup,
+    content,
+  };
+});

codex-ui/src/vue/index.ts

@@ -16,4 +16,5 @@ export * from './components/vertical-menu';
 export * from './components/colorShemeIcons';
 export * from './components/theme-preview';
 export * from './components/popover';
+export * from './components/popup';
 export * from './composables/useTheme';

src/App.vue

@@ -2,12 +2,13 @@
   <Header />
   <router-view />
   <Popover />
+  <Popup />
 </template>
 
 <script lang="ts" setup>
 import Header from '@/presentation/components/header/Header.vue';
 import { onErrorCaptured } from 'vue';
-import { useTheme, Popover } from 'codex-ui/vue';
+import { useTheme, Popover, Popup } from 'codex-ui/vue';
 import useAuthRequired from '@/application/services/useAuthRequired';
 
 /**