sveltacular 0.0.55 → 0.0.56

package/dist/forms/button/button.svelte

@@ -7,6 +7,8 @@ export let type = "button";
 export let block = false;
 export let flex = false;
 export let disabled = false;
+export let noMargin = false;
+export let collapse = false;
 const dispatch = createEventDispatcher();
 const click = (e) => {
   if (disabled) {
@@ -21,7 +23,7 @@ const click = (e) => {
 };
 </script>
 
-<button {type} on:click={click} class="{size} {style} {flex ? 'flex' : ''}" class:block {disabled}>
+<button {type} on:click={click} class="{size} {style} {flex ? 'flex' : ''}" class:block class:noMargin class:collapse {disabled}>
 	<slot />
 </button>
 
@@ -53,6 +55,13 @@ button[disabled] {
   opacity: 0.5;
   cursor: not-allowed;
 }
+button.noMargin {
+  margin: 0;
+}
+button.collapse {
+  min-width: auto;
+  padding: 0.5rem;
+}
 button.flex {
   flex-grow: 1;
 }

package/dist/forms/button/button.svelte.d.ts

@@ -9,6 +9,8 @@ declare const __propDef: {
         block?: boolean | undefined;
         flex?: boolean | undefined;
         disabled?: boolean | undefined;
+        noMargin?: boolean | undefined;
+        collapse?: boolean | undefined;
     };
     events: {
         click: CustomEvent<void>;

package/dist/forms/date-box/date-box.svelte

@@ -1,7 +1,9 @@
-<script>import { currentDateTime, isDate, isDateOrDateTime, isDateTime } from "../../helpers/date.js";
+<script>import { addUnits, currentDateTime, isDateString, isDateOrDateTimeString, isDateTimeString } from "../../helpers/date.js";
 import { uniqueId } from "../../helpers/unique-id.js";
 import FormField from "../form-field.svelte";
 import FormLabel from "../form-label.svelte";
+import Button from "../button/button.svelte";
+import { createEventDispatcher } from "svelte";
 const id = uniqueId();
 export let value = void 0;
 export let defaultValue = void 0;
@@ -11,17 +13,31 @@ export let nullable = false;
 export let enabled = true;
 export let type = "date";
 export let required = false;
+export let steps = [];
+const dipatch = createEventDispatcher();
 const _defaultValue = defaultValue || value || currentDateTime();
 const getDefaultValue = () => {
   if (type === "date") {
-    return isDate(String(_defaultValue)) ? _defaultValue : currentDateTime().substring(0, 10);
+    return isDateString(_defaultValue) ? _defaultValue : currentDateTime().substring(0, 10);
   }
-  return isDateTime(String(_defaultValue)) ? _defaultValue : currentDateTime();
+  return isDateTimeString(_defaultValue) ? _defaultValue : currentDateTime();
 };
 const checkChanged = () => {
   if (nullable) {
     value = enabled ? getDefaultValue() : "";
   }
+  dipatch("checkChanged", enabled);
+  onInput();
+};
+const incrementValue = (step) => {
+  if (isDateOrDateTimeString(value)) {
+    const newDate = addUnits(step.value, step.unit, value);
+    newDate.setUTCDate(newDate.getUTCDate() + step.value);
+    value = newDate.toISOString().substring(0, type === "date" ? 10 : 19);
+  }
+};
+const onInput = () => {
+  dipatch("value", enabled ? value : null);
 };
 if (!value) {
   if (nullable)
@@ -39,13 +55,20 @@ $:
 	{/if}
 	<div class:nullable class:disabled>
 		<span class="input">
-			<input {...{ type }} {id} {placeholder} {disabled} bind:value {required} />
+			<input {...{ type }} {id} {placeholder} {disabled} bind:value {required} on:input={onInput} />
 		</span>
 		{#if nullable}
 			<span class="toggle">
 				<input type="checkbox" bind:checked={enabled} on:change={checkChanged} />
 			</span>
 		{/if}
+		{#if steps.length > 0}
+			<span class="steps">
+				{#each steps as step}
+					<Button noMargin={true} collapse={true} on:click={() => incrementValue(step)}>{step.label}</Button>
+				{/each}
+			</span>
+		{/if}
 	</div>
 </FormField>
 
@@ -68,8 +91,16 @@ input::placeholder {
 }
 
 div {
-  display: block;
+  display: flex;
   position: relative;
+  gap: 0.5rem;
+}
+div .input {
+  flex-grow: 1;
+}
+div .steps {
+  display: flex;
+  gap: 0.25rem;
 }
 div.nullable input {
   padding-left: 2.5rem;

package/dist/forms/date-box/date-box.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { FormFieldSizeOptions } from '../../index.js';
+import type { DateUnit, FormFieldSizeOptions } from '../../index.js';
 declare const __propDef: {
     props: {
         value?: string | undefined | null;
@@ -10,8 +10,16 @@ declare const __propDef: {
         enabled?: boolean | undefined;
         type?: "date" | "datetime-local" | undefined;
         required?: boolean | undefined;
+        steps?: {
+            label: string;
+            value: number;
+            unit: DateUnit;
+        }[] | undefined;
     };
     events: {
+        value: CustomEvent<string | null>;
+        checkChanged: CustomEvent<boolean>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/dist/helpers/date.d.ts

@@ -1,17 +1,17 @@
+export type DateUnit = 'day' | 'month' | 'year' | 'minute' | 'hour' | 'second';
 export declare const currentDate: () => string;
 export declare const currentDateTime: () => string;
-/**
- * Get the current date plus x days in YYYY-MM-DD format
- *
- * @param days
- * @param fromDate
- * @returns YYYY-MM-DD
- */
-export declare const addDays: (days: number, fromDate?: string) => string;
+export declare const addDays: (days: number, fromDate?: string | Date) => Date;
+export declare const addMonths: (months: number, fromDate?: string | Date) => Date;
+export declare const addYears: (years: number, fromDate?: string | Date) => Date;
+export declare const addMinutes: (minutes: number, fromDateTime?: string | Date) => Date;
+export declare const addHours: (hours: number, fromDateTime?: string | Date) => Date;
+export declare const addSeconds: (seconds: number, fromDateTime?: string | Date) => Date;
+export declare const addUnits: (value: number, units: DateUnit, fromDateTime?: string | Date) => Date;
 export declare const dateTimeFromSupabase: (dateTime: string | null) => string;
 export declare const dateTimeToSupabase: (dateTime: string) => string | null;
 export declare const dateTimeToHuman: (dateTime: string) => string;
 export declare const dateTimeToInput: (dateTime?: Date) => string;
-export declare const isDate: (date: string) => boolean;
-export declare const isDateTime: (dateTime: string) => boolean;
-export declare const isDateOrDateTime: (dateOrDateTime: string) => boolean;
+export declare const isDateString: (date: string) => date is string;
+export declare const isDateTimeString: (dateTime: string) => dateTime is string;
+export declare const isDateOrDateTimeString: (dateOrDateTime: unknown) => dateOrDateTime is string;

package/dist/helpers/date.js

@@ -12,17 +12,51 @@ export const currentDateTime = () => {
     date.setMinutes(date.getMinutes() - offset);
     return date.toISOString().split('.')[0].slice(0, -3);
 };
-/**
- * Get the current date plus x days in YYYY-MM-DD format
- *
- * @param days
- * @param fromDate
- * @returns YYYY-MM-DD
- */
 export const addDays = (days, fromDate) => {
     const date = fromDate ? new Date(fromDate) : new Date();
     date.setDate(date.getDate() + days);
-    return date.toISOString().split('T')[0];
+    return date;
+};
+export const addMonths = (months, fromDate) => {
+    const date = fromDate ? new Date(fromDate) : new Date();
+    date.setMonth(date.getMonth() + months);
+    return date;
+};
+export const addYears = (years, fromDate) => {
+    const date = fromDate ? new Date(fromDate) : new Date();
+    date.setFullYear(date.getFullYear() + years);
+    return date;
+};
+export const addMinutes = (minutes, fromDateTime) => {
+    const date = fromDateTime ? new Date(fromDateTime) : new Date();
+    date.setMinutes(date.getMinutes() + minutes);
+    return date;
+};
+export const addHours = (hours, fromDateTime) => {
+    const date = fromDateTime ? new Date(fromDateTime) : new Date();
+    date.setHours(date.getHours() + hours);
+    return date;
+};
+export const addSeconds = (seconds, fromDateTime) => {
+    const date = fromDateTime ? new Date(fromDateTime) : new Date();
+    date.setSeconds(date.getSeconds() + seconds);
+    return date;
+};
+export const addUnits = (value, units, fromDateTime) => {
+    const date = fromDateTime ? new Date(fromDateTime) : new Date();
+    if (units === 'day')
+        date.setDate(date.getDate() + value);
+    if (units === 'month')
+        date.setMonth(date.getMonth() + value);
+    if (units === 'year')
+        date.setFullYear(date.getFullYear() + value);
+    if (units === 'minute')
+        date.setMinutes(date.getMinutes() + value);
+    if (units === 'hour')
+        date.setHours(date.getHours() + value);
+    if (units === 'second')
+        date.setSeconds(date.getSeconds() + value);
+    return date;
 };
 // Convert datetime from YYYY-MM-DDTHH:MM+TZ format to YYYY-MM-DD HH:MM format
 export const dateTimeFromSupabase = (dateTime) => {
@@ -67,13 +101,15 @@ export const dateTimeToInput = (dateTime) => {
     return dateTime.toISOString().split('.')[0].slice(0, -3);
 };
 // Is this date formatted in YYYY-MM-DD format?
-export const isDate = (date) => {
+export const isDateString = (date) => {
     return /^\d{4}-\d{2}-\d{2}$/.test(date);
 };
 // Is this datetime formatted in YYYY-MM-DD HH:MM format?
-export const isDateTime = (dateTime) => {
+export const isDateTimeString = (dateTime) => {
     return /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}(:\d{2})?$/.test(dateTime);
 };
-export const isDateOrDateTime = (dateOrDateTime) => {
-    return isDate(dateOrDateTime) || isDateTime(dateOrDateTime);
+export const isDateOrDateTimeString = (dateOrDateTime) => {
+    if (typeof dateOrDateTime !== 'string')
+        return false;
+    return isDateString(dateOrDateTime) || isDateTimeString(dateOrDateTime);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sveltacular",
-	"version": "0.0.55",
+	"version": "0.0.56",
 	"description": "A Svelte component library",
 	"main": "dist/index.js",
 	"module": "dist/index.js",