@openreachtech/furo-vue 1.3.1

package/lib/components/molecules/FuroDropdownMenu/DropdownMenuOptionSelectEmitPayload.js

@@ -0,0 +1,100 @@
+import BaseEmitPayload from '../../../emit-payload/BaseEmitPayload.js'
+
+/**
+ * Emit payload for FuroDropdownMenu option selection.
+ *
+ * @extends {BaseEmitPayload<Event, HTMLElement>}
+ */
+export default class DropdownMenuOptionSelectEmitPayload extends BaseEmitPayload {
+  /**
+   * Constructor.
+   *
+   * @param {DropdownMenuOptionSelectEmitPayloadParams} params
+   */
+  constructor ({
+    rawEvent,
+    option,
+  }) {
+    super({
+      rawEvent,
+    })
+
+    this.option = option
+  }
+
+  /**
+   * Factory method.
+   *
+   * @template {X extends typeof DropdownMenuOptionSelectEmitPayload ? X : never} T, X
+   * @override
+   * @param {DropdownMenuOptionSelectEmitPayloadFactoryParams} params
+   * @returns {InstanceType<T>}
+   * @this {T}
+   */
+  static create ({
+    rawEvent,
+    option,
+  }) {
+    return /** @type {InstanceType<T>} */ (
+      new this({
+        rawEvent,
+        option,
+      })
+    )
+  }
+
+  /**
+   * Get the control element from the raw event.
+   *
+   * @override
+   * @returns {HTMLElement | null}
+   */
+  get controlElement () {
+    const element = this.rawEvent?.currentTarget
+      ?? this.rawEvent?.target
+
+    if (!(element instanceof HTMLElement)) {
+      return null
+    }
+
+    return element
+  }
+
+  /**
+   * Whether the native event called preventDefault().
+   *
+   * @returns {boolean}
+   */
+  isDefaultPrevented () {
+    return Boolean(this.rawEvent?.defaultPrevented)
+  }
+}
+
+/**
+ * @typedef {'action' | 'checkbox' | 'submenu'} FuroDropdownMenuOptionType
+ */
+
+/**
+ * @typedef {{
+ *   label?: string
+ *   value?: string
+ *   disabled?: boolean
+ *   separator?: boolean
+ *   variant?: 'default' | 'destructive'
+ *   type?: FuroDropdownMenuOptionType
+ *   checked?: boolean
+ *   keepOpen?: boolean
+ *   options?: Array<FuroDropdownMenuOption>
+ * }} FuroDropdownMenuOption
+ */
+
+/**
+ * @typedef {{
+ *   rawEvent: Event
+ *   option: FuroDropdownMenuOption
+ * }} DropdownMenuOptionSelectEmitPayloadParams
+ */
+
+/**
+ * @typedef {DropdownMenuOptionSelectEmitPayloadParams} DropdownMenuOptionSelectEmitPayloadFactoryParams
+ */

package/lib/components/molecules/FuroDropdownMenu/FuroDropdownMenu.vue

