From 2e056fa3cf2ebd2ca083f421cab0c8bd71db5130 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Mon, 28 Aug 2023 15:02:43 +0200
Subject: [PATCH] docs(SelectMenu): add slots examples

Resolves #557
---
 .../examples/SelectMenuExampleCreatable.vue   | 100 +++++++++
 .../SelectMenuExampleOptionEmptySlot.vue      |  13 ++
 .../examples/SelectMenuExampleOptionSlot.vue  |  30 +++
 docs/content/3.forms/4.select-menu.md         | 199 +++++++++++++++++-
 4 files changed, 331 insertions(+), 11 deletions(-)
 create mode 100644 docs/components/content/examples/SelectMenuExampleCreatable.vue
 create mode 100644 docs/components/content/examples/SelectMenuExampleOptionEmptySlot.vue
 create mode 100644 docs/components/content/examples/SelectMenuExampleOptionSlot.vue

diff --git a/docs/components/content/examples/SelectMenuExampleCreatable.vue b/docs/components/content/examples/SelectMenuExampleCreatable.vue
new file mode 100644
index 00000000..6d810799
--- /dev/null
+++ b/docs/components/content/examples/SelectMenuExampleCreatable.vue
@@ -0,0 +1,100 @@
+<script setup>
+const options = ref([
+  { id: 1, name: 'bug', color: 'd73a4a' },
+  { id: 2, name: 'documentation', color: '0075ca' },
+  { id: 3, name: 'duplicate', color: 'cfd3d7' },
+  { id: 4, name: 'enhancement', color: 'a2eeef' },
+  { id: 5, name: 'good first issue', color: '7057ff' },
+  { id: 6, name: 'help wanted', color: '008672' },
+  { id: 7, name: 'invalid', color: 'e4e669' },
+  { id: 8, name: 'question', color: 'd876e3' },
+  { id: 9, name: 'wontfix', color: 'ffffff' }
+])
+
+const selected = ref([])
+
+const labels = computed({
+  get: () => selected.value,
+  set: async (labels) => {
+    const promises = labels.map(async (label) => {
+      if (label.id) {
+        return label
+      }
+
+      // In a real app, you would make an API call to create the label
+      const response = {
+        name: label.name,
+        color: generateColorFromString(label.name)
+      }
+
+      options.value.push(response)
+
+      return response
+    })
+
+    selected.value = await Promise.all(promises)
+  }
+})
+
+function hashCode (str) {
+  let hash = 0
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash)
+  }
+  return hash
+}
+
+function intToRGB (i) {
+  const c = (i & 0x00FFFFFF)
+    .toString(16)
+    .toUpperCase()
+
+  return '00000'.substring(0, 6 - c.length) + c
+}
+
+function generateColorFromString (str) {
+  return intToRGB(hashCode(str))
+}
+</script>
+
+<template>
+  <USelectMenu
+    v-model="labels"
+    by="id"
+    name="labels"
+    :options="options"
+    option-attribute="name"
+    multiple
+    searchable
+    creatable
+  >
+    <template #label>
+      <template v-if="labels.length">
+        <span class="flex items-center -space-x-1">
+          <span v-for="label of labels" :key="label.id" class="flex-shrink-0 w-2 h-2 mt-px rounded-full" :style="{ background: `#${label.color}` }" />
+        </span>
+        <span>{{ labels.length }} label{{ labels.length > 1 ? 's' : '' }}</span>
+      </template>
+      <template v-else>
+        <span class="text-gray-500 dark:text-gray-400 truncate">Select labels</span>
+      </template>
+    </template>
+
+    <template #option="{ option }">
+      <span
+        class="flex-shrink-0 w-2 h-2 mt-px rounded-full"
+        :style="{ background: `#${option.color}` }"
+      />
+      <span class="truncate">{{ option.name }}</span>
+    </template>
+
+    <template #option-create="{ option }">
+      <span class="flex-shrink-0">New label:</span>
+      <span
+        class="flex-shrink-0 w-2 h-2 mt-px rounded-full -mx-1"
+        :style="{ background: `#${generateColorFromString(option.name)}` }"
+      />
+      <span class="block truncate">{{ option.name }}</span>
+    </template>
+  </USelectMenu>
+</template>
diff --git a/docs/components/content/examples/SelectMenuExampleOptionEmptySlot.vue b/docs/components/content/examples/SelectMenuExampleOptionEmptySlot.vue
new file mode 100644
index 00000000..999580ce
--- /dev/null
+++ b/docs/components/content/examples/SelectMenuExampleOptionEmptySlot.vue
@@ -0,0 +1,13 @@
+<script setup>
+const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+
+const selected = ref(people[0])
+</script>
+
+<template>
+  <USelectMenu v-model="selected" :options="people" searchable>
+    <template #option-empty="{ query }">
+      <q>{{ query }}</q> not found
+    </template>
+  </USelectMenu>
+</template>
diff --git a/docs/components/content/examples/SelectMenuExampleOptionSlot.vue b/docs/components/content/examples/SelectMenuExampleOptionSlot.vue
new file mode 100644
index 00000000..71deeb36
--- /dev/null
+++ b/docs/components/content/examples/SelectMenuExampleOptionSlot.vue
@@ -0,0 +1,30 @@
+<script setup>
+const people = [
+  { name: 'Wade Cooper', online: true },
+  { name: 'Arlene Mccoy', online: false },
+  { name: 'Devon Webb', online: false },
+  { name: 'Tom Cook', online: true },
+  { name: 'Tanya Fox', online: false },
+  { name: 'Hellen Schmidt', online: true },
+  { name: 'Caroline Schultz', online: true },
+  { name: 'Mason Heaney', online: false },
+  { name: 'Claudie Smitham', online: true },
+  { name: 'Emil Schaefer', online: false }
+]
+
+const selected = ref(people[3])
+</script>
+
+<template>
+  <USelectMenu v-model="selected" :options="people" option-attribute="name">
+    <template #label>
+      <span :class="[selected.online ? 'bg-green-400' : 'bg-gray-200', 'inline-block h-2 w-2 flex-shrink-0 rounded-full']" aria-hidden="true" />
+      <span class="truncate">{{ selected.name }}</span>
+    </template>
+
+    <template #option="{ option: person }">
+      <span :class="[person.online ? 'bg-green-400' : 'bg-gray-200', 'inline-block h-2 w-2 flex-shrink-0 rounded-full']" aria-hidden="true" />
+      <span class="truncate">{{ person.name }}</span>
+    </template>
+  </USelectMenu>
+</template>
diff --git a/docs/content/3.forms/4.select-menu.md b/docs/content/3.forms/4.select-menu.md
index 7cf21234..b44ea6e4 100644
--- a/docs/content/3.forms/4.select-menu.md
+++ b/docs/content/3.forms/4.select-menu.md
@@ -11,13 +11,13 @@ links:
 
 ## Usage
 
