@witchcraft/ui 0.1.1 → 0.1.3

package/dist/runtime/components/LibDarkModeSwitcher/LibDarkModeSwitcher.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import LibDarkModeSwitcher from "./LibDarkModeSwitcher.vue.js";
+declare const meta: Meta<typeof LibDarkModeSwitcher>;
+export default meta;
+type Story = StoryObj<typeof LibDarkModeSwitcher>;
+export declare const Primary: Story;
+export declare const WithoutLabel: Story;

package/dist/runtime/components/LibDarkModeSwitcher/LibDarkModeSwitcher.stories.js

@@ -0,0 +1,36 @@
+import { ref } from "vue";
+import LibDarkModeSwitcher from "./LibDarkModeSwitcher.vue";
+import * as components from "../index.js";
+const meta = {
+  component: LibDarkModeSwitcher,
+  title: "Components/DarkModeSwitcher",
+  args: {}
+};
+export default meta;
+export const Primary = {
+  render: (args) => ({
+    components,
+    setup: () => {
+      const darkMode = ref(false);
+      return {
+        args,
+        darkMode
+      };
+    },
+    template: `
+			Value: {{darkMode}}
+			<LibDarkModeSwitcher 
+				@update:darkMode="darkMode = $event"
+				v-bind="{...args}"
+			></LibDarkModeSwitcher>
+			
+		`
+  })
+};
+export const WithoutLabel = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    showLabel: false
+  }
+};

package/dist/runtime/components/LibDarkModeSwitcher/LibDarkModeSwitcher.vue

@@ -1,27 +1,26 @@
 <template>
 <lib-button
