@openreachtech/furo-vue 1.6.0 → 2.0.0

package/lib/components/atoms/FuroCheckbox/FuroCheckboxContext.js

@@ -251,7 +251,7 @@ export default class FuroCheckboxContext extends BaseFuroContext {
 
     const { value: attrsValue } = this.attrs ?? {}
 
-    if (attrsValue !== undefined) {
+    if (typeof attrsValue !== 'undefined') {
       return Boolean(attrsValue)
     }
 

package/lib/components/atoms/FuroSwitch/FuroSwitchContext.js

@@ -225,7 +225,7 @@ export default class FuroSwitchContext extends BaseFuroContext {
 
     const { value: attrsValue } = this.attrs ?? {}
 
-    if (attrsValue !== undefined) {
+    if (typeof attrsValue !== 'undefined') {
       return Boolean(attrsValue)
     }
 

package/lib/components/atoms/FuroToggle/FuroToggleContext.js

@@ -191,7 +191,7 @@ export default class FuroToggleContext extends BaseFuroContext {
 
     const { value: attrsValue } = this.attrs ?? {}
 
-    if (attrsValue !== undefined) {
+    if (typeof attrsValue !== 'undefined') {
       return Boolean(attrsValue)
     }
 

package/lib/components/molecules/FuroAccordion/FuroAccordionContext.js

@@ -267,7 +267,7 @@ export default class FuroAccordionContext extends BaseFuroContext {
 
     const { value: attrsValue } = this.attrs ?? {}
 
-    if (attrsValue !== undefined) {
+    if (typeof attrsValue !== 'undefined') {
       return /** @type {FuroAccordionValue} */ (attrsValue)
     }
 

package/lib/components/molecules/FuroCollapsible/FuroCollapsibleContext.js

@@ -192,7 +192,7 @@ export default class FuroCollapsibleContext extends BaseFuroContext {
 
     const { value: attrsValue } = this.attrs ?? {}
 
-    if (attrsValue !== undefined) {
+    if (typeof attrsValue !== 'undefined') {
       return Boolean(attrsValue)
     }
 

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

@@ -170,7 +170,6 @@ export default class FuroDropdownMenuContext extends BaseFuroContext {
    */
   get parcel () {
     return {
-      open: undefined,
       disabled: false,
       side: 'bottom',
       align: 'start',
@@ -199,7 +198,7 @@ export default class FuroDropdownMenuContext extends BaseFuroContext {
    * @returns {boolean}
    */
   isOpenControlled () {
-    return this.parcel?.open !== undefined
+    return typeof this.parcel?.open !== 'undefined'
   }
 
   /**

package/lib/components/molecules/FuroPopover/FuroPopoverContext.js

@@ -125,7 +125,7 @@ export default class FuroPopoverContext extends BaseFuroContext {
    * @returns {boolean} true when `parcel.open` is supplied.
    */
   isOpenControlled () {
-    return this.parcel?.open !== undefined
+    return typeof this.parcel?.open !== 'undefined'
       && this.parcel?.open !== null
   }
 

package/lib/components/molecules/FuroSelect/FuroSelect.vue

@@ -9,12 +9,14 @@ import {
 
 import FuroIcon from '../../atoms/FuroIcon/FuroIcon.vue'
 import FuroSelectContext from './FuroSelectContext.js'
+import FuroSelectOptionText from './FuroSelectOptionText.vue'
 
 export default defineComponent({
   name: 'FuroSelect',
 
   components: {
     FuroIcon,
+    FuroSelectOptionText,
     SelectRoot: RekaSelect['Root'],
     SelectTrigger: RekaSelect['Trigger'],
     SelectValue: RekaSelect['Value'],
@@ -168,7 +170,7 @@ export default defineComponent({
           <SelectViewport class="viewport">
             <template
               v-for="(option, index) in context.parcel?.options"
-              :key="index"
+              :key="context.generateOptionKey({ option, index })"
             >
               <template v-if="context.shouldShowGroupOption({ option })">
                 <SelectGroup
@@ -192,7 +194,7 @@ export default defineComponent({
 
                     <template
                       v-for="(groupChildOption, groupChildIndex) in context.extractGroupOptions({ option })"
-                      :key="groupChildIndex"
+                      :key="context.generateOptionKey({ option: groupChildOption, index: groupChildIndex })"
                     >
                       <SelectOption
                         class="option"
@@ -206,7 +208,7 @@ export default defineComponent({
                           :option="groupChildOption"
                           :option-index="groupChildIndex"
                         >
-                          <SelectOptionText>
+                          <FuroSelectOptionText>
                             <slot
                               name="option-text"
                               :option="groupChildOption"
@@ -214,7 +216,7 @@ export default defineComponent({
                             >
                               {{ context.resolveOptionLabel({ option: groupChildOption }) }}
                             </slot>
-                          </SelectOptionText>
+                          </FuroSelectOptionText>
 
                           <SelectOptionIndicator class="select-indicator">
                             <slot
@@ -252,7 +254,7 @@ export default defineComponent({
                     :option="option"
                     :option-index="index"
                   >
-                    <SelectOptionText>
+                    <FuroSelectOptionText>
                       <slot
                         name="option-text"
                         :option="option"
@@ -260,7 +262,7 @@ export default defineComponent({
                       >
                         {{ context.resolveOptionLabel({ option }) }}
                       </slot>
-                    </SelectOptionText>
+                    </FuroSelectOptionText>
 
                     <SelectOptionIndicator class="select-indicator">
                       <slot

package/lib/components/molecules/FuroSelect/FuroSelectContext.js

@@ -295,6 +295,41 @@ export default class FuroSelectContext extends BaseFuroContext {
       ?? null
   }
 
+  /**
+   * Build an option's render key from its value and label, so a change to either
+   * remounts the item, because the item records both only when it mounts.
+   *
+   * @param {{
+   *   option: FuroSelectOption
+   *   index: number
+   * }} params - Parameters of this method.
+   * @returns {string} Render key.
+   */
+  generateOptionKey ({
+    option,
+    index,
+  }) {
+    if (this.shouldShowGroupOption({ option })) {
+      return `group-${index}`
+    }
+
+    return JSON.stringify(
+      [
+        this.resolveOptionValue({
+          option,
+        }),
+        this.resolveOptionLabel({
+          option,
+        }),
+      ],
+      (key, value) => (
+        typeof value === 'bigint'
+          ? `${value}n`
+          : value
+      )
+    )
+  }
+
   /**
    * Setup component context.
    *

package/lib/components/molecules/FuroSelect/FuroSelectOptionText.vue

@@ -0,0 +1,40 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import {
+  Select as RekaSelect,
+} from 'reka-ui/namespaced'
+
+import FuroSelectOptionTextContext from './FuroSelectOptionTextContext.js'
+
+export default defineComponent({
+  name: 'FuroSelectOptionText',
+
+  components: {
+    SelectOptionText: RekaSelect['ItemText'],
+  },
+
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroSelectOptionTextContext.create({
+      props,
+      componentContext,
+    })
+      .setupComponent()
+
+    return {
+      context,
+    }
+  },
+})
+</script>
+
+<template>
+  <SelectOptionText :ref="context.textComponentRef">
+    <slot />
+  </SelectOptionText>
+</template>

package/lib/components/molecules/FuroSelect/FuroSelectOptionTextContext.js

@@ -0,0 +1,275 @@
+import {
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowRef,
+} from 'vue'
+
+import {
+  injectSelectItemContext,
+  injectSelectRootContext,
+} from 'reka-ui'
+
+import BaseFuroContext from '../../../contexts/BaseFuroContext.js'
+
+/**
+ * Context class for the text of one FuroSelect option.
+ *
+ * @extends {BaseFuroContext<null, {}, never>}
+ */
+export default class FuroSelectOptionTextContext extends BaseFuroContext {
+  /**
+   * Constructor.
+   *
+   * @param {FuroSelectOptionTextContextParams} params - Parameters of this constructor.
+   */
+  constructor ({
+    props,
+    componentContext,
+    refHash,
+    selectRootContext,
+    selectItemContext,
+  }) {
+    super({
+      props,
+      componentContext,
+    })
+
+    this.refHash = refHash
+    this.selectRootContext = selectRootContext
+    this.selectItemContext = selectItemContext
+  }
+
+  /**
+   * Factory method.
+   *
+   * @template {X extends typeof FuroSelectOptionTextContext ? X : never} T, X
+   * @override
+   * @param {FuroSelectOptionTextContextFactoryParams} params - Parameters of this factory method.
+   * @returns {InstanceType<T>} An instance of this class.
+   * @this {T}
+   */
+  static create ({
+    props,
+    componentContext,
+
+    refHash = this.buildRefHash(),
+    selectRootContext = this.injectSelectRootContext(),
+    selectItemContext = this.injectSelectItemContext(),
+  }) {
+    return /** @type {InstanceType<T>} */ (
+      new this({
+        props,
+        componentContext,
+
+        refHash,
+        selectRootContext,
+        selectItemContext,
+      })
+    )
+  }
+
+  /**
+   * Build ref hash.
+   *
+   * @override
+   * @returns {FuroSelectOptionTextContextParams['refHash']}
+   */
+  static buildRefHash () {
+    return {
+      textComponentRef: shallowRef(null),
+      observerRef: shallowRef(null),
+      recordedTextRef: ref(null),
+    }
+  }
+
+  /**
+   * Inject the select root context, which holds the text the trigger shows.
+   *
+   * @returns {FuroSelectRootContext}
+   */
+  static injectSelectRootContext () {
+    return injectSelectRootContext()
+  }
+
+  /**
+   * Inject the context of the option that holds this text.
+   *
+   * @returns {FuroSelectItemContext}
+   */
+  static injectSelectItemContext () {
+    return injectSelectItemContext()
+  }
+
+  /**
+   * get: Ctor
+   *
+   * @override
+   * @returns {typeof FuroSelectOptionTextContext}
+   */
+  get Ctor () {
+    return /** @type {typeof FuroSelectOptionTextContext} */ (
+      this.constructor
+    )
+  }
+
+  /**
+   * get: textComponentRef
+   *
+   * @returns {import('vue').ShallowRef<{ $el: HTMLElement } | null>}
+   */
+  get textComponentRef () {
+    return this.refHash.textComponentRef
+  }
+
+  /**
+   * get: observerRef
+   *
+   * @returns {import('vue').ShallowRef<MutationObserver | null>}
+   */
+  get observerRef () {
+    return this.refHash.observerRef
+  }
+
+  /**
+   * get: recordedTextRef
+   *
+   * @returns {import('vue').Ref<string | null>}
+   */
+  get recordedTextRef () {
+    return this.refHash.recordedTextRef
+  }
+
+  /**
+   * Setup component context.
+   *
+   * @template {X extends FuroSelectOptionTextContext ? X : never} T, X
+   * @override
+   * @returns {T} - For method chaining.
+   * @this {T}
+   */
+  setupComponent () {
+    onMounted(() => {
+      this.recordedTextRef.value = this.extractText()
+      this.observeTextElement()
+    })
+
+    onBeforeUnmount(() => {
+      this.disconnectObserver()
+    })
+
+    return this
+  }
+
+  /**
+   * Extract the rendered text element.
+   *
+   * @returns {HTMLElement | null}
+   */
+  extractTextElement () {
+    return this.textComponentRef.value?.$el
+      ?? null
+  }
+
+  /**
+   * Extract the rendered text.
+   *
+   * @returns {string | null}
+   */
+  extractText () {
+    return this.extractTextElement()?.textContent
+      ?? null
+  }
+
+  /**
+   * Watch the rendered text for changes.
+   */
+  observeTextElement () {
+    const textElement = this.extractTextElement()
+
+    if (!textElement) {
+      return
+    }
+
+    const observer = this.Ctor.createMutationObserver({
+      handler: () => this.syncText(),
+    })
+
+    observer.observe(textElement, {
+      subtree: true,
+      childList: true,
+      characterData: true,
+    })
+
+    this.observerRef.value = observer
+  }
+
+  /**
+   * Replace the recorded option text when the rendered text differs from it.
+   */
+  syncText () {
+    const text = this.extractText()
+
+    if (text === null) {
+      return
+    }
+
+    if (text === this.recordedTextRef.value) {
+      return
+    }
+
+    this.recordedTextRef.value = text
+    this.selectRootContext.onOptionAdd({
+      value: this.selectItemContext.value,
+      disabled: this.selectItemContext.disabled.value,
+      textContent: text,
+    })
+  }
+
+  /**
+   * Stop watching the rendered text.
+   */
+  disconnectObserver () {
+    this.observerRef.value?.disconnect()
+    this.observerRef.value = null
+  }
+}
+
+/**
+ * @typedef {{
+ *   onOptionAdd: (option: {
+ *     value: unknown
+ *     disabled: boolean
+ *     textContent: string
+ *   }) => void
+ * }} FuroSelectRootContext
+ */
+
+/**
+ * @typedef {{
+ *   value: unknown
+ *   disabled: import('vue').Ref<boolean>
+ * }} FuroSelectItemContext
+ */
+
+/**
+ * @typedef {import('../../../contexts/BaseFuroContext.js').BaseFuroContextParams & {
+ *   props: {}
+ *   componentContext: import('vue').SetupContext
+ *   refHash: {
+ *     textComponentRef: import('vue').ShallowRef<{ $el: HTMLElement } | null>
+ *     observerRef: import('vue').ShallowRef<MutationObserver | null>
+ *     recordedTextRef: import('vue').Ref<string | null>
+ *   }
+ *   selectRootContext: FuroSelectRootContext
+ *   selectItemContext: FuroSelectItemContext
+ * }} FuroSelectOptionTextContextParams
+ */
+
+/**
+ * @typedef {Omit<FuroSelectOptionTextContextParams, 'refHash' | 'selectRootContext' | 'selectItemContext'> & {
+ *   refHash?: FuroSelectOptionTextContextParams['refHash']
+ *   selectRootContext?: FuroSelectRootContext
+ *   selectItemContext?: FuroSelectItemContext
+ * }} FuroSelectOptionTextContextFactoryParams
+ */

package/lib/components/molecules/FuroSplitter/FuroSplitterContext.js

@@ -272,7 +272,7 @@ export default class FuroSplitterContext extends BaseFuroContext {
   }) {
     const entries = Object.entries(panel)
       .filter(([key]) => SPLITTER_PANEL_KEYS.has(key))
-      .filter(([, value]) => value !== undefined)
+      .filter(([, value]) => typeof value !== 'undefined')
 
     return Object.fromEntries(entries)
   }

package/lib/components/molecules/FuroToggleGroup/FuroToggleGroupContext.js

@@ -250,7 +250,7 @@ export default class FuroToggleGroupContext extends BaseFuroContext {
 
     const { value: attrsValue } = this.attrs ?? {}
 
-    if (attrsValue !== undefined) {
+    if (typeof attrsValue !== 'undefined') {
       return /** @type {FuroToggleGroupValue} */ (attrsValue)
     }
 

package/lib/components/molecules/FuroTooltip/FuroTooltipContext.js

@@ -144,7 +144,7 @@ export default class FuroTooltipContext extends BaseFuroContext {
    * @returns {boolean} true when `parcel.open` is supplied.
    */
   isOpenControlled () {
-    return this.parcel?.open !== undefined
+    return typeof this.parcel?.open !== 'undefined'
       && this.parcel?.open !== null
   }
 

package/lib/components/organisms/FuroTable/FuroTableContext.js

@@ -129,11 +129,11 @@ export default class FuroTableContext extends BaseFuroContext {
    * Wrapped as a static hook so scroll throttling can be driven deterministically
    * in tests (spy on this method) instead of depending on the browser global.
    *
-   * @param {FrameRequestCallback} callback - Callback to run on the next frame.
+   * @param {FrameRequestCallback} frameCallback - Callback to run on the next frame.
    * @returns {number} The frame request id.
    */
-  static requestFrame (callback) {
-    return globalThis.requestAnimationFrame(callback)
+  static requestFrame (frameCallback) {
+    return globalThis.requestAnimationFrame(frameCallback)
   }
 
   /**

package/lib/components/organisms/FuroToast/FuroToastContext.js

@@ -61,13 +61,17 @@ const LOADING_DURATION = 1000000000
  * only accent — the toast body stays neutral.
  */
 const TYPE_ICON_NAME_HASH = {
-  info: 'ph:info',
   success: 'ph:check-circle',
   warning: 'ph:warning',
   error: 'ph:x-circle',
   loading: 'ph:circle-notch',
 }
 
+/**
+ * Icon name of the default `info` type, which the hash above leaves out.
+ */
+const DEFAULT_TYPE_ICON_NAME = 'ph:info'
+
 /**
  * Context class for FuroToast organism.
  *
@@ -591,7 +595,7 @@ export default class FuroToastContext extends BaseFuroContext {
     type,
   }) {
     return TYPE_ICON_NAME_HASH[type]
-      ?? TYPE_ICON_NAME_HASH[DEFAULT_TYPE]
+      ?? DEFAULT_TYPE_ICON_NAME
   }
 
   /**

package/lib/components/organisms/FuroToast/ToastQueue.js

@@ -266,10 +266,10 @@ export default class ToastQueue {
    * @param {ToastConfig} [params] - Configuration to merge.
    */
   configure (params = {}) {
-    Object.assign(
-      this.stateReactive.config,
-      params
-    )
+    this.stateReactive.config = {
+      ...this.stateReactive.config,
+      ...params,
+    }
   }
 
   /**

package/nuxt/index.js

@@ -43,14 +43,14 @@ export default defineNuxtModule({
       nuxt,
     })
 
-    Object.assign(nuxt.options.appConfig, {
-      furoVue: {
-        iconComponentName: extractIconComponentName({
-          options,
-          nuxt,
-        }),
-      },
-    })
+    const { appConfig } = nuxt.options
+
+    appConfig.furoVue = {
+      iconComponentName: extractIconComponentName({
+        options,
+        nuxt,
+      }),
+    }
 
     const resolver = createResolver(import.meta.url)
 
@@ -84,7 +84,7 @@ async function ensureIconModule ({
     throw new Error(`[@openreachtech/furo-vue] the Nuxt module needs \`${ICON_MODULE_NAME}\` to draw the names the icon registry lacks. Install it with \`npm install ${ICON_MODULE_NAME}\`, or drop this module and install a renderer yourself with \`furoIconRegistry.useIconRenderer()\`.`)
   }
 
-  await installModule(ICON_MODULE_NAME, undefined, nuxt)
+  await installModule(ICON_MODULE_NAME, {}, nuxt)
 }
 
 /**