@knitify/vue 2.0.0 → 2.1.0

package/dist/types/components/Time/KTime.vue.d.ts

@@ -0,0 +1,18 @@
+import type { KTimeProps } from './types';
+type __VLS_Props = KTimeProps;
+type __VLS_ModelProps = {
+    modelValue?: string | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    clear: () => null;
+    focus: () => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (value: string) => any;
+    "update:modelValue": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,23 @@
+export type KTimeHourCycle = 12 | 24;
+export type KTimeProps = {
+    /** `12` adds AM/PM buttons; `24` shows 00–23. The value is always 24-hour. Default `12`. */
+    hourCycle?: KTimeHourCycle;
+    /** Latest selectable time, `HH:mm` or `HH:mm:ss`, inclusive. */
+    maxTime?: string;
+    /** Earliest selectable time, `HH:mm` or `HH:mm:ss`, inclusive. */
+    minTime?: string;
+    /** Minutes per + / − press (and ↑/↓ in the field), 1–30. Default `1`. */
+    minuteStep?: number;
+    /** The Now button's label. Default `'Now'`. */
+    nowLabel?: string;
+    /** Seconds per + / − press, 1–30. Default `1`. */
+    secondStep?: number;
+    /** Adds seconds; the value becomes `HH:mm:ss`. */
+    seconds?: boolean;
+    /** Shows a Now button that picks the current time. */
+    showNow?: boolean;
+};
+export type KTimeEmits = {
+    /** Enter was pressed in a part, or Now was picked. */
+    select: [value: string];
+};

package/dist/types/components/TimeInput/KTimeInput.vue.d.ts

@@ -0,0 +1,26 @@
+import type { KTimeInputInvalidReason, KTimeInputProps } from './types';
+type __VLS_Props = KTimeInputProps;
+type __VLS_ModelProps = {
+    modelValue?: string | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    clear: () => null;
+    close: () => void | undefined;
+    focus: () => void | undefined;
+    open: () => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    open: () => any;
+    close: () => any;
+    invalid: (reason: KTimeInputInvalidReason, text: string) => any;
+    clear: () => any;
+    "update:modelValue": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onOpen?: (() => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onInvalid?: ((reason: KTimeInputInvalidReason, text: string) => any) | undefined;
+    onClear?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,27 @@
+import type { KTimeProps } from '../Time/types';
+export type KTimeInputInvalidReason = 'incomplete' | 'out-of-range';
+export type KTimeInputProps = KTimeProps & {
+    /** Shows a × that clears the value while there is one. */
+    clearable?: boolean;
+    /** The × button's accessible name. Default `'Clear'`. */
+    clearLabel?: string;
+    disabled?: boolean;
+    ghost?: boolean;
+    /** Shows a spinner as the last addon and disables the clock button; the field stays editable. */
+    loading?: boolean;
+    /** Posts the value (`HH:mm` or `HH:mm:ss`, 24-hour) through a hidden input. */
+    name?: string;
+    /** Defaults to the layout, e.g. `hh:mm AA`. */
+    placeholder?: string;
+    readonly?: boolean;
+    rounded?: boolean;
+    sunken?: boolean;
+    transparent?: boolean;
+};
+export type KTimeInputEmits = {
+    /** The × cleared the value. */
+    clear: [];
+    close: [];
+    invalid: [reason: KTimeInputInvalidReason, text: string];
+    open: [];
+};

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

@@ -0,0 +1,22 @@
+import type { ShallowRef } from 'vue';
+import Knitify from '@knitify/core';
+type TimeInputModuleConfig = NonNullable<ConstructorParameters<typeof Knitify.modules.TimeInput>[1]>;
+type TimeInputControls = {
+    close(): void;
+    getValue(): string | null;
+    open(): void;
+    setValue(value: string | null): void;
+};
+type Options = {
+    root: Readonly<ShallowRef<HTMLElement | null>>;
+    /** Read inside a watcher, so every prop it touches triggers a rebuild. */
+    config: () => TimeInputModuleConfig;
+    /** Pushes the current model into a freshly built module. */
+    apply: (instance: TimeInputControls) => void;
+    listeners: Record<string, (event: CustomEvent) => void>;
+};
+export declare const syncClearButton: (element: unknown) => void;
+export declare function useTimeInput(options: Options): {
+    getInstance: () => TimeInputControls | undefined;
+};
+export {};

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

@@ -2,6 +2,8 @@ export type KToggleProps = {
     disabled?: boolean;
     /** Text beside the switch. The default slot overrides it. */
     label?: string;
+    /** Shows ON/OFF inside the track. Off by default. */
+    text?: boolean;
 };
 export type KToggleSlots = {
     default?(): any;

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

@@ -0,0 +1,33 @@
+import type { KTooltipProps } from './types';
+declare function onMouseover(event: MouseEvent): void;
+declare function onMouseout(event: MouseEvent): void;
+declare function onFocusin(event: FocusEvent): void;
+declare function onFocusout(event: FocusEvent): void;
+/** The trigger listeners, keyed by DOM event name. */
+export declare const triggerListeners: {
+    readonly focusin: typeof onFocusin;
+    readonly focusout: typeof onFocusout;
+    readonly mouseout: typeof onMouseout;
+    readonly mouseover: typeof onMouseover;
+};
+/** The same listeners as vnode props, for `cloneVNode`. */
+export declare const triggerListenerProps: {
+    onFocusin: typeof onFocusin;
+    onFocusout: typeof onFocusout;
+    onMouseout: typeof onMouseout;
+    onMouseover: typeof onMouseover;
+};
+/** Core's attributes for a label, placement and delay, as a plain record. */
+export declare function triggerAttributes(options: KTooltipProps): Record<string, string>;
+export declare const triggerAttributeNames: readonly ["data-kt-tooltip", "data-kt-tooltip-placement", "data-kt-tooltip-delay"];
+export declare function retainEscape(): void;
+export declare function releaseEscape(): void;
+/**
+ * A trigger unmounted while its tooltip is up would otherwise strand the
+ * bubble, which core has moved to `<body>`. With the trigger in hand, only its
+ * own tooltip closes — a row leaving a list must not close the tooltip of the
+ * row still under the pointer. Without one (KTooltip, which does not hold its
+ * child's element), every tooltip closes, as core's delegated version does.
+ */
+export declare function hideOnUnmount(trigger?: Element): void;
+export {};

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

@@ -16,3 +16,8 @@ export type KTooltipSlots = {
      */
     default?(): any;
 };
+/**
+ * The value of `v-tooltip`: a label, the full options, or a falsy value to
+ * turn the tooltip off.
+ */
+export type KTooltipDirectiveValue = string | KTooltipProps | null | undefined | false;

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

@@ -0,0 +1,10 @@
+import type { ObjectDirective } from 'vue';
+import type { KPlacement } from '../Popover/types';
+import type { KTooltipDirectiveValue } from './types';
+export declare const vTooltip: ObjectDirective<Element, KTooltipDirectiveValue, string, KPlacement>;
+export default vTooltip;
+declare module 'vue' {
+    interface GlobalDirectives {
+        vTooltip: typeof vTooltip;
+    }
+}

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

@@ -1,24 +1,36 @@
-import type { KWorkspaceProps, KWorkspaceSlots } from './types';
+import type { KWorkspaceDrawer, KWorkspaceProps, KWorkspaceSlots } from './types';
 type __VLS_Props = KWorkspaceProps;
 type __VLS_Slots = KWorkspaceSlots;
 declare function toggle(): void;
 declare function expand(): void;
 declare function collapseSidebar(): void;
+declare function openDrawer(target?: KWorkspaceDrawer): void;
+declare function closeDrawer(target?: KWorkspaceDrawer): void;
+declare function toggleDrawer(target?: KWorkspaceDrawer): void;
 type __VLS_ModelProps = {
     'expanded'?: boolean;
+    'open'?: boolean;
+    'bodyOpen'?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     toggle: typeof toggle;
     expand: typeof expand;
     collapse: typeof collapseSidebar;
+    openDrawer: typeof openDrawer;
+    closeDrawer: typeof closeDrawer;
+    toggleDrawer: typeof toggleDrawer;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:expanded": (value: boolean) => any;
+    "update:open": (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:bodyOpen"?: ((value: boolean) => 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/Workspace/types.d.ts

@@ -1,18 +1,28 @@
 import { ClassValue } from 'vue';
 export type KWorkspaceSide = 'left' | 'right';
+export type KWorkspaceBreakpoint = 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type KWorkspaceDrawer = 'sidebar' | 'bodySidebar';
 export type KWorkspaceProps = {
     bodyClass?: ClassValue;
     bodyContentClass?: ClassValue;
+    bodyDrawerAt?: KWorkspaceBreakpoint;
+    bodyDrawerWidth?: string;
     bodySidebarClass?: ClassValue;
     bodySidebarSide?: KWorkspaceSide;
+    bodySidebarWidth?: string;
     collapsible?: boolean;
+    drawerAt?: KWorkspaceBreakpoint;
+    drawerWidth?: string;
     footerClass?: ClassValue;
     height?: string;
     mainClass?: ClassValue;
+    rounded?: boolean;
     side?: KWorkspaceSide;
     sidebarBodyClass?: ClassValue;
     sidebarClass?: ClassValue;
+    sidebarHeaderClass?: ClassValue;
     sidebarInnerClass?: ClassValue;
+    sidebarWidth?: string;
     topbarClass?: ClassValue;
 };
 export type KWorkspaceEmits = {

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

@@ -3,9 +3,13 @@ export { chatBusyKey } from './Chat/keys';
 export { chatDockKey } from './ChatDock/keys';
 export { chatDockStoreKey, injectChatDock, provideChatDock, } from './ChatDock/store-keys';
 export { useChatDock } from './ChatDock/useChatDock';
+export { fieldKey } from './Field/keys';
+export { useFieldControl } from '../utils/useFieldControl';
 export { default as KAccordion } from './Accordion/KAccordion.vue';
 export { default as KAccordionItem } from './Accordion/KAccordionItem.vue';
 export { default as KAlert } from './Alert/KAlert.vue';
+export { default as KArticleList } from './ArticleList/KArticleList.vue';
+export { default as KArticleListItem } from './ArticleList/KArticleListItem.vue';
 export { default as KAvatar } from './Avatar/KAvatar.vue';
 export { default as KAvatarGroup } from './Avatar/KAvatarGroup.vue';
 export { default as KBadge } from './Badge/KBadge.vue';
@@ -27,14 +31,20 @@ 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 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 KDateInput } from './DateInput/KDateInput.vue';
+export { default as KDateRangeInput } from './DateInput/KDateRangeInput.vue';
+export { default as KDivider } from './Divider/KDivider.vue';
 export { default as KDrawer } from './Drawer/KDrawer.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';
+export { default as KField } from './Field/KField.vue';
 export { default as KFileTree } from './FileTree/KFileTree.vue';
+export { default as KFlex } from './Flex/KFlex.vue';
 export { default as KGrid } from './Grid/KGrid.vue';
 export { default as KGridColumn } from './Grid/KGridColumn.vue';
 export { default as KGridRow } from './Grid/KGridRow.vue';
@@ -47,16 +57,28 @@ export { default as KNavbar } from './Navbar/KNavbar.vue';
 export { default as KNavbarMenu } from './Navbar/KNavbarMenu.vue';
 export { default as KNotificationList } from './NotificationList/KNotificationList.vue';
 export { default as KNotificationListItem } from './NotificationList/KNotificationListItem.vue';
+export { default as KPagination } from './Pagination/KPagination.vue';
 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 KRadioCard } from './RadioCard/KRadioCard.vue';
+export { default as KRadioCardGroup } from './RadioCard/KRadioCardGroup.vue';
+export { default as KSearchInput } from './SearchInput/KSearchInput.vue';
+export { default as KSegmentedButton } from './SegmentedButtons/KSegmentedButton.vue';
+export { default as KSegmentedButtons } from './SegmentedButtons/KSegmentedButtons.vue';
 export { default as KSelect } from './Select/KSelect.vue';
+export { default as KSkeleton } from './Skeleton/KSkeleton.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 KTableResizer } from './Table/KTableResizer.vue';
 export { default as KTabPanel } from './Tabs/KTabPanel.vue';
 export { default as KTabs } from './Tabs/KTabs.vue';
+export { default as KTagsInput } from './TagsInput/KTagsInput.vue';
+export { default as KTime } from './Time/KTime.vue';
+export { default as KTimeInput } from './TimeInput/KTimeInput.vue';
 export { default as KToggle } from './Toggle/KToggle.vue';
 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';

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

@@ -1,10 +1,12 @@
 export * from './Accordion/types';
 export * from './Alert/types';
+export * from './ArticleList/types';
 export * from './Avatar/types';
 export * from './Badge/types';
 export * from './Breadcrumb/types';
 export * from './Button/types';
 export * from './Calendar/types';
+export * from './DateInput/types';
 export * from './Card/types';
 export * from './Chat/types';
 export type { ChatDockCallResult, ChatDockContext, ChatDockInstance, } from './ChatDock/keys';
@@ -13,9 +15,14 @@ export * from './ChatDock/messenger-types';
 export * from './Checkbox/types';
 export * from './Collapse/types';
 export * from './Container/types';
+export * from './Divider/types';
 export * from './Drawer/types';
+export * from './Field/types';
+export type { FieldContext } from './Field/keys';
+export type { UseFieldControlOptions } from '../utils/useFieldControl';
 export * from './Dropdown/types';
 export * from './FileTree/types';
+export * from './Flex/types';
 export * from './Grid/types';
 export * from './Icon/types';
 export * from './Input/types';
@@ -23,13 +30,21 @@ export * from './MenuList/types';
 export * from './Modal/types';
 export * from './Navbar/types';
 export * from './NotificationList/types';
+export * from './Pagination/types';
 export * from './Popover/types';
 export * from './Progress/types';
 export * from './Radio/types';
+export * from './RadioCard/types';
+export * from './SearchInput/types';
+export * from './SegmentedButtons/types';
 export * from './Select/types';
+export * from './Skeleton/types';
 export * from './Spinner/types';
 export * from './Table/types';
 export * from './Tabs/types';
+export * from './TagsInput/types';
+export * from './Time/types';
+export * from './TimeInput/types';
 export * from './Toast/types';
 export * from './Toggle/types';
 export * from './Tooltip/types';

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

@@ -0,0 +1,30 @@
+import type { ShallowRef } from 'vue';
+type Destroyable = {
+    destroy(): void;
+};
+type Options<Config, Controls> = {
+    root: Readonly<ShallowRef<HTMLElement | null>>;
+    /** Builds the core module on the root. */
+    create: (node: HTMLElement, config: Config) => Controls & Destroyable;
+    /** Read inside a watcher, so every prop it touches triggers a rebuild. */
+    config: () => Config;
+    /** Pushes the current model into a freshly built module. */
+    apply: (instance: Controls) => void;
+    listeners: Record<string, (event: CustomEvent) => void>;
+};
+/**
+ * The lifecycle the form-field wrappers share. Core reads its config once, in
+ * the constructor, so a config change means a rebuild rather than an update.
+ * Vue owns the root; core owns everything it renders inside.
+ */
+export declare function useCoreModule<Config, Controls>({ root, create, config, apply, listeners, }: Options<Config, Controls>): {
+    getInstance: () => Controls | undefined;
+};
+/**
+ * Core disables a field's × while it is empty, but only when it paints. One
+ * the template inserts later takes its state from the root's `is-empty`,
+ * which core keeps current, so it never sits enabled with nothing to clear.
+ * Bound as a function ref: Vue calls it each time the button renders.
+ */
+export declare function syncClearButtonFor(rootSelector: string): (element: unknown) => void;
+export {};

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

@@ -0,0 +1,25 @@
+type Attrs = Record<string, unknown>;
+export type UseFieldControlOptions = {
+    /** The control's own `disabled` prop. */
+    disabled: () => boolean;
+    /**
+     * The control is a button (KSelect's toggle). A button's name comes from its
+     * content, so it is labelled by the field label plus itself. It takes no
+     * `aria-required`, which ARIA does not allow on a button, so a required
+     * field's hidden "required" text joins its `aria-labelledby` instead.
+     */
+    button?: boolean;
+};
+/**
+ * Merges the enclosing KField's ids and state onto a control's native element.
+ * Outside a KField it hands `baseAttrs` back untouched. Inside a group field
+ * the ARIA lives on the fieldset, so only `disabled` is inherited.
+ *
+ * A non-group field wires exactly one control: two would share its id.
+ */
+export declare function useFieldControl(baseAttrs: () => Attrs, options: UseFieldControlOptions): {
+    controlAttrs: import("vue").ComputedRef<Attrs>;
+    isDisabled: import("vue").ComputedRef<boolean>;
+    field: import("..").FieldContext | undefined;
+};
+export {};

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

@@ -0,0 +1,15 @@
+import { type ClassValue, type Ref } from 'vue';
+/**
+ * Applies `classes` to `element` with `classList`, for a root whose classes
+ * core also writes.
+ *
+ * Core adds and removes its state classes (`is-active`, `is-shown`, …) on the
+ * root itself. A `:class` binding cannot share the element with it: whenever
+ * the bound value changes, Vue assigns `className` outright, wiping every class
+ * core added — so changing a modifier while the component was open hid it.
+ * Adding and removing only the classes this owns leaves core's alone.
+ *
+ * The root keeps its base class as a static `class` in the template. Vue
+ * writes that once, when the element is created, and never patches it.
+ */
+export declare function useRootClasses(element: Readonly<Ref<HTMLElement | null>>, classes: () => ClassValue): void;