@@ -0,0 +1,348 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import {
+  DropdownMenu as RekaDropdownMenu,
+} from 'reka-ui/namespaced'
+
+import FuroDropdownMenuContext from './FuroDropdownMenuContext.js'
+import FuroDropdownMenuOptionRows from './FuroDropdownMenuOptionRows.vue'
+
+export default defineComponent({
+  name: 'FuroDropdownMenu',
+
+  components: {
+    DropdownMenuRoot: RekaDropdownMenu['Root'],
+    DropdownMenuTrigger: RekaDropdownMenu['Trigger'],
+    DropdownMenuPortal: RekaDropdownMenu['Portal'],
+    DropdownMenuContent: RekaDropdownMenu['Content'],
+    FuroDropdownMenuOptionRows,
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {import('vue').PropType<import('./FuroDropdownMenuContext.js').Props['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+    triggerParcel: {
+      /** @type {import('vue').PropType<import('./FuroDropdownMenuContext.js').Props['triggerParcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  slots: /** @type {import('./FuroDropdownMenuContext.js').FuroDropdownMenuSlots} */ (Object),
+  emits: FuroDropdownMenuContext.EMIT_EVENT_HASH,
+
+  /** @type {import('./FuroDropdownMenuContext.js').FuroDropdownMenuSetup} */
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroDropdownMenuContext.create({
+      props,
+      componentContext,
+    })
+
+    return {
+      context,
+    }
+  },
+})
+</script>
+
+<template>
+  <div
+    :class="[
+      $attrs.class,
+      context.extractRootClassNames(),
+    ]"
+    :style="$attrs.style"
+  >
+    <DropdownMenuRoot
+      v-bind="context.extractRootAttributes()"
+      :open="context.extractOpenValue()"
+      :disabled="context.isDisabled()"
+      @update:open="context.onOpenChange({
+        isOpen: $event,
+      })"
+    >
+      <DropdownMenuTrigger
+        :as-child="context.shouldRenderTriggerAsChild()"
+        :class="context.extractTriggerClassNames()"
+        :disabled="context.isDisabled()"
+        aria-haspopup="menu"
+        v-bind="context.extractTriggerAttributes()"
+      >
+        <slot name="trigger">
+          Menu
+        </slot>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuPortal>
+        <DropdownMenuContent
+          class="unit-dropdown-menu-content"
+          v-bind="context.extractContentAttributes()"
+          @pointer-down-outside="context.onRootContentPointerDownOutside({
+            rawEvent: $event,
+          })"
+          @focus-outside="context.onRootContentFocusOutside({
+            rawEvent: $event,
+          })"
+          @close-auto-focus="context.onRootContentCloseAutoFocus({
+            rawEvent: $event,
+          })"
+        >
+          <FuroDropdownMenuOptionRows
+            :context="context"
+            :options="context.extractMenuOptions()"
+          >
+            <template #option-label="slotProps">
+              <slot
+                name="option-label"
+                :option="slotProps.option"
+                :index="slotProps.index"
+              />
+            </template>
+          </FuroDropdownMenuOptionRows>
+
+          <slot />
+        </DropdownMenuContent>
+      </DropdownMenuPortal>
+    </DropdownMenuRoot>
+  </div>
+</template>
+
+<style>
+@layer furo {
+  .unit-dropdown-menu.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .unit-dropdown-menu > .unit-button {
+    position: relative;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--size-space-2x-small);
+
+    min-width: 0;
+
+    border: var(--size-thinnest) solid transparent;
+    border-radius: var(--size-border-radius-medium);
+
+    padding-block: 0.5rem;
+    padding-inline: 0.625rem;
+
+    height: var(--size-input-height);
+
+    background-color: transparent;
+
+    color: var(--color-foreground);
+    font: inherit;
+    font-family: var(--font-family);
+    font-size: var(--font-size);
+    font-weight: var(--font-weight-medium, 500);
+    line-height: var(--font-line-height-body, 1.4);
+    white-space: nowrap;
+    text-decoration: none;
+
+    cursor: pointer;
+
+    transition-duration: var(--transition-timer);
+    transition-property: color, background-color, border-color, box-shadow;
+  }
+
+  .unit-dropdown-menu > .unit-button:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 0.125rem var(--color-ring);
+  }
+
+  .unit-dropdown-menu > .unit-button:active:not(.disabled):not(.loading):not([data-disabled]) {
+    transform: translateY(0.0625rem);
+  }
+
+  .unit-dropdown-menu > .unit-button.disabled,
+  .unit-dropdown-menu > .unit-button[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .unit-dropdown-menu > .unit-button.loading {
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .unit-dropdown-menu > .unit-button.default {
+    background-color: var(--color-primary);
+    border-color: var(--color-primary);
+    color: var(--color-primary-foreground);
+  }
+
+  .unit-dropdown-menu > .unit-button.default:hover:not(.disabled):not(.loading):not([data-disabled]) {
+    filter: brightness(0.95);
+  }
+
+  .unit-dropdown-menu > .unit-button.secondary {
+    background-color: var(--color-secondary);
+    border-color: var(--color-secondary);
+    color: var(--color-secondary-foreground);
+  }
+
+  .unit-dropdown-menu > .unit-button.secondary:hover:not(.disabled):not(.loading):not([data-disabled]) {
+    filter: brightness(0.95);
+  }
+
+  .unit-dropdown-menu > .unit-button.destructive {
+    background-color: var(--color-destructive);
+    border-color: var(--color-destructive);
+    color: var(--color-destructive-foreground);
+  }
+
+  .unit-dropdown-menu > .unit-button.destructive:hover:not(.disabled):not(.loading):not([data-disabled]) {
+    filter: brightness(0.95);
+  }
+
+  .unit-dropdown-menu > .unit-button.outline {
+    background-color: transparent;
+    border-color: var(--color-border);
+    color: var(--color-foreground);
+  }
+
+  .unit-dropdown-menu > .unit-button.outline:hover:not(.disabled):not(.loading):not([data-disabled]) {
+    background-color: var(--color-accent);
+    color: var(--color-accent-foreground);
+  }
+
+  .unit-dropdown-menu > .unit-button.ghost {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--color-foreground);
+  }
+
+  .unit-dropdown-menu > .unit-button.ghost:hover:not(.disabled):not(.loading):not([data-disabled]) {
+    background-color: var(--color-accent);
+    color: var(--color-accent-foreground);
+  }
+
+  .unit-dropdown-menu > .unit-button.link {
+    height: auto;
+
+    padding-block: 0;
+    padding-inline: 0;
+
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--color-popover-foreground);
+  }
+
+  .unit-dropdown-menu > .unit-button.link:hover:not(.disabled):not(.loading):not([data-disabled]) {
+    text-decoration: underline;
+  }
+
+  .unit-dropdown-menu > .unit-button.size-sm {
+    height: 2rem;
+
+    padding-block: 0.25rem;
+    padding-inline: 0.75rem;
+
+    font-size: var(--font-size-small);
+  }
+
+  .unit-dropdown-menu > .unit-button.size-lg {
+    height: 2.75rem;
+
+    padding-block: 0.625rem;
+    padding-inline: 1.25rem;
+
+    font-size: var(--font-size-large);
+  }
+
+  .unit-dropdown-menu > .unit-button.size-icon {
+    width: 2.75rem;
+    min-width: 2.75rem;
+    height: 2.75rem;
+
+    padding-block: 0;
+    padding-inline: 0;
+  }
+
+  .unit-dropdown-menu-content {
+    z-index: var(--value-z-index-layer-popover);
+
+    min-width: 8rem;
+
+    border-radius: var(--size-border-radius-medium);
+    border: var(--size-thinnest) solid var(--color-border);
+
+    padding: 0.25rem;
+
+    background-color: var(--color-popover);
+    color: var(--color-popover-foreground);
+    box-shadow: var(--shadow-strong);
+    font: var(--font-body-medium);
+  }
+
+  .unit-dropdown-menu-content > .menu-option {
+    position: relative;
+
+    display: flex;
+    align-items: center;
+    gap: var(--size-space-2x-small);
+
+    border-radius: var(--size-border-radius-small);
+
+    padding-block: 0.25rem;
+    padding-inline: 0.375rem;
+
+    min-height: calc(var(--size-input-height) - 0.5rem);
+
+    user-select: none;
+    cursor: default;
+
+    outline: none;
+  }
+
+  .unit-dropdown-menu-content > .menu-option[data-highlighted]:not([data-disabled]) {
+    background-color: var(--color-accent);
+    color: var(--color-accent-foreground);
+  }
+
+  .unit-dropdown-menu-content > .menu-option[data-disabled] {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  .unit-dropdown-menu-content > .menu-option.destructive {
+    color: var(--color-destructive);
+  }
+
+  .unit-dropdown-menu-content > .menu-option.destructive[data-highlighted]:not([data-disabled]) {
+    background-color: var(--color-destructive);
+    color: var(--color-destructive-foreground);
+  }
+
+  .unit-dropdown-menu-content > .separator {
+    height: var(--size-thinnest);
+    background-color: var(--color-border);
+
+    margin-block: 0.25rem;
+    margin-inline: calc(0.25rem * -1);
+  }
+}
+</style>