@plexui/vue 0.0.0-stage → 0.1.1

package/dist/es/components/DataTable/DataTablePagination.js

@@ -0,0 +1,102 @@
+import { defineComponent, h, onMounted, onUpdated, ref, withDirectives } from "vue";
+import { Button } from "../Button/index.js";
+import { ChevronLeftMd, ChevronRightMd } from "../Icon/index.js";
+import s from "@plexui/styles/components/DataTable/DataTable.module.css";
+// Vue port of packages/ui/src/components/DataTable/DataTablePagination.tsx.
+//
+// React controls the rows-per-page <select> with `value={pageSize}`. React
+// DOM selects options through their `selected` property (no attribute) after
+// every render and after every change event, and when no option matches the
+// value it selects the first enabled option. Vue's `value` binding would
+// leave the select blank instead, so the same option sync runs here on
+// mount, on update and after a change. React's
+// server markup marks the matching option `selected` (the attribute), so the
+// select shows the page size before hydration: `vSelectedOnServer` does that
+// at SSR only.
+const PAGE_SIZES = [10, 20, 50, 100];
+const vSelectedOnServer = {
+    getSSRProps: ({ value }) => (value ? { selected: true } : {}),
+};
+/** React DOM's `updateOptions` for a single select. */
+const syncOptions = (select, value) => {
+    if (!select)
+        return;
+    const selectedValue = String(value);
+    let fallback = null;
+    for (const option of Array.from(select.options)) {
+        if (option.value === selectedValue) {
+            option.selected = true;
+            return;
+        }
+        if (fallback === null && !option.disabled)
+            fallback = option;
+    }
+    if (fallback !== null)
+        fallback.selected = true;
+};
+const DataTablePaginationComponent = defineComponent({
+    name: "DataTablePagination",
+    props: {
+        /** The TanStack table instance */
+        table: { type: Object, required: true },
+    },
+    setup(props) {
+        const selectRef = ref();
+        const sync = () => syncOptions(selectRef.value, props.table.getState().pagination.pageSize);
+        onMounted(sync);
+        onUpdated(sync);
+        return () => {
+            const { table } = props;
+            const totalRows = table.getFilteredRowModel().rows.length;
+            const { pageIndex, pageSize } = table.getState().pagination;
+            const from = pageIndex * pageSize + 1;
+            const to = Math.min((pageIndex + 1) * pageSize, totalRows);
+            // The table's initial and current page sizes are options too, so the
+            // select always shows the real page size and can go back to the initial one
+            const pageSizes = [...new Set([...PAGE_SIZES, table.initialState.pagination.pageSize, pageSize])].sort((a, b) => a - b);
+            return h("div", { class: s.Pagination }, [
+                h("div", { class: s.PaginationLeft }, [
+                    h("span", { class: s.PaginationLabel }, "Rows per page"),
+                    h("select", {
+                        "ref": selectRef,
+                        "aria-label": "Rows per page",
+                        "class": s.PaginationSelect,
+                        "onChange": (event) => {
+                            table.setPageSize(Number(event.target.value));
+                            // React puts the controlled value back after the event
+                            sync();
+                        },
+                    }, pageSizes.map((size) => withDirectives(h("option", { key: size, value: size }, size), [[vSelectedOnServer, size === pageSize]]))),
+                ]),
+                h("div", { class: s.PaginationRight }, [
+                    h("span", { class: s.PaginationInfo }, totalRows === 0 ? "0 results" : `${from}–${to} of ${totalRows}`),
+                    h("div", { class: s.PaginationButtons }, [
+                        h(Button, {
+                            "color": "secondary",
+                            "variant": "outline",
+                            "size": "sm",
+                            "pill": false,
+                            "uniform": true,
+                            "disabled": !table.getCanPreviousPage(),
+                            "onClick": () => table.previousPage(),
+                            "aria-label": "Previous page",
+                        }, { default: () => h(ChevronLeftMd) }),
+                        h(Button, {
+                            "color": "secondary",
+                            "variant": "outline",
+                            "size": "sm",
+                            "pill": false,
+                            "uniform": true,
+                            "disabled": !table.getCanNextPage(),
+                            "onClick": () => table.nextPage(),
+                            "aria-label": "Next page",
+                        }, { default: () => h(ChevronRightMd) }),
+                    ]),
+                ]),
+            ]);
+        };
+    },
+});
+/** Rows-per-page select, range label and previous/next buttons for a TanStack table. */
+export const DataTablePagination = DataTablePaginationComponent;
+//# sourceMappingURL=DataTablePagination.js.map

