cja-phoenix 1.2.39 → 1.2.41

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

@@ -0,0 +1,181 @@
+<template>
+  <div class="input-container">
+    <label
+      class="input-wrapper"
+      :class="[
+  `radio-style-${radioStyle}`,
+  `size-${size}`,
+  {
+    checked: model == value,
+    disabled,
+    error: error || errorMessage
+  }
+]"
+    >
+      <input
+        v-bind="{ name, value, disabled }"
+        v-model="model"
+        type="radio"
+        :name="name"
+        :aria-label="label"
+      />
+      <div class="radio-icon" />
+      <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 }"
+    />
+  </div>
+</template>
+
+<script setup>
+import { useField } from "vee-validate";
+const props = defineProps({
+  name: { type: String, required: true },
+  value: { type: null, required: true },
+  label: { type: String, required: true },
+  disabled: { type: null, required: false },
+  size: { type: String, required: false },
+  error: { type: Boolean, required: false },
+  errorDisplay: { type: Boolean, required: false, default: true },
+  validation: { type: Object, required: false },
+  validationMode: { type: String, required: false },
+  radioStyle: { type: String, required: false, default: "default" }
+});
+const model = defineModel({
+  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;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 8px;
+  cursor: pointer;
+  margin: 0;
+  font-weight: 400;
+
+  input {
+    display: none;
+  }
+
+  &.radio-style-default {
+    .radio-icon {
+      width: 20px;
+      height: 20px;
+      flex-shrink: 0;
+      border: 1px solid $blue-grey;
+      border-radius: 50%;
+      transition: all 0.2s linear;
+      flex-shrink: 0;
+    }
+
+    .text-container {
+      line-height: 20px;
+      white-space: pre-line;
+
+      a {
+        color: inherit;
+        font-weight: 700;
+        text-decoration: underline;
+
+        &:hover {
+          text-decoration: none;
+        }
+      }
+    }
+
+    &.size-sm {
+      .text-container {
+        font-size: 14px;
+        line-height: 20px;
+      }
+    }
+
+    &.size-md,
+    &.size-lg {
+      .text-container {
+        font-size: 16px;
+        line-height: 20px;
+      }
+    }
+
+    &.checked {
+      .radio-icon {
+        border: 6px solid $main-blue;
+      }
+    }
+
+    &.disabled {
+      .radio-icon {
+        background: $dark-white;
+        border-color: $input-disabled-color;
+      }
+    }
+  }
+
+  &.radio-style-button {
+    justify-content: center;
+    padding: 6px 12px;
+    border-radius: 8px;
+    border: 1px solid $light-grey;
+    transition: all 0.2s ease-in-out;
+
+    .radio-icon {
+      display: none;
+    }
+
+    .text-container {
+      font-size: 14px;
+      line-height: 30px;
+      font-weight: 700;
+      text-align: center;
+    }
+
+    &.checked {
+      border-color: $main-blue;
+      color: $extra-dark-blue;
+      background: $extra-light-blue;
+    }
+
+    &.size-sm {
+      height: 36px;
+    }
+
+    &.size-md {
+      height: 44px;
+    }
+  }
+
+  .text-container {
+    user-select: none;
+  }
+
+  &.error {
+    &.radio-style-default {
+      .radio-icon {
+        border-color: $input-border-error-color;
+      }
+    }
+
+    &.radio-style-button {
+      border-color: $input-border-error-color;
+    }
+  }
+}
+</style>

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

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

@@ -0,0 +1,57 @@
+import { type InputHTMLAttributes } from "vue";
+import type { RadioOption } 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: RadioOption[] | undefined;
+    name: string;
+    radioStyle?: {
+        variant: "default" | "button";
+        breakDisplay?: {
+            xs?: number;
+            sm?: number;
+            md?: number;
+            lg?: number;
+            xl?: number;
+        };
+    };
+};
+type __VLS_ModelProps = {
+    modelValue: InputHTMLAttributes["value"];
+};
+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" | "none";
+    layout: "vertical" | "horizontal";
+    listLayout: "vertical" | "horizontal";
+    radioStyle: {
+        variant: "default" | "button";
+        breakDisplay?: {
+            xs?: number;
+            sm?: number;
+            md?: number;
+            lg?: number;
+            xl?: number;
+        };
+    };
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,130 @@
+<template>
+  <FormStructureContainer v-bind="{ layout }">
+    <FormStructureTitle
+      v-if="title"
+      v-bind="{ title, tooltip, size, disabled }"
+    />
+    <ul
+      v-if="options"
+      class="input-list"
+      :class="[
+  `size-${size}`,
+  `layout-${listLayout}`,
+  `radio-style-${radioStyle.variant}`,
+  {
+    error: errorMessage
+  }
+]"
+      :style="cssVars"
+    >
+      <li v-for="option in options" :key="option.value">
+        <FormRadioInput
+          v-bind="{
+  ...option,
+  name,
+  size,
+  disabled,
+  error: errorMessage != void 0,
+  errorDisplay: false,
+  radioStyle: radioStyle.variant
+}"
+          v-model="model"
+        />
+      </li>
+    </ul>
+    <FormStructureError
+      v-if="errorMessage && errorDisplay"
+      v-bind="{ size, errorMessage }"
+    />
+  </FormStructureContainer>
+</template>
+
+<script setup>
+import { computed } from "vue";
+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 },
+  radioStyle: { type: Object, required: false, default: () => ({
+    variant: "default"
+  }) }
+});
+const model = defineModel({ type: null, ...{
+  required: true
+} });
+const { errorMessage, meta, validate } = useField("input", props.validation, {
+  validateOnValueUpdate: props.validationMode == "change",
+  syncVModel: true
+});
+const cssVars = computed(() => {
+  const cssVars2 = [];
+  const breakpoints = ["xs", "sm", "md", "lg", "xl"];
+  breakpoints.forEach((b, i) => {
+    const propCols = props.radioStyle?.breakDisplay?.[b];
+    let cols = propCols || 1;
+    if (!propCols && i > 0 && cssVars2[i - 1]) {
+      cols = cssVars2[i - 1]?.[1];
+    }
+    cssVars2.push([`--${b}-columns`, cols]);
+  });
+  return Object.fromEntries(cssVars2);
+});
+defineExpose({ errorMessage, meta, validate });
+</script>
+
+<style lang="scss" scoped>
+.input-list {
+  margin: 0;
+  list-style: none;
+  padding: 0;
+
+  &.radio-style-button {
+    display: grid;
+    gap: 12px;
+    grid-template-columns: repeat(var(--xs-columns), 1fr);
+
+    @include screen-xs-min {
+      grid-template-columns: repeat(var(--sm-columns), 1fr);
+    }
+
+    @include screen-md-min {
+      grid-template-columns: repeat(var(--md-columns), 1fr);
+    }
+
+    @include screen-lg-min {
+      grid-template-columns: repeat(var(--lg-columns), 1fr);
+    }
+
+    @include screen-xl-min {
+      grid-template-columns: repeat(var(--xl-columns), 1fr);
+    }
+  }
+
+  &.radio-style-default {
+    display: flex;
+
+    &.size-md {
+      padding: 11px 0 0;
+    }
+
+    &.layout-vertical {
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    &.layout-horizontal {
+      gap: 8px 16px;
+      padding: 7px 0;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,57 @@
+import { type InputHTMLAttributes } from "vue";
+import type { RadioOption } 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: RadioOption[] | undefined;
+    name: string;
+    radioStyle?: {
+        variant: "default" | "button";
+        breakDisplay?: {
+            xs?: number;
+            sm?: number;
+            md?: number;
+            lg?: number;
+            xl?: number;
+        };
+    };
+};
+type __VLS_ModelProps = {
+    modelValue: InputHTMLAttributes["value"];
+};
+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" | "none";
+    layout: "vertical" | "horizontal";
+    listLayout: "vertical" | "horizontal";
+    radioStyle: {
+        variant: "default" | "button";
+        breakDisplay?: {
+            xs?: number;
+            sm?: number;
+            md?: number;
+            lg?: number;
+            xl?: number;
+        };
+    };
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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