cja-phoenix 1.2.39 → 1.2.41

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

@@ -0,0 +1,227 @@
+<template>
+  <FormStructureContainer v-bind="{ layout }">
+    <FormStructureTitle
+      v-if="title"
+      v-bind="{ title, tooltip, size, disabled }"
+    />
+
+    <div
+      class="input-wrapper"
+      :class="{
+  error: errorMessage,
+  disabled
+}"
+    >
+      <input
+        v-bind="{ id, type, placeholder, disabled, autocomplete, inputmode }"
+        ref="inputEl"
+        v-model="maskedModel"
+        v-maska="maskOptions"
+        :class="[`size-${size}`, `icon-${iconPosition}`, { 'has-icon': icon }]"
+        :aria-label="label || title"
+        @blur="handleBlur($event, validationMode == 'blur')"
+      >
+
+      <div
+        v-if="icon"
+        class="input-icon"
+        :class="[icon, `icon-${iconPosition}`, `size-${size}`]"
+      />
+
+      <div
+        v-if="suffix && iconPosition != 'right'"
+        ref="suffixEl"
+        class="input-suffix"
+        :class="[`size-${size}`]"
+      >
+        {{ suffix }}
+      </div>
+    </div>
+
+    <FormStructureError
+      v-if="errorMessage && errorDisplay"
+      v-bind="{ size, errorMessage }"
+    />
+  </FormStructureContainer>
+</template>
+
+<script setup>
+import { useField } from "vee-validate";
+import { computed, onMounted, ref, watch } from "vue";
+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 },
+  inputmode: { type: null, required: false },
+  type: { type: null, required: false, default: "text" },
+  autocomplete: { type: null, required: false },
+  suffix: { type: String, required: false },
+  icon: { type: null, required: false },
+  iconPosition: { type: String, required: false, default: "left" },
+  mask: { type: String, required: false },
+  numberOptions: { type: Object, required: false, default: () => ({
+    positiveOnly: true,
+    digits: 2
+  }) }
+});
+const model = defineModel({
+  required: true
+});
+const maskedModel = defineModel("masked", {
+  set: (v) => {
+    if (props.inputmode != "numeric" && props.inputmode != "decimal" && !props.mask) {
+      model.value = v;
+    }
+    return v;
+  }
+});
+watch(
+  model,
+  (n) => {
+    maskedModel.value = n && !props.mask && (props.inputmode == "numeric" || props.inputmode == "decimal") ? Intl.NumberFormat("de").format(n) : n;
+  },
+  {
+    immediate: true
+  }
+);
+const maskOptions = computed(() => {
+  if (props.mask) {
+    return {
+      mask: props.mask,
+      onMaska: (detail) => {
+        model.value = detail.masked;
+      }
+    };
+  } else if (props.inputmode == "numeric" || props.inputmode == "decimal") {
+    return {
+      onMaska: (detail) => {
+        const { unmasked } = detail;
+        model.value = unmasked && typeof unmasked == "string" ? Number.parseFloat(unmasked) : void 0;
+      },
+      number: {
+        locale: "de",
+        fraction: props.inputmode == "decimal" ? props.numberOptions.digits : 0,
+        unsigned: props.numberOptions.positiveOnly
+      }
+    };
+  }
+  return void 0;
+});
+const { errorMessage, meta, handleBlur, validate } = useField(
+  "input",
+  props.validation,
+  {
+    validateOnValueUpdate: props.validationMode == "change",
+    syncVModel: true
+  }
+);
+const inputEl = ref();
+const suffixEl = ref();
+onMounted(() => {
+  if (props.suffix && props.iconPosition != "right") {
+    const inputPadding = Number.parseInt(
+      window.getComputedStyle(inputEl.value).getPropertyValue("padding-right")
+    );
+    const suffixWidth = suffixEl.value.getBoundingClientRect().width;
+    inputEl.value.style.paddingRight = `${Math.ceil(
+      inputPadding * 2 + suffixWidth
+    )}px`;
+  }
+});
+defineExpose({ errorMessage, meta, validate });
+</script>
+
+<style lang="scss" scoped>
+@use "sass:map";
+
+.input-wrapper {
+  position: relative;
+
+  input {
+    @include input-template;
+
+    &[type="number"] {
+      /* Firefox */
+      -moz-appearance: textfield;
+
+      /* Chrome, Safari, Edge, Opera */
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+    }
+
+    &.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;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.error {
+    input {
+      @include input-error;
+    }
+  }
+
+  .input-suffix {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    font-weight: 700;
+    pointer-events: none;
+    user-select: 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);
+          }
+        }
+      }
+    }
+  }
+
+  &.disabled {
+    .input-suffix,
+    .input-icon {
+      color: $input-disabled-color;
+    }
+  }
+}
+</style>

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

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

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

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