package/dist/es/components/DataTable/DataTablePagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTablePagination.js","sourceRoot":"","sources":["../../../../src/components/DataTable/DataTablePagination.ts"],"names":[],"mappings":"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","sourcesContent":["import { defineComponent, h, onMounted, onUpdated, ref, withDirectives, type ObjectDirective, type PropType } from \"vue\"\nimport type { Table } from \"@tanstack/vue-table\"\nimport { Button } from \"../Button/index.js\"\nimport { ChevronLeftMd, ChevronRightMd } from \"../Icon/index.js\"\nimport s from \"@plexui/styles/components/DataTable/DataTable.module.css\"\n\n// Vue port of packages/ui/src/components/DataTable/DataTablePagination.tsx.\n//\n// React controls the rows-per-page <select> with `value={pageSize}`. React\n// DOM selects options through their `selected` property (no attribute) after\n// every render and after every change event, and when no option matches the\n// value it selects the first enabled option. Vue's `value` binding would\n// leave the select blank instead, so the same option sync runs here on\n// mount, on update and after a change. React's\n// server markup marks the matching option `selected` (the attribute), so the\n// select shows the page size before hydration: `vSelectedOnServer` does that\n// at SSR only.\n\nconst PAGE_SIZES = [10, 20, 50, 100]\n\nconst vSelectedOnServer: ObjectDirective<HTMLOptionElement, boolean> = {\n  getSSRProps: ({ value }) => (value ? { selected: true } : {}),\n}\n\n/** React DOM's `updateOptions` for a single select. */\nconst syncOptions = (select: HTMLSelectElement | undefined, value: number) => {\n  if (!select) return\n  const selectedValue = String(value)\n  let fallback: HTMLOptionElement | null = null\n  for (const option of Array.from(select.options)) {\n    if (option.value === selectedValue) {\n      option.selected = true\n      return\n    }\n    if (fallback === null && !option.disabled) fallback = option\n  }\n  if (fallback !== null) fallback.selected = true\n}\n\nconst DataTablePaginationComponent = defineComponent({\n  name: \"DataTablePagination\",\n  props: {\n    /** The TanStack table instance */\n    table: { type: Object as PropType<Table<any>>, required: true },\n  },\n  setup(props) {\n    const selectRef = ref<HTMLSelectElement>()\n    const sync = () => syncOptions(selectRef.value, props.table.getState().pagination.pageSize)\n\n    onMounted(sync)\n    onUpdated(sync)\n\n    return () => {\n      const { table } = props\n      const totalRows = table.getFilteredRowModel().rows.length\n      const { pageIndex, pageSize } = table.getState().pagination\n      const from = pageIndex * pageSize + 1\n      const to = Math.min((pageIndex + 1) * pageSize, totalRows)\n      // The table's initial and current page sizes are options too, so the\n      // select always shows the real page size and can go back to the initial one\n      const pageSizes = [...new Set([...PAGE_SIZES, table.initialState.pagination.pageSize, pageSize])].sort(\n        (a, b) => a - b,\n      )\n\n      return h(\"div\", { class: s.Pagination }, [\n        h(\"div\", { class: s.PaginationLeft }, [\n          h(\"span\", { class: s.PaginationLabel }, \"Rows per page\"),\n          h(\n            \"select\",\n            {\n              \"ref\": selectRef,\n              \"aria-label\": \"Rows per page\",\n              \"class\": s.PaginationSelect,\n              \"onChange\": (event: Event) => {\n                table.setPageSize(Number((event.target as HTMLSelectElement).value))\n                // React puts the controlled value back after the event\n                sync()\n              },\n            },\n            pageSizes.map((size) =>\n              withDirectives(h(\"option\", { key: size, value: size }, size), [[vSelectedOnServer, size === pageSize]]),\n            ),\n          ),\n        ]),\n        h(\"div\", { class: s.PaginationRight }, [\n          h(\"span\", { class: s.PaginationInfo }, totalRows === 0 ? \"0 results\" : `${from}–${to} of ${totalRows}`),\n          h(\"div\", { class: s.PaginationButtons }, [\n            h(\n              Button,\n              {\n                \"color\": \"secondary\",\n                \"variant\": \"outline\",\n                \"size\": \"sm\",\n                \"pill\": false,\n                \"uniform\": true,\n                \"disabled\": !table.getCanPreviousPage(),\n                \"onClick\": () => table.previousPage(),\n                \"aria-label\": \"Previous page\",\n              },\n              { default: () => h(ChevronLeftMd) },\n            ),\n            h(\n              Button,\n              {\n                \"color\": \"secondary\",\n                \"variant\": \"outline\",\n                \"size\": \"sm\",\n                \"pill\": false,\n                \"uniform\": true,\n                \"disabled\": !table.getCanNextPage(),\n                \"onClick\": () => table.nextPage(),\n                \"aria-label\": \"Next page\",\n              },\n              { default: () => h(ChevronRightMd) },\n            ),\n          ]),\n        ]),\n      ])\n    }\n  },\n})\n\nexport type DataTablePaginationProps<TData> = {\n  table: Table<TData>\n}\n\n/** Rows-per-page select, range label and previous/next buttons for a TanStack table. */\nexport const DataTablePagination = DataTablePaginationComponent\n"]}

