cja-phoenix 0.0.13 → 0.0.15

package/src/components/forms/TextInput.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="form-group">
-    <div class="input-title" v-if="title">{{ title }}</div>
+  <div class="form-group" :class="[layout]">
+    <InputTitle v-bind="{ title, tooltip }" v-if="title" />
 
     <div
       class="input-container"
@@ -9,7 +9,8 @@
       }"
     >
       <input
-        v-maska="mask"
+        v-maska
+        :data-maska="mask"
         :id="id"
         :inputmode="inputmode"
         :placeholder="placeholder && placeholder"
@@ -42,24 +43,31 @@ import {
   onMounted,
   ref,
 } from "vue";
+import { vMaska } from "maska";
+import InputTitle from "./InputTitle.vue";
 
 const props = withDefaults(
   defineProps<{
-    mask?: string;
-    placeholder?: InputHTMLAttributes["placeholder"];
-    icon?: string;
     title?: string;
-    inputmode?: HTMLAttributes["inputmode"];
-    type?: InputHTMLAttributes["type"];
+    tooltip?: string;
+    placeholder?: InputHTMLAttributes["placeholder"];
+    layout?: "vertical" | "horizontal";
     error?: string;
-    modelValue: InputHTMLAttributes["value"];
-    autocomplete?: InputHTMLAttributes["autocomplete"];
-    id?: InputHTMLAttributes["id"];
     validation?: any;
     errorDisplay?: boolean;
+    modelValue: InputHTMLAttributes["value"];
+    id?: InputHTMLAttributes["id"];
+    disabled?: InputHTMLAttributes["disabled"];
+    mask?: string;
+    icon?: string;
+    inputmode?: InputHTMLAttributes["inputmode"];
+    type?: InputHTMLAttributes["type"];
+    autocomplete?: InputHTMLAttributes["autocomplete"];
     suffix?: string;
+    prefix?: string;
   }>(),
   {
+    layout: "vertical",
     type: "text",
     errorDisplay: true,
   }

package/src/components/index.ts

@@ -1,11 +1,16 @@
 import Modal from "./structural/Modal.vue";
 import CjaButton from "./structural/CjaButton.vue";
 import LoadingSpinner from "./structural/LoadingSpinner.vue";
+import ContentTabs from "./structural/ContentTabs.vue";
 import Scaffold from "./structural/Scaffold.vue";
+
 import TextInput from "./forms/TextInput.vue";
 import PhoneInput from "./forms/PhoneInput.vue";
 import CheckboxInput from "./forms/CheckboxInput.vue";
 import SelectInput from "./forms/SelectInput.vue";
+import FileInput from "./forms/FileInput.vue";
+import InputToggle from "./forms/InputToggle.vue";
+import CollapseContainer from "./structural/CollapseContainer.vue";
 
 import ProductDetails from "./composite/ProductDetails.vue";
 
@@ -19,4 +24,8 @@ export {
   LoadingSpinner,
   Scaffold,
   ProductDetails,
+  InputToggle,
+  FileInput,
+  ContentTabs,
+  CollapseContainer,
 };

package/src/components/structural/CollapseContainer.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="collapse-container">
+    <div
+      class="collapse-header"
+      @click="active = !active"
+      :class="{ active: active }"
+    >
+      <div class="header-wrapper">
+        <slot name="header"></slot>
+      </div>
+      <span class="m-cgg-icon--chevron-down"></span>
+    </div>
+    <Transition
+      name="slide"
+      @before-enter="setHeightZero"
+      @enter="setHeightSize"
+      @leave="setHeightZero"
+    >
+      <div
+        v-show="active"
+        ref="contentContainer"
+        class="content-container"
+        :class="{ active: active }"
+      >
+        <div ref="contentWrapper" class="content-wrapper">
+          <slot name="content"></slot>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from "vue";
+
+const props = defineProps<{
+  defaultActive?: boolean;
+  scrollToContent?: {
+    element: HTMLElement;
+  };
+}>();
+
+const active = ref(props.defaultActive);
+const contentContainer = ref();
+const contentWrapper = ref();
+
+const setHeightSize = () => {
+  requestAnimationFrame(() => {
+    if (contentContainer.value && contentWrapper.value) {
+      contentContainer.value.style.height = `${contentWrapper.value.clientHeight}px`;
+
+      if (active.value && props.scrollToContent) {
+        setTimeout(() => {
+          props.scrollToContent?.element.scrollTo({
+            top: contentWrapper.value.offsetTop,
+            left: 0,
+            behavior: "smooth",
+          });
+        }, 250);
+      }
+
+      setTimeout(() => {
+        contentContainer.value.style.height = "";
+        contentContainer.value.style.overflow = "visible";
+      }, 200);
+    }
+  });
+};
+
+const setHeightZero = () => {
+  contentContainer.value.style.height = `${contentWrapper.value.clientHeight}px`;
+
+  requestAnimationFrame(() => {
+    contentContainer.value.style.height = "0";
+    contentContainer.value.style.overflow = "";
+  });
+};
+
+onMounted(() => {
+  if (props.defaultActive) {
+    setHeightSize();
+  }
+
+  window.addEventListener("resize", setHeightSize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", setHeightSize);
+});
+</script>
+
+<style lang="scss" scoped>
+.collapse-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  user-select: none;
+
+  > span {
+    transition: all 0.2s linear;
+  }
+
+  &.active > span {
+    transform: rotate(180deg);
+  }
+}
+
+.content-container {
+  box-sizing: border-box;
+  overflow: hidden;
+  transition: all 0.2s linear;
+}
+</style>

package/src/components/structural/ContentTabs.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="content-tabs">
+    <div class="control-container">
+      <button
+        v-for="tab in tabs"
+        :key="tab.control"
+        :class="{ active: activeTab == tab.control }"
+        @click="
+          activeTab = tab.control;
+          $emit('tab:changed');
+        "
+      >
+        {{ tab.label }}
+      </button>
+    </div>
+    <div class="content-container">
+      <TransitionGroup name="fade">
+        <div
+          v-for="tab in tabs"
+          :key="tab.control"
+          v-show="activeTab == tab.control"
+          :class="`tab-${tab.control}`"
+        >
+          <slot :name="tab.control"></slot>
+        </div>
+      </TransitionGroup>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { Tab } from "../../types/Tab";
+
+const props = defineProps<{
+  default: string;
+  tabs: Tab[];
+}>();
+const activeTab = ref(props.default);
+
+const emit = defineEmits(["tab:changed"]);
+</script>
+
+<style lang="scss" scoped>
+.content-tabs {
+  .control-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    margin-bottom: 30px;
+
+    button {
+      flex-grow: 1;
+      flex-shrink: 0;
+      outline: none;
+      background: none;
+      font-weight: 700;
+      padding: 0 0 6px;
+      font-size: 16px;
+      line-height: 19px;
+      text-align: center;
+      border: none;
+      color: #979290;
+      cursor: pointer;
+      border-bottom: 1px solid #979290;
+
+      &.active {
+        color: #076b9c;
+        border-bottom: 3px solid #076b9c;
+      }
+
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+
+  .content-container {
+    position: relative;
+
+    .fade-leave-active {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      transition: all 0.3s ease-in-out;
+    }
+
+    .fade-enter-active {
+      transition: all 0.3s ease-in-out 0.3s;
+    }
+
+    .fade-enter-from,
+    .fade-leave-to {
+      opacity: 0;
+    }
+
+    .fade-enter-to,
+    .fade-leave-from {
+      opacity: 1;
+    }
+  }
+}
+</style>

package/src/index.ts

@@ -1,6 +1,5 @@
 import { App } from "vue";
 import * as components from "./components";
-import Maska from "maska";
 import VueTippy from "vue-tippy";
 
 function install(app: App) {
@@ -9,7 +8,6 @@ function install(app: App) {
     app.component(key, components[key]);
   }
 
-  app.use(Maska);
   app.use(VueTippy, {
     defaultProps: { theme: "light-border", allowHTML: true },
   });

package/src/types/Tab.ts

@@ -0,0 +1,4 @@
+export interface Tab {
+  label: string;
+  control: string;
+}