@vc-shell/framework 1.0.69 → 1.0.71

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

@@ -12,20 +12,20 @@
     <template v-if="(defaultImages && defaultImages.length) || !disabled">
       <div class="tw-flex tw-flex-wrap tw-relative">
         <div
-          class="tw-flex tw-flex-wrap tw-w-full"
           ref="galleryRef"
+          class="tw-flex tw-flex-wrap tw-w-full"
         >
           <VcGalleryItem
-            class="tw-m-2 vc-gallery__item"
             v-for="(image, i) in defaultImages"
             :key="`image_${i}`"
+            class="tw-m-2 vc-gallery__item"
             :image="image"
             :readonly="disabled"
+            :actions="itemActions"
+            :disable-drag="disableDrag"
             @preview="onPreviewClick(i)"
             @edit="$emit('item:edit', $event)"
             @remove="$emit('item:remove', $event)"
-            :actions="itemActions"
-            :disableDrag="disableDrag"
             @mousedown="onItemMouseDown"
             @dragstart="onItemDragStart($event, image)"
             @dragover="onItemDragOver"
@@ -36,11 +36,11 @@
             v-if="!disabled && !hideAfterUpload"
             class="tw-m-2"
             :icon="uploadIcon"
-            @upload="onUpload"
             :variant="variant"
             :multiple="multiple"
             :rules="rules"
             :name="name"
+            @upload="onUpload"
           ></VcFileUpload>
         </div>
         <div
@@ -55,22 +55,16 @@
     >
       <VcHint>Gallery is empty</VcHint>
     </div>
-
-    <VcGalleryPreview
-      v-if="preview"
-      :images="images"
-      :index="previewImageIndex"
-      @close="preview = false"
-    ></VcGalleryPreview>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import { IImage } from "../../../../core/types";
 import { VcLabel, VcFileUpload, VcHint } from "./../../";
 import VcGalleryItem from "./_internal/vc-gallery-item/vc-gallery-item.vue";
 import VcGalleryPreview from "./_internal/vc-gallery-preview/vc-gallery-preview.vue";
