@antify/ui-module 1.7.3 → 1.8.2

package/src/runtime/components/tabs/AntTabs.vue

@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import AntTabItem from './AntTabItem.vue';
-import {type TabItem} from './__types/AntTabItem.types';
-import {useVModel} from '@vueuse/core';
-import {computed} from 'vue';
-
-const emits = defineEmits(['update:modelValue']);
-const props = withDefaults(defineProps<{
-  modelValue?: string;
-  tabItems?: TabItem[];
-  expanded?: boolean;
-}>(), {
-  expanded: false,
-});
-
-const currentActive = useVModel(props, 'modelValue', emits);
-const containerClasses = computed(() => ({
-  'flex items-stretch bg-neutral-300 gap-px transition-all h-full': true,
-  'w-fit': !props.expanded,
-  'w-full': props.expanded,
-}));
-
-function clickTab(tabItem: TabItem) {
-  if (tabItem.clickHandler) {
-    tabItem.clickHandler();
-  }
-
-  currentActive.value = tabItem.id;
-}
-</script>
-
-<template>
-  <div :class="containerClasses">
-    <slot>
-      <AntTabItem
-        v-for="(tabItem, index) in tabItems"
-        :key="`tab-item-${index}`"
-        v-bind="tabItem"
-        @click="clickTab(tabItem)"
-        :active="currentActive === tabItem.id"
-        :expanded="expanded"
-      >
-        <slot name="content" v-bind="{item: tabItem, isActive: currentActive === tabItem.id}"></slot>
-      </AntTabItem>
-    </slot>
-  </div>
-</template>

package/src/runtime/components/transitions/AntTransitionCollapseHeight.vue

@@ -1,96 +0,0 @@
-<script setup lang="ts">
-/**
- * It is not possible to smoothly animate height or max-height with CSS transitions not using a fixed value
- * like 'height: 1rem';
- *
- * This component does it via javascript.
- */
-
-// @ts-nocheck
-// TODO:: fix typescript errors
-/**
- * @param {HTMLElement} element
- */
-function beforeEnter(element) {
-  requestAnimationFrame(() => {
-    if (!element.style.height) {
-      element.style.height = '0px';
-    }
-
-    element.style.display = '';
-    // element.style.display = null;
-  });
-}
-
-/**
- * @param {HTMLElement} element
- */
-function enter(element) {
-  requestAnimationFrame(() => {
-    requestAnimationFrame(() => {
-      element.style.height = `${element.scrollHeight}px`;
-    });
-  });
-}
-
-/**
- * @param {HTMLElement} element
- */
-function afterEnter(element) {
-  element.style.height = '';
-  // element.style.height = null;
-}
-
-/**
- * @param {HTMLElement} element
- */
-function beforeLeave(element) {
-  requestAnimationFrame(() => {
-    if (!element.style.height) {
-      element.style.height = `${element.offsetHeight}px`;
-    }
-  });
-}
-
-/**
- * @param {HTMLElement} element
- */
-function leave(element) {
-  requestAnimationFrame(() => {
-    requestAnimationFrame(() => {
-      element.style.height = '0px';
-    });
-  });
-}
-
-/**
- * @param {HTMLElement} element
- */
-function afterLeave(element) {
-  element.style.height = '';
-  // element.style.height = null;
-}
-</script>
-
-<template>
-  <transition
-      enter-active-class="enter-active"
-      leave-active-class="leave-active"
-      @before-enter="beforeEnter"
-      @enter="enter"
-      @after-enter="afterEnter"
-      @before-leave="beforeLeave"
-      @leave="leave"
-      @after-leave="afterLeave"
-  >
-    <slot/>
-  </transition>
-</template>
-
-<style scoped>
-.enter-active,
-.leave-active {
-  overflow: hidden;
-  transition: height .4s ease-in-out;
-}
-</style>