design-system-next 1.15.13 → 1.15.14

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "design-system-next",
   "private": false,
-  "version": "1.15.13",
+  "version": "1.15.14",
   "main": "./dist/design-system-next.js",
   "module": "./dist/design-system-next.js",
   "repository": {

package/src/App.vue

@@ -1,65 +1,3 @@
 <template>
-  <spr-dropdown id="sample-dropdown" :menu-list="menuList" @infinite-scroll-trigger="handleInfiniteScrollTrigger">
-    <spr-input v-model="inputTextModel" label="Dropdown Label" placeholder="Select item..." readonly />
-  </spr-dropdown>
+  <div>Test Component Here</div>
 </template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-import SprDropdown from '@/components/dropdown/dropdown.vue';
-import SprInput from '@/components/input/input.vue';
-
-const inputTextModel = ref('');
-
-const menuList = ref([
-  { text: 'Apple', value: 'apple' },
-  { text: 'Banana', value: 'banana' },
-  { text: 'Cherry', value: 'cherry' },
-]);
-
-const pagination = ref({
-  totalpages: 10,
-  currentPage: 1,
-});
-
-const handleInfiniteScrollTrigger = () => {
-  if (pagination.value.currentPage === pagination.value.totalpages) return;
-
-  pagination.value.currentPage += 1;
-
-  // For testing purposes only
-  const fastFoodItems = [
-    'Burger',
-    'Pizza',
-    'Fries',
-    'Hot Dog',
-    'Sandwich',
-    'Tacos',
-    'Chicken Wings',
-    'Chicken Nuggets',
-    'Wrap',
-    'Pasta',
-    'Onion Rings',
-    'Shakes',
-    'Fried Chicken',
-    'Salad',
-    'Milkshake',
-    'Mozzarella Sticks',
-    'Popcorn Chicken',
-    'Bagel',
-    'Quesadilla',
-    'Breakfast Burrito',
-  ];
-
-  // For testing purposes only
-  for (let i = 0; i < 10; i++) {
-    const randomFood = fastFoodItems[Math.floor(Math.random() * fastFoodItems.length)];
-
-    menuList.value.push({
-      text: randomFood,
-      value: randomFood.toLowerCase().replace(' ', '_'),
-    });
-  }
-};
-</script>

package/src/components/collapsible/collapsible.vue

@@ -1,8 +1,14 @@
 <template>
   <div :class="collapsibleClasses.container">
     <slot name="trigger" :toggle-collapsible="toggleCollapsible" />
-    <Transition @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave">
-      <div v-if="modelValue" ref="contentRef" :style="contentStyle">
+    <Transition
+      :css="false"
+      @before-enter="onBeforeEnter"
+      @enter="onEnter"
+      @before-leave="onBeforeLeave"
+      @leave="onLeave"
+    >
+      <div v-show="modelValue" :style="contentStyle">
         <slot />
       </div>
     </Transition>
@@ -17,8 +23,6 @@ import { useCollapsible } from './use-collapsible';
 const props = defineProps(collapsiblePropTypes);
 const emit = defineEmits(collapsibleEmitTypes);
 
-const { collapsibleClasses, contentStyle, toggleCollapsible, onBeforeEnter, onEnter, onLeave } = useCollapsible(
-  props,
-  emit,
-);
+const { collapsibleClasses, contentStyle, toggleCollapsible, onBeforeEnter, onEnter, onBeforeLeave, onLeave } =
+  useCollapsible(props, emit);
 </script>

package/src/components/collapsible/use-collapsible.ts

@@ -1,4 +1,4 @@
-import { computed, toRefs, nextTick, SetupContext } from 'vue';
+import { computed, toRefs, nextTick, type SetupContext } from 'vue';
 import type { CollapsibleProps, CollapsibleEmitTypes } from './collapsible';
 
 export const useCollapsible = (props: CollapsibleProps, emit: SetupContext<CollapsibleEmitTypes>['emit']) => {
@@ -9,7 +9,8 @@ export const useCollapsible = (props: CollapsibleProps, emit: SetupContext<Colla
   }));
 
   const contentStyle = computed(() => ({
-    transition: `max-height ${transitionDuration.value}ms ease-in-out, opacity ${transitionDuration.value}ms ease-in-out`,
+    overflow: 'hidden',
+    transition: `max-height ${transitionDuration.value}ms ease-in-out`,
   }));
 
   const toggleCollapsible = () => {
@@ -17,25 +18,29 @@ export const useCollapsible = (props: CollapsibleProps, emit: SetupContext<Colla
   };
 
   const onBeforeEnter = (el: Element) => {
-    const element = el as HTMLElement;
-    element.style.maxHeight = '0px';
-    element.style.opacity = '0';
+    (el as HTMLElement).style.maxHeight = '0px';
   };
 
   const onEnter = async (el: Element, done: () => void) => {
     await nextTick();
     const element = el as HTMLElement;
-    element.style.transition = `max-height ${transitionDuration.value}ms ease-in-out, opacity ${transitionDuration.value}ms ease-in-out`;
     element.style.maxHeight = `${element.scrollHeight}px`;
-    element.style.opacity = '1';
-    setTimeout(done, transitionDuration.value);
+    setTimeout(() => {
+      element.style.maxHeight = ''; // clear inline style after transition
+      done();
+    }, transitionDuration.value);
+  };
+
+  const onBeforeLeave = (el: Element) => {
+    const element = el as HTMLElement;
+    element.style.maxHeight = `${element.scrollHeight}px`;
   };
 
   const onLeave = (el: Element, done: () => void) => {
     const element = el as HTMLElement;
-    element.style.transition = `max-height ${transitionDuration.value}ms ease-in-out, opacity ${transitionDuration.value}ms ease-in-out`;
+    // Force reflow
+    void element.offsetHeight;
     element.style.maxHeight = '0px';
-    element.style.opacity = '0';
     setTimeout(done, transitionDuration.value);
   };
 
@@ -45,6 +50,7 @@ export const useCollapsible = (props: CollapsibleProps, emit: SetupContext<Colla
     toggleCollapsible,
     onBeforeEnter,
     onEnter,
+    onBeforeLeave,
     onLeave,
   };
 };