package/dist/es/components/DataTable/columnHelpers.js

@@ -0,0 +1,68 @@
+import { h } from "vue";
+import { Badge } from "../Badge/index.js";
+import { CopyTooltip, Tooltip } from "../Tooltip/index.js";
+/** Monospace ID that copies itself on click, with a copy tooltip. */
+export function idCell(accessor) {
+    const IdCell = ({ row }) => {
+        const value = accessor(row.original);
+        return h(CopyTooltip, { copyValue: value }, {
+            default: () => h("span", {
+                style: {
+                    fontFamily: "var(--font-mono, ui-monospace, monospace)",
+                    color: "var(--color-text-secondary)",
+                    cursor: "pointer",
+                },
+            }, value),
+        });
+    };
+    IdCell.displayName = "IdCell";
+    return IdCell;
+}
+/** Date and time formatted with Intl.DateTimeFormat ("en-US"); "—" when empty. */
+export function dateTimeCell(accessor, options) {
+    const defaultOptions = {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+    };
+    const fmt = new Intl.DateTimeFormat("en-US", options ?? defaultOptions);
+    const DateTimeCell = ({ row }) => {
+        const val = accessor(row.original);
+        return h("span", { style: { color: "var(--color-text-secondary)" } }, val ? fmt.format(new Date(val)) : "—");
+    };
+    DateTimeCell.displayName = "DateTimeCell";
+    return DateTimeCell;
+}
+/** Soft Badge whose color comes from the lowercased status (`colorMap`, or the default map). */
+export function statusCell(accessor, colorMap) {
+    const defaultColorMap = {
+        active: "success",
+        completed: "success",
+        paid: "success",
+        pending: "warning",
+        processing: "info",
+        inactive: "secondary",
+        cancelled: "danger",
+        failed: "danger",
+        unpaid: "danger",
+    };
+    const StatusCell = ({ row }) => {
+        const status = accessor(row.original);
+        const map = colorMap ?? defaultColorMap;
+        const color = map[status.toLowerCase()] ?? "secondary";
+        return h(Badge, { color, variant: "soft" }, { default: () => status });
+    };
+    StatusCell.displayName = "StatusCell";
+    return StatusCell;
+}
+/** Header label with a dashed underline and a tooltip carrying `description`. */
+export function tooltipHeader(label, description) {
+    const TooltipHeader = () => h(Tooltip, { content: description, side: "bottom", maxWidth: 260 }, {
+        default: () => h("span", { style: { cursor: "help", borderBottom: "1px dashed currentColor" } }, label),
+    });
+    TooltipHeader.displayName = "TooltipHeader";
+    return TooltipHeader;
+}
+//# sourceMappingURL=columnHelpers.js.map

