@nexxtmove/ui 1.10.0 → 1.11.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",

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.11.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.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",

package/src/index.ts

@@ -38,6 +38,7 @@ 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 NexxtPagination } from './components/molecules/Pagination/Pagination.vue'