@vc-shell/framework 1.0.69 → 1.0.70

package/ui/components/organisms/vc-notification-dropdown/vc-notification-dropdown.vue

@@ -0,0 +1,125 @@
+<template>
+  <div
+    v-on-click-outside="
+      () => {
+        isDropdownVisible = false;
+      }
+    "
+    class="tw-relative tw-flex tw-items-center tw-h-full"
+    :title="title"
+    @click.stop="toggleNotificationsDrop"
+  >
+    <div
+      :class="[
+        'tw-relative tw-h-full tw-flex tw-items-center tw-justify-center tw-w-[var(--app-bar-button-width)] tw-border-l tw-border-solid tw-border-l-[color:var(--app-bar-button-border-color)] tw-cursor-pointer tw-text-[color:var(--app-bar-button-color)] tw-bg-[color:var(--app-bar-button-background-color)]  tw-transition-[color]  tw-duration-200 hover:tw-text-[color:var(--app-bar-button-color-hover)] hover:tw-bg-[color:var(--app-bar-button-background-color-hover)]',
+        {
+          'tw-shadow-[0_-6px_6px_white,1px_1px_22px_rgba(126,142,157,0.2)] [clip-path:inset(0px_-20px_0px_-20px)] tw-bg-white tw-z-[10001]':
+            isDropdownVisible && !$isMobile.value,
+        },
+      ]"
+    >
+      <VcIcon
+        icon="fas fa-bell"
+        size="xl"
+      ></VcIcon>
+      <div
+        :class="{
+          'tw-block tw-absolute tw-right-[12px] tw-top-[18px] tw-w-[7px] tw-h-[7px] tw-bg-[#ff4a4a] tw-rounded-full tw-z-[1]':
+            isAccent,
+        }"
+      ></div>
+    </div>
+    <div
+      v-if="$isMobile.value && isDropdownVisible"
+      class="tw-fixed tw-left-0 tw-top-0 tw-right-0 tw-bottom-0 tw-z-[10000] tw-bg-[#808c99] tw-opacity-60"
+      @click.stop="toggleNotificationsDrop"
+    ></div>
+    <div
+      v-if="isDropdownVisible"
+      class="tw-absolute tw-top-[var(--app-bar-height)] tw-z-[10000] tw-drop-shadow-[0px_4px_15px_rgba(43,67,84,0.15)] tw-bg-white tw-rounded-b-[6px] tw-w-[439px] tw-max-h-[350px] tw-min-h-[50px] tw-right-0 tw-overflow-hidden tw-flex tw-flex-col"
+      :class="{
+        'tw-hidden !tw-fixed !tw-right-0 !tw-top-0 !tw-max-h-full !tw-max-w-[300px] !tw-w-full !tw-bottom-0 !tw-z-[10000] !tw-border-0':
+          $isMobile.value,
+        '!tw-flex': $isMobile.value && isDropdownVisible,
+      }"
+    >
+      <div
+        v-if="$isMobile.value"
+        class="tw-text-[#319ed4] tw-flex tw-justify-end tw-items-center tw-p-4"
+      >
+        <VcIcon
+          icon="fas fa-times"
+          size="xl"
+          @click.stop="isDropdownVisible = false"
+        ></VcIcon>
+      </div>
+      <VcContainer
+        :no-padding="true"
+        @click.stop
+      >
+        <VcCol v-if="notifications && notifications.length">
+          <div
+            v-for="item in notifications"
+            :key="`notification_${item.id}`"
+            class="tw-py-[18px] tw-px-[15px] tw-border-b tw-border-solid tw-border-b-[#e3e7ec] tw-cursor-pointer last-of-type:tw-border-b-0"
+            @click="handleClick(item)"
+          >
+            <NotificationItem
+              :notification="item"
+              :templates="templates"
+            />
+          </div>
+        </VcCol>
+        <div
+          v-else
+          class="tw-flex tw-justify-center tw-items-center tw-p-4"
+        >
+          {{ $t("COMPONENTS.ORGANISMS.VC_NOTIFICATION_DROPDOWN.EMPTY") }}
+        </div>
+      </VcContainer>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, h } from "vue";
+import NotificationItem from "./_internal/notification/notification.vue";
+import { PushNotification } from "./../../../../core/api";
+import { VcCol, VcContainer, VcIcon } from "./../../";
+import { vOnClickOutside } from "@vueuse/components";
+import { NotificationTemplateConstructor } from "./../../../../core/types";
+
+export interface Props {
+  title: string;
+  isAccent?: boolean;
+  notifications: PushNotification[];
+  templates?: NotificationTemplateConstructor[];
+  onOpen?: () => void;
+  onClick?: (notification: PushNotification) => void;
+}
+
+const props = defineProps<Props>();
+
+const isDropdownVisible = ref(false);
+
+const handleClick = async (notification: PushNotification) => {
+  isDropdownVisible.value = false;
+
+  if (props.onClick && typeof props.onClick === "function") {
+    props.onClick(notification);
+  }
+};
+
+function toggleNotificationsDrop() {
+  isDropdownVisible.value = !isDropdownVisible.value;
+  if (props.onOpen && typeof props.onOpen === "function") {
+    props.onOpen();
+  }
+}
+</script>
+
+<style lang="scss">
+:root {
+  --notification-color-error: #f14e4e;
+}
+</style>