package/dist/es/components/DataTable/columnHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"columnHelpers.js","sourceRoot":"","sources":["../../../../src/components/DataTable/columnHelpers.ts"],"names":[],"mappings":"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","sourcesContent":["import { h, type VNode } from \"vue\"\nimport type { CellContext, HeaderContext } from \"@tanstack/vue-table\"\nimport { Badge, type BadgeColor } from \"../Badge/index.js\"\nimport { CopyTooltip, Tooltip } from \"../Tooltip/index.js\"\n\n// Vue port of packages/ui/src/components/DataTable/columnHelpers.tsx. Each\n// helper returns a functional component for a column's `cell` or `header`;\n// FlexRender renders it with the cell or header context as props, as\n// flexRender does in React.\n\ntype StatusColor = Extract<BadgeColor, \"secondary\" | \"success\" | \"danger\" | \"warning\" | \"info\" | \"discovery\" | \"caution\">\n\n/** A cell renderer: FlexRender calls it with the cell context. */\nexport type CellComponent<T> = ((context: CellContext<T, unknown>) => VNode) & { displayName?: string }\n\n/** A header renderer: FlexRender calls it with the header context. */\nexport type HeaderComponent<T> = ((context: HeaderContext<T, unknown>) => VNode) & { displayName?: string }\n\n/** Monospace ID that copies itself on click, with a copy tooltip. */\nexport function idCell<T>(accessor: (row: T) => string): CellComponent<T> {\n  const IdCell: CellComponent<T> = ({ row }) => {\n    const value = accessor(row.original)\n    return h(\n      CopyTooltip,\n      { copyValue: value },\n      {\n        default: () =>\n          h(\n            \"span\",\n            {\n              style: {\n                fontFamily: \"var(--font-mono, ui-monospace, monospace)\",\n                color: \"var(--color-text-secondary)\",\n                cursor: \"pointer\",\n              },\n            },\n            value,\n          ),\n      },\n    )\n  }\n  IdCell.displayName = \"IdCell\"\n  return IdCell\n}\n\n/** Date and time formatted with Intl.DateTimeFormat (\"en-US\"); \"—\" when empty. */\nexport function dateTimeCell<T>(\n  accessor: (row: T) => string | null | undefined,\n  options?: Intl.DateTimeFormatOptions,\n): CellComponent<T> {\n  const defaultOptions: Intl.DateTimeFormatOptions = {\n    year: \"numeric\",\n    month: \"short\",\n    day: \"numeric\",\n    hour: \"2-digit\",\n    minute: \"2-digit\",\n  }\n  const fmt = new Intl.DateTimeFormat(\"en-US\", options ?? defaultOptions)\n\n  const DateTimeCell: CellComponent<T> = ({ row }) => {\n    const val = accessor(row.original)\n    return h(\"span\", { style: { color: \"var(--color-text-secondary)\" } }, val ? fmt.format(new Date(val)) : \"—\")\n  }\n  DateTimeCell.displayName = \"DateTimeCell\"\n  return DateTimeCell\n}\n\n/** Soft Badge whose color comes from the lowercased status (`colorMap`, or the default map). */\nexport function statusCell<T>(accessor: (row: T) => string, colorMap?: Record<string, StatusColor>): CellComponent<T> {\n  const defaultColorMap: Record<string, StatusColor> = {\n    active: \"success\",\n    completed: \"success\",\n    paid: \"success\",\n    pending: \"warning\",\n    processing: \"info\",\n    inactive: \"secondary\",\n    cancelled: \"danger\",\n    failed: \"danger\",\n    unpaid: \"danger\",\n  }\n\n  const StatusCell: CellComponent<T> = ({ row }) => {\n    const status = accessor(row.original)\n    const map = colorMap ?? defaultColorMap\n    const color = map[status.toLowerCase()] ?? \"secondary\"\n    return h(Badge, { color, variant: \"soft\" }, { default: () => status })\n  }\n  StatusCell.displayName = \"StatusCell\"\n  return StatusCell\n}\n\n/** Header label with a dashed underline and a tooltip carrying `description`. */\nexport function tooltipHeader<T = any>(label: string, description: string): HeaderComponent<T> {\n  const TooltipHeader: HeaderComponent<T> = () =>\n    h(\n      Tooltip,\n      { content: description, side: \"bottom\", maxWidth: 260 },\n      {\n        default: () => h(\"span\", { style: { cursor: \"help\", borderBottom: \"1px dashed currentColor\" } }, label),\n      },\n    )\n  TooltipHeader.displayName = \"TooltipHeader\"\n  return TooltipHeader\n}\n"]}

package/dist/es/components/DataTable/index.js

@@ -0,0 +1,5 @@
+export { DataTable } from "./DataTable.js";
+export { DataTablePagination } from "./DataTablePagination.js";
+export { DataTableColumnHeader } from "./DataTableColumnHeader.js";
+export { idCell, dateTimeCell, statusCell, tooltipHeader } from "./columnHelpers.js";
+//# sourceMappingURL=index.js.map

package/dist/es/components/DataTable/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/DataTable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuB,MAAM,gBAAgB,CAAA;AAC/D,OAAO,EAAE,mBAAmB,EAAiC,MAAM,0BAA0B,CAAA;AAC7F,OAAO,EAAE,qBAAqB,EAAmC,MAAM,4BAA4B,CAAA;AAInG,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA","sourcesContent":["export { DataTable, type DataTableProps } from \"./DataTable.js\"\nexport { DataTablePagination, type DataTablePaginationProps } from \"./DataTablePagination.js\"\nexport { DataTableColumnHeader, type DataTableColumnHeaderProps } from \"./DataTableColumnHeader.js\"\n\nexport type { ColumnDef, RowSelectionState, SortingState, VisibilityState } from \"@tanstack/vue-table\"\n\nexport { idCell, dateTimeCell, statusCell, tooltipHeader } from \"./columnHelpers.js\"\n"]}

