@zap-wunschlachen/wl-shared-components 1.0.87 → 1.0.88

package/App.vue

@@ -73,7 +73,7 @@
           type="button"
           @click="currentPage = 'validatedinput'"
         >
-          ValidatedInput
+          Input
         </button>
       </nav>
     </header>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zap-wunschlachen/wl-shared-components",
-  "version": "1.0.87",
+  "version": "1.0.88",
   "type": "module",
   "module": "./src/index.ts",
   "types": "./src/index.ts",
@@ -27,7 +27,6 @@
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.10.2",
-    "@types/dompurify": "^3.0.5",
     "@chromatic-com/storybook": "^1.9.0",
     "@playwright/test": "^1.55.0",
     "@storybook/addon-actions": "^8.3.5",
@@ -42,6 +41,7 @@
     "@storybook/vue3-vite": "^8.3.5",
     "@testing-library/user-event": "^14.6.1",
     "@testing-library/vue": "^8.1.0",
+    "@types/dompurify": "^3.0.5",
     "@vitest/coverage-v8": "^3.2.4",
     "@vitest/ui": "^3.2.4",
     "@vue/test-utils": "^2.4.6",
@@ -51,17 +51,18 @@
     "playwright": "^1.55.0",
     "prettier": "^3.3.1",
     "storybook": "^8.3.5",
+    "tsx": "^4.21.0",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
     "vitest": "^3.2.4",
     "vue": "^3.5.11",
-    "wait-on": "^8.0.4",
-    "tsx": "^4.21.0"
+    "wait-on": "^8.0.4"
   },
   "dependencies": {
     "@heroicons/vue": "^2.1.5",
     "@mdi/font": "^7.4.47",
     "@vitejs/plugin-vue": "^5.1.4",
+    "awesome-phonenumber": "^7.8.0",
     "date-fns": "^4.1.0",
     "dompurify": "^3.2.4",
     "flag-icons": "^7.5.0",

package/src/components/Input/Input.vue

@@ -66,6 +66,7 @@
 import { ref, nextTick, computed, inject, watch } from 'vue';
 import './Input.css';
 import { useI18n } from 'vue-i18n';
+import { resolvePreset } from './presets';
 import { siteColors } from "../../utils/index";
 
 // Inject theme colors from ThemeProvider, fallback to global siteColors
@@ -83,6 +84,7 @@ const { t } = useI18n();
 const emit = defineEmits([
   'update:modelValue', // Emits when the input value is updated
   'update:valid', // Emits when the validation state changes
+  'update:formatted', // Emits formatted value when preset has a format function
   'click:prepend', // Emits when the prepend icon is clicked
   'click:append', // Emits when the append icon is clicked
   'click:prepend-inner', // Emits when the prepend inner icon is clicked
@@ -96,8 +98,6 @@ const emit = defineEmits([
 // Generate unique ID for accessibility - connects input to hint/error message
 const inputHintId = `input-hint-${Math.random().toString(36).slice(2, 11)}`;
 
-const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-
 // Define the component props
 const props = defineProps({
   /**
@@ -217,12 +217,13 @@ const props = defineProps({
   },
 
   /**
-   * Activates a built-in validation ruleset.
+   * Activates a built-in validation ruleset. Pass a string shorthand ('email', 'phone'),
+   * a preset factory result, or a custom { rules, format? } object.
    */
   preset: {
-    type: String,
+    type: [String, Object],
     default: undefined,
-    validator: (v) => [undefined, 'email'].includes(v),
+    validator: (v) => v === undefined || typeof v === 'string' || (typeof v === 'object' && Array.isArray(v.rules)),
   },
 
   /**
@@ -246,12 +247,8 @@ const props = defineProps({
 // --- Validation logic ---
 const validationError = ref('');
 
-const presetRules = computed(() => {
-  if (props.preset === 'email') {
-    return [(value) => EMAIL_REGEX.test(value) || t('wl.input.email_error', 'Ungültige E-Mail-Adresse')];
-  }
-  return [];
-});
+const resolvedPreset = computed(() => props.preset ? resolvePreset(props.preset, t) : null);
+const presetRules = computed(() => resolvedPreset.value?.rules ?? []);
 
 const allRules = computed(() => [...presetRules.value, ...props.rules]);
 
@@ -329,6 +326,9 @@ const onAppendInnerClick = () => {
 // Emit the updated value when the input changes, syncing with v-model
 const onInput = (value) => {
   emit('update:modelValue', value);
+  if (resolvedPreset.value?.format) {
+    emit('update:formatted', resolvedPreset.value.format(value));
+  }
   if (allRules.value.length > 0 && props.validateOn === 'input') {
     validate(value);
   }

package/src/components/Input/presets.ts

@@ -0,0 +1,60 @@
+import { parsePhoneNumber } from 'awesome-phonenumber';
+
+export interface InputPreset {
+  rules: ((value: string) => true | string)[];
+  format?: (value: string) => string | undefined;
+}
+
+type TranslateFn = (key: string, fallback: string) => string;
+
+const defaultT: TranslateFn = (_key, fallback) => fallback;
+
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+export function emailPreset(t: TranslateFn = defaultT): InputPreset {
+  return {
+    rules: [
+      (value) => EMAIL_REGEX.test(value) || t('wl.input.email_error', 'Ungültige E-Mail-Adresse'),
+    ],
+  };
+}
+
+export interface PhonePresetOptions {
+  region?: string;
+}
+
+export function phonePreset(options?: PhonePresetOptions, t: TranslateFn = defaultT): InputPreset {
+  const region = options?.region ?? 'DE';
+  return {
+    rules: [
+      (value) => {
+        if (!/^[+\d\s\-()/.]+$/.test(value)) return t('wl.input.phone_error', 'Ungültige Telefonnummer');
+        if (!/^[+0]/.test(value.trim())) return t('wl.input.phone_error', 'Ungültige Telefonnummer');
+        const pn = parsePhoneNumber(value, { regionCode: region });
+        return pn.possible || t('wl.input.phone_error', 'Ungültige Telefonnummer');
+      },
+    ],
+    format: (value) => {
+      if (!value) return undefined;
+      const pn = parsePhoneNumber(value, { regionCode: region });
+      return pn.possible && pn.number?.e164 ? pn.number.e164 : value;
+    },
+  };
+}
+
+const BUILT_IN_PRESETS: Record<string, (t: TranslateFn) => InputPreset> = {
+  email: (t) => emailPreset(t),
+  phone: (t) => phonePreset(undefined, t),
+};
+
+export function resolvePreset(
+  preset: string | InputPreset,
+  t: TranslateFn = defaultT,
+): InputPreset {
+  if (typeof preset === 'string') {
+    const factory = BUILT_IN_PRESETS[preset];
+    if (!factory) throw new Error(`Unknown preset: "${preset}"`);
+    return factory(t);
+  }
+  return preset;
+}

package/src/components/index.ts

@@ -30,6 +30,7 @@ export { default as Dialog } from './Dialog/Dialog.vue';
 export { default as AnamneseAnswerDialog } from './AnamneseAnswerDialog/AnamneseAnswerDialog.vue';
 export { default as EditField } from './EditField/EditField.vue';
 export { default as Input } from './Input/Input.vue';
+export { emailPreset, phonePreset, type InputPreset } from './Input/presets';
 export { default as Modal } from './Modal/Modal.vue';
 export { default as NotificationBubble } from './NotificationBubble/NotificationBubble.vue';
 export { default as OtpInput } from './OtpInput/OtpInput.vue';