@knitify/vue 2.1.0 → 2.2.0

package/dist/types/components/Dropzone/KDropzone.vue.d.ts

@@ -0,0 +1,39 @@
+import type { KDropzoneFile, KDropzoneProps, KDropzoneRejection, KDropzoneSlots } from './types';
+type __VLS_Props = KDropzoneProps;
+type __VLS_Slots = KDropzoneSlots;
+declare function uploadAll(entry?: KDropzoneFile): Promise<void>;
+declare function removeEntry(entry: KDropzoneFile): void;
+declare function clear(): void;
+declare function open(): void;
+type __VLS_ModelProps = {
+    modelValue?: KDropzoneFile[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    open: typeof open;
+    upload: typeof uploadAll;
+    remove: typeof removeEntry;
+    clear: typeof clear;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (file: KDropzoneFile, error: unknown) => any;
+    success: (file: KDropzoneFile) => any;
+    add: (files: KDropzoneFile[]) => any;
+    remove: (file: KDropzoneFile) => any;
+    "update:modelValue": (value: KDropzoneFile[]) => any;
+    reject: (rejections: KDropzoneRejection[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onError?: ((file: KDropzoneFile, error: unknown) => any) | undefined;
+    onSuccess?: ((file: KDropzoneFile) => any) | undefined;
+    onAdd?: ((files: KDropzoneFile[]) => any) | undefined;
+    onRemove?: ((file: KDropzoneFile) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: KDropzoneFile[]) => any) | undefined;
+    onReject?: ((rejections: KDropzoneRejection[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/Dropzone/types.d.ts

@@ -0,0 +1,89 @@
+export type KDropzoneFileStatus = 'pending' | 'uploading' | 'done' | 'error';
+/** One entry in the model: the file plus where its upload stands. */
+export type KDropzoneFile = {
+    /** Stable key for the list; files carry no identity of their own. */
+    id: string;
+    file: File;
+    status: KDropzoneFileStatus;
+    /** 0–100, reported through `onProgress` while uploading. */
+    progress: number;
+    /** Why the upload failed. */
+    error?: string;
+    /** Whatever the `upload` handler resolved with. */
+    response?: unknown;
+};
+export type KDropzoneRejectReason = 'type' | 'size' | 'count';
+export type KDropzoneRejection = {
+    file: File;
+    reason: KDropzoneRejectReason;
+    message: string;
+};
+export type KDropzoneUploadContext = {
+    /** Report progress as a 0–100 percentage. */
+    onProgress: (percent: number) => void;
+    /** Aborted when the file is removed mid-upload. */
+    signal: AbortSignal;
+};
+/**
+ * Sends one file. Resolve to mark it done (the value lands on `response`);
+ * reject to mark it failed (the error's message lands on `error`).
+ */
+export type KDropzoneUploadHandler = (file: File, context: KDropzoneUploadContext) => Promise<unknown>;
+export type KDropzoneProps = {
+    /** Same syntax as the native `accept`; drops are checked against it too. */
+    accept?: string;
+    /**
+     * Start `upload` as soon as a file is added. Defaults to `true`; turn it off
+     * to collect files first and send them with the exposed `upload()`.
+     */
+    autoUpload?: boolean;
+    disabled?: boolean;
+    /** Small print under the title, e.g. "PNG or JPG, up to 5 MB". */
+    hint?: string;
+    invalid?: boolean;
+    /** Upper limit on the number of files in the model. */
+    maxFiles?: number;
+    /** Upper limit per file, in bytes. */
+    maxSize?: number;
+    /** Allow more than one file. Without it, a new file replaces the old one. */
+    multiple?: boolean;
+    /** Replaces "Click to upload" — the underlined part of the title. */
+    title?: string;
+    /**
+     * Uploads each file as it is added. Without one, files simply collect in
+     * the model as `pending` for the parent to send.
+     */
+    upload?: KDropzoneUploadHandler;
+};
+export type KDropzoneEmits = {
+    /** Files that passed the checks, as they were added to the model. */
+    add: [files: KDropzoneFile[]];
+    /** Files turned away by `accept`, `maxSize` or `maxFiles`. */
+    reject: [rejections: KDropzoneRejection[]];
+    remove: [file: KDropzoneFile];
+    /** An upload resolved. */
+    success: [file: KDropzoneFile];
+    /** An upload rejected. */
+    error: [file: KDropzoneFile, error: unknown];
+};
+export type KDropzoneSlots = {
+    /** Replaces the whole inside of the drop area. */
+    default?(props: {
+        dragging: boolean;
+        open: () => void;
+    }): any;
+    /** Replaces the upload icon. */
+    icon?(): any;
+    /** Replaces the hint line. */
+    hint?(): any;
+};
+export type KDropzoneExpose = {
+    /** Opens the file picker. */
+    open: () => void;
+    /** Uploads every `pending` and `error` file, or just the one given. */
+    upload: (file?: KDropzoneFile) => Promise<void>;
+    /** Removes one file, aborting its upload if one is in flight. Ignored while disabled. */
+    remove: (file: KDropzoneFile) => void;
+    /** Empties the model, aborting uploads in flight. */
+    clear: () => void;
+};

package/dist/types/components/FileTree/KFileTree.vue.d.ts

@@ -10,17 +10,17 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     collapseAll: () => void | undefined;
     expandAll: () => void | undefined;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    load: (id: string) => any;
     select: (id: string) => any;
     collapse: (id: string) => any;
     expand: (id: string) => any;
-    load: (id: string) => any;
     "update:expanded": (value: string[]) => any;
     "update:selected": (value: string | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onLoad?: ((id: string) => any) | undefined;
     onSelect?: ((id: string) => any) | undefined;
     onCollapse?: ((id: string) => any) | undefined;
     onExpand?: ((id: string) => any) | undefined;
-    onLoad?: ((id: string) => any) | undefined;
     "onUpdate:expanded"?: ((value: string[]) => any) | undefined;
     "onUpdate:selected"?: ((value: string | null) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/types/components/Modal/types.d.ts

@@ -52,6 +52,10 @@ export type KModalEmits = {
     (event: 'shown'): void;
 };
 export type KModalSlots = {
+    /**
+     * The close button's content. The default is the sprite's `kt-cross`, so it
+     * needs core's icon sprite on the page — imported with `@knitify/core`.
+     */
     close?(): any;
     default?(): any;
     footer?(): any;

package/dist/types/components/Table/types.d.ts

@@ -9,10 +9,10 @@ export type KTableProps = {
     hoverable?: boolean;
     /**
      * How many leading columns stay put while the table scrolls sideways, up to
-     * 4. Wrap the table in an `overflow-x: auto` container.
+     * 5. Wrap the table in an `overflow-x: auto` container.
      */
     pinStart?: number;
-    /** How many trailing columns stay put, up to 4 — e.g. an actions column. */
+    /** How many trailing columns stay put, up to 5 — e.g. an actions column. */
     pinEnd?: number;
     size?: KTableSize;
     /**
@@ -21,6 +21,8 @@ export type KTableProps = {
      * `--kt-table-sticky-top` CSS variable, e.g. below a fixed navbar.
      */
     stickyHeader?: boolean;
+    /** Tints every other body row. */
+    striped?: boolean;
 };
 export type KTableEmits = {
     /**

package/dist/types/components/Tabs/KTabs.vue.d.ts

@@ -12,8 +12,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
 } & {
     shown: (name: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
     onShown?: ((name: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/types/components/Tabs/types.d.ts

@@ -10,13 +10,30 @@ export type KTabsProps = {
      * still switch it.
      */
     disabled?: boolean;
+    /**
+     * Gives inactive tabs a surface background instead of a transparent one.
+     * Combines with any variant and with `merged`.
+     */
+    filled?: boolean;
     /** Classes for the tablist, where the variant class also goes. */
     listClass?: ClassValue;
+    /**
+     * Joins the tab buttons into one control: no gap between them, and only the
+     * outer corners rounded. Combines with the `pills` variant; not meant for
+     * `underline`.
+     */
+    merged?: boolean;
     /**
      * Renders the tablist alone, without the panels' wrapper — for tabs that
      * drive content elsewhere through `v-model`. The default slot is ignored.
      */
     noContent?: boolean;
+    /**
+     * A light active tab, matching `KButton`'s `secondary`: the subtler brand
+     * fill with base text. Combines with `pills`, `filled` and `merged`; has no
+     * effect on `underline`.
+     */
+    secondary?: boolean;
     variant?: KTabsVariant;
 };
 export type KTabProps = {

package/dist/types/components/TagsInput/KTagsInput.vue.d.ts

@@ -11,15 +11,15 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     focus: () => void | undefined;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     invalid: (value: string, reason: string) => any;
+    add: (value: string) => any;
     remove: (value: string, index: number) => any;
     "update:modelValue": (value: string[]) => any;
-    add: (value: string) => any;
     loadError: (error: unknown, query: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onInvalid?: ((value: string, reason: string) => any) | undefined;
+    onAdd?: ((value: string) => any) | undefined;
     onRemove?: ((value: string, index: number) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
-    onAdd?: ((value: string) => any) | undefined;
     onLoadError?: ((error: unknown, query: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/types/components/Toast/types.d.ts

@@ -1,4 +1,17 @@
+import { Intent } from '../../types';
 export type KToastPosition = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export type KToastLink = {
+    label: string;
+    /** Without one, the link renders as a button and only runs `onClick`. */
+    href?: string;
+    target?: string;
+    /**
+     * Runs before the toast closes; return `false` to keep it open.
+     * `event.preventDefault()` stops an `href` navigating — use it to route
+     * client-side — and still closes the toast.
+     */
+    onClick?: (event: MouseEvent) => boolean | void;
+};
 export type KToastOptions = {
     description?: string;
     /** Milliseconds before it closes itself. */
@@ -8,9 +21,18 @@ export type KToastOptions = {
      * not as a sprite href. Never pass user-supplied content here.
      */
     icon?: string;
+    /** Up to 3, shown under the description. Any more are dropped. */
+    links?: KToastLink[];
     position?: KToastPosition;
     title: string;
+    /** Semantic colour — the same intents as KAlert's `variant`. */
+    variant?: Intent;
 };
+/**
+ * Options for `success`, `error`, `warning` and `info`, which set the variant
+ * and icon themselves and default to the top-centre position.
+ */
+export type KToastShortcutOptions = Omit<KToastOptions, 'title' | 'variant' | 'icon'>;
 /** Defaults applied to every toast raised through the returned helper. */
 export type KToastDefaults = Omit<KToastOptions, 'title'>;
 export type KToastHandle = {

package/dist/types/components/Toast/useToast.d.ts

@@ -1,4 +1,4 @@
-import type { KToastDefaults, KToastHandle, KToastOptions, KToastPosition } from './types';
+import type { KToastDefaults, KToastHandle, KToastOptions, KToastPosition, KToastShortcutOptions } from './types';
 /**
  * Toasts have no component because core's Toast has no markup to wrap:
  * `new Toast({ title })` builds its own element, mounts it into a container it
@@ -8,6 +8,10 @@ import type { KToastDefaults, KToastHandle, KToastOptions, KToastPosition } from
  * ```ts
  * const toast = useToast({ position: 'bottom-right' })
  * toast.show({ title: 'Saved', description: 'Your changes are live.' })
+ *
+ * // Semantic shortcuts preset the variant and icon.
+ * toast.success('Saved')
+ * toast.error('Upload failed', { description: 'The file is over 10 MB.' })
  * ```
  *
  * Nothing here is reactive or tied to a component instance, so it can be called
@@ -16,5 +20,13 @@ import type { KToastDefaults, KToastHandle, KToastOptions, KToastPosition } from
 export declare function useToast(defaults?: KToastDefaults): {
     /** Dismisses every toast, or only those in one corner. */
     closeAll(position?: KToastPosition): void;
-    show(options: KToastOptions): KToastHandle;
+    show: (options: KToastOptions) => KToastHandle;
+    /** Green, with a check. */
+    success: (title: string, options?: KToastShortcutOptions) => KToastHandle;
+    /** Red, with a cross. Stays up for 8 seconds unless told otherwise. */
+    error: (title: string, options?: KToastShortcutOptions) => KToastHandle;
+    /** Amber, with a warning triangle. */
+    warning: (title: string, options?: KToastShortcutOptions) => KToastHandle;
+    /** Blue, with an info mark. */
+    info: (title: string, options?: KToastShortcutOptions) => KToastHandle;
 };

package/dist/types/components/Workspace/KWorkspace.vue.d.ts

@@ -21,15 +21,15 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     closeDrawer: typeof closeDrawer;
     toggleDrawer: typeof toggleDrawer;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:expanded": (value: boolean) => any;
     "update:open": (value: boolean) => any;
+    "update:expanded": (value: boolean) => any;
     "update:bodyOpen": (value: boolean) => any;
 } & {
     toggle: (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onToggle?: ((value: boolean) => any) | undefined;
-    "onUpdate:expanded"?: ((value: boolean) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:expanded"?: ((value: boolean) => any) | undefined;
     "onUpdate:bodyOpen"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -5,6 +5,8 @@ export { chatDockStoreKey, injectChatDock, provideChatDock, } from './ChatDock/s
 export { useChatDock } from './ChatDock/useChatDock';
 export { fieldKey } from './Field/keys';
 export { useFieldControl } from '../utils/useFieldControl';
+export { registerColumnType } from './DataTable/columnTypes';
+export { dataTableKey } from './DataTable/keys';
 export { default as KAccordion } from './Accordion/KAccordion.vue';
 export { default as KAccordionItem } from './Accordion/KAccordionItem.vue';
 export { default as KAlert } from './Alert/KAlert.vue';
@@ -16,6 +18,7 @@ export { default as KBadge } from './Badge/KBadge.vue';
 export { default as KBreadcrumb } from './Breadcrumb/KBreadcrumb.vue';
 export { default as KBreadcrumbItem } from './Breadcrumb/KBreadcrumbItem.vue';
 export { default as KButton } from './Button/KButton.vue';
+export { default as KButtonGroup } from './ButtonGroup/KButtonGroup.vue';
 export { default as KCalendar } from './Calendar/KCalendar.vue';
 export { default as KCard } from './Card/KCard.vue';
 export { default as KChat } from './Chat/KChat.vue';
@@ -35,10 +38,13 @@ export { default as KChatNewWindow } from './ChatDock/KChatNewWindow.vue';
 export { default as KCheckbox } from './Checkbox/KCheckbox.vue';
 export { default as KCollapse } from './Collapse/KCollapse.vue';
 export { default as KContainer } from './Container/KContainer.vue';
+export { default as KDataTable } from './DataTable/KDataTable.vue';
 export { default as KDateInput } from './DateInput/KDateInput.vue';
 export { default as KDateRangeInput } from './DateInput/KDateRangeInput.vue';
+export { default as KDialogHost } from './Dialog/KDialogHost.vue';
 export { default as KDivider } from './Divider/KDivider.vue';
 export { default as KDrawer } from './Drawer/KDrawer.vue';
+export { default as KDropzone } from './Dropzone/KDropzone.vue';
 export { default as KDropdown } from './Dropdown/KDropdown.vue';
 export { default as KDropdownItem } from './Dropdown/KDropdownItem.vue';
 export { default as KDropdownMenu } from './Dropdown/KDropdownMenu.vue';
@@ -82,3 +88,4 @@ export { default as KTooltip } from './Tooltip/KTooltip.vue';
 export { vTooltip } from './Tooltip/vTooltip';
 export { default as KWorkspace } from './Workspace/KWorkspace.vue';
 export { useToast } from './Toast/useToast';
+export { useDialog } from './Dialog/useDialog';

package/dist/types/components/types.d.ts

@@ -5,7 +5,10 @@ export * from './Avatar/types';
 export * from './Badge/types';
 export * from './Breadcrumb/types';
 export * from './Button/types';
+export * from './ButtonGroup/types';
 export * from './Calendar/types';
+export * from './DataTable/types';
+export type { DataTableContext } from './DataTable/keys';
 export * from './DateInput/types';
 export * from './Card/types';
 export * from './Chat/types';
@@ -21,6 +24,7 @@ export * from './Field/types';
 export type { FieldContext } from './Field/keys';
 export type { UseFieldControlOptions } from '../utils/useFieldControl';
 export * from './Dropdown/types';
+export * from './Dropzone/types';
 export * from './FileTree/types';
 export * from './Flex/types';
 export * from './Grid/types';
@@ -39,6 +43,7 @@ export * from './SearchInput/types';
 export * from './SegmentedButtons/types';
 export * from './Select/types';
 export * from './Skeleton/types';
+export * from './Dialog/types';
 export * from './Spinner/types';
 export * from './Table/types';
 export * from './Tabs/types';

package/dist/types/index.d.ts

@@ -1,8 +1,17 @@
-import { App } from 'vue';
+import type { App, Component } from 'vue';
+import type { KDataTableColumnType } from './components/DataTable/types';
+export type KnitifyOptions = {
+    /**
+     * KDataTable column types to register, keyed by type name — the same as
+     * calling `registerColumnType` for each. Declare each name in
+     * `KDataTableColumnTypes` first.
+     */
+    columnTypes?: Partial<Record<KDataTableColumnType, Component>>;
+};
 export * from './types';
 export * from './components/types';
 export * from './components';
 declare const _default: {
-    install(app: App): void;
+    install(app: App, options?: KnitifyOptions): void;
 };
 export default _default;

package/dist/types/utils/useTopmost.d.ts

@@ -14,4 +14,6 @@ import { type Ref } from 'vue';
  * regardless of which opened last, since the latter is a persistent panel
  * rather than something Escape should dismiss.
  */
-export declare function useTopmost(name: string, active: Ref<boolean>, priority?: () => number): () => boolean;
+export declare function useTopmost(name: string, active: Ref<boolean>, priority?: () => number): (() => boolean) & {
+    depth: Readonly<Ref<number, number>>;
+};