@andreyyolkin/keycloakify-vue 0.1.0

package/keycloakify-vue/login/components/PasswordWrapper.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { KcClsx } from 'keycloakify/login/lib/kcClsx';
+import { assert } from 'keycloakify/tools/assert';
+import { ref, watch } from 'vue';
+import type { I18n } from '../i18n/i18n';
+
+const props = defineProps<{
+  kcClsx: KcClsx;
+  i18n: I18n;
+  passwordInputId: string;
+}>();
+
+const isPasswordRevealed = ref(false);
+
+watch(
+  isPasswordRevealed,
+  (revealed) => {
+    const el = document.getElementById(props.passwordInputId);
+    assert(el instanceof HTMLInputElement);
+    el.type = revealed ? 'text' : 'password';
+  },
+  { immediate: false },
+);
+</script>
+
+<template>
+  <div :class="kcClsx('kcInputGroup')">
+    <slot />
+    <button
+      type="button"
+      :class="kcClsx('kcFormPasswordVisibilityButtonClass')"
+      :aria-label="i18n.msgStr(isPasswordRevealed ? 'hidePassword' : 'showPassword')"
+      :aria-controls="passwordInputId"
+      @click="isPasswordRevealed = !isPasswordRevealed"
+    >
+      <i
+        :class="kcClsx(isPasswordRevealed ? 'kcFormPasswordVisibilityIconHide' : 'kcFormPasswordVisibilityIconShow')"
+        aria-hidden="true"
+      ></i>
+    </button>
+  </div>
+</template>

package/keycloakify-vue/login/components/PasswordWrapper.vue.d.ts

