@shwfed/nuxt 0.11.53 → 0.11.55

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@shwfed/nuxt",
   "configKey": "shwfed",
-  "version": "0.11.53",
+  "version": "0.11.55",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -101,7 +101,8 @@ const module$1 = defineNuxtModule({
       addComponentsDir({
         path: resolver.resolve(`runtime/components/ui/${dir}`),
         prefix: "Ui",
-        pathPrefix: false
+        pathPrefix: false,
+        extensions: ["vue"]
       });
     }
     addComponent({

package/dist/runtime/components/modal.d.vue.ts

@@ -4,6 +4,7 @@ type __VLS_Props = {
     breakpoint?: string;
     showCloseButton?: boolean;
     dismissible?: boolean;
+    width?: string;
 };
 declare function close(): void;
 declare var __VLS_14: {

package/dist/runtime/components/modal.vue

@@ -29,7 +29,8 @@ const props = defineProps({
   defaultOpen: { type: Boolean, required: false, default: false },
   breakpoint: { type: String, required: false, default: "(min-width: 640px)" },
   showCloseButton: { type: Boolean, required: false, default: true },
-  dismissible: { type: Boolean, required: false, default: true }
+  dismissible: { type: Boolean, required: false, default: true },
+  width: { type: String, required: false }
 });
 const emit = defineEmits(["update:open", "after-close"]);
 const attrs = useAttrs();
@@ -98,6 +99,7 @@ function close() {
     <component
       :is="modalComponents.Content"
       v-bind="attrs"
+      :style="isDesktop && props.width ? { maxWidth: props.width } : void 0"
       :show-close-button="props.showCloseButton"
       @after-close="emit('after-close')"
     >

package/dist/runtime/components/modal.vue.d.ts

@@ -4,6 +4,7 @@ type __VLS_Props = {
     breakpoint?: string;
     showCloseButton?: boolean;
     dismissible?: boolean;
+    width?: string;
 };
 declare function close(): void;
 declare var __VLS_14: {

package/dist/runtime/components/ui/app/OverlayHost.vue

@@ -53,7 +53,8 @@ const renderedSessions = computed(() => {
         description: session.shell.description,
         showCloseButton: session.shell.showCloseButton,
         breakpoint: session.shell.breakpoint,
-        dismissible: session.shell.dismissible
+        dismissible: session.shell.dismissible,
+        width: session.shell.width
       },
       descriptionSrOnly: session.shell.descriptionSrOnly,
       props: session.props,
@@ -75,6 +76,7 @@ const renderedSessions = computed(() => {
       :breakpoint="session.shell.breakpoint"
       :show-close-button="session.shell.showCloseButton"
       :dismissible="session.shell.dismissible"
+      :width="session.shell.width"
       @update:open="handleOpenUpdate(session.sessionId, $event)"
       @after-close="handleAfterClose(session.sessionId)"
     >

package/dist/runtime/components/ui/date-range-picker/DateRangePicker.d.vue.ts

@@ -0,0 +1,22 @@
+import type { RangeCalendarRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = RangeCalendarRootProps & {
+    class?: HTMLAttributes['class'];
+    displayPlaceholder?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (date: import("reka-ui").DateRange) => any;
+    "update:placeholder": (date: import("reka-ui").DateValue) => any;
+    "update:validModelValue": (date: import("reka-ui").DateRange) => any;
+    "update:startValue": (date: import("reka-ui").DateValue | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((date: import("reka-ui").DateRange) => any) | undefined;
+    "onUpdate:placeholder"?: ((date: import("reka-ui").DateValue) => any) | undefined;
+    "onUpdate:validModelValue"?: ((date: import("reka-ui").DateRange) => any) | undefined;
+    "onUpdate:startValue"?: ((date: import("reka-ui").DateValue | undefined) => any) | undefined;
+}>, {
+    numberOfMonths: number;
+    displayPlaceholder: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/date-range-picker/DateRangePicker.vue

@@ -0,0 +1,91 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { useDateFormatter, useForwardPropsEmits } from "reka-ui";
+import { toDate } from "reka-ui/date";
+import { computed } from "vue";
+import { Icon } from "@iconify/vue";
+import { cn } from "../../../utils/cn";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+import { RangeCalendar } from "../range-calendar";
+import { Button } from "../button";
+const props = defineProps({
+  defaultPlaceholder: { type: null, required: false },
+  defaultValue: { type: Object, required: false },
+  modelValue: { type: [Object, null], required: false },
+  placeholder: { type: null, required: false },
+  allowNonContiguousRanges: { type: Boolean, required: false },
+  pagedNavigation: { type: Boolean, required: false },
+  preventDeselect: { type: Boolean, required: false },
+  maximumDays: { type: Number, required: false },
+  weekStartsOn: { type: Number, required: false },
+  weekdayFormat: { type: String, required: false },
+  calendarLabel: { type: String, required: false },
+  fixedWeeks: { type: Boolean, required: false },
+  maxValue: { type: null, required: false },
+  minValue: { type: null, required: false },
+  locale: { type: String, required: false },
+  numberOfMonths: { type: Number, required: false, default: 2 },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  initialFocus: { type: Boolean, required: false },
+  isDateDisabled: { type: Function, required: false },
+  isDateUnavailable: { type: Function, required: false },
+  isDateHighlightable: { type: Function, required: false },
+  dir: { type: String, required: false },
+  nextPage: { type: Function, required: false },
+  prevPage: { type: Function, required: false },
+  disableDaysOutsideCurrentView: { type: Boolean, required: false },
+  fixedDate: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+  displayPlaceholder: { type: String, required: false, default: "Pick a date range" }
+});
+const emits = defineEmits(["update:modelValue", "update:validModelValue", "update:placeholder", "update:startValue"]);
+const delegatedProps = reactiveOmit(props, "class", "displayPlaceholder");
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const formatter = useDateFormatter(props.locale ?? "en");
+const displayValue = computed(() => {
+  if (!props.modelValue?.start) return void 0;
+  const start = formatter.custom(toDate(props.modelValue.start), {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  });
+  if (!props.modelValue.end) return start;
+  const end = formatter.custom(toDate(props.modelValue.end), {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  });
+  return `${start} \u2013 ${end}`;
+});
+</script>
+
+<template>
+  <Popover>
+    <PopoverTrigger as-child>
+      <Button
+        data-slot="date-range-picker"
+        variant="default"
+        :class="cn(
+  'w-auto justify-start text-left font-normal',
+  !displayValue && 'text-zinc-400',
+  props.class
+)"
+      >
+        <Icon
+          icon="fluent:calendar-20-regular"
+          class="size-4"
+        />
+        <span>{{ displayValue ?? displayPlaceholder }}</span>
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent
+      class="w-auto p-0"
+      align="start"
+    >
+      <RangeCalendar v-bind="forwarded" />
+    </PopoverContent>
+  </Popover>
+</template>

package/dist/runtime/components/ui/date-range-picker/DateRangePicker.vue.d.ts

@@ -0,0 +1,22 @@
+import type { RangeCalendarRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = RangeCalendarRootProps & {
+    class?: HTMLAttributes['class'];
+    displayPlaceholder?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (date: import("reka-ui").DateRange) => any;
+    "update:placeholder": (date: import("reka-ui").DateValue) => any;
+    "update:validModelValue": (date: import("reka-ui").DateRange) => any;
+    "update:startValue": (date: import("reka-ui").DateValue | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((date: import("reka-ui").DateRange) => any) | undefined;
+    "onUpdate:placeholder"?: ((date: import("reka-ui").DateValue) => any) | undefined;
+    "onUpdate:validModelValue"?: ((date: import("reka-ui").DateRange) => any) | undefined;
+    "onUpdate:startValue"?: ((date: import("reka-ui").DateValue | undefined) => any) | undefined;
+}>, {
+    numberOfMonths: number;
+    displayPlaceholder: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/date-range-picker/DateTimeRangePicker.d.vue.ts

@@ -0,0 +1,21 @@
+import type { DateRangePickerRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = DateRangePickerRootProps & {
+    class?: HTMLAttributes['class'];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (date: import("reka-ui").DateRange) => any;
+    "update:open": (value: boolean) => any;
+    "update:placeholder": (date: import("reka-ui").DateValue) => any;
+    "update:startValue": (date: import("reka-ui").DateValue | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((date: import("reka-ui").DateRange) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:placeholder"?: ((date: import("reka-ui").DateValue) => any) | undefined;
+    "onUpdate:startValue"?: ((date: import("reka-ui").DateValue | undefined) => any) | undefined;
+}>, {
+    numberOfMonths: number;
+    granularity: "day" | "hour" | "minute" | "second";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/date-range-picker/DateTimeRangePicker.vue

@@ -0,0 +1,225 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { Icon } from "@iconify/vue";
+import {
+  DateRangePickerCalendar,
+  DateRangePickerCell,
+  DateRangePickerCellTrigger,
+  DateRangePickerContent,
+  DateRangePickerField,
+  DateRangePickerGrid,
+  DateRangePickerGridBody,
+  DateRangePickerGridHead,
+  DateRangePickerGridRow,
+  DateRangePickerHeadCell,
+  DateRangePickerHeader,
+  DateRangePickerHeading,
+  DateRangePickerInput,
+  DateRangePickerNext,
+  DateRangePickerPrev,
+  DateRangePickerRoot,
+  DateRangePickerTrigger,
+  useForwardPropsEmits
+} from "reka-ui";
+import { cn } from "../../../utils/cn";
+import { buttonVariants } from "../button";
+const props = defineProps({
+  defaultValue: { type: Object, required: false },
+  defaultPlaceholder: { type: null, required: false },
+  placeholder: { type: null, required: false },
+  modelValue: { type: [Object, null], required: false },
+  hourCycle: { type: null, required: false },
+  step: { type: Object, required: false },
+  granularity: { type: String, required: false, default: "minute" },
+  hideTimeZone: { type: Boolean, required: false },
+  maxValue: { type: null, required: false },
+  minValue: { type: null, required: false },
+  locale: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  isDateUnavailable: { type: Function, required: false },
+  id: { type: String, required: false },
+  dir: { type: String, required: false },
+  name: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  open: { type: Boolean, required: false },
+  modal: { type: Boolean, required: false },
+  isDateDisabled: { type: Function, required: false },
+  pagedNavigation: { type: Boolean, required: false },
+  weekStartsOn: { type: Number, required: false },
+  weekdayFormat: { type: String, required: false },
+  fixedWeeks: { type: Boolean, required: false },
+  numberOfMonths: { type: Number, required: false, default: 2 },
+  preventDeselect: { type: Boolean, required: false },
+  isDateHighlightable: { type: Function, required: false },
+  allowNonContiguousRanges: { type: Boolean, required: false },
+  fixedDate: { type: String, required: false },
+  maximumDays: { type: Number, required: false },
+  closeOnSelect: { type: Boolean, required: false },
+  class: { type: null, required: false }
+});
+const emits = defineEmits(["update:open", "update:modelValue", "update:placeholder", "update:startValue"]);
+const delegatedProps = reactiveOmit(props, "class");
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DateRangePickerRoot
+    v-bind="forwarded"
+  >
+    <DateRangePickerField v-slot="{ segments }">
+      <div
+        data-slot="date-time-range-picker"
+        :class="cn(
+  'flex items-center gap-0.5 border border-zinc-200 rounded bg-transparent h-9 px-3 py-1 text-sm text-zinc-700 transition-colors ease-out duration-180 outline-none hover:border-zinc-300 focus-within:border-(--primary) disabled:pointer-events-none disabled:opacity-50',
+  props.class
+)"
+      >
+        <template
+          v-for="segment in segments.start"
+          :key="segment.part + '-start'"
+        >
+          <DateRangePickerInput
+            v-if="segment.part === 'literal'"
+            type="start"
+            :part="segment.part"
+            class="text-zinc-400"
+          >
+            {{ segment.value }}
+          </DateRangePickerInput>
+          <DateRangePickerInput
+            v-else
+            type="start"
+            :part="segment.part"
+            class="rounded-sm px-0.5 text-zinc-700 outline-none focus:bg-[color-mix(in_srgb,var(--primary)_20%,white)] focus:text-(--primary)"
+          >
+            {{ segment.value }}
+          </DateRangePickerInput>
+        </template>
+
+        <span class="mx-1 text-zinc-400">–</span>
+
+        <template
+          v-for="segment in segments.end"
+          :key="segment.part + '-end'"
+        >
+          <DateRangePickerInput
+            v-if="segment.part === 'literal'"
+            type="end"
+            :part="segment.part"
+            class="text-zinc-400"
+          >
+            {{ segment.value }}
+          </DateRangePickerInput>
+          <DateRangePickerInput
+            v-else
+            type="end"
+            :part="segment.part"
+            class="rounded-sm px-0.5 text-zinc-700 outline-none focus:bg-[color-mix(in_srgb,var(--primary)_20%,white)] focus:text-(--primary)"
+          >
+            {{ segment.value }}
+          </DateRangePickerInput>
+        </template>
+
+        <DateRangePickerTrigger
+          :class="cn(
+  buttonVariants({ variant: 'ghost', size: 'xs' }),
+  'ml-auto size-6 p-0'
+)"
+        >
+          <Icon
+            icon="fluent:calendar-20-regular"
+            class="size-4"
+          />
+        </DateRangePickerTrigger>
+      </div>
+    </DateRangePickerField>
+
+    <DateRangePickerContent
+      :side-offset="4"
+      align="start"
+      :class="cn(
+  'bg-white text-zinc-700 z-50 rounded border border-zinc-200 shadow-md outline-hidden',
+  'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2'
+)"
+    >
+      <DateRangePickerCalendar
+        v-slot="{ grid, weekDays }"
+        class="p-3"
+      >
+        <DateRangePickerHeader class="flex justify-center pt-1 relative items-center w-full">
+          <DateRangePickerHeading class="text-sm font-medium" />
+
+          <div class="flex items-center gap-1">
+            <DateRangePickerPrev
+              :class="cn(
+  buttonVariants({ variant: 'ghost', size: 'sm' }),
+  'absolute left-1 size-7 bg-transparent p-0 opacity-50 hover:opacity-100'
+)"
+            >
+              <Icon icon="fluent:chevron-left-20-regular" />
+            </DateRangePickerPrev>
+            <DateRangePickerNext
+              :class="cn(
+  buttonVariants({ variant: 'ghost', size: 'sm' }),
+  'absolute right-1 size-7 bg-transparent p-0 opacity-50 hover:opacity-100'
+)"
+            >
+              <Icon icon="fluent:chevron-right-20-regular" />
+            </DateRangePickerNext>
+          </div>
+        </DateRangePickerHeader>
+
+        <div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+          <DateRangePickerGrid
+            v-for="month in grid"
+            :key="month.value.toString()"
+            class="w-full border-collapse space-x-1"
+          >
+            <DateRangePickerGridHead>
+              <DateRangePickerGridRow class="flex w-full">
+                <DateRangePickerHeadCell
+                  v-for="day in weekDays"
+                  :key="day"
+                  class="w-8 rounded-md text-[0.8rem] font-normal text-zinc-300"
+                >
+                  {{ day }}
+                </DateRangePickerHeadCell>
+              </DateRangePickerGridRow>
+            </DateRangePickerGridHead>
+            <DateRangePickerGridBody>
+              <DateRangePickerGridRow
+                v-for="(weekDates, index) in month.rows"
+                :key="`weekDate-${index}`"
+                class="mt-2 flex w-full"
+              >
+                <DateRangePickerCell
+                  v-for="weekDate in weekDates"
+                  :key="weekDate.toString()"
+                  :date="weekDate"
+                  class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-zinc-100 first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md"
+                >
+                  <DateRangePickerCellTrigger
+                    :day="weekDate"
+                    :month="month.value"
+                    :class="cn(
+  buttonVariants({ variant: 'ghost' }),
+  'h-8 w-8 p-0 font-normal data-selected:opacity-100',
+  '[&[data-today]:not([data-selected])]:bg-white [&[data-today]:not([data-selected])]:text-zinc-700',
+  'data-selection-start:bg-[color-mix(in_srgb,var(--primary)_20%,white)] data-selection-start:text-white data-selection-start:hover:bg-[color-mix(in_srgb,var(--primary)_40%,white)] data-selection-start:hover:text-white data-selection-start:focus:bg-[color-mix(in_srgb,var(--primary)_40%,white)] data-selection-start:focus:text-white',
+  'data-selection-end:bg-[color-mix(in_srgb,var(--primary)_20%,white)] data-selection-end:text-white data-selection-end:hover:bg-[color-mix(in_srgb,var(--primary)_40%,white)] data-selection-end:hover:text-white data-selection-end:focus:bg-[color-mix(in_srgb,var(--primary)_40%,white)] data-selection-end:focus:text-white',
+  'data-outside-view:text-zinc-300',
+  'data-disabled:text-zinc-300 data-disabled:opacity-50',
+  'data-unavailable:text-zinc-300 data-unavailable:line-through'
+)"
+                  />
+                </DateRangePickerCell>
+              </DateRangePickerGridRow>
+            </DateRangePickerGridBody>
+          </DateRangePickerGrid>
+        </div>
+      </DateRangePickerCalendar>
+    </DateRangePickerContent>
+  </DateRangePickerRoot>
+</template>

package/dist/runtime/components/ui/date-range-picker/DateTimeRangePicker.vue.d.ts

@@ -0,0 +1,21 @@
+import type { DateRangePickerRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = DateRangePickerRootProps & {
+    class?: HTMLAttributes['class'];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (date: import("reka-ui").DateRange) => any;
+    "update:open": (value: boolean) => any;
+    "update:placeholder": (date: import("reka-ui").DateValue) => any;
+    "update:startValue": (date: import("reka-ui").DateValue | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((date: import("reka-ui").DateRange) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:placeholder"?: ((date: import("reka-ui").DateValue) => any) | undefined;
+    "onUpdate:startValue"?: ((date: import("reka-ui").DateValue | undefined) => any) | undefined;
+}>, {
+    numberOfMonths: number;
+    granularity: "day" | "hour" | "minute" | "second";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/date-range-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DateRangePicker } from './DateRangePicker.vue.js';
+export { default as DateTimeRangePicker } from './DateTimeRangePicker.vue.js';

package/dist/runtime/components/ui/date-range-picker/index.js

@@ -0,0 +1,2 @@
+export { default as DateRangePicker } from "./DateRangePicker.vue";
+export { default as DateTimeRangePicker } from "./DateTimeRangePicker.vue";

package/dist/runtime/composables/useOverlay.d.ts

@@ -7,6 +7,7 @@ export type OverlayShellProps = Readonly<{
     showCloseButton?: boolean;
     breakpoint?: string;
     dismissible?: boolean;
+    width?: string;
 }>;
 export type OverlayBodyProps = Readonly<Record<string, unknown>>;
 export type OverlaySessionInput = Readonly<{

package/dist/runtime/composables/useOverlay.js

@@ -176,7 +176,8 @@ function createOverlayRuntime() {
             descriptionSrOnly,
             showCloseButton: options?.shell?.showCloseButton ?? definitionShell?.showCloseButton,
             breakpoint: options?.shell?.breakpoint ?? definitionShell?.breakpoint,
-            dismissible: options?.shell?.dismissible ?? definitionShell?.dismissible
+            dismissible: options?.shell?.dismissible ?? definitionShell?.dismissible,
+            width: options?.shell?.width ?? definitionShell?.width
           },
           props: {
             ...options?.props

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shwfed/nuxt",
-  "version": "0.11.53",
+  "version": "0.11.55",
   "description": "",
   "license": "MIT",
   "type": "module",