cja-phoenix 1.2.39 → 1.2.41

package/dist/runtime/components/GridItem.vue

@@ -0,0 +1,93 @@
+<template>
+  <div
+    :class="{
+  [`grid-item-sm-${sizeSm}`]: sizeSm,
+  [`grid-item-sm-offset-${offsetSm}`]: offsetSm,
+  [`grid-item-md-${sizeMd}`]: sizeMd,
+  [`grid-item-md-offset-${offsetMd}`]: offsetMd,
+  [`grid-item-lg-${sizeLg}`]: sizeLg,
+  [`grid-item-lg-offset-${offsetLg}`]: offsetLg,
+  [`grid-item-xl-${sizeXl}`]: sizeXl,
+  [`grid-item-xl-offset-${offsetXl}`]: offsetXl
+}"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  sizeSm: { type: Number, required: false, default: 4 },
+  offsetSm: { type: Number, required: false },
+  sizeMd: { type: Number, required: false, default: 4 },
+  offsetMd: { type: Number, required: false },
+  sizeLg: { type: Number, required: false, default: 12 },
+  offsetLg: { type: Number, required: false },
+  sizeXl: { type: Number, required: false, default: 12 },
+  offsetXl: { type: Number, required: false }
+});
+</script>
+
+<style lang="scss" scoped>
+@for $i from 1 to 5 {
+  .grid-item-sm-#{$i} {
+    @include screen-sm-max {
+      grid-column-end: span #{$i};
+    }
+  }
+}
+
+@for $i from 1 to 4 {
+  .grid-item-sm-offset-#{$i} {
+    grid-column-start: #{$i + 1};
+  }
+}
+
+@for $i from 1 to 5 {
+  .grid-item-md-#{$i} {
+    @include screen-md-only {
+      grid-column-end: span #{$i};
+    }
+  }
+}
+
+@for $i from 1 to 4 {
+  .grid-item-md-offset-#{$i} {
+    @include screen-md-only {
+      grid-column-start: #{$i + 1};
+    }
+  }
+}
+
+@for $i from 1 to 13 {
+  .grid-item-lg-#{$i} {
+    @include screen-lg-only {
+      grid-column-end: span #{$i};
+    }
+  }
+}
+
+@for $i from 1 to 12 {
+  .grid-item-lg-offset-#{$i} {
+    @include screen-lg-only {
+      grid-column-start: #{$i + 1};
+    }
+  }
+}
+
+@for $i from 1 to 13 {
+  .grid-item-xl-#{$i} {
+    @include screen-xl-min {
+      grid-column-end: span #{$i};
+    }
+  }
+}
+
+@for $i from 1 to 12 {
+  .grid-item-xl-offset-#{$i} {
+    @include screen-xl-min {
+      grid-column-start: #{$i + 1};
+    }
+  }
+}
+</style>

package/dist/runtime/components/GridItem.vue.d.ts

@@ -0,0 +1,29 @@
+import type { GridItemOffsetDesktop, GridItemOffsetMobile, GridItemSizeDesktop, GridItemSizeMobile } from "../types/Grid.js";
+type __VLS_Props = {
+    sizeSm?: GridItemSizeMobile;
+    offsetSm?: GridItemOffsetMobile;
+    sizeMd?: GridItemSizeMobile;
+    offsetMd?: GridItemOffsetMobile;
+    sizeLg?: GridItemSizeDesktop;
+    offsetLg?: GridItemOffsetDesktop;
+    sizeXl?: GridItemSizeDesktop;
+    offsetXl?: GridItemOffsetDesktop;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    sizeSm: GridItemSizeMobile;
+    sizeMd: GridItemSizeMobile;
+    sizeLg: GridItemSizeDesktop;
+    sizeXl: GridItemSizeDesktop;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/InfoMessage.d.vue.ts

@@ -0,0 +1,28 @@
+type __VLS_Props = {
+    toggle?: boolean;
+    color: "blue" | "green" | "red" | "yellow" | "dark-white";
+    border?: boolean;
+};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_1) => any;
+} & {
+    title?: (props: typeof __VLS_3) => any;
+} & {
+    description?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "btn:close": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onBtn:close"?: ((...args: any[]) => any) | undefined;
+}>, {
+    border: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/InfoMessage.vue

@@ -0,0 +1,141 @@
+<template>
+  <div
+    v-if="showMessage && toggle || !toggle"
+    class="info-message"
+    :class="[
+  `color-${color}`,
+  { 'has-icon': $slots.icon, 'has-toggle': toggle, 'has-border': border }
+]"
+  >
+    <slot name="icon" />
+    <div class="text-container">
+      <div v-if="$slots.title" class="title">
+        <slot name="title" />
+      </div>
+      <div v-if="$slots.description" class="description">
+        <slot name="description" />
+      </div>
+    </div>
+    <div v-if="toggle" class="btn-container">
+      <button
+        class="m-cgg-icon--cross"
+        aria-label="Fechar"
+        @click="showMessage = false;
+  $emit('btn:close')"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+defineProps({
+  toggle: { type: Boolean, required: false },
+  color: { type: String, required: true },
+  border: { type: Boolean, required: false, default: true }
+});
+const showMessage = ref(true);
+defineEmits(["btn:close"]);
+</script>
+
+<style lang="scss" scoped>
+.info-message {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+  padding: 8px 16px;
+  border-radius: 8px;
+
+  @include screen-md-min {
+    padding: 12px 16px;
+  }
+
+  &.has-border {
+    border-width: 1px;
+    border-style: solid;
+  }
+
+  &.has-icon {
+    grid-template-columns: auto 1fr;
+  }
+
+  &.has-toggle {
+    grid-template-columns: 1fr 18px;
+
+    &.has-icon {
+      grid-template-columns: auto 1fr 18px;
+    }
+  }
+
+  &.color-green {
+    background-color: $alert-bg-green;
+
+    &.has-border {
+      border-color: $alert-green;
+    }
+  }
+
+  &.color-blue {
+    background-color: $extra-light-blue;
+
+    &.has-border {
+      border-color: $main-blue;
+    }
+  }
+
+  &.color-red {
+    background-color: $alert-bg-red;
+
+    &.has-border {
+      border-color: $alert-red;
+    }
+  }
+
+  &.color-yellow {
+    background-color: $alert-bg-yellow;
+
+    &.has-border {
+      border-color: $alert-yellow;
+    }
+  }
+
+  &.color-dark-white {
+    background-color: $dark-white;
+
+    &.has-border {
+      border-color: $light-grey;
+    }
+  }
+
+  .text-container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    .title {
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 20px;
+      margin: 0;
+    }
+
+    .description {
+      font-size: 13px;
+      line-height: 17px;
+      margin: 0;
+    }
+  }
+
+  .btn-container {
+    button {
+      padding: 0;
+      border: none;
+      font-size: 12px;
+      line-height: 18px;
+      color: inherit;
+      cursor: pointer;
+      background: none;
+    }
+  }
+}
+</style>