@@ -0,0 +1,20 @@
+import type { KcClsx } from 'keycloakify/login/lib/kcClsx';
+import type { I18n } from '../i18n/i18n';
+type __VLS_Props = {
+    kcClsx: KcClsx;
+    i18n: I18n;
+    passwordInputId: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, 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/keycloakify-vue/login/components/SelectTag.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { assert } from 'keycloakify/tools/assert';
+import { computed } from 'vue';
+import { inputLabel } from './inputLabel';
+import type { InputFieldByTypeProps } from './InputFieldByTypeProps';
+
+const props = defineProps<InputFieldByTypeProps>();
+
+const isMultiple = computed(() => props.attribute.annotations.inputType === 'multiselect');
+
+const options = computed<string[]>(() => {
+  const { inputOptionsFromValidation } = props.attribute.annotations;
+  if (inputOptionsFromValidation !== undefined) {
+    assert(typeof inputOptionsFromValidation === 'string');
+    const validator = (props.attribute.validators as Record<string, { options?: string[] }>)[
+      inputOptionsFromValidation
+    ];
+    if (validator?.options !== undefined) {
+      return validator.options;
+    }
+  }
+  return props.attribute.validators.options?.options ?? [];
+});
+
+function onChange(event: Event) {
+  const target = event.target as HTMLSelectElement;
+  props.dispatchFormAction({
+    action: 'update',
+    name: props.attribute.name,
+    valueOrValues: isMultiple.value ? Array.from(target.selectedOptions).map((option) => option.value) : target.value,
+  });
+}
+
+function onBlur() {
+  props.dispatchFormAction({
+    action: 'focus lost',
+    name: props.attribute.name,
+    fieldIndex: undefined,
+  });
+}
+
+const sizeAnno = computed(() =>
+  props.attribute.annotations.inputTypeSize === undefined
+    ? undefined
+    : parseInt(`${props.attribute.annotations.inputTypeSize}`),
+);
+</script>
+
+<template>
+  <select
+    :id="attribute.name"
+    :name="attribute.name"
+    :class="kcClsx('kcInputClass')"
+    :aria-invalid="displayableErrors.length !== 0"
+    :disabled="attribute.readOnly"
+    :multiple="isMultiple"
+    :size="sizeAnno"
+    :value="valueOrValues"
+    @change="onChange"
+    @blur="onBlur"
+  >
+    <option
+      v-if="!isMultiple"
+      value=""
+    ></option>
+    <option
+      v-for="option in options"
+      :key="option"
+      :value="option"
+    >
+      <component :is="inputLabel(i18n, attribute, option)" />
+    </option>
+  </select>
+</template>

package/keycloakify-vue/login/components/SelectTag.vue.d.ts

@@ -0,0 +1,4 @@
+import type { InputFieldByTypeProps } from './InputFieldByTypeProps';
+declare const __VLS_export: import("vue").DefineComponent<InputFieldByTypeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InputFieldByTypeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/keycloakify-vue/login/components/TermsAcceptance.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { kcSanitize } from 'keycloakify/lib/kcSanitize';
+import type { KcContext } from 'keycloakify/login/KcContext';
+import type { KcClsx } from 'keycloakify/login/lib/kcClsx';
+import type { I18n } from '../i18n/i18n';
+
+const props = defineProps<{
+  i18n: I18n;
+  kcClsx: KcClsx;
+  messagesPerField: Pick<KcContext['messagesPerField'], 'existsError' | 'get'>;
+  areTermsAccepted: boolean;
+  onAreTermsAcceptedValueChange: (areTermsAccepted: boolean) => void;
+}>();
+
+function onChange(event: Event) {
+  props.onAreTermsAcceptedValueChange((event.target as HTMLInputElement).checked);
+}
+</script>
+
+<template>
+  <div class="form-group">
+    <div :class="kcClsx('kcInputWrapperClass')">
+      <component :is="i18n.msg('termsTitle')" />
+      <div id="kc-registration-terms-text">
+        <component :is="i18n.msg('termsText')" />
+      </div>
+    </div>
+  </div>
+  <div class="form-group">
+    <div :class="kcClsx('kcLabelWrapperClass')">
+      <input
+        type="checkbox"
+        id="termsAccepted"
+        name="termsAccepted"
+        :class="kcClsx('kcCheckboxInputClass')"
+        :checked="areTermsAccepted"
+        :aria-invalid="messagesPerField.existsError('termsAccepted')"
+        @change="onChange"
+      />
+      <label
+        for="termsAccepted"
+        :class="kcClsx('kcLabelClass')"
+      >
+        <component :is="i18n.msg('acceptTerms')" />
+      </label>
+    </div>
+    <div
+      v-if="messagesPerField.existsError('termsAccepted')"
+      :class="kcClsx('kcLabelWrapperClass')"
+    >
+      <span
+        id="input-error-terms-accepted"
+        :class="kcClsx('kcInputErrorMessageClass')"
+        aria-live="polite"
+        v-html="kcSanitize(messagesPerField.get('termsAccepted'))"
+      ></span>
+    </div>
+  </div>
+</template>

package/keycloakify-vue/login/components/TermsAcceptance.vue.d.ts

@@ -0,0 +1,13 @@
+import type { KcContext } from 'keycloakify/login/KcContext';
+import type { KcClsx } from 'keycloakify/login/lib/kcClsx';
+import type { I18n } from '../i18n/i18n';
+type __VLS_Props = {
+    i18n: I18n;
+    kcClsx: KcClsx;
+    messagesPerField: Pick<KcContext['messagesPerField'], 'existsError' | 'get'>;
+    areTermsAccepted: boolean;
+    onAreTermsAcceptedValueChange: (areTermsAccepted: boolean) => void;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/keycloakify-vue/login/components/TextareaTag.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { assert } from 'keycloakify/tools/assert';
+import { computed } from 'vue';
+import type { InputFieldByTypeProps } from './InputFieldByTypeProps';
+
+const props = defineProps<InputFieldByTypeProps>();
+
+const value = computed(() => {
+  assert(typeof props.valueOrValues === 'string');
+  return props.valueOrValues;
+});
+
+const numAnno = (v: string | number | undefined) => (v === undefined ? undefined : parseInt(`${v}`));
+
+function onChange(event: Event) {
+  const target = event.target as HTMLTextAreaElement;
+  props.dispatchFormAction({
+    action: 'update',
+    name: props.attribute.name,
+    valueOrValues: target.value,
+  });
+}
+
+function onBlur() {
+  props.dispatchFormAction({
+    action: 'focus lost',
+    name: props.attribute.name,
+    fieldIndex: undefined,
+  });
+}
+</script>
+
+<template>
+  <textarea
+    :id="attribute.name"
+    :name="attribute.name"
+    :class="kcClsx('kcInputClass')"
+    :aria-invalid="displayableErrors.length !== 0"
+    :disabled="attribute.readOnly"
+    :cols="numAnno(attribute.annotations.inputTypeCols)"
+    :rows="numAnno(attribute.annotations.inputTypeRows)"
+    :maxlength="numAnno(attribute.annotations.inputTypeMaxlength)"
+    :value="value"
+    @input="onChange"
+    @blur="onBlur"
+  ></textarea>
+</template>

package/keycloakify-vue/login/components/TextareaTag.vue.d.ts

@@ -0,0 +1,4 @@
+import type { InputFieldByTypeProps } from './InputFieldByTypeProps';
+declare const __VLS_export: import("vue").DefineComponent<InputFieldByTypeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InputFieldByTypeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/keycloakify-vue/login/components/UserProfileFormFields.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import type { KcContext } from 'keycloakify/login/KcContext';
+import { computed, watch } from 'vue';
+import FieldErrors from './FieldErrors.vue';
+import GroupLabel from './GroupLabel.vue';
+import InputFieldByType from './InputFieldByType.vue';
+import type { UserProfileFormFieldsProps } from './UserProfileFormFieldsProps';
+import { useUserProfileForm } from '../lib/useUserProfileForm';
+import type { I18n } from '../i18n/i18n';
+
+const props = defineProps<UserProfileFormFieldsProps<KcContext, I18n>>();
+
+const { formState, dispatchFormAction } = useUserProfileForm({
+  kcContext: props.kcContext,
+  i18n: props.i18n,
+  doMakeUserConfirmPassword: props.doMakeUserConfirmPassword,
+});
+
+watch(
+  () => formState.value.isFormSubmittable,
+  (isFormSubmittable) => props.onIsFormSubmittableValueChange(isFormSubmittable),
+  { immediate: true },
+);
+
+const groupNameRef = { current: '' };
+
+const fieldRows = computed(() =>
+  formState.value.formFieldStates.map((formFieldState) => {
+    const { attribute, valueOrValues, displayableErrors } = formFieldState;
+    const isHidden =
+      attribute.annotations.inputType === 'hidden' ||
+      (attribute.name === 'password-confirm' && !props.doMakeUserConfirmPassword);
+    return { attribute, valueOrValues, displayableErrors, isHidden };
+  }),
+);
+</script>
+
+<template>
+  <template
+    v-for="(row, i) in fieldRows"
+    :key="i"
+  >
+    <GroupLabel
+      :attribute="row.attribute"
+      :groupNameRef="groupNameRef"
+      :i18n="i18n"
+      :kcClsx="kcClsx"
+    />
+
+    <slot
+      name="beforeField"
+      :attribute="row.attribute"
+      :dispatchFormAction="dispatchFormAction"
+      :displayableErrors="row.displayableErrors"
+      :valueOrValues="row.valueOrValues"
+      :kcClsx="kcClsx"
+      :i18n="i18n"
+    />
+
+    <div
+      :class="kcClsx('kcFormGroupClass')"
+      :style="{ display: row.isHidden ? 'none' : undefined }"
+    >
+      <div :class="kcClsx('kcLabelWrapperClass')">
+        <label
+          :for="row.attribute.name"
+          :class="kcClsx('kcLabelClass')"
+        >
+          <component :is="i18n.advancedMsg(row.attribute.displayName ?? '')" />
+        </label>
+        <template v-if="row.attribute.required">&nbsp;*</template>
+      </div>
+      <div :class="kcClsx('kcInputWrapperClass')">
+        <div
+          v-if="row.attribute.annotations.inputHelperTextBefore !== undefined"
+          :class="kcClsx('kcInputHelperTextBeforeClass')"
+          :id="`form-help-text-before-${row.attribute.name}`"
+          aria-live="polite"
+        >
+          <component :is="i18n.advancedMsg(row.attribute.annotations.inputHelperTextBefore)" />
+        </div>
+
+        <InputFieldByType
+          :attribute="row.attribute"
+          :valueOrValues="row.valueOrValues"
+          :displayableErrors="row.displayableErrors"
+          :dispatchFormAction="dispatchFormAction"
+          :kcClsx="kcClsx"
+          :i18n="i18n"
+        />
+
+        <FieldErrors
+          :attribute="row.attribute"
+          :displayableErrors="row.displayableErrors"
+          :kcClsx="kcClsx"
+        />
+
+        <div
+          v-if="row.attribute.annotations.inputHelperTextAfter !== undefined"
+          :class="kcClsx('kcInputHelperTextAfterClass')"
+          :id="`form-help-text-after-${row.attribute.name}`"
+          aria-live="polite"
+        >
+          <component :is="i18n.advancedMsg(row.attribute.annotations.inputHelperTextAfter)" />
+        </div>
+
+        <slot
+          name="afterField"
+          :attribute="row.attribute"
+          :dispatchFormAction="dispatchFormAction"
+          :displayableErrors="row.displayableErrors"
+          :valueOrValues="row.valueOrValues"
+          :kcClsx="kcClsx"
+          :i18n="i18n"
+        />
+      </div>
+    </div>
+  </template>
+</template>

package/keycloakify-vue/login/components/UserProfileFormFields.vue.d.ts

@@ -0,0 +1,33 @@
+import type { KcContext } from 'keycloakify/login/KcContext';
+import type { UserProfileFormFieldsProps } from './UserProfileFormFieldsProps';
+import type { I18n } from '../i18n/i18n';
+type __VLS_Props = UserProfileFormFieldsProps<KcContext, I18n>;
+declare var __VLS_6: {
+    attribute: import("keycloakify/login/KcContext").Attribute;
+    dispatchFormAction: (action: import("../lib/useUserProfileForm").FormAction) => void;
+    displayableErrors: import("../lib/useUserProfileForm").FormFieldError[];
+    valueOrValues: string | string[];
+    kcClsx: (...args: import("keycloakify/tools/clsx_withTransform.js").CxArg<import("keycloakify/login/lib/kcClsx.js").ClassKey>[]) => string;
+    i18n: I18n;
+}, __VLS_33: {
+    attribute: import("keycloakify/login/KcContext").Attribute;
+    dispatchFormAction: (action: import("../lib/useUserProfileForm").FormAction) => void;
+    displayableErrors: import("../lib/useUserProfileForm").FormFieldError[];
+    valueOrValues: string | string[];
+    kcClsx: (...args: import("keycloakify/tools/clsx_withTransform.js").CxArg<import("keycloakify/login/lib/kcClsx.js").ClassKey>[]) => string;
+    i18n: I18n;
+};
+type __VLS_Slots = {} & {
+    beforeField?: (props: typeof __VLS_6) => any;
+} & {
+    afterField?: (props: typeof __VLS_33) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, 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/keycloakify-vue/login/components/UserProfileFormFieldsProps.d.ts

@@ -0,0 +1,22 @@
+import type { Attribute } from 'keycloakify/login/KcContext';
+import type { KcClsx } from 'keycloakify/login/lib/kcClsx';
+import type { FormAction, FormFieldError } from '../lib/useUserProfileForm';
+import type { I18n } from '../i18n/i18n';
+export type UserProfileFormFieldsProps<KcContext = any, I18nType = I18n> = {
+    kcContext: Extract<KcContext, {
+        profile: unknown;
+    }>;
+    i18n: I18nType;
+    kcClsx: KcClsx;
+    onIsFormSubmittableValueChange: (isFormSubmittable: boolean) => void;
+    doMakeUserConfirmPassword: boolean;
+};
+/** Scoped-slot payload for the optional `beforeField` / `afterField` slots. */
+export type BeforeAfterFieldSlotProps = {
+    attribute: Attribute;
+    dispatchFormAction: (action: FormAction) => void;
+    displayableErrors: FormFieldError[];
+    valueOrValues: string | string[];
+    kcClsx: KcClsx;
+    i18n: I18n;
+};

package/keycloakify-vue/login/components/inputLabel.d.ts

@@ -0,0 +1,4 @@
+import type { Attribute } from 'keycloakify/login/KcContext';
+import { type VNode } from 'vue';
+import type { I18n } from '../i18n/i18n';
+export declare const inputLabel: (i18n: I18n, attribute: Attribute, option: string) => VNode;

package/keycloakify-vue/login/components/inputLabel.js

@@ -0,0 +1,15 @@
+import { createTextVNode } from "vue";
+const inputLabel = (i18n, attribute, option) => {
+  const { advancedMsg } = i18n;
+  if (attribute.annotations.inputOptionLabels !== void 0) {
+    const { inputOptionLabels } = attribute.annotations;
+    return advancedMsg(inputOptionLabels[option] ?? option);
+  }
+  if (attribute.annotations.inputOptionLabelsI18nPrefix !== void 0) {
+    return advancedMsg(`${attribute.annotations.inputOptionLabelsI18nPrefix}.${option}`);
+  }
+  return createTextVNode(option);
+};
+export {
+  inputLabel
+};

package/keycloakify-vue/login/i18n/i18n.d.ts

@@ -0,0 +1,11 @@
+import type { GenericI18n_noJsx } from 'keycloakify/login/i18n/noJsx/GenericI18n_noJsx';
+import { type MessageKey as MessageKey_defaultSet } from 'keycloakify/login/i18n/messages_defaultSet/types';
+import type { VNode } from 'vue';
+/** INTERNAL: DO NOT IMPORT THIS */
+export type GenericI18n_vue<MessageKey extends string, LanguageTag extends string> = GenericI18n_noJsx<MessageKey, LanguageTag> & {
+    /** Same as msgStr but returns a VNode with the html string rendered as html. */
+    msg: (key: MessageKey_defaultSet, ...args: (string | undefined)[]) => VNode;
+    /** Same as advancedMsgStr but returns a VNode with the html string rendered as html. */
+    advancedMsg: (key: string, ...args: (string | undefined)[]) => VNode;
+};
+export type I18n = GenericI18n_vue<MessageKey_defaultSet, string>;

package/keycloakify-vue/login/i18n/i18nBuilder.d.ts

@@ -0,0 +1,18 @@
+import type { LanguageTag as LanguageTag_defaultSet, MessageKey as MessageKey_defaultSet } from 'keycloakify/login/i18n/messages_defaultSet/types';
+import { type ReturnTypeOfCreateUseI18n } from './useI18n';
+export type I18nBuilder<ThemeName extends string = never, MessageKey_themeDefined extends string = never, LanguageTag_notInDefaultSet extends string = never, ExcludedMethod extends 'withThemeName' | 'withExtraLanguages' | 'withCustomTranslations' = never> = Omit<{
+    withThemeName: <ThemeName extends string>() => I18nBuilder<ThemeName, MessageKey_themeDefined, LanguageTag_notInDefaultSet, ExcludedMethod | 'withThemeName'>;
+    withExtraLanguages: <LanguageTag_notInDefaultSet extends string>(extraLanguageTranslations: {
+        [LanguageTag in LanguageTag_notInDefaultSet]: {
+            label: string;
+            getMessages: () => Promise<{
+                default: Record<MessageKey_defaultSet, string>;
+            }>;
+        };
+    }) => I18nBuilder<ThemeName, MessageKey_themeDefined, LanguageTag_notInDefaultSet, ExcludedMethod | 'withExtraLanguages'>;
+    withCustomTranslations: <MessageKey_themeDefined extends string>(messagesByLanguageTag_themeDefined: Partial<{
+        [LanguageTag in LanguageTag_defaultSet | LanguageTag_notInDefaultSet]: Record<MessageKey_themeDefined, string | Record<ThemeName, string>>;
+    }>) => I18nBuilder<ThemeName, MessageKey_themeDefined, LanguageTag_notInDefaultSet, ExcludedMethod | 'withCustomTranslations'>;
+    build: () => ReturnTypeOfCreateUseI18n<MessageKey_themeDefined, LanguageTag_notInDefaultSet>;
+}, ExcludedMethod>;
+export declare const i18nBuilder: I18nBuilder<never, never, never, never>;

package/keycloakify-vue/login/i18n/i18nBuilder.js

@@ -0,0 +1,29 @@
+import { createUseI18n } from "./useI18n";
+function createI18nBuilder(params) {
+  const i18nBuilder2 = {
+    withThemeName: () => createI18nBuilder({
+      extraLanguageTranslations: params.extraLanguageTranslations,
+      messagesByLanguageTag_themeDefined: params.messagesByLanguageTag_themeDefined
+    }),
+    withExtraLanguages: (extraLanguageTranslations) => createI18nBuilder({
+      extraLanguageTranslations,
+      messagesByLanguageTag_themeDefined: params.messagesByLanguageTag_themeDefined
+    }),
+    withCustomTranslations: (messagesByLanguageTag_themeDefined) => createI18nBuilder({
+      extraLanguageTranslations: params.extraLanguageTranslations,
+      messagesByLanguageTag_themeDefined
+    }),
+    build: () => createUseI18n({
+      extraLanguageTranslations: params.extraLanguageTranslations,
+      messagesByLanguageTag_themeDefined: params.messagesByLanguageTag_themeDefined
+    })
+  };
+  return i18nBuilder2;
+}
+const i18nBuilder = createI18nBuilder({
+  extraLanguageTranslations: {},
+  messagesByLanguageTag_themeDefined: {}
+});
+export {
+  i18nBuilder
+};

package/keycloakify-vue/login/i18n/index.d.ts

@@ -0,0 +1 @@
+export * from './i18n';

package/keycloakify-vue/login/i18n/index.js

@@ -0,0 +1 @@
+export * from "./i18n";

package/keycloakify-vue/login/i18n/useI18n.d.ts

@@ -0,0 +1,28 @@
+import { type LanguageTag as LanguageTag_defaultSet, type MessageKey as MessageKey_defaultSet } from 'keycloakify/login/i18n/messages_defaultSet/types';
+import { type KcContextLike } from 'keycloakify/login/i18n/noJsx/getI18n';
+import { type Ref } from 'vue';
+import type { GenericI18n_vue } from './i18n';
+export type ReturnTypeOfCreateUseI18n<MessageKey_themeDefined extends string, LanguageTag_notInDefaultSet extends string> = {
+    useI18n: (params: {
+        kcContext: KcContextLike;
+    }) => {
+        i18n: Ref<GenericI18n_vue<MessageKey_defaultSet | MessageKey_themeDefined, LanguageTag_defaultSet | LanguageTag_notInDefaultSet>>;
+    };
+    ofTypeI18n: GenericI18n_vue<MessageKey_defaultSet | MessageKey_themeDefined, LanguageTag_defaultSet | LanguageTag_notInDefaultSet>;
+};
+export type { KcContextLike };
+export declare function createUseI18n<ThemeName extends string = string, MessageKey_themeDefined extends string = never, LanguageTag_notInDefaultSet extends string = never>(params: {
+    extraLanguageTranslations: {
+        [languageTag in LanguageTag_notInDefaultSet]: {
+            label: string;
+            getMessages: () => Promise<{
+                default: Record<MessageKey_defaultSet, string>;
+            }>;
+        };
+    };
+    messagesByLanguageTag_themeDefined: Partial<{
+        [languageTag in LanguageTag_defaultSet | LanguageTag_notInDefaultSet]: {
+            [key in MessageKey_themeDefined]: string | Record<ThemeName, string>;
+        };
+    }>;
+}): ReturnTypeOfCreateUseI18n<MessageKey_themeDefined, LanguageTag_notInDefaultSet>;

package/keycloakify-vue/login/i18n/useI18n.js

@@ -0,0 +1,67 @@
+import { createGetI18n } from "keycloakify/login/i18n/noJsx/getI18n";
+import { kcSanitize } from "keycloakify/lib/kcSanitize";
+import { Reflect } from "tsafe/Reflect";
+import { getCurrentInstance, h, onMounted, onUnmounted, ref } from "vue";
+function createUseI18n(params) {
+  const { extraLanguageTranslations, messagesByLanguageTag_themeDefined } = params;
+  const cache = /* @__PURE__ */ new WeakMap();
+  function renderHtmlString(htmlString, msgKey) {
+    const hasBlockLevelTag = htmlString.includes("<") && htmlString.includes(">") && ["div", "section", "article", "ul", "ol"].some((tagName) => htmlString.includes(`<${tagName}`));
+    const elementName = hasBlockLevelTag ? "div" : "span";
+    return h(elementName, {
+      "data-kc-msg": msgKey,
+      innerHTML: kcSanitize(htmlString)
+    });
+  }
+  function withVue(i18n_noJsx) {
+    const cached = cache.get(i18n_noJsx);
+    if (cached !== void 0) {
+      return cached;
+    }
+    const i18n = {
+      ...i18n_noJsx,
+      msg: (msgKey, ...args) => renderHtmlString(i18n_noJsx.msgStr(msgKey, ...args), msgKey),
+      advancedMsg: (msgKey, ...args) => renderHtmlString(i18n_noJsx.advancedMsgStr(msgKey, ...args), msgKey)
+    };
+    cache.set(i18n_noJsx, i18n);
+    return i18n;
+  }
+  if (typeof document !== "undefined" && document.querySelector("style[data-kc-i18n]") === null) {
+    const styleElement = document.createElement("style");
+    styleElement.setAttribute("data-kc-i18n", "");
+    styleElement.textContent = `div[data-kc-msg] { display: inline-block; }`;
+    document.head.prepend(styleElement);
+  }
+  const { getI18n } = createGetI18n({
+    extraLanguageTranslations,
+    messagesByLanguageTag_themeDefined
+  });
+  function useI18n(params2) {
+    const { kcContext } = params2;
+    const { i18n, prI18n_currentLanguage } = getI18n({ kcContext });
+    const i18nRef = ref(withVue(i18n));
+    if (getCurrentInstance() !== null) {
+      onMounted(() => {
+        let isActive = true;
+        onUnmounted(() => {
+          isActive = false;
+        });
+        prI18n_currentLanguage?.then((i18n_currentLanguage) => {
+          if (!isActive) {
+            return;
+          }
+          i18nRef.value = withVue(i18n_currentLanguage);
+        });
+      });
+    } else {
+      prI18n_currentLanguage?.then((i18n_currentLanguage) => {
+        i18nRef.value = withVue(i18n_currentLanguage);
+      });
+    }
+    return { i18n: i18nRef };
+  }
+  return { useI18n, ofTypeI18n: Reflect() };
+}
+export {
+  createUseI18n
+};

package/keycloakify-vue/login/index.d.ts

@@ -0,0 +1,5 @@
+export type { ExtendKcContext } from 'keycloakify/login/KcContext';
+export { i18nBuilder } from './i18n/i18nBuilder';
+export { default as DefaultPage } from './DefaultPage.vue';
+export { default as Template } from './Template.vue';
+export { default as UserProfileFormFields } from './components/UserProfileFormFields.vue';

package/keycloakify-vue/login/index.js

@@ -0,0 +1,10 @@
+import { i18nBuilder } from "./i18n/i18nBuilder";
+import { default as default2 } from "./DefaultPage.vue";
+import { default as default3 } from "./Template.vue";
+import { default as default4 } from "./components/UserProfileFormFields.vue";
+export {
+  default2 as DefaultPage,
+  default3 as Template,
+  default4 as UserProfileFormFields,
+  i18nBuilder
+};