cja-phoenix 0.6.0 → 0.6.2

package/src/components/composite/ProductDetails.vue

@@ -0,0 +1,149 @@
+<template>
+  <Teleport to="body">
+    <Transition name="details">
+      <div class="overlay" v-if="active" @click.self="closeDetails">
+        <div ref="detailsEl" class="details-container">
+          <div class="details-header">
+            <slot name="header"></slot>
+
+            <div class="btn-close" @click="closeDetails">
+              <span class="m-cgg-icon--cross2"></span>
+            </div>
+          </div>
+          <div class="details-body">
+            <slot name="body"></slot>
+          </div>
+          <div class="details-footer" v-if="$slots.footer">
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, computed } from "vue";
+
+const active = ref();
+const detailsEl = ref();
+const headerEl = ref();
+const bodyEl = ref();
+const footerEl = ref();
+
+watch(active, () => {
+  if (active.value) {
+    document.body.style.overflow = "hidden";
+    document.documentElement.style.overflow = "hidden";
+  } else {
+    document.body.style.overflow = "";
+    document.documentElement.style.overflow = "";
+  }
+});
+
+const openDetails = () => {
+  active.value = true;
+};
+
+const closeDetails = () => {
+  active.value = false;
+};
+
+defineExpose({ openDetails, closeDetails });
+</script>
+
+<style scoped lang="scss">
+@import "../../assets/shadows.scss";
+
+.overlay {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 100;
+
+  @media screen and (min-width: 992px) {
+    background-color: rgba(0, 0, 0, 0.6);
+  }
+
+  .details-container {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: 0;
+    right: 0;
+    background-color: #fff;
+    height: 100%;
+    transition: all 0.3s linear;
+
+    @media screen and (min-width: 992px) {
+      width: 620px;
+    }
+
+    .details-header {
+      display: flex;
+      justify-content: space-between;
+      gap: 15px;
+      align-items: center;
+      background-color: #fff;
+      padding: 15px;
+      box-shadow: $box-shadow-m;
+
+      @media screen and (min-width: 992px) {
+        padding: 20px 50px;
+      }
+
+      .btn-close {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-left: auto;
+        width: 20px;
+        height: 20px;
+        font-size: 20px;
+        line-height: 20px;
+        cursor: pointer;
+      }
+    }
+
+    .details-body {
+      flex-grow: 1;
+      position: relative;
+      overflow-y: auto;
+      padding: 15px 15px 30px;
+
+      @media screen and (min-width: 992px) {
+        padding: 20px 50px 50px;
+      }
+    }
+
+    .details-footer {
+      padding: 15px;
+      box-shadow: $box-shadow-m;
+
+      @media screen and (min-width: 992px) {
+        padding: 20px 50px;
+      }
+    }
+  }
+}
+
+.details-enter-to .details-container,
+.details-leave-from .details-container {
+  transform: translateY(0);
+
+  @media screen and (min-width: 992px) {
+    transform: translateX(0%);
+  }
+}
+
+.details-enter-from .details-container,
+.details-leave-to .details-container {
+  transform: translateY(100%);
+
+  @media screen and (min-width: 992px) {
+    transform: translateX(100%);
+  }
+}
+</style>