package/ui/components/organisms/vc-notification-template/index.ts

@@ -0,0 +1,3 @@
+import _NotificationTemplate from "./vc-notification-template.vue";
+
+export const VcNotificationTemplate = _NotificationTemplate as typeof _NotificationTemplate;

package/ui/components/organisms/vc-notification-template/vc-notification-template.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="tw-flex tw-items-center">
+    <div
+      class="tw-w-[41px] tw-h-[41px] tw-rounded-full tw-text-white tw-mr-4 tw-flex tw-items-center tw-justify-center tw-shrink-0"
+      :style="{ 'background-color': color }"
+    >
+      <VcIcon
+        :icon="icon"
+        size="l"
+      ></VcIcon>
+    </div>
+    <div>
+      <p
+        class="tw-text-[color:var(--basic-black-color)] tw-text-xl tw-leading-[19px] tw-font-bold tw-m-0 tw-mb-1"
+        :class="{ 'tw-mr-4': $isDesktop.value }"
+      >
+        {{ title }}
+      </p>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { VcIcon } from "./../../";
+export interface Props {
+  color: string;
+  icon: string;
+  title: string;
+}
+
+defineProps<Props>();
+</script>

package/ui/components/organisms/vc-popup/_internal/vc-popup-error/vc-popup-error.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="tw-flex tw-flex-col tw-overflow-hidden tw-p-2">
+    <VcContainer
+      no-padding
+      style="word-break: break-word"
+    >
+      <slot></slot>
+    </VcContainer>
+  </div>
+
+  <div class="tw-flex tw-my-4 tw-mx-5">
+    <VcButton
+      class="tw-ml-auto"
+      @click="$emit('close')"
+      >OK</VcButton
+    >
+  </div>
+</template>
+
+<script setup lang="ts">
+import { VcButton } from "./../../../../";
+
+export interface Emits {
+  (event: "close"): void;
+}
+
+defineEmits<Emits>();
+</script>

package/ui/components/organisms/vc-popup/_internal/vc-popup-warning/vc-popup-warning.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="tw-flex tw-flex-col tw-overflow-hidden tw-p-2">
+    <VcContainer
+      no-padding
+      style="word-break: break-word"
+    >
+      <slot></slot>
+    </VcContainer>
+  </div>
+
+  <div class="tw-flex tw-my-4 tw-mx-5">
+    <div class="tw-ml-auto">
+      <VcButton
+        variant="onlytext"
+        class="tw-mr-5 tw-text-[#FF4A4A]"
+        @click="$emit('confirm')"
+        >Confirm</VcButton
+      >
+      <VcButton @click="$emit('close')">Cancel</VcButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { VcButton } from "./../../../../";
+
+export interface Emits {
+  (event: "close"): void;
+  (event: "confirm"): void;
+}
+
+defineEmits<Emits>();
+</script>

