cja-phoenix 0.2.5 → 0.2.7

package/src/components/structural/CollapseContainer.vue

@@ -6,18 +6,12 @@
       </div>
       <span class="m-cgg-icon--chevron-down"></span>
     </div>
-    <Transition
-      name="slide"
-      @before-enter="setHeightZero"
-      @enter="setHeightSize"
-      @after-enter="clearHeight"
-      @leave="setHeightZero"
-    >
+    <Transition name="slide" @enter="slideEnter" @leave="slideLeave">
       <div
         v-show="active"
         ref="contentContainer"
         class="content-container"
-        :style="{ height: containerHeight, overflow: containerOverflow }"
+        :style="{ height: containerHeight }"
       >
         <div ref="contentWrapper" class="content-wrapper">
           <slot name="content"></slot>
@@ -41,13 +35,18 @@ const active = ref(props.defaultActive);
 const contentContainer = ref();
 const contentWrapper = ref();
 const containerHeight = ref();
-const containerOverflow = ref();
 
-const setHeightSize = () => {
+const slideEnter = () => {
+  containerHeight.value = "0";
+
   requestAnimationFrame(() => {
     if (contentContainer.value && contentWrapper.value) {
       containerHeight.value = `${contentWrapper.value.clientHeight}px`;
 
+      setTimeout(() => {
+        containerHeight.value = "";
+      }, 200);
+
       if (active.value && props.scrollToContent) {
         setTimeout(() => {
           props.scrollToContent?.element.scrollTo({
@@ -61,31 +60,13 @@ const setHeightSize = () => {
   });
 };
 
-const setHeightZero = () => {
+const slideLeave = () => {
   containerHeight.value = `${contentWrapper.value.clientHeight}px`;
 
   requestAnimationFrame(() => {
     containerHeight.value = "0";
-    containerOverflow.value = "";
   });
 };
-
-const clearHeight = () => {
-  containerHeight.value = "";
-  containerOverflow.value = "visible";
-};
-
-onMounted(() => {
-  if (props.defaultActive) {
-    setHeightSize();
-  }
-
-  window.addEventListener("resize", setHeightSize);
-});
-
-onUnmounted(() => {
-  window.removeEventListener("resize", setHeightSize);
-});
 </script>
 
 <style lang="scss" scoped>
@@ -104,9 +85,12 @@ onUnmounted(() => {
   }
 
   .content-container {
-    box-sizing: border-box;
-    overflow: hidden;
     transition: all 0.2s linear;
+
+    &.slide-leave-active,
+    &.slide-enter-active {
+      overflow: hidden;
+    }
   }
 
   &.active {
@@ -114,5 +98,11 @@ onUnmounted(() => {
       transform: rotate(180deg);
     }
   }
+
+  &:not(.active) {
+    .content-container {
+      overflow: hidden;
+    }
+  }
 }
 </style>

package/src/components/structural/FixedContainer.vue

@@ -7,7 +7,7 @@
     <div
       class="fixed-wrapper"
       :class="{ 'position-fixed': positionFixed }"
-      :style="{ ...size, ...position }"
+      :style="{ ...size, ...position, maxWidth: fixedWrapperWidth }"
       ref="fixedWrapper"
     >
       <slot></slot>
@@ -16,11 +16,12 @@
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted, onMounted } from "vue";
+import { onUnmounted, onMounted, watch } from "vue";
 import { ref } from "vue";
 
 const props = withDefaults(
   defineProps<{
+    active?: boolean;
     scrollThreshold?: number;
     fixWidth?: boolean;
     size?: {
@@ -35,6 +36,7 @@ const props = withDefaults(
     };
   }>(),
   {
+    active: true,
     scrollThreshold: 0,
     fixWidth: true,
   }
@@ -44,29 +46,43 @@ const positionFixed = ref(false);
 const fixedContainer = ref();
 const fixedContainerHeight = ref("");
 const fixedWrapper = ref();
+const fixedWrapperWidth = ref("");
 
 const fixPosition = () => {
-  if (fixedContainer.value) {
+  if (fixedContainer.value && props.active) {
     positionFixed.value =
       window.scrollY > fixedContainer.value.offsetTop + props.scrollThreshold;
 
     fixedContainerHeight.value = positionFixed.value
       ? `${fixedWrapper.value.clientHeight}px`
       : "";
+  } else {
+    positionFixed.value = false;
+    fixedContainerHeight.value = "";
   }
 };
 
 const setWidth = () => {
-  fixedWrapper.value.style.maxWidth = `${fixedContainer.value.offsetWidth}px`;
+  fixedWrapperWidth.value = props.active
+    ? `${fixedContainer.value.offsetWidth}px`
+    : "";
 };
 
+watch(
+  () => props.active,
+  () => {
+    if (props.fixWidth) {
+      setWidth();
+    }
+  }
+);
+
 onMounted(() => {
   window.addEventListener("scroll", fixPosition);
   fixPosition();
 
   if (props.fixWidth) {
     window.addEventListener("resize", setWidth);
-    setWidth();
   }
 });
 

package/src/utils/JsonReviver.ts

@@ -0,0 +1,20 @@
+export const JsonReviver = (data: any) =>
+  JSON.parse(data, (k, v) => {
+    if (v === "true" || v === "false") {
+      return v === "true";
+    }
+
+    if (Number(v) || v === "0") {
+      return Number(v);
+    }
+
+    if (v === "undefined") {
+      return undefined;
+    }
+
+    if (v === "null") {
+      return null;
+    }
+
+    return v;
+  });

package/src/utils/index.ts

@@ -1,4 +1,5 @@
 import { generateRoutes } from "./RouteGenerator";
 import { useViewportDetector } from "./ViewportDetector";
+import { JsonReviver } from "./JsonReviver";
 
-export { generateRoutes, useViewportDetector };
+export { generateRoutes, useViewportDetector, JsonReviver };