@nexxtmove/ui 1.11.0 → 1.12.0

package/dist/nuxt.js

@@ -28,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/package.json

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

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

@@ -25,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

@@ -41,6 +41,7 @@ export { default as NexxtInputSelect } from './components/molecules/InputSelect/
 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 */
+}