{"version":3,"file":"AppInput.vue_vue_type_script_setup_true_lang-DJeUIWF4.js","sources":["../../src/components/forms/AppInput.vue"],"sourcesContent":["<!--\n  # AppInput\n  This component is a wrapper around a native input element. It adds some extra functionality like validation and error messages.\n\n  ## Props\n  - `modelValue` (string | number): The value of the input. This is a required prop.\n  - `type` (`'password' | 'email' | 'text' | 'date' | 'time' | 'number' | 'url'`): The type of the input. Defaults to `'text'`.\n  - `name` (string): The name of the input. Defaults to `'unknown'`.\n  - `label` (string): The label of the input.\n  - `infoMessage` (string): An info message to display below the input.\n  - `required` (boolean): Whether the input is required or not.\n  - `min` (number | string): The minimum value of the input.\n  - `max` (number | string): The maximum value of the input.\n  - `sameAs` (number | string): The value that this input should be the same as.\n  - `pattern` (string): A regex pattern that the input value should match.\n  - `hideErrorMessage` (boolean): Whether or not to hide the error message. Defaults to `false`.\n  - `prefix` (string): A prefix to display before the input.\n  - `suffix` (string): A suffix to display after the input.\n\n  ## Events\n  - `update:modelValue` (value: string | number): Emitted when the value of the input changes.\n  - `update:isValid` (isValid: boolean): Emitted when the isValid state of the input changes.\n\n  ## Slots\n  - `before` (Optional): A slot to display before the input.\n  - `after` (Optional): A slot to display after the input.\n\n -->\n<template>\n  <AppLabel v-if=\"label\" :label=\"label\" :required=\"required\" />\n  <div class=\"flex items-center\" :class=\"disabled && 'opacity-60'\">\n    <div v-if=\"$slots.before\" class=\"flex-0 mr-2\"><slot name=\"before\" /></div>\n    <div\n      class=\"flex flex-1 items-center overflow-hidden rounded border focus-within:shadow-input\"\n      :class=\"\n        hasError\n          ? 'border-danger-70 bg-danger-10'\n          : disabled\n            ? 'border-primary-40 bg-grey-lighter'\n            : 'border-primary-40 bg-white'\n      \"\n    >\n      <span v-if=\"prefix\" class=\"flex-0 px-2\">{{ prefix }}</span>\n      <input\n        v-model.trim=\"value\"\n        class=\"w-full flex-1 bg-white/0 p-2 leading-[20px] focus:outline-none\"\n        :class=\"{\n          'border-l border-primary-40': prefix,\n          'border-r border-primary-40': suffix,\n        }\"\n        :type=\"type\"\n        :name=\"name\"\n        :required=\"required\"\n        :disabled=\"disabled\"\n        :min=\"min\"\n        :max=\"max\"\n        :pattern=\"pattern\"\n        v-bind=\"$attrs\"\n        @blur=\"validation.$touch\"\n      />\n      <span v-if=\"suffix\" class=\"flex-0 px-2\">{{ suffix }}</span>\n    </div>\n    <div v-if=\"$slots.after\" class=\"flex-0 ml-2\"><slot name=\"after\" /></div>\n  </div>\n\n  <AppInputError\n    v-if=\"hasError && !hideErrorMessage\"\n    :message=\"validation.$errors[0].$message\"\n  />\n  <AppInputHelp v-if=\"infoMessage\" :message=\"infoMessage\" />\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, watch } from 'vue';\nimport { useI18n } from 'vue-i18n';\nimport useVuelidate from '@vuelidate/core';\nimport {\n  email,\n  helpers,\n  requiredIf,\n  sameAs as sameAsValidator,\n  url,\n} from '@vuelidate/validators';\nimport AppInputHelp from './AppInputHelp.vue';\nimport AppLabel from './AppLabel.vue';\nimport AppInputError from './AppInputError.vue';\n\nconst emit = defineEmits(['update:modelValue', 'update:validation']);\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: number | string;\n    type?: 'password' | 'email' | 'text' | 'date' | 'time' | 'number' | 'url';\n    name?: string;\n    label?: string;\n    infoMessage?: string;\n    required?: boolean;\n    disabled?: boolean;\n    min?: number | string;\n    max?: number | string;\n    sameAs?: number | string;\n    pattern?: string;\n    hideErrorMessage?: boolean;\n    prefix?: string;\n    suffix?: string;\n  }>(),\n  {\n    modelValue: undefined,\n    type: 'text',\n    name: 'unknown',\n    label: undefined,\n    infoMessage: undefined,\n    min: undefined,\n    max: undefined,\n    sameAs: undefined,\n    pattern: undefined,\n    prefix: undefined,\n    suffix: undefined,\n  }\n);\n\nconst { t } = useI18n();\n\nconst value = computed({\n  get: () => props.modelValue,\n  set: (newValue) => {\n    emit(\n      'update:modelValue',\n      props.type === 'number' ? Number(newValue) : newValue\n    );\n  },\n});\n\nfunction errorT(key: string, context?: Record<string, unknown>): string {\n  const keypath = `form.errors.${props.name}.${key}`;\n  return context ? t(keypath, context) : t(keypath);\n}\n\n/**\n * Check if the value is greater than or equal to the min value depending on the type of the input.\n * @param value The value to check\n * @returns Whether the value is greater than or equal to the min value\n */\nconst checkMin = (value: number | string) => {\n  if (props.type === 'number') {\n    return props.min === undefined || value >= props.min;\n  }\n\n  // TODO: `min` for type `date` is untested\n  if (props.type === 'date') {\n    return (\n      props.min === undefined ||\n      new Date(value.toString()).getTime() >= new Date(props.min).getTime()\n    );\n  }\n\n  // TODO: `min` for type `time` is untested\n  if (props.type === 'time') {\n    return (\n      props.min === undefined ||\n      new Date(`1970-01-01T${value.toString()}`).getTime() >=\n        new Date(`1970-01-01T${props.min}`).getTime()\n    );\n  }\n\n  // text, email, ...\n  return (\n    props.min === undefined || (value as string).length >= Number(props.min)\n  );\n};\n\n/**\n * Check if the value is less than or equal to the max value depending on the type of the input.\n * @param value The value to check\n * @returns Whether the value is less than or equal to the max value\n */\nconst checkMax = (value: number | string) => {\n  if (props.type === 'number') {\n    return props.max === undefined || value <= props.max;\n  }\n\n  // TODO: `max` for type `date` is untested\n  if (props.type === 'date') {\n    return (\n      props.max === undefined ||\n      new Date(value.toString()).getTime() <= new Date(props.max).getTime()\n    );\n  }\n\n  // TODO: `max` for type `time` is untested\n  if (props.type === 'time') {\n    return (\n      props.max === undefined ||\n      new Date(`1970-01-01T${value.toString()}`).getTime() <=\n        new Date(`1970-01-01T${props.max}`).getTime()\n    );\n  }\n\n  // text, email, ...\n  return (\n    props.max === undefined || (value as string).length <= Number(props.max)\n  );\n};\n\nconst rules = computed(() => ({\n  v: {\n    required: helpers.withMessage(\n      errorT('required'),\n      requiredIf(!!props.required)\n    ),\n    ...(props.type === 'email' && {\n      email: helpers.withMessage(errorT('email'), email),\n    }),\n    ...(props.type === 'url' && {\n      url: helpers.withMessage(errorT('url'), url),\n    }),\n    ...(props.type === 'password' && {\n      password: helpers.withMessage(errorT('password'), isPassword),\n    }),\n    ...(props.min !== undefined && {\n      min: helpers.withMessage(\n        () => errorT('min', { min: props.min }),\n        checkMin\n      ),\n    }),\n    ...(props.max !== undefined && {\n      max: helpers.withMessage(\n        () => errorT('max', { max: props.max }),\n        checkMax\n      ),\n    }),\n    ...(props.sameAs !== undefined && {\n      sameAs: helpers.withMessage(\n        errorT('sameAs'),\n        sameAsValidator(props.sameAs)\n      ),\n    }),\n    ...(props.pattern !== undefined && {\n      pattern: helpers.withMessage(\n        errorT('pattern'),\n        (value: number | string) =>\n          new RegExp(`^(?:${props.pattern})$`).test(value.toString())\n      ),\n    }),\n  },\n}));\n\nconst validation = useVuelidate(rules, { v: value });\nconst hasError = computed(() => validation.value.$errors.length > 0);\n\nfunction isPassword(value: string) {\n  if (!value) return true;\n  return (\n    value.length >= 8 &&\n    /[0-9]/.test(value) &&\n    /[A-Z]/.test(value) &&\n    /[a-z]/.test(value)\n  );\n}\n\nwatch(validation, (newState) => {\n  emit('update:validation', !newState.$invalid);\n});\n</script>\n"],"names":["emit","__emit","props","__props","t","useI18n","value","computed","newValue","errorT","key","context","keypath","checkMin","checkMax","rules","helpers","requiredIf","email","url","isPassword","sameAsValidator","validation","useVuelidate","hasError","watch","newState"],"mappings":"4+BAuFA,MAAMA,EAAOC,EACPC,EAAQC,EAgCR,CAAE,EAAAC,CAAE,EAAIC,EAAQ,EAEhBC,EAAQC,EAAS,CACrB,IAAK,IAAML,EAAM,WACjB,IAAMM,GAAa,CACjBR,EACE,oBACAE,EAAM,OAAS,SAAW,OAAOM,CAAQ,EAAIA,CAC/C,CAAA,CACF,CACD,EAEQ,SAAAC,EAAOC,EAAaC,EAA2C,CACtE,MAAMC,EAAU,eAAeV,EAAM,IAAI,IAAIQ,CAAG,GAChD,OAAOC,EAAUP,EAAEQ,EAASD,CAAO,EAAIP,EAAEQ,CAAO,CAAA,CAQ5C,MAAAC,EAAYP,GACZJ,EAAM,OAAS,SACVA,EAAM,MAAQ,QAAaI,GAASJ,EAAM,IAI/CA,EAAM,OAAS,OAEfA,EAAM,MAAQ,QACd,IAAI,KAAKI,EAAM,SAAU,CAAA,EAAE,WAAa,IAAI,KAAKJ,EAAM,GAAG,EAAE,QAAQ,EAKpEA,EAAM,OAAS,OAEfA,EAAM,MAAQ,QACd,IAAI,KAAK,cAAcI,EAAM,SAAU,CAAA,EAAE,EAAE,QAAQ,OAC7C,KAAK,cAAcJ,EAAM,GAAG,EAAE,EAAE,QAAQ,EAMhDA,EAAM,MAAQ,QAAcI,EAAiB,QAAU,OAAOJ,EAAM,GAAG,EASrEY,EAAYR,GACZJ,EAAM,OAAS,SACVA,EAAM,MAAQ,QAAaI,GAASJ,EAAM,IAI/CA,EAAM,OAAS,OAEfA,EAAM,MAAQ,QACd,IAAI,KAAKI,EAAM,SAAU,CAAA,EAAE,WAAa,IAAI,KAAKJ,EAAM,GAAG,EAAE,QAAQ,EAKpEA,EAAM,OAAS,OAEfA,EAAM,MAAQ,QACd,IAAI,KAAK,cAAcI,EAAM,SAAU,CAAA,EAAE,EAAE,QAAQ,OAC7C,KAAK,cAAcJ,EAAM,GAAG,EAAE,EAAE,QAAQ,EAMhDA,EAAM,MAAQ,QAAcI,EAAiB,QAAU,OAAOJ,EAAM,GAAG,EAIrEa,EAAQR,EAAS,KAAO,CAC5B,EAAG,CACD,SAAUS,EAAQ,YAChBP,EAAO,UAAU,EACjBQ,EAAW,CAAC,CAACf,EAAM,QAAQ,CAC7B,EACA,GAAIA,EAAM,OAAS,SAAW,CAC5B,MAAOc,EAAQ,YAAYP,EAAO,OAAO,EAAGS,CAAK,CACnD,EACA,GAAIhB,EAAM,OAAS,OAAS,CAC1B,IAAKc,EAAQ,YAAYP,EAAO,KAAK,EAAGU,CAAG,CAC7C,EACA,GAAIjB,EAAM,OAAS,YAAc,CAC/B,SAAUc,EAAQ,YAAYP,EAAO,UAAU,EAAGW,CAAU,CAC9D,EACA,GAAIlB,EAAM,MAAQ,QAAa,CAC7B,IAAKc,EAAQ,YACX,IAAMP,EAAO,MAAO,CAAE,IAAKP,EAAM,IAAK,EACtCW,CAAA,CAEJ,EACA,GAAIX,EAAM,MAAQ,QAAa,CAC7B,IAAKc,EAAQ,YACX,IAAMP,EAAO,MAAO,CAAE,IAAKP,EAAM,IAAK,EACtCY,CAAA,CAEJ,EACA,GAAIZ,EAAM,SAAW,QAAa,CAChC,OAAQc,EAAQ,YACdP,EAAO,QAAQ,EACfY,EAAgBnB,EAAM,MAAM,CAAA,CAEhC,EACA,GAAIA,EAAM,UAAY,QAAa,CACjC,QAASc,EAAQ,YACfP,EAAO,SAAS,EACfH,GACC,IAAI,OAAO,OAAOJ,EAAM,OAAO,IAAI,EAAE,KAAKI,EAAM,SAAU,CAAA,CAAA,CAC9D,CACF,CACF,EACA,EAEIgB,EAAaC,EAAaR,EAAO,CAAE,EAAGT,EAAO,EAC7CkB,EAAWjB,EAAS,IAAMe,EAAW,MAAM,QAAQ,OAAS,CAAC,EAEnE,SAASF,EAAWd,EAAe,CAC7B,OAACA,EAEHA,EAAM,QAAU,GAChB,QAAQ,KAAKA,CAAK,GAClB,QAAQ,KAAKA,CAAK,GAClB,QAAQ,KAAKA,CAAK,EALD,EAKC,CAIhB,OAAAmB,EAAAH,EAAaI,GAAa,CACzB1B,EAAA,oBAAqB,CAAC0B,EAAS,QAAQ,CAAA,CAC7C"}