@dayflow/plugin-sidebar 1.1.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.d.ts +0 -2
  2. package/dist/index.esm.js +31 -31
  3. package/dist/index.js +30 -30
  4. package/dist/types/DefaultCalendarSidebar.d.ts +1 -1
  5. package/dist/types/plugin.d.ts +0 -2
  6. package/package.json +3 -3
package/dist/index.d.ts CHANGED
@@ -13,14 +13,12 @@ interface CalendarSidebarRenderProps {
13
13
  editingCalendarId?: string | null;
14
14
  setEditingCalendarId?: (id: string | null) => void;
15
15
  onCreateCalendar?: () => void;
16
- colorPickerMode?: 'default' | 'custom';
17
16
  }
18
17
  interface SidebarPluginConfig {
19
18
  width?: number | string;
20
19
  miniWidth?: string;
21
20
  initialCollapsed?: boolean;
22
21
  createCalendarMode?: 'inline' | 'modal';
23
- colorPickerMode?: 'default' | 'custom';
24
22
  render?: (props: CalendarSidebarRenderProps) => TNode;
25
23
  renderCalendarContextMenu?: (calendar: CalendarType, onClose: () => void) => TNode;
26
24
  renderCreateCalendarDialog?: (props: CreateCalendarDialogProps) => TNode;
package/dist/index.esm.js CHANGED
@@ -1,4 +1,4 @@
1
- import { useLocale, createPortal, cancelButton, ChevronsUpDown, Check, ChevronRight, sidebarHeader, sidebarHeaderToggle, PanelRightClose, PanelRightOpen, sidebarHeaderTitle, getCalendarColorsForHex, generateUniKey, downloadICS, MiniCalendar, ContextMenu, ContentSlot, ContextMenuLabel, ContextMenuItem, ContextMenuSeparator, ContextMenuColorPicker, BlossomColorPicker, DefaultColorPicker, importICSFile, sidebarContainer, normalizeCssWidth, registerSidebarImplementation, CreateCalendarDialog } from '@dayflow/core';
1
+ import { useLocale, createPortal, cancelButton, ChevronsUpDown, Check, ChevronRight, sidebarHeader, sidebarHeaderToggle, PanelRightClose, PanelRightOpen, sidebarHeaderTitle, getCalendarColorsForHex, generateUniKey, downloadICS, MiniCalendar, ContextMenu, ContentSlot, ContextMenuLabel, ContextMenuItem, ContextMenuSeparator, ContextMenuColorPicker, DefaultColorPicker, BlossomColorPicker, importICSFile, sidebarContainer, normalizeCssWidth, registerSidebarImplementation, CreateCalendarDialog } from '@dayflow/core';
2
2
  import { options, Fragment, h } from 'preact';
3
3
  import { useState, useRef, useCallback, useEffect, useMemo } from 'preact/hooks';
4
4
  import { hexToHsl, lightnessToSliderValue } from '@dayflow/blossom-color-picker';
@@ -302,9 +302,11 @@ const SidebarHeader = ({ isCollapsed, onCollapseToggle, }) => {
302
302
  return (u("div", { className: sidebarHeader, children: [u("button", { type: 'button', "aria-label": isCollapsed ? t('expandSidebar') : t('collapseSidebar'), className: sidebarHeaderToggle, onClick: onCollapseToggle, children: isCollapsed ? (u(PanelRightClose, { className: 'h-4 w-4 text-gray-500 dark:text-gray-400' })) : (u(PanelRightOpen, { className: 'h-4 w-4 text-gray-500 dark:text-gray-400' })) }), !isCollapsed && (u("div", { className: 'ml-3 flex flex-1 items-center justify-between', children: u("span", { className: sidebarHeaderTitle, children: t('calendars') }) }))] }));
303
303
  };
304
304
 
305
- const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCollapsed, setCollapsed, renderCalendarContextMenu, editingCalendarId: propEditingCalendarId, setEditingCalendarId: propSetEditingCalendarId, onCreateCalendar, colorPickerMode = 'default', }) => {
305
+ const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCollapsed, setCollapsed, renderCalendarContextMenu, editingCalendarId: propEditingCalendarId, setEditingCalendarId: propSetEditingCalendarId, onCreateCalendar, }) => {
306
306
  var _a, _b, _c, _d;
307
307
  const { t } = useLocale();
308
+ // Detect if custom color picker slot is provided
309
+ const hasCustomPicker = app.state.overrides.includes('colorPicker');
308
310
  const [localEditingCalendarId, setLocalEditingCalendarId] = useState(null);
309
311
  const editingCalendarId = propEditingCalendarId === undefined
310
312
  ? localEditingCalendarId
@@ -565,21 +567,12 @@ const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCo
565
567
  createPortal(u("div", { className: 'fixed inset-0 z-50', onMouseDown: () => {
566
568
  app.updateCalendar(customColorPicker.calendarId, {});
567
569
  setCustomColorPicker(null);
568
- }, children: u("div", { className: 'absolute flex items-center justify-center', style: {
570
+ }, children: u("div", { className: 'absolute', style: {
569
571
  top: customColorPicker.y,
570
572
  left: customColorPicker.x,
571
- transform: 'translate(280%, -50%)',
572
- }, onMouseDown: e => e.stopPropagation(), children: colorPickerMode === 'custom' ? (u(BlossomColorPicker, { defaultValue: customColorPicker.initialColor, coreSize: 28, petalSize: 28, initialExpanded: true, adaptivePositioning: true, openOnHover: false, onChange: color => {
573
- const { colors, darkColors } = getCalendarColorsForHex(color.hex);
574
- app.updateCalendar(customColorPicker.calendarId, {
575
- colors,
576
- darkColors,
577
- }, true);
578
- }, onCollapse: () => {
579
- app.updateCalendar(customColorPicker.calendarId, {});
580
- setCustomColorPicker(null);
581
- } })) : (u(ContentSlot, { generatorName: 'colorPicker', generatorArgs: {
582
- variant: 'sketch', // Pending: change name
573
+ zIndex: 10002,
574
+ transform: 'translate(40px, -50%)', // Move it to the right of the checkbox/dot
575
+ }, onMouseDown: e => e.stopPropagation(), children: hasCustomPicker ? (u(ContentSlot, { generatorName: 'colorPicker', generatorArgs: {
583
576
  color: customColorPicker.currentColor,
584
577
  onChange: (color) => {
585
578
  setCustomColorPicker(prev => prev ? Object.assign(Object.assign({}, prev), { currentColor: color.hex }) : null);
@@ -596,17 +589,26 @@ const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCo
596
589
  darkColors,
597
590
  });
598
591
  },
599
- }, defaultContent: u(DefaultColorPicker, { color: customColorPicker.currentColor, onChange: (color, isPending) => {
600
- setCustomColorPicker(prev => prev ? Object.assign(Object.assign({}, prev), { currentColor: color.hex }) : null);
601
- const { colors, darkColors } = getCalendarColorsForHex(color.hex);
602
- app.updateCalendar(customColorPicker.calendarId, {
603
- colors,
604
- darkColors,
605
- }, isPending);
606
- }, onClose: () => {
607
- app.updateCalendar(customColorPicker.calendarId, {});
608
- setCustomColorPicker(null);
609
- } }) })) }) }), document.body)] }));
592
+ }, defaultContent: u("div", { className: 'rounded-lg border border-gray-200 bg-white p-3 shadow-xl dark:border-gray-700 dark:bg-slate-900', children: u(DefaultColorPicker, { color: customColorPicker.currentColor, onChange: (color, isPending) => {
593
+ setCustomColorPicker(prev => prev ? Object.assign(Object.assign({}, prev), { currentColor: color.hex }) : null);
594
+ const { colors, darkColors } = getCalendarColorsForHex(color.hex);
595
+ app.updateCalendar(customColorPicker.calendarId, {
596
+ colors,
597
+ darkColors,
598
+ }, isPending);
599
+ }, onClose: () => {
600
+ app.updateCalendar(customColorPicker.calendarId, {});
601
+ setCustomColorPicker(null);
602
+ } }) }) })) : (u(BlossomColorPicker, { defaultValue: customColorPicker.initialColor, coreSize: 28, petalSize: 28, initialExpanded: true, adaptivePositioning: true, openOnHover: false, onChange: color => {
603
+ const { colors, darkColors } = getCalendarColorsForHex(color.hex);
604
+ app.updateCalendar(customColorPicker.calendarId, {
605
+ colors,
606
+ darkColors,
607
+ }, true);
608
+ }, onCollapse: () => {
609
+ app.updateCalendar(customColorPicker.calendarId, {});
610
+ setCustomColorPicker(null);
611
+ } })) }) }), document.body)] }));
610
612
  };
