@knitify/vue 0.0.9 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +111 -0
- package/dist/index.es.js +4490 -221
- package/dist/index.umd.js +1 -1
- package/dist/types/components/Accordion/KAccordion.vue.d.ts +11 -0
- package/dist/types/components/Accordion/KAccordionItem.vue.d.ts +22 -0
- package/dist/types/components/Accordion/keys.d.ts +2 -0
- package/dist/types/components/Accordion/types.d.ts +37 -0
- package/dist/types/components/Alert/KAlert.vue.d.ts +11 -0
- package/dist/types/components/Alert/types.d.ts +18 -0
- package/dist/types/components/Avatar/KAvatar.vue.d.ts +15 -0
- package/dist/types/components/Avatar/KAvatarGroup.vue.d.ts +11 -0
- package/dist/types/components/Avatar/types.d.ts +130 -0
- package/dist/types/components/Badge/types.d.ts +2 -0
- package/dist/types/components/Breadcrumb/KBreadcrumb.vue.d.ts +11 -0
- package/dist/types/components/Breadcrumb/KBreadcrumbItem.vue.d.ts +11 -0
- package/dist/types/components/Breadcrumb/types.d.ts +23 -0
- package/dist/types/components/Button/types.d.ts +15 -4
- package/dist/types/components/Calendar/KCalendar.vue.d.ts +34 -0
- package/dist/types/components/Calendar/types.d.ts +26 -0
- package/dist/types/components/Card/KCard.vue.d.ts +11 -0
- package/dist/types/components/Card/types.d.ts +26 -0
- package/dist/types/components/Chat/KChat.vue.d.ts +14 -0
- package/dist/types/components/Chat/KChatDivider.vue.d.ts +11 -0
- package/dist/types/components/Chat/KChatMessage.vue.d.ts +11 -0
- package/dist/types/components/Chat/KChatMessageActions.vue.d.ts +18 -0
- package/dist/types/components/Chat/KChatMessages.vue.d.ts +11 -0
- package/dist/types/components/Chat/KChatNotice.vue.d.ts +11 -0
- package/dist/types/components/Chat/KChatPrompt.vue.d.ts +30 -0
- package/dist/types/components/Chat/KChatShimmer.vue.d.ts +11 -0
- package/dist/types/components/Chat/keys.d.ts +2 -0
- package/dist/types/components/Chat/types.d.ts +140 -0
- package/dist/types/components/ChatDock/KChatDock.vue.d.ts +45 -0
- package/dist/types/components/ChatDock/KChatDockItem.vue.d.ts +11 -0
- package/dist/types/components/ChatDock/KChatDockPanel.vue.d.ts +11 -0
- package/dist/types/components/ChatDock/KChatWindow.vue.d.ts +27 -0
- package/dist/types/components/ChatDock/KMessenger.vue.d.ts +23 -0
- package/dist/types/components/ChatDock/keys.d.ts +98 -0
- package/dist/types/components/ChatDock/messenger-types.d.ts +280 -0
- package/dist/types/components/ChatDock/store-keys.d.ts +7 -0
- package/dist/types/components/ChatDock/types.d.ts +134 -0
- package/dist/types/components/ChatDock/useChatDock.d.ts +11 -0
- package/dist/types/components/Checkbox/KCheckbox.vue.d.ts +20 -0
- package/dist/types/components/Checkbox/types.d.ts +23 -0
- package/dist/types/components/Collapse/KCollapse.vue.d.ts +32 -0
- package/dist/types/components/Collapse/types.d.ts +32 -0
- package/dist/types/components/Collapse/useCollapseSync.d.ts +31 -0
- package/dist/types/components/Drawer/KDrawer.vue.d.ts +34 -0
- package/dist/types/components/Drawer/types.d.ts +54 -0
- package/dist/types/components/Dropdown/KDropdown.vue.d.ts +28 -0
- package/dist/types/components/Dropdown/KDropdownItem.vue.d.ts +13 -0
- package/dist/types/components/Dropdown/KDropdownMenu.vue.d.ts +13 -0
- package/dist/types/components/Dropdown/types.d.ts +34 -0
- package/dist/types/components/FileTree/KFileTree.vue.d.ts +34 -0
- package/dist/types/components/FileTree/KFileTreeNode.vue.d.ts +20 -0
- package/dist/types/components/FileTree/types.d.ts +39 -0
- package/dist/types/components/Grid/KGrid.vue.d.ts +11 -0
- package/dist/types/components/Grid/KGridColumn.vue.d.ts +11 -0
- package/dist/types/components/Grid/KGridRow.vue.d.ts +19 -0
- package/dist/types/components/Grid/types.d.ts +41 -0
- package/dist/types/components/Grid/useGrid.d.ts +8 -0
- package/dist/types/components/Icon/types.d.ts +1 -1
- package/dist/types/components/Input/KInput.vue.d.ts +3 -1
- package/dist/types/components/Input/types.d.ts +8 -0
- package/dist/types/components/MenuList/KMenuList.vue.d.ts +11 -0
- package/dist/types/components/MenuList/KMenuListItem.vue.d.ts +11 -0
- package/dist/types/components/MenuList/types.d.ts +20 -0
- package/dist/types/components/Modal/KModal.vue.d.ts +36 -0
- package/dist/types/components/Modal/types.d.ts +57 -0
- package/dist/types/components/NotificationList/KNotificationList.vue.d.ts +11 -0
- package/dist/types/components/NotificationList/KNotificationListItem.vue.d.ts +11 -0
- package/dist/types/components/NotificationList/types.d.ts +36 -0
- package/dist/types/components/Popover/KPopover.vue.d.ts +28 -0
- package/dist/types/components/Popover/types.d.ts +24 -0
- package/dist/types/components/Popover/useOverlaySync.d.ts +49 -0
- package/dist/types/components/Progress/KProgress.vue.d.ts +11 -0
- package/dist/types/components/Progress/types.d.ts +19 -0
- package/dist/types/components/Radio/KRadio.vue.d.ts +20 -0
- package/dist/types/components/Radio/types.d.ts +20 -0
- package/dist/types/components/Select/KSelect.vue.d.ts +22 -0
- package/dist/types/components/Select/types.d.ts +30 -0
- package/dist/types/components/Spinner/KSpinner.vue.d.ts +6 -0
- package/dist/types/components/Spinner/types.d.ts +13 -0
- package/dist/types/components/Table/KTable.vue.d.ts +11 -0
- package/dist/types/components/Table/types.d.ts +16 -0
- package/dist/types/components/Tabs/KTab.vue.d.ts +13 -0
- package/dist/types/components/Tabs/KTabPanel.vue.d.ts +13 -0
- package/dist/types/components/Tabs/KTabs.vue.d.ts +25 -0
- package/dist/types/components/Tabs/types.d.ts +35 -0
- package/dist/types/components/Toast/types.d.ts +20 -0
- package/dist/types/components/Toast/useToast.d.ts +20 -0
- package/dist/types/components/Toggle/KToggle.vue.d.ts +20 -0
- package/dist/types/components/Toggle/types.d.ts +8 -0
- package/dist/types/components/Tooltip/KTooltip.vue.d.ts +45 -0
- package/dist/types/components/Tooltip/types.d.ts +18 -0
- package/dist/types/components/Workspace/KWorkspace.vue.d.ts +30 -0
- package/dist/types/components/Workspace/types.d.ts +29 -0
- package/dist/types/components/index.d.ts +56 -0
- package/dist/types/components/types.d.ts +31 -0
- package/dist/types/index.d.ts +1 -0
- package/dist/types/types.d.ts +1 -0
- package/dist/types/utils/useDocumentEvent.d.ts +19 -0
- package/dist/types/utils/useExclusive.d.ts +13 -0
- package/dist/types/utils/useTopmost.d.ts +17 -0
- package/dist/web-types.json +5107 -0
- package/package.json +22 -6
- package/dist/types/stories/KBadge.stories.d.ts +0 -104
- package/dist/types/stories/KButton.stories.d.ts +0 -117
- package/dist/types/stories/KContainer.stories.d.ts +0 -84
- package/dist/types/stories/KInput.stories.d.ts +0 -172
- package/dist/types/stories/KNavbar.stories.d.ts +0 -67
- package/dist/types/stories/KNavbarMenu.stories.d.ts +0 -99
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export type KProgressShape = 'linear' | 'circular' | 'semiCircular';
|
|
2
|
+
/** `md` is core's default and emits no modifier class. */
|
|
3
|
+
export type KProgressSize = 'sm' | 'md' | 'lg';
|
|
4
|
+
export type KProgressProps = {
|
|
5
|
+
/** Overrides the default `{percent}%` readout. The `label` slot wins over both. */
|
|
6
|
+
label?: string;
|
|
7
|
+
/** Upper bound for `value`. Core's fill runs on a 0–100 scale regardless. */
|
|
8
|
+
max?: number;
|
|
9
|
+
/** Fully rounds the track and fill. Linear only. */
|
|
10
|
+
rounded?: boolean;
|
|
11
|
+
shape?: KProgressShape;
|
|
12
|
+
/** Linear only — the circular shapes take their size from the container. */
|
|
13
|
+
size?: KProgressSize;
|
|
14
|
+
/** Clamped to 0…`max`. */
|
|
15
|
+
value?: number;
|
|
16
|
+
};
|
|
17
|
+
export type KProgressSlots = {
|
|
18
|
+
label?(): any;
|
|
19
|
+
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { KRadioProps, KRadioSlots } from './types';
|
|
2
|
+
type __VLS_Props = KRadioProps;
|
|
3
|
+
type __VLS_Slots = KRadioSlots;
|
|
4
|
+
type __VLS_ModelProps = {
|
|
5
|
+
modelValue?: unknown;
|
|
6
|
+
};
|
|
7
|
+
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
8
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
9
|
+
"update:modelValue": (value: unknown) => any;
|
|
10
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
11
|
+
"onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
|
|
12
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
13
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
14
|
+
declare const _default: typeof __VLS_export;
|
|
15
|
+
export default _default;
|
|
16
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
17
|
+
new (): {
|
|
18
|
+
$slots: S;
|
|
19
|
+
};
|
|
20
|
+
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Core ships no `--error` modifier — the one in its docs helper was removed —
|
|
3
|
+
* so there is deliberately no `error` prop here.
|
|
4
|
+
*/
|
|
5
|
+
export type KRadioProps = {
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
/** Text beside the dot. The default slot overrides it. */
|
|
8
|
+
label?: string;
|
|
9
|
+
/**
|
|
10
|
+
* Groups radios for keyboard navigation. Selection is driven by the shared
|
|
11
|
+
* `v-model`, so this is only needed when the group must also work natively —
|
|
12
|
+
* inside an uncontrolled form, say.
|
|
13
|
+
*/
|
|
14
|
+
name?: string;
|
|
15
|
+
/** What the shared model is set to when this radio is picked. */
|
|
16
|
+
value?: unknown;
|
|
17
|
+
};
|
|
18
|
+
export type KRadioSlots = {
|
|
19
|
+
default?(): any;
|
|
20
|
+
};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import type { KSelectProps, KSelectSlots } from './types';
|
|
2
|
+
type __VLS_Props = KSelectProps;
|
|
3
|
+
type __VLS_Slots = KSelectSlots;
|
|
4
|
+
type __VLS_ModelProps = {
|
|
5
|
+
modelValue?: string;
|
|
6
|
+
};
|
|
7
|
+
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
8
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
9
|
+
change: (value: string) => any;
|
|
10
|
+
"update:modelValue": (value: string | undefined) => any;
|
|
11
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
12
|
+
onChange?: ((value: string) => any) | undefined;
|
|
13
|
+
"onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
|
|
14
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
15
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
16
|
+
declare const _default: typeof __VLS_export;
|
|
17
|
+
export default _default;
|
|
18
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
19
|
+
new (): {
|
|
20
|
+
$slots: S;
|
|
21
|
+
};
|
|
22
|
+
};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { ClassValue } from 'vue';
|
|
2
|
+
export type KSelectOption = {
|
|
3
|
+
label: string;
|
|
4
|
+
value: string;
|
|
5
|
+
};
|
|
6
|
+
export type KSelectProps = {
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
/** Sprite href for the caret. */
|
|
9
|
+
icon?: string;
|
|
10
|
+
/** Renders the control inline rather than filling its container. */
|
|
11
|
+
inline?: boolean;
|
|
12
|
+
menuClass?: ClassValue;
|
|
13
|
+
/**
|
|
14
|
+
* A bare string is used as both value and label.
|
|
15
|
+
*
|
|
16
|
+
* Values are read back off a DOM attribute, so the model is always a string —
|
|
17
|
+
* numbers and objects are not preserved.
|
|
18
|
+
*/
|
|
19
|
+
options?: (KSelectOption | string)[];
|
|
20
|
+
/** Shown until something is chosen. */
|
|
21
|
+
placeholder?: string;
|
|
22
|
+
toggleClass?: ClassValue;
|
|
23
|
+
};
|
|
24
|
+
export type KSelectEmits = {
|
|
25
|
+
change: [value: string];
|
|
26
|
+
};
|
|
27
|
+
export type KSelectSlots = {
|
|
28
|
+
/** Replaces the generated items. Give each one `data-kt-select-item`. */
|
|
29
|
+
default?(): any;
|
|
30
|
+
};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { KSpinnerProps } from './types';
|
|
2
|
+
declare const __VLS_export: import("vue").DefineComponent<KSpinnerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KSpinnerProps> & Readonly<{}>, {
|
|
3
|
+
label: string;
|
|
4
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
5
|
+
declare const _default: typeof __VLS_export;
|
|
6
|
+
export default _default;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { Intent, Size } from '../../types';
|
|
2
|
+
export type KSpinnerSize = Extract<Size, 'sm' | 'md' | 'lg'>;
|
|
3
|
+
export type KSpinnerProps = {
|
|
4
|
+
/**
|
|
5
|
+
* Hide the spinner from assistive technology. Use when adjacent visible text
|
|
6
|
+
* already announces the loading state.
|
|
7
|
+
*/
|
|
8
|
+
decorative?: boolean;
|
|
9
|
+
/** Announced by screen readers to describe what is loading. */
|
|
10
|
+
label?: string;
|
|
11
|
+
size?: KSpinnerSize;
|
|
12
|
+
variant?: Intent;
|
|
13
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { KTableProps, KTableSlots } from './types';
|
|
2
|
+
type __VLS_Slots = KTableSlots;
|
|
3
|
+
declare const __VLS_base: import("vue").DefineComponent<KTableProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KTableProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
4
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
5
|
+
declare const _default: typeof __VLS_export;
|
|
6
|
+
export default _default;
|
|
7
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
8
|
+
new (): {
|
|
9
|
+
$slots: S;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/** `md` is core's default and emits no modifier class. */
|
|
2
|
+
export type KTableSize = 'md' | 'lg' | 'xl';
|
|
3
|
+
/**
|
|
4
|
+
* A styling wrapper over a real `<table>`, deliberately not a data grid. Core's
|
|
5
|
+
* Table is pure CSS, so the markup — and with it sorting, selection, and
|
|
6
|
+
* colspans — stays yours.
|
|
7
|
+
*/
|
|
8
|
+
export type KTableProps = {
|
|
9
|
+
borderless?: boolean;
|
|
10
|
+
hoverable?: boolean;
|
|
11
|
+
size?: KTableSize;
|
|
12
|
+
striped?: boolean;
|
|
13
|
+
};
|
|
14
|
+
export type KTableSlots = {
|
|
15
|
+
default?(): any;
|
|
16
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { KTabProps } from './types';
|
|
2
|
+
type __VLS_Slots = {
|
|
3
|
+
default?(): any;
|
|
4
|
+
};
|
|
5
|
+
declare const __VLS_base: import("vue").DefineComponent<KTabProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KTabProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
6
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
7
|
+
declare const _default: typeof __VLS_export;
|
|
8
|
+
export default _default;
|
|
9
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
10
|
+
new (): {
|
|
11
|
+
$slots: S;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { KTabPanelProps } from './types';
|
|
2
|
+
type __VLS_Slots = {
|
|
3
|
+
default?(): any;
|
|
4
|
+
};
|
|
5
|
+
declare const __VLS_base: import("vue").DefineComponent<KTabPanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KTabPanelProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
6
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
7
|
+
declare const _default: typeof __VLS_export;
|
|
8
|
+
export default _default;
|
|
9
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
10
|
+
new (): {
|
|
11
|
+
$slots: S;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import type { KTabsProps, KTabsSlots } from './types';
|
|
2
|
+
type __VLS_Props = KTabsProps;
|
|
3
|
+
type __VLS_Slots = KTabsSlots;
|
|
4
|
+
type __VLS_ModelProps = {
|
|
5
|
+
modelValue?: string;
|
|
6
|
+
};
|
|
7
|
+
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
8
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
9
|
+
show: (name: string) => string;
|
|
10
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
11
|
+
"update:modelValue": (value: string | undefined) => any;
|
|
12
|
+
} & {
|
|
13
|
+
shown: (name: string) => any;
|
|
14
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
15
|
+
"onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
|
|
16
|
+
onShown?: ((name: string) => any) | undefined;
|
|
17
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
18
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
19
|
+
declare const _default: typeof __VLS_export;
|
|
20
|
+
export default _default;
|
|
21
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
22
|
+
new (): {
|
|
23
|
+
$slots: S;
|
|
24
|
+
};
|
|
25
|
+
};
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import type { ComputedRef, InjectionKey } from 'vue';
|
|
2
|
+
export type KTabsVariant = 'pills' | 'underline';
|
|
3
|
+
export type KTabsProps = {
|
|
4
|
+
/** Names the tablist. */
|
|
5
|
+
ariaLabel?: string;
|
|
6
|
+
variant?: KTabsVariant;
|
|
7
|
+
};
|
|
8
|
+
export type KTabProps = {
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
/** Matches this tab to its panel, and is what `v-model` holds. */
|
|
11
|
+
name: string;
|
|
12
|
+
};
|
|
13
|
+
export type KTabPanelProps = {
|
|
14
|
+
/** Matches this panel to its tab. */
|
|
15
|
+
name: string;
|
|
16
|
+
};
|
|
17
|
+
export type KTabsEmits = {
|
|
18
|
+
(event: 'shown', name: string): void;
|
|
19
|
+
};
|
|
20
|
+
export type KTabsSlots = {
|
|
21
|
+
/** The panels. */
|
|
22
|
+
default?(): any;
|
|
23
|
+
/** The tab buttons, rendered into the tablist. */
|
|
24
|
+
tabs?(): any;
|
|
25
|
+
};
|
|
26
|
+
export type KTabsContext = {
|
|
27
|
+
active: ComputedRef<string | undefined>;
|
|
28
|
+
/**
|
|
29
|
+
* Core resolves a panel with `querySelector('#' + target)` without escaping,
|
|
30
|
+
* so the id is restricted to characters that are safe unquoted. Two names
|
|
31
|
+
* differing only in punctuation therefore collapse to the same id.
|
|
32
|
+
*/
|
|
33
|
+
panelId: (name: string) => string;
|
|
34
|
+
};
|
|
35
|
+
export declare const tabsKey: InjectionKey<KTabsContext>;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export type KToastPosition = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
|
|
2
|
+
export type KToastOptions = {
|
|
3
|
+
description?: string;
|
|
4
|
+
/** Milliseconds before it closes itself. */
|
|
5
|
+
duration?: number;
|
|
6
|
+
/**
|
|
7
|
+
* Leading glyph, as a raw **HTML string** — core assigns it with `innerHTML`,
|
|
8
|
+
* not as a sprite href. Never pass user-supplied content here.
|
|
9
|
+
*/
|
|
10
|
+
icon?: string;
|
|
11
|
+
position?: KToastPosition;
|
|
12
|
+
title: string;
|
|
13
|
+
};
|
|
14
|
+
/** Defaults applied to every toast raised through the returned helper. */
|
|
15
|
+
export type KToastDefaults = Omit<KToastOptions, 'title'>;
|
|
16
|
+
export type KToastHandle = {
|
|
17
|
+
close(): void;
|
|
18
|
+
pause(): void;
|
|
19
|
+
resume(): void;
|
|
20
|
+
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { KToastDefaults, KToastHandle, KToastOptions, KToastPosition } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* Toasts have no component because core's Toast has no markup to wrap:
|
|
4
|
+
* `new Toast({ title })` builds its own element, mounts it into a container it
|
|
5
|
+
* manages, and runs its own stacking and timers. A `<KToast>` would mean
|
|
6
|
+
* reimplementing that in Vue and letting the two drift apart.
|
|
7
|
+
*
|
|
8
|
+
* ```ts
|
|
9
|
+
* const toast = useToast({ position: 'bottom-right' })
|
|
10
|
+
* toast.show({ title: 'Saved', description: 'Your changes are live.' })
|
|
11
|
+
* ```
|
|
12
|
+
*
|
|
13
|
+
* Nothing here is reactive or tied to a component instance, so it can be called
|
|
14
|
+
* from a setup function, an event handler, or a plain module.
|
|
15
|
+
*/
|
|
16
|
+
export declare function useToast(defaults?: KToastDefaults): {
|
|
17
|
+
/** Dismisses every toast, or only those in one corner. */
|
|
18
|
+
closeAll(position?: KToastPosition): void;
|
|
19
|
+
show(options: KToastOptions): KToastHandle;
|
|
20
|
+
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { KToggleProps, KToggleSlots } from './types';
|
|
2
|
+
type __VLS_Props = KToggleProps;
|
|
3
|
+
type __VLS_Slots = KToggleSlots;
|
|
4
|
+
type __VLS_ModelProps = {
|
|
5
|
+
modelValue?: boolean;
|
|
6
|
+
};
|
|
7
|
+
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
8
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
9
|
+
"update:modelValue": (value: boolean) => any;
|
|
10
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
11
|
+
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
|
12
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
13
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
14
|
+
declare const _default: typeof __VLS_export;
|
|
15
|
+
export default _default;
|
|
16
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
17
|
+
new (): {
|
|
18
|
+
$slots: S;
|
|
19
|
+
};
|
|
20
|
+
};
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { type PropType, type VNode } from 'vue';
|
|
2
|
+
import type { KPlacement } from '../Popover/types';
|
|
3
|
+
/**
|
|
4
|
+
* Renderless by design. Core's tooltip has no content element in the markup —
|
|
5
|
+
* the trigger carries `data-kt-tooltip="label"` and core builds the bubble on
|
|
6
|
+
* first show — so this adds attributes to the trigger rather than wrapping it.
|
|
7
|
+
*
|
|
8
|
+
* That mirrors core's own docs helper, which uses React's `cloneElement`. A
|
|
9
|
+
* wrapper element would be the easy alternative, but it would sit in the layout
|
|
10
|
+
* and change how the trigger flows.
|
|
11
|
+
*
|
|
12
|
+
* A plain `<script>` rather than `<script setup>`: the component returns a
|
|
13
|
+
* render function so it can clone the slot's vnode, which a template cannot do.
|
|
14
|
+
*/
|
|
15
|
+
declare const _default: typeof __VLS_export;
|
|
16
|
+
export default _default;
|
|
17
|
+
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
18
|
+
delay: {
|
|
19
|
+
type: NumberConstructor;
|
|
20
|
+
required: false;
|
|
21
|
+
};
|
|
22
|
+
label: {
|
|
23
|
+
type: StringConstructor;
|
|
24
|
+
required: true;
|
|
25
|
+
};
|
|
26
|
+
placement: {
|
|
27
|
+
type: PropType<KPlacement>;
|
|
28
|
+
required: false;
|
|
29
|
+
};
|
|
30
|
+
}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
31
|
+
[key: string]: any;
|
|
32
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
33
|
+
delay: {
|
|
34
|
+
type: NumberConstructor;
|
|
35
|
+
required: false;
|
|
36
|
+
};
|
|
37
|
+
label: {
|
|
38
|
+
type: StringConstructor;
|
|
39
|
+
required: true;
|
|
40
|
+
};
|
|
41
|
+
placement: {
|
|
42
|
+
type: PropType<KPlacement>;
|
|
43
|
+
required: false;
|
|
44
|
+
};
|
|
45
|
+
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { KPlacement } from '../Popover/types';
|
|
2
|
+
export type KTooltipProps = {
|
|
3
|
+
/** Milliseconds to wait before opening on hover. */
|
|
4
|
+
delay?: number;
|
|
5
|
+
/**
|
|
6
|
+
* The label. Core writes it with `textContent`, so it is plain text by
|
|
7
|
+
* design — markup here would be shown literally, not rendered.
|
|
8
|
+
*/
|
|
9
|
+
label: string;
|
|
10
|
+
placement?: KPlacement;
|
|
11
|
+
};
|
|
12
|
+
export type KTooltipSlots = {
|
|
13
|
+
/**
|
|
14
|
+
* The trigger. A single element is cloned and given core's attributes, so no
|
|
15
|
+
* extra DOM node is introduced. Anything else is wrapped in a `<span>`.
|
|
16
|
+
*/
|
|
17
|
+
default?(): any;
|
|
18
|
+
};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import type { KWorkspaceProps, KWorkspaceSlots } from './types';
|
|
2
|
+
type __VLS_Props = KWorkspaceProps;
|
|
3
|
+
type __VLS_Slots = KWorkspaceSlots;
|
|
4
|
+
declare function toggle(): void;
|
|
5
|
+
declare function expand(): void;
|
|
6
|
+
declare function collapseSidebar(): void;
|
|
7
|
+
type __VLS_ModelProps = {
|
|
8
|
+
'expanded'?: boolean;
|
|
9
|
+
};
|
|
10
|
+
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
11
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
12
|
+
toggle: typeof toggle;
|
|
13
|
+
expand: typeof expand;
|
|
14
|
+
collapse: typeof collapseSidebar;
|
|
15
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
16
|
+
"update:expanded": (value: boolean) => any;
|
|
17
|
+
} & {
|
|
18
|
+
toggle: (value: boolean) => any;
|
|
19
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
20
|
+
onToggle?: ((value: boolean) => any) | undefined;
|
|
21
|
+
"onUpdate:expanded"?: ((value: boolean) => any) | undefined;
|
|
22
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
23
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
24
|
+
declare const _default: typeof __VLS_export;
|
|
25
|
+
export default _default;
|
|
26
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
27
|
+
new (): {
|
|
28
|
+
$slots: S;
|
|
29
|
+
};
|
|
30
|
+
};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { ClassValue } from 'vue';
|
|
2
|
+
export type KWorkspaceSide = 'left' | 'right';
|
|
3
|
+
export type KWorkspaceProps = {
|
|
4
|
+
bodyClass?: ClassValue;
|
|
5
|
+
bodyContentClass?: ClassValue;
|
|
6
|
+
bodySidebarClass?: ClassValue;
|
|
7
|
+
bodySidebarSide?: KWorkspaceSide;
|
|
8
|
+
collapsible?: boolean;
|
|
9
|
+
footerClass?: ClassValue;
|
|
10
|
+
height?: string;
|
|
11
|
+
mainClass?: ClassValue;
|
|
12
|
+
side?: KWorkspaceSide;
|
|
13
|
+
sidebarBodyClass?: ClassValue;
|
|
14
|
+
sidebarClass?: ClassValue;
|
|
15
|
+
sidebarInnerClass?: ClassValue;
|
|
16
|
+
topbarClass?: ClassValue;
|
|
17
|
+
};
|
|
18
|
+
export type KWorkspaceEmits = {
|
|
19
|
+
(event: 'toggle', value: boolean): void;
|
|
20
|
+
};
|
|
21
|
+
export type KWorkspaceSlots = {
|
|
22
|
+
bodySidebar?(): any;
|
|
23
|
+
default?(): any;
|
|
24
|
+
footer?(): any;
|
|
25
|
+
sidebar?(): any;
|
|
26
|
+
sidebarFooter?(): any;
|
|
27
|
+
sidebarHeader?(): any;
|
|
28
|
+
topbar?(): any;
|
|
29
|
+
};
|
|
@@ -1,6 +1,62 @@
|
|
|
1
|
+
export { accordionGroupKey } from './Accordion/keys';
|
|
2
|
+
export { chatBusyKey } from './Chat/keys';
|
|
3
|
+
export { chatDockKey } from './ChatDock/keys';
|
|
4
|
+
export { chatDockStoreKey, injectChatDock, provideChatDock, } from './ChatDock/store-keys';
|
|
5
|
+
export { useChatDock } from './ChatDock/useChatDock';
|
|
6
|
+
export { default as KAccordion } from './Accordion/KAccordion.vue';
|
|
7
|
+
export { default as KAccordionItem } from './Accordion/KAccordionItem.vue';
|
|
8
|
+
export { default as KAlert } from './Alert/KAlert.vue';
|
|
9
|
+
export { default as KAvatar } from './Avatar/KAvatar.vue';
|
|
10
|
+
export { default as KAvatarGroup } from './Avatar/KAvatarGroup.vue';
|
|
11
|
+
export { default as KBadge } from './Badge/KBadge.vue';
|
|
12
|
+
export { default as KBreadcrumb } from './Breadcrumb/KBreadcrumb.vue';
|
|
13
|
+
export { default as KBreadcrumbItem } from './Breadcrumb/KBreadcrumbItem.vue';
|
|
1
14
|
export { default as KButton } from './Button/KButton.vue';
|
|
15
|
+
export { default as KCalendar } from './Calendar/KCalendar.vue';
|
|
16
|
+
export { default as KCard } from './Card/KCard.vue';
|
|
17
|
+
export { default as KChat } from './Chat/KChat.vue';
|
|
18
|
+
export { default as KChatDock } from './ChatDock/KChatDock.vue';
|
|
19
|
+
export { default as KChatDockItem } from './ChatDock/KChatDockItem.vue';
|
|
20
|
+
export { default as KChatDockPanel } from './ChatDock/KChatDockPanel.vue';
|
|
21
|
+
export { default as KChatDivider } from './Chat/KChatDivider.vue';
|
|
22
|
+
export { default as KMessenger } from './ChatDock/KMessenger.vue';
|
|
23
|
+
export { default as KChatMessage } from './Chat/KChatMessage.vue';
|
|
24
|
+
export { default as KChatMessageActions } from './Chat/KChatMessageActions.vue';
|
|
25
|
+
export { default as KChatMessages } from './Chat/KChatMessages.vue';
|
|
26
|
+
export { default as KChatNotice } from './Chat/KChatNotice.vue';
|
|
27
|
+
export { default as KChatPrompt } from './Chat/KChatPrompt.vue';
|
|
28
|
+
export { default as KChatShimmer } from './Chat/KChatShimmer.vue';
|
|
29
|
+
export { default as KChatWindow } from './ChatDock/KChatWindow.vue';
|
|
30
|
+
export { default as KCheckbox } from './Checkbox/KCheckbox.vue';
|
|
31
|
+
export { default as KCollapse } from './Collapse/KCollapse.vue';
|
|
2
32
|
export { default as KContainer } from './Container/KContainer.vue';
|
|
33
|
+
export { default as KDrawer } from './Drawer/KDrawer.vue';
|
|
34
|
+
export { default as KDropdown } from './Dropdown/KDropdown.vue';
|
|
35
|
+
export { default as KDropdownItem } from './Dropdown/KDropdownItem.vue';
|
|
36
|
+
export { default as KDropdownMenu } from './Dropdown/KDropdownMenu.vue';
|
|
37
|
+
export { default as KFileTree } from './FileTree/KFileTree.vue';
|
|
38
|
+
export { default as KGrid } from './Grid/KGrid.vue';
|
|
39
|
+
export { default as KGridColumn } from './Grid/KGridColumn.vue';
|
|
40
|
+
export { default as KGridRow } from './Grid/KGridRow.vue';
|
|
3
41
|
export { default as KIcon } from './Icon/KIcon.vue';
|
|
4
42
|
export { default as KInput } from './Input/KInput.vue';
|
|
43
|
+
export { default as KMenuList } from './MenuList/KMenuList.vue';
|
|
44
|
+
export { default as KMenuListItem } from './MenuList/KMenuListItem.vue';
|
|
45
|
+
export { default as KModal } from './Modal/KModal.vue';
|
|
5
46
|
export { default as KNavbar } from './Navbar/KNavbar.vue';
|
|
6
47
|
export { default as KNavbarMenu } from './Navbar/KNavbarMenu.vue';
|
|
48
|
+
export { default as KNotificationList } from './NotificationList/KNotificationList.vue';
|
|
49
|
+
export { default as KNotificationListItem } from './NotificationList/KNotificationListItem.vue';
|
|
50
|
+
export { default as KPopover } from './Popover/KPopover.vue';
|
|
51
|
+
export { default as KProgress } from './Progress/KProgress.vue';
|
|
52
|
+
export { default as KRadio } from './Radio/KRadio.vue';
|
|
53
|
+
export { default as KSelect } from './Select/KSelect.vue';
|
|
54
|
+
export { default as KSpinner } from './Spinner/KSpinner.vue';
|
|
55
|
+
export { default as KTab } from './Tabs/KTab.vue';
|
|
56
|
+
export { default as KTable } from './Table/KTable.vue';
|
|
57
|
+
export { default as KTabPanel } from './Tabs/KTabPanel.vue';
|
|
58
|
+
export { default as KTabs } from './Tabs/KTabs.vue';
|
|
59
|
+
export { default as KToggle } from './Toggle/KToggle.vue';
|
|
60
|
+
export { default as KTooltip } from './Tooltip/KTooltip.vue';
|
|
61
|
+
export { default as KWorkspace } from './Workspace/KWorkspace.vue';
|
|
62
|
+
export { useToast } from './Toast/useToast';
|
|
@@ -1,5 +1,36 @@
|
|
|
1
|
+
export * from './Accordion/types';
|
|
2
|
+
export * from './Alert/types';
|
|
3
|
+
export * from './Avatar/types';
|
|
4
|
+
export * from './Badge/types';
|
|
5
|
+
export * from './Breadcrumb/types';
|
|
1
6
|
export * from './Button/types';
|
|
7
|
+
export * from './Calendar/types';
|
|
8
|
+
export * from './Card/types';
|
|
9
|
+
export * from './Chat/types';
|
|
10
|
+
export type { ChatDockCallResult, ChatDockContext, ChatDockInstance, } from './ChatDock/keys';
|
|
11
|
+
export * from './ChatDock/types';
|
|
12
|
+
export * from './ChatDock/messenger-types';
|
|
13
|
+
export * from './Checkbox/types';
|
|
14
|
+
export * from './Collapse/types';
|
|
2
15
|
export * from './Container/types';
|
|
16
|
+
export * from './Drawer/types';
|
|
17
|
+
export * from './Dropdown/types';
|
|
18
|
+
export * from './FileTree/types';
|
|
19
|
+
export * from './Grid/types';
|
|
3
20
|
export * from './Icon/types';
|
|
4
21
|
export * from './Input/types';
|
|
22
|
+
export * from './MenuList/types';
|
|
23
|
+
export * from './Modal/types';
|
|
5
24
|
export * from './Navbar/types';
|
|
25
|
+
export * from './NotificationList/types';
|
|
26
|
+
export * from './Popover/types';
|
|
27
|
+
export * from './Progress/types';
|
|
28
|
+
export * from './Radio/types';
|
|
29
|
+
export * from './Select/types';
|
|
30
|
+
export * from './Spinner/types';
|
|
31
|
+
export * from './Table/types';
|
|
32
|
+
export * from './Tabs/types';
|
|
33
|
+
export * from './Toast/types';
|
|
34
|
+
export * from './Toggle/types';
|
|
35
|
+
export * from './Tooltip/types';
|
|
36
|
+
export * from './Workspace/types';
|
package/dist/types/index.d.ts
CHANGED
package/dist/types/types.d.ts
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
1
|
export type Size = '5xs' | '4xs' | '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
|
|
2
2
|
export type Variant = 'brand' | 'success' | 'info' | 'attention' | 'danger';
|
|
3
|
+
export type Intent = 'caution' | 'warning' | 'critical' | 'info' | 'discovery' | 'affirm';
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { type Ref } from 'vue';
|
|
2
|
+
export type DocumentEventOptions = {
|
|
3
|
+
capture?: boolean;
|
|
4
|
+
};
|
|
5
|
+
/**
|
|
6
|
+
* A `document` listener that exists only while `active` is true.
|
|
7
|
+
*
|
|
8
|
+
* Outside-click and Escape cannot be bound to the component's own element —
|
|
9
|
+
* they are about events that happen elsewhere. Core solves this with a
|
|
10
|
+
* permanent delegated listener that runs on every click on the page and then
|
|
11
|
+
* queries the DOM for anything open. Scoping the listener to the open state
|
|
12
|
+
* instead means a closed component costs nothing, and the handler never has to
|
|
13
|
+
* ask whether it should be running.
|
|
14
|
+
*
|
|
15
|
+
* Registered on the next tick after `active` turns true, so the very click or
|
|
16
|
+
* keypress that opened the component cannot immediately close it again by
|
|
17
|
+
* reaching this listener as it bubbles.
|
|
18
|
+
*/
|
|
19
|
+
export declare function useDocumentEvent(active: Ref<boolean>, type: string, handler: (event: any) => void, options?: DocumentEventOptions): void;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { type Ref } from 'vue';
|
|
2
|
+
/**
|
|
3
|
+
* Opening this overlay closes every other mounted member of `group`.
|
|
4
|
+
*
|
|
5
|
+
* Core got this from its delegated toggles, which swept the page — Popover
|
|
6
|
+
* hiding every other `[data-kt-popover].is-active`, Dropdown and Select calling
|
|
7
|
+
* `destroyAll`. Once each component binds its own toggle there is no sweep, so
|
|
8
|
+
* the group replaces it.
|
|
9
|
+
*
|
|
10
|
+
* Dropdowns and selects share one group, as they did in core: `Select` extends
|
|
11
|
+
* `Dropdown`, and opening either closed the other.
|
|
12
|
+
*/
|
|
13
|
+
export declare function useExclusive(group: string, open: Ref<boolean>, close: () => void): void;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { type Ref } from 'vue';
|
|
2
|
+
/**
|
|
3
|
+
* Tracks whether this overlay is the innermost open one of its kind.
|
|
4
|
+
*
|
|
5
|
+
* Core answered the same question with a single delegated Escape handler that
|
|
6
|
+
* closed the first `.is-active` overlay it found. Once each component binds its
|
|
7
|
+
* own Escape, they would all close together, so the stack keeps that to one.
|
|
8
|
+
*
|
|
9
|
+
* Modals and drawers keep separate stacks, matching core's independent
|
|
10
|
+
* handlers: Escape in a drawer opened over a modal closes the drawer only.
|
|
11
|
+
*
|
|
12
|
+
* `priority` breaks the ordering where recency is the wrong answer. Core's
|
|
13
|
+
* drawer handler preferred a drawer with a backdrop over a `noBackdrop` one
|
|
14
|
+
* regardless of which opened last, since the latter is a persistent panel
|
|
15
|
+
* rather than something Escape should dismiss.
|
|
16
|
+
*/
|
|
17
|
+
export declare function useTopmost(name: string, active: Ref<boolean>, priority?: () => number): () => boolean;
|