cja-phoenix 1.2.39 → 1.2.41

package/dist/runtime/components/StickyContainer.d.vue.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    sticky: import("vue").Ref<any, any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/StickyContainer.vue

@@ -0,0 +1,57 @@
+<template>
+  <div
+    ref="stickyContainer"
+    class="sticky-container"
+    :class="{ sticky }"
+    :style="{
+  top: `${top ?? headerHeight}px`,
+  bottom: bottom != void 0 ? `${bottom}px` : void 0,
+  left: left !== void 0 ? `${left}px` : void 0,
+  right: right !== void 0 ? `${right}px` : void 0
+}"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { useHeaderHeight } from "../composables/useHeaderHeight";
+import { onMounted, ref, watch } from "vue";
+const { top, bottom, left, right } = defineProps({
+  top: { type: Number, required: false },
+  bottom: { type: Number, required: false },
+  left: { type: Number, required: false },
+  right: { type: Number, required: false }
+});
+const { headerHeight } = useHeaderHeight();
+const stickyContainer = ref();
+const sticky = ref();
+let observer;
+onMounted(() => {
+  watch(
+    () => top,
+    () => {
+      if (observer) observer.disconnect();
+      observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            sticky.value = sticky.value !== void 0 ? !sticky.value : entry.isIntersecting ? true : false;
+          });
+        },
+        {
+          rootMargin: `0px 0px -${window.innerHeight - (top || headerHeight.value)}px 0px`
+        }
+      );
+      observer.observe(stickyContainer.value);
+    }
+  );
+});
+defineExpose({ sticky });
+</script>
+
+<style lang="scss" scoped>
+.sticky-container {
+  position: sticky;
+  z-index: $level-over-content;
+}
+</style>

package/dist/runtime/components/StickyContainer.vue.d.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    sticky: import("vue").Ref<any, any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/CheckboxInput.d.vue.ts

@@ -0,0 +1,42 @@
+import type { InputHTMLAttributes } from 'vue';
+import type { Lazy, Schema } from 'yup';
+type __VLS_Props = {
+    label?: string;
+    value?: InputHTMLAttributes['value'];
+    disabled?: InputHTMLAttributes['disabled'];
+    name?: InputHTMLAttributes['name'];
+    size?: 'sm' | 'md' | 'lg';
+    error?: boolean;
+    errorDisplay?: boolean;
+    validation?: Schema | Lazy<any>;
+    validationMode?: 'change' | 'none';
+};
+type __VLS_ModelProps = {
+    modelValue: boolean | string | string[] | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => 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: string | boolean | string[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | boolean | string[] | undefined) => any) | undefined;
+}>, {
+    size: "sm" | "md" | "lg";
+    errorDisplay: boolean;
+    validationMode: "change" | "none";
+}, {}, {}, {}, 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/CheckboxInput.vue

