@nexxtmove/ui 1.10.0 → 1.12.0

package/dist/nuxt.js

@@ -11,6 +11,7 @@ var s = {
 	NexxtEnergyLabel: "components/atoms/EnergyLabel/EnergyLabel.vue",
 	NexxtFloatingPanel: "components/atoms/FloatingPanel/FloatingPanel.vue",
 	NexxtIcon: "components/atoms/Icon/Icon.vue",
+	NexxtLoader: "components/atoms/Loader/Loader.vue",
 	NexxtPresenceIndicator: "components/atoms/PresenceIndicator/PresenceIndicator.vue",
 	NexxtPropertyListing: "components/atoms/PropertyListing/PropertyListing.vue",
 	NexxtSelectableOption: "components/atoms/SelectableOption/SelectableOption.vue",
@@ -27,6 +28,7 @@ var s = {
 	NexxtInputField: "components/molecules/InputField/InputField.vue",
 	NexxtInputSelect: "components/molecules/InputSelect/InputSelect.vue",
 	NexxtModalFooter: "components/molecules/ModalFooter/ModalFooter.vue",
+	NexxtPageContainer: "components/molecules/PageContainer/PageContainer.vue",
 	NexxtPagination: "components/molecules/Pagination/Pagination.vue",
 	NexxtPropertyCard: "components/molecules/PropertyCard/PropertyCard.vue",
 	NexxtSelect: "components/molecules/Select/Select.vue",

package/dist/ui.css

@@ -1,2 +1,2 @@
-.timer-circle[data-v-d13bb383]{stroke-dashoffset:0;animation:linear forwards toast-timer-d13bb383}@keyframes toast-timer-d13bb383{to{stroke-dashoffset:var(--b622135e)}}
+rect[data-v-0a5d9b21]{animation-duration:4s;animation-timing-function:cubic-bezier(.77,0,.175,1);animation-iteration-count:infinite}rect[data-v-0a5d9b21]:first-child{animation-name:load-1-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(2){animation-name:load-2-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(3){animation-name:load-3-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(4){animation-name:load-4-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(5){animation-name:load-5-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(6){animation-name:load-6-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(7){animation-name:load-7-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(8){animation-name:load-8-0a5d9b21}@media (prefers-reduced-motion:reduce){rect[data-v-0a5d9b21]{animation:none}svg[data-v-0a5d9b21]{animation:2.5s ease-in-out infinite pulse-0a5d9b21}}@keyframes pulse-0a5d9b21{0%,to{opacity:1}50%{opacity:.65}}@keyframes load-1-0a5d9b21{0%,80%{transform:translate(0)}5%,20%,60%,75%{transform:translate(-25px,25px)}30%,50%{transform:translate(-75px,75px)}}@keyframes load-2-0a5d9b21{5%,75%{transform:translate(0%)}10%,20%,60%,70%{transform:translate(50px)}30%,50%{transform:translateY(50px)}}@keyframes load-3-0a5d9b21{10%,70%{transform:translate(0%)}15%,65%{transform:translateY(-50px)}20%,60%{fill:var(--color-sapphire-500);transform:translateY(-50px)}30%,50%{fill:var(--color-purple-500);transform:translate(-50px)}}@keyframes load-4-0a5d9b21{20%,60%{transform:translate(0%)}30%,50%{transform:translate(50px,-50px)}}@keyframes load-5-0a5d9b21{0%,80%{transform:translate(0%)}5%,20%,60%,75%{transform:translateY(50px)}30%,50%{transform:translate(50px)}}@keyframes load-6-0a5d9b21{5%,75%{transform:translate(0%)}10%,20%,60%,70%{transform:translate(-50px)}30%,50%{transform:translateY(-50px)}}@keyframes load-7-0a5d9b21{10%,70%{transform:translate(0%)}15%,20%,60%,65%{transform:translate(50px)}30%,50%{transform:translate(100px,-50px)}}@keyframes load-8-0a5d9b21{15%,65%{transform:translate(0%)}20%,60%{transform:translateY(-50px)}30%,50%{transform:translate(50px,-100px)}}.timer-circle[data-v-d13bb383]{stroke-dashoffset:0;animation:linear forwards toast-timer-d13bb383}@keyframes toast-timer-d13bb383{to{stroke-dashoffset:var(--b622135e)}}
 /*$vite$:1*/

package/package.json

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

package/src/components/atoms/Loader/Loader.vue

@@ -0,0 +1,241 @@
+<script setup lang="ts">
+interface NexxtLoaderProps {
+  /** Read out by screen readers while the loader is visible. */
+  label?: string
+}
+
+defineOptions({
+  name: 'NexxtLoader',
+})
+
+const { label = 'Bezig met laden' } = defineProps<NexxtLoaderProps>()
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="-20 0 283 142"
+    role="status"
+    :aria-label="label"
+    width="96"
+    height="96"
+  >
+    <g transform="rotate(45)">
+      <rect class="fill-orange-500" x="175" y="-150" width="50" height="50" />
+      <rect
+        class="fill-cornflower-blue-500 stroke-cornflower-blue-500 stroke-1"
+        x="100"
+        y="-125"
+        width="50"
+        height="50"
+      />
+      <rect
+        class="fill-sapphire-500 stroke-sapphire-500 stroke-1"
+        x="150"
+        y="-75"
+        width="50"
+        height="50"
+      />
+      <rect class="fill-purple-500" x="50" y="-25" width="50" height="50" />
+
+      <rect class="fill-orange-500" x="50" y="-75" width="50" height="50" />
+      <rect class="fill-orange-500" x="100" y="-25" width="50" height="50" />
+
+      <rect class="fill-rose-500" x="0" y="-25" width="50" height="50" />
+      <rect class="fill-purple-500" x="50" y="25" width="50" height="50" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+rect {
+  animation-iteration-count: infinite;
+  animation-duration: 4s;
+  animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
+
+  &:nth-child(1) {
+    animation-name: load-1;
+  }
+  &:nth-child(2) {
+    animation-name: load-2;
+  }
+  &:nth-child(3) {
+    animation-name: load-3;
+  }
+  &:nth-child(4) {
+    animation-name: load-4;
+  }
+  &:nth-child(5) {
+    animation-name: load-5;
+  }
+  &:nth-child(6) {
+    animation-name: load-6;
+  }
+  &:nth-child(7) {
+    animation-name: load-7;
+  }
+  &:nth-child(8) {
+    animation-name: load-8;
+  }
+}
+
+/* Reduced motion is gentler feedback, not none: the blocks hold their resting
+   layout (still the logo) while a slow opacity pulse keeps signalling that
+   something is happening, without any movement. */
+@media (prefers-reduced-motion: reduce) {
+  rect {
+    animation: none;
+  }
+
+  svg {
+    animation: pulse 2.5s ease-in-out infinite;
+  }
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.65;
+  }
+}
+
+@keyframes load-1 {
+  0%,
+  80% {
+    transform: translate(0, 0);
+  }
+  5%,
+  20%,
+  60%,
+  75% {
+    transform: translate(-25px, 25px);
+  }
+  30%,
+  50% {
+    transform: translate(-75px, 75px);
+  }
+}
+
+@keyframes load-2 {
+  5%,
+  75% {
+    transform: translate(0%, 0%);
+  }
+  10%,
+  20%,
+  60%,
+  70% {
+    transform: translate(50px, 0px);
+  }
+  30%,
+  50% {
+    transform: translate(0, 50px);
+  }
+}
+
+/* All eight blocks converge on one cell at 30-50%, and rect 8 paints last, so
+   the merged block reads as rect 8's purple. This block makes the horizontal
+   slide in and out of that stack; its fill morphs to purple on the way in and
+   back to its own sapphire on the way out, so it appears to take on and shed
+   the stack's color. */
+@keyframes load-3 {
+  10%,
+  70% {
+    transform: translate(0%, 0%);
+  }
+  15%,
+  65% {
+    transform: translate(0, -50px);
+  }
+  20%,
+  60% {
+    fill: var(--color-sapphire-500);
+    transform: translate(0, -50px);
+  }
+  30%,
+  50% {
+    fill: var(--color-purple-500);
+    transform: translate(-50px, 0);
+  }
+}
+
+@keyframes load-4 {
+  20%,
+  60% {
+    transform: translate(0%, 0%);
+  }
+  30%,
+  50% {
+    transform: translate(50px, -50px);
+  }
+}
+
+@keyframes load-5 {
+  0%,
+  80% {
+    transform: translate(0%, 0%);
+  }
+  5%,
+  20%,
+  60%,
+  75% {
+    transform: translate(0, 50px);
+  }
+  30%,
+  50% {
+    transform: translate(50px, -0);
+  }
+}
+
+@keyframes load-6 {
+  5%,
+  75% {
+    transform: translate(0%, 0%);
+  }
+  10%,
+  20%,
+  60%,
+  70% {
+    transform: translate(-50px, 0);
+  }
+  30%,
+  50% {
+    transform: translate(0, -50px);
+  }
+}
+
+@keyframes load-7 {
+  10%,
+  70% {
+    transform: translate(0%, 0%);
+  }
+  15%,
+  20%,
+  60%,
+  65% {
+    transform: translate(50px, 0);
+  }
+  30%,
+  50% {
+    transform: translate(100px, -50px);
+  }
+}
+
+@keyframes load-8 {
+  15%,
+  65% {
+    transform: translate(0%, 0%);
+  }
+  20%,
+  60% {
+    transform: translate(0, -50px);
+  }
+  30%,
+  50% {
+    transform: translate(50px, -100px);
+  }
+}
+</style>

package/src/components/molecules/PageContainer/PageContainer.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+type ContentWidth = keyof typeof CONTENT_WIDTHS
+
+interface NexxtPageContainerProps {
+  /** Maximum width of the content area; the content is centered within it. */
+  maxWidth?: ContentWidth
+}
+
+defineOptions({
+  name: 'NexxtPageContainer',
+})
+
+const { maxWidth = '7xl' } = defineProps<NexxtPageContainerProps>()
+
+// Full class names so Tailwind and the no-unknown-classes lint rule see them.
+const CONTENT_WIDTHS = {
+  xs: 'max-w-xs',
+  sm: 'max-w-sm',
+  md: 'max-w-md',
+  lg: 'max-w-lg',
+  xl: 'max-w-xl',
+  '2xl': 'max-w-2xl',
+  '3xl': 'max-w-3xl',
+  '4xl': 'max-w-4xl',
+  '5xl': 'max-w-5xl',
+  '6xl': 'max-w-6xl',
+  '7xl': 'max-w-7xl',
+  '8xl': 'max-w-8xl',
+  full: 'max-w-full-width',
+} as const
+</script>
+
+<template>
+  <div class="flex h-full min-h-0 flex-1">
+    <div class="h-full min-w-0 grow overflow-y-auto p-8">
+      <div :class="['mx-auto', CONTENT_WIDTHS[maxWidth]]">
+        <slot />
+      </div>
+    </div>
+
+    <Transition
+      enter-active-class="transition-[max-width,opacity] duration-300 ease-[cubic-bezier(0.77,0,0.175,1)] motion-reduce:transition-none"
+      enter-from-class="max-w-0 opacity-0"
+      enter-to-class="max-w-105 opacity-100"
+      leave-active-class="transition-[max-width,opacity] duration-300 ease-[cubic-bezier(0.77,0,0.175,1)] motion-reduce:transition-none"
+      leave-from-class="max-w-105 opacity-100"
+      leave-to-class="max-w-0 opacity-0"
+    >
+      <aside
+        v-if="$slots.sidebar"
+        class="h-full w-105 shrink-0 overflow-hidden border-l border-gray-100 bg-white"
+      >
+        <!-- Fixed width on purpose: the transition shrinks the aside's
+             max-width, and a w-full wrapper would reflow (rewrap) the content
+             every frame. At w-105 the content keeps its layout and the
+             aside's overflow-hidden clips it instead. -->
+        <div class="h-full w-105 overflow-y-auto p-8">
+          <slot name="sidebar" />
+        </div>
+      </aside>
+    </Transition>
+  </div>
+</template>

package/src/components.json

@@ -8,6 +8,7 @@
   "NexxtEnergyLabel": "components/atoms/EnergyLabel/EnergyLabel.vue",
   "NexxtFloatingPanel": "components/atoms/FloatingPanel/FloatingPanel.vue",
   "NexxtIcon": "components/atoms/Icon/Icon.vue",
+  "NexxtLoader": "components/atoms/Loader/Loader.vue",
   "NexxtPresenceIndicator": "components/atoms/PresenceIndicator/PresenceIndicator.vue",
   "NexxtPropertyListing": "components/atoms/PropertyListing/PropertyListing.vue",
   "NexxtSelectableOption": "components/atoms/SelectableOption/SelectableOption.vue",
@@ -24,6 +25,7 @@
   "NexxtInputField": "components/molecules/InputField/InputField.vue",
   "NexxtInputSelect": "components/molecules/InputSelect/InputSelect.vue",
   "NexxtModalFooter": "components/molecules/ModalFooter/ModalFooter.vue",
+  "NexxtPageContainer": "components/molecules/PageContainer/PageContainer.vue",
   "NexxtPagination": "components/molecules/Pagination/Pagination.vue",
   "NexxtPropertyCard": "components/molecules/PropertyCard/PropertyCard.vue",
   "NexxtSelect": "components/molecules/Select/Select.vue",

package/src/index.ts

@@ -38,8 +38,10 @@ export { default as NexxtIcon } from './components/atoms/Icon/Icon.vue'
 export { default as NexxtInfoBlock } from './components/molecules/InfoBlock/InfoBlock.vue'
 export { default as NexxtInputField } from './components/molecules/InputField/InputField.vue'
 export { default as NexxtInputSelect } from './components/molecules/InputSelect/InputSelect.vue'
+export { default as NexxtLoader } from './components/atoms/Loader/Loader.vue'
 export { default as NexxtModal } from './components/organisms/Modal/Modal.vue'
 export { default as NexxtModalFooter } from './components/molecules/ModalFooter/ModalFooter.vue'
+export { default as NexxtPageContainer } from './components/molecules/PageContainer/PageContainer.vue'
 export { default as NexxtPagination } from './components/molecules/Pagination/Pagination.vue'
 export { default as NexxtPresenceIndicator } from './components/atoms/PresenceIndicator/PresenceIndicator.vue'
 export { default as NexxtProgressBar } from './components/organisms/ProgressBar/ProgressBar.vue'

package/tailwind/nexxtmove.tailwind.custom.css

@@ -37,3 +37,11 @@
     display: none;
   }
 }
+
+/* Layout tokens for NexxtPageContainer. Moved over from the app theme
+   (app/assets/css/main.css); the app drops its copies once it adopts the
+   version that ships these. */
+@theme {
+  --spacing-8xl: 100rem;
+  --spacing-full-width: 116rem; /* 1920px (full hd) minus the sidebar: max app width */
+}