package/dist/es/components/DateInput/DateInput.js

@@ -0,0 +1,169 @@
+import { maskitoDateOptionsGenerator, maskitoDateTimeOptionsGenerator, maskitoParseDate, maskitoParseDateTime, maskitoStringifyDate, maskitoStringifyDateTime, } from "@maskito/kit";
+import { maskito as vMaskito } from "@maskito/vue";
+import { DateTime } from "luxon";
+import { computed, defineComponent, h, mergeProps, onBeforeUnmount, onMounted, ref, watch, withDirectives, } from "vue";
+import { Input } from "../Input/index.js";
+// Vue port of packages/ui/src/components/DateInput/DateInput.tsx: an Input
+// with a Maskito date (or date + time) mask, same options as React.
+//
+// - `value` + `update:value` (`v-model:value`) and `change` mirror React's
+//   `value` + `onChange`: both fire with a Luxon DateTime once a complete
+//   valid date is typed, and with `null` when the field is emptied or cleared.
+//   What is typed in between stays in the field without an event until the
+//   field loses focus, which shows the value again.
+// - Every other attribute, listener and the `startAdornment` /
+//   `endAdornment` slots go to Input, like React's `...inputProps`. React
+//   sets `onInput` and `onClear` itself, so `@input` and `@clear` given to
+//   DateInput are dropped, as there.
+// - The mask is `@maskito/vue`'s directive on Input's container; its default
+//   element predicate picks the <input> inside.
+// - React reads the typed text in a listener React delegates to the root, so
+//   it runs after Maskito's own `input` listeners on the <input>. The text is
+//   read the same way here, from the event bubbling through Input's container.
+//   Input's `update:value` only keeps its controlled value in step, so Input
+//   does not put the previous text back.
+const DateInputComponent = defineComponent({
+    name: "DateInput",
+    inheritAttrs: false,
+    props: {
+        /** Selected date (Luxon DateTime). Bind `v-model:value`. */
+        value: { type: [Object, null], required: true },
+        /** Date format: `dd/mm/yyyy`, `mm/dd/yyyy`, `yyyy/mm/dd`, ... @default "dd/mm/yyyy" */
+        mode: { type: String, default: "dd/mm/yyyy" },
+        /** Character between date parts. @default "." */
+        separator: { type: String, default: "." },
+        /** Enables time input: `HH:MM`, `HH:MM:SS`, ... */
+        timeMode: String,
+        /** Separator between the date and time parts. @default ", " */
+        dateTimeSeparator: { type: String, default: ", " },
+        /** Arrow-key increment step for time segments. @default 0 */
+        timeStep: { type: Number, default: 0 },
+        /** Earliest allowed date */
+        min: Object,
+        /** Latest allowed date */
+        max: Object,
+        /** Shows the clear button while the input has a value. @default false */
+        clearable: { type: Boolean, default: false },
+        /** Generated from the format when not set */
+        placeholder: String,
+    },
+    emits: {
+        "update:value": (_value) => true,
+        "change": (_value) => true,
+    },
+    setup(props, { attrs, slots, emit, expose }) {
+        const hasTime = computed(() => !!props.timeMode);
+        // React memoizes on the dates' milliseconds, not on the DateTime objects
+        const minMs = computed(() => props.min?.toMillis());
+        const maxMs = computed(() => props.max?.toMillis());
+        const dateParams = computed(() => ({
+            mode: props.mode,
+            separator: props.separator,
+            ...(minMs.value !== undefined ? { min: new Date(minMs.value) } : undefined),
+            ...(maxMs.value !== undefined ? { max: new Date(maxMs.value) } : undefined),
+        }));
+        const dateTimeParams = computed(() => ({
+            dateMode: props.mode,
+            dateSeparator: props.separator,
+            timeMode: props.timeMode ?? "HH:MM",
+            dateTimeSeparator: props.dateTimeSeparator,
+            ...(props.timeStep ? { timeStep: props.timeStep } : undefined),
+            ...(minMs.value !== undefined ? { min: new Date(minMs.value) } : undefined),
+            ...(maxMs.value !== undefined ? { max: new Date(maxMs.value) } : undefined),
+        }));
+        // Like React's memo, new options whenever either set of params changes
+        const maskOptions = computed(() => {
+            const date = dateParams.value;
+            const dateTime = dateTimeParams.value;
+            return hasTime.value ? maskitoDateTimeOptionsGenerator(dateTime) : maskitoDateOptionsGenerator(date);
+        });
+        const inputValue = ref("");
+        const format = (date) => {
+            if (!date)
+                return "";
+            return hasTime.value
+                ? maskitoStringifyDateTime(date.toJSDate(), dateTimeParams.value)
+                : maskitoStringifyDate(date.toJSDate(), dateParams.value);
+        };
+        const parse = (str) => hasTime.value ? maskitoParseDateTime(str, dateTimeParams.value) : maskitoParseDate(str, dateParams.value);
+        // React formats the value in an effect: the first render (and the server
+        // markup) has an empty field, without the clear button
+        const syncInputValue = () => {
+            inputValue.value = format(props.value);
+        };
+        const valueMsKey = computed(() => props.value?.toMillis() ?? null);
+        watch([valueMsKey, hasTime, dateParams, dateTimeParams], syncInputValue);
+        onMounted(syncInputValue);
+        const change = (value) => {
+            emit("update:value", value);
+            emit("change", value);
+        };
+        const inputComponent = ref(null);
+        const handleInput = (evt) => {
+            const input = inputComponent.value?.input;
+            if (!input || evt.target !== input)
+                return;
+            const str = input.value;
+            inputValue.value = str;
+            if (!str) {
+                change(null);
+                return;
+            }
+            const parsed = parse(str);
+            if (parsed) {
+                change(DateTime.fromJSDate(parsed));
+            }
+        };
+        // Text that is not a complete date never reaches `change`, so leaving the
+        // field shows the value again instead of a date the value does not hold
+        const handleBlur = () => {
+            if (inputValue.value && !parse(inputValue.value)) {
+                inputValue.value = format(props.value);
+            }
+        };
+        const handleClear = () => {
+            inputValue.value = "";
+            change(null);
+        };
+        let container = null;
+        onMounted(() => {
+            container = inputComponent.value?.$el ?? null;
+            container?.addEventListener("input", handleInput);
+        });
+        onBeforeUnmount(() => {
+            container?.removeEventListener("input", handleInput);
+            container = null;
+        });
+        const defaultPlaceholder = computed(() => {
+            const datePart = props.mode.replace(/\//g, props.separator).toUpperCase();
+            if (!hasTime.value)
+                return datePart;
+            return `${datePart}${props.dateTimeSeparator}${props.timeMode}`;
+        });
+        expose({
+            focus: () => inputComponent.value?.focus(),
+            input: computed(() => inputComponent.value?.input ?? null),
+        });
+        return () => {
+            const { onInput: _onInput, onClear: _onClear, ...inputProps } = attrs;
+            return withDirectives(h(Input, 
+            // mergeProps keeps the caller's `@blur` and runs it first, as React does
+            mergeProps(inputProps, {
+                "ref": inputComponent,
+                "value": inputValue.value,
+                "onUpdate:value": (str) => {
+                    inputValue.value = str;
+                },
+                "onBlur": handleBlur,
+                "placeholder": props.placeholder ?? defaultPlaceholder.value,
+                "onClear": props.clearable ? handleClear : undefined,
+            }), {
+                ...(slots.startAdornment ? { startAdornment: slots.startAdornment } : {}),
+                ...(slots.endAdornment ? { endAdornment: slots.endAdornment } : {}),
+            }), [[vMaskito, maskOptions.value]]);
+        };
+    },
+});
+/** Masked text input for typing dates (Luxon DateTime values). */
+export const DateInput = DateInputComponent;
+//# sourceMappingURL=DateInput.js.map

package/dist/es/components/DateInput/DateInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.js","sourceRoot":"","sources":["../../../../src/components/DateInput/DateInput.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  maskitoDateOptionsGenerator,\n  maskitoDateTimeOptionsGenerator,\n  maskitoParseDate,\n  maskitoParseDateTime,\n  maskitoStringifyDate,\n  maskitoStringifyDateTime,\n  type MaskitoDateMode,\n  type MaskitoDateParams,\n  type MaskitoDateTimeParams,\n  type MaskitoTimeMode,\n} from \"@maskito/kit\"\nimport { maskito as vMaskito } from \"@maskito/vue\"\nimport { DateTime } from \"luxon\"\nimport {\n  computed,\n  defineComponent,\n  h,\n  mergeProps,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  watch,\n  withDirectives,\n  type PropType,\n} from \"vue\"\nimport { Input, type InputProps } from \"../Input/index.js\"\n\n// Vue port of packages/ui/src/components/DateInput/DateInput.tsx: an Input\n// with a Maskito date (or date + time) mask, same options as React.\n//\n// - `value` + `update:value` (`v-model:value`) and `change` mirror React's\n//   `value` + `onChange`: both fire with a Luxon DateTime once a complete\n//   valid date is typed, and with `null` when the field is emptied or cleared.\n//   What is typed in between stays in the field without an event until the\n//   field loses focus, which shows the value again.\n// - Every other attribute, listener and the `startAdornment` /\n//   `endAdornment` slots go to Input, like React's `...inputProps`. React\n//   sets `onInput` and `onClear` itself, so `@input` and `@clear` given to\n//   DateInput are dropped, as there.\n// - The mask is `@maskito/vue`'s directive on Input's container; its default\n//   element predicate picks the <input> inside.\n// - React reads the typed text in a listener React delegates to the root, so\n//   it runs after Maskito's own `input` listeners on the <input>. The text is\n//   read the same way here, from the event bubbling through Input's container.\n//   Input's `update:value` only keeps its controlled value in step, so Input\n//   does not put the previous text back.\n\nconst DateInputComponent = defineComponent({\n  name: \"DateInput\",\n  inheritAttrs: false,\n  props: {\n    /** Selected date (Luxon DateTime). Bind `v-model:value`. */\n    value: { type: [Object, null] as PropType<DateTime | null>, required: true as const },\n    /** Date format: `dd/mm/yyyy`, `mm/dd/yyyy`, `yyyy/mm/dd`, ... @default \"dd/mm/yyyy\" */\n    mode: { type: String as PropType<MaskitoDateMode>, default: \"dd/mm/yyyy\" },\n    /** Character between date parts. @default \".\" */\n    separator: { type: String, default: \".\" },\n    /** Enables time input: `HH:MM`, `HH:MM:SS`, ... */\n    timeMode: String as PropType<MaskitoTimeMode>,\n    /** Separator between the date and time parts. @default \", \" */\n    dateTimeSeparator: { type: String, default: \", \" },\n    /** Arrow-key increment step for time segments. @default 0 */\n    timeStep: { type: Number, default: 0 },\n    /** Earliest allowed date */\n    min: Object as PropType<DateTime>,\n    /** Latest allowed date */\n    max: Object as PropType<DateTime>,\n    /** Shows the clear button while the input has a value. @default false */\n    clearable: { type: Boolean, default: false },\n    /** Generated from the format when not set */\n    placeholder: String,\n  },\n  emits: {\n    \"update:value\": (_value: DateTime | null) => true,\n    \"change\": (_value: DateTime | null) => true,\n  },\n  setup(props, { attrs, slots, emit, expose }) {\n    const hasTime = computed(() => !!props.timeMode)\n    // React memoizes on the dates' milliseconds, not on the DateTime objects\n    const minMs = computed(() => props.min?.toMillis())\n    const maxMs = computed(() => props.max?.toMillis())\n\n    const dateParams = computed<MaskitoDateParams>(() => ({\n      mode: props.mode,\n      separator: props.separator,\n      ...(minMs.value !== undefined ? { min: new Date(minMs.value) } : undefined),\n      ...(maxMs.value !== undefined ? { max: new Date(maxMs.value) } : undefined),\n    }))\n\n    const dateTimeParams = computed<MaskitoDateTimeParams>(() => ({\n      dateMode: props.mode,\n      dateSeparator: props.separator,\n      timeMode: props.timeMode ?? \"HH:MM\",\n      dateTimeSeparator: props.dateTimeSeparator,\n      ...(props.timeStep ? { timeStep: props.timeStep } : undefined),\n      ...(minMs.value !== undefined ? { min: new Date(minMs.value) } : undefined),\n      ...(maxMs.value !== undefined ? { max: new Date(maxMs.value) } : undefined),\n    }))\n\n    // Like React's memo, new options whenever either set of params changes\n    const maskOptions = computed(() => {\n      const date = dateParams.value\n      const dateTime = dateTimeParams.value\n      return hasTime.value ? maskitoDateTimeOptionsGenerator(dateTime) : maskitoDateOptionsGenerator(date)\n    })\n\n    const inputValue = ref(\"\")\n\n    const format = (date: DateTime | null) => {\n      if (!date) return \"\"\n      return hasTime.value\n        ? maskitoStringifyDateTime(date.toJSDate(), dateTimeParams.value)\n        : maskitoStringifyDate(date.toJSDate(), dateParams.value)\n    }\n\n    const parse = (str: string) =>\n      hasTime.value ? maskitoParseDateTime(str, dateTimeParams.value) : maskitoParseDate(str, dateParams.value)\n\n    // React formats the value in an effect: the first render (and the server\n    // markup) has an empty field, without the clear button\n    const syncInputValue = () => {\n      inputValue.value = format(props.value)\n    }\n    const valueMsKey = computed(() => props.value?.toMillis() ?? null)\n    watch([valueMsKey, hasTime, dateParams, dateTimeParams], syncInputValue)\n    onMounted(syncInputValue)\n\n    const change = (value: DateTime | null) => {\n      emit(\"update:value\", value)\n      emit(\"change\", value)\n    }\n\n    const inputComponent = ref<{ $el: HTMLElement; input: HTMLInputElement | null; focus: () => void } | null>(null)\n\n    const handleInput = (evt: Event) => {\n      const input = inputComponent.value?.input\n      if (!input || evt.target !== input) return\n      const str = input.value\n      inputValue.value = str\n\n      if (!str) {\n        change(null)\n        return\n      }\n\n      const parsed = parse(str)\n\n      if (parsed) {\n        change(DateTime.fromJSDate(parsed))\n      }\n    }\n\n    // Text that is not a complete date never reaches `change`, so leaving the\n    // field shows the value again instead of a date the value does not hold\n    const handleBlur = () => {\n      if (inputValue.value && !parse(inputValue.value)) {\n        inputValue.value = format(props.value)\n      }\n    }\n\n    const handleClear = () => {\n      inputValue.value = \"\"\n      change(null)\n    }\n\n    let container: HTMLElement | null = null\n    onMounted(() => {\n      container = inputComponent.value?.$el ?? null\n      container?.addEventListener(\"input\", handleInput)\n    })\n    onBeforeUnmount(() => {\n      container?.removeEventListener(\"input\", handleInput)\n      container = null\n    })\n\n    const defaultPlaceholder = computed(() => {\n      const datePart = props.mode.replace(/\\//g, props.separator).toUpperCase()\n      if (!hasTime.value) return datePart\n      return `${datePart}${props.dateTimeSeparator}${props.timeMode}`\n    })\n\n    expose({\n      focus: () => inputComponent.value?.focus(),\n      input: computed(() => inputComponent.value?.input ?? null),\n    })\n\n    return () => {\n      const { onInput: _onInput, onClear: _onClear, ...inputProps } = attrs\n      return withDirectives(\n        h(\n          Input,\n          // mergeProps keeps the caller's `@blur` and runs it first, as React does\n          mergeProps(inputProps, {\n            \"ref\": inputComponent,\n            \"value\": inputValue.value,\n            \"onUpdate:value\": (str: string) => {\n              inputValue.value = str\n            },\n            \"onBlur\": handleBlur,\n            \"placeholder\": props.placeholder ?? defaultPlaceholder.value,\n            \"onClear\": props.clearable ? handleClear : undefined,\n          }),\n          {\n            ...(slots.startAdornment ? { startAdornment: slots.startAdornment } : {}),\n            ...(slots.endAdornment ? { endAdornment: slots.endAdornment } : {}),\n          },\n        ),\n        [[vMaskito, maskOptions.value]],\n      )\n    }\n  },\n})\n\ntype DateInputOwnProps = InstanceType<typeof DateInputComponent>[\"$props\"]\n\n/** DateInput props plus the Input props and attributes that fall through to it. */\nexport type DateInputProps = DateInputOwnProps &\n  Omit<InputProps, keyof DateInputOwnProps | \"defaultValue\" | \"onUpdate:value\" | \"onInput\" | \"onClear\" | \"type\">\n\n/** Masked text input for typing dates (Luxon DateTime values). */\nexport const DateInput = DateInputComponent as typeof DateInputComponent & { new (): { $props: DateInputProps } }\n"]}

package/dist/es/components/DateInput/index.js

@@ -0,0 +1,2 @@
+export { DateInput } from "./DateInput.js";
+//# sourceMappingURL=index.js.map

package/dist/es/components/DateInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/DateInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuB,MAAM,gBAAgB,CAAA","sourcesContent":["export { DateInput, type DateInputProps } from \"./DateInput.js\"\n"]}