package/ui/components/organisms/vc-popup/vc-popup.vue

@@ -5,7 +5,10 @@
   >
     <div class="vc-popup__wrapper">
       <div class="vc-popup__inner">
-        <div class="vc-popup__header">
+        <div
+          class="vc-popup__header"
+          :class="`vc-popup__header_${type}`"
+        >
           <div class="tw-truncate tw-grow tw-basis-0">
             <slot name="title">{{ title }}</slot>
           </div>
@@ -16,10 +19,22 @@
             @click="$emit('close')"
           ></VcIcon>
         </div>
-
-        <div class="vc-popup__content tw-grow tw-basis-0 tw-h-[calc(100%-44px)]">
+        <template v-if="type === 'error'">
+          <VcPopupError @close="$emit('close')">
+            <slot></slot>
+          </VcPopupError>
+        </template>
+        <template v-if="type === 'warning'">
+          <VcPopupWarning
+            @close="$emit('close')"
+            @confirm="$emit('confirm')"
+          >
+            <slot></slot>
+          </VcPopupWarning>
+        </template>
+        <template v-else>
           <slot></slot>
-        </div>
+        </template>
       </div>
     </div>
   </div>
@@ -27,31 +42,43 @@
 
 <script lang="ts" setup>
 import { VcIcon } from "./../../";
+import VcPopupWarning from "./_internal/vc-popup-warning/vc-popup-warning.vue";
+import VcPopupError from "./_internal/vc-popup-error/vc-popup-error.vue";
+
 export interface Props {
   title?: string;
   closable?: boolean;
   variant?: "small" | "medium" | "fullscreen";
+  type?: "default" | "error" | "warning" | "success";
 }
 
 export interface Emits {
   (event: "close"): void;
+  (event: "confirm"): void;
 }
 
 withDefaults(defineProps<Props>(), {
   closable: true,
   variant: "fullscreen",
+  type: "default",
 });
 
 defineEmits<Emits>();
 </script>
 
 <style lang="scss">