package/dist/runtime/components/InfoMessage.vue.d.ts

@@ -0,0 +1,28 @@
+type __VLS_Props = {
+    toggle?: boolean;
+    color: "blue" | "green" | "red" | "yellow" | "dark-white";
+    border?: boolean;
+};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_1) => any;
+} & {
+    title?: (props: typeof __VLS_3) => any;
+} & {
+    description?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "btn:close": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onBtn:close"?: ((...args: any[]) => any) | undefined;
+}>, {
+    border: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/LoadingSpinner.d.vue.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    size?: number;
+    border?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: number;
+    border: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/LoadingSpinner.vue

@@ -0,0 +1,39 @@
+<template>
+  <div
+    class="spinner"
+    :style="{
+  width: `${size}px`,
+  height: `${size}px`,
+  borderWidth: `${border}px`
+}"
+  />
+</template>
+
+<script setup>
+defineProps({
+  size: { type: Number, required: false, default: 80 },
+  border: { type: Number, required: false, default: 7 }
+});
+</script>
+
+<style lang="scss" scoped>
+.spinner {
+  width: 80px;
+  height: 80px;
+  border: 7px solid $bright-green;
+  border-top: 7px solid rgba(255, 255, 255, 0);
+  border-radius: 50%;
+  animation: spin 1s infinite;
+  animation-timing-function: linear;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/dist/runtime/components/LoadingSpinner.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    size?: number;
+    border?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: number;
+    border: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Modal.d.vue.ts

@@ -0,0 +1,39 @@
+type __VLS_Props = {
+    maxWidth?: {
+        md?: string;
+        lg?: string;
+        xl?: string;
+    };
+    closeEnabled?: boolean;
+    forceMobileFull?: boolean;
+};
+declare var __VLS_13: {}, __VLS_15: {}, __VLS_17: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_13) => any;
+} & {
+    body?: (props: typeof __VLS_15) => any;
+} & {
+    footer?: (props: typeof __VLS_17) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    active: import("vue").Ref<boolean, boolean>;
+    openModal: () => void;
+    closeModal: () => void;
+    toggleModal: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "modal:open": (...args: any[]) => void;
+    "modal:close": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onModal:open"?: ((...args: any[]) => any) | undefined;
+    "onModal:close"?: ((...args: any[]) => any) | undefined;
+}>, {
+    closeEnabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Modal.vue

@@ -0,0 +1,195 @@
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div
+        v-if="active"
+        class="modal-backdrop"
+        @click.self="closeEnabled && closeModal()"
+      >
+        <div
+          ref="modalContainer"
+          class="modal-container"
+          :class="[
+  $attrs.class,
+  {
+    'mobile-full': mobileFull
+  }
+]"
+          :style="{ ...cssVars }"
+        >
+          <div class="modal-header" :class="{ 'has-title': $slots.header }">
+            <div class="modal-header-wrapper">
+              <slot name="header" />
+            </div>
+            <button
+              v-if="closeEnabled"
+              type="button"
+              class="btn-close m-cgg-icon--cross"
+              aria-label="Fechar"
+              @click="closeModal"
+            />
+          </div>
+          <div class="modal-body">
+            <slot name="body" />
+          </div>
+          <div v-if="$slots.footer" class="modal-footer">
+            <slot name="footer" />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { toggleScroll } from "../utils/toggleScroll";
+import { computed, nextTick, ref, watch } from "vue";
+const props = defineProps({
+  maxWidth: { type: Object, required: false },
+  closeEnabled: { type: Boolean, required: false, default: true },
+  forceMobileFull: { type: Boolean, required: false }
+});
+const active = ref(false);
+const mobileFull = ref(false);
+const modalContainer = ref();
+const cssVars = computed(() => ({
+  "--md-max-width": props.maxWidth?.md,
+  "--lg-max-width": props.maxWidth?.lg,
+  "--xl-max-width": props.maxWidth?.xl
+}));
+const emit = defineEmits(["modal:open", "modal:close"]);
+watch(() => active.value, toggleScroll);
+const openModal = () => {
+  active.value = true;
+  emit("modal:open");
+};
+const closeModal = () => {
+  active.value = false;
+  emit("modal:close");
+};
+const toggleModal = () => {
+  active.value = !active.value;
+  emit(`modal:${active.value ? "open" : "close"}`);
+};
+watch(active, () => {
+  nextTick(() => {
+    mobileFull.value = active.value ? props.forceMobileFull || modalContainer.value.clientHeight >= window.innerHeight * 0.75 : false;
+  });
+});
+defineExpose({ active, openModal, closeModal, toggleModal });
+</script>
+
+<style lang="scss" scoped>
+.modal-backdrop {
+  @include backdrop;
+  display: flex;
+  align-items: flex-end;
+  z-index: $level-modal;
+
+  @include screen-md-min {
+    justify-content: center;
+    align-items: center;
+    padding: 24px;
+  }
+
+  .modal-container {
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    background: $white;
+    padding: 16px 24px 24px;
+    border-radius: 16px 16px 0 0;
+    width: 100%;
+    max-height: 100%;
+    transition: 0.4s ease-in-out;
+
+    @include screen-md-min {
+      border-radius: 16px;
+      max-width: min(100%, var(--md-max-width, 768px));
+    }
+
+    @include screen-lg-min {
+      max-width: min(100%, var(--lg-max-width, var(--md-max-width, 1024px)));
+    }
+
+    @include screen-xl-min {
+      max-width: min(
+        100%,
+        var(--xl-max-width, var(--lg-max-width, var(--md-max-width, 1024px)))
+      );
+    }
+
+    &.mobile-full {
+      @include screen-sm-max {
+        height: 100%;
+        border-radius: 0;
+        transition: none;
+      }
+    }
+
+    .modal-header {
+      display: grid;
+      align-items: center;
+      grid-template-columns: 1fr 36px;
+      margin-bottom: 12px;
+
+      &.has-title {
+        padding-bottom: 8px;
+        border-bottom: 1px solid $disabled-grey;
+      }
+
+      .modal-header-wrapper {
+        font-size: 16px;
+        line-height: 20px;
+        font-weight: 700;
+      }
+
+      .btn-close {
+        background: none;
+        border: none;
+        padding: 0;
+        outline: 0;
+        height: 36px;
+        width: 36px;
+        cursor: pointer;
+        font-size: 12px;
+        line-height: 20px;
+        font-weight: 700;
+
+        &:focus {
+          outline: 0;
+        }
+      }
+    }
+
+    .modal-body {
+      overflow: hidden auto;
+    }
+
+    .modal-footer {
+      padding-top: 24px;
+    }
+  }
+}
+
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-enter-from .modal-container {
+  @include screen-sm-max {
+    transform: translateY(100%);
+  }
+}
+
+.modal-enter-to,
+.modal-leave-from {
+  opacity: 1;
+}
+
+.modal-enter-to .modal-container {
+  @include screen-sm-max {
+    transform: translateY(0);
+  }
+}
+</style>

package/dist/runtime/components/Modal.vue.d.ts

@@ -0,0 +1,39 @@
+type __VLS_Props = {
+    maxWidth?: {
+        md?: string;
+        lg?: string;
+        xl?: string;
+    };
+    closeEnabled?: boolean;
+    forceMobileFull?: boolean;
+};
+declare var __VLS_13: {}, __VLS_15: {}, __VLS_17: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_13) => any;
+} & {
+    body?: (props: typeof __VLS_15) => any;
+} & {
+    footer?: (props: typeof __VLS_17) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    active: import("vue").Ref<boolean, boolean>;
+    openModal: () => void;
+    closeModal: () => void;
+    toggleModal: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "modal:open": (...args: any[]) => void;
+    "modal:close": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onModal:open"?: ((...args: any[]) => any) | undefined;
+    "onModal:close"?: ((...args: any[]) => any) | undefined;
+}>, {
+    closeEnabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Scaffold.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Scaffold.vue

@@ -0,0 +1,3 @@
+<template>
+  <slot />
+</template>

package/dist/runtime/components/Scaffold.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};