@openreachtech/furo-vue 1.3.1

package/lib/components/molecules/FuroAutocompleteField/FuroAutocompleteField.vue

@@ -0,0 +1,669 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import {
+  Combobox as RekaCombobox,
+} from 'reka-ui/namespaced'
+import {
+  useFilter,
+} from 'reka-ui'
+
+import FuroIcon from '../../atoms/FuroIcon/FuroIcon.vue'
+import FuroAutocompleteFieldContext from './FuroAutocompleteFieldContext.js'
+
+export default defineComponent({
+  name: 'FuroAutocompleteField',
+
+  components: {
+    ComboboxRoot: RekaCombobox['Root'],
+    ComboboxAnchor: RekaCombobox['Anchor'],
+    ComboboxInput: RekaCombobox['Input'],
+    ComboboxTrigger: RekaCombobox['Trigger'],
+    ComboboxCancel: RekaCombobox['Cancel'],
+    ComboboxPortal: RekaCombobox['Portal'],
+    ComboboxContent: RekaCombobox['Content'],
+    ComboboxViewport: RekaCombobox['Viewport'],
+    ComboboxGroup: RekaCombobox['Group'],
+    ComboboxLabel: RekaCombobox['Label'],
+    ComboboxOption: RekaCombobox['Item'],
+    ComboboxOptionIndicator: RekaCombobox['ItemIndicator'],
+    ComboboxSeparator: RekaCombobox['Separator'],
+    ComboboxEmpty: RekaCombobox['Empty'],
+    FuroIcon,
+  },
+
+  props: {
+    parcel: {
+      /** @type {PropType<FuroAutocompleteFieldContext['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  slots: /** @type {FuroAutocompleteFieldSlots} */ (Object),
+  emits: FuroAutocompleteFieldContext.EMIT_EVENT_HASH,
+
+  /** @type {FuroAutocompleteFieldSetup} */
+  setup (
+    props,
+    componentContext
+  ) {
+    const filterCollator = useFilter({
+      sensitivity: 'base',
+    })
+
+    const context = FuroAutocompleteFieldContext.create({
+      props,
+      componentContext,
+      filterCollator,
+    })
+      .setupComponent()
+
+    return {
+      context,
+    }
+  },
+})
+
+/**
+ * @import { PropType } from 'vue'
+ * @import { FuroAutocompleteFieldSlots } from './FuroAutocompleteFieldContext.js'
+ * @import { FuroAutocompleteFieldSetup } from './FuroAutocompleteFieldContext.js'
+ */
+</script>
+
+<template>
+  <ComboboxRoot
+    class="unit-form-control autocomplete"
+    :class="{
+      invalid: context.isInvalid,
+      loading: context.loading,
+    }"
+    v-bind="context.parcel"
+    :disabled="context.isDisabled"
+    :multiple="context.isMultiple"
+    :ignore-filter="true"
+    :model-value="context.internalValueRef.value"
+    :dir="context.extractTextDirectionValue()"
+    :open="context.internalOpenPopoverRef.value"
+    @update:open="context.onUpdateOpenPopover({
+      isOpen: $event,
+    })"
+  >
+    <ComboboxAnchor
+      class="trigger"
+    >
+      <slot
+        v-if="$slots['trigger-left']"
+        name="trigger-left"
+      />
+
+      <!-- Multiple -->
+      <template v-if="context.isMultiple">
+        <div
+          v-for="(option) in context.extractVisibleChips()"
+          :key="JSON.stringify(option)"
+          class="multiple"
+          :class="{ ellipsis: context.hasEllipsisChipOverflow() }"
+        >
+          <span>{{ context.extractOptionDisplayValue({ option }) }}</span>
+          <button
+            type="button"
+            class="remove"
+            @click.stop="context.onRemoveOption({ option })"
+          >
+            <slot
+              name="chip-remove-icon"
+              :option="option"
+            >
+              <FuroIcon
+                name="ph:x"
+                class="remove-icon"
+                size="0.875rem"
+              />
+            </slot>
+          </button>
+        </div>
+
+        <span
+          v-if="context.hasHiddenChips()"
+          class="chip-overflow"
+        >
+          +{{ context.extractHiddenChipCount() }}
+        </span>
+      </template>
+
+      <ComboboxInput
+        class="input"
+        :placeholder="context.extractPlaceholderText()"
+        :display-value="(value) => context.extractDisplayValue({ option: value })"
+        :model-value="context.internalSearchKeywordRef.value"
+        @update:model-value="context.onUpdateSearchKeyword({
+          searchKeyword: $event,
+        })"
+      />
+
+      <div class="trigger-right">
+        <ComboboxCancel
+          v-if="context.shouldShowClearButton()"
+          class="clear"
+          @click.stop="context.onClearValue({
+            rawEvent: $event,
+          })"
+        >
+          <slot name="cancel">
+            <FuroIcon
+              name="ph:x"
+              class="clear-icon"
+              size="1rem"
+            />
+          </slot>
+        </ComboboxCancel>
+
+        <slot
+          v-if="context.loading"
+          name="loading-icon"
+        >
+          <FuroIcon
+            name="ph:circle-notch"
+            class="loading-icon"
+            size="1rem"
+          />
+        </slot>
+
+        <ComboboxTrigger class="trigger-icon">
+          <slot name="trigger-right">
+            <FuroIcon
+              v-show="!context.loading"
+              name="ph:caret-down"
+              class="icon"
+              size="1rem"
+            />
+          </slot>
+        </ComboboxTrigger>
+      </div>
+    </ComboboxAnchor>
+
+    <ComboboxPortal>
+      <ComboboxContent
+        position="popper"
+        :side-offset="4"
+        class="unit-autocomplete-content"
+      >
+        <slot name="content-before" />
+
+        <ComboboxViewport
+          class="viewport"
+          :model-value="context.extractListboxModelValue()"
+        >
+          <ComboboxOption
+            v-if="context.shouldShowSelectAllOption()"
+            :value="context.furoAutocompleteSelectAllValue"
+            class="option select-all"
+            @select="context.onSelectSelectAllOption({
+              rawEvent: $event,
+            })"
+          >
+            <slot
+              name="select-all"
+            >
+              {{ context.extractSelectAllText() }}
+            </slot>
+          </ComboboxOption>
+
+          <template
+            v-for="(parentOption, parentIndex) in context.filteredOptions()"
+            :key="JSON.stringify(parentOption)"
+          >
+            <ComboboxGroup
+              :class="{
+                group: context.isGroupOption({ option: parentOption }),
+              }"
+              :as-child="!context.isGroupOption({ option: parentOption })"
+            >
+              <slot
+                name="group"
+                :group="parentOption"
+                :group-index="parentIndex"
+              >
+                <ComboboxLabel
+                  v-if="context.isGroupOption({ option: parentOption })"
+                  class="label"
+                >
+                  <slot
+                    name="group-label"
+                    :group="parentOption"
+                    :group-index="parentIndex"
+                  >
+                    {{ context.extractOptionDisplayValue({ option: parentOption }) }}
+                  </slot>
+                </ComboboxLabel>
+
+                <template
+                  v-for="(childOption, childIndex) in context.extractChildOptions({ option: parentOption })"
+                  :key="JSON.stringify(childOption)"
+                >
+                  <ComboboxOption
+                    class="option"
+                    :value="childOption"
+                    :disabled="context.shouldDisableOption({ option: childOption })"
+                    @select="context.onSelectOption({
+                      rawEvent: $event,
+                      option: childOption,
+                      selectedIndex: context.extractOptionIndex({
+                        parentOption,
+                        childOption,
+                        childIndex,
+                        parentIndex,
+                      }),
+                      selectedGroupIndex: context.extractGroupOptionIndex({
+                        parentOption,
+                        childOption,
+                        parentIndex,
+                      }),
+                    })"
+                  >
+                    <slot
+                      name="option"
+                      :group="parentOption"
+                      :group-index="parentIndex"
+                      :option="childOption"
+                      :option-index="childIndex"
+                    >
+                      <slot
+                        v-if="context.shouldShowOptionIcon({ option: childOption })"
+                        name="option-icon"
+                        :option="childOption"
+                        :option-index="childIndex"
+                      >
+                        <FuroIcon
+                          class="option-icon"
+                          size="1rem"
+                          name="ph:check"
+                          v-bind="context.extractOptionIcon({ option: childOption })"
+                        />
+                      </slot>
+
+                      <span class="option-text">
+                        <slot
+                          name="option-text"
+                          :option="childOption"
+                          :option-index="childIndex"
+                        >
+                          {{ context.extractOptionDisplayValue({ option: childOption }) }}
+                        </slot>
+                      </span>
+
+                      <ComboboxOptionIndicator
+                        class="option-indicator"
+                      >
+                        <slot
+                          name="option-indicator"
+                          :option="childOption"
+                          :option-index="childIndex"
+                        >
+                          <FuroIcon
+                            name="ph:check"
+                            class="option-indicator-icon"
+                            size="1rem"
+                          />
+                        </slot>
+                      </ComboboxOptionIndicator>
+                    </slot>
+                  </ComboboxOption>
+
+                  <slot
+                    v-if="context.shouldShowSeparator({ option: childOption })"
+                    name="separator"
+                    :option="childOption"
+                    :option-index="childIndex"
+                  >
+                    <ComboboxSeparator class="separator" />
+                  </slot>
+                </template>
+              </slot>
+            </ComboboxGroup>
+
+            <slot
+              v-if="context.shouldShowParentSeparator({ option: parentOption })"
+              name="separator"
+              :option="parentOption"
+              :option-index="parentIndex"
+            >
+              <ComboboxSeparator class="separator" />
+            </slot>
+          </template>
+
+          <ComboboxOption
+            v-if="context.shouldShowCreateOption()"
+            :value="context.furoAutocompleteCreateValue"
+            class="option create"
+            @select="context.onCreateOption({
+              rawEvent: $event,
+            })"
+          >
+            <slot
+              name="create-option"
+              :search-keyword="context.internalSearchKeywordRef.value.trim()"
+            >
+              {{ context.generateCreateOptionText() }}
+            </slot>
+          </ComboboxOption>
+
+          <ComboboxEmpty
+            v-if="context.shouldShowEmpty()"
+            class="empty"
+          >
+            <slot
+              name="empty"
+              :loading="context.loading"
+            >
+              {{ context.extractEmptyText() }}
+            </slot>
+          </ComboboxEmpty>
+
+          <div
+            v-if="context.loading"
+            class="loading"
+          >
+            <slot
+              name="loading"
+            >
+              <FuroIcon
+                name="ph:circle-notch"
+                class="loading-icon"
+              />
+            </slot>
+          </div>
+        </ComboboxViewport>
+
+        <slot name="content-after" />
+      </ComboboxContent>
+    </ComboboxPortal>
+  </ComboboxRoot>
+</template>
+
+<style>
+/*
+ * Not scoped: the listbox content is teleported to <body> via ComboboxPortal,
+ * so it sits outside this component's DOM subtree and carries no scoped-style
+ * data-v id. A scoped block only reaches it on Vue compiler versions that skip
+ * scoping inside `@layer`; on versions that scope `@layer` selectors the content
+ * loses all styling (highlight / selected / box). Global `@layer furo` with
+ * `unit-`-prefixed selectors is the same pattern FuroSelect and FuroDropdownMenu
+ * already use for their portalled content.
+ */
+@layer furo {
+  .unit-form-control.autocomplete {
+    position: relative;
+  }
+
+  .unit-form-control.autocomplete > .trigger {
+    border-radius: var(--size-border-radius-medium);
+    border: var(--size-thinnest) solid var(--color-input);
+
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--size-space-tiny);
+    flex: 1;
+
+    min-height: var(--size-input-height);
+
+    outline: none;
+
+    transition-duration: var(--transition-timer);
+    transition-property: border-color;
+  }
+
+  .unit-form-control.autocomplete > .trigger > .input {
+    border: 0;
+    outline: 0;
+
+    padding-block: 0.25rem;
+    padding-inline-start: 0.75rem;
+    padding-inline-end: 0;
+
+    width: 100%;
+
+    flex: 1;
+    align-self: stretch;
+
+    background-color: transparent;
+    font: var(--font-body-medium);
+
+    @media (width < 48rem) {
+      font-size: var(--font-size-small);
+    }
+  }
+
+  .unit-form-control.autocomplete:has(.multiple) > .trigger > .input {
+    padding-inline-start: 0;
+  }
+
+  .unit-form-control.autocomplete > .trigger:has(.multiple) {
+    padding-inline-start: 0.25rem;
+  }
+
+  .unit-form-control.autocomplete > .trigger > .multiple {
+    border-radius: var(--size-border-radius-small);
+
+    display: inline-flex;
+    align-items: center;
+    gap: var(--size-space-tiny);
+
+    height: 1.5rem;
+
+    padding-inline-start: 0.375rem;
+
+    background-color: var(--color-secondary);
+    color: var(--color-secondary-foreground);
+    font: var(--font-label-tiny);
+  }
+
+  .unit-form-control.autocomplete > .trigger > .multiple > .remove {
+    display: inline-flex;
+
+    padding-inline-end: 0.375rem;
+  }
+
+  .unit-form-control.autocomplete > .trigger > .chip-overflow {
+    border-radius: var(--size-border-radius-small);
+
+    display: inline-flex;
+    align-items: center;
+
+    height: 1.5rem;
+
+    padding-inline: 0.375rem;
+
+    background-color: var(--color-muted);
+    color: var(--color-muted-foreground);
+    font: var(--font-label-tiny);
+  }
+
+  .unit-form-control.autocomplete > .trigger:has(.multiple.ellipsis) {
+    flex-wrap: nowrap;
+
+    overflow: hidden;
+  }
+
+  .unit-form-control.autocomplete > .trigger > .multiple.ellipsis {
+    min-width: 0;
+    flex-shrink: 0;
+  }
+
+  .unit-form-control.autocomplete > .trigger > .multiple.ellipsis > span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .unit-form-control.autocomplete > .trigger > .input::placeholder {
+    color: var(--color-muted-foreground);
+  }
+
+  .unit-form-control.autocomplete:not(.invalid):not(.loading) > .trigger:has(.input[aria-expanded=true]),
+  .unit-form-control.autocomplete:not(.invalid):not(.loading) > .trigger:has(.input:focus-visible) {
+    border-color: var(--color-ring);
+  }
+
+  .unit-form-control.autocomplete:has(.input:disabled) > .trigger {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .unit-form-control.autocomplete.loading > .trigger {
+    pointer-events: none;
+    cursor: wait;
+
+    color: var(--color-muted-foreground);
+  }
+
+  .unit-form-control.autocomplete.invalid > .trigger {
+    border-color: var(--color-destructive);
+  }
+
+  .unit-form-control.autocomplete > .trigger > .trigger-right {
+    align-self: stretch;
+
+    padding-block: 0;
+    padding-inline-start: 0;
+    padding-inline-end: 0.5rem;
+  }
+
+  .unit-form-control.autocomplete > .trigger > .trigger-right,
+  .unit-form-control.autocomplete > .trigger > .trigger-right > .clear,
+  .unit-form-control.autocomplete > .trigger > .trigger-right > .trigger-icon {
+    margin-inline-start: auto;
+
+    border-radius: var(--size-border-radius-small);
+
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+  }
+
+  .unit-form-control.autocomplete > .trigger > .trigger-right > .clear,
+  .unit-form-control.autocomplete > .trigger > .trigger-right > .trigger-icon {
+    padding: 0.25rem;
+  }
+
+  .unit-form-control.autocomplete > .trigger > .trigger-right > .clear:hover,
+  .unit-form-control.autocomplete > .trigger > .trigger-right > .trigger-icon:hover {
+    background-color: var(--color-accent);
+    color: var(--color-accent-foreground);
+  }
+
+  .unit-autocomplete-content {
+    z-index: calc(var(--value-z-index-layer-popover) + 1);
+
+    border-radius: var(--size-border-radius-medium);
+    border: var(--size-thinnest) solid var(--color-border);
+
+    width: var(--reka-popper-anchor-width);
+
+    padding: 0.25rem;
+
+    background-color: var(--color-popover);
+    color: var(--color-popover-foreground);
+    box-shadow: var(--shadow-strong);
+    font-family: var(--font-family);
+  }
+
+  .unit-autocomplete-content > .viewport {
+    display: flex;
+    flex-direction: column;
+
+    padding-block-start: 0.375rem;
+  }
+
+  .unit-autocomplete-content > .viewport > .group > .label {
+    padding-block: 0.25rem;
+    padding-inline: 0.5rem;
+
+    font: var(--font-label-tiny);
+    font-weight: var(--font-weight-semibold, 600);
+    user-select: none;
+    cursor: default;
+
+    color: var(--color-muted-foreground);
+  }
+
+  .unit-autocomplete-content > .viewport > .group > .option,
+  .unit-autocomplete-content > .viewport > .option {
+    border-radius: var(--size-border-radius-small);
+
+    display: flex;
+    align-items: center;
+    gap: var(--size-space-tiny);
+
+    min-height: 2rem;
+
+    padding-block: 0.25rem;
+    padding-inline: 0.5rem;
+
+    cursor: default;
+    outline: none;
+  }
+
+  .unit-autocomplete-content > .viewport > .group > .option[data-disabled],
+  .unit-autocomplete-content > .viewport > .option[data-disabled] {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  .unit-autocomplete-content > .viewport > .group > .option > .option-text,
+  .unit-autocomplete-content > .viewport > .option > .option-text {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .unit-autocomplete-content > .viewport > .group > .option[data-highlighted]:not([data-disabled]),
+  .unit-autocomplete-content > .viewport > .option[data-highlighted]:not([data-disabled]) {
+    background-color: var(--color-accent);
+    color: var(--color-accent-foreground);
+  }
+
+  .unit-autocomplete-content > .viewport > .option > .option-icon {
+    margin-block-end: auto;
+  }
+
+  .unit-autocomplete-content > .viewport > .group > .option > .option-indicator,
+  .unit-autocomplete-content > .viewport > .option > .option-indicator {
+    margin-inline-start: auto;
+  }
+
+  .unit-autocomplete-content > .viewport .separator {
+    margin-block: 0.25rem;
+    margin-inline: calc(0.25rem * -1);
+
+    height: var(--size-thinnest);
+
+    background-color: var(--color-border);
+  }
+
+  .unit-autocomplete-content > .viewport > .empty {
+    padding-block: 0.25rem;
+
+    text-align: center;
+    color: var(--color-muted-foreground);
+    font: var(--font-body-small);
+  }
+
+  .unit-autocomplete-content > .viewport > .loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-block: 0.25rem;
+  }
+}
+</style>