From 1d95eb7246dd1a69b2ca0e624e6488338baa70f4 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 13 Nov 2024 16:58:21 +0100
Subject: [PATCH] docs(input): add more examples

---
 .../examples/input/InputCopyButtonExample.vue | 33 +++++++++++++++++++
 .../examples/input/InputKbdExample.vue        | 21 ++++++++++++
 docs/content/3.components/input.md            | 24 ++++++++++++++
 3 files changed, 78 insertions(+)
 create mode 100644 docs/app/components/content/examples/input/InputCopyButtonExample.vue
 create mode 100644 docs/app/components/content/examples/input/InputKbdExample.vue

diff --git a/docs/app/components/content/examples/input/InputCopyButtonExample.vue b/docs/app/components/content/examples/input/InputCopyButtonExample.vue
new file mode 100644
index 00000000..38420a2e
--- /dev/null
+++ b/docs/app/components/content/examples/input/InputCopyButtonExample.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+const value = ref('npx nuxi module add ui')
+const copied = ref(false)
+
+function copy() {
+  navigator.clipboard.writeText(value.value)
+  copied.value = true
+
+  setTimeout(() => {
+    copied.value = false
+  }, 2000)
+}
+</script>
+
+<template>
+  <UInput
+    v-model="value"
+    :ui="{ trailing: 'pr-0.5' }"
+  >
+    <template v-if="value?.length" #trailing>
+      <UTooltip text="Copy to clipboard" :content="{ side: 'right' }">
+        <UButton
+          :color="copied ? 'success' : 'neutral'"
+          variant="link"
+          size="sm"
+          :icon="copied ? 'i-lucide-copy-check' : 'i-lucide-copy'"
+          aria-label="Copy to clipboard"
+          @click="copy"
+        />
+      </UTooltip>
+    </template>
+  </UInput>
+</template>
diff --git a/docs/app/components/content/examples/input/InputKbdExample.vue b/docs/app/components/content/examples/input/InputKbdExample.vue
new file mode 100644
index 00000000..dd1bf2b4
--- /dev/null
+++ b/docs/app/components/content/examples/input/InputKbdExample.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const input = useTemplateRef('input')
+
+defineShortcuts({
+  '/': () => {
+    input.value?.inputRef?.focus()
+  }
+})
+</script>
+
+<template>
+  <UInput
+    ref="input"
+    icon="i-lucide-search"
+    placeholder="Search..."
+  >
+    <template #trailing>
+      <UKbd value="/" />
+    </template>
+  </UInput>
+</template>
diff --git a/docs/content/3.components/input.md b/docs/content/3.components/input.md
index d4711cb9..8387a03d 100644
--- a/docs/content/3.components/input.md
+++ b/docs/content/3.components/input.md
@@ -214,6 +214,16 @@ name: 'input-clear-button-example'
 ---
 ::
 
+### With copy button
+
+You can put a [Button](/components/button) inside the `#trailing` slot to copy the value to the clipboard.
+
+::component-example
+---
+name: 'input-copy-button-example'
+---
+::
+
 ### With password toggle
 
 You can put a [Button](/components/button) inside the `#trailing` slot to toggle the password visibility.
@@ -245,6 +255,20 @@ name: 'input-character-limit-example'
 ---
 ::
 
+### With keyboard shortcut
+
+You can use the [Kbd](/components/kbd) component inside the `#trailing` slot to add a keyboard shortcut to the Input.
+
+::component-example
+---
+name: 'input-kbd-example'
+---
+::
+
+::note{to="/composables/define-shortcuts"}
+This example uses the `defineShortcuts` composable to focus the Input when the :kbd{value="/"} key is pressed.
+::
+
 ### With floating label
 
 You can use the `#default` slot to add a floating label to the Input.