cja-phoenix 0.1.1 → 0.2.2

package/src/components/structural/CjaButton.vue

@@ -39,7 +39,7 @@ withDefaults(
   font-weight: 700;
   cursor: pointer;
   transition: all 0.2s ease-in-out;
-  border-width: 2px;
+  border-width: 1px;
   border-style: solid;
   border-color: transparent;
   background: none;
@@ -56,21 +56,21 @@ withDefaults(
     font-size: 18px;
     line-height: 20px;
     padding: 6px 12px;
-    border-radius: 16px;
+    border-radius: 8px;
   }
 
   &.btn-size-md {
     font-size: 18px;
     line-height: 20px;
     padding: 10px 16px;
-    border-radius: 16px;
+    border-radius: 8px;
   }
 
   &.btn-size-lg {
     font-size: 20px;
     line-height: 20px;
     padding: 16px;
-    border-radius: 16px;
+    border-radius: 8px;
   }
 
   &.btn-primary {

package/src/components/structural/GridContainer.vue

@@ -0,0 +1,64 @@
+<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/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: 768px) and (max-width: 1023px) {
+    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;
+    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,45 @@
+<template>
+  <div
+    :class="[
+      `grid-item-sm-${sizeSm}`,
+      `grid-item-md-${sizeMd}`,
+      `grid-item-lg-${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>
+@for $sm from 1 to 5 {
+  .grid-item-sm-#{$sm} {
+    @media screen and (max-width: 767px) {
+      grid-column: span #{$sm};
+    }
+  }
+}
+
+@for $md from 1 to 5 {
+  .grid-item-md-#{$md} {
+    @media screen and (min-width: 768px) and (max-width: 1023px) {
+      grid-column: span #{$md};
+    }
+  }
+}
+
+@for $lg from 1 to 13 {
+  .grid-item-lg-#{$lg} {
+    @media screen and (min-width: 1024px) {
+      grid-column: span #{$lg};
+    }
+  }
+}
+</style>

package/src/utils/ViewportDetector.ts

@@ -0,0 +1,30 @@
+import { Ref, onMounted, onUnmounted, ref } from "vue";
+
+export const useViewportDetector = (
+  breakpoints: { [index: string]: number } = {
+    xs: 0,
+    s: 420,
+    m: 768,
+    lg: 992,
+    xl: 1200,
+  }
+) => {
+  const activeViewport: Ref = ref({});
+
+  const setViewports = () => {
+    for (const key in breakpoints) {
+      activeViewport.value[key] = window.innerWidth >= breakpoints[key];
+    }
+  };
+
+  onMounted(() => {
+    window.addEventListener("resize", setViewports);
+    setViewports();
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener("resize", setViewports);
+  });
+
+  return { activeViewport };
+};

package/src/utils/index.ts

@@ -1,3 +1,4 @@
 import { generateRoutes } from "./RouteGenerator";
+import { useViewportDetector } from "./ViewportDetector";
 
-export { generateRoutes };
+export { generateRoutes, useViewportDetector };

package/dist/types/components/misc/ComponentB.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
-export default _default;

package/src/components/misc/ComponentA.vue

@@ -1,17 +0,0 @@
-<template>
-  <div class="component-a-container">
-    Hello {{ msg }}! <span class="icon-heart"></span>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  msg: string;
-}>();
-</script>
-
-<style lang="scss" scoped>
-.icon-heart {
-  color: tomato;
-}
-</style>

package/src/components/misc/ComponentB.vue

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-const count = ref(0);
-</script>
-
-<template>
-  <div class="flex align-content-center flex-wrap counter">
-    <label class="flex align-items-center justify-content-center"
-      >Counter:</label
-    >
-    <button
-      icon="pi pi-plus"
-      class="p-button-sm flex align-items-center justify-content-center"
-      @click="count++"
-    ></button>
-    <span class="flex align-items-center justify-content-center count">{{
-      count
-    }}</span>
-    <button
-      icon="pi pi-minus"
-      class="p-button-sm flex align-items-center justify-content-center"
-      @click="count--"
-    ></button>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.counter {
-  label {
-    padding-right: 10px;
-    font-weight: bold;
-  }
-  .count {
-    padding: 0 10px;
-  }
-}
-</style>