-	v-bind="{ ...$attrs, class: void 0 }"
-	:class="!$attrs.unstyle && twMerge(
-  `
+	v-bind="{...$attrs, class:undefined}"
+	:class="!($attrs as any).unstyle && twMerge(`
 			dark-mode-switcher
 			rounded-full
 			after:rounded-full
 		`,
-  $attrs?.class
-)"
+		($attrs as any)?.class
+	)"
 	:title="`${t('dark-mode-switcher.title')}${t(`dark-mode-switcher.${darkModeState}`)}`"
 	@click="cycleDarkMode"
 >
 	<!-- content-vertical-holder will keep the icon the height of a text line regardless of the svg used -->
 	<template #icon>
 		<icon
-			v-if="darkModeState === 'dark'"
+			v-if="darkModeState==='dark'"
 			class="w-[1em] flex items-center content-vertical-holder"
 		>
 			<i-fa-solid-moon/>
 		</icon>
 		<icon
-			v-else-if="darkModeState === 'light'"
+			v-else-if="darkModeState==='light'"
 			class="w-[1em] content-vertical-holder"
 		>
 			<i-ph-sun-bold/>
@@ -40,34 +39,59 @@
 	</template>
 </lib-button>
 </template>
+<script lang="ts" setup>
+import { type ButtonHTMLAttributes,onMounted,useAttrs, watch } from "vue"
+
+import { useInjectedDarkMode } from "../../composables/useInjectedDarkMode.js"
+import { useInjectedI18n } from "../../composables/useInjectedI18n.js"
+import { twMerge } from "../../utils/twMerge.js"
+import Icon from "../Icon/Icon.vue"
+import LibButton from "../LibButton/LibButton.vue"
+import type { TailwindClassProp } from "../shared/props.js"
+
+const t = useInjectedI18n()
+
+const emit = defineEmits<{
+	/** Emits whether dark mode should be enabled. */
+	(e: "update:darkMode", value: boolean): void
+	/** Emits the change, but as a state string (dark, light, system) */
+	(e: "update:darkModeState", value: "dark" | "light" | "system"): void
+}>()
+const $attrs = useAttrs()
+
+withDefaults(defineProps<Props>(), { showLabel: true })
+
 
-<script setup>
-import { onMounted, useAttrs, watch } from "vue";
-import { useInjectedDarkMode } from "../../composables/useInjectedDarkMode.js";
-import { useInjectedI18n } from "../../composables/useInjectedI18n.js";
-import { twMerge } from "../../utils/twMerge.js";
-import Icon from "../Icon/Icon.vue";
-import LibButton from "../LibButton/LibButton.vue";
-const t = useInjectedI18n();
-const emit = defineEmits(["update:darkMode", "update:darkModeState"]);
-const $attrs = useAttrs();
-defineProps({
-  showLabel: { type: Boolean, required: false, default: true }
-});
 const {
-  darkMode,
-  cycleDarkMode,
-  darkModeState
-} = useInjectedDarkMode();
-watch(darkMode, (value) => emit("update:darkMode", value));
-watch(darkModeState, (value) => emit("update:darkModeState", value));
+	darkMode,
+	cycleDarkMode,
+	darkModeState,
+} = useInjectedDarkMode()
+
+watch(darkMode, value => emit("update:darkMode", value))
+watch(darkModeState, value => emit("update:darkModeState", value))
+
 onMounted(() => {
-  emit("update:darkMode", darkMode.value);
-});
+	emit("update:darkMode", darkMode.value)
+})
 </script>
-
-<script>
+<script lang="ts">
 export default {
-  name: "lib-dark-mode-switcher"
-};
+	name: "lib-dark-mode-switcher"
+}
+type RealProps = {
+	showLabel?: boolean
+}
+
+interface Props
+	extends
+	/** @vue-ignore */
+	Partial<Omit<ButtonHTMLAttributes,"class" | "color" | "disabled">
+	& TailwindClassProp
+	& {
+		disabled?: boolean
+		unstyle?: boolean
+	}>,
+	RealProps
+{ }
 </script>

package/dist/runtime/components/LibDatePicker/LibDatePicker.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import * as components from "../index.js.js";
+declare const singleMeta: Meta<typeof components.LibDatePicker>;
+export default singleMeta;
+type Story = StoryObj<typeof components.LibDatePicker>;
+export declare const Primary: Story;
+export declare const DateRange: Story;
+export declare const IconTriggerFirst: Story;
+export declare const BottomSlot: Story;
+export declare const DateWithTime: Story;
+export declare const WithDifferentFallbackDate: Story;

package/dist/runtime/components/LibDatePicker/LibDatePicker.stories.js

@@ -0,0 +1,98 @@
+import { CalendarDate, fromDate, getLocalTimeZone, toTimeZone } from "@internationalized/date";
+import { computed, ref } from "vue";
+import { createNoonUtcDate } from "../../helpers/createNoonUtcDate.js";
+import * as components from "../index.js";
+function html(strings, ...values) {
+  return String.raw(strings, ...values);
+}
+const singleMeta = {
+  component: components.LibDatePicker,
+  title: "Components/DatePicker",
+  args: {
+    // @ts-expect-error custom prop just for story
+    slot: "",
+    timeZone: getLocalTimeZone()
+  }
+};
+export default singleMeta;
+function toUTC(m, timeZone) {
+  return toTimeZone(fromDate(m, timeZone), "UTC").toAbsoluteString();
+}
+export const Primary = {
+  render: (args) => ({
+    components: {
+      ...components
+    },
+    setup: () => {
+      const modelValue = ref(args.modelValue);
+      const timeZone = ref(args.timeZone);
+      const debugUtcDate = computed(() => {
+        const m = modelValue.value;
+        const z = timeZone.value;
+        return m instanceof Date ? toUTC(m, z) : typeof m === "object" ? `Start: ${m.start ? toUTC(m.start, z) : "undefined"}, End: ${m.end ? toUTC(m.end, z) : "undefined"}` : "undefined";
+      });
+      return { args, getLocalTimeZone, modelValue, timeZone, debugUtcDate };
+    },
+    template: `
+			<div>Date: {{modelValue ?? "undefined"}}</div>
+			<div>Date UTC: {{debugUtcDate}}</div>
+			<div>Detected timezone (via @internationalized/date): {{getLocalTimeZone()}}</div>
+			<LibTimeZonePicker
+				v-model="timeZone"
+				label="Override Time Zone"
+				wrapper-class="[&_.suggestions]:max-h-[200px] [&_.suggestions]:overflow-y-auto"
+			/> 
+			<div>
+				This component has no border, added here to see it's size.
+			</div>
+			<div class="border border-neutral-500">
+				<LibDatePicker v-bind="args" v-model="modelValue" :time-zone="timeZone">
+					${args.slot}
+				</LibDatePicker>
+			</div>
+		`
+  })
+};
+export const DateRange = {
+  ...Primary,
+  args: {
+    modelValue: { start: void 0, end: void 0 }
+  }
+};
+export const IconTriggerFirst = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    class: "[&_.trigger]:order-first"
+  }
+};
+export const BottomSlot = {
+  ...Primary,
+  args: {
+    // @ts-expect-error see above
+    slot: html`
+			<template #default="slotProps">
+				<LibButton>Custom content can be added here.</LibButton>
+				<p class="break-all">
+					Content has access to the internal temporary/suggested date value and can change it (e.g. set it to today).
+				</p>	
+				<p>Temp value:</p>
+				{{ slotProps.tempValue }} 
+			</template>
+		`
+  }
+};
+export const DateWithTime = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    showTime: true
+  }
+};
+export const WithDifferentFallbackDate = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    fallbackDate: createNoonUtcDate(new CalendarDate(2e3, 1, 1)).toDate()
+  }
+};

package/dist/runtime/components/LibDatePicker/LibDatePicker.vue

@@ -1,19 +1,40 @@
-<script setup>
-import { getLocalTimeZone } from "@internationalized/date";
-import { computed, useAttrs } from "vue";
-import LibRangeDatePicker from "./LibRangeDatePicker.vue";
-import LibSingleDatePicker from "./LibSingleDatePicker.vue";
-import { getFallbackId } from "../shared/props.js";
-const attrs = useAttrs();
-defineProps({
-  showTime: { type: Boolean, required: false, default: false },
-  id: { type: String, required: false, default: void 0 },
-  fallbackDate: { type: Date, required: false, default: () => /* @__PURE__ */ new Date() },
-  timeZone: { type: String, required: false, default: getLocalTimeZone() }
-});
-const fallbackId = getFallbackId();
-const date = defineModel({ type: null, ...{ required: true } });
-const isRange = computed(() => date.value !== void 0 && !(date.value instanceof Date));
+<script setup lang="ts">
+import { getLocalTimeZone } from "@internationalized/date"
+import { computed, useAttrs } from "vue"
+
+import LibRangeDatePicker from "./LibRangeDatePicker.vue"
+import LibSingleDatePicker from "./LibSingleDatePicker.vue"
+
+import type { RangeDate,SingleDate } from "../../types/index.js"
+import { getFallbackId } from "../shared/props.js"
+
+const attrs = useAttrs()
+
+withDefaults(defineProps<{
+	showTime?: boolean
+	id?: string
+	/** The fallback suggested date when the modelValue is undefined (it will not update modelValue, it only serves as a suggestions and is used internally in the temporary value). If ignoring the time element, you should probably use the {@link createNoonTodayUtc} function (`createNonTodayUtc().toDate(())`) in the helpers, otherwise `new Date()` (the default) will do. */
+	fallbackDate?: Date
+	/** The local user's timezone, defaults to @internationalized/date's getLocalTimeZone(). */
+	timeZone?: string
+}>(), {
+	showTime: false,
+	id: undefined,
+	fallbackDate: () => new Date(),
+	timeZone: getLocalTimeZone()
+})
+const fallbackId = getFallbackId()
+
+/**
+ * modelValue can be undefined or an object with start/end undefined, but it must be passed, otherwise we can't tell the difference between a single date and a range date.
+ *
+ * In the case of an undefined date, the current date at NOON UTC will be used to avoid the date changing.
+ *
+ * The @internationalized/date library's fromDate function is used internally to convert the date given (should be UTC) to the local time zone. It's converted back via it's toDate function.
+ */
+const date = defineModel<SingleDate | RangeDate>({ required: true })
+const isRange = computed(() => date.value !== undefined && !(date.value instanceof Date))
+
 </script>
 
 <template>
@@ -24,7 +45,7 @@ const isRange = computed(() => date.value !== void 0 && !(date.value instanceof
 	:time-zone="timeZone"
 	:fallback-date="fallbackDate"
 	:is="isRange ? LibRangeDatePicker : LibSingleDatePicker"
-	v-model="date"
+	v-model="date as any"
 >
 	<template #default="slotProps">
 		<slot v-bind="slotProps"/>

package/dist/runtime/components/LibDatePicker/LibRangeDatePicker.vue

@@ -1,55 +1,84 @@
-<script setup>
-import { CalendarDate, getLocalTimeZone, ZonedDateTime } from "@internationalized/date";
-import { DateRangePickerArrow, DateRangePickerCalendar, DateRangePickerCell, DateRangePickerCellTrigger, DateRangePickerContent, DateRangePickerField, DateRangePickerGrid, DateRangePickerGridBody, DateRangePickerGridHead, DateRangePickerGridRow, DateRangePickerHeadCell, DateRangePickerHeader, DateRangePickerHeading, DateRangePickerInput, DateRangePickerNext, DateRangePickerPrev, DateRangePickerRoot, DateRangePickerTrigger } from "reka-ui";
-import { onBeforeUnmount, ref, toRaw, useAttrs, watch } from "vue";
-import { convertDateWithFallback, getNow, toEmittableDate } from "./helpers.js";
-import { useInjectedLocale } from "../../composables/useInjectedLocale.js";
-import { twMerge } from "../../utils/twMerge.js";
-import Icon from "../Icon/Icon.vue";
-const attrs = useAttrs();
-const props = defineProps({
-  useTime: { type: Boolean, required: false, default: false },
-  id: { type: String, required: true },
-  fallbackDate: { type: Date, required: false, default: (_) => getNow({ withTime: _.useTime ?? false }).toDate(_.timeZone ?? getLocalTimeZone()) },
-  timeZone: { type: String, required: false, default: getLocalTimeZone() },
-  updateInterval: { type: Number, required: false, default: 1e4 }
-});
-const date = defineModel({ type: Object, ...{ required: true } });
-let justSet = false;
-const tempDate = ref({});
-function updateTempDate(keys = ["start", "end"]) {
-  const newValue = { ...tempDate.value };
-  for (const key of keys) {
-    newValue[key] = convertDateWithFallback(date.value?.[key], props);
-  }
-  tempDate.value = newValue;
+<script setup lang="ts">
+import { CalendarDate, type DateValue, getLocalTimeZone, ZonedDateTime } from "@internationalized/date"
+import type { DateRange } from "reka-ui"
+import { DateRangePickerArrow, DateRangePickerCalendar, DateRangePickerCell, DateRangePickerCellTrigger, DateRangePickerContent, DateRangePickerField, DateRangePickerGrid, DateRangePickerGridBody, DateRangePickerGridHead, DateRangePickerGridRow, DateRangePickerHeadCell,DateRangePickerHeader, DateRangePickerHeading, DateRangePickerInput, DateRangePickerNext, DateRangePickerPrev, DateRangePickerRoot, DateRangePickerTrigger } from "reka-ui"
+import { onBeforeUnmount, ref, toRaw, useAttrs, watch } from "vue"
+
+import { convertDateWithFallback, getNow,toEmittableDate } from "./helpers.js"
+
+import { useInjectedLocale } from "../../composables/useInjectedLocale.js"
+import type { RangeDate } from "../../types/index.js"
+import { twMerge } from "../../utils/twMerge.js"
+import Icon from "../Icon/Icon.vue"
+const attrs = useAttrs()
+
+const props = withDefaults(defineProps<{
+	useTime?: boolean
+	id: string
+	fallbackDate?: Date
+	timeZone?: string
+	updateInterval?: number
+}>(), {
+	timeZone: getLocalTimeZone(),
+	useTime: false,
+	fallbackDate: _ => getNow({ withTime: _.useTime ?? false }).toDate(_.timeZone ?? getLocalTimeZone()),
+	updateInterval: 10000
+})
+
+const date = defineModel<RangeDate>({ required: true })
+
+
+let justSet = false
+
+const tempDate = ref<{
+	start?: CalendarDate | ZonedDateTime
+	end?: CalendarDate | ZonedDateTime
+}>({})
+function updateTempDate(keys: ("start" | "end")[] = ["start", "end"]) {
+	const newValue = { ...tempDate.value }
+	for (const key of keys) {
+		newValue[key] = convertDateWithFallback(date.value?.[key], props)
+	}
+	// the WHOLE object must be updated due to how the reka date picker works
+	tempDate.value = newValue
 }
+
+// to avoid too deep of a watch
 watch([() => date.value.start, () => date.value.end], () => {
-  if (!justSet) {
-    updateTempDate();
-  } else {
-    justSet = false;
-  }
-});
+	if (!justSet) {
+		updateTempDate()
+	} else {
+		justSet = false
+	}
+})
+
 watch(tempDate, () => {
-  if (!tempDate.value.start || !tempDate.value.end) return;
-  justSet = true;
-  date.value = {
-    start: tempDate.value.start ? toEmittableDate(toRaw(tempDate.value.start)) : void 0,
-    end: tempDate.value.end ? toEmittableDate(toRaw(tempDate.value.end)) : void 0
-  };
-});
+	if (!tempDate.value.start || !tempDate.value.end) return
+	justSet = true
+	date.value = {
+		start: tempDate.value.start ? toEmittableDate(toRaw(tempDate.value.start) as any) : undefined,
+		end: tempDate.value.end ? toEmittableDate(toRaw(tempDate.value.end) as any) : undefined
+	}
+})
+
 watch(() => props.timeZone, () => {
-  updateTempDate();
-});
+	updateTempDate()
+})
+
+
 const interval = setInterval(() => {
-  if (!date.value.start) updateTempDate(["start"]);
-  if (!date.value.end) updateTempDate(["end"]);
-}, props.updateInterval);
+	// update suggested date if none is set
+	if (!date.value.start) updateTempDate(["start"])
+	if (!date.value.end) updateTempDate(["end"])
+}, props.updateInterval)
+
 onBeforeUnmount(() => {
-  clearInterval(interval);
-});
-const locale = useInjectedLocale().timeLocale;
+	clearInterval(interval)
+})
+
+const locale = useInjectedLocale().timeLocale
+
+
 </script>
 
 <template>
@@ -57,7 +86,7 @@ const locale = useInjectedLocale().timeLocale;
 	:id="id"
 	:locale="locale"
 	class="date-range-picker--root"
-	v-model="tempDate"
+	v-model="tempDate as DateRange"
 >
 	<DateRangePickerField
 		v-slot="{ segments }"
@@ -68,14 +97,14 @@ const locale = useInjectedLocale().timeLocale;
 			data-[invalid]:border-red-500
 			metadata-input-border
 			rounded-sm
-		`, attrs.class)"
+		`, (attrs as any).class)"
 	>
 		<div class="date-range-picker--segments-input flex items-center flex-1 overflow-scroll scrollbar-hidden whitespace-nowrap">
 			<div :class="twMerge(`
 				date-range-picker--start-segment
 				flex
 				items-center
