loon-bulma-react 2023.0.8 → 2023.0.10

package/README.md

@@ -29,6 +29,7 @@
   - [Button & ButtonGroup](#component-button)
   - [Calendar](#components-calendar)
     - [MonthView](#components-calendar-monthview)
+    - [FourweeksView](#components-calendar-fourweeksview)
     - [WeekView](#components-calendar-weekview)
   - [DataTable](#component-datatable)
   - [Icons (FontAwesome)](#component-icons)
@@ -579,7 +580,7 @@ export type BaseEventProps = {
 };
 ```
 
-Op dit moment zijn er een `MonthView`-component en een `WeekView`-component.
+Op dit moment zijn er een `MonthView`-component, een `FourweeksView`-component en een `WeekView`-component.
 
 De opties voor het instellen van de calendar zijn:
 
@@ -638,6 +639,23 @@ Deze component toont een maand + de rest van de weken die maar deels in een maan
 </>
 ```
 
+##### MonthView <a id="components-calendar-fourweeksview"></a>
+
+Deze component toont een periode van 4 weken die hetzelfde periodenummer aanhgouden. De periode wordt getoond in een grid-view.
+
+```tsx
+<>
+  <Calendar.Fourweeks
+    events={events}
+    viewDate={viewDate}
+    options={options}
+    onEventClick={(evt, clck) => console.log(evt, clck)}
+    onDayClick={(evt, clck) => console.log(evt, clck)}
+    onShowMore={(evt) => <p>Show some JSX</p>}
+  />
+</>
+```
+
 ##### WeekView <A id="components-calendar-weekview"></a>
 
 Deze component toont een week. In plaats van een cel per dag werkt deze met cellen per uur per dag.

package/dist/components/Calendar/DayContainer.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { BaseEventProps, CalendarOptions } from './Props';
+import { JSDateTime } from '~/utils';
+declare type DayContainerProps<T extends BaseEventProps> = {
+    /** events op deze dag */
+    events: T[];
+    /** wat te doen als een event aangeklikt wordt */
+    onEventClick?: (event: T, clickEvent: React.MouseEvent<HTMLElement>) => void;
+    /** wat te doen als een dag aangeklikt wordt */
+    onDayClick?: (date: JSDateTime, clickEvent: React.MouseEvent<HTMLElement>) => void;
+    /** opties voor deze container */
+    options?: CalendarOptions<T>;
+    /** de datum voor de container */
+    date: JSDateTime;
+};
+/**
+ * Component voor de dag-container in de maand-view
+ * @param props
+ * @returns
+ */
+export declare function DayContainer<T extends BaseEventProps>({ options, date, onDayClick, onEventClick, events, }: DayContainerProps<T>): JSX.Element;
+export {};

package/dist/components/Calendar/Fourweeks/DayContainer.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { BaseEventProps, CalendarOptions } from '../Props';
+import { JSDateTime } from '~/utils';
+declare type DayContainerProps<T extends BaseEventProps> = {
+    /** events op deze dag */
+    events: T[];
+    /** wat te doen als een event aangeklikt wordt */
+    onEventClick?: (event: T, clickEvent: React.MouseEvent<HTMLElement>) => void;
+    /** wat te doen als een dag aangeklikt wordt */
+    onDayClick?: (date: JSDateTime, clickEvent: React.MouseEvent<HTMLElement>) => void;
+    /** opties voor deze container */
+    options?: CalendarOptions<T>;
+    /** de datum voor de container */
+    date: JSDateTime;
+};
+/**
+ * Component voor de dag-container in de maand-view
+ * @param props
+ * @returns
+ */
+export declare function DayContainer<T extends BaseEventProps>({ options, date, onDayClick, onEventClick, events, }: DayContainerProps<T>): JSX.Element;
+export {};

package/dist/components/Calendar/Fourweeks/FourweeksView.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { JSDateTime } from '~/utils';
+import { BaseEventProps, CalendarOptions } from '../Props';
+declare type FourweekViewProps<T extends BaseEventProps> = {
+    /** events voor deze view */
+    events: T[];
+    /** opties voor deze view */
+    options?: CalendarOptions<T>;
+    /** event aangeklikt */
+    onEventClick?: (e: T, event: React.MouseEvent<HTMLElement>) => void;
+    /** dag-datum geklikt? */
+    onDayClick?: (date: JSDateTime, event: React.MouseEvent<HTMLElement>) => void;
+    /** huidige geselecteerde datum */
+    viewDate: Date | JSDateTime;
+};
+/**
+ * maak een vierweken-view (grid) met events
+ * @param props
+ * @returns
+ */
+declare function FourweeksView<T extends BaseEventProps>({ viewDate: vd, options, onEventClick, onDayClick, events: orgEvents, }: FourweekViewProps<T>): JSX.Element;
+export { FourweeksView };
+export type { FourweekViewProps };

package/dist/components/Calendar/Fourweeks/MonthView.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { JSDateTime } from '~/utils';
+import { BaseEventProps, CalendarOptions } from '../Props';
+declare type FourweekViewProps<T extends BaseEventProps> = {
+    /** events voor deze view */
+    events: T[];
+    /** opties voor deze view */
+    options?: CalendarOptions<T>;
+    /** event aangeklikt */
+    onEventClick?: (e: T, event: React.MouseEvent<HTMLElement>) => void;
+    /** dag-datum geklikt? */
+    onDayClick?: (date: JSDateTime, event: React.MouseEvent<HTMLElement>) => void;
+    /** huidige geselecteerde datum */
+    viewDate: Date | JSDateTime;
+};
+/**
+ * maak een maand-view (grid) met events
+ * @param props
+ * @returns
+ */
+declare function FourweeksView<T extends BaseEventProps>({ viewDate: vd, options, onEventClick, onDayClick, events: orgEvents, }: FourweekViewProps<T>): JSX.Element;
+export { FourweeksView };
+export type { FourweekViewProps };

package/dist/components/Calendar/Fourweeks/MoreEvents.d.ts

@@ -0,0 +1,20 @@
+import { MouseEvent } from 'react';
+import { BaseEventProps, EventOptions } from '../Props';
+declare type MoreEventsViewProps<T extends BaseEventProps> = {
+    /** de events op deze dag */
+    events: T[];
+    /** event-click handling */
+    onEventClick?: (event: T, clickEvent: MouseEvent<HTMLElement>) => void;
+    /** global event options */
+    options?: {
+        allday?: EventOptions<T>;
+        timed?: EventOptions<T>;
+    };
+};
+/**
+ * expandable events als er meer dan 5 events op een dag vallen
+ * @param props
+ * @returns
+ */
+export declare function MoreEventsView<T extends BaseEventProps>({ events, onEventClick, options, }: MoreEventsViewProps<T>): JSX.Element;
+export {};

package/dist/components/Calendar/Week/WeekView.d.ts

@@ -19,6 +19,6 @@ declare type WeekViewProps<T extends BaseEventProps> = {
  * @returns een weekview (grid) met de events
  * @ex
  */
-declare function WeekView<T extends BaseEventProps>(props: WeekViewProps<T>): JSX.Element;
+declare function WeekView<T extends BaseEventProps>({ viewDate: vd, options, onEventClick, events: orgEvents, onDayClick, }: WeekViewProps<T>): JSX.Element;
 export { WeekView };
 export type { WeekViewProps };

package/dist/components/Calendar/index.d.ts

@@ -1,8 +1,10 @@
+import { FourweeksView } from "./Fourweeks/FourweeksView";
 import { MonthView, MonthViewProps } from "./Month/MonthView";
 import { WeekView, WeekViewProps } from "./Week/WeekView";
 declare const Calendar: {
     Month: typeof MonthView;
     Week: typeof WeekView;
+    Fourweeks: typeof FourweeksView;
 };
 export { Calendar };
 export type { WeekViewProps, MonthViewProps };

package/dist/components/Tag/Tag.d.ts

@@ -26,7 +26,7 @@ export declare type TagsProps = {
     /** alignment van de tags (default = 'l') */
     alignment?: AlignmentProp;
     /** extra classes op de tags container  */
-    className?: string | (() => string);
+    className?: string;
 };
 /**
  * Maak een tag
@@ -36,7 +36,7 @@ export declare type TagsProps = {
  * <Tag>Hello</Tag>
  * <Tag color='d'>Danger</Tag>
  */
-export declare function Tag(props: TagProps): JSX.Element;
+export declare function Tag({ children, color, size, light, rounded, tooltip, onDismiss }: TagProps): JSX.Element;
 /**
  * Maak een tag-container aan. De tags kunnen aan elkaar geplakt worden of niet.
  * De grootte van de tags kan ook ingesteld worden
@@ -48,4 +48,4 @@ export declare function Tag(props: TagProps): JSX.Element;
  *   <Tag color="i">Tag 2</Tag>
  * </Tags>
  */
-export declare function Tags(props: TagsProps): JSX.Element;
+export declare function Tags({ children, merged, size, alignment, className }: TagsProps): JSX.Element;

package/dist/components/Titles/Titles.d.ts

@@ -28,6 +28,8 @@ declare type TitleWithSubtitleProps = {
     bulmaSize?: '1' | '2' | '3' | '4' | '5' | '6' | number;
     /** de heading grootte: h1, h2, h3, h4, h5 of h6 */
     headingSize?: '1' | '2' | '3' | '4' | '5' | '6' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | undefined | number;
+    /** (optionele) classes op de omringende container */
+    className?: string;
 };
 /**
  * Maak een heading. @see {@link TitleWithSubtitle} voor een combinatie met een subtitle.
@@ -55,6 +57,6 @@ declare function Subtitle(props: SubtitleProps): JSX.Element;
  * @returns een title met daaronder een subtitle.
  * @example <TitleWithSubtitle titleTxt="Title" subtitleTxt="Subtitle" bulmaSize={1} headingSize={3} />
  */
-declare function TitleWithSubtitle(props: TitleWithSubtitleProps): JSX.Element;
+declare function TitleWithSubtitle({ bulmaSize: bulmaSizeVal, headingSize, titleTxt, subtitleTxt, className, }: TitleWithSubtitleProps): JSX.Element;
 export { Title, Subtitle, TitleWithSubtitle };
 export type { TitleProps, SubtitleProps, TitleWithSubtitleProps };

package/dist/forms/shared/InputError.d.ts

@@ -8,5 +8,5 @@ declare type InputErrorProps = {
     touched?: boolean;
 };
 /** Toon een erorr bij een input */
-declare const InputError: (props: InputErrorProps) => JSX.Element | null;
+declare const InputError: ({ stateError, outsideError, touched }: InputErrorProps) => JSX.Element | null;
 export { InputError };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export type { SizeProp, AlignmentProp, DirectionProp } from './loon-react-bulma-types';
+export * from './loon-react-bulma-types';
 export * from './components';
 export * from './forms';
 export * from './contexts';