-The SelectMenu component renders by default a [Select](/forms/select) component and is based on the `ui.select` preset. You can use most of the Select props to configure the display if you don't want to override the default slot such as [color](/forms/select#style), [variant](/forms/select#style), [size](/forms/select#size), [placeholder](/forms/select#placeholder), [icon](/forms/select#icon), [disabled](/forms/select#disabled), etc.
+The `SelectMenu` component renders by default a [Select](/forms/select) component and is based on the `ui.select` preset. You can use most of the `Select` props to configure the display if you don't want to override the default slot such as [color](/forms/select#style), [variant](/forms/select#style), [size](/forms/select#size), [placeholder](/forms/select#placeholder), [icon](/forms/select#icon), [disabled](/forms/select#disabled), etc.
 
-Like the Select component, you can use the `options` prop to pass an array of strings or objects.
+Like the `Select` component, you can use the `options` prop to pass an array of strings or objects.
 
 ::component-example
 #default
-:select-menu-example-basic{class="w-full lg:w-48"}
+:select-menu-example-basic{class="w-full lg:w-40"}
 
 #code
 ```vue
@@ -39,7 +39,7 @@ You can use the `multiple` prop to select multiple values.
 
 ::component-example
 #default
-:select-menu-example-multiple{class="w-full lg:w-48"}
+:select-menu-example-multiple{class="w-full lg:w-40"}
 
 #code
 ```vue
