@openreachtech/furo-vue 1.3.1

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

@@ -0,0 +1,222 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import {
+  DropdownMenu as RekaDropdownMenu,
+} from 'reka-ui/namespaced'
+
+import FuroIcon from '../../atoms/FuroIcon/FuroIcon.vue'
+
+export default defineComponent({
+  name: 'FuroDropdownMenuOptionRows',
+
+  components: {
+    DropdownMenuOption: RekaDropdownMenu['Item'],
+    DropdownMenuCheckboxOption: RekaDropdownMenu['CheckboxItem'],
+    DropdownMenuOptionIndicator: RekaDropdownMenu['ItemIndicator'],
+    DropdownMenuSeparator: RekaDropdownMenu['Separator'],
+    DropdownMenuSub: RekaDropdownMenu['Sub'],
+    DropdownMenuSubTrigger: RekaDropdownMenu['SubTrigger'],
+    DropdownMenuSubContent: RekaDropdownMenu['SubContent'],
+    DropdownMenuPortal: RekaDropdownMenu['Portal'],
+    FuroIcon,
+  },
+
+  props: {
+    context: {
+      /** @type {import('vue').PropType<import('./FuroDropdownMenuContext.js').default>} */
+      type: Object,
+      required: true,
+    },
+    options: {
+      /** @type {import('vue').PropType<Array<import('./FuroDropdownMenuContext.js').FuroDropdownMenuOption>>} */
+      type: Array,
+      default: () => [],
+    },
+    parentKey: {
+      type: String,
+      default: 'root',
+    },
+  },
+
+  slots: /** @type {import('./FuroDropdownMenuContext.js').FuroDropdownMenuSlots} */ (Object),
+})
+</script>
+
+<template>
+  <template
+    v-for="(menuOption, index) in options"
+    :key="context.buildOptionStableKey({
+      option: menuOption,
+      index,
+      parentKey,
+    })"
+  >
+    <DropdownMenuSeparator
+      v-if="context.isSeparatorOption({ option: menuOption })"
+      class="separator"
+    />
+
+    <DropdownMenuSub
+      v-else-if="context.isSubmenuOption({ option: menuOption })"
+    >
+      <DropdownMenuSubTrigger
+        class="menu-option submenu-trigger"
+        :disabled="menuOption.disabled"
+      >
+        <slot
+          name="option-label"
+          :option="menuOption"
+          :index="index"
+        >
+          {{ menuOption.label }}
+        </slot>
+
+        <slot
+          name="submenu-icon"
+          :option="menuOption"
+          :index="index"
+        >
+          <FuroIcon
+            name="ph:caret-right"
+            class="submenu-chevron"
+          />
+        </slot>
+      </DropdownMenuSubTrigger>
+
+      <DropdownMenuPortal>
+        <DropdownMenuSubContent
+          class="unit-dropdown-menu-content submenu-content"
+          :side-offset="4"
+        >
+          <FuroDropdownMenuOptionRows
+            :context="context"
+            :options="context.extractSubmenuOptions({ option: menuOption })"
+            :parent-key="context.buildOptionStableKey({
+              option: menuOption,
+              index,
+              parentKey,
+            })"
+          >
+            <template #option-label="slotProps">
+              <slot
+                name="option-label"
+                :option="slotProps.option"
+                :index="slotProps.index"
+              />
+            </template>
+          </FuroDropdownMenuOptionRows>
+        </DropdownMenuSubContent>
+      </DropdownMenuPortal>
+    </DropdownMenuSub>
+
+    <DropdownMenuCheckboxOption
+      v-else-if="context.isCheckboxOption({ option: menuOption })"
+      class="menu-option checkbox-option"
+      :class="{
+        destructive: context.isDestructiveOption({ option: menuOption }),
+      }"
+      :disabled="menuOption.disabled"
+      :model-value="context.extractCheckboxCheckedValue({ option: menuOption })"
+      @select="context.onCheckboxOptionSelect({
+        option: menuOption,
+        rawEvent: $event,
+      })"
+      @update:model-value="context.onCheckboxCheckedChange({
+        option: menuOption,
+        checked: $event,
+      })"
+    >
+      <span class="checkbox-indicator-slot">
+        <DropdownMenuOptionIndicator class="checkbox-indicator">
+          <slot
+            name="option-indicator-icon"
+            :option="menuOption"
+            :index="index"
+          >
+            <FuroIcon
+              name="ph:check"
+              class="checkbox-icon"
+            />
+          </slot>
+        </DropdownMenuOptionIndicator>
+      </span>
+
+      <slot
+        name="option-label"
+        :option="menuOption"
+        :index="index"
+      >
+        {{ menuOption.label }}
+      </slot>
+    </DropdownMenuCheckboxOption>
+
+    <DropdownMenuOption
+      v-else
+      class="menu-option"
+      :class="{
+        destructive: context.isDestructiveOption({ option: menuOption }),
+      }"
+      :disabled="menuOption.disabled"
+      @select="context.onOptionSelect({
+        option: menuOption,
+        rawEvent: $event,
+      })"
+    >
+      <slot
+        name="option-label"
+        :option="menuOption"
+        :index="index"
+      >
+        {{ menuOption.label }}
+      </slot>
+    </DropdownMenuOption>
+  </template>
+</template>
+
+<style>
+@layer furo {
+  .unit-dropdown-menu-content.submenu-content {
+    z-index: calc(var(--value-z-index-layer-popover) + 1);
+  }
+
+  .unit-dropdown-menu-content > .submenu-trigger {
+    justify-content: space-between;
+  }
+
+  .unit-dropdown-menu-content > .submenu-trigger > .submenu-chevron {
+    flex-shrink: 0;
+
+    width: 1rem;
+    height: 1rem;
+
+    opacity: 0.7;
+  }
+
+  .unit-dropdown-menu-content > .checkbox-option {
+    padding-inline-start: 0.375rem;
+  }
+
+  .unit-dropdown-menu-content > .checkbox-option > .checkbox-indicator-slot {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .unit-dropdown-menu-content > .checkbox-option > .checkbox-indicator-slot > .checkbox-indicator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .unit-dropdown-menu-content > .checkbox-option > .checkbox-indicator-slot > .checkbox-indicator > .checkbox-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+}
+</style>

package/lib/components/molecules/FuroEditableField/EditableEmitPayload.js

@@ -0,0 +1,89 @@
+import BaseEmitPayload from '../../../emit-payload/BaseEmitPayload.js'
+
+/**
+ * EditableEmitPayload.
+ *
+ * @extends {BaseEmitPayload<EditableRawEvent, HTMLElement>}
+ */
+export default class EditableEmitPayload extends BaseEmitPayload {
+  /**
+   * Get the event detail.
+   *
+   * @returns {EditableRawEvent['detail'] | null}
+   */
+  get eventDetail () {
+    return this.rawEvent?.detail
+      ?? null
+  }
+
+  /**
+   * Get the control element from the raw event.
+   *
+   * @override
+   * @returns {HTMLElement | null}
+   */
+  get controlElement () {
+    return this.eventDetail?.target
+      ?? null
+  }
+
+  /**
+   * Current value for this emit.
+   *
+   * @returns {FuroEditableValue | null}
+   */
+  get value () {
+    return this.eventDetail?.value
+      ?? null
+  }
+
+  /**
+   * Whether the value is empty.
+   *
+   * @returns {boolean}
+   */
+  hasEmptyValue () {
+    const current = this.value
+
+    if (current === null) {
+      return true
+    }
+
+    if (typeof current === 'string') {
+      return current.length === 0
+    }
+
+    if (typeof current === 'object') {
+      return Object.keys(current).length === 0
+    }
+
+    if (Array.isArray(current)) {
+      return current.length === 0
+    }
+
+    return false
+  }
+}
+
+/**
+ * Any value except `undefined`.
+ *
+ * @typedef {*} FuroEditableValue
+ */
+
+/**
+ * @typedef {CustomEvent<{
+ *   target?: HTMLElement | null
+ *   value: FuroEditableValue | null
+ * }>} EditableRawEvent
+ */
+
+/**
+ * @typedef {{
+ *   rawEvent: EditableRawEvent | null
+ * }} EditableEmitPayloadParams
+ */
+
+/**
+ * @typedef {EditableEmitPayloadParams} EditableEmitPayloadFactoryParams
+ */

package/lib/components/molecules/FuroEditableField/FuroEditableField.vue

@@ -0,0 +1,314 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import {
+  EditableArea,
+  EditableCancelTrigger,
+  EditableEditTrigger,
+  EditablePreview,
+  EditableRoot,
+  EditableSubmitTrigger,
+  EditableInput,
+} from 'reka-ui'
+
+import FuroIcon from '../../atoms/FuroIcon/FuroIcon.vue'
+import FuroEditableFieldContext from './FuroEditableFieldContext.js'
+import FuroTextField from '../../atoms/FuroTextField/FuroTextField.vue'
+
+export default defineComponent({
+  name: 'FuroEditableField',
+
+  components: {
+    EditableArea,
+    EditableCancelTrigger,
+    EditableEditTrigger,
+    EditablePreview,
+    EditableInput,
+    EditableRoot,
+    EditableSubmitTrigger,
+    FuroIcon,
+    FuroTextField,
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {import('vue').PropType<import('./FuroEditableFieldContext.js').Props['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  slots: /** @type {FuroEditableFieldSlots} */ (Object),
+  emits: FuroEditableFieldContext.EMIT_EVENT_HASH,
+
+  /** @type {FuroEditableFieldSetup} */
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroEditableFieldContext.create({
+      props,
+      componentContext,
+    })
+      .setupComponent()
+
+    return {
+      context,
+    }
+  },
+})
+
+/**
+ * @import { FuroEditableFieldSlots } from './FuroEditableFieldContext.js'
+ * @import { FuroEditableFieldSetup } from './FuroEditableFieldContext.js'
+ */
+</script>
+
+<template>
+  <EditableRoot
+    v-slot="defaultSlotProps"
+    :ref="context.editableRootInstanceRef"
+    as-child
+    v-bind="context.extractRootAttributes()"
+    :model-value="context.committedValueRef.value"
+    :disabled="context.isDisabled()"
+    :readonly="context.isReadonly()"
+    :required="context.isRequired()"
+    :placeholder="context.extractPlaceholder()"
+    @submit="context.onSubmitCommittedValue()"
+    @update:state="context.onUpdateEditingState({
+      editingState: $event,
+    })"
+  >
+    <div
+      :ref="context.anchorElementRef"
+      class="unit-form-control editable"
+      :class="[
+        $attrs.class,
+        {
+          disabled: context.isDisabled(),
+        },
+      ]"
+      :style="$attrs.style"
+    >
+      <EditableArea class="contents">
+        <EditablePreview
+          class="preview"
+          :hidden="false"
+        >
+          <template v-if="context.hasEmptyValue()">
+            {{ context.parcel.emptyPreviewText }}
+          </template>
+
+          <slot
+            v-else
+            name="preview"
+            v-bind="context.buildSlotProps({
+              defaultSlotProps,
+            })"
+          >
+            {{ context.resolvePreviewText() }}
+          </slot>
+        </EditablePreview>
+
+        <EditableEditTrigger
+          v-show="context.parcel.showActions"
+          :as-child="Object.hasOwn($slots, 'edit-trigger')"
+          class="action edit"
+          :aria-label="context.extractEditLabel()"
+        >
+          <slot
+            name="edit-trigger"
+            v-bind="context.buildSlotProps({
+              defaultSlotProps,
+            })"
+          >
+            <FuroIcon name="ph:pencil-simple" />
+          </slot>
+        </EditableEditTrigger>
+
+        <slot
+          v-if="context.shouldShowUndoChange()"
+          name="undo-trigger"
+          v-bind="context.buildSlotProps({
+            defaultSlotProps,
+          })"
+        >
+          <button
+            type="button"
+            class="action undo"
+            :aria-label="context.extractUndoLabel()"
+            @click="context.onUndoChange()"
+          >
+            <FuroIcon name="ph:arrows-counter-clockwise" />
+          </button>
+        </slot>
+
+        <EditableInput as-child>
+          <div
+            :ref="context.floatingEditorElementRef"
+            class="editor"
+            :style="context.generateEditorPositionStyle()"
+          >
+            <slot
+              v-bind="context.buildSlotProps({
+                defaultSlotProps,
+              })"
+              name="editor"
+            >
+              <FuroTextField
+                :parcel="{
+                  value: context.draftValueRef.value,
+                  invalid: context.isInvalid(),
+                }"
+                :disabled="context.isDisabled()"
+                :placeholder="context.extractPlaceholder()"
+                @change-value="context.updateDraftValue({
+                  value: $event.value,
+                })"
+              />
+            </slot>
+
+            <div
+              v-if="context.shouldShowActionButtons()"
+              class="actions"
+            >
+              <EditableSubmitTrigger
+                v-show="defaultSlotProps.isEditing"
+                :as-child="Object.hasOwn($slots, 'submit-trigger')"
+                class="action submit"
+                :aria-label="context.extractSubmitLabel()"
+              >
+                <slot
+                  name="submit-trigger"
+                  v-bind="context.buildSlotProps({
+                    defaultSlotProps,
+                  })"
+                >
+                  <FuroIcon name="ph:check" />
+                </slot>
+              </EditableSubmitTrigger>
+
+              <EditableCancelTrigger
+                v-show="defaultSlotProps.isEditing"
+                :as-child="Object.hasOwn($slots, 'cancel-trigger')"
+                class="action cancel"
+                :aria-label="context.extractCancelLabel()"
+              >
+                <slot
+                  name="cancel-trigger"
+                  v-bind="context.buildSlotProps({
+                    defaultSlotProps,
+                  })"
+                >
+                  <FuroIcon name="ph:x" />
+                </slot>
+              </EditableCancelTrigger>
+            </div>
+          </div>
+        </EditableInput>
+      </EditableArea>
+    </div>
+  </EditableRoot>
+</template>
+
+<style scoped>
+@layer furo {
+  .unit-form-control.editable {
+    position: relative;
+
+    display: flex;
+    gap: var(--size-space-small);
+
+    width: 100%;
+    min-width: 0;
+
+    background-color: transparent;
+  }
+
+  .unit-form-control.editable.disabled {
+    pointer-events: none;
+    cursor: not-allowed;
+
+    border-color: var(--color-border);
+    color: var(--color-muted-foreground);
+  }
+
+  .unit-form-control.editable > .contents {
+    width: 100%;
+
+    display: inline-flex;
+    justify-content: space-between;
+    gap: var(--size-space-tiny);
+    overflow: hidden;
+  }
+
+  .unit-form-control.editable > .contents > .preview {
+    margin-block: auto;
+
+    width: 100%;
+
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    font: var(--font-body-medium);
+  }
+
+  .unit-form-control.editable > .contents > .editor {
+    border-radius: var(--size-border-radius-medium);
+
+    min-width: fit-content;
+
+    z-index: 1000;
+  }
+
+  .unit-form-control.editable > .contents > .editor > *,
+  .unit-form-control.editable > .contents > .editor:has(.unit-form-control.checkbox) {
+    background-color: var(--color-popover);
+  }
+
+  .unit-form-control.editable > .contents > .editor > .actions {
+    position: absolute;
+    right: 0;
+
+    margin-block-start: 0.25rem;
+
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--size-space-tiny);
+  }
+
+  .unit-form-control.editable > .contents > .action,
+  .unit-form-control.editable > .contents > .editor > .actions > .action {
+    border-radius: var(--size-border-radius-small);
+
+    width: 1.25rem;
+    height: 1.25rem;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .unit-form-control.editable > .contents > .editor > .actions > .action {
+    width: 1.75rem;
+    height: 1.75rem;
+  }
+
+  .unit-form-control.editable > .contents > .action:hover,
+  .unit-form-control.editable > .contents > .editor > .actions > .action:hover {
+    background-color: var(--color-accent);
+    color: var(--color-accent-foreground);
+  }
+}
+</style>