@@ -0,0 +1,76 @@
+<template>
+  <FormStructureContainer v-bind="{ layout }">
+    <FormStructureTitle
+      v-if="title"
+      v-bind="{ title, tooltip, size, disabled }"
+    />
+
+    <div
+      class="input-wrapper"
+      :class="{
+  error: errorMessage
+}"
+    >
+      <textarea
+        v-bind="{ rows, id, disabled, placeholder }"
+        v-model="model"
+        :class="[`size-${size}`]"
+        :aria-label="label || title"
+        @blur="handleBlur($event, validationMode == 'blur')"
+      />
+    </div>
+
+    <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 },
+  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 },
+  rows: { type: null, required: false, default: 10 }
+});
+const model = defineModel({ type: String, ...{
+  required: true
+} });
+const { errorMessage, meta, handleBlur, validate } = useField(
+  "input",
+  props.validation,
+  {
+    validateOnValueUpdate: props.validationMode == "change",
+    syncVModel: true
+  }
+);
+defineExpose({ errorMessage, meta, validate });
+</script>
+
+<style lang="scss" scoped>
+.input-wrapper {
+  position: relative;
+
+  textarea {
+    @include input-template;
+    resize: none;
+    display: block;
+  }
+
+  &.error {
+    textarea {
+      @include input-error;
+    }
+  }
+}
+</style>

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

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

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

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

@@ -0,0 +1,108 @@
+<template>
+  <label
+    class="tile-checkbox-container"
+    :class="{
+  checked: typeof model == 'boolean' ? model : model.includes(value)
+}"
+  >
+    <div
+      v-if="image"
+      class="tile-image"
+    >
+      <img :src="image">
+    </div>
+    <div class="tile-label">
+      {{ label }}
+    </div>
+    <div
+      v-if="description || $slots.default"
+      class="tile-description"
+    >
+      <slot v-if="$slots.default" />
+      {{ description }}
+    </div>
+    <div class="tile-checkbox">
+      <FormCheckboxInput
+        v-model="model"
+        v-bind="{ value }"
+      />
+    </div>
+  </label>
+</template>
+
+<script setup>
+import { useField } from "vee-validate";
+const props = defineProps({
+  image: { type: String, required: false },
+  value: { type: null, required: true },
+  label: { type: String, required: true },
+  description: { type: String, required: false },
+  disabled: { type: null, 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, Array], ...{
+  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>
+.tile-checkbox-container {
+  display: grid;
+  grid-template-columns: 32px 1fr 20px;
+  grid-template-rows: 32px auto;
+  align-items: center;
+  gap: 4px 8px;
+  cursor: pointer;
+  background: $white;
+  border: 1px solid $light-grey;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: $box-shadow-s;
+  transition: all 0.3s ease-in-out;
+  user-select: none;
+
+  &.checked {
+    border: 1px solid $main-blue;
+    background-color: $extra-light-blue;
+  }
+
+  .tile-image {
+    img {
+      width: 32px;
+      height: 32px;
+      display: block;
+    }
+  }
+
+  .tile-label {
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 19px;
+    color: $dark-blue;
+    grid-area: 1 / 2 / 2 / 3;
+  }
+
+  .tile-description {
+    grid-area: 2 / 1 / 3 / 4;
+    font-size: 14px;
+    line-height: 17px;
+
+    :deep(a) {
+      color: inherit;
+      font-weight: 700;
+      text-decoration: underline;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+}
+</style>

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

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

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