cja-phoenix 0.7.39 → 0.7.40

package/src/components/forms/CurrencyInput.vue

@@ -81,7 +81,7 @@ const maskValue: MaskaDetail = reactive({
   completed: false,
 });
 
-const { value, errorMessage, meta, validate, handleBlur } = useField(
+const { errorMessage, meta, validate, handleBlur } = useField(
   "input",
   props.validation,
   {
@@ -107,27 +107,15 @@ defineExpose({ errorMessage, meta, validate });
       }
     }
 
-    &.size-sm {
-      padding-right: $sm-padding-h * 2 + 10;
+    @each $size-name, $size in $input-sizes {
+      &.size-#{$size-name} {
+        padding-right: map.get($size, padding-h) * 2 + 10;
 
-      + .input-currency {
-        right: $sm-padding-h;
-      }
-    }
-
-    &.size-md {
-      padding-right: $md-padding-h * 2 + 10;
-
-      + .input-currency {
-        right: $md-padding-h;
-      }
-    }
-
-    &.size-lg {
-      padding-right: $lg-padding-h * 2 + 10;
-
-      + .input-currency {
-        right: $lg-padding-h;
+        + .input-currency {
+          right: map.get($size, padding-h);
+          font-size: map.get($size, font-size);
+          line-height: map.get($size, font-size);
+        }
       }
     }
   }
@@ -142,8 +130,8 @@ defineExpose({ errorMessage, meta, validate });
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    line-height: 12px;
-    font-size: 12px;
+    font-weight: 700;
+    pointer-events: none;
   }
 }
 </style>

package/src/components/forms/SelectionTiles.vue

@@ -44,12 +44,13 @@ import { useField } from "vee-validate";
 import { TileOption } from "../../types/TileOption";
 import InputError from "./structure/InputError.vue";
 import InputContainer from "./structure/InputContainer.vue";
+import { Icon } from "@/types/Icon";
 
 const props = withDefaults(
   defineProps<{
     options: TileOption[] | undefined;
     modelValue: any;
-    icon?: string;
+    icon?: Icon;
     layout?: "list" | "grid" | "image";
     multiselect?: boolean;
     error?: string;

package/src/components/forms/TextInput.vue

@@ -9,14 +9,27 @@
       }"
     >
       <input
-        :class="[`size-${size}`]"
+        :class="[`size-${size}`, `icon-${iconPosition}`, { 'has-icon': icon }]"
         v-bind="{ id, inputmode, placeholder, type, disabled, autocomplete }"
         v-model="model"
         @blur="handleBlur($event, validationMode == 'blur')"
         ref="inputEl"
+        :style="inputStyles"
+      />
+
+      <div
+        class="input-icon"
+        :class="[icon, `icon-${iconPosition}`, `size-${size}`]"
+        ref="iconEl"
+        v-if="icon"
       />
 
-      <div class="input-suffix" ref="suffixEl" v-if="suffix">
+      <div
+        class="input-suffix"
+        :class="[`size-${size}`]"
+        ref="suffixEl"
+        v-if="suffix && iconPosition != 'right'"
+      >
         {{ suffix }}
       </div>
     </div>
@@ -28,9 +41,11 @@
 <script lang="ts" setup>
 import { useField } from "vee-validate";
 import { InputHTMLAttributes, onMounted, ref } from "vue";
+import { Icon } from "@/types/Icon";
 import InputTitle from "./structure/InputTitle.vue";
 import InputError from "./structure/InputError.vue";
 import InputContainer from "./structure/InputContainer.vue";
+import { computed } from "vue";
 
 const props = withDefaults(
   defineProps<{
@@ -48,6 +63,8 @@ const props = withDefaults(
     type?: InputHTMLAttributes["type"];
     autocomplete?: InputHTMLAttributes["autocomplete"];
     suffix?: string;
+    icon?: Icon;
+    iconPosition?: "left" | "right";
   }>(),
   {
     layout: "vertical",
@@ -55,6 +72,7 @@ const props = withDefaults(
     type: "text",
     validationMode: "change",
     errorDisplay: true,
+    iconPosition: "left",
   }
 );
 
@@ -72,16 +90,27 @@ const { errorMessage, meta, handleBlur, validate } = useField(
 );
 const inputEl = ref();
 const suffixEl = ref();
-
-onMounted(() => {
-  if (props.suffix) {
+const iconEl = ref();
+const inputStyles = computed(() => {
+  if (
+    window &&
+    props.suffix &&
+    inputEl.value &&
+    suffixEl.value &&
+    !(props.icon && props.iconPosition == "right")
+  ) {
     const inputPadding = parseInt(
-      window.getComputedStyle(inputEl.value).getPropertyValue("padding-right")
+      window.getComputedStyle(inputEl.value).getPropertyValue("padding-left")
     );
+
     const suffixWidth = suffixEl.value.getBoundingClientRect().width;
 
-    inputEl.value.style.paddingRight = `${suffixWidth + inputPadding * 2}px`;
+    return {
+      paddingRight: `${inputPadding * 2 + suffixWidth}px`,
+    };
   }
+
+  return {};
 });
 
 defineExpose({ errorMessage, meta, validate });
@@ -106,21 +135,15 @@ defineExpose({ errorMessage, meta, validate });
       }
     }
 
-    &.size-sm {
-      + .input-suffix {
-        right: $sm-padding-h;
-      }
-    }
-
-    &.size-md {
-      + .input-suffix {
-        right: $md-padding-h;
-      }
-    }
-
-    &.size-lg {
-      + .input-suffix {
-        right: $lg-padding-h;
+    &.has-icon {
+      @each $position in ("left", "right") {
+        &.icon-#{$position} {
+          @each $size-name, $size in $input-sizes {
+            &.size-#{$size-name} {
+              padding-#{$position}: map.get($size, padding-h) * 2 + 16px;
+            }
+          }
+        }
       }
     }
   }
@@ -135,8 +158,36 @@ defineExpose({ errorMessage, meta, validate });
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    line-height: 12px;
-    font-size: 12px;
+    font-weight: 700;
+    pointer-events: none;
+
+    @each $size-name, $size in $input-sizes {
+      &.size-#{$size-name} {
+        right: map.get($size, padding-h);
+        font-size: map.get($size, font-size);
+        line-height: map.get($size, font-size);
+      }
+    }
+  }
+
+  .input-icon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+
+    @each $size-name, $size in $input-sizes {
+      &.size-#{$size-name} {
+        font-size: map.get($size, font-size);
+        line-height: map.get($size, font-size);
+
+        @each $position in ("left", "right") {
+          &.icon-#{$position} {
+            #{$position}: map.get($size, padding-h);
+          }
+        }
+      }
+    }
   }
 }
 </style>