package/src/components/composite/ResultsLayout.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="results-container">
+    <FixedContainer
+      v-if="!activeViewport.lg"
+      :size="{ width: '100%' }"
+      :scrollThreshold="-headerHeight"
+      :position="{ left: '0', top: `${headerHeight}px` }"
+    >
+      <slot name="mobile-controls"></slot>
+    </FixedContainer>
+    <GridContainer class="results-grid">
+      <GridItem :size-lg="3" v-if="activeViewport.lg">
+        <div class="back-container">
+          <button @click="$emit('btn:previous')">
+            <span class="m-cgg-icon--chevron-left"></span>
+            <span>Voltar</span>
+          </button>
+        </div>
+        <FixedContainer
+          ref="fixedContainer"
+          :scrollThreshold="-headerHeight - 16"
+          :position="{ top: `${headerHeight + 16}px`, bottom: '16px' }"
+        >
+          <div
+            ref="sidebarContainer"
+            class="sidebar-container"
+            :class="{ 'position-fixed': fixedContainer?.positionFixed }"
+            :style="{
+              maxHeight: !fixedContainer?.positionFixed ? sidebarMaxHeight : '',
+            }"
+          >
+            <div class="sidebar-body">
+              <slot name="sidebar"></slot>
+            </div>
+          </div>
+        </FixedContainer>
+      </GridItem>
+      <GridItem :size-sm="2" :size-md="4" :size-lg="9">
+        <slot name="content"></slot>
+      </GridItem>
+    </GridContainer>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import GridContainer from "../structural/GridContainer.vue";
+import GridItem from "../structural/GridItem.vue";
+import { ref } from "vue";
+import { onMounted } from "vue";
+import { onUnmounted } from "vue";
+import FixedContainer from "../structural/FixedContainer.vue";
+import { useViewportDetector } from "../../utils";
+
+const fixedContainer = ref();
+const sidebarContainer = ref();
+const sidebarMaxHeight = ref("0px");
+
+const headerHeight = ref(0);
+
+const { activeViewport } = useViewportDetector();
+
+const setSidebarHeight = () => {
+  if (sidebarContainer.value)
+    sidebarMaxHeight.value = `${
+      window.innerHeight -
+      sidebarContainer.value.offsetTop -
+      16 +
+      window.scrollY
+    }px`;
+};
+
+const setHeaderHeight = () => {
+  headerHeight.value =
+    (
+      document.querySelector(
+        `#page-header ${
+          activeViewport.value.lg
+            ? ".main-header"
+            : ".content-container.macro-steps"
+        }`
+      ) as HTMLElement
+    )?.offsetHeight || 0;
+};
+
+onMounted(() => {
+  setHeaderHeight();
+  window.addEventListener("resize", setHeaderHeight);
+
+  if (activeViewport.value.lg) {
+    setSidebarHeight();
+    window.addEventListener("scroll", setSidebarHeight);
+  }
+});
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", setSidebarHeight);
+  window.removeEventListener("resize", setHeaderHeight);
+});
+
+defineEmits(["btn:previous"]);
+</script>
+
+<style lang="scss" scoped>
+.results-container {
+  .results-grid {
+    padding-top: 24px;
+    padding-bottom: 16px;
+  }
+
+  .back-container {
+    margin-bottom: 24px;
+
+    button {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      font-weight: 700;
+      font-size: 15px;
+      line-height: 29px;
+      cursor: pointer;
+      border: none;
+      padding: 0;
+      background: none;
+
+      &:focus {
+        outline: none;
+      }
+
+      [class*="m-cgg-icon-"] {
+        font-size: 11px;
+        font-weight: 700;
+      }
+    }
+  }
+}
+
+.sidebar-container {
+  display: flex;
+  flex-direction: column;
+  padding: 24px 16px;
+  background: #ffffff;
+  border: 1px solid #dedede;
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
+  border-radius: 16px;
+
+  &.position-fixed {
+    max-height: 100%;
+  }
+
+  .sidebar-body {
+    overflow-y: auto;
+    overflow-x: hidden;
+    flex-grow: 1;
+  }
+}
+</style>

package/src/components/composite/ResultsSidebar.vue

@@ -0,0 +1,74 @@
+<template>
+  <FixedContainer
+    ref="fixedContainer"
+    :scrollThreshold="-headerHeight - 16"
+    :position="{ top: `${headerHeight + 16}px`, bottom: '16px' }"
+  >
+    <div
+      ref="sidebarContainer"
+      class="sidebar-container"
+      :class="{ 'position-fixed': fixedContainer?.positionFixed }"
+      :style="{
+        maxHeight: !fixedContainer?.positionFixed ? sidebarMaxHeight : '',
+      }"
+    >
+      <div class="sidebar-body">
+        <slot></slot>
+      </div>
+    </div>
+  </FixedContainer>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { onMounted } from "vue";
+import { onUnmounted } from "vue";
+import FixedContainer from "../structural/FixedContainer.vue";
+
+const fixedContainer = ref();
+const sidebarContainer = ref();
+const sidebarMaxHeight = ref();
+
+const headerHeight = ref(0);
+
+const setSidebarHeight = () => {
+  sidebarMaxHeight.value = `${
+    window.innerHeight - sidebarContainer.value.offsetTop - 16 + window.scrollY
+  }px`;
+
+  headerHeight.value = (
+    document.querySelector("#page-header .main-header") as HTMLElement
+  ).offsetHeight;
+};
+
+onMounted(() => {
+  setSidebarHeight();
+  window.addEventListener("scroll", setSidebarHeight);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", setSidebarHeight);
+});
+</script>
+
+<style lang="scss" scoped>
+.sidebar-container {
+  display: flex;
+  flex-direction: column;
+  padding: 24px 16px;
+  background: #ffffff;
+  border: 1px solid #dedede;
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
+  border-radius: 16px;
+
+  &.position-fixed {
+    max-height: 100%;
+  }
+
+  .sidebar-body {
+    overflow-y: auto;
+    overflow-x: hidden;
+    flex-grow: 1;
+  }
+}
+</style>

package/src/components/forms/CheckboxInput.vue

