cja-phoenix 1.2.39 → 1.2.41

package/dist/runtime/components/ContentTabs.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="content-tabs">
+    <div class="control-container">
+      <button
+        v-for="(tab, i) in tabs"
+        :key="i"
+        :class="{ active: activeTab == i }"
+        @click="activeTab = i;
+  $emit('tab:changed', i)"
+      >
+        {{ tab }}
+      </button>
+    </div>
+    <div class="content-container">
+      <TransitionGroup name="fade">
+        <div
+          v-for="(tab, i) in tabs"
+          v-show="activeTab == i"
+          :key="i"
+          :class="`tab-${i}`"
+        >
+          <slot :name="i" />
+        </div>
+      </TransitionGroup>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const props = defineProps({
+  defaultTab: { type: Number, required: true },
+  tabs: { type: Array, required: true }
+});
+const activeTab = ref(props.defaultTab);
+defineEmits(["tab:changed"]);
+defineExpose({ activeTab });
+</script>
+
+<style lang="scss" scoped>
+.content-tabs {
+  .control-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    margin-bottom: 30px;
+
+    button {
+      flex-grow: 1;
+      outline: none;
+      background: none;
+      padding: 0 5px 7px;
+      font-size: 16px;
+      line-height: 19px;
+      text-align: center;
+      border: none;
+      color: $extra-dark-blue;
+      cursor: pointer;
+      border-bottom: 1px solid $light-grey;
+      transition: all 0.2s ease-in-out;
+
+      &.active {
+        font-weight: 700;
+        padding: 0 5px 5px;
+        border-bottom-width: 3px;
+        color: $main-blue;
+        border-color: $main-blue;
+      }
+
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+
+  .content-container {
+    position: relative;
+    overflow: hidden;
+
+    .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/dist/runtime/components/ContentTabs.vue.d.ts

@@ -0,0 +1,23 @@
+type __VLS_Props = {
+    defaultTab: number;
+    tabs: string[];
+};
+declare var __VLS_8: number, __VLS_9: {};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_8>]?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    activeTab: import("vue").Ref<number, number>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "tab:changed": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onTab:changed"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, 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/Drawer.d.vue.ts

@@ -0,0 +1,52 @@
+type __VLS_Props = {
+    defaultActive?: boolean;
+    type?: "vertical-top" | "vertical-bottom" | "horizontal-left" | "horizontal-right";
+    maxWidth?: {
+        md?: string;
+        lg?: string;
+        xl?: string;
+    };
+    position?: {
+        left?: string;
+        top?: string;
+        right?: string;
+        bottom?: string;
+    };
+    height?: string;
+    backdrop?: boolean;
+    disableDocumentScroll?: boolean;
+    overlapMenu?: boolean;
+};
+declare var __VLS_19: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_19) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    active: import("vue").Ref<boolean, boolean>;
+    openDrawer: () => void;
+    closeDrawer: () => void;
+    toggleDrawer: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    open: (...args: any[]) => void;
+    close: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpen?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {
+    type: "vertical-top" | "vertical-bottom" | "horizontal-left" | "horizontal-right";
+    defaultActive: boolean;
+    maxWidth: {
+        md?: string;
+        lg?: string;
+        xl?: string;
+    };
+    backdrop: 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/Drawer.vue

@@ -0,0 +1,169 @@
+<template>
+  <Teleport to="body">
+    <Transition name="fade">
+      <div
+        v-if="backdrop && active"
+        class="drawer-backdrop"
+        :class="{ 'overlap-menu': overlapMenu }"
+        @click="closeDrawer"
+      />
+    </Transition>
+    <Transition name="slide">
+      <div
+        v-if="active"
+        class="drawer-container"
+        :class="[
+  `drawer-${type}`,
+  { active, 'overlap-menu': overlapMenu }
+]"
+        :style="{ height, ...position, ...cssVars }"
+      >
+        <slot />
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { toggleScroll } from "../utils/toggleScroll";
+import { computed, ref, watch } from "vue";
+const props = defineProps({
+  defaultActive: { type: Boolean, required: false, default: false },
+  type: { type: String, required: false, default: "vertical-bottom" },
+  maxWidth: { type: Object, required: false, default: () => ({
+    md: "min(calc(100% - 48px), 768px)",
+    lg: "min(calc(100% - 48px), 1024px)",
+    xl: "1024px"
+  }) },
+  position: { type: Object, required: false },
+  height: { type: String, required: false },
+  backdrop: { type: Boolean, required: false, default: false },
+  disableDocumentScroll: { type: Boolean, required: false },
+  overlapMenu: { type: Boolean, required: false }
+});
+const cssVars = computed(() => ({
+  "--md-max-width": props.maxWidth.md,
+  "--lg-max-width": props.maxWidth.lg,
+  "--xl-max-width": props.maxWidth.xl
+}));
+const active = ref(props.defaultActive);
+const emit = defineEmits(["close", "open"]);
+const openDrawer = () => {
+  active.value = true;
+  emit("open");
+};
+const closeDrawer = () => {
+  active.value = false;
+  emit("close");
+};
+const toggleDrawer = () => {
+  active.value = !active.value;
+  emit(active.value ? "open" : "close");
+};
+defineExpose({ active, openDrawer, closeDrawer, toggleDrawer });
+watch(active, () => {
+  if (props.disableDocumentScroll) {
+    toggleScroll();
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.drawer-backdrop {
+  @include backdrop;
+  z-index: $level-drawer;
+
+  &.overlap-menu {
+    z-index: $level-modal;
+  }
+
+  &.fade-enter-from,
+  &.fade-leave-to {
+    opacity: 0;
+  }
+
+  &.fade-enter-to,
+  &.fade-leave-from {
+    opacity: 1;
+  }
+}
+
+.drawer-container {
+  position: fixed;
+  width: 100%;
+  transition: all 0.6s ease-out;
+  z-index: $level-drawer;
+
+  &.overlap-menu {
+    z-index: $level-modal;
+  }
+
+  @include screen-md-min {
+    max-width: var(--md-max-width);
+  }
+
+  @include screen-lg-min {
+    max-width: var(--lg-max-width);
+  }
+
+  @include screen-xl-min {
+    max-width: var(--xl-max-width);
+  }
+
+  &.drawer-vertical-top {
+    top: 0;
+
+    &.slide-enter-from,
+    &.slide-leave-to {
+      transform: translateY(-100%);
+    }
+
+    &.slide-enter-to,
+    &.slide-leave-from {
+      transform: translateY(0);
+    }
+  }
+
+  &.drawer-vertical-bottom {
+    bottom: 0;
+
+    &.slide-enter-from,
+    &.slide-leave-to {
+      transform: translateY(100%);
+    }
+
+    &.slide-enter-to,
+    &.slide-leave-from {
+      transform: translateY(0);
+    }
+  }
+
+  &.drawer-horizontal-left {
+    left: 0;
+
+    &.slide-enter-from,
+    &.slide-leave-to {
+      transform: translateX(-100%);
+    }
+
+    &.slide-enter-to,
+    &.slide-leave-from {
+      transform: translateX(0);
+    }
+  }
+
+  &.drawer-horizontal-right {
+    right: 0;
+
+    &.slide-enter-from,
+    &.slide-leave-to {
+      transform: translateX(100%);
+    }
+
+    &.slide-enter-to,
+    &.slide-leave-from {
+      transform: translateX(0);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,52 @@
+type __VLS_Props = {
+    defaultActive?: boolean;
+    type?: "vertical-top" | "vertical-bottom" | "horizontal-left" | "horizontal-right";
+    maxWidth?: {
+        md?: string;
+        lg?: string;
+        xl?: string;
+    };
+    position?: {
+        left?: string;
+        top?: string;
+        right?: string;
+        bottom?: string;
+    };
+    height?: string;
+    backdrop?: boolean;
+    disableDocumentScroll?: boolean;
+    overlapMenu?: boolean;
+};
+declare var __VLS_19: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_19) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    active: import("vue").Ref<boolean, boolean>;
+    openDrawer: () => void;
+    closeDrawer: () => void;
+    toggleDrawer: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    open: (...args: any[]) => void;
+    close: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpen?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {
+    type: "vertical-top" | "vertical-bottom" | "horizontal-left" | "horizontal-right";
+    defaultActive: boolean;
+    maxWidth: {
+        md?: string;
+        lg?: string;
+        xl?: string;
+    };
+    backdrop: 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/FixedContainer.d.vue.ts

@@ -0,0 +1,37 @@
+type __VLS_Props = {
+    active?: boolean;
+    scrollThreshold?: number;
+    scrollLimitEl?: HTMLElement;
+    fixWidth?: boolean;
+    size?: {
+        height?: string;
+        width?: string;
+    };
+    position?: {
+        left?: string;
+        top?: string;
+        right?: string;
+        bottom?: string;
+    };
+};
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    positionFixed: import("vue").Ref<boolean, boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    active: boolean;
+    scrollThreshold: number;
+    fixWidth: 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/FixedContainer.vue

@@ -0,0 +1,95 @@
+<template>
+  <div
+    v-if="active"
+    ref="fixedContainer"
+    class="fixed-container"
+    :style="{ height: fixedContainerHeight }"
+  >
+    <div
+      ref="fixedWrapper"
+      class="fixed-wrapper"
+      :class="{ 'position-fixed': positionFixed }"
+      :style="{
+  ...size,
+  ...position,
+  transform: limitOffset,
+  maxWidth: fixedWrapperWidth
+}"
+    >
+      <slot />
+    </div>
+  </div>
+  <slot v-else />
+</template>
+
+<script setup>
+import { onMounted, onUnmounted, ref, watch } from "vue";
+const props = defineProps({
+  active: { type: Boolean, required: false, default: true },
+  scrollThreshold: { type: Number, required: false, default: 0 },
+  scrollLimitEl: { type: null, required: false },
+  fixWidth: { type: Boolean, required: false, default: true },
+  size: { type: Object, required: false },
+  position: { type: Object, required: false }
+});
+const positionFixed = ref(false);
+const fixedContainer = ref();
+const fixedContainerHeight = ref("");
+const fixedWrapper = ref();
+const fixedWrapperWidth = ref("");
+const limitOffset = ref();
+const setScrollLimit = () => {
+  if (props.scrollLimitEl) {
+    const scrollLimitValue = props.scrollLimitEl.offsetTop + props.scrollLimitEl.clientHeight - fixedWrapper.value.clientHeight + props.scrollThreshold;
+    if (window.scrollY >= scrollLimitValue) {
+      limitOffset.value = `translateY(${scrollLimitValue - window.scrollY}px)`;
+    } else {
+      limitOffset.value = null;
+    }
+  }
+};
+const fixPosition = () => {
+  if (fixedContainer.value && props.active) {
+    positionFixed.value = window.scrollY > fixedContainer.value.offsetTop + props.scrollThreshold;
+    const fixedWrapperHeight = fixedWrapper.value.clientHeight;
+    fixedContainerHeight.value = positionFixed.value ? `${fixedWrapperHeight}px` : "";
+    setScrollLimit();
+  } else {
+    positionFixed.value = false;
+    fixedContainerHeight.value = "";
+  }
+};
+const setWidth = () => {
+  fixedWrapperWidth.value = props.active && fixedContainer.value ? `${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();
+  }
+});
+onUnmounted(() => {
+  window.removeEventListener("scroll", fixPosition);
+  window.removeEventListener("resize", setWidth);
+});
+defineExpose({ positionFixed });
+</script>
+
+<style lang="scss" scoped>
+.fixed-wrapper {
+  &.position-fixed {
+    position: fixed;
+    width: 100%;
+  }
+}
+</style>

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

@@ -0,0 +1,37 @@
+type __VLS_Props = {
+    active?: boolean;
+    scrollThreshold?: number;
+    scrollLimitEl?: HTMLElement;
+    fixWidth?: boolean;
+    size?: {
+        height?: string;
+        width?: string;
+    };
+    position?: {
+        left?: string;
+        top?: string;
+        right?: string;
+        bottom?: string;
+    };
+};
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    positionFixed: import("vue").Ref<boolean, boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    active: boolean;
+    scrollThreshold: number;
+    fixWidth: 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/GridContainer.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/GridContainer.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="grid-container">
+    <slot />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.grid-container {
+  display: grid;
+  grid-template-columns: $grid-columns-sm;
+  column-gap: $grid-column-gap-sm;
+  padding-left: $grid-side-padding-sm;
+  padding-right: $grid-side-padding-sm;
+
+  @include screen-md-min {
+    grid-template-columns: $grid-columns-md;
+    column-gap: $grid-column-gap-md;
+    padding-left: $grid-side-padding-md;
+    padding-right: $grid-side-padding-md;
+  }
+
+  @include screen-lg-min {
+    grid-template-columns: $grid-columns-lg;
+    column-gap: $grid-column-gap-lg;
+    padding-left: $grid-side-padding-lg;
+    padding-right: $grid-side-padding-lg;
+  }
+
+  @include screen-xl-min {
+    padding-left: $grid-side-padding-xl;
+    padding-right: $grid-side-padding-xl;
+    max-width: 1440px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+</style>

package/dist/runtime/components/GridContainer.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;
+    };
+};

package/dist/runtime/components/GridItem.d.vue.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;
+    };
+};