@@ -61,7 +61,7 @@ You can pass an array of objects to `options` and either compare on the whole ob
 
 ::component-example
 #default
-:select-menu-example-objects{class="w-full lg:w-48"}
+:select-menu-example-objects{class="w-full lg:w-40"}
 #code
 ```vue
 <script setup>
@@ -112,7 +112,7 @@ If you only want to select a single object property rather than the whole object
 
 ::component-example
 #default
-:select-menu-example-objects-value-attribute{class="w-full lg:w-48"}
+:select-menu-example-objects-value-attribute{class="w-full lg:w-40"}
 
 #code
 ```vue
@@ -159,7 +159,7 @@ Use the `selected-icon` prop to set a different icon or change it globally in `u
 ::component-card
 ---
 baseProps:
-  class: 'w-full lg:w-48'
+  class: 'w-full lg:w-40'
   placeholder: 'Select a person'
   options: ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 props:
@@ -184,7 +184,7 @@ This will use Headless UI [Combobox](https://headlessui.com/vue/combobox) compon
 ::component-card
 ---
 baseProps:
-  class: 'w-full lg:w-48'
+  class: 'w-full lg:w-40'
   placeholder: 'Select a person'
   options: ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
 props:
@@ -201,7 +201,7 @@ Use the `debounce` prop to adjust the delay of the function.
 
 ::component-example
 #default
-:select-menu-example-async-search{class="w-full lg:w-48"}
+:select-menu-example-async-search{class="w-full lg:w-40"}
 
 #code
 ```vue
@@ -227,6 +227,106 @@ const selected = ref([])
 ```
 ::
 
+### Create option
+
+Use the `creatable` prop to enable the creation of new options when the search doesn't return any results (only works with `searchable`).
+
+Try to search for something that doesn't exist in the example below.
+
+::component-example
+#default
+:select-menu-example-creatable{class="w-full lg:w-40"}
+
+#code
+```vue
+<script setup>
+const options = ref([
+  { id: 1, name: 'bug', color: 'd73a4a' },
+  { id: 2, name: 'documentation', color: '0075ca' },
+  { id: 3, name: 'duplicate', color: 'cfd3d7' },
+  { id: 4, name: 'enhancement', color: 'a2eeef' },
+  { id: 5, name: 'good first issue', color: '7057ff' },
+  { id: 6, name: 'help wanted', color: '008672' },
+  { id: 7, name: 'invalid', color: 'e4e669' },
+  { id: 8, name: 'question', color: 'd876e3' },
+  { id: 9, name: 'wontfix', color: 'ffffff' }
+])
+
+const selected = ref([])
+
+const labels = computed({
+  get: () => selected.value,
+  set: async (labels) => {
+    const promises = labels.map(async (label) => {
+      if (label.id) {
+        return label
+      }
+
+      // In a real app, you would make an API call to create the label
+      const response = {
+        name: label.name,
+        color: generateColorFromString(label.name)
+      }
+
+      options.value.push(response)
+
+      return response
+    })
+
+    selected.value = await Promise.all(promises)
+  }
+})
+
+// Look at the component example to see how this is used
+function generateColorFromString (str) {
+  // ...
+}
+</script>
+
+<template>
+  <USelectMenu
+    v-model="labels"
+    by="id"
+    name="labels"
+    :options="options"
+    option-attribute="name"
+    multiple
+    searchable
+    creatable
+  >
+    <template #label>
+      <template v-if="labels.length">
+        <span class="flex items-center -space-x-1">
+          <span v-for="label of labels" :key="label.id" class="flex-shrink-0 w-2 h-2 mt-px rounded-full" :style="{ background: `#${label.color}` }" />
+        </span>
+        <span>{{ labels.length }} label{{ labels.length > 1 ? 's' : '' }}</span>
+      </template>
+      <template v-else>
+        <span class="text-gray-500 dark:text-gray-400 truncate">Select labels</span>
+      </template>
+    </template>
+
+    <template #option="{ option }">
+      <span
+        class="flex-shrink-0 w-2 h-2 mt-px rounded-full"
+        :style="{ background: `#${option.color}` }"
+      />
+      <span class="truncate">{{ option.name }}</span>
+    </template>
+
+    <template #option-create="{ option }">
+      <span class="flex-shrink-0">New label:</span>
+      <span
+        class="flex-shrink-0 w-2 h-2 mt-px rounded-full -mx-1"
+        :style="{ background: `#${generateColorFromString(option.name)}` }"
+      />
+      <span class="block truncate">{{ option.name }}</span>
+    </template>
+  </USelectMenu>
+</template>
+```
+::
+
 ## Slots
 
 ### `label`
@@ -235,7 +335,7 @@ You can override the `#label` slot and handle the display yourself.
 
 ::component-example
 #default