@@ -0,0 +1,163 @@
+<template>
+  <FormStructureContainer layout="vertical">
+    <label
+      class="input-wrapper"
+      :class="[
+  `size-${size}`,
+  {
+    disabled,
+    error: error || errorMessage
+  }
+]"
+    >
+      <input
+        v-model="model"
+        type="checkbox"
+        v-bind="{ value, disabled, name }"
+        :aria-label="label"
+      >
+      <div class="checkbox-icon m-cgg-icon--check" />
+      <div
+        v-if="label || $slots.default"
+        class="text-container"
+      >
+        <slot v-if="$slots.default" />
+        <Scaffold v-else>
+          {{ label }}
+        </Scaffold>
+      </div>
+    </label>
+
+    <FormStructureError
+      v-if="errorMessage && errorDisplay"
+      v-bind="{ size, errorMessage }"
+    />
+  </FormStructureContainer>
+</template>
+
+<script setup>
+import { useField } from "vee-validate";
+const props = defineProps({
+  label: { type: String, required: false },
+  value: { type: null, required: false },
+  disabled: { type: null, required: false },
+  name: { type: null, required: false },
+  size: { type: String, required: false, default: "md" },
+  error: { type: Boolean, required: false },
+  errorDisplay: { type: Boolean, required: false, default: true },
+  validation: { type: Object, required: false },
+  validationMode: { type: String, required: false, default: "change" }
+});
+const model = defineModel({ type: [Boolean, String, Array], skipCheck: true, ...{
+  required: true
+} });
+const { errorMessage, meta, validate } = useField("input", props.validation, {
+  validateOnValueUpdate: props.validationMode == "change",
+  syncVModel: true
+});
+defineExpose({ errorMessage, meta, validate });
+</script>
+
+<style lang="scss" scoped>
+.input-wrapper {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 8px;
+  cursor: pointer;
+  margin: 0;
+  font-weight: 400;
+
+  &.disabled {
+    cursor: auto;
+  }
+
+  &:hover {
+    input:not(:disabled) + .checkbox-icon {
+      border-color: $main-blue;
+    }
+  }
+
+  &.size-sm {
+    .text-container {
+      font-size: 12px;
+      line-height: 16px;
+      padding-top: 2px;
+    }
+  }
+
+  &.size-md {
+    .text-container {
+      font-size: 14px;
+      line-height: 18px;
+      padding-top: 1px;
+    }
+  }
+
+  input {
+    display: none;
+
+    &:checked + .checkbox-icon {
+      background: $main-blue;
+      border-color: $main-blue;
+
+      &:before {
+        opacity: 1;
+      }
+    }
+
+    &:disabled {
+      + .checkbox-icon {
+        background: $dark-white;
+        border-color: $input-disabled-color;
+      }
+
+      &:checked + .checkbox-icon {
+        background: $blue-grey;
+        border-color: $blue-grey;
+      }
+    }
+  }
+
+  .checkbox-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 20px;
+    height: 20px;
+    border-radius: 3px;
+    border: 1px solid $light-grey;
+    color: $white;
+    background: $white;
+    transition: all 0.2s ease-in-out;
+    font-size: 12px;
+    flex-shrink: 0;
+
+    &:before {
+      opacity: 0;
+      transition: all 0.2s ease-in-out;
+    }
+  }
+
+  .text-container {
+    user-select: none;
+    white-space: pre-line;
+
+    :deep(a) {
+      color: inherit;
+      font-weight: 700;
+      text-decoration: underline;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+
+  &.error {
+    .checkbox-icon {
+      border-color: $input-border-error-color;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,42 @@
+import type { InputHTMLAttributes } from 'vue';
+import type { Lazy, Schema } from 'yup';
+type __VLS_Props = {
+    label?: string;
+    value?: InputHTMLAttributes['value'];
+    disabled?: InputHTMLAttributes['disabled'];
+    name?: InputHTMLAttributes['name'];
+    size?: 'sm' | 'md' | 'lg';
+    error?: boolean;
+    errorDisplay?: boolean;
+    validation?: Schema | Lazy<any>;
+    validationMode?: 'change' | 'none';
+};
+type __VLS_ModelProps = {
+    modelValue: boolean | string | string[] | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => 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: string | boolean | string[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | boolean | string[] | undefined) => any) | undefined;
+}>, {
+    size: "sm" | "md" | "lg";
+    errorDisplay: boolean;
+    validationMode: "change" | "none";
+}, {}, {}, {}, 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/CheckboxInputList.d.vue.ts

@@ -0,0 +1,37 @@
+import type { InputHTMLAttributes } from 'vue';
+import type { CheckboxOption } from '../../types/Form.js';
+import type { Lazy, Schema } from 'yup';
+type __VLS_Props = {
+    title?: string;
+    tooltip?: string;
+    layout?: 'vertical' | 'horizontal';
+    listLayout?: 'vertical' | 'horizontal';
+    size?: 'sm' | 'md' | 'lg';
+    validation?: Schema | Lazy<any>;
+    validationMode?: 'change' | 'none';
+    errorDisplay?: boolean;
+    disabled?: InputHTMLAttributes['disabled'];
+    options: CheckboxOption[] | undefined;
+    name: string;
+};
+type __VLS_ModelProps = {
+    modelValue: string[] | 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: string[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[] | undefined) => any) | undefined;
+}>, {
+    size: "sm" | "md" | "lg";
+    errorDisplay: boolean;
+    validationMode: "change" | "none";
+    layout: "vertical" | "horizontal";
+    listLayout: "vertical" | "horizontal";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,84 @@
+<template>
+  <FormStructureContainer v-bind="{ layout }">
+    <FormStructureTitle
+      v-if="title"
+      v-bind="{ title, tooltip, size, disabled }"
+    />
+    <ul
+      v-if="options"
+      class="input-list"
+      :class="[
+  `layout-${listLayout}`,
+  {
+    error: errorMessage
+  }
+]"
+    >
+      <li
+        v-for="option in options"
+        :key="option.value"
+      >
+        <FormCheckboxInput
+          v-bind="{
+  ...option,
+  name,
+  size,
+  disabled,
+  error: errorMessage != void 0
+}"
+          v-model="model"
+        />
+      </li>
+    </ul>
+
+    <FormStructureError
+      v-if="errorMessage && errorDisplay"
+      v-bind="{ size, errorMessage }"
+    />
+  </FormStructureContainer>
+</template>
+
+<script setup>
+import { useField } from "vee-validate";
+const props = defineProps({
+  title: { type: String, required: false },
+  tooltip: { type: String, required: false },
+  layout: { type: String, required: false, default: "vertical" },
+  listLayout: { type: String, required: false, default: "vertical" },
+  size: { type: String, required: false, default: "md" },
+  validation: { type: Object, required: false },
+  validationMode: { type: String, required: false, default: "change" },
+  errorDisplay: { type: Boolean, required: false, default: true },
+  disabled: { type: null, required: false },
+  options: { type: null, required: true },
+  name: { type: String, required: true }
+});
+const model = defineModel({ type: null, ...{
+  required: true
+} });
+const { errorMessage, meta, validate } = useField("input", props.validation, {
+  validateOnValueUpdate: props.validationMode == "change",
+  syncVModel: true
+});
+defineExpose({ errorMessage, meta, validate });
+</script>
+
+<style lang="scss" scoped>
+.input-list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+
+  &.layout-vertical {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &.layout-horizontal {
+    display: flex;
+    flex-direction: row;
+    gap: 8px 16px;
+  }
+}
+</style>

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

@@ -0,0 +1,37 @@
+import type { InputHTMLAttributes } from 'vue';
+import type { CheckboxOption } from '../../types/Form.js';
+import type { Lazy, Schema } from 'yup';
+type __VLS_Props = {
+    title?: string;
+    tooltip?: string;
+    layout?: 'vertical' | 'horizontal';
+    listLayout?: 'vertical' | 'horizontal';
+    size?: 'sm' | 'md' | 'lg';
+    validation?: Schema | Lazy<any>;
+    validationMode?: 'change' | 'none';
+    errorDisplay?: boolean;
+    disabled?: InputHTMLAttributes['disabled'];
+    options: CheckboxOption[] | undefined;
+    name: string;
+};
+type __VLS_ModelProps = {
+    modelValue: string[] | 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: string[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[] | undefined) => any) | undefined;
+}>, {
+    size: "sm" | "md" | "lg";
+    errorDisplay: boolean;
+    validationMode: "change" | "none";
+    layout: "vertical" | "horizontal";
+    listLayout: "vertical" | "horizontal";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,37 @@
+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';
+    validation?: Schema | Lazy<any>;
+    validationMode?: 'change' | 'blur' | 'none';
+    errorDisplay?: boolean;
+    id?: InputHTMLAttributes['id'];
+    disabled?: InputHTMLAttributes['disabled'];
+    currency?: string;
+};
+type __VLS_ModelProps = {
+    modelValue: 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;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {
+    size: "sm" | "md" | "lg";
+    errorDisplay: boolean;
+    validationMode: "change" | "blur" | "none";
+    layout: "vertical" | "horizontal";
+    currency: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,134 @@
+<template>
+  <FormStructureContainer v-bind="{ layout }">
+    <FormStructureTitle
+      v-if="title"
+      v-bind="{ title, tooltip, size, disabled }"
+    />
+
+    <div
+      class="input-wrapper"
+      :class="{
+  error: errorMessage
+}"
+    >
+      <input
+        v-bind="{ id, placeholder, disabled }"
+        v-model="modelMasked"
+        v-maska="maskOptions"
+        :class="[`size-${size}`]"
+        type="text"
+        inputmode="decimal"
+        :aria-label="label || title"
+        @blur="handleBlur($event, validationMode == 'blur')"
+      >
+
+      <span class="input-currency">
+        {{ currency }}
+      </span>
+    </div>
+    <FormStructureError
+      v-if="errorMessage && errorDisplay"
+      v-bind="{ size, errorMessage }"
+    />
+  </FormStructureContainer>
+</template>
+
+<script setup>
+import {
+  reactive,
+  ref,
+  watch
+} from "vue";
+import { useField } from "vee-validate";
+import { vMaska } from "maska/vue";
+const props = defineProps({
+  title: { type: String, required: false },
+  label: { type: String, required: false },
+  tooltip: { type: String, required: false },
+  placeholder: { type: null, required: false },
+  layout: { type: String, required: false, default: "vertical" },
+  size: { type: String, required: false, default: "md" },
+  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 },
+  currency: { type: String, required: false, default: "\u20AC" }
+});
+const model = defineModel({
+  required: true
+});
+const modelMasked = ref(
+  typeof model.value == "number" ? Intl.NumberFormat("de").format(model.value) : ""
+);
+watch(model, (n) => {
+  if (typeof n == "number") {
+    modelMasked.value = Intl.NumberFormat("de").format(n);
+  }
+});
+const maskOptions = reactive({
+  onMaska: (detail) => {
+    const unmasked = detail.unmasked;
+    model.value = unmasked && typeof unmasked == "string" ? Number.parseFloat(unmasked) : void 0;
+  },
+  number: {
+    locale: "de",
+    fraction: 2,
+    unsigned: true
+  }
+});
+const { errorMessage, meta, validate, handleBlur } = useField(
+  "input",
+  props.validation,
+  {
+    validateOnValueUpdate: props.validationMode == "change",
+    syncVModel: true
+  }
+);
+defineExpose({ errorMessage, meta, validate });
+</script>
+
+<style lang="scss" scoped>
+@use "sass:map";
+
+.input-wrapper {
+  position: relative;
+
+  input {
+    @include input-template;
+    padding-right: 24px;
+
+    &:disabled {
+      + .input-currency {
+        color: $input-disabled-color;
+      }
+    }
+
+    @each $size-name, $size in $input-sizes {
+      &.size-#{$size-name} {
+        padding-right: map.get($size, padding-h) * 2 + 10;
+
+        + .input-currency {
+          right: map.get($size, padding-h);
+          font-size: map.get($size, font-size);
+          line-height: map.get($size, font-size);
+        }
+      }
+    }
+  }
+
+  &.error {
+    input {
+      @include input-error;
+    }
+  }
+
+  .input-currency {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    font-weight: 700;
+    pointer-events: none;
+  }
+}
+</style>