@nexxtmove/ui 1.29.0 → 1.31.0

package/dist/nuxt.js

@@ -33,6 +33,7 @@ var s = {
 	NexxtPageMockup: "components/molecules/PageMockup/PageMockup.vue",
 	NexxtPageTypeTile: "components/molecules/PageTypeTile/PageTypeTile.vue",
 	NexxtPagination: "components/molecules/Pagination/Pagination.vue",
+	NexxtPlaceholderInput: "components/molecules/PlaceholderInput/PlaceholderInput.vue",
 	NexxtPropertyCard: "components/molecules/PropertyCard/PropertyCard.vue",
 	NexxtSelect: "components/molecules/Select/Select.vue",
 	NexxtSidebarMenuItem: "components/molecules/SidebarMenuItem/SidebarMenuItem.vue",
@@ -70,6 +71,7 @@ var s = {
 	NexxtVideoPlayer: "components/organisms/VideoPlayer/VideoPlayer.vue",
 	NexxtEditorSettingsBlock: "components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue",
 	NexxtEditorAlignItems: "components/editor/molecules/EditorAlignItems/EditorAlignItems.vue",
+	NexxtEditorBackgroundSize: "components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue",
 	NexxtEditorBorder: "components/editor/molecules/EditorBorder/EditorBorder.vue",
 	NexxtEditorColor: "components/editor/molecules/EditorColor/EditorColor.vue",
 	NexxtEditorFlexDirection: "components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "1.29.0",
+  "version": "1.31.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue

@@ -0,0 +1,83 @@
+<script lang="ts">
+/**
+ * The background size as the editor needs it: the Tailwind class itself, so the
+ * consumer can put the model value straight on the element it styles.
+ */
+export type EditorBackgroundSizeValue = 'bg-cover' | 'bg-contain' | 'bg-auto'
+
+/** Overridable copy for the three options. Every key is optional. */
+export interface EditorBackgroundSizeMessages {
+  /** Accessible name of the `bg-cover` option. Defaults to `'Opvullen'`. */
+  cover?: string
+  /** Accessible name of the `bg-contain` option. Defaults to `'Passend'`. */
+  contain?: string
+  /** Accessible name of the `bg-auto` option. Defaults to `'Origineel'`. */
+  auto?: string
+}
+
+export interface NexxtEditorBackgroundSizeProps {
+  /**
+   * Header text of the settings block. Defaults to the Dutch `'Vulling'`;
+   * the library has no i18n layer, so a consumer in another language passes
+   * its own copy in.
+   */
+  label?: string
+  /**
+   * Copy of the three options. The options are icon-only and show no tooltip,
+   * so this copy is purely the accessible name of each button. Defaults are
+   * Dutch and are merged per key, so overriding one keeps the defaults of the
+   * others. Copy is never translated inside the component.
+   */
+  messages?: EditorBackgroundSizeMessages
+}
+
+const DEFAULT_MESSAGES = {
+  cover: 'Opvullen',
+  contain: 'Passend',
+  auto: 'Origineel',
+} satisfies Required<EditorBackgroundSizeMessages>
+</script>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import NexxtEditorSettingsBlock from '../../atoms/EditorSettingsBlock/EditorSettingsBlock.vue'
+import NexxtToggleGroup from '../../../molecules/ToggleGroup/ToggleGroup.vue'
+import type { NexxtToggleGroupOption } from '../../../molecules/ToggleGroup/ToggleGroup.vue'
+
+defineOptions({ name: 'NexxtEditorBackgroundSize' })
+
+const { label = 'Vulling', messages } = defineProps<NexxtEditorBackgroundSizeProps>()
+
+/** The selected background size, as the Tailwind class to apply. */
+const model = defineModel<EditorBackgroundSizeValue>({ required: true })
+
+const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
+
+// Icon-only and deliberately without tooltips, matching the other editor
+// molecules in the panel (align items, justify content, text align): labelled
+// options do not fit the width the editor sidebar gives this block. The copy
+// travels as `ariaLabel`, so the buttons still have a name for assistive
+// technology.
+const options = computed<NexxtToggleGroupOption[]>(() => [
+  { value: 'bg-cover', icon: 'arrows-maximize', ariaLabel: copy.value.cover },
+  { value: 'bg-contain', icon: 'arrows-minimize', ariaLabel: copy.value.contain },
+  { value: 'bg-auto', icon: 'image', ariaLabel: copy.value.auto },
+])
+
+// ToggleGroup types its model as the open `string` of its options, so writing
+// straight back into the narrower model is a type error. The setter is the one
+// place that narrowing happens, and it is safe: the only values ToggleGroup can
+// emit are the option values built above.
+const selected = computed({
+  get: () => model.value,
+  set: (value: string) => {
+    model.value = value as EditorBackgroundSizeValue
+  },
+})
+</script>
+
+<template>
+  <NexxtEditorSettingsBlock :label="label">
+    <NexxtToggleGroup v-model="selected" :options="options" />
+  </NexxtEditorSettingsBlock>
+</template>

package/src/components/molecules/PlaceholderInput/PlaceholderInput.vue

@@ -0,0 +1,121 @@
+<script lang="ts">
+export interface NexxtPlaceholderGroup {
+  /** Heading of the group, shown when there is more than one group. */
+  label: string
+  /** Placeholder keys, inserted as `{{key}}`. */
+  items: string[]
+}
+
+export interface NexxtPlaceholderInputMessages {
+  /** Accessible name and tooltip of the pen button. */
+  insert?: string
+}
+
+export interface NexxtPlaceholderInputProps {
+  placeholders: NexxtPlaceholderGroup[]
+  label?: string
+  placeholder?: string
+  disabled?: boolean
+  error?: boolean
+  errorMessage?: string
+  required?: boolean
+  messages?: NexxtPlaceholderInputMessages
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, nextTick, useTemplateRef } from 'vue'
+import NexxtFloatingPanel from '../../atoms/FloatingPanel/FloatingPanel.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
+import NexxtTooltip from '../../atoms/Tooltip/Tooltip.vue'
+import NexxtInputField from '../InputField/InputField.vue'
+
+defineOptions({ name: 'NexxtPlaceholderInput' })
+
+const { placeholders, disabled = false, messages } = defineProps<NexxtPlaceholderInputProps>()
+
+/** The text, with placeholders written as `{{key}}`. */
+const model = defineModel<string>({ default: '' })
+
+const insertLabel = computed(() => messages?.insert ?? 'Placeholder invoegen')
+
+// A single group has nothing to be told apart from, so its heading is left out
+const grouped = computed(() => placeholders.length > 1)
+
+const field = useTemplateRef<InstanceType<typeof NexxtInputField>>('field')
+
+// Inserts at the caret, or appends when the field was never focused
+const insert = (key: string, close: () => void) => {
+  const el = field.value?.inputEl ?? null
+  const token = `{{${key}}}`
+  const start = el?.selectionStart ?? model.value.length
+  const end = el?.selectionEnd ?? start
+
+  model.value = model.value.slice(0, start) + token + model.value.slice(end)
+  close()
+
+  nextTick(() => {
+    el?.focus()
+    el?.setSelectionRange(start + token.length, start + token.length)
+  })
+}
+</script>
+
+<template>
+  <NexxtInputField
+    ref="field"
+    v-model="model"
+    :label="label"
+    :placeholder="placeholder"
+    :error="error"
+    :error-message="errorMessage"
+    :required="required"
+    :disabled="disabled"
+  >
+    <template #right>
+      <NexxtFloatingPanel surface placement="bottom-end">
+        <template #trigger="{ open }">
+          <NexxtTooltip>
+            <button
+              type="button"
+              class="flex h-10 w-9 shrink-0 cursor-pointer items-center justify-center text-gray-400 transition-colors hover:text-cornflower-blue-600 focus:outline-none focus-visible:text-cornflower-blue-600 disabled:cursor-default disabled:opacity-50"
+              :disabled="disabled"
+              :aria-label="insertLabel"
+              @click="open"
+            >
+              <NexxtIcon name="pen" aria-hidden="true" />
+            </button>
+            <template #tooltip>{{ insertLabel }}</template>
+          </NexxtTooltip>
+        </template>
+
+        <template #content="{ close }">
+          <div
+            class="flex max-h-96 w-80 flex-col gap-4 overflow-y-auto p-4"
+            role="listbox"
+            :aria-label="insertLabel"
+          >
+            <div v-for="group in placeholders" :key="group.label" class="flex flex-col gap-1">
+              <span
+                v-if="grouped"
+                class="pb-2 extra-small-semibold text-cornflower-blue-500 uppercase"
+              >
+                {{ group.label }}
+              </span>
+              <button
+                v-for="key in group.items"
+                :key="key"
+                type="button"
+                role="option"
+                class="cursor-pointer rounded-lg px-2 py-1 text-left small-normal text-gray-950 transition-colors hover:bg-cornflower-blue-50"
+                @click="insert(key, close)"
+              >
+                {{ key }}
+              </button>
+            </div>
+          </div>
+        </template>
+      </NexxtFloatingPanel>
+    </template>
+  </NexxtInputField>
+</template>

package/src/components.json

@@ -30,6 +30,7 @@
   "NexxtPageMockup": "components/molecules/PageMockup/PageMockup.vue",
   "NexxtPageTypeTile": "components/molecules/PageTypeTile/PageTypeTile.vue",
   "NexxtPagination": "components/molecules/Pagination/Pagination.vue",
+  "NexxtPlaceholderInput": "components/molecules/PlaceholderInput/PlaceholderInput.vue",
   "NexxtPropertyCard": "components/molecules/PropertyCard/PropertyCard.vue",
   "NexxtSelect": "components/molecules/Select/Select.vue",
   "NexxtSidebarMenuItem": "components/molecules/SidebarMenuItem/SidebarMenuItem.vue",
@@ -67,6 +68,7 @@
   "NexxtVideoPlayer": "components/organisms/VideoPlayer/VideoPlayer.vue",
   "NexxtEditorSettingsBlock": "components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue",
   "NexxtEditorAlignItems": "components/editor/molecules/EditorAlignItems/EditorAlignItems.vue",
+  "NexxtEditorBackgroundSize": "components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue",
   "NexxtEditorBorder": "components/editor/molecules/EditorBorder/EditorBorder.vue",
   "NexxtEditorColor": "components/editor/molecules/EditorColor/EditorColor.vue",
   "NexxtEditorFlexDirection": "components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue",

package/src/index.ts

@@ -19,10 +19,19 @@ export type {
 } from './components/molecules/PageCard/PageCard.vue'
 export type { NexxtPageMockupType } from './components/molecules/PageMockup/PageMockup.vue'
 export type { NexxtTreeNode, NexxtTreeProps } from './components/molecules/Tree/Tree.vue'
+export type {
+  NexxtPlaceholderGroup,
+  NexxtPlaceholderInputMessages,
+  NexxtPlaceholderInputProps,
+} from './components/molecules/PlaceholderInput/PlaceholderInput.vue'
 export type {
   EditorAlignItemsMessages,
   EditorAlignItemsValue,
 } from './components/editor/molecules/EditorAlignItems/EditorAlignItems.vue'
+export type {
+  EditorBackgroundSizeMessages,
+  EditorBackgroundSizeValue,
+} from './components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue'
 export type {
   EditorFlexDirectionMessages,
   EditorFlexDirectionValue,
@@ -86,6 +95,7 @@ export { default as NexxtDatePicker } from './components/organisms/DatePicker/Da
 export { default as NexxtDoughnutChart } from './components/molecules/DoughnutChart/DoughnutChart.vue'
 export { default as NexxtDropdownButton } from './components/organisms/DropdownButton/DropdownButton.vue'
 export { default as NexxtEditorAlignItems } from './components/editor/molecules/EditorAlignItems/EditorAlignItems.vue'
+export { default as NexxtEditorBackgroundSize } from './components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue'
 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'
@@ -112,6 +122,7 @@ export { default as NexxtPageContainer } from './components/molecules/PageContai
 export { default as NexxtPageMockup } from './components/molecules/PageMockup/PageMockup.vue'
 export { default as NexxtPageTypeTile } from './components/molecules/PageTypeTile/PageTypeTile.vue'
 export { default as NexxtPagination } from './components/molecules/Pagination/Pagination.vue'
+export { default as NexxtPlaceholderInput } from './components/molecules/PlaceholderInput/PlaceholderInput.vue'
 export { default as NexxtPresenceIndicator } from './components/atoms/PresenceIndicator/PresenceIndicator.vue'
 export { default as NexxtProgressBar } from './components/organisms/ProgressBar/ProgressBar.vue'
 export { default as NexxtPropertyCard } from './components/molecules/PropertyCard/PropertyCard.vue'