cja-phoenix 0.6.0 → 0.6.2

package/src/components/forms/RadioInputList.vue

@@ -0,0 +1,156 @@
+<template>
+  <InputContainer v-bind="{ layout }">
+    <InputTitle v-bind="{ title, tooltip, size, disabled }" v-if="title" />
+    <ul
+      class="radio-button-list"
+      :class="[
+        `layout-${listLayout}`,
+        {
+          error: errorMessage,
+        },
+      ]"
+      v-if="options"
+    >
+      <li class="radio-button-container" v-for="option in options">
+        <label>
+          <input
+            type="radio"
+            :name="name"
+            :checked="modelValue == option.value"
+            @change="handleChange($event, option.value)"
+          />
+          <div class="radio-icon"></div>
+          <div
+            class="text-container"
+            :class="[`size-${size}`]"
+            v-html="option.label"
+          ></div>
+        </label>
+      </li>
+    </ul>
+
+    <InputError :error="errorMessage" v-if="errorMessage && errorDisplay" />
+  </InputContainer>
+</template>
+
+<script lang="ts" setup>
+import { InputHTMLAttributes } from "vue";
+import InputError from "./structure/InputError.vue";
+import InputContainer from "./structure/InputContainer.vue";
+import InputTitle from "./structure/InputTitle.vue";
+import { RadioOption } from "../../types/RadioOption";
+import { useField } from "vee-validate";
+
+const props = withDefaults(
+  defineProps<{
+    title?: string;
+    tooltip?: string;
+    layout?: "vertical" | "horizontal";
+    listLayout?: "vertical" | "horizontal";
+    size?: "sm" | "md" | "lg";
+    validation?: any;
+    errorDisplay?: boolean;
+    disabled?: InputHTMLAttributes["disabled"];
+    modelValue: InputHTMLAttributes["value"];
+    options: RadioOption[] | undefined;
+    name: InputHTMLAttributes["name"];
+  }>(),
+  {
+    layout: "vertical",
+    listLayout: "vertical",
+    size: "md",
+    errorDisplay: true,
+  }
+);
+
+const { errorMessage, meta, validate } = useField("input", props.validation, {
+  initialValue: props.modelValue,
+});
+
+const handleChange = (event: any, value: InputHTMLAttributes["value"]) => {
+  if (event.target.checked) {
+    emit("update:modelValue", value);
+  }
+};
+
+defineExpose({ errorMessage, meta, validate });
+
+const emit = defineEmits(["update:modelValue"]);
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/forms.scss";
+
+.radio-button-list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  display: flex;
+  gap: 8px;
+
+  &.layout-vertical {
+    flex-direction: column;
+  }
+
+  &.layout-horizontal {
+    gap: 8px 16px;
+
+    .radio-button-container label .text-container {
+      &.size-md {
+        line-height: 44px;
+      }
+    }
+  }
+
+  &.error {
+    .radio-button-container label .radio-icon {
+      border-color: $input-border-error-color;
+    }
+  }
+
+  .radio-button-container {
+    label {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      flex-wrap: nowrap;
+      gap: 8px;
+      cursor: pointer;
+      margin: 0;
+      font-weight: 400;
+
+      input {
+        display: none;
+      }
+
+      .radio-icon {
+        width: 20px;
+        height: 20px;
+        flex-shrink: 0;
+        border: 1px solid #64748b;
+        border-radius: 50%;
+      }
+
+      input:checked + .radio-icon {
+        border: 6px solid #076b9c;
+      }
+
+      .text-container {
+        @include input-title;
+
+        user-select: none;
+
+        a {
+          color: inherit;
+          font-weight: 700;
+          text-decoration: underline;
+
+          &:hover {
+            text-decoration: none;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/forms/SelectInput.vue

@@ -0,0 +1,392 @@
+<template>
+  <InputContainer v-bind="{ layout }">
+    <InputTitle v-bind="{ title, tooltip, size, disabled }" v-if="title" />
+
+    <div
+      ref="inputEl"
+      class="input-container-select"
+      :class="{ error: errorMessage }"
+    >
+      <div
+        class="select-toggle"
+        :class="[
+          `size-${size}`,
+          collapsePosition,
+          { open: open, disabled: disabled },
+        ]"
+        @click="toggleCollapse()"
+      >
+        <span class="select-display" :class="{ placeholder: !displayValue }">{{
+          displayValue || placeholder
+        }}</span>
+        <em class="m-cgg-icon--chevron-down"></em>
+      </div>
+      <Teleport to="body">
+        <Transition
+          name="slide-fade"
+          @enter="calcPosition"
+          @after-leave="collapsePosition = null"
+        >
+          <div
+            v-if="open"
+            class="select-collapse"
+            :class="collapsePosition"
+            ref="collapseEl"
+          >
+            <div v-if="searchFilter" class="search-filter-container">
+              <input v-model="search" :placeholder="searchFilter.placeholder" />
+            </div>
+            <ul>
+              <li
+                v-for="option in searchFilter ? filteredOptions : options"
+                @click="selectValue(option.value)"
+                :class="{
+                  active: multiSelect && modelValue?.includes(option.value),
+                }"
+              >
+                <span
+                  v-if="multiSelect"
+                  class="checkbox-icon m-cgg-icon--check2"
+                ></span>
+                {{ option.label }}
+              </li>
+              <li v-if="searchFilter && filteredOptions?.length == 0">
+                {{ searchFilter.noResults }}
+              </li>
+            </ul>
+          </div>
+        </Transition>
+      </Teleport>
+    </div>
+
+    <InputError :error="errorMessage" v-if="errorMessage && errorDisplay" />
+  </InputContainer>
+</template>
+
+<script lang="ts" setup>
+import { useField } from "vee-validate";
+import {
+  ref,
+  computed,
+  onMounted,
+  onUnmounted,
+  InputHTMLAttributes,
+} from "vue";
+import InputTitle from "./structure/InputTitle.vue";
+import { SelectHTMLAttributes } from "vue";
+import { SelectOption } from "../../types/SelectOption";
+import InputError from "./structure/InputError.vue";
+import InputContainer from "./structure/InputContainer.vue";
+import { findScrollAncestor } from "../../utils";
+
+const props = withDefaults(
+  defineProps<{
+    title?: string;
+    tooltip?: string;
+    placeholder?: InputHTMLAttributes["placeholder"];
+    layout?: "vertical" | "horizontal";
+    size?: "sm" | "md" | "lg";
+    error?: string;
+    validation?: any;
+    errorDisplay?: boolean;
+    id?: InputHTMLAttributes["id"];
+    disabled?: InputHTMLAttributes["disabled"];
+    modelValue: SelectHTMLAttributes["value"];
+    options: SelectOption[] | undefined;
+    multiSelect?: boolean;
+    searchFilter?: {
+      placeholder: string;
+      noResults: string;
+    };
+  }>(),
+  {
+    layout: "vertical",
+    size: "md",
+    placeholder: "Selecionar",
+    disabled: false,
+    errorDisplay: true,
+  }
+);
+
+const open = ref(false);
+const search = ref("");
+const inputEl = ref();
+const collapseEl = ref();
+const collapsePosition = ref();
+const filteredOptions = computed(() =>
+  search.value && props.options
+    ? props.options.filter((opt) =>
+        opt.label.toLowerCase().includes(search.value.toLowerCase())
+      )
+    : props.options
+);
+
+const {
+  value: inputValue,
+  errorMessage,
+  meta,
+  validate,
+} = useField("input", props.validation, { initialValue: props.modelValue });
+
+defineExpose({ errorMessage, meta, validate });
+
+const emit = defineEmits(["update:modelValue"]);
+
+const displayValue = computed(() =>
+  inputValue.value && props.options
+    ? props.multiSelect
+      ? props.options
+          .filter((o) => inputValue.value.includes(o.value))
+          ?.map((o) => o.label)
+          .join(", ")
+      : props.options.find((o) => o.value == inputValue.value)?.label
+    : ""
+);
+
+const sizeReset = () => {
+  const displayEl = inputEl.value.querySelector(
+    ".select-toggle .select-display"
+  ) as HTMLElement;
+
+  displayEl.style.whiteSpace = "";
+  displayEl.style.width = "";
+};
+
+const resizeObserver = new ResizeObserver((entries) => {
+  window.requestAnimationFrame(() => {
+    const displayEl = entries[0].target.querySelector(
+      ".select-toggle .select-display"
+    ) as HTMLElement;
+
+    displayEl.style.width = `${displayEl.getBoundingClientRect().width}px`;
+    displayEl.style.whiteSpace = "nowrap";
+  });
+});
+
+onMounted(() => {
+  resizeObserver.observe(inputEl.value);
+
+  window.addEventListener("resize", sizeReset);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", sizeReset);
+});
+
+const closeSelectOutside = (event: Event) => {
+  if (
+    !inputEl.value.contains(event.target) &&
+    !collapseEl.value.contains(event.target)
+  ) {
+    toggleCollapse();
+  }
+};
+
+const toggleCollapse = () => {
+  if (!props.disabled) {
+    open.value = !open.value;
+
+    if (!open.value) {
+      setTimeout(() => {
+        search.value = "";
+      }, 300);
+      window.removeEventListener("click", closeSelectOutside);
+      window.removeEventListener("scroll", closeSelectOutside);
+      findScrollAncestor(inputEl.value).removeEventListener(
+        "scroll",
+        closeSelectOutside
+      );
+    } else {
+      window.addEventListener("click", closeSelectOutside);
+      window.addEventListener("scroll", closeSelectOutside);
+      findScrollAncestor(inputEl.value).addEventListener(
+        "scroll",
+        closeSelectOutside
+      );
+    }
+  }
+};
+
+const calcPosition = (el: any) => {
+  const elRect = el.getBoundingClientRect();
+  const inputRect = inputEl.value.getBoundingClientRect();
+  const position =
+    inputRect.y + inputRect.height + elRect.height > window.innerHeight
+      ? "top"
+      : "bottom";
+  el.style.top =
+    position == "top"
+      ? `${inputRect.y - elRect.height + 1}px`
+      : `${inputRect.y + inputRect.height - 1}px`;
+  el.style.left = `${inputRect.left}px`;
+  el.style.width = `${inputRect.width}px`;
+  collapsePosition.value = `position-${position}`;
+};
+
+const selectValue = (value: string) => {
+  if (props.multiSelect) {
+    const payload = inputValue.value ? [...inputValue.value] : [];
+
+    if (payload.includes(value)) {
+      payload.splice(payload.indexOf(value), 1);
+    } else {
+      payload.push(value);
+    }
+
+    emit("update:modelValue", payload);
+  } else {
+    toggleCollapse();
+    emit("update:modelValue", value);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/forms.scss";
+
+.input-container-select {
+  &.error {
+    .select-toggle {
+      @include input-error;
+    }
+  }
+
+  .select-toggle {
+    @include input-template;
+
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+    cursor: pointer;
+
+    .select-display {
+      flex-grow: 1;
+      text-overflow: ellipsis;
+      overflow: hidden;
+
+      &.placeholder {
+        color: $input-placeholder-color;
+      }
+    }
+
+    &.open {
+      &.position-bottom {
+        border-radius: 5px 5px 0 0;
+      }
+
+      &.position-top {
+        border-radius: 0 0 5px 5px;
+      }
+
+      em {
+        transform: rotate(180deg);
+      }
+    }
+
+    &.disabled {
+      color: #dedede;
+      cursor: auto;
+      pointer-events: none;
+    }
+
+    em {
+      font-size: 12px;
+      line-height: 18px;
+      transition: all 0.3s ease-in-out;
+    }
+  }
+}
+
+.select-collapse {
+  position: fixed;
+  z-index: 10000;
+  max-height: 400px;
+  overflow-y: auto;
+  background-color: #fff;
+  border: 1px solid #dedede;
+  transition: all 0.3s ease-in-out;
+
+  &.position-top {
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.15);
+  }
+
+  &.position-bottom {
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
+  }
+
+  .search-filter-container {
+    padding: 5px 10px;
+
+    input {
+      outline: none;
+      padding: 10px 8px;
+      font-size: 15px;
+      line-height: 18px;
+      width: 100%;
+      border: 1px solid #dedede;
+      border-radius: 5px;
+
+      &:active,
+      &:focus {
+        border: 1px solid #5fbbff;
+        outline: none;
+      }
+    }
+  }
+
+  &.slide-fade-enter-from,
+  &.slide-fade-leave-to {
+    opacity: 0;
+  }
+
+  &.slide-fade-enter-to,
+  &.slide-fade-leave-from {
+    opacity: 1;
+  }
+
+  ul {
+    padding: 0;
+    margin: 0;
+
+    li {
+      display: flex;
+      align-items: center;
+      transition: all 0.3s ease-in-out;
+      font-size: 14px;
+      line-height: 17px;
+      padding: 8px 10px;
+      cursor: pointer;
+      user-select: none;
+      overflow-x: hidden;
+
+      &:hover {
+        background-color: #f1f7ee;
+      }
+
+      .checkbox-icon {
+        height: 20px;
+        width: 20px;
+        border: 2px solid #dedede;
+        border-radius: 3px;
+        transition: all 0.3s ease-in-out;
+        display: inline-flex;
+        place-items: center;
+        margin-right: 10px;
+
+        &:before {
+          color: #77aa43;
+          opacity: 0;
+        }
+      }
+
+      &.active .checkbox-icon:before {
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>