+:root {
+  --popup-header-default-color: #eef5fa;
+  --popup-header-success-color: #87b563;
+  --popup-header-warning-color: #f89406;
+  --popup-header-error-color: #ef796f;
+}
 .vc-popup {
   @apply tw-fixed tw-top-0 tw-right-0 tw-bottom-0 tw-left-0 tw-z-[9999] tw-bg-[rgba(31,40,50,0.58)];
 
   &_small {
     .vc-popup__wrapper {
-      @apply tw-max-h-fit tw-items-center tw-flex tw-grow-0 tw-shrink-0 tw-basis-auto [flex-direction:inherit] tw-justify-center;
+      @apply tw-max-h-[50%] tw-items-center tw-flex tw-grow-0 tw-shrink-0 tw-basis-auto [flex-direction:inherit] tw-justify-center;
     }
 
     .vc-popup__inner {
@@ -80,7 +107,7 @@ defineEmits<Emits>();
   }
 
   &__inner {
-    @apply tw-grow tw-shrink tw-basis-auto tw-m-[40px] tw-box-border tw-bg-white tw-rounded-[5px] tw-overflow-hidden tw-relative tw-flex tw-flex-col tw-grow tw-basis-0;
+    @apply tw-shrink tw-m-[40px] tw-box-border tw-bg-white tw-rounded-[5px] tw-overflow-hidden tw-relative tw-flex tw-flex-col tw-grow tw-basis-0 tw-max-h-full tw-h-fit;
 
     .vc-app_phone & {
       @apply tw-m-0 tw-rounded-none;
@@ -88,7 +115,35 @@ defineEmits<Emits>();
   }
 
   &__header {
-    @apply tw-h-[44px] tw-px-4 tw-bg-[#eef5fa] tw-flex tw-shrink-0 tw-items-center;
+    @apply tw-h-[44px] tw-px-4 tw-bg-[var(--popup-header-default-color)] tw-flex tw-shrink-0 tw-items-center;
+
+    &_default {
+      @apply tw-bg-[var(--popup-header-default-color)];
+    }
+
+    &_error {
+      @apply tw-bg-[var(--popup-header-error-color)] tw-text-white;
+
+      .vc-popup__header-icon {
+        @apply tw-text-white;
+      }
+    }
+
+    &_warning {
+      @apply tw-bg-[var(--popup-header-warning-color)] tw-text-white;
+
+      .vc-popup__header-icon {
+        @apply tw-text-white;
+      }
+    }
+
+    &_success {
+      @apply tw-bg-[var(--popup-header-success-color)] tw-text-white;
+
+      .vc-popup__header-icon {
+        @apply tw-text-white;
+      }
+    }
 
     &-icon {
       @apply tw-cursor-pointer tw-text-[#a1c0d4];

package/ui/components/organisms/vc-table/_internal/vc-table-column-switcher/vc-table-column-switcher.vue

@@ -1,29 +1,29 @@
 <template>
   <div class="tw-relative tw-w-min tw-float-right tw-mr-4">
     <VcButton
+      ref="referenceButton"
       small
       icon="fas fa-bars"
       @click.stop="isActive = !isActive"
-      ref="referenceButton"
     ></VcButton>
     <teleport to="#app">
       <div
         v-if="isActive"
         ref="floatingDrop"
-        v-click-outside="close"
+        v-on-click-outside="close"
         :style="floatingDropStyle"
         class="tw-flex tw-flex-col tw-box-border tw-max-h-[300px] tw-h-auto tw-z-10 tw-overflow-hidden tw-absolute tw-bg-white tw-border tw-border-solid tw-border-[#e5e7eb] tw-w-max tw-right-0"
       >
         <VcContainer
-          :no-padding="true"
           v-if="items && items.length"
+          :no-padding="true"
         >
           <div class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col">
             <div
-              class="tw-flex tw-items-center tw-min-h-[30px] tw-box-border tw-rounded-[3px] tw-px-2 tw-cursor-pointer hover:tw-bg-[#eff7fc] tw-border-b"
-              :class="{ 'tw-bg-[#eff7fc]': item.visible || !('visible' in item) }"
               v-for="item in items"
               :key="item.id"
+              class="tw-flex tw-items-center tw-min-h-[30px] tw-box-border tw-rounded-[3px] tw-px-2 tw-cursor-pointer hover:tw-bg-[#eff7fc] tw-border-b"
+              :class="{ 'tw-bg-[#eff7fc]': item.visible || !('visible' in item) }"
               @click="selectItem(item)"
             >
               {{ item.title }}
@@ -38,7 +38,7 @@
 <script lang="ts" setup>
 import { ref, computed } from "vue";
 import { ITableColumns } from "./../../../../../../core/types";
-import { clickOutside as vClickOutside } from "./../../../../../../core/directives";
+import { vOnClickOutside } from "@vueuse/components";
 import { useFloating, flip, shift, autoUpdate } from "@floating-ui/vue";
 
 export interface Props {

package/ui/components/organisms/vc-table/_internal/vc-table-filter/vc-table-filter.vue

@@ -2,9 +2,9 @@
   <div class="tw-relative tw-overflow-visible">
     <!-- Filter button -->
     <div
+      ref="filterToggle"
       class="tw-rounded-[3px] tw-bg-[#43b0e6] tw-flex tw-items-center tw-px-[10px] tw-text-white tw-h-[38px] tw-box-border tw-cursor-pointer"
       @click="openPanel($isMobile.value)"
-      ref="filterToggle"
     >
       <VcIcon
         icon="fas fa-filter"
@@ -27,16 +27,16 @@
     <!-- Filter panel -->
     <teleport to="body">
       <div
+        v-if="isPanelVisible"
+        ref="filterPanel"
         :class="{
           'vc-table-filter__panel_mobile tw-fixed tw-left-0 tw-top-0 tw-w-full tw-bottom-0 tw-z-[9999] tw-bg-[rgba(128,140,153,0.6)] tw-shadow-none tw-rounded-none tw-max-h-full tw-max-w-full tw-min-w-full':
             $isMobile.value,
           'vc-table-filter__panel tw-absolute tw-max-h-[400px] tw-max-w-[800px] tw-min-w-[400px] tw-z-[100] tw-shadow-[1px_1px_11px_rgba(141,152,163,0.6)] tw-rounded-[3px] tw-overflow-hidden':
             !$isMobile.value,
         }"
-        v-if="isPanelVisible"
-        @click.self="closePanel"
-        ref="filterPanel"
         :style="filterStyle"
+        @click.self="closePanel"
       >
         <div
           class="vc-table-filter__panel-inner tw-bg-white tw-box-border tw-p-5 tw-flex tw-flex-col"
@@ -49,7 +49,7 @@
             @click="closePanel"
           />
 
-          <slot :closePanel="closePanel"></slot>
+          <slot :close-panel="closePanel"></slot>
         </div>
       </div>
     </teleport>

package/ui/components/organisms/vc-table/_internal/vc-table-mobile-item/vc-table-mobile-item.vue

@@ -11,8 +11,8 @@
   >
     <!-- Left swipe actions-->
     <div
-      class="tw-flex-shrink-0 tw-w-[80px] tw-flex tw-flex-col [justify-content:stretch] tw-bg-[#a9bfd2]"
       v-if="leftSwipeActions && leftSwipeActions.length"
+      class="tw-flex-shrink-0 tw-w-[80px] tw-flex tw-flex-col [justify-content:stretch] tw-bg-[#a9bfd2]"
     >
       <div
         class="tw-flex tw-grow tw-basis-[1] tw-flex-col tw-justify-center tw-items-center tw-text-white"
@@ -33,8 +33,8 @@
 
     <!-- Item actions -->
     <div
-      class="tw-flex-shrink-0 tw-w-[80px] tw-flex tw-flex-col [justify-content:stretch] tw-bg-[#a9bfd2]"
       v-if="rightSwipeActions && rightSwipeActions.length"
+      class="tw-flex-shrink-0 tw-w-[80px] tw-flex tw-flex-col [justify-content:stretch] tw-bg-[#a9bfd2]"
     >
       <!-- First available action -->
       <div
@@ -73,8 +73,8 @@
 
         <!-- Actions popup -->
         <teleport
-          to="body"
           v-if="isActionsPopupVisible"
+          to="body"
         >
           <div
             class="tw-absolute tw-left-0 tw-top-0 tw-right-0 tw-bottom-0 tw-bg-[rgba(107,121,135,0.15)] tw-flex tw-items-center tw-justify-center tw-z-[99]"
@@ -84,7 +84,7 @@
             >
               <div class="tw-flex tw-w-full tw-items-center">
                 <span class="tw-grow tw-text-[#2e3d4e] tw-text-[19px] tw-font-semibold tw-tracking-[-0.01em]">
-                  {{ $t("All actions") }}
+                  {{ $t("COMPONENTS.ORGANISMS.VC_TABLE.ALL_ACTIONS") }}
                 </span>
                 <VcIcon
                   class="tw-text-[#c2d7e4]"
@@ -118,27 +118,30 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup generic="T extends TableItem | string">
 import { computed, ref, watch } from "vue";
 import { IActionBuilderResult } from "./../../../../../../core/types";
 
-export interface Props {
-  item: {
-    id?: string;
-  };
-  actionBuilder?: (item: { id?: string }) => IActionBuilderResult[];
-  swipingItem?: string;
-}
-
 export interface Emits {
   (event: "swipeStart", id: string): void;
+  (event: "click"): void;
+}
+export interface TableItem {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [x: string]: any;
+  actions?: IActionBuilderResult[];
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  item: undefined,
-  actionBuilder: undefined,
-  swipingItem: null,
-});
+const props = withDefaults(
+  defineProps<{
+    item: T;
+    actionBuilder?: (item: T) => IActionBuilderResult[];
+    swipingItem?: string;
+  }>(),
+  {
+    swipingItem: null,
+  }
+);
 
 const emit = defineEmits<Emits>();
 const offsetX = ref(0);
@@ -154,7 +157,7 @@ const itemActions = ref([]);
 watch(
   () => props.swipingItem,
   (newVal) => {
-    if (newVal !== props.item.id) {
+    if (typeof props.item !== "string" && newVal !== props.item.id) {
       handleOffset();
     }
   }
@@ -183,7 +186,7 @@ function handleOffset() {
   }
 }
 
-async function touchStart(e: TouchEvent): Promise<void> {
+async function touchStart(e: TouchEvent) {
   startX.value = e.touches[0].clientX;
   startY.value = e.touches[0].clientY;
   startOffsetX.value = offsetX.value;
@@ -198,8 +201,8 @@ async function touchStart(e: TouchEvent): Promise<void> {
   }
 }
 
-function touchMove(e: TouchEvent): void {
-  emit("swipeStart", props.item.id);
+function touchMove(e: TouchEvent) {
+  if (typeof props.item !== "string") emit("swipeStart", props.item.id);
   if (itemActions.value && itemActions.value.length) {
     const deltaX = e.touches[0].clientX - startX.value;
     const deltaY = e.touches[0].clientY - startY.value;
@@ -221,7 +224,7 @@ function touchMove(e: TouchEvent): void {
   }
 }
 
-function touchEnd(): void {
+function touchEnd() {
   const absoluteOffsetX = Math.abs(offsetX.value);
   if (absoluteOffsetX < maxWidth) {
     offsetX.value = absoluteOffsetX < maxWidth / 2 ? 0 : -maxWidth;
@@ -232,7 +235,7 @@ function touchEnd(): void {
   isMoving.value = false;
 }
 
-function touchCancel(): void {
+function touchCancel() {
   const absoluteOffsetX = Math.abs(offsetX.value);
   if (absoluteOffsetX < maxWidth) {
     offsetX.value = absoluteOffsetX < maxWidth / 2 ? 0 : -maxWidth;

package/ui/components/organisms/vc-table/index.ts

@@ -1,19 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { VNode } from "vue";
 import _Table from "./vc-table.vue";
-import { ITableColumns } from "./../../../../core/types";
 
-export const VcTable = _Table as typeof _Table & {
-  new (): {
-    $slots: {
-      header: () => VNode[];
-      filters: (args: { closePanel: () => void }) => VNode[];
-      "mobile-item": (args: { item: { [x: string]: any; id: string } }) => VNode[];
-      [key: `header_${string}`]: () => VNode[];
-      [key: `item_${string}`]: (args: { item: { [x: string]: any; id: string }; cell: ITableColumns }) => VNode[];
-      notfound: () => VNode[];
-      empty: () => VNode[];
-      footer: () => VNode[];
-    };
-  };
-};
+export const VcTable = _Table as typeof _Table;

package/ui/components/organisms/vc-table/vc-table.stories.ts

@@ -6,7 +6,7 @@ import VcImage from "../../atoms/vc-image/vc-image.vue";
 
 const meta: Meta<typeof VcTable> = {
   title: "organisms/VcTable",
-  component: VcTable,
+  // component: VcTable,
 };
 
 export default meta;