Add input component

docs/.vitepress/config.ts

@@ -29,6 +29,7 @@ export default defineConfig({
           ] },
 			    { text: "Activity", link: "/components/activity/" },
 			    { text: "Popover", link: "/components/popover/" },
+			    { text: "Input", link: "/components/input/" },
         ]
       }
 		]

docs/components/input/index.md

+# Input
+## Input model
+```html
+<fw-input v-model="value" placeholder="Search" />
+```
+<fw-input placeholder="Search" />
+
+## Input icons
+You can use bootstrap icons
+```html
+<fw-input v-model="value" icon="bi-search" placeholder="Search" />
+```
+<fw-input icon="bi-search" placeholder="Search" />
+
+
+## Input suffix slot
+```html
+<fw-input v-model="value" placeholder="Search">
+  <template #suffix>
+    suffix
+  </template>
+</fw-input>
+```
+<fw-input placeholder="Search">
+  <template #suffix>
+    suffix
+  </template>
+</fw-input>
+

src/components/index.ts

@@ -20,5 +20,8 @@ export { default as FwPopover } from './popover/Popover.vue'
 // Loader
 export { default as FwLoader } from './loader/Loader.vue'
 
+// Input
+export { default as FwInput } from './input/Input.vue'
+
 // Pills
 export { default as FwPill } from './pill/Pill.vue'

src/components/input/Input.vue

+<script setup lang="ts">
+interface Props {
+  modelValue: string
+  icon: string
+  placeholder: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+	<div
+    :class="{ 'has-icon': !!icon }"
+    class="funkwhale input"
+  >
+    <div v-if="icon" class="prefix">
+      <i :class="['bi', icon]" />
+    </div>
+    <input v-model="modelValue" :placeholder="placeholder" />
+    <div v-if="$slots.suffix" class="suffix">
+      <slot name="suffix" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import './style.scss'
+</style>

src/components/input/style.scss

+.funkwhale {
+  &.input {
+    --fw-bg-color: var(--fw-grey-100);
+    --fw-border-color: var(--fw-bg-color);
+
+    html.dark & {
+      --fw-bg-color: var(--fw-grey-800);
+    }
+
+    position: relative;
+
+    &.has-icon {
+      input {
+        padding-left: 36px;
+      }
+    }
+
+    input {
+      display: block;
+      width: 100%;
+      padding: 8px 12px;
+      font-family: $font-main;
+      background-color: var(--fw-bg-color);
+      border-radius: var(--fw-border-radius);
+      box-shadow: inset 0 0 0 4px var(--fw-border-color);
+
+      &:active,
+      &:focus {
+        --fw-border-color: var(--fw-primary);
+      }
+    }
+
+    .prefix,
+    .suffix {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      display: flex;
+      align-items: center;
+    }
+
+    .prefix {
+      left: 4px;
+      width: 32px;
+      justify-content: center;
+    }
+
+    .suffix {
+      right: 12px;
+    }
+  }
+}