cja-phoenix 0.6.0 → 0.6.2

package/src/components/structural/GridContainer.vue

@@ -0,0 +1,70 @@
+<template>
+  <div :class="[`grid-container-${size}`]">
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    size?: 1 | 2 | 3;
+  }>(),
+  {
+    size: 1,
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/breakpoints.scss";
+@import "../../assets/grid.scss";
+
+.grid-container-1,
+.grid-container-2,
+.grid-container-3 {
+  display: grid;
+  column-gap: $grid-column-gap-sm;
+  padding-left: $grid-side-padding-sm;
+  padding-right: $grid-side-padding-sm;
+
+  @media screen and (min-width: $break-md-min) and (max-width: $break-md-max) {
+    grid-template-columns: $grid-columns-md;
+    column-gap: $grid-column-gap-md;
+    padding-left: $grid-side-padding-md;
+    padding-right: $grid-side-padding-md;
+  }
+
+  @media screen and (min-width: 1024px) {
+    grid-template-columns: $grid-columns-lg;
+    column-gap: $grid-column-gap-lg;
+    padding-left: $grid-side-padding-lg;
+    padding-right: $grid-side-padding-lg;
+  }
+
+  @media screen and (min-width: 1200px) {
+    padding-left: $grid-side-padding-xl;
+    padding-right: $grid-side-padding-xl;
+    max-width: 1440px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.grid-container-1 {
+  @media screen and (max-width: 767px) {
+    grid-template-columns: $grid-columns-sm-1;
+  }
+}
+
+.grid-container-2 {
+  @media screen and (max-width: 767px) {
+    grid-template-columns: $grid-columns-sm-2;
+  }
+}
+
+.grid-container-3 {
+  @media screen and (max-width: 767px) {
+    grid-template-columns: $grid-columns-sm-3;
+  }
+}
+</style>

package/src/components/structural/GridItem.vue

@@ -0,0 +1,47 @@
+<template>
+  <div
+    :class="{
+      [`grid-item-sm-${sizeSm}`]: sizeSm,
+      [`grid-item-md-${sizeMd}`]: sizeMd,
+      [`grid-item-lg-${sizeLg}`]: sizeLg,
+    }"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  sizeSm?: 1 | 2 | 3 | 4;
+  sizeMd?: 1 | 2 | 3 | 4;
+  sizeLg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+}>();
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/breakpoints.scss";
+
+@for $i from 0 to 4 {
+  .grid-item-sm-#{$i + 1} {
+    @media screen and (max-width: 767px) {
+      grid-column: span #{$i + 1};
+    }
+  }
+}
+
+@for $i from 0 to 4 {
+  .grid-item-md-#{$i + 1} {
+    @media screen and (min-width: $break-md-min) and (max-width: $break-md-max) {
+      grid-column: span #{$i + 1};
+    }
+  }
+}
+
+@for $i from 0 to 12 {
+  .grid-item-lg-#{$i + 1} {
+    @media screen and (min-width: 1024px) {
+      grid-column: span #{$i + 1};
+    }
+  }
+}
+</style>

package/src/components/structural/InfoMessage.vue

@@ -0,0 +1,105 @@
+<template>
+  <div
+    class="info-message"
+    :class="[
+      `color-${color}`,
+      { 'has-icon': $slots.icon, 'has-toggle': toggle },
+    ]"
+  >
+    <slot name="icon"></slot>
+    <div class="text-container">
+      <h4 v-if="title">{{ title }}</h4>
+      <p v-if="description" v-html="description"></p>
+    </div>
+    <div class="btn-container" v-if="toggle">
+      <button class="m-cgg-icon--cross2" @click="$emit('btn:close')"></button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useViewportDetector } from "../../utils";
+
+defineProps<{
+  title?: string;
+  description?: string;
+  toggle?: boolean;
+  color: "blue" | "green";
+}>();
+
+const { activeViewport } = useViewportDetector();
+
+defineEmits(["btn:close"]);
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/breakpoints.scss";
+
+.info-message {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+  padding: 8px 16px;
+  border: 2px solid #000;
+  border-radius: 16px;
+
+  @media screen and (min-width: $break-md-min) {
+    padding: 16px 24px;
+  }
+
+  &.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: #f8faf5;
+    border-color: #c4dab1;
+    color: #56924b;
+  }
+
+  &.color-blue {
+    background-color: #f4f9fc;
+    border-color: #076b9c;
+    color: #076b9c;
+  }
+
+  .text-container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    h4 {
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 20px;
+      margin: 0;
+    }
+
+    p {
+      font-size: 13px;
+      line-height: 17px;
+      margin: 0;
+    }
+  }
+
+  .btn-container {
+    button {
+      padding: 0;
+      border: none;
+      font-size: 18px;
+      line-height: 18px;
+      color: inherit;
+      cursor: pointer;
+      background: none;
+    }
+  }
+}
+</style>

package/src/components/structural/LoadingSpinner.vue

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

package/src/components/structural/Modal.vue

