@nexxtmove/ui 1.40.1 → 1.41.0

package/src/components/organisms/PickerPanel/PickerPanel.vue

@@ -29,6 +29,11 @@ interface NexxtPickerPanelProps {
   height?: number | string
   /** Below this height of the column row (the panel minus the header), in pixels, the preview column is left out and the list takes the full width. */
   hidePreviewBelow?: number
+  /**
+   * Render the preview column. `false` leaves it out at any height, so the list always takes the
+   * full width: for a picker whose rows are their own preview.
+   */
+  preview?: boolean
   /** Whether group headings fold their group. */
   collapsible?: boolean
   /** Heading of the empty state, shown when the search has no results. */
@@ -41,6 +46,8 @@ interface NexxtPickerPanelProps {
   previewEmptyText?: string
   /** Text announced 500ms after the search changes, e.g. `(n) => \`${n} resultaten\``. */
   resultsAnnouncement?: (count: number) => string
+  /** More items are on their way: `aria-busy` on the listbox, and no empty state meanwhile. */
+  busy?: boolean
 }
 
 defineOptions({ name: 'NexxtPickerPanel' })
@@ -51,7 +58,9 @@ const props = withDefaults(defineProps<NexxtPickerPanelProps>(), {
   width: 640,
   height: 420,
   hidePreviewBelow: 340,
+  preview: true,
   collapsible: true,
+  busy: false,
 })
 
 /** Id of the highlighted item; the list keeps it on a visible item. Drives the preview. */
@@ -83,6 +92,8 @@ defineSlots<{
   item?(props: { item: NexxtPickerItemData; highlighted: boolean }): unknown
   /** Replaces the content of the empty search state. */
   empty?(props: { search: string; clear: () => void }): unknown
+  /** Inside the listbox, after the last group, e.g. placeholder rows while `busy`. */
+  append?(): unknown
 }>()
 
 const inputField = useTemplateRef<InstanceType<typeof NexxtInputField>>('inputField')
@@ -108,7 +119,7 @@ useResizeObserver(row, ([entry]) => {
 })
 
 const showPreview = computed(
-  () => rowHeight.value === 0 || rowHeight.value >= props.hidePreviewBelow,
+  () => props.preview && (rowHeight.value === 0 || rowHeight.value >= props.hidePreviewBelow),
 )
 
 const highlightedItem = computed(
@@ -233,6 +244,7 @@ const COLUMN_CLASSES = {
           :empty-description="emptyDescription"
           :clear-label="clearLabel"
           :results-announcement="resultsAnnouncement"
+          :busy="busy"
           @select="emit('select', $event)"
           @highlight="emit('highlight', $event)"
           @close="emit('close')"
@@ -244,6 +256,9 @@ const COLUMN_CLASSES = {
           <template v-if="$slots.empty" #empty="scope">
             <slot name="empty" v-bind="scope" />
           </template>
+          <template v-if="$slots.append" #append>
+            <slot name="append" />
+          </template>
         </NexxtPickerList>
       </div>
 

package/src/components.json

@@ -59,6 +59,7 @@
   "NexxtCountrySelect": "components/organisms/CountrySelect/CountrySelect.vue",
   "NexxtDatePicker": "components/organisms/DatePicker/DatePicker.vue",
   "NexxtDropdownButton": "components/organisms/DropdownButton/DropdownButton.vue",
+  "NexxtFontPicker": "components/organisms/FontPicker/FontPicker.vue",
   "NexxtHeader": "components/organisms/Header/Header.vue",
   "NexxtModal": "components/organisms/Modal/Modal.vue",
   "NexxtPickerPanel": "components/organisms/PickerPanel/PickerPanel.vue",
@@ -77,6 +78,7 @@
   "NexxtEditorBorder": "components/editor/molecules/EditorBorder/EditorBorder.vue",
   "NexxtEditorColor": "components/editor/molecules/EditorColor/EditorColor.vue",
   "NexxtEditorFlexDirection": "components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue",
+  "NexxtEditorFontSize": "components/editor/molecules/EditorFontSize/EditorFontSize.vue",
   "NexxtEditorGap": "components/editor/molecules/EditorGap/EditorGap.vue",
   "NexxtEditorHeadingType": "components/editor/molecules/EditorHeadingType/EditorHeadingType.vue",
   "NexxtEditorJustifyContent": "components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue",

package/src/index.ts

@@ -93,16 +93,33 @@ export type {
   EditorMaxWidthMessages,
   EditorMaxWidthValue,
 } from './components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue'
-export { EDITOR_LINE_HEIGHT_STEPS } from './components/editor/molecules/EditorLineHeight/EditorLineHeight.vue'
+export {
+  EDITOR_LINE_HEIGHT_STEPS,
+  EDITOR_TEXT_LINE_HEIGHT_RATIOS,
+} from './components/editor/molecules/EditorLineHeight/EditorLineHeight.vue'
 export type {
   EditorLineHeightMessages,
   EditorLineHeightValue,
+  NexxtEditorLineHeightProps,
 } from './components/editor/molecules/EditorLineHeight/EditorLineHeight.vue'
 export { EDITOR_LETTER_SPACING_STEPS } from './components/editor/molecules/EditorLetterSpacing/EditorLetterSpacing.vue'
 export type {
   EditorLetterSpacingMessages,
   EditorLetterSpacingValue,
+  NexxtEditorLetterSpacingProps,
 } from './components/editor/molecules/EditorLetterSpacing/EditorLetterSpacing.vue'
+export { EDITOR_FONT_SIZE_STEPS } from './components/editor/molecules/EditorFontSize/EditorFontSize.vue'
+export type {
+  EditorFontSizeMessages,
+  EditorFontSizeValue,
+  NexxtEditorFontSizeProps,
+} from './components/editor/molecules/EditorFontSize/EditorFontSize.vue'
+export type {
+  NexxtFontPickerFont,
+  NexxtFontPickerInherit,
+  NexxtFontPickerMessages,
+  NexxtFontPickerProps,
+} from './components/organisms/FontPicker/FontPicker.vue'
 export { EDITOR_PADDING_STEPS } from './components/editor/molecules/EditorPadding/EditorPadding.vue'
 export type {
   EditorPaddingMessages,
@@ -136,6 +153,7 @@ export { default as NexxtEditorBackgroundSize } from './components/editor/molecu
 export { default as NexxtEditorBorder } from './components/editor/molecules/EditorBorder/EditorBorder.vue'
 export { default as NexxtEditorColor } from './components/editor/molecules/EditorColor/EditorColor.vue'
 export { default as NexxtEditorFlexDirection } from './components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue'
+export { default as NexxtEditorFontSize } from './components/editor/molecules/EditorFontSize/EditorFontSize.vue'
 export { default as NexxtEditorGap } from './components/editor/molecules/EditorGap/EditorGap.vue'
 export { default as NexxtEditorHeadingType } from './components/editor/molecules/EditorHeadingType/EditorHeadingType.vue'
 export { default as NexxtEditorJustifyContent } from './components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue'
@@ -148,6 +166,7 @@ export { default as NexxtEditorSettingsBlock } from './components/editor/atoms/E
 export { default as NexxtEditorTextAlign } from './components/editor/molecules/EditorTextAlign/EditorTextAlign.vue'
 export { default as NexxtEnergyLabel } from './components/atoms/EnergyLabel/EnergyLabel.vue'
 export { default as NexxtFloatingPanel } from './components/atoms/FloatingPanel/FloatingPanel.vue'
+export { default as NexxtFontPicker } from './components/organisms/FontPicker/FontPicker.vue'
 export { default as NexxtHeader } from './components/organisms/Header/Header.vue'
 export { default as NexxtIcon } from './components/atoms/Icon/Icon.vue'
 export { default as NexxtInfoBlock } from './components/molecules/InfoBlock/InfoBlock.vue'