@knitify/vue 1.0.0 → 2.0.0

package/dist/types/components/ChatDock/store-keys.d.ts

@@ -0,0 +1,7 @@
+import { type InjectionKey } from 'vue';
+import type { ChatDockStore } from './messenger-types';
+export declare const chatDockStoreKey: InjectionKey<ChatDockStore>;
+/** Shares a store created with `useChatDock` with the component subtree. */
+export declare function provideChatDock(store: ChatDockStore): void;
+/** The store an ancestor provided, or `undefined` outside one. */
+export declare function injectChatDock(): ChatDockStore | undefined;

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

@@ -0,0 +1,134 @@
+export type KChatWindowState = 'expanded' | 'railed';
+export type KChatDockProps = {
+    /**
+     * Capacity floor, so a narrow dock still shows one window rather than
+     * nothing but heads. Gap, offset and window dimensions are deliberately not
+     * props — they are the CSS variables registered on `.KChatDock`, and the
+     * module measures them back rather than being told them twice.
+     */
+    minWindows?: number;
+};
+export type KChatDockEmits = {
+    reflow: [];
+    launcher: [];
+    /** After the panel opens or closes. */
+    panel: [open: boolean];
+    /** After each filter, including the reset when the panel closes. */
+    search: [query: string];
+    /**
+     * An item was picked. `opened` is `true` when the dock expanded an existing
+     * `KChatWindow` with that id itself; `false` means the app must mount one.
+     */
+    select: [id: string, opened: boolean];
+    /**
+     * A user expanded a railed window from its head, a `+N` popover row, or the
+     * window's own toggle. Distinct from `update:state` on the window, which
+     * also fires when a reflow un-rails by capacity.
+     */
+    activate: [id: string];
+};
+export type KChatDockSlots = {
+    default?(): any;
+    launcher?(): any;
+};
+/**
+ * `KChatWindow` teleports its head into the dock's rail, which makes it a
+ * multi-root (Fragment) component — unlike every other component in this
+ * package. A template `ref` on it resolves `$el` to the fragment's anchor
+ * text node, not the window element, so reading DOM properties (e.g.
+ * `.classList`) off that ref will throw.
+ */
+export type KChatWindowProps = {
+    closable?: boolean;
+    minimizable?: boolean;
+    title?: string;
+    unread?: number;
+    /**
+     * Links this window to its head in the rail. Core reads it from
+     * `data-kt-chat-window` to pair the two, so a window without one gets no
+     * head — which is legitimate, just headless.
+     */
+    id?: string;
+};
+export type KChatWindowEmits = {
+    close: [];
+};
+export type KChatWindowSlots = {
+    actions?(): any;
+    /**
+     * The fallback for `head` and `row` — a railed head's circle and a `+N`
+     * popover row. It does NOT appear in an open window's header: the title
+     * already names the conversation there, and the 320px header has the
+     * minimize and close controls competing for it.
+     */
+    avatar?(): any;
+    default?(): any;
+    /** A railed head's circle. Falls back to `avatar` when not given. */
+    head?(): any;
+    /** The popover row's avatar. Falls back to `avatar` when not given. */
+    row?(): any;
+    title?(): any;
+};
+export type KChatDockPanelProps = {
+    /** Header text. */
+    title?: string;
+    /** Search field placeholder. */
+    placeholder?: string;
+};
+/**
+ * `KChatDockPanel` teleports into the dock's row zone, so it is multi-root
+ * like `KChatWindow`: a template `ref` on it resolves `$el` to a fragment
+ * anchor, not the panel element.
+ */
+export type KChatDockPanelSlots = {
+    /** `KChatDockItem`s. */
+    default?(): any;
+    /**
+     * Header controls, between the title and the close button — so close stays
+     * last in the DOM and in the tab order. Rendered only when passed.
+     *
+     * Controls here bind their own handlers. Do not put
+     * `data-kt-chat-dock-item` on anything in this slot: `KChatDock`'s root
+     * click handler routes that attribute as a conversation selection.
+     */
+    actions?(): any;
+    /** Replaces the "No conversations found" text. */
+    empty?(): any;
+};
+export type KChatDockItemProps = {
+    /** Conversation id, the same page-wide id space as `KChatWindow`'s `id`. */
+    id: string;
+    name: string;
+    /** One-line last-message preview, muted and truncated. */
+    preview?: string;
+    unread?: number;
+};
+export type KChatDockItemSlots = {
+    /** Inside the avatar circle. Falls back to initials from `name`. */
+    avatar?(): any;
+    /**
+     * Replaces the avatar circle entirely, for an app that draws its own — a
+     * stack of participant avatars for a group, a presence dot overlaid on the
+     * photo. `avatar` fills the built-in circle; this one stands in for it, so
+     * use it instead of nesting a circle inside `KAvatar`.
+     *
+     * Like `trailing`, this renders inside the row's own `<button>`: keep the
+     * content non-interactive, or the parser closes the button early and breaks
+     * `data-kt-chat-dock-item` click routing for every row after it.
+     */
+    media?(): any;
+    /**
+     * After the body, where the unread badge sits. Falls back to that badge, so
+     * a row that does not use this slot is unchanged. Replacing the badge does
+     * not change the row's accessible name, which still folds in `unread` —
+     * keep the two consistent or pass a matching `unread`.
+     *
+     * This slot renders inside the row's own `<button>` — non-interactive
+     * content only (a badge, a timestamp). A nested `<button>` (e.g. a mute
+     * control) is invalid HTML: the parser repairs it by closing the outer
+     * button early, corrupting the row and breaking
+     * `data-kt-chat-dock-item` click routing for everything after it. For a
+     * real control, render it outside the row instead.
+     */
+    trailing?(): any;
+};

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