@@ -0,0 +1,209 @@
+<template>
+  <Teleport to="body">
+    <Transition name="fade">
+      <div v-show="active" class="modal-backdrop" :style="{ ...cssVars }">
+        <div class="modal-overlay" @click.self="closeModal">
+          <div class="modal-container" ref="modalContainer">
+            <div class="modal-header" :class="{ 'has-title': $slots.header }">
+              <div class="modal-header-wrapper">
+                <slot name="header"></slot>
+              </div>
+              <button
+                type="button"
+                class="btn-close m-cgg-icon--cross"
+                aria-label="Close"
+                @click="closeModal"
+              ></button>
+            </div>
+            <div class="modal-body">
+              <slot name="body"></slot>
+            </div>
+            <div class="modal-footer" v-if="$slots.footer">
+              <slot name="footer"></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    maxWidth?: {
+      md?: string;
+      lg?: string;
+      xl?: string;
+    };
+  }>(),
+  {
+    maxWidth: () => ({
+      md: "min(calc(100% - 48px), 768px)",
+      lg: "min(calc(100% - 48px), 1024px)",
+      xl: "1024px",
+    }),
+  }
+);
+
+const active = 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(["close"]);
+
+watch(
+  () => active.value,
+  (active) => {
+    document.querySelectorAll("html, body").forEach((el) => {
+      (el as HTMLElement).style.overflow = active ? "hidden" : "";
+    });
+  }
+);
+
+const openModal = () => {
+  active.value = true;
+};
+
+const closeModal = () => {
+  active.value = false;
+  emit("close");
+};
+
+const toggleModal = () => {
+  active.value = !active.value;
+
+  if (!active.value) {
+    emit("close");
+  }
+};
+
+defineExpose({ active, openModal, closeModal, toggleModal });
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/breakpoints.scss";
+@import "../../assets/backdrop.scss";
+
+.modal-backdrop {
+  @include backdrop;
+}
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 13;
+}
+
+.modal-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: #ffffff;
+  padding: 20px;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  @media screen and (min-width: $break-md-min) {
+    top: 50%;
+    left: 50%;
+    transform: translateY(-50%) translateX(-50%);
+    max-width: var(--md-max-width);
+    max-height: calc(100% - 48px);
+    border-radius: 8px;
+    padding: 20px 40px;
+    height: auto;
+  }
+
+  @media screen and (min-width: $break-lg-min) {
+    max-width: var(--lg-max-width);
+  }
+
+  @media screen and (min-width: $break-xl-min) {
+    max-width: var(--xl-max-width);
+  }
+
+  .modal-header {
+    display: grid;
+    grid-template-columns: 1fr 20px;
+    padding: 0;
+
+    &:before,
+    &:after {
+      content: none;
+    }
+
+    &.has-title {
+      padding: 0 0 8px 0;
+      border-bottom: 1px solid #dedede;
+    }
+
+    .modal-header-wrapper {
+      font-size: 16px;
+      line-height: 20px;
+      font-weight: 700;
+    }
+
+    .btn-close {
+      background: none;
+      border: none;
+      padding: 0;
+      outline: 0;
+      height: 20px;
+      width: 20px;
+      cursor: pointer;
+      z-index: 2;
+      font-size: 16px;
+      line-height: 20px;
+
+      &:focus {
+        outline: 0;
+      }
+    }
+  }
+
+  .modal-body {
+    font-size: 14px;
+    line-height: 18px;
+    overflow-y: auto;
+    flex-grow: 1;
+    height: auto;
+  }
+
+  .modal-footer {
+    border-top: 1px solid #dedede;
+    padding: 8px 0 0;
+
+    :deep(.button-container) {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      gap: 8px;
+    }
+  }
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
+</style>

package/src/components/structural/Scaffold.vue

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

package/src/constants/MyConstants.ts

@@ -0,0 +1 @@
+export const MAGIC_NUM = 100

package/src/constants/index.ts

@@ -0,0 +1,5 @@
+import * as MyConstants from './MyConstants'
+
+export {
+  MyConstants
+}

package/src/env.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="vite/client" />
+/// <reference types="@histoire/plugin-vue/components" />
+
+export {};
+
+declare module "*.vue" {
+  import { DefineComponent } from "vue";
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

package/src/index.ts

@@ -0,0 +1,31 @@
+import { App } from "vue";
+import * as components from "./components";
+import VueTippy from "vue-tippy";
+import "./assets/main.scss";
+import "./assets/iconia/style.scss";
+
+type Options = {
+  apiURL: string;
+  imageURL: string;
+  providerImageURL: string;
+};
+
+const install = (app: App, options: Options) => {
+  app.config.globalProperties.apiURL = options.apiURL;
+  app.config.globalProperties.imageURL = options.imageURL;
+  app.config.globalProperties.providerImageURL = options.providerImageURL;
+
+  for (const key in components) {
+    app.component(key, components[key]);
+  }
+
+  app.use(VueTippy, {
+    defaultProps: { theme: "light-border", allowHTML: true },
+  });
+};
+
+export default { install };
+export * from "./types";
+export * from "./components";
+export * from "./constants";
+export * from "./utils";