cja-phoenix 1.2.39 → 1.2.41

package/dist/runtime/components/form/SelectInput.vue

@@ -0,0 +1,362 @@
+<template>
+  <FormStructureContainer v-bind="{ layout }">
+    <FormStructureTitle
+      v-if="title"
+      v-bind="{ title, tooltip, size, disabled }"
+    />
+
+    <div
+      ref="inputEl"
+      class="input-container-select"
+      :class="{ error: errorMessage }"
+    >
+      <div
+        class="select-toggle"
+        :class="[`size-${size}`, { open, disabled }]"
+        @click="toggleCollapse()"
+      >
+        <div class="select-display">
+          <div
+            class="text-wrapper"
+            :class="{ placeholder: !displayValue }"
+            v-html="displayValue || placeholder"
+          />
+        </div>
+        <span class="m-cgg-icon--chevron-down" />
+      </div>
+
+      <select
+        v-model="model"
+        :aria-label="label || title"
+        v-bind="{ disabled }"
+      >
+        <option
+          v-for="option in options"
+          :key="option.value"
+          :value="option.value"
+          :disabled="option.disabled"
+        >
+          {{ option.label }}
+        </option>
+      </select>
+
+      <Teleport to="body">
+        <Transition name="fade" @enter="calcPosition">
+          <div v-if="open" ref="collapseEl" class="select-collapse">
+            <FormTextInput
+              v-if="searchFilter"
+              v-model="search"
+              size="sm"
+              :placeholder="searchFilter.placeholder"
+              icon="m-cgg-icon--search"
+            />
+            <div class="list-wrapper">
+              <ul v-if="!props.multiSelect">
+                <li
+                  v-for="option in filteredOptions"
+                  :key="option.value"
+                  :class="{ disabled: option.disabled }"
+                  @click="!option.disabled && handleClick(option.value)"
+                  v-html="option.label"
+                />
+              </ul>
+              <FormCheckboxInputList
+                v-else
+                v-model="model"
+                :options="filteredOptions"
+                name="multiselect-input-options"
+              />
+              <div
+                v-if="searchFilter && filteredOptions?.length == 0"
+                class="empty-search-results"
+              >
+                {{ searchFilter.noResults }}
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </Teleport>
+    </div>
+
+    <FormStructureError
+      v-if="errorMessage && errorDisplay"
+      v-bind="{ size, errorMessage }"
+    />
+  </FormStructureContainer>
+</template>
+
+<script setup>
+import { findScrollAncestor } from "../../utils/findScrollAncestor";
+import { useField } from "vee-validate";
+import { computed, onUnmounted, ref } from "vue";
+const props = defineProps({
+  title: { type: String, required: false },
+  label: { type: String, required: false },
+  tooltip: { type: String, required: false },
+  placeholder: { type: null, required: false, default: "Selecionar" },
+  layout: { type: String, required: false, default: "vertical" },
+  size: { type: String, required: false, default: "md" },
+  error: { type: String, required: false },
+  validation: { type: Object, required: false },
+  validationMode: { type: String, required: false, default: "change" },
+  errorDisplay: { type: Boolean, required: false, default: true },
+  id: { type: null, required: false },
+  disabled: { type: null, required: false, default: false },
+  options: { type: null, required: true },
+  multiSelect: { type: Boolean, required: false },
+  relativeEl: { type: null, required: false },
+  searchFilter: { type: Object, required: false }
+});
+const model = defineModel({ type: null, ...{
+  required: true
+} });
+const open = ref(false);
+const search = ref("");
+const inputEl = ref();
+const collapseEl = ref();
+const { errorMessage, meta, handleBlur, validate } = useField(
+  "input",
+  props.validation,
+  {
+    validateOnValueUpdate: props.validationMode == "change",
+    syncVModel: true
+  }
+);
+const displayValue = computed(() => {
+  if (model.value !== void 0 && props.options) {
+    if (props.multiSelect) {
+      return props.options.filter((o) => model.value?.includes(o.value))?.map((o) => o.altLabel || o.label).join(", ");
+    } else {
+      const value = props.options.find((o) => o.value == model.value);
+      return value?.altLabel || value?.label;
+    }
+  }
+  return "";
+});
+const filteredOptions = computed(() => {
+  let procOptions = props.options;
+  if (procOptions?.length) {
+    if (search.value) {
+      procOptions = procOptions.filter(
+        (opt) => opt.label.toLowerCase().includes(search.value.toLowerCase()) || opt.searchTags?.some(
+          (t) => t.toLowerCase().includes(search.value.toLowerCase())
+        )
+      );
+    }
+    if (props.multiSelect) {
+      procOptions = procOptions.map((o) => ({
+        label: o.label,
+        value: o.value
+      }));
+    }
+  }
+  return procOptions;
+});
+const handleClick = (value) => {
+  if (!props.multiSelect) {
+    toggleCollapse();
+  }
+  if (props.multiSelect) {
+    if (!Array.isArray(model.value)) {
+      model.value = [model.value];
+    }
+    if (model.value.indexOf(value) >= 0) {
+      model.value.splice(model.value.indexOf(value), 1);
+    } else {
+      model.value.push(value);
+    }
+  } else {
+    model.value = value;
+  }
+};
+const closeSelect = (event) => {
+  if (!inputEl.value.contains(event.target) && !collapseEl.value.contains(event.target)) {
+    if (event.type == "scroll") {
+      collapseEl.value.style.transitionDuration = "0s";
+    }
+    toggleCollapse(event);
+  }
+};
+const toggleCollapse = (event) => {
+  if (!props.disabled) {
+    open.value = !open.value;
+    if (!open.value) {
+      setTimeout(() => {
+        search.value = "";
+      }, 300);
+      window.removeEventListener("click", closeSelect);
+      window.removeEventListener("scroll", closeSelect);
+      findScrollAncestor(inputEl.value).removeEventListener(
+        "scroll",
+        closeSelect
+      );
+      handleBlur(event, props.validationMode == "blur");
+    } else {
+      window.addEventListener("click", closeSelect);
+      window.addEventListener("scroll", closeSelect);
+      findScrollAncestor(inputEl.value).addEventListener("scroll", closeSelect);
+    }
+  }
+};
+const calcPosition = (el) => {
+  const elRect = el.getBoundingClientRect();
+  const inputRect = (props.relativeEl || inputEl.value).getBoundingClientRect();
+  const position = inputRect.y + inputRect.height + elRect.height > window.innerHeight ? "bottom" : "top";
+  el.style[position] = position == "bottom" ? `${window.innerHeight - inputRect.y + 4}px` : `${inputRect.y + inputRect.height + 4}px`;
+  el.style.left = `${inputRect.left}px`;
+  el.style.width = `${inputRect.width}px`;
+};
+onUnmounted(() => {
+  window.removeEventListener("click", closeSelect);
+  window.removeEventListener("scroll", closeSelect);
+});
+defineExpose({ errorMessage, meta, validate });
+</script>
+
+<style lang="scss" scoped>
+.input-container-select {
+  position: relative;
+
+  .select-toggle {
+    @include input-template;
+    display: grid;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    grid-template-columns: 1fr auto;
+
+    .select-display {
+      overflow: hidden;
+
+      .text-wrapper {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        text-wrap-mode: nowrap;
+
+        &.placeholder {
+          color: $input-placeholder-color;
+        }
+      }
+    }
+
+    &.open {
+      border-color: $input-border-focus-color;
+
+      em {
+        transform: rotate(180deg);
+      }
+    }
+
+    &.disabled {
+      color: $light-grey;
+      cursor: auto;
+      pointer-events: none;
+    }
+
+    em {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.3s ease-in-out;
+    }
+  }
+
+  select {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    pointer-events: none;
+    width: 100%;
+  }
+
+  &.error {
+    .select-toggle {
+      @include input-error;
+    }
+  }
+}
+
+@mixin select-dropdown-item {
+  transition: all 0.3s ease-in-out;
+  padding: 8px;
+  cursor: pointer;
+  user-select: none;
+  border-radius: $input-border-radius;
+
+  &:not(.disabled):hover {
+    background-color: $light-blue;
+  }
+
+  &.disabled {
+    color: $light-grey;
+    cursor: auto;
+  }
+}
+
+@mixin select-dropdown-list {
+  gap: 0;
+
+  li {
+    display: flex;
+    align-items: center;
+    overflow-x: hidden;
+    @include select-dropdown-item;
+  }
+}
+
+.select-collapse {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  position: fixed;
+  z-index: $level-select;
+  max-height: 400px;
+  overflow-y: auto;
+  background-color: $white;
+  border: 1px solid $light-grey;
+  transition: all 0.3s ease-in-out;
+  box-shadow: $box-shadow-s;
+  border-radius: $input-border-radius;
+  padding: 8px;
+
+  &.fade-enter-from,
+  &.fade-leave-to {
+    opacity: 0;
+  }
+
+  &.fade-enter-to,
+  &.fade-leave-from {
+    opacity: 1;
+  }
+
+  .list-wrapper {
+    overflow-y: auto;
+    font-size: 14px;
+    line-height: 17px;
+  }
+
+  ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  ul {
+    @include select-dropdown-list;
+  }
+
+  :deep(.input-list) {
+    gap: 0;
+
+    label {
+      width: 100%;
+      @include select-dropdown-item;
+    }
+  }
+
+  .empty-search-results {
+    padding: 8px;
+  }
+}
+</style>