-:select-menu-example-multiple-slot{class="w-full lg:w-48"}
+:select-menu-example-multiple-slot{class="w-full lg:w-40"}
 
 #code
 ```vue
@@ -262,7 +362,7 @@ You can also override the `#default` slot entirely.
 
 ::component-example
 #default
-:select-menu-example-button{class="w-full lg:w-48"}
+:select-menu-example-button{class="w-full lg:w-40"}
 
 #code
 ```vue
@@ -284,6 +384,83 @@ const selected = ref(people[3])
 ```
 ::
 
+### `option`
+
+Use the `#option` slot to customize the option content. You will have access to the `option`, `active` and `selected` properties in the slot scope.
+
+::component-example
+#default
+:select-menu-example-option-slot{class="w-full lg:w-40"}
+
+#code
+```vue
+<script setup>
+const people = [
+  { name: 'Wade Cooper', online: true },
+  { name: 'Arlene Mccoy', online: false },
+  { name: 'Devon Webb', online: false },
+  { name: 'Tom Cook', online: true },
+  { name: 'Tanya Fox', online: false },
+  { name: 'Hellen Schmidt', online: true },
+  { name: 'Caroline Schultz', online: true },
+  { name: 'Mason Heaney', online: false },
+  { name: 'Claudie Smitham', online: true },
+  { name: 'Emil Schaefer', online: false }
+]
+
+const selected = ref(people[3])
+</script>
+
+<template>
+  <USelectMenu v-model="selected" :options="people" option-attribute="name">
+    <template #label>
+      <span :class="[selected.online ? 'bg-green-400' : 'bg-gray-200', 'inline-block h-2 w-2 flex-shrink-0 rounded-full']" aria-hidden="true" />
+      <span class="truncate">{{ selected.name }}</span>
+    </template>
+
+    <template #option="{ option: person }">
+      <span :class="[person.online ? 'bg-green-400' : 'bg-gray-200', 'inline-block h-2 w-2 flex-shrink-0 rounded-full']" aria-hidden="true" />
+      <span class="truncate">{{ person.name }}</span>
+    </template>
+  </USelectMenu>
+</template>
+```
+::
+
+### `option-empty`
+
+Use the `#option-empty` slot to customize the content displayed when the `searchable` prop is `true` and there is no options. You will have access to the `query` property in the slot scope.
+
+::component-example
+#default
+:select-menu-example-option-empty-slot{class="w-full lg:w-40"}
+
+#code
+```vue
+<script setup>
+const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+
+const selected = ref(people[0])
+</script>
+
+<template>
+  <USelectMenu v-model="selected" :options="people" searchable>
+    <template #option-empty="{ query }">
+      <q>{{ query }}</q> not found
+    </template>
+  </USelectMenu>
+</template>
+```
+::
+
+### `option-create`
+
+Use the `#option-create` slot to customize the content displayed when the `creatable` prop is `true` and there is no options. You will have access to the `query` property in the slot scope.
+
+::callout{icon="i-heroicons-light-bulb"}
+An example is available in the [Create option](#create-option) section.
+::
+
 ## Props
 
 :component-props