611
613
 
612
614
  const DEFAULT_SIDEBAR_WIDTH = '240px';
@@ -681,7 +683,6 @@ function createSidebarPlugin(config = {}) {
681
683
  editingCalendarId,
682
684
  setEditingCalendarId,
683
685
  onCreateCalendar: handleCreateCalendar,
684
- colorPickerMode: config.colorPickerMode,
685
686
  }), [
686
687
  app,
687
688
  calendars,
@@ -693,14 +694,13 @@ function createSidebarPlugin(config = {}) {
693
694
  config,
694
695
  ]);
695
696
  const renderContent = () => {
696
- var _a;
697
697
  if (config.render) {
698
698
  return h(ContentSlot, {
699
699
  generatorName: 'sidebar',
700
700
  generatorArgs: sidebarProps,
701
701
  });
702
702
  }
703
- return h(DefaultCalendarSidebar, Object.assign(Object.assign({}, sidebarProps), { colorPickerMode: (_a = config.colorPickerMode) !== null && _a !== void 0 ? _a : sidebarProps.colorPickerMode }));
703
+ return h(DefaultCalendarSidebar, Object.assign({}, sidebarProps));
704
704
  };
705
705
  const renderExtraContent = () => {
706
706
  if (!showCreateDialog)
@@ -714,7 +714,7 @@ function createSidebarPlugin(config = {}) {
714
714
  const generatorArgs = {
715
715
  onClose,
716
716
  onCreate,
717
- colorPickerMode: config.colorPickerMode,
717
+ app,
718
718
  };
719
719
  return h(ContentSlot, {
720
720
  generatorName: 'createCalendarDialog',
@@ -722,7 +722,7 @@ function createSidebarPlugin(config = {}) {
722
722
  defaultContent: h(CreateCalendarDialog, {
723
723
  onClose,
724
724
  onCreate,
725
- colorPickerMode: config.colorPickerMode,
725
+ app,
726
726
  }),
727
727
  });
728
728
  };
package/dist/index.js CHANGED
@@ -304,9 +304,11 @@ const SidebarHeader = ({ isCollapsed, onCollapseToggle, }) => {
304
304
  return (u("div", { className: core.sidebarHeader, children: [u("button", { type: 'button', "aria-label": isCollapsed ? t('expandSidebar') : t('collapseSidebar'), className: core.sidebarHeaderToggle, onClick: onCollapseToggle, children: isCollapsed ? (u(core.PanelRightClose, { className: 'h-4 w-4 text-gray-500 dark:text-gray-400' })) : (u(core.PanelRightOpen, { className: 'h-4 w-4 text-gray-500 dark:text-gray-400' })) }), !isCollapsed && (u("div", { className: 'ml-3 flex flex-1 items-center justify-between', children: u("span", { className: core.sidebarHeaderTitle, children: t('calendars') }) }))] }));
305
305
  };
306
306
 
307
- const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCollapsed, setCollapsed, renderCalendarContextMenu, editingCalendarId: propEditingCalendarId, setEditingCalendarId: propSetEditingCalendarId, onCreateCalendar, colorPickerMode = 'default', }) => {
307
+ const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCollapsed, setCollapsed, renderCalendarContextMenu, editingCalendarId: propEditingCalendarId, setEditingCalendarId: propSetEditingCalendarId, onCreateCalendar, }) => {
308
308
  var _a, _b, _c, _d;
309
309
  const { t } = core.useLocale();
310
+ // Detect if custom color picker slot is provided
311
+ const hasCustomPicker = app.state.overrides.includes('colorPicker');
310
312
  const [localEditingCalendarId, setLocalEditingCalendarId] = hooks.useState(null);
311
313
  const editingCalendarId = propEditingCalendarId === undefined
312
314
  ? localEditingCalendarId
@@ -567,21 +569,12 @@ const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCo
567
569
  core.createPortal(u("div", { className: 'fixed inset-0 z-50', onMouseDown: () => {
568
570
  app.updateCalendar(customColorPicker.calendarId, {});
569
571
  setCustomColorPicker(null);
570
- }, children: u("div", { className: 'absolute flex items-center justify-center', style: {
572
+ }, children: u("div", { className: 'absolute', style: {
571
573
  top: customColorPicker.y,
572
574
  left: customColorPicker.x,
573
- transform: 'translate(280%, -50%)',
574
- }, onMouseDown: e => e.stopPropagation(), children: colorPickerMode === 'custom' ? (u(core.BlossomColorPicker, { defaultValue: customColorPicker.initialColor, coreSize: 28, petalSize: 28, initialExpanded: true, adaptivePositioning: true, openOnHover: false, onChange: color => {
575
- const { colors, darkColors } = core.getCalendarColorsForHex(color.hex);
576
- app.updateCalendar(customColorPicker.calendarId, {
577
- colors,
578
- darkColors,
579
- }, true);
580
- }, onCollapse: () => {
581
- app.updateCalendar(customColorPicker.calendarId, {});
582
- setCustomColorPicker(null);
583
- } })) : (u(core.ContentSlot, { generatorName: 'colorPicker', generatorArgs: {
584
- variant: 'sketch', // Pending: change name
575
+ zIndex: 10002,
576
+ transform: 'translate(40px, -50%)', // Move it to the right of the checkbox/dot
577
+ }, onMouseDown: e => e.stopPropagation(), children: hasCustomPicker ? (u(core.ContentSlot, { generatorName: 'colorPicker', generatorArgs: {
585
578
  color: customColorPicker.currentColor,
586
579
  onChange: (color) => {
587
580
  setCustomColorPicker(prev => prev ? Object.assign(Object.assign({}, prev), { currentColor: color.hex }) : null);
@@ -598,17 +591,26 @@ const DefaultCalendarSidebar = ({ app, calendars, toggleCalendarVisibility, isCo
598
591
  darkColors,
599
592
  });
600
593
  },
601
- }, defaultContent: u(core.DefaultColorPicker, { color: customColorPicker.currentColor, onChange: (color, isPending) => {
602
- setCustomColorPicker(prev => prev ? Object.assign(Object.assign({}, prev), { currentColor: color.hex }) : null);
603
- const { colors, darkColors } = core.getCalendarColorsForHex(color.hex);
604
- app.updateCalendar(customColorPicker.calendarId, {
605
- colors,
606
- darkColors,
607
- }, isPending);
608
- }, onClose: () => {
609
- app.updateCalendar(customColorPicker.calendarId, {});
610
- setCustomColorPicker(null);
611
- } }) })) }) }), document.body)] }));
594
+ }, defaultContent: u("div", { className: 'rounded-lg border border-gray-200 bg-white p-3 shadow-xl dark:border-gray-700 dark:bg-slate-900', children: u(core.DefaultColorPicker, { color: customColorPicker.currentColor, onChange: (color, isPending) => {
595
+ setCustomColorPicker(prev => prev ? Object.assign(Object.assign({}, prev), { currentColor: color.hex }) : null);
596
+ const { colors, darkColors } = core.getCalendarColorsForHex(color.hex);
597
+ app.updateCalendar(customColorPicker.calendarId, {
598
+ colors,
599
+ darkColors,
600
+ }, isPending);
601
+ }, onClose: () => {
602
+ app.updateCalendar(customColorPicker.calendarId, {});
603
+ setCustomColorPicker(null);
604
+ } }) }) })) : (u(core.BlossomColorPicker, { defaultValue: customColorPicker.initialColor, coreSize: 28, petalSize: 28, initialExpanded: true, adaptivePositioning: true, openOnHover: false, onChange: color => {
605
+ const { colors, darkColors } = core.getCalendarColorsForHex(color.hex);
606
+ app.updateCalendar(customColorPicker.calendarId, {
607
+ colors,
608
+ darkColors,
609
+ }, true);
610
+ }, onCollapse: () => {
611
+ app.updateCalendar(customColorPicker.calendarId, {});
612
+ setCustomColorPicker(null);
613
+ } })) }) }), document.body)] }));
612
614
  };