package/src/components/structural/CjaButton.vue

@@ -23,6 +23,7 @@
 <script lang="ts" setup>
 import { AnchorHTMLAttributes } from "vue";
 import Scaffold from "./Scaffold.vue";
+import { Icon } from "@/types/Icon";
 
 withDefaults(
   defineProps<{
@@ -30,7 +31,7 @@ withDefaults(
     color?: "blue" | "orange" | "white" | "extra-light-blue";
     size?: "sm" | "md" | "lg";
     shadow?: boolean;
-    icon?: string;
+    icon?: Icon;
     iconPosition?: "left" | "right" | "only";
     loading?: boolean;
     href?: AnchorHTMLAttributes["href"];

package/src/components/structural/GridContainer.vue

@@ -1,32 +1,18 @@
 <template>
-  <div :class="[`grid-container-${size}`]">
+  <div class="grid-container">
     <slot></slot>
   </div>
 </template>
 
-<script lang="ts" setup>
-withDefaults(
-  defineProps<{
-    size?: 1 | 2 | 3;
-  }>(),
-  {
-    size: 1,
-  }
-);
-</script>
-
 <style lang="scss" scoped>
-@import "@/assets/variables/grid";
-
-.grid-container-1,
-.grid-container-2,
-.grid-container-3 {
+.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;
 
-  @media screen and (min-width: $break-md-min) and (max-width: $break-md-max) {
+  @media screen and (min-width: $break-md-min) {
     grid-template-columns: $grid-columns-md;
     column-gap: $grid-column-gap-md;
     padding-left: $grid-side-padding-md;
@@ -48,22 +34,4 @@ withDefaults(
     margin-right: auto;
   }
 }
-
-.grid-container-1 {
-  @media screen and (max-width: $break-sm-max) {
-    grid-template-columns: $grid-columns-sm-1;
-  }
-}
-
-.grid-container-2 {
-  @media screen and (max-width: $break-sm-max) {
-    grid-template-columns: $grid-columns-sm-2;
-  }
-}
-
-.grid-container-3 {
-  @media screen and (max-width: $break-sm-max) {
-    grid-template-columns: $grid-columns-sm-3;
-  }
-}
 </style>

package/src/components/structural/GridItem.vue

@@ -37,8 +37,6 @@ withDefaults(
 </script>
 
 <style lang="scss" scoped>
-@import "@/assets/variables/grid";
-
 @for $i from 1 to 5 {
   .grid-item-sm-#{$i} {
     @media screen and (max-width: $break-sm-max) {