@svar-ui/svelte-calendar 2.6.0 → 2.7.0

package/dist/themes/PrintBW.svelte

@@ -0,0 +1,111 @@
+<script>
+	import Willow from "./Willow.svelte";
+	let { fonts = true, children } = $props();
+</script>
+
+{#if children}
+	<Willow {fonts}>
+		<div class="wx-bw-theme">
+			{@render children()}
+		</div>
+	</Willow>
+{:else}
+	<Willow {fonts} />
+{/if}
+
+<style>
+	:global {
+		.wx-bw-theme {
+			height: 100%;
+			width: 100%;
+			box-sizing: border-box;
+
+			/* base palette - black with gray shades for print legibility */
+			--wx-background: #ffffff;
+			--wx-background-alt: #ffffff;
+			--wx-background-hover: transparent;
+			--wx-color-font: #000000;
+			--wx-color-font-alt: #555555;
+			--wx-color-font-disabled: #888888;
+			--wx-color-primary: #000000;
+			--wx-color-primary-font: #000000;
+			--wx-color-primary-selected: transparent;
+			--wx-color-secondary-hover: transparent;
+			--wx-color-link: #000000;
+			--wx-color-danger: #000000;
+			--wx-icon-color: #000000;
+
+			/* calendar surfaces */
+			--wx-calendar-grid-color: #999999;
+			--wx-calendar-weekend-background: #f2f2f2;
+		}
+
+		.wx-bw-theme .wx-calendar,
+		.wx-bw-theme .wx-calendar-content,
+		.wx-bw-theme .wx-calendar-main,
+		.wx-bw-theme .wx-calendar-sidebar,
+		.wx-bw-theme .wx-scroll-grid,
+		.wx-bw-theme .wx-scroll-inner,
+		.wx-bw-theme .wx-sections,
+		.wx-bw-theme .wx-section {
+			background: #ffffff;
+		}
+
+		/* events - white body, gray outline; grayscale neutralizes any custom fill */
+		.wx-bw-theme .wx-bar-event:not(.wx-bar-single-day),
+		.wx-bw-theme .wx-box-event {
+			background-color: #ffffff;
+			color: #000000;
+			border: 1px solid #999999;
+			box-shadow: none;
+			break-inside: avoid;
+			filter: grayscale(1);
+		}
+
+		.wx-bw-theme .wx-bar-event:hover,
+		.wx-bw-theme .wx-box-event:hover {
+			box-shadow: none;
+			opacity: 1;
+		}
+
+		.wx-bw-theme .wx-bar-single-day,
+		.wx-bw-theme .wx-list-event,
+		.wx-bw-theme .wx-event-dot,
+		.wx-bw-theme .wx-bar-marker {
+			filter: grayscale(1);
+		}
+
+		.wx-bw-theme .wx-bar-single-day:hover {
+			background-color: transparent;
+		}
+
+		/* now-line reads as a dashed black rule without color */
+		.wx-bw-theme .wx-now-line::after {
+			background: #000000;
+		}
+
+		.wx-bw-theme .wx-now-dot {
+			background: #000000;
+		}
+
+		/* today marker - outline the day number instead of filling it */
+		.wx-bw-theme .wx-month-day.wx-today .wx-day-num {
+			background: #ffffff;
+			color: #000000;
+			border: 1px solid #000000;
+		}
+
+		.wx-bw-theme .wx-event-placeholder {
+			background: transparent;
+			border: 1px dashed #000000;
+		}
+
+		.wx-bw-theme .wx-list-event:hover {
+			background-color: transparent;
+		}
+
+		.wx-bw-theme .wx-navigation button {
+			display: none;
+		}
+	}
+</style>

package/dist/themes/PrintBW.svelte.d.ts

@@ -0,0 +1,13 @@
+export default PrintBW;
+type PrintBW = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const PrintBW: import("svelte").Component<{
+    fonts?: boolean;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    fonts?: boolean;
+    children: any;
+};

package/dist/{components/types.d.ts → types.d.ts}

@@ -4,6 +4,10 @@ export type ViewOption = {
     id: string;
     label: string;
 };
+export type CalendarPoint = {
+    clientX: number;
+    clientY: number;
+};
 type CalendarEventBus = EventBus<StoreActions, keyof StoreActions>;
 type CalendarApi = {
     getState: CalendarStore["getState"];
@@ -14,6 +18,7 @@ type CalendarApi = {
 };
 export type CalendarContextApi = CalendarApi & {
     getBrandmark: () => Brandmark | null;
+    isSmall: () => boolean;
 };
 export type CalendarInstanceApi = CalendarApi & {
     getStores: () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svar-ui/svelte-calendar",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "SVAR UI Event Calendar widget",
   "homepage": "https://svar.dev/svelte/calendar/",
   "bugs": {
@@ -27,34 +27,34 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@svar-ui/core-locales": "2.5.0",
-    "@svar-ui/lib-dom": "0.12.1",
-    "@svar-ui/lib-state": "1.9.6",
-    "@svar-ui/svelte-core": "2.5.3",
-    "@svar-ui/svelte-editor": "2.5.3",
-    "@svar-ui/svelte-layout": "2.5.0",
-    "@svar-ui/svelte-menu": "2.5.3",
-    "@svar-ui/svelte-toolbar": "2.5.3",
+    "@svar-ui/core-locales": "2.6.1",
+    "@svar-ui/lib-dom": "0.14.0",
+    "@svar-ui/lib-state": "1.9.7",
+    "@svar-ui/svelte-core": "2.6.1",
+    "@svar-ui/svelte-editor": "2.7.0",
+    "@svar-ui/svelte-menu": "2.6.1",
+    "@svar-ui/svelte-toolbar": "2.6.1",
     "svelte-check": "^4.4.6",
-    "@svar-ui/calendar-locales": "2.6.0",
-    "@svar-ui/calendar-provider": "2.6.0",
-    "@svar-ui/calendar-store": "2.6.0",
-    "@svar-ui/calendar-ical": "2.6.0"
+    "@svar-ui/calendar-ical": "2.7.0",
+    "@svar-ui/calendar-store": "2.7.0",
+    "@svar-ui/calendar-locales": "2.7.0",
+    "@svar-ui/calendar-provider": "2.7.0"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^7.0.0",
-    "svelte": "^5.54.0"
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "svelte": "^5.54.0",
+    "svelte-check": "^4.4.6"
   },
   "peerDependencies": {
     "svelte": "^5.54.0"
   },
-  "productTag": "calendar",
   "scripts": {
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "build": "svelte-package -i ./src",
+    "build:export": "vp build --mode export",
     "lint": "vp lint ./demos ./src",
     "start": "vp dev --open",
-    "watch": "svelte-package -i ./src --watch"
+    "dev": "svelte-package -i ./src --watch"
   }
 }

package/readme.md

@@ -18,9 +18,9 @@
 
 </div>
 
-[SVAR Svelte Calendar](https://svar.dev/svelte/calendar/) is an interactive event calendar and scheduler component for Svelte and SvelteKit apps. It supports Day, Week, and Month views, drag-and-drop event editing, a ready-to-use event edit form, and rich customization options. 
+[SVAR Svelte Calendar](https://svar.dev/svelte/calendar/) is an interactive event calendar and scheduler component for Svelte and SvelteKit apps. It supports Day, Week, and Month views, drag-and-drop event editing, a ready-to-use event edit form, and rich customization options.
 
-The calendar comes with full TypeScript support, extensible API, and flexible CSS styling. The PRO Edition offers additional views (Year, Agenda, Timeline, Resources) and recurring event support. 
+The calendar comes with full TypeScript support, extensible API, and flexible CSS styling. The PRO Edition offers additional views (Year, Agenda, Timeline, Resources) and recurring event support.
 
 <div align="center">
 <img src="https://svar.dev/images/github/github-calendar.gif" alt="SVAR Svelte Calendar Preview">

package/dist/Demo.svelte

@@ -1,7 +0,0 @@
-<script>
-    import { Calendar, Willow } from "./index.js";
-</script>
-
-<Willow>
-    <Calendar />
-</Willow>

package/dist/Demo.svelte.d.ts

@@ -1,26 +0,0 @@
-export default Demo;
-type Demo = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Demo: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/components/editorItems.d.ts

@@ -1,15 +0,0 @@
-export declare function getEditorItems(): ({
-    comp: string;
-    key: string;
-    label: string;
-    time?: undefined;
-    config?: undefined;
-} | {
-    comp: string;
-    key: string;
-    label: string;
-    time: boolean;
-    config: {
-        buttons: boolean;
-    };
-})[];

package/dist/components/editorItems.js

@@ -1,20 +0,0 @@
-export function getEditorItems() {
-    return [
-        { comp: "text", key: "text", label: "Text" },
-        {
-            comp: "date-time-picker",
-            key: "start",
-            label: "Start date",
-            time: true,
-            config: { buttons: false },
-        },
-        {
-            comp: "date-time-picker",
-            key: "end",
-            label: "End date",
-            time: true,
-            config: { buttons: false },
-        },
-        { comp: "checkbox", key: "allDay", label: "All day" },
-    ];
-}

package/dist/init.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/init.js

@@ -1,5 +0,0 @@
-import { mount } from "svelte";
-import Demo from "./Demo.svelte";
-mount(Demo, {
-    target: document.querySelector("#wx_demo_area") || document.body,
-});