@octabits-io/nuxt-ui-kit 0.2.0

package/src/components/PeriodDisplay.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+// Shipped as source: the consumer's Vite compiles this SFC. All imports are
+// explicit — no reliance on the consumer's auto-import configuration.
+// i18n key contract: period.travel.tooltip / period.travel.nights (plural) /
+// period.booking.tooltip / period.booking.days (plural).
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { addDays, differenceInDays } from 'date-fns'
+import UTooltip from '@nuxt/ui/components/Tooltip.vue'
+import UIcon from '@nuxt/ui/components/Icon.vue'
+import { calculateDays, createDateFormatter, type Period } from '@octabits-io/nuxt-ui-kit/dates'
+
+const props = withDefaults(
+  defineProps<{
+    /** ISO date range. `end` is the last booked day (not the checkout date). */
+    period: Period
+    /**
+     * `travel`  → check-in → check-out, counted in nights (guest stay).
+     * `booking` → check-in → last booked day, counted in days (occupancy).
+     */
+    kind: 'travel' | 'booking'
+    /** Render the `· N nights/days` suffix. */
+    showCount?: boolean
+    size?: 'xs' | 'sm' | 'md'
+  }>(),
+  { showCount: true, size: 'sm' },
+)
+
+const { t, locale } = useI18n()
+const { formatDate, formatCheckoutDate } = createDateFormatter({ getLocale: () => locale.value })
+
+const isTravel = computed(() => props.kind === 'travel')
+
+const icon = computed(() => (isTravel.value ? 'i-lucide-luggage' : 'i-lucide-calendar-check'))
+const tooltip = computed(() => t(isTravel.value ? 'period.travel.tooltip' : 'period.booking.tooltip'))
+
+const startText = computed(() => formatDate(props.period.start))
+const endText = computed(() =>
+  isTravel.value
+    ? formatCheckoutDate(props.period.end)
+    : formatDate(props.period.end),
+)
+
+const count = computed(() =>
+  isTravel.value
+    ? differenceInDays(
+        addDays(new Date(props.period.end), 1),
+        new Date(props.period.start),
+      )
+    : calculateDays(props.period),
+)
+const countText = computed(() =>
+  isTravel.value
+    ? t('period.travel.nights', count.value)
+    : t('period.booking.days', count.value),
+)
+
+const iconSize = computed(() =>
+  props.size === 'xs' ? 'size-3.5' : props.size === 'md' ? 'size-5' : 'size-4',
+)
+const textSize = computed(() =>
+  props.size === 'xs' ? 'text-xs' : props.size === 'md' ? 'text-base' : 'text-sm',
+)
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center gap-x-1.5 gap-y-0.5" :class="textSize">
+    <span class="inline-flex items-center gap-1.5 whitespace-nowrap">
+      <UTooltip :text="tooltip">
+        <UIcon :name="icon" class="shrink-0 text-muted" :class="iconSize" :aria-label="tooltip" />
+      </UTooltip>
+      {{ startText }} – {{ endText }}
+    </span>
+    <span v-if="showCount" class="whitespace-nowrap text-muted">· {{ countText }}</span>
+  </div>
+</template>

package/src/components/SubSidebar.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+// Shipped as source: the consumer's Vite compiles this SFC. All imports are
+// explicit — no reliance on the consumer's auto-import configuration.
+import { ref, computed, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import USlideover from '@nuxt/ui/components/Slideover.vue'
+import UButton from '@nuxt/ui/components/Button.vue'
+import UIcon from '@nuxt/ui/components/Icon.vue'
+
+const props = withDefaults(defineProps<{
+  title: string
+  toggleLabel?: string
+  width?: string
+  loading?: boolean
+  headerless?: boolean
+  /**
+   * Query param that carries the current selection (sidebar-view convention,
+   * e.g. `?s=owner:42`) — the mobile slideover auto-closes when it changes.
+   */
+  selectionQueryKey?: string
+}>(), {
+  width: 'w-[240px]',
+  selectionQueryKey: 's',
+})
+
+const open = ref(false)
+const route = useRoute()
+
+const buttonLabel = computed(() => props.toggleLabel ?? props.title)
+
+watch(
+  () => [route.path, route.query[props.selectionQueryKey]],
+  () => { open.value = false },
+)
+</script>
+
+<template>
+  <div class="flex h-full w-full flex-col overflow-hidden">
+    <!-- Page header zone: rendered once (unlike #sidebar), full width above both columns -->
+    <div v-if="$slots.header" class="shrink-0">
+      <slot name="header" />
+    </div>
+
+    <div class="flex min-h-0 w-full flex-1 overflow-hidden">
+      <USlideover v-model:open="open" side="left" :title="title">
+        <template #body>
+          <div class="flex h-full flex-col">
+            <div v-if="loading" class="flex flex-1 items-center justify-center">
+              <UIcon name="i-lucide-loader-2" class="size-6 animate-spin text-primary" />
+            </div>
+            <slot v-else name="sidebar" />
+          </div>
+        </template>
+      </USlideover>
+
+      <aside
+        :class="['hidden shrink-0 flex-col overflow-hidden border-r border-default lg:flex', width]"
+      >
+        <div v-if="!headerless" class="border-b border-default px-4 py-3">
+          <h2 class="font-display text-lg font-semibold tracking-tight">{{ title }}</h2>
+        </div>
+        <div v-if="loading" class="flex flex-1 items-center justify-center">
+          <UIcon name="i-lucide-loader-2" class="size-6 animate-spin text-primary" />
+        </div>
+        <slot v-else name="sidebar" />
+      </aside>
+
+      <div class="flex min-w-0 flex-1 flex-col overflow-hidden">
+        <div class="flex shrink-0 items-center gap-2 border-b border-default px-3 py-2 lg:hidden">
+          <UButton
+            :label="buttonLabel"
+            icon="i-lucide-panel-left-open"
+            color="neutral"
+            variant="outline"
+            size="sm"
+            @click="open = true"
+          />
+        </div>
+        <div class="min-w-0 flex-1 overflow-y-auto">
+          <slot />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>