-			`, date.start === void 0 && 'text-neutral-400')"
+			`, date.start === undefined && 'text-neutral-400')"
 			>
 				<template
 					v-for="item in segments.start"
@@ -122,7 +151,7 @@ const locale = useInjectedLocale().timeLocale;
 				date-range-picker--end-segment
 				flex
 				items-center
-			`, date.end === void 0 && 'text-neutral-400')"
+			`, date.end === undefined && 'text-neutral-400')"
 			>
 				<template
 					v-for="item in segments.end"
@@ -229,7 +258,7 @@ const locale = useInjectedLocale().timeLocale;
 						outlined
 						px-1
 					"
-					:prev-page="(date2) => date2.subtract({ years: 1 })"
+					:prev-page="(date: DateValue) => date.subtract({ years: 1 })"
 				>
 					<Icon class="scale-150">
 						<i-radix-icons-double-arrow-left/>
@@ -283,7 +312,7 @@ const locale = useInjectedLocale().timeLocale;
 						outlined
 						px-1
 					"
-					:next-page="(date2) => date2.add({ years: 1 })"
+					:next-page="(date: DateValue) => date.add({ years: 1 })"
 				>
 					<Icon class="scale-150">
 						<i-radix-icons-double-arrow-right/>
@@ -395,7 +424,7 @@ const locale = useInjectedLocale().timeLocale;
 					</DateRangePickerGridBody>
 				</DateRangePickerGrid>
 			</div>
-			<slot v-bind="{ tempValue: tempDate }"/>
+			<slot v-bind="{tempValue: tempDate}"/>
 		</DateRangePickerCalendar>
 	</DateRangePickerContent>
 </DateRangePickerRoot>