613
615
 
614
616
  const DEFAULT_SIDEBAR_WIDTH = '240px';
@@ -683,7 +685,6 @@ function createSidebarPlugin(config = {}) {
683
685
  editingCalendarId,
684
686
  setEditingCalendarId,
685
687
  onCreateCalendar: handleCreateCalendar,
686
- colorPickerMode: config.colorPickerMode,
687
688
  }), [
688
689
  app,
689
690
  calendars,
@@ -695,14 +696,13 @@ function createSidebarPlugin(config = {}) {
695
696
  config,
696
697
  ]);
697
698
  const renderContent = () => {
698
- var _a;
699
699
  if (config.render) {
700
700
  return preact.h(core.ContentSlot, {
701
701
  generatorName: 'sidebar',
702
702
  generatorArgs: sidebarProps,
703
703
  });
704
704
  }
705
- return preact.h(DefaultCalendarSidebar, Object.assign(Object.assign({}, sidebarProps), { colorPickerMode: (_a = config.colorPickerMode) !== null && _a !== void 0 ? _a : sidebarProps.colorPickerMode }));
705
+ return preact.h(DefaultCalendarSidebar, Object.assign({}, sidebarProps));
706
706
  };
707
707
  const renderExtraContent = () => {
708
708
  if (!showCreateDialog)
@@ -716,7 +716,7 @@ function createSidebarPlugin(config = {}) {
716
716
  const generatorArgs = {
717
717
  onClose,
718
718
  onCreate,
719
- colorPickerMode: config.colorPickerMode,
719
+ app,
720
720
  };
721
721
  return preact.h(core.ContentSlot, {
722
722
  generatorName: 'createCalendarDialog',
@@ -724,7 +724,7 @@ function createSidebarPlugin(config = {}) {
724
724
  defaultContent: preact.h(core.CreateCalendarDialog, {
725
725
  onClose,
726
726
  onCreate,
727
- colorPickerMode: config.colorPickerMode,
727
+ app,
728
728
  }),
729
729
  });
730
730
  };
package/dist/types/DefaultCalendarSidebar.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import { JSX } from 'preact';
2
2
  import type { CalendarSidebarRenderProps } from './plugin';
3
- declare const DefaultCalendarSidebar: ({ app, calendars, toggleCalendarVisibility, isCollapsed, setCollapsed, renderCalendarContextMenu, editingCalendarId: propEditingCalendarId, setEditingCalendarId: propSetEditingCalendarId, onCreateCalendar, colorPickerMode, }: CalendarSidebarRenderProps) => JSX.Element;
3
+ declare const DefaultCalendarSidebar: ({ app, calendars, toggleCalendarVisibility, isCollapsed, setCollapsed, renderCalendarContextMenu, editingCalendarId: propEditingCalendarId, setEditingCalendarId: propSetEditingCalendarId, onCreateCalendar, }: CalendarSidebarRenderProps) => JSX.Element;
4
4
  export default DefaultCalendarSidebar;
package/dist/types/plugin.d.ts CHANGED
@@ -12,14 +12,12 @@ export interface CalendarSidebarRenderProps {
12
12
  editingCalendarId?: string | null;
13
13
  setEditingCalendarId?: (id: string | null) => void;
14
14
  onCreateCalendar?: () => void;
15
- colorPickerMode?: 'default' | 'custom';
16
15
  }
17
16
  export interface SidebarPluginConfig {
18
17
  width?: number | string;
19
18
  miniWidth?: string;
20
19
  initialCollapsed?: boolean;
21
20
  createCalendarMode?: 'inline' | 'modal';
22
- colorPickerMode?: 'default' | 'custom';
23
21
  render?: (props: CalendarSidebarRenderProps) => TNode;
24
22
  renderCalendarContextMenu?: (calendar: CalendarType, onClose: () => void) => TNode;
25
23
  renderCreateCalendarDialog?: (props: CreateCalendarDialogProps) => TNode;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dayflow/plugin-sidebar",
3
- "version": "1.1.0",
3
+ "version": "1.1.1",
4
4
  "description": "Sidebar plugin for DayFlow calendar",
5
5
  "keywords": [
6
6
  "calendar",
@@ -37,10 +37,10 @@
37
37
  "rollup-plugin-dts": "^6.3.0",
38
38
  "temporal-polyfill": "^0.3.0",
39
39
  "typescript": "^5.9.3",
40
- "@dayflow/core": "3.2.0"
40
+ "@dayflow/core": "3.2.1"
41
41
  },
42
42
  "peerDependencies": {
43
- "@dayflow/core": "3.2.0"
43
+ "@dayflow/core": "3.2.1"
44
44
  },
45
45
  "scripts": {
46
46
  "build": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json && rollup -c",