@@ -0,0 +1,11 @@
+import type { ChatDockLoaders, ChatDockOptions, ChatDockStore } from './messenger-types';
+/**
+ * Owns everything about a dock's conversations except the DOM: which windows
+ * are open, each one's messages, cursor, loading state, error and draft, and
+ * every call to the app's loaders. `KMessenger` renders it; any component can
+ * hold the same instance through `provideChatDock` / `injectChatDock`.
+ *
+ * Every action is idempotent and safe before the list has loaded. None throws:
+ * a loader rejection becomes `error` / `listError` and an `'error'` event.
+ */
+export declare function useChatDock(loaders: ChatDockLoaders, options?: ChatDockOptions): ChatDockStore;

package/dist/types/components/Collapse/KCollapse.vue.d.ts

@@ -10,16 +10,16 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     expand: () => boolean;
     collapse: () => boolean;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    expanded: () => any;
     collapse: () => any;
     collapsed: () => any;
     expand: () => any;
-    expanded: () => any;
     "update:expanded": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onExpanded?: (() => any) | undefined;
     onCollapse?: (() => any) | undefined;
     onCollapsed?: (() => any) | undefined;
     onExpand?: (() => any) | undefined;
-    onExpanded?: (() => any) | undefined;
     "onUpdate:expanded"?: ((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/Collapse/useCollapseSync.d.ts

@@ -10,11 +10,13 @@ export type CollapseSyncOptions = {
 /**
  * Two-way binding between a `v-model` and core's Collapse module.
  *
- * `data-kt-collapse` stays on the element, so core's delegated toggle keeps
- * working — including `data-kt-collapse-group`, where opening one pane closes
- * its siblings through core rather than through Vue. Each sibling hears its own
- * `kt.collapse` and updates its own model, so grouping needs no coordination
- * here.
+ * `data-kt-collapse` stays on the element, so `data-kt-collapse-group` keeps
+ * working: opening one pane closes its siblings inside core's `expand()` rather
+ * than through Vue. Each sibling hears its own `kt.collapse` and updates its own
+ * model, so grouping needs no coordination here.
+ *
+ * The toggle click is bound below rather than left to core's delegated handler,
+ * so a collapse works in an app that never called `Knitify.init()`.
  *
  * The guard is `moduleExpanded` — which way the module is actually going —
  * rather than a flag set around the model write. Vue 3.5 batches reactive

package/dist/types/components/Drawer/KDrawer.vue.d.ts

@@ -13,16 +13,16 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
 } & {
+    shown: () => any;
     hidden: () => any;
     hide: () => any;
     show: () => any;
-    shown: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onShown?: (() => any) | undefined;
     onHidden?: (() => any) | undefined;
     onHide?: (() => any) | undefined;
-    onShow?: (() => any) | undefined;
-    onShown?: (() => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onShow?: (() => 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/Dropdown/KDropdown.vue.d.ts

@@ -10,12 +10,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     show: () => boolean;
     hide: () => boolean;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    hidden: () => any;
     shown: () => any;
+    hidden: () => any;
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onHidden?: (() => any) | undefined;
     onShown?: (() => any) | undefined;
+    onHidden?: (() => any) | undefined;
     "onUpdate:open"?: ((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/Input/types.d.ts

@@ -4,7 +4,7 @@ export type KInputSlots = {
 };
 export type KInputProps = {
     addonBordered?: boolean;
-    /** Implies `textarea`. Growth is core's `Input.ts`, so it needs `Knitify.init()`. */
+    /** Implies `textarea`. Growth is core's `Input.ts`, driven by this component. */
     autosize?: boolean;
     disabled?: boolean;
     ghost?: boolean;

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

@@ -15,16 +15,16 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
 } & {
+    shown: () => any;
     hidden: () => any;
     hide: () => any;
     show: () => any;
-    shown: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onShown?: (() => any) | undefined;
     onHidden?: (() => any) | undefined;
     onHide?: (() => any) | undefined;
-    onShow?: (() => any) | undefined;
-    onShown?: (() => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onShow?: (() => 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/Popover/KPopover.vue.d.ts

@@ -10,12 +10,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     show: () => boolean;
     hide: () => boolean;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    hidden: () => any;
     shown: () => any;
+    hidden: () => any;
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onHidden?: (() => any) | undefined;
     onShown?: (() => any) | undefined;
+    onHidden?: (() => any) | undefined;
     "onUpdate:open"?: ((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/Popover/useOverlaySync.d.ts

@@ -2,6 +2,8 @@ import { type Ref, type ShallowRef } from 'vue';
 export type OverlayModule = {
     hide(): void;
     show(): void;
+    /** Core moves this to `<body>` while open, so it is outside the root. */
+    getContent?(): Element | null;
 };
 export type OverlaySyncOptions<T extends OverlayModule> = {
     /** Builds the core module against the root element. */
@@ -10,6 +12,12 @@ export type OverlaySyncOptions<T extends OverlayModule> = {
     element: Readonly<ShallowRef<HTMLElement | null>>;
     onEvent?: (name: 'shown' | 'hidden') => void;
     open: Ref<boolean>;
+    /**
+     * Opening this overlay closes every other mounted overlay sharing the group.
+     * Replaces the sweep core's delegated toggle did by querying
+     * `[data-kt-popover].is-active` across the page.
+     */
+    group?: string;
 };
 /**
  * Two-way binding between a `v-model` and core's Popover, Dropdown or Tooltip.
@@ -28,7 +36,13 @@ export type OverlaySyncOptions<T extends OverlayModule> = {
  * because Vue 3.5 batches reactive effects: a flag set around the model write
  * would already be cleared by the time even a `sync` watcher ran.
  */
-export declare function useOverlaySync<T extends OverlayModule>({ create, element, onEvent, open, }: OverlaySyncOptions<T>): {
+export declare function useOverlaySync<T extends OverlayModule>({ create, element, group, onEvent, open, }: OverlaySyncOptions<T>): {
+    /**
+     * The live core instance, for module-specific behaviour a wrapper binds
+     * itself — Dropdown's submenus, for instance. Undefined before the root
+     * element exists.
+     */
+    getInstance: () => T | undefined;
     hide: () => void;
     show: () => void;
     toggle: () => void;

package/dist/types/components/Spinner/KSpinner.vue.d.ts

@@ -0,0 +1,6 @@
+import { KSpinnerProps } from './types';
+declare const __VLS_export: import("vue").DefineComponent<KSpinnerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KSpinnerProps> & Readonly<{}>, {
+    label: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,13 @@
+import { Intent, Size } from '../../types';
+export type KSpinnerSize = Extract<Size, 'sm' | 'md' | 'lg'>;
+export type KSpinnerProps = {
+    /**
+     * Hide the spinner from assistive technology. Use when adjacent visible text
+     * already announces the loading state.
+     */
+    decorative?: boolean;
+    /** Announced by screen readers to describe what is loading. */
+    label?: string;
+    size?: KSpinnerSize;
+    variant?: Intent;
+};

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

@@ -1,5 +1,8 @@
 export { accordionGroupKey } from './Accordion/keys';
 export { chatBusyKey } from './Chat/keys';
+export { chatDockKey } from './ChatDock/keys';
+export { chatDockStoreKey, injectChatDock, provideChatDock, } from './ChatDock/store-keys';
+export { useChatDock } from './ChatDock/useChatDock';
 export { default as KAccordion } from './Accordion/KAccordion.vue';
 export { default as KAccordionItem } from './Accordion/KAccordionItem.vue';
 export { default as KAlert } from './Alert/KAlert.vue';
@@ -12,10 +15,18 @@ export { default as KButton } from './Button/KButton.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';
+export { default as KChatDock } from './ChatDock/KChatDock.vue';
+export { default as KChatDockItem } from './ChatDock/KChatDockItem.vue';
+export { default as KChatDockPanel } from './ChatDock/KChatDockPanel.vue';
+export { default as KChatDivider } from './Chat/KChatDivider.vue';
+export { default as KMessenger } from './ChatDock/KMessenger.vue';
 export { default as KChatMessage } from './Chat/KChatMessage.vue';
+export { default as KChatMessageActions } from './Chat/KChatMessageActions.vue';
 export { default as KChatMessages } from './Chat/KChatMessages.vue';
+export { default as KChatNotice } from './Chat/KChatNotice.vue';
 export { default as KChatPrompt } from './Chat/KChatPrompt.vue';
 export { default as KChatShimmer } from './Chat/KChatShimmer.vue';
+export { default as KChatWindow } from './ChatDock/KChatWindow.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';
@@ -40,6 +51,7 @@ export { default as KPopover } from './Popover/KPopover.vue';
 export { default as KProgress } from './Progress/KProgress.vue';
 export { default as KRadio } from './Radio/KRadio.vue';
 export { default as KSelect } from './Select/KSelect.vue';
+export { default as KSpinner } from './Spinner/KSpinner.vue';
 export { default as KTab } from './Tabs/KTab.vue';
 export { default as KTable } from './Table/KTable.vue';
 export { default as KTabPanel } from './Tabs/KTabPanel.vue';

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

@@ -7,6 +7,9 @@ export * from './Button/types';
 export * from './Calendar/types';
 export * from './Card/types';
 export * from './Chat/types';
+export type { ChatDockCallResult, ChatDockContext, ChatDockInstance, } from './ChatDock/keys';
+export * from './ChatDock/types';
+export * from './ChatDock/messenger-types';
 export * from './Checkbox/types';
 export * from './Collapse/types';
 export * from './Container/types';
@@ -24,6 +27,7 @@ export * from './Popover/types';
 export * from './Progress/types';
 export * from './Radio/types';
 export * from './Select/types';
+export * from './Spinner/types';
 export * from './Table/types';
 export * from './Tabs/types';
 export * from './Toast/types';

package/dist/types/index.d.ts

@@ -1,4 +1,5 @@
 import { App } from 'vue';
+export * from './types';
 export * from './components/types';
 export * from './components';
 declare const _default: {

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

@@ -0,0 +1,19 @@
+import { type Ref } from 'vue';
+export type DocumentEventOptions = {
+    capture?: boolean;
+};
+/**
+ * A `document` listener that exists only while `active` is true.
+ *
+ * Outside-click and Escape cannot be bound to the component's own element —
+ * they are about events that happen elsewhere. Core solves this with a
+ * permanent delegated listener that runs on every click on the page and then
+ * queries the DOM for anything open. Scoping the listener to the open state
+ * instead means a closed component costs nothing, and the handler never has to
+ * ask whether it should be running.
+ *
+ * Registered on the next tick after `active` turns true, so the very click or
+ * keypress that opened the component cannot immediately close it again by
+ * reaching this listener as it bubbles.
+ */
+export declare function useDocumentEvent(active: Ref<boolean>, type: string, handler: (event: any) => void, options?: DocumentEventOptions): void;

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

@@ -0,0 +1,13 @@
+import { type Ref } from 'vue';
+/**
+ * Opening this overlay closes every other mounted member of `group`.
+ *
+ * Core got this from its delegated toggles, which swept the page — Popover
+ * hiding every other `[data-kt-popover].is-active`, Dropdown and Select calling
+ * `destroyAll`. Once each component binds its own toggle there is no sweep, so
+ * the group replaces it.
+ *
+ * Dropdowns and selects share one group, as they did in core: `Select` extends
+ * `Dropdown`, and opening either closed the other.
+ */
+export declare function useExclusive(group: string, open: Ref<boolean>, close: () => void): void;

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

@@ -0,0 +1,17 @@
+import { type Ref } from 'vue';
+/**
+ * Tracks whether this overlay is the innermost open one of its kind.
+ *
+ * Core answered the same question with a single delegated Escape handler that
+ * closed the first `.is-active` overlay it found. Once each component binds its
+ * own Escape, they would all close together, so the stack keeps that to one.
+ *
+ * Modals and drawers keep separate stacks, matching core's independent
+ * handlers: Escape in a drawer opened over a modal closes the drawer only.
+ *
+ * `priority` breaks the ordering where recency is the wrong answer. Core's
+ * drawer handler preferred a drawer with a backdrop over a `noBackdrop` one
+ * 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;