package/dist/runtime/components/form/SelectInput.vue.d.ts

@@ -0,0 +1,46 @@
+import type { SelectOption } from "../../types/Form.js";
+import { type InputHTMLAttributes } from "vue";
+import type { Lazy, Schema } from "yup";
+type __VLS_Props = {
+    title?: string;
+    label?: string;
+    tooltip?: string;
+    placeholder?: InputHTMLAttributes["placeholder"];
+    layout?: "vertical" | "horizontal";
+    size?: "sm" | "md" | "lg";
+    error?: string;
+    validation?: Schema | Lazy<any>;
+    validationMode?: "change" | "blur" | "none";
+    errorDisplay?: boolean;
+    id?: InputHTMLAttributes["id"];
+    disabled?: InputHTMLAttributes["disabled"];
+    options: SelectOption[] | undefined;
+    multiSelect?: boolean;
+    relativeEl?: any;
+    searchFilter?: {
+        placeholder: string;
+        noResults: string;
+    };
+};
+type __VLS_ModelProps = {
+    modelValue: any | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    errorMessage: import("vue").Ref<string | undefined, string | undefined>;
+    meta: import("vee-validate").FieldMeta<unknown>;
+    validate: import("vee-validate").FieldValidator<unknown>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {
+    disabled: boolean | "true" | "false";
+    size: "sm" | "md" | "lg";
+    errorDisplay: boolean;
+    validationMode: "change" | "blur" | "none";
+    layout: "vertical" | "horizontal";
+    placeholder: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/form/SelectionTiles.d.vue.ts

@@ -0,0 +1,44 @@
+import type { Icon } from "../../types/Icon.js";
+import type { TileOption } from "../../types/Form.js";
+import type { Lazy, Schema } from "yup";
+type __VLS_Props = {
+    name: string;
+    icon?: Icon;
+    layout?: "list" | "grid" | "image";
+    options?: TileOption[];
+    gridColumns?: {
+        xs?: string;
+        sm?: string;
+        md?: string;
+        lg?: string;
+        xl?: string;
+    };
+    size?: "sm" | "md" | "lg";
+    multiselect?: boolean;
+    validation?: Schema | Lazy<any>;
+    validationMode?: "change" | "none";
+    errorDisplay?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue: any | any[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    errorMessage: import("vue").Ref<string | undefined, string | undefined>;
+    meta: import("vee-validate").FieldMeta<unknown>;
+    validate: import("vee-validate").FieldValidator<unknown>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "click:option": (...args: any[]) => void;
+    "update:modelValue": (value: any) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onClick:option"?: ((...args: any[]) => any) | undefined;
+}>, {
+    size: "sm" | "md" | "lg";
+    icon: Icon;
+    errorDisplay: boolean;
+    validationMode: "change" | "none";
+    layout: "list" | "grid" | "image";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;