@shwfed/config 3.0.18 → 3.0.19

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

@@ -3,15 +3,13 @@ import { CalendarDate, CalendarDateTime, Time } from "@internationalized/date";
 import { useVModel } from "@vueuse/core";
 import { format as formatDate, isValid, parse as parseDate } from "date-fns";
 import { computed, ref, shallowRef, useTemplateRef, watch } from "vue";
+import { useIsMobile } from "../../../composables/useIsMobile";
 import { cn } from "../../../utils/cn";
-import PickerShortcuts from "../date-picker/PickerShortcuts.vue";
+import { Drawer, DrawerContent, DrawerDescription, DrawerTitle } from "../drawer";
 import { Popover, PopoverAnchor, PopoverContent } from "../popover";
-import DateRangePickerDatePanel from "./DateRangePickerDatePanel.vue";
-import DateRangePickerDateTimePanel from "./DateRangePickerDateTimePanel.vue";
 import DateRangePickerInput from "./DateRangePickerInput.vue";
-import DateRangePickerMonthPanel from "./DateRangePickerMonthPanel.vue";
+import DateRangePickerPanels from "./DateRangePickerPanels.vue";
 import DateRangePickerTimeInput from "./DateRangePickerTimeInput.vue";
-import DateRangePickerYearPanel from "./DateRangePickerYearPanel.vue";
 import { DATE_RANGE_PICKER_DEFAULT_FORMATS } from "./types";
 defineOptions({ name: "UiDateRangePicker", inheritAttrs: false });
 const props = defineProps({
@@ -184,6 +182,24 @@ function onPanelUpdate(value, closeOnComplete) {
 }
 const open = ref(false);
 const anchorEl = useTemplateRef("anchor-el");
+const isMobile = useIsMobile();
+const interactive = computed(() => !props.disabled && !props.readonly);
+const numberOfMonths = computed(() => isMobile.value ? 1 : props.numberOfMonths);
+const panelProps = computed(() => ({
+  type: props.type,
+  modelValue: rangeValue.value,
+  disabledDate: props.disabledDate,
+  numberOfMonths: numberOfMonths.value,
+  timeGranularity: props.timeGranularity,
+  hourCycle: props.hourCycle,
+  rangeSeparatorIcon: props.rangeSeparatorIcon,
+  shortcuts: props.shortcuts
+}));
+function onAnchorClick() {
+  if (isMobile.value && interactive.value && props.type !== "timerange") {
+    open.value = true;
+  }
+}
 watch(open, (isOpen) => {
   if (!isOpen) inProgressRange.value = void 0;
 });
@@ -199,7 +215,7 @@ function onInteractOutside(event) {
   }
 }
 function onInputFocus(event, side) {
-  if (!props.disabled && !props.readonly) {
+  if (!isMobile.value && interactive.value) {
     open.value = true;
   }
   emits("focus", event, side);
@@ -214,6 +230,7 @@ function onInputBlur(event, side) {
     ref="anchor-el"
     data-slot="date-range-picker"
     :class="cn('w-full', props.class)"
+    @click="onAnchorClick"
   >
     <DateRangePickerTimeInput
       v-if="props.type === 'timerange'"
@@ -233,9 +250,14 @@ function onInputBlur(event, side) {
       @update:end-value="setEndTime"
       @clear="clearAll"
     />
+    <!-- The popover root stays mounted on mobile so the inputs are declared
+         once; it is simply never opened there, and the drawer below takes over. -->
     <Popover
       v-else
-      v-model:open="open"
+      :open="!isMobile && open"
+      @update:open="(value) => {
+  if (!isMobile) open = value;
+}"
     >
       <PopoverAnchor as-child>
         <DateRangePickerInput
@@ -251,6 +273,7 @@ function onInputBlur(event, side) {
           :clearable="props.clearable"
           :disabled="props.disabled"
           :readonly="props.readonly"
+          :typeable="!isMobile"
           :open="open"
           :size="props.size"
           :class="props.inputClass"
@@ -261,49 +284,42 @@ function onInputBlur(event, side) {
         />
       </PopoverAnchor>
       <PopoverContent
+        v-if="!isMobile"
         align="start"
         :class="cn('w-auto p-0', props.popoverClass)"
         :style="{ minWidth: 'var(--reka-popover-trigger-width)' }"
         @open-auto-focus="(event) => event.preventDefault()"
         @interact-outside="onInteractOutside"
       >
-        <div class="flex flex-col">
-          <DateRangePickerDatePanel
-            v-if="props.type === 'daterange'"
-            :model-value="rangeValue"
-            :is-date-disabled="props.disabledDate"
-            :number-of-months="props.numberOfMonths"
-            @update:model-value="(v) => onPanelUpdate(v, true)"
-          />
-          <DateRangePickerMonthPanel
-            v-else-if="props.type === 'monthrange'"
-            :model-value="rangeValue"
-            :is-date-disabled="props.disabledDate"
-            @update:model-value="(v) => onPanelUpdate(v, true)"
-          />
-          <DateRangePickerYearPanel
-            v-else-if="props.type === 'yearrange'"
-            :model-value="rangeValue"
-            :is-date-disabled="props.disabledDate"
-            @update:model-value="(v) => onPanelUpdate(v, true)"
-          />
-          <DateRangePickerDateTimePanel
-            v-else-if="props.type === 'datetimerange'"
-            :model-value="rangeValue"
-            :is-date-disabled="props.disabledDate"
-            :granularity="props.timeGranularity"
-            :hour-cycle="props.hourCycle"
-            :number-of-months="props.numberOfMonths"
-            :range-separator-icon="props.rangeSeparatorIcon"
-            @update:model-value="(v) => onPanelUpdate(v, false)"
-          />
-          <PickerShortcuts
-            v-if="props.shortcuts && props.shortcuts.length > 0"
-            :items="props.shortcuts"
-            @select="applyShortcut"
-          />
-        </div>
+        <DateRangePickerPanels
+          v-bind="panelProps"
+          @update="onPanelUpdate"
+          @shortcut="applyShortcut"
+        />
       </PopoverContent>
     </Popover>
+
+    <Drawer
+      v-if="isMobile && props.type !== 'timerange'"
+      v-model:open="open"
+    >
+      <DrawerContent
+        :show-close-button="false"
+        :class="cn('p-0 pt-4 gap-0', props.popoverClass)"
+      >
+        <DrawerTitle class="sr-only">
+          {{ props.startPlaceholder || "\u9009\u62E9\u65E5\u671F\u8303\u56F4" }}
+        </DrawerTitle>
+        <DrawerDescription class="sr-only" />
+        <!-- No cross-axis centering here: the calendar sizes itself with
+             `w-full` and `flex-1` cells, and `items-center` would collapse its
+             container to fit-content and undo that. -->
+        <DateRangePickerPanels
+          v-bind="panelProps"
+          @update="onPanelUpdate"
+          @shortcut="applyShortcut"
+        />
+      </DrawerContent>
+    </Drawer>
   </div>
 </template>

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

@@ -1,12 +1,6 @@
 import type { DateValue } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
-import type { LocaleValue } from '../../../share/locale.js';
-import type { DateRangePickerType } from './types.js';
-type RangeShortcutValue = [string, string] | (() => [string, string]);
-export interface DateRangePickerShortcut {
-    name: LocaleValue;
-    value: RangeShortcutValue;
-}
+import type { DateRangePickerShortcut, DateRangePickerType } from './types.js';
 type __VLS_Props = {
     modelValue?: [string, string];
     defaultValue?: [string, string];
@@ -47,8 +41,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     size: "sm" | "md" | "lg";
     type: DateRangePickerType;
     numberOfMonths: number;
-    hourCycle: 12 | 24;
     clearable: boolean;
+    hourCycle: 12 | 24;
     timeGranularity: "hour" | "minute" | "second";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -11,6 +11,7 @@ type __VLS_Props = {
     clearable?: boolean;
     disabled?: boolean;
     readonly?: boolean;
+    typeable?: boolean;
     open?: boolean;
     size?: 'sm' | 'md' | 'lg';
     class?: HTMLAttributes['class'];
@@ -28,6 +29,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
 }>, {
     size: "sm" | "md" | "lg";
     clearable: boolean;
+    typeable: boolean;
     clearIcon: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -17,6 +17,7 @@ const props = defineProps({
   clearable: { type: Boolean, required: false, default: true },
   disabled: { type: Boolean, required: false },
   readonly: { type: Boolean, required: false },
+  typeable: { type: Boolean, required: false, default: true },
   open: { type: Boolean, required: false },
   size: { type: String, required: false, default: "md" },
   class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true }
@@ -125,7 +126,7 @@ const hasValue = computed(() => props.startValue !== void 0 || props.endValue !=
       data-side="start"
       :placeholder="props.startPlaceholder"
       :disabled="props.disabled"
-      :readonly="props.readonly"
+      :readonly="props.readonly || !props.typeable"
       :class="cn(
   'text-zinc-700 placeholder:text-zinc-300 min-w-0 flex-1 bg-transparent px-1 outline-none disabled:cursor-not-allowed text-center',
   inputTextClass,
@@ -147,7 +148,7 @@ const hasValue = computed(() => props.startValue !== void 0 || props.endValue !=
       data-side="end"
       :placeholder="props.endPlaceholder"
       :disabled="props.disabled"
-      :readonly="props.readonly"
+      :readonly="props.readonly || !props.typeable"
       :class="cn(
   'text-zinc-700 placeholder:text-zinc-300 min-w-0 flex-1 bg-transparent px-1 outline-none disabled:cursor-not-allowed text-center',
   inputTextClass,

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

@@ -11,6 +11,7 @@ type __VLS_Props = {
     clearable?: boolean;
     disabled?: boolean;
     readonly?: boolean;
+    typeable?: boolean;
     open?: boolean;
     size?: 'sm' | 'md' | 'lg';
     class?: HTMLAttributes['class'];
@@ -28,6 +29,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
 }>, {
     size: "sm" | "md" | "lg";
     clearable: boolean;
+    typeable: boolean;
     clearIcon: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -0,0 +1,23 @@
+import type { DateRange, DateValue } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { DateRangePickerShortcut, DateRangePickerType } from './types.js';
+type __VLS_Props = {
+    type: DateRangePickerType;
+    modelValue: DateRange;
+    disabledDate?: (d: DateValue) => boolean;
+    numberOfMonths: number;
+    timeGranularity: 'hour' | 'minute' | 'second';
+    hourCycle: 12 | 24;
+    rangeSeparatorIcon?: string;
+    shortcuts?: ReadonlyArray<DateRangePickerShortcut>;
+    class?: HTMLAttributes['class'];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    shortcut: (args_0: number) => any;
+    update: (args_0: DateRange | undefined, args_1: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onShortcut?: ((args_0: number) => any) | undefined;
+    onUpdate?: ((args_0: DateRange | undefined, args_1: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,60 @@
+<script setup>
+import { cn } from "../../../utils/cn";
+import PickerShortcuts from "../date-picker/PickerShortcuts.vue";
+import DateRangePickerDatePanel from "./DateRangePickerDatePanel.vue";
+import DateRangePickerDateTimePanel from "./DateRangePickerDateTimePanel.vue";
+import DateRangePickerMonthPanel from "./DateRangePickerMonthPanel.vue";
+import DateRangePickerYearPanel from "./DateRangePickerYearPanel.vue";
+defineOptions({ name: "UiDateRangePickerPanels" });
+const props = defineProps({
+  type: { type: String, required: true },
+  modelValue: { type: Object, required: true },
+  disabledDate: { type: Function, required: false },
+  numberOfMonths: { type: Number, required: true },
+  timeGranularity: { type: String, required: true },
+  hourCycle: { type: Number, required: true },
+  rangeSeparatorIcon: { type: String, required: false },
+  shortcuts: { type: Array, required: false },
+  class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true }
+});
+const emits = defineEmits(["update", "shortcut"]);
+</script>
+
+<template>
+  <div :class="cn('flex flex-col', props.class)">
+    <DateRangePickerDatePanel
+      v-if="props.type === 'daterange'"
+      :model-value="props.modelValue"
+      :is-date-disabled="props.disabledDate"
+      :number-of-months="props.numberOfMonths"
+      @update:model-value="(v) => emits('update', v, true)"
+    />
+    <DateRangePickerMonthPanel
+      v-else-if="props.type === 'monthrange'"
+      :model-value="props.modelValue"
+      :is-date-disabled="props.disabledDate"
+      @update:model-value="(v) => emits('update', v, true)"
+    />
+    <DateRangePickerYearPanel
+      v-else-if="props.type === 'yearrange'"
+      :model-value="props.modelValue"
+      :is-date-disabled="props.disabledDate"
+      @update:model-value="(v) => emits('update', v, true)"
+    />
+    <DateRangePickerDateTimePanel
+      v-else-if="props.type === 'datetimerange'"
+      :model-value="props.modelValue"
+      :is-date-disabled="props.disabledDate"
+      :granularity="props.timeGranularity"
+      :hour-cycle="props.hourCycle"
+      :number-of-months="props.numberOfMonths"
+      :range-separator-icon="props.rangeSeparatorIcon"
+      @update:model-value="(v) => emits('update', v, false)"
+    />
+    <PickerShortcuts
+      v-if="props.shortcuts && props.shortcuts.length > 0"
+      :items="props.shortcuts"
+      @select="(index) => emits('shortcut', index)"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,23 @@
+import type { DateRange, DateValue } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { DateRangePickerShortcut, DateRangePickerType } from './types.js';
+type __VLS_Props = {
+    type: DateRangePickerType;
+    modelValue: DateRange;
+    disabledDate?: (d: DateValue) => boolean;
+    numberOfMonths: number;
+    timeGranularity: 'hour' | 'minute' | 'second';
+    hourCycle: 12 | 24;
+    rangeSeparatorIcon?: string;
+    shortcuts?: ReadonlyArray<DateRangePickerShortcut>;
+    class?: HTMLAttributes['class'];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    shortcut: (args_0: number) => any;
+    update: (args_0: DateRange | undefined, args_1: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onShortcut?: ((args_0: number) => any) | undefined;
+    onUpdate?: ((args_0: DateRange | undefined, args_1: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -24,10 +24,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     "onUpdate:endValue"?: ((args_0: Time | undefined) => any) | undefined;
 }>, {
     size: "sm" | "md" | "lg";
-    granularity: "hour" | "minute" | "second";
-    hourCycle: 12 | 24;
     clearable: boolean;
     clearIcon: string;
+    granularity: "hour" | "minute" | "second";
+    hourCycle: 12 | 24;
     rangeSeparatorIcon: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -24,10 +24,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     "onUpdate:endValue"?: ((args_0: Time | undefined) => any) | undefined;
 }>, {
     size: "sm" | "md" | "lg";
-    granularity: "hour" | "minute" | "second";
-    hourCycle: 12 | 24;
     clearable: boolean;
     clearIcon: string;
+    granularity: "hour" | "minute" | "second";
+    hourCycle: 12 | 24;
     rangeSeparatorIcon: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -1,4 +1,4 @@
-export { default as DateRangePicker, type DateRangePickerShortcut } from './DateRangePicker.vue.js';
+export { default as DateRangePicker } from './DateRangePicker.vue.js';
 export { default as DateRangePickerDatePanel } from './DateRangePickerDatePanel.vue.js';
 export { default as DateRangePickerDateTimePanel } from './DateRangePickerDateTimePanel.vue.js';
 export { default as DateRangePickerInput } from './DateRangePickerInput.vue.js';
@@ -6,4 +6,4 @@ export { default as DateRangePickerMonthPanel } from './DateRangePickerMonthPane
 export { default as DateRangePickerTimeInput } from './DateRangePickerTimeInput.vue.js';
 export { default as DateRangePickerYearPanel } from './DateRangePickerYearPanel.vue.js';
 export { DATE_RANGE_PICKER_DEFAULT_FORMATS } from './types.js';
-export type { DateRangePickerType } from './types.js';
+export type { DateRangePickerShortcut, DateRangePickerType } from './types.js';

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

@@ -1,3 +1,9 @@
+import type { LocaleValue } from '../../../share/locale.js';
+export type DateRangePickerShortcutValue = [string, string] | (() => [string, string]);
+export interface DateRangePickerShortcut {
+    name: LocaleValue;
+    value: DateRangePickerShortcutValue;
+}
 export type DateRangePickerType = 'daterange' | 'datetimerange' | 'monthrange' | 'yearrange' | 'timerange';
 export declare const DATE_RANGE_PICKER_DEFAULT_FORMATS: Record<DateRangePickerType, {
     display: string;

package/dist/runtime/components/ui/input-group/InputGroupNumberField.vue

@@ -48,7 +48,7 @@ const delegatedProps = reactiveOmit(props, "class", "inputClass", "invalid", "id
       :data-value="typeof delegatedProps.modelValue === 'number'"
       :aria-invalid="props.invalid ? 'true' : void 0"
       :class="cn(
-  'flex-1 px-3 py-1 text-center rounded-none w-full text-sm text-zinc-700 border-0 bg-transparent shadow-none outline-none peer disabled:cursor-not-allowed disabled:text-zinc-600 disabled:opacity-100',
+  'flex-1 px-3 py-1 text-center rounded-none w-full text-base md:text-sm text-zinc-700 border-0 bg-transparent shadow-none outline-none peer disabled:cursor-not-allowed disabled:text-zinc-600 disabled:opacity-100',
   props.inputClass
 )"
       @blur="emits('blur', $event)"

package/dist/runtime/components/ui/sidebar/SidebarProvider.vue

@@ -1,7 +1,8 @@
 <script setup>
-import { defaultDocument, useEventListener, useMediaQuery, useVModel } from "@vueuse/core";
+import { defaultDocument, useEventListener, useVModel } from "@vueuse/core";
 import { TooltipProvider } from "reka-ui";
 import { computed, ref } from "vue";
+import { useIsMobile } from "../../../composables/useIsMobile";
 import { cn } from "../../../utils/cn";
 import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from "./utils";
 const props = defineProps({
@@ -10,7 +11,7 @@ const props = defineProps({
   class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true }
 });
 const emits = defineEmits(["update:open"]);
-const isMobile = useMediaQuery("(max-width: 768px)");
+const isMobile = useIsMobile();
 const openMobile = ref(false);
 const open = useVModel(props, "open", emits, {
   defaultValue: props.defaultOpen ?? false,

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

@@ -0,0 +1,15 @@
+import type { Ref } from 'vue';
+/**
+ * The single viewport breakpoint separating phone-shaped layouts from the rest.
+ * Anything narrower than this is "mobile"; `768px` itself is already desktop.
+ *
+ * Callers MUST route through here rather than writing their own media query —
+ * the codebase previously disagreed with itself (640px in the responsive modal,
+ * 768px in the sidebar), which made a viewport exist where one component
+ * believed it was on a phone and its neighbour did not.
+ */
+export declare const MOBILE_BREAKPOINT_PX = 768;
+export declare const DESKTOP_MEDIA_QUERY = "(min-width: 768px)";
+export declare const MOBILE_MEDIA_QUERY = "(max-width: 767.98px)";
+export declare function useIsMobile(): Ref<boolean>;
+export declare function useIsDesktop(): Ref<boolean>;

package/dist/runtime/composables/useIsMobile.js

@@ -0,0 +1,12 @@
+import { useMediaQuery } from "@vueuse/core";
+import { computed } from "vue";
+export const MOBILE_BREAKPOINT_PX = 768;
+export const DESKTOP_MEDIA_QUERY = `(min-width: ${MOBILE_BREAKPOINT_PX}px)`;
+export const MOBILE_MEDIA_QUERY = `(max-width: ${MOBILE_BREAKPOINT_PX - 0.02}px)`;
+export function useIsMobile() {
+  return useMediaQuery(MOBILE_MEDIA_QUERY);
+}
+export function useIsDesktop() {
+  const isMobile = useIsMobile();
+  return computed(() => !isMobile.value);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shwfed/config",
-  "version": "3.0.18",
+  "version": "3.0.19",
   "description": "Configurable UI for SHWFED",
   "type": "module",
   "publishConfig": {