initial commit

app/components/input/base.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="base-input">
+    <label>
+      {{ label }}
+      <div class="input-wrapper">
+        <input
+          v-bind="$attrs"
+          :name="name"
+          :type="type"
+          v-model="model"
+          :placeholder="placeholder"
+          autocomplete="off"
+          class="base-input-field"
+        />
+        <slot name="icon" />
+      </div>
+      <slot name="pwdReset"/>
+      <div class="message">
+        <slot name="message"></slot>
+      </div>
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+const model = defineModel<string>()
+
+defineOptions({
+  inheritAttrs: false
+})
+
+defineProps<{
+  label: string
+  name: string
+  type?: string
+  placeholder?: string
+  displayPwdReset?:boolean
+}>()
+</script>
+
+<style scoped lang="scss">
+.input-wrapper {
+  position: relative;
+}
+
+.base-input {
+  --input-bg: #ffffff;
+  --input-border: #00aeff;
+  --input-hover-bg: #e0e0e0;
+  --input-text: #003e7c;
+}
+
+.base-input label {
+  margin-bottom: 1em;
+  display: block;
+  color: #003e7c;
+  font-family: 'Quicksand', Arial, Helvetica, sans-serif;
+}
+
+.base-input-field {
+  display: block;
+  margin: 5px 0;
+  width: 100%;
+  padding: 0.75em 1.5em;
+  background: var(--input-bg);
+  border: none;
+  border-bottom: 2px solid var(--input-border);
+  border-left: 2px solid var(--input-border);
+  box-sizing: border-box;
+  color: var(--input-text);
+}
+
+.base-input-field:hover,
+.base-input-field:focus {
+  background: var(--input-hover-bg);
+}
+
+.message {
+  min-height: 1.4em;
+}
+
+.message :deep(.error) {
+  color: #ca0d00;
+  font-size: 0.9em;
+  font-weight: 600;
+  margin-left: 1em;
+}
+
+.message :deep(.success) {
+  color: #00ca22;
+  font-size: 0.9em;
+  font-weight: 600;
+  margin-left: 1em;
+}
+
+/* Styles spécifiques à l’email */
+:deep(.mail-is-valid) {
+  --input-border: #00ca22;
+}
+
+:deep(.mail-is-invalid) {
+  --input-border: #ca0d00;
+}
+</style>