+import { usePopup } from "./../../../../shared/components/popup-handler/composables/usePopup";
 
 export interface Props {
   images?: IImage[];
@@ -116,7 +110,6 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
-const preview = ref(false);
 const previewImageIndex = ref<number>();
 
 const defaultImages = ref<IImage[]>([]);
@@ -126,6 +119,16 @@ const galleryRef = ref<HTMLElement>();
 const reorderGalleryRef = ref<HTMLElement>();
 const dropPosition = ref<number>();
 
+const currentIndex = computed(() => previewImageIndex.value);
+
+const { open } = usePopup({
+  component: VcGalleryPreview,
+  props: {
+    images: props.images,
+    index: currentIndex,
+  },
+});
+
 watch(
   () => props.images,
   (newVal) => {
@@ -141,8 +144,9 @@ const onUpload = (files: FileList) => {
 };
 
 const onPreviewClick = (index: number) => {
-  preview.value = true;
   previewImageIndex.value = index;
+
+  open();
 };
 
 const updateOrder = () => {
@@ -171,19 +175,19 @@ function onItemDragStart(event: DragEvent, item: IImage) {
 }
 
 function onItemDragOver(event: DragEvent) {
-  let dropItem = findParentElement(event.target as HTMLElement);
+  const dropItem = findParentElement(event.target as HTMLElement);
 
   if (!props.disableDrag && !props.disabled && draggedItem.value && dropItem) {
     event.preventDefault();
 
-    let containerOffset = galleryRef.value.getBoundingClientRect();
-    let dropItemOffset = dropItem.getBoundingClientRect();
+    const containerOffset = galleryRef.value.getBoundingClientRect();
+    const dropItemOffset = dropItem.getBoundingClientRect();
 
     if (draggedElement.value !== dropItem) {
-      let elementStyle = getComputedStyle(dropItem);
+      const elementStyle = getComputedStyle(dropItem);
       const dropItemOffsetWidth = dropItem.offsetWidth + parseFloat(elementStyle.marginLeft);
-      let targetLeft = dropItemOffset.left - containerOffset.left;
-      let columnCenter = dropItemOffset.left + dropItemOffsetWidth / 2;
+      const targetLeft = dropItemOffset.left - containerOffset.left;
+      const columnCenter = dropItemOffset.left + dropItemOffsetWidth / 2;
 
       reorderGalleryRef.value.style.top = dropItemOffset.top - containerOffset.top + "px";
       reorderGalleryRef.value.style.height = dropItem.offsetHeight + "px";
@@ -213,8 +217,8 @@ function onItemDrop(event: DragEvent, item: IImage) {
   event.preventDefault();
 
   if (draggedItem.value) {
-    let dragIndex = defaultImages.value.indexOf(draggedItem.value);
-    let dropIndex = defaultImages.value.indexOf(item);
+    const dragIndex = defaultImages.value.indexOf(draggedItem.value);
+    const dropIndex = defaultImages.value.indexOf(item);
 
     let allowDrop = dragIndex !== dropIndex;
 

package/ui/components/organisms/vc-login-form/vc-login-form.stories.ts

@@ -39,7 +39,7 @@ export const Primary: Story = {
           "
     >
       <span class="tw-grow tw-basis-0"></span>
-      <vc-button variant="primary">
+      <vc-button >
         Submit
       </vc-button>
     </div>

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

@@ -0,0 +1,63 @@
+<template>
+  <div class="tw-flex">
+    <VcRow class="tw-justify-between tw-grow tw-basis-0">
+      <template v-if="currentTemplate">
+        <notificationTemplateRenderer />
+      </template>
+      <template v-else>
+        <VcNotificationTemplate
+          :color="notificationStyle.color"
+          :title="notification.title"
+          :icon="notificationStyle.icon"
+        >
+          <VcHint
+            v-if="notification.description"
+            class="tw-mb-1"
+            >{{ notification.description }}</VcHint
+          >
+        </VcNotificationTemplate>
+      </template>
+      <div class="tw-flex tw-shrink-0">
+        <p class="tw-text-s tw-leading-[18px] tw-text-[#8e8e8e] tw-m-0">
+          {{ pushTime }}
+        </p>
+      </div>
+    </VcRow>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, h } from "vue";
+import moment from "moment";
+import { PushNotification } from "./../../../../../../core/api";
+import { VcRow, VcNotificationTemplate } from "./../../../../";
+import { NotificationTemplateConstructor } from "./../../../../../../core/types";
+
+export interface Props {
+  notification: PushNotification;
+  templates: NotificationTemplateConstructor[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  notification: undefined,
+});
+
+const locale = window.navigator.language;
+
+const notificationStyle = computed(() => ({
+  color: "#A9BCCD",
+  icon: "fas fa-info",
+}));
+
+const pushTime = computed(() => {
+  return moment(props.notification.created).locale(locale).format("L LT");
+});
+
+const currentTemplate = computed(() => props.templates?.find((x) => x?.notifyType === props.notification.notifyType));
+
+function notificationTemplateRenderer() {
+  const notificationTemplate = currentTemplate.value;
+
+  return notificationTemplate && h(notificationTemplate, { notification: props.notification });
+}
+</script>

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

@@ -0,0 +1,3 @@
+import _NotificationDropdown from "./vc-notification-dropdown.vue";
+
+export const VcNotificationDropdown = _NotificationDropdown as typeof _NotificationDropdown;

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
+        text
+        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-else-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,22 +49,15 @@
             @click="closePanel"
           />
 
-          <slot :closePanel="closePanel"></slot>
+          <slot :close-panel="closePanel"></slot>
         </div>
       </div>
     </teleport>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, watch, computed, nextTick } from "vue";
-
-export default defineComponent({
-  inheritAttrs: false,
-});
-</script>
-
 <script lang="ts" setup>
+import { ref, watch, computed, nextTick } from "vue";
 import { offset, computePosition, ComputePositionReturn } from "@floating-ui/vue";
 
 export interface Props {
@@ -73,6 +66,10 @@ export interface Props {
   parentExpanded?: boolean;
 }
 
+defineOptions({
+  inheritAttrs: false,
+});
+
 const props = withDefaults(defineProps<Props>(), {
   title: undefined,
   counter: 0,