@@ -0,0 +1,103 @@
+<template>
+  <InputContainer :layout="'vertical'">
+    <div class="input-container-checkbox">
+      <label>
+        <input
+          type="checkbox"
+          :checked="value"
+          @change="(event) => $emit('update:modelValue', (<HTMLInputElement>event.target).checked)"
+        />
+        <div class="checkbox-icon m-cgg-icon--check2"></div>
+        <div class="text-container" v-html="label"></div>
+      </label>
+    </div>
+
+    <InputError :error="errorMessage" v-if="errorMessage && errorDisplay" />
+  </InputContainer>
+</template>
+
+<script lang="ts" setup>
+import { useField } from "vee-validate";
+import InputError from "./structure/InputError.vue";
+import InputContainer from "./structure/InputContainer.vue";
+
+const props = withDefaults(
+  defineProps<{
+    label: string;
+    modelValue: HTMLInputElement["checked"] | undefined;
+    errorDisplay?: boolean;
+    validation?: any;
+  }>(),
+  {
+    errorDisplay: true,
+  }
+);
+
+const { value, errorMessage, meta, validate } = useField(
+  "input",
+  props.validation,
+  { initialValue: props.modelValue }
+);
+
+defineExpose({ errorMessage, meta, validate });
+
+defineEmits(["update:modelValue"]);
+</script>
+
+<style lang="scss" scoped>
+.input-container-checkbox {
+  label {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    gap: 15px;
+    cursor: pointer;
+    margin: 0;
+    font-weight: 400;
+
+    input {
+      display: none;
+    }
+
+    .checkbox-icon {
+      position: relative;
+
+      &:after {
+        content: "";
+        display: block;
+        width: 22px;
+        height: 22px;
+        border-radius: 3px;
+        border: 1px solid #cccbc8;
+        color: #77aa43;
+      }
+
+      &:before {
+        position: absolute;
+        opacity: 0;
+        font-size: 20px;
+      }
+    }
+
+    input:checked + .checkbox-icon:before {
+      opacity: 1;
+    }
+
+    .text-container {
+      font-size: 12px;
+      line-height: 14px;
+      user-select: none;
+
+      :deep(a) {
+        color: inherit;
+        font-weight: 700;
+        text-decoration: underline;
+
+        &:hover {
+          text-decoration: none;
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/forms/CurrencyInput.vue

@@ -0,0 +1,126 @@
+<template>
+  <InputContainer v-bind="{ layout }">
+    <InputTitle v-bind="{ title, tooltip, size, disabled }" v-if="title" />
+
+    <div
+      class="input-wrapper"
+      :class="{
+        error: errorMessage,
+      }"
+    >
+      <input
+        :class="[`size-${size}`]"
+        type="text"
+        :id="id"
+        :placeholder="placeholder && placeholder"
+        :disabled="disabled"
+        ref="inputRef"
+      />
+
+      <span class="input-currency">
+        {{ currency }}
+      </span>
+    </div>
+
+    <InputError :error="errorMessage" v-if="errorMessage && errorDisplay" />
+  </InputContainer>
+</template>
+
+<script lang="ts" setup>
+import { useField } from "vee-validate";
+import { InputHTMLAttributes, watch } from "vue";
+import { CurrencyDisplay, useCurrencyInput } from "vue-currency-input";
+import InputContainer from "./structure/InputContainer.vue";
+import InputTitle from "./structure/InputTitle.vue";
+import InputError from "./structure/InputError.vue";
+
+const props = withDefaults(
+  defineProps<{
+    title?: string;
+    tooltip?: string;
+    placeholder?: InputHTMLAttributes["placeholder"];
+    layout?: "vertical" | "horizontal";
+    size?: "sm" | "md" | "lg";
+    validation?: any;
+    errorDisplay?: boolean;
+    modelValue: InputHTMLAttributes["value"];
+    id?: InputHTMLAttributes["id"];
+    disabled?: InputHTMLAttributes["disabled"];
+    currency?: string;
+  }>(),
+  {
+    layout: "vertical",
+    size: "md",
+    currency: "€",
+    errorDisplay: true,
+  }
+);
+
+const { inputRef, setValue: setCurrency } = useCurrencyInput({
+  currency: "EUR",
+  locale: "de-DE",
+  hideCurrencySymbolOnFocus: false,
+  hideGroupingSeparatorOnFocus: false,
+  currencyDisplay: CurrencyDisplay.hidden,
+});
+
+const { errorMessage, meta, validate, setValue } = useField(
+  "input",
+  props.validation,
+  { initialValue: props.modelValue }
+);
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    setValue(newVal);
+    setCurrency(newVal);
+  }
+);
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+defineExpose({ errorMessage, meta, validate });
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/forms.scss";
+
+.input-wrapper {
+  position: relative;
+
+  input {
+    @include input-template;
+    padding-right: 24px;
+
+    &:focus {
+      + .input-currency {
+        color: #0d2745;
+      }
+    }
+
+    &:disabled {
+      + .input-currency {
+        color: $input-disabled-color;
+      }
+    }
+  }
+
+  &.error {
+    input {
+      @include input-error;
+    }
+  }
+
+  .input-currency {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 8px;
+    line-height: 16px;
+    font-size: 16px;
+    color: #9fabbc;
+    transition: color 0.1s ease-in;
+  }
+}
+</style>