@@ -96,27 +63,22 @@ export default {
type,
size,
{
- [position]: isHorizontal,
+ [position ?? '']: isHorizontal,
'is-fullwidth': expanded,
'is-toggle-rounded is-toggle': rounded,
},
]">
diff --git a/src/components/compounds/Toast/Toaster.js b/src/components/compounds/Toast/Toaster.ts
similarity index 58%
rename from src/components/compounds/Toast/Toaster.js
rename to src/components/compounds/Toast/Toaster.ts
index 1a2e9ef..4bc1286 100644
--- a/src/components/compounds/Toast/Toaster.js
+++ b/src/components/compounds/Toast/Toaster.ts
@@ -1,8 +1,9 @@
+import type { App } from "vue";
import Toaster from "./Toaster.vue";
-import createToaster from "./api.js";
-import ToasterPositions from "./defaults/positions.js";
+import ToasterPositions from "./defaults/position";
+import createToaster from "./toast-api";
-Toaster.install = (app, options = {}) => {
+Toaster.install = (app: App, options = {}) => {
const methods = createToaster(options);
app.config.globalProperties.$toast = methods;
app.provide("$toast", methods);
diff --git a/src/components/compounds/Toast/Toaster.vue b/src/components/compounds/Toast/Toaster.vue
index cd559f8..b563a4e 100644
--- a/src/components/compounds/Toast/Toaster.vue
+++ b/src/components/compounds/Toast/Toaster.vue
@@ -8,7 +8,7 @@
-
diff --git a/src/components/compounds/Toast/api.js b/src/components/compounds/Toast/api.js
deleted file mode 100644
index 6b5f943..0000000
--- a/src/components/compounds/Toast/api.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import Toaster from "./Toaster.vue";
-import eventBus from "./helpers/event-bus.js";
-import mount from "./helpers/mount-component";
-
-const Api = (globalOptions = {}) => {
- return {
- show(message, options = {}) {
- const localOptions = { message, ...options };
- const c = mount(Toaster, {
- props: { ...globalOptions, ...localOptions },
- });
-
- return c;
- },
- clear() {
- eventBus.$emit("toast-clear");
- },
- success(message, options = {}) {
- options.type = "is-success";
- return this.show(message, options);
- },
- error(message, options = {}) {
- options.type = "is-danger";
- return this.show(message, options);
- },
- info(message, options = {}) {
- options.type = "is-info";
- return this.show(message, options);
- },
- warning(message, options = {}) {
- options.type = "is-warning";
- return this.show(message, options);
- },
- };
-};
-
-export default Api;
diff --git a/src/components/compounds/Toast/defaults/position.ts b/src/components/compounds/Toast/defaults/position.ts
new file mode 100644
index 0000000..1d200c9
--- /dev/null
+++ b/src/components/compounds/Toast/defaults/position.ts
@@ -0,0 +1,30 @@
+enum Position {
+ TOP_RIGHT = "top-right",
+ TOP = "top",
+ TOP_LEFT = "top-left",
+ BOTTOM_RIGHT = "bottom-right",
+ BOTTOM = "bottom",
+ BOTTOM_LEFT = "bottom-left",
+}
+
+export default Position;
+
+export function definePosition(position: Position, top: T, bottom: B) {
+ let result: T | B;
+ switch (position) {
+ case Position.TOP:
+ case Position.TOP_RIGHT:
+ case Position.TOP_LEFT:
+ result = top;
+ break;
+
+ case Position.BOTTOM:
+ case Position.BOTTOM_RIGHT:
+ case Position.BOTTOM_LEFT:
+ result = bottom;
+ break;
+ default:
+ result = top;
+ }
+ return result;
+}
diff --git a/src/components/compounds/Toast/defaults/positions.js b/src/components/compounds/Toast/defaults/positions.js
deleted file mode 100644
index a9fa12c..0000000
--- a/src/components/compounds/Toast/defaults/positions.js
+++ /dev/null
@@ -1,30 +0,0 @@
-const POSITIONS = {
- TOP_RIGHT: "top-right",
- TOP: "top",
- TOP_LEFT: "top-left",
- BOTTOM_RIGHT: "bottom-right",
- BOTTOM: "bottom",
- BOTTOM_LEFT: "bottom-left",
-};
-
-export default Object.freeze(POSITIONS);
-
-export function definePosition(position, top, bottom) {
- let result = null;
- switch (position) {
- case POSITIONS.TOP:
- case POSITIONS.TOP_RIGHT:
- case POSITIONS.TOP_LEFT:
- result = top;
- break;
-
- case POSITIONS.BOTTOM:
- case POSITIONS.BOTTOM_RIGHT:
- case POSITIONS.BOTTOM_LEFT:
- result = bottom;
- break;
- default:
- result = top;
- }
- return result;
-}
diff --git a/src/components/compounds/Toast/helpers/event-bus.js b/src/components/compounds/Toast/helpers/event-bus.ts
similarity index 55%
rename from src/components/compounds/Toast/helpers/event-bus.js
rename to src/components/compounds/Toast/helpers/event-bus.ts
index 4e95aa5..a571518 100644
--- a/src/components/compounds/Toast/helpers/event-bus.js
+++ b/src/components/compounds/Toast/helpers/event-bus.ts
@@ -1,16 +1,21 @@
-/* eslint-disable promise/prefer-await-to-callbacks -- ignore */
-// eslint-disable-next-line no-shadow -- ignore */
-class Event {
+// biome-ignore lint/suspicious/noExplicitAny:
+type Callback = (data?: any) => void;
+
+type Queue = Record;
+
+class EventBus {
+ queue: Queue;
+
constructor() {
this.queue = {};
}
- $on(name, callback) {
+ $on(name: string, callback: Callback) {
this.queue[name] = this.queue[name] || [];
this.queue[name].push(callback);
}
- $off(name, callback) {
+ $off(name: string, callback: Callback) {
if (this.queue[name]) {
for (let i = 0; i < this.queue[name].length; i++) {
if (this.queue[name][i] === callback) {
@@ -21,7 +26,8 @@ class Event {
}
}
- $emit(name, data) {
+ // biome-ignore lint/suspicious/noExplicitAny:
+ $emit(name: string, data?: any) {
if (this.queue[name]) {
for (const callback of this.queue[name]) {
callback(data);
@@ -30,4 +36,4 @@ class Event {
}
}
-export default new Event();
+export default new EventBus();
diff --git a/src/components/compounds/Toast/helpers/mount-component.js b/src/components/compounds/Toast/helpers/mount-component.ts
similarity index 59%
rename from src/components/compounds/Toast/helpers/mount-component.js
rename to src/components/compounds/Toast/helpers/mount-component.ts
index 56369b2..33fba5c 100644
--- a/src/components/compounds/Toast/helpers/mount-component.js
+++ b/src/components/compounds/Toast/helpers/mount-component.ts
@@ -1,12 +1,16 @@
-import { h, render } from "vue";
+import { type Component, type VNode, h, render } from "vue";
const createElement = () =>
typeof document !== "undefined" && document.createElement("div");
-const mount = (component, { props, children, element, app } = {}) => {
+const mount = (
+ component: Component,
+ // biome-ignore lint/suspicious/noExplicitAny:
+ { props, children, element, app }: any = {},
+) => {
let el = element || createElement();
- let vNode = h(component, props, children);
+ let vNode: VNode | null = h(component, props, children);
if (app?._context) {
vNode.appContext = app._context;
diff --git a/src/components/compounds/Toast/helpers/remove-element.js b/src/components/compounds/Toast/helpers/remove-element.js
deleted file mode 100644
index afb0bee..0000000
--- a/src/components/compounds/Toast/helpers/remove-element.js
+++ /dev/null
@@ -1,10 +0,0 @@
-const removeElement = (el) => {
- if (typeof el.remove !== "undefined") {
- el.remove();
- } else {
- // eslint-disable-next-line unicorn/prefer-node-remove -- ignore
- el.parentNode.removeChild(el);
- }
-};
-
-export { removeElement };
diff --git a/src/components/compounds/Toast/helpers/remove-element.ts b/src/components/compounds/Toast/helpers/remove-element.ts
new file mode 100644
index 0000000..b5ac313
--- /dev/null
+++ b/src/components/compounds/Toast/helpers/remove-element.ts
@@ -0,0 +1,9 @@
+const removeElement = (el: HTMLElement) => {
+ if (typeof el.remove !== "undefined") {
+ el.remove();
+ } else {
+ el.parentNode?.removeChild(el);
+ }
+};
+
+export { removeElement };
diff --git a/src/components/compounds/Toast/helpers/timer.js b/src/components/compounds/Toast/helpers/timer.ts
similarity index 51%
rename from src/components/compounds/Toast/helpers/timer.js
rename to src/components/compounds/Toast/helpers/timer.ts
index b67687b..e33ed66 100644
--- a/src/components/compounds/Toast/helpers/timer.js
+++ b/src/components/compounds/Toast/helpers/timer.ts
@@ -1,11 +1,18 @@
+type Callback = () => void;
+
// https://stackoverflow.com/a/3969760
export default class Timer {
- constructor(callback, delay) {
+ startedAt: number;
+ callback: Callback;
+ delay: number;
+ timer: number;
+
+ constructor(callback: Callback, delay: number) {
this.startedAt = Date.now();
this.callback = callback;
this.delay = delay;
- this.timer = setTimeout(callback, delay);
+ this.timer = window.setTimeout(callback, delay);
}
pause() {
@@ -16,10 +23,10 @@ export default class Timer {
resume() {
this.stop();
this.startedAt = Date.now();
- this.timer = setTimeout(this.callback, this.delay);
+ this.timer = window.setTimeout(this.callback, this.delay);
}
stop() {
- clearTimeout(this.timer);
+ window.clearTimeout(this.timer);
}
}
diff --git a/src/components/compounds/Toast/toast-api.ts b/src/components/compounds/Toast/toast-api.ts
new file mode 100644
index 0000000..04b3559
--- /dev/null
+++ b/src/components/compounds/Toast/toast-api.ts
@@ -0,0 +1,58 @@
+import Toaster from "./Toaster.vue";
+import type Position from "./defaults/position";
+import eventBus from "./helpers/event-bus.js";
+import mount from "./helpers/mount-component";
+
+export interface ToastOptions {
+ type?: "is-success" | "is-danger" | "is-info" | "is-warning" | "is-primary";
+ position?: Position;
+ duration?: number | false;
+ dismissible?: boolean;
+ pauseOnHover?: boolean;
+ onClose?: () => void;
+ onClick?: () => void;
+}
+
+export interface ToastGlobalOptions extends ToastOptions {
+ maxToasts?: number | false;
+ queue?: boolean;
+}
+
+export interface ToasterProps extends ToastOptions, ToastGlobalOptions {
+ message: string; // required
+}
+
+const ToastApi = (globalOptions: ToastGlobalOptions = {}) => {
+ return {
+ show(message: string, options: ToastOptions = {}) {
+ const localOptions = { message, ...options };
+ const mergedOptions: ToasterProps = { ...globalOptions, ...localOptions };
+ const c = mount(Toaster, {
+ props: mergedOptions,
+ });
+
+ return c;
+ },
+ clear() {
+ eventBus.$emit("toast-clear");
+ },
+ success(message: string, options: ToastOptions = {}) {
+ options.type = "is-success";
+ return this.show(message, options);
+ },
+ error(message: string, options: ToastOptions = {}) {
+ options.type = "is-danger";
+ return this.show(message, options);
+ },
+ info(message: string, options: ToastOptions = {}) {
+ options.type = "is-info";
+ return this.show(message, options);
+ },
+ warning(message: string, options: ToastOptions = {}) {
+ options.type = "is-warning";
+ return this.show(message, options);
+ },
+ };
+};
+
+export default ToastApi;
diff --git a/src/components/index.js b/src/components/index.js
index 8b5ecfb..d540079 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -35,7 +35,7 @@ export {
default as Toaster,
ToasterPositions,
createToaster,
-} from "./compounds/Toast/Toaster.js";
+} from "./compounds/Toast/Toaster";
export { default as VAccordion } from "./compounds/Accordion/Accordion.vue";
export { default as VAccordionMenu } from "./compounds/Accordion/AccordionMenu.vue";
export { default as VBreadcrumb } from "./compounds/Breadcrumb/Breadcrumb.vue";
diff --git a/src/components/primitives/Autocomplete/Autocomplete.vue b/src/components/primitives/Autocomplete/Autocomplete.vue
index bdf0b15..b059044 100644
--- a/src/components/primitives/Autocomplete/Autocomplete.vue
+++ b/src/components/primitives/Autocomplete/Autocomplete.vue
@@ -1,12 +1,6 @@
diff --git a/src/components/primitives/Button/Button.vue b/src/components/primitives/Button/Button.vue
index bb5cddf..c34f7cf 100644
--- a/src/components/primitives/Button/Button.vue
+++ b/src/components/primitives/Button/Button.vue
@@ -14,7 +14,8 @@ const props = withDefaults(
| "is-info"
| "is-success"
| "is-warning"
- | "is-danger";
+ | "is-danger"
+ | string; // or combination of types for example 'is-light has-text-black'
size?: "is-small" | "is-normal" | "is-medium" | "is-large";
label?: string;
rounded?: boolean;
diff --git a/src/components/primitives/Calendar/Calendar.vue b/src/components/primitives/Calendar/Calendar.vue
index 9719d5d..311a3f9 100644
--- a/src/components/primitives/Calendar/Calendar.vue
+++ b/src/components/primitives/Calendar/Calendar.vue
@@ -2,93 +2,84 @@
-
diff --git a/src/components/primitives/Calendar/bulma-calendar.d.ts b/src/components/primitives/Calendar/bulma-calendar.d.ts
new file mode 100644
index 0000000..d5eab94
--- /dev/null
+++ b/src/components/primitives/Calendar/bulma-calendar.d.ts
@@ -0,0 +1,327 @@
+/**
+ * Short declaration based on
+ * https://github.com/michael-hack/bulma-calendar/blob/master/index.d.ts
+ */
+
+export interface Options {
+ /**
+ * Component type
+ *
+ * @default 'datetime'
+ */
+ type?: "date" | "time" | "datetime";
+
+ /**
+ * Picker dominant color
+ *
+ * @default 'primary'
+ */
+ color?: string;
+
+ /**
+ * Range capability (start and end date/time selection
+ *
+ * @default false
+ */
+ isRange?: boolean;
+
+ /**
+ * Possibility to select same date as start and end date in range mode
+ *
+ * @default true
+ */
+ allowSameDayRange?: boolean;
+
+ /**
+ * Display lang (from language supported by date-fns)
+ *
+ * @default navigator.language.substring(0, 2) || "en"
+ */
+ lang?: string;
+
+ /**
+ * Date format pattern
+ *
+ * @default 'MM/dd/yyyy'
+ */
+ dateFormat?: string;
+
+ /**
+ * Time format pattern
+ *
+ * @default 'HH:mm'
+ */
+ timeFormat?: string;
+
+ /**
+ * Navigation month format pattern
+ *
+ * @default 'MMMM'
+ */
+ navigationMonthFormat?: string;
+
+ /**
+ * Navigation year format pattern
+ *
+ * @default 'yyyy'
+ */
+ navigationYearFormat?: string;
+
+ /**
+ * Header month year format pattern
+ *
+ * @default 'MMMM yyyy'
+ */
+ headerMonthYearFromat?: string;
+
+ /**
+ * Display mode
+ *
+ * @default 'default'
+ */
+ displayMode?: "default" | "dialog" | "inline";
+
+ /**
+ * @default 'auto'
+ */
+ position?: string;
+
+ /**
+ * Show/Hide header block (with current selection)
+ *
+ * @default true
+ */
+ showHeader?: boolean;
+
+ /**
+ * Header block position
+ *
+ * @default 'top'
+ */
+ headerPosition?: "top" | "bottom";
+
+ /**
+ * Show/Hide footer block
+ *
+ * @default true
+ */
+ showFooter?: boolean;
+
+ /**
+ * Show/Hide buttons
+ *
+ * @default true
+ */
+ showButtons?: boolean;
+
+ /**
+ * Show/Hide Today Button
+ *
+ * @default true
+ */
+ showTodayButton?: boolean;
+
+ /**
+ * Show/Hide Clear Button
+ *
+ * @default true
+ */
+ showClearButton?: boolean;
+
+ /**
+ * Cancel button label
+ *
+ * @default 'Cancel'
+ */
+ cancelLabel?: string;
+
+ /**
+ * Clear button label
+ *
+ * @default 'Clear'
+ */
+ clearLabel?: string;
+
+ /**
+ * Today button label
+ *
+ * @default 'Today'
+ */
+ todayLabel?: string;
+
+ /**
+ * Now button label
+ *
+ * @default 'Now'
+ */
+ nowLabel?: string;
+
+ /**
+ * Validate button label
+ *
+ * @default 'Validate'
+ */
+ validateLabel?: string;
+
+ /**
+ * Enable/disable month switch
+ *
+ * @default true
+ */
+ enableMonthSwitch?: boolean;
+
+ /**
+ * Enable/disable year switch
+ *
+ * @default true
+ */
+ enableYearSwitch?: boolean;
+
+ /**
+ * Pre-selected start date
+ */
+ startDate?: Date;
+
+ /**
+ * Pre-selected end date
+ */
+ endDate?: Date;
+
+ /**
+ * List of highlighted dates
+ */
+ // biome-ignore lint/suspicious/noExplicitAny:
+ highlightedDates?: string | any[];
+
+ /**
+ * Minimum date allowed
+ */
+ minDate?: Date;
+
+ /**
+ * Maximum date allowed
+ */
+ maxDate?: Date;
+
+ /**
+ * List of disabled dates
+ */
+ // biome-ignore lint/suspicious/noExplicitAny:
+ disabledDates?: any[];
+
+ /**
+ * List of disabled week days
+ */
+ // biome-ignore lint/suspicious/noExplicitAny:
+ disabledWeekDays?: string | any[];
+
+ /**
+ * Default weekstart day number
+ *
+ * @default 0 // sunday
+ */
+ weekStart?: number;
+
+ /**
+ * Pre-selected start time
+ */
+ startTime?: Date;
+
+ /**
+ * Pre-selected end time
+ */
+ endTime?: Date;
+
+ /**
+ * Steps for minutes selector
+ *
+ * @default 5
+ */
+ minuteSteps?: number;
+
+ /**
+ * From label
+ */
+ labelFrom?: string;
+
+ /**
+ * To label
+ */
+ labelTo?: string;
+
+ /**
+ * Close picker on overlay click (only for dialog display style)
+ *
+ * @default true
+ */
+ closeOnOverlayClick?: boolean;
+
+ /**
+ * Automatically close the datePicker when date selected (or range date selected) - not available
+ * for inline display style. If set to False then a validate button will be displayed into the
+ * footer section.
+ *
+ * @default true
+ */
+ closeOnSelect?: boolean;
+
+ /**
+ * Automatically open datepicker when click into input element
+ *
+ * @default true
+ */
+ toggleOnInputClick?: boolean;
+
+ /**
+ * Callback to trigger once picker initiated
+ */
+ onReady?: () => void;
+ icons?: {
+ /**
+ * Previous button icon
+ */
+ previous?: string;
+
+ /**
+ * Next button icon
+ */
+ next?: string;
+
+ /**
+ * Time icon
+ */
+ time?: string;
+
+ /**
+ * Date icon
+ */
+ date?: string;
+ };
+}
+
+type EventType = "show" | "hide" | "save" | "select" | "select:start";
+
+interface Event {
+ type: T;
+ timeStamp: number;
+ data: BulmaCalendar;
+}
+
+export declare class BulmaCalendar {
+ /** Selected start date */
+ startDate: Date;
+
+ /** Selected end date */
+ endDate: Date;
+
+ on(
+ name: T,
+ callback: (event: Event) => void,
+ once?: boolean,
+ ): void;
+
+ static attach(
+ selector?: string | HTMLElement,
+ options?: Options,
+ ): BulmaCalendar[];
+}
diff --git a/src/components/primitives/Checkbox/Checkbox.vue b/src/components/primitives/Checkbox/Checkbox.vue
index 4596b60..f62759c 100644
--- a/src/components/primitives/Checkbox/Checkbox.vue
+++ b/src/components/primitives/Checkbox/Checkbox.vue
@@ -1,5 +1,5 @@