cja-phoenix 1.2.39 → 1.2.41

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

@@ -0,0 +1,329 @@
+<template>
+  <FormStructureContainer layout="vertical">
+    <div
+      v-if="options"
+      class="tiles-container"
+      :class="[`layout-${layout}`, `size-${size}`]"
+      :style="cssVars"
+    >
+      <div
+        v-for="(option, idx) in options"
+        :key="idx"
+        v-tippy="option.tooltip ? { content: option.tooltip } : void 0"
+        class="tile"
+        :class="{
+  active: props.multiselect ? model.includes(option.value) : option.value == value,
+  'has-image': option.image
+}"
+        @click="handleChange(option.value)"
+      >
+        <input
+          :type="multiselect ? 'checkbox' : 'radio'"
+          :value="option.value"
+          :checked="
+  multiselect ? model.includes(option.value) : model == option.value
+"
+          :aria-label="option.label"
+          v-bind="{ name }"
+        />
+
+        <div v-if="option.image" class="image-container">
+          <img :src="option.image" :alt="option.label" />
+        </div>
+
+        <div
+          v-if="layout != 'image' || layout == 'image' && !option.image"
+          class="text-wrapper"
+        >
+          <div class="upper-text">
+            <span class="title">{{ option.label }}</span>
+            <span v-if="option.description" class="description">
+              {{ option.description }}
+            </span>
+          </div>
+          <div
+            v-if="option.descriptionLong && layout == 'list'"
+            class="long-description"
+            v-html="option.descriptionLong"
+          />
+        </div>
+
+        <span v-if="layout == 'list' && icon" :class="[icon, 'icon']" />
+      </div>
+    </div>
+    <FormStructureError
+      v-if="errorMessage && errorDisplay"
+      v-bind="{ errorMessage }"
+    />
+  </FormStructureContainer>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useField } from "vee-validate";
+const props = defineProps({
+  name: { type: String, required: true },
+  icon: { type: null, required: false, default: "m-cgg-icon--chevron-right" },
+  layout: { type: String, required: false, default: "list" },
+  options: { type: Array, required: false },
+  gridColumns: { type: Object, required: false },
+  size: { type: String, required: false, default: "md" },
+  multiselect: { type: Boolean, required: false },
+  validation: { type: Object, required: false },
+  validationMode: { type: String, required: false, default: "change" },
+  errorDisplay: { type: Boolean, required: false, default: true }
+});
+const model = defineModel({ type: null, ...{
+  required: true
+} });
+const cssVars = computed(() => ({
+  "--xs-grid-columns": props.gridColumns?.xs,
+  "--sm-grid-columns": props.gridColumns?.sm,
+  "--md-grid-columns": props.gridColumns?.md,
+  "--lg-grid-columns": props.gridColumns?.lg,
+  "--xl-grid-columns": props.gridColumns?.xl
+}));
+const { value, errorMessage, meta, validate } = useField(
+  "input",
+  props.validation,
+  {
+    validateOnValueUpdate: props.validationMode == "change",
+    syncVModel: true
+  }
+);
+const handleChange = (value2) => {
+  model.value = (() => {
+    if (props.multiselect) {
+      const curV = [...model.value];
+      if (curV.includes(value2)) {
+        curV.splice(curV.indexOf(value2), 1);
+      } else {
+        curV.push(value2);
+      }
+      return curV;
+    }
+    return value2;
+  })();
+  emit("click:option", value2);
+};
+defineExpose({ errorMessage, meta, validate });
+const emit = defineEmits(["click:option"]);
+</script>
+
+<style lang="scss" scoped>
+.tiles-container {
+  display: grid;
+  width: 100%;
+  gap: 16px;
+
+  &.size-sm {
+    .tile {
+      padding: 12px;
+
+      .text-wrapper {
+        .upper-text {
+          font-size: 14px;
+          line-height: 18px;
+        }
+
+        .long-description {
+          font-size: 13px;
+          line-height: 17px;
+        }
+      }
+    }
+
+    &.layout-list {
+      .tile.has-image {
+        grid-template-columns: 30px 1fr auto;
+
+        .image-container img {
+          width: 30px;
+          height: 30px;
+        }
+      }
+    }
+  }
+
+  &.size-md {
+    .tile {
+      padding: 20px 24px;
+
+      .text-wrapper {
+        .upper-text {
+          font-size: 16px;
+          line-height: 20px;
+        }
+
+        .long-description {
+          font-size: 14px;
+          line-height: 18px;
+        }
+      }
+    }
+
+    &.layout-list {
+      .tile.has-image {
+        grid-template-columns: 32px 1fr auto;
+
+        .image-container img {
+          width: 32px;
+          height: 32px;
+        }
+      }
+    }
+  }
+
+  &.size-lg {
+    .tile {
+      padding: 20px 24px;
+
+      .text-wrapper {
+        .upper-text {
+          font-size: 18px;
+          line-height: 22px;
+        }
+
+        .long-description {
+          font-size: 16px;
+          line-height: 20px;
+        }
+      }
+    }
+
+    &.layout-list {
+      .tile.has-image {
+        grid-template-columns: 40px 1fr auto;
+
+        .image-container img {
+          width: 40px;
+          height: 40px;
+        }
+      }
+    }
+  }
+
+  .tile {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 16px;
+    border: 1px solid $light-grey;
+    border-radius: 10px;
+    cursor: pointer;
+    user-select: none;
+    overflow-x: hidden;
+    color: $extra-dark-blue;
+    transition: all 0.3s ease-in-out;
+    background-color: $white;
+
+    input {
+      position: absolute;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    @mixin activeStyle {
+      box-shadow: $box-shadow-m;
+      background-color: $extra-light-blue;
+      border-color: $main-blue;
+    }
+
+    &.active {
+      @include activeStyle;
+    }
+
+    @media (any-hover: hover) {
+      &:hover {
+        @include activeStyle;
+      }
+    }
+
+    .text-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+
+      .title {
+        font-weight: 700;
+      }
+    }
+
+    .icon {
+      font-size: 14px;
+    }
+  }
+
+  &.layout-grid,
+  &.layout-image {
+    grid-template-columns: var(--xs-grid-columns);
+
+    @include screen-xs-min {
+      grid-template-columns: var(--sm-grid-columns);
+    }
+
+    @include screen-md-min {
+      grid-template-columns: var(--md-grid-columns);
+    }
+
+    @include screen-lg-min {
+      grid-template-columns: var(--lg-grid-columns);
+    }
+
+    @include screen-xl-min {
+      grid-template-columns: var(--xl-grid-columns);
+    }
+  }
+
+  &.layout-list {
+    grid-template-columns: 1fr;
+
+    .tile {
+      display: grid;
+      grid-template-columns: 1fr auto;
+
+      .text-wrapper {
+        .description:before {
+          content: "-";
+          margin: 0 5px;
+        }
+      }
+    }
+  }
+
+  &.layout-grid {
+    .text-wrapper .upper-text {
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+
+      .title {
+        font-size: 15px;
+        line-height: 18px;
+      }
+
+      .description {
+        font-size: 12px;
+        line-height: 12px;
+      }
+    }
+  }
+
+  &.layout-image {
+    .tile {
+      justify-content: center;
+      text-align: center;
+
+      .image-container img {
+        display: block;
+        max-width: 100%;
+      }
+    }
+  }
+}
+
+.input-error {
+  text-align: center;
+}
+</style>

package/dist/runtime/components/form/SelectionTiles.vue.d.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;

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

@@ -0,0 +1,51 @@
+import { type InputHTMLAttributes } from "vue";
+import type { Lazy, Schema } from "yup";
+type __VLS_Props = {
+    title?: string;
+    label?: string;
+    tooltip?: string;
+    layout?: "vertical" | "horizontal";
+    size?: "sm" | "md" | "lg";
+    disabled?: InputHTMLAttributes["disabled"];
+    min: number;
+    max: number;
+    step: number;
+    validation?: Schema | Lazy<any>;
+    validationMode?: "change" | "none";
+    errorDisplay?: boolean;
+};
+declare const __VLS_defaultModels: {
+    modelValue: number;
+};
+type __VLS_ModelProps = {
+    modelValue: typeof __VLS_defaultModels['modelValue'];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_13: {}, __VLS_15: {};
+type __VLS_Slots = {} & {
+    min?: (props: typeof __VLS_13) => any;
+} & {
+    max?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: 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: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+    size: "sm" | "md" | "lg";
+    errorDisplay: boolean;
+    validationMode: "change" | "none";
+    layout: "vertical" | "horizontal";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,175 @@
+<template>
+  <FormStructureContainer v-bind="{ layout }">
+    <FormStructureTitle
+      v-if="title"
+      v-bind="{ title, tooltip, size, disabled }"
+    />
+
+    <div
+      class="input-wrapper"
+      :class="{
+  error: errorMessage
+}"
+      :style="sliderProgress"
+    >
+      <input
+        ref="inputEl"
+        v-bind="{ min, max, step, disabled }"
+        v-model="model"
+        type="range"
+        :aria-label="label || title"
+      />
+      <div v-if="$slots.max || $slots.min" class="label-container">
+        <div v-if="$slots.min" class="min">
+          <slot name="min" />
+        </div>
+        <div v-if="$slots.max" class="max">
+          <slot name="max" />
+        </div>
+      </div>
+    </div>
+
+    <FormStructureError
+      v-if="errorMessage && errorDisplay"
+      v-bind="{ size, errorMessage }"
+    />
+  </FormStructureContainer>
+</template>
+
+<script setup>
+import { useField } from "vee-validate";
+import { computed, ref } from "vue";
+const props = defineProps({
+  title: { type: String, required: false },
+  label: { type: String, required: false },
+  tooltip: { type: String, required: false },
+  layout: { type: String, required: false, default: "vertical" },
+  size: { type: String, required: false, default: "md" },
+  disabled: { type: null, required: false },
+  min: { type: Number, required: true },
+  max: { type: Number, required: true },
+  step: { type: Number, required: true },
+  validation: { type: Object, required: false },
+  validationMode: { type: String, required: false, default: "change" },
+  errorDisplay: { type: Boolean, required: false, default: true }
+});
+const model = defineModel({
+  required: true,
+  default: 0
+});
+const { errorMessage, meta, validate } = useField("input", props.validation, {
+  validateOnValueUpdate: props.validationMode == "change",
+  syncVModel: true
+});
+defineExpose({ errorMessage, meta, validate });
+const inputEl = ref();
+const sliderProgress = computed(() => ({
+  "--slider-progress-value": (Math.round(model.value / props.step * props.step) - props.min) / (props.max - props.min)
+}));
+</script>
+
+<style lang="scss" scoped>
+$sliderHeight: 12px;
+$sliderThumb: 20px;
+$sliderProgress: calc(
+  0.5 * #{$sliderThumb} + var(--slider-progress-value) * (100% - #{$sliderThumb})
+);
+
+.input-wrapper {
+  input {
+    display: block;
+    margin: 4px 0;
+    width: 100%;
+    appearance: none;
+    cursor: pointer;
+
+    &:focus {
+      outline: none;
+    }
+
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      width: $sliderThumb;
+      height: $sliderThumb;
+      border-radius: 50%;
+      background: $dark-green;
+      border: none;
+      margin-top: calc($sliderHeight * 0.5 - $sliderThumb * 0.5);
+      cursor: grab;
+    }
+
+    &::-webkit-slider-runnable-track {
+      height: $sliderHeight;
+      border: none;
+      border-radius: $sliderHeight;
+      box-shadow: inset 0px 0px 10px rgba(129, 129, 129, 0.25);
+      background: linear-gradient($bright-green, $bright-green) 0 /
+          $sliderProgress 100% no-repeat,
+        $light-green;
+    }
+
+    &::-moz-range-thumb {
+      width: $sliderThumb;
+      height: $sliderThumb;
+      border-radius: 50%;
+      background: $dark-green;
+      border: none;
+      cursor: grab;
+    }
+
+    &::-moz-range-track {
+      height: $sliderHeight;
+      border: none;
+      border-radius: $sliderHeight;
+      box-shadow: none;
+      background: linear-gradient($bright-green, $bright-green) 0 /
+          $sliderProgress 100% no-repeat,
+        $light-green;
+    }
+
+    &:disabled {
+      &::-webkit-slider-thumb {
+        background: $dark-grey;
+        cursor: auto;
+      }
+
+      &::-moz-range-thumb {
+        background: $dark-grey;
+        cursor: auto;
+      }
+
+      &::-webkit-slider-runnable-track {
+        background: linear-gradient($light-grey, $light-grey) 0 /
+            $sliderProgress 100% no-repeat,
+          $disabled-grey;
+        cursor: auto;
+      }
+
+      &::-moz-range-track {
+        background: linear-gradient($light-grey, $light-grey) 0 /
+            $sliderProgress 100% no-repeat,
+          $disabled-grey;
+        cursor: auto;
+      }
+    }
+  }
+
+  .label-container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+    margin-top: 12px;
+    font-size: 14px;
+    line-height: 18px;
+
+    .min {
+      grid-column: 1 / 2;
+    }
+
+    .max {
+      text-align: right;
+      grid-column: 2 / 3;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,51 @@
+import { type InputHTMLAttributes } from "vue";
+import type { Lazy, Schema } from "yup";
+type __VLS_Props = {
+    title?: string;
+    label?: string;
+    tooltip?: string;
+    layout?: "vertical" | "horizontal";
+    size?: "sm" | "md" | "lg";
+    disabled?: InputHTMLAttributes["disabled"];
+    min: number;
+    max: number;
+    step: number;
+    validation?: Schema | Lazy<any>;
+    validationMode?: "change" | "none";
+    errorDisplay?: boolean;
+};
+declare const __VLS_defaultModels: {
+    modelValue: number;
+};
+type __VLS_ModelProps = {
+    modelValue: typeof __VLS_defaultModels['modelValue'];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_13: {}, __VLS_15: {};
+type __VLS_Slots = {} & {
+    min?: (props: typeof __VLS_13) => any;
+} & {
+    max?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: 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: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+    size: "sm" | "md" | "lg";
+    errorDisplay: boolean;
+    validationMode: "change" | "none";
+    layout: "vertical" | "horizontal";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,56 @@
+import { type InputHTMLAttributes } from 'vue';
+import type { Icon } from '../../types/Icon.js';
+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';
+    validation?: Schema | Lazy<any>;
+    validationMode?: 'change' | 'blur' | 'none';
+    errorDisplay?: boolean;
+    id?: InputHTMLAttributes['id'];
+    disabled?: InputHTMLAttributes['disabled'];
+    inputmode?: InputHTMLAttributes['inputmode'];
+    type?: InputHTMLAttributes['type'];
+    autocomplete?: InputHTMLAttributes['autocomplete'];
+    suffix?: string;
+    icon?: Icon;
+    iconPosition?: 'left' | 'right';
+    mask?: string;
+    numberOptions?: {
+        positiveOnly?: boolean;
+        digits?: number;
+    };
+};
+type __VLS_ModelProps = {
+    modelValue: any;
+    'masked'?: 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, {
+    "update:modelValue": (value: any) => any;
+    "update:masked": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onUpdate:masked"?: ((value: any) => any) | undefined;
+}>, {
+    type: import("vue").InputTypeHTMLAttribute;
+    size: "sm" | "md" | "lg";
+    errorDisplay: boolean;
+    validationMode: "change" | "blur" | "none";
+    layout: "vertical" | "horizontal";
+    iconPosition: "left" | "right";
+    numberOptions: {
+        positiveOnly?: boolean;
+        digits?: number;
+    };
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;