@webx-ui/core 0.3.0 → 0.4.0

package/dist/components/Prose/Prose.d.ts

@@ -10,8 +10,8 @@ declare function __VLS_template(): {
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<ProseProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ProseProps> & Readonly<{}>, {
     size: import('./types').ProseSize;
-    html: string;
     as: string;
+    html: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/components/Radio/Radio.d.ts

@@ -22,8 +22,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
 }>, {
     name: string;
     size: import('../..').ControlSize;
-    label: string;
     disabled: boolean;
+    label: string;
     ariaLabel: string;
     id: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/RichText/RichText.d.ts

@@ -20,10 +20,10 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
     onFocus?: (() => any) | undefined;
     onUploadError?: ((error: unknown, file: File) => any) | undefined;
 }>, {
-    upload: import('./types').RichTextUpload;
     size: import('../..').ControlSize;
     disabled: boolean;
     placeholder: string;
+    upload: import('./types').RichTextUpload;
     ariaLabel: string;
     status: import('../..').ControlStatus;
     id: string;

package/dist/components/RichText/ToolbarButton.d.ts

@@ -12,9 +12,9 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClick?: (() => any) | undefined;
 }>, {
+    disabled: boolean;
     text: string;
     icon: string;
-    disabled: boolean;
     active: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
 export default _default;

package/dist/components/Select/Select.d.ts

@@ -13,32 +13,32 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    close: () => any;
-    search: (term: string) => any;
-    clear: () => any;
-    open: () => any;
     change: (value: SelectModelValue) => any;
+    search: (term: string) => any;
     "update:modelValue": (value: SelectModelValue) => any;
+    close: () => any;
+    open: () => any;
+    clear: () => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onClose?: (() => any) | undefined;
-    onSearch?: ((term: string) => any) | undefined;
-    onClear?: (() => any) | undefined;
-    onOpen?: (() => any) | undefined;
     onChange?: ((value: SelectModelValue) => any) | undefined;
+    onSearch?: ((term: string) => any) | undefined;
     "onUpdate:modelValue"?: ((value: SelectModelValue) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    onClear?: (() => any) | undefined;
 }>, {
     name: string;
+    multiple: boolean;
     size: import('../..').ControlSize;
     disabled: boolean;
-    teleport: boolean;
     placeholder: string;
+    teleport: boolean;
     ariaLabel: string;
     options: import('./types').SelectOption[];
     emptyText: string;
     clearable: boolean;
     status: import('../..').ControlStatus;
     id: string;
-    multiple: boolean;
     filterable: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

package/dist/components/Statistic/Statistic.d.ts

@@ -15,9 +15,9 @@ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<StatisticProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<StatisticProps> & Readonly<{}>, {
     size: import('./types').StatisticSize;
     title: string;
+    value: number | string;
     tone: import('..').TextTone;
     align: import('..').TextAlign;
-    value: number | string;
     precision: number;
     locale: string;
     grouping: boolean;

package/dist/components/Switch/Switch.d.ts

@@ -22,8 +22,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
 }>, {
     name: string;
     size: import('../..').ControlSize;
-    label: string;
     disabled: boolean;
+    label: string;
     ariaLabel: string;
     id: string;
     activeValue: ChoiceValue;

package/dist/components/Tab/Tab.d.ts

@@ -0,0 +1,32 @@
+import { TabProps } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /** The panel. */
+        default?: () => unknown;
+        /** Replaces `label` in the strip — an avatar, a coloured dot, anything. */
+        label?: () => unknown;
+    }> & {
+        /** The panel. */
+        default?: () => unknown;
+        /** Replaces `label` in the strip — an avatar, a coloured dot, anything. */
+        label?: () => unknown;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<TabProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TabProps> & Readonly<{}>, {
+    disabled: boolean;
+    label: string;
+    icon: import('..').IconName;
+    badge: string | number;
+    keepAlive: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,2 @@
+export { default as WxTab } from './Tab';
+export type * from './types';

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

@@ -0,0 +1,15 @@
+import { IconName } from '../Icon/types';
+import { TabValue } from '../Tabs/types';
+export interface TabProps {
+    /** Unique within the tabs; this is what `v-model` holds. */
+    value: TabValue;
+    /** Text of the tab itself. The `label` slot replaces it. */
+    label?: string;
+    /** Icon before the label. */
+    icon?: IconName;
+    /** A count or a short marker after the label. */
+    badge?: string | number;
+    disabled?: boolean;
+    /** Keep this one panel mounted while it is hidden, whatever the tabs say. */
+    keepAlive?: boolean;
+}

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

@@ -1,4 +1,4 @@
-import { RowKey, TableProps, TableRow, TableSort, TableState } from './types';
+import { RowKey, TableColumn, TableProps, TableRow, TableSort, TableState, TableSummaryRow } from './types';
 declare const _default: <T extends TableRow = TableRow>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly onSearch?: ((term: string) => any) | undefined;
@@ -20,10 +20,56 @@ declare const _default: <T extends TableRow = TableRow>(__VLS_props: NonNullable
         search?: string;
         page?: number;
         perPage?: number;
-    } & TableProps<T>) & any> & import('vue').PublicProps;
+    } & TableProps<T>) & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
-    slots: any;
+    slots: Readonly<{
+        [key: `header-${string}`]: ((props: {
+            column: TableColumn<T>;
+        }) => unknown) | undefined;
+        [key: `cell-${string}`]: ((props: {
+            row: T;
+            value: unknown;
+            index: number;
+            column: TableColumn<T>;
+        }) => unknown) | undefined;
+        [key: `summary-${string}`]: ((props: {
+            row: TableSummaryRow;
+            value: unknown;
+        }) => unknown) | undefined;
+        title?: () => unknown;
+        actions?: () => unknown;
+        empty?: () => unknown;
+        footer?: () => unknown;
+        loading?: () => unknown;
+        expanded?: (props: {
+            row: T;
+            index: number;
+        }) => unknown;
+    }> & {
+        [key: `header-${string}`]: ((props: {
+            column: TableColumn<T>;
+        }) => unknown) | undefined;
+        [key: `cell-${string}`]: ((props: {
+            row: T;
+            value: unknown;
+            index: number;
+            column: TableColumn<T>;
+        }) => unknown) | undefined;
+        [key: `summary-${string}`]: ((props: {
+            row: TableSummaryRow;
+            value: unknown;
+        }) => unknown) | undefined;
+        title?: () => unknown;
+        actions?: () => unknown;
+        empty?: () => unknown;
+        footer?: () => unknown;
+        loading?: () => unknown;
+        expanded?: (props: {
+            row: T;
+            index: number;
+        }) => unknown;
+    };
     emit: (((evt: "search", term: string) => void) & ((evt: "row-click", row: T, index: number, event: MouseEvent) => void) & ((evt: "sort-change", sort: TableSort | null) => void) & ((evt: "selection-change", keys: RowKey[], rows: T[]) => void) & ((evt: "expand-change", keys: RowKey[], rows: T[]) => void) & ((evt: "state-change", state: TableState) => void)) & (((evt: "update:page", value: number) => void) & ((evt: "update:perPage", value: number) => void) & ((evt: "update:selected", value: RowKey[]) => void) & ((evt: "update:expanded", value: RowKey[]) => void) & ((evt: "update:sort", value: TableSort | null) => void) & ((evt: "update:search", value: string) => void));
 }>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;

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

@@ -0,0 +1,58 @@
+import { TabsProps, TabValue } from './types';
+type __VLS_Props = TabsProps;
+declare function measure(): void;
+/**
+ * `instant` is for the first placement: a strip that opens on its eighth tab should
+ * already be there, not slide there while the page is still settling.
+ */
+declare function revealActive(instant?: boolean): void;
+type __VLS_PublicProps = {
+    modelValue?: TabValue | undefined;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /** The `WxTab`s. */
+        default?: () => unknown;
+        /** Sits at the end of the strip — a button, a filter, a count. */
+        extra?: () => unknown;
+    }> & {
+        /** The `WxTab`s. */
+        default?: () => unknown;
+        /** Sits at the end of the strip — a button, a filter, a count. */
+        extra?: () => unknown;
+    };
+    refs: {
+        scroller: HTMLDivElement;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {
+    measure: typeof measure;
+    revealActive: typeof revealActive;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (value: TabValue) => any;
+    "update:modelValue": (value: TabValue | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((value: TabValue) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: TabValue | undefined) => any) | undefined;
+}>, {
+    variant: import('./types').TabsVariant;
+    size: import('./types').TabsSize;
+    orientation: import('./types').TabsOrientation;
+    align: import('./types').TabsAlign;
+    ariaLabel: string;
+    loop: boolean;
+    keepAlive: boolean;
+    activationMode: import('./types').TabsActivationMode;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    scroller: HTMLDivElement;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,2 @@
+export { default as WxTabs } from './Tabs';
+export type * from './types';

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

@@ -0,0 +1,37 @@
+import { IconName } from '../Icon/types';
+/** Reka's tabs key their panels by string or number; ours do the same. */
+export type TabValue = string | number;
+export type TabsVariant = 'line' | 'pill' | 'card';
+export type TabsSize = 'sm' | 'md';
+export type TabsOrientation = 'horizontal' | 'vertical';
+export type TabsAlign = 'start' | 'center' | 'end' | 'stretch';
+export type TabsActivationMode = 'automatic' | 'manual';
+export interface TabsProps {
+    /** Underlined strip, a segmented control, or folder tabs. */
+    variant?: TabsVariant;
+    size?: TabsSize;
+    /** A column of tabs beside the panel. It falls back to a strip in a narrow container. */
+    orientation?: TabsOrientation;
+    /** Where the tabs sit in the strip; `stretch` splits the width between them. */
+    align?: TabsAlign;
+    /** Whether arrow keys switch the panel as they move, or only move focus. */
+    activationMode?: TabsActivationMode;
+    /** Keep hidden panels in the DOM, so form state and scroll position survive a switch. */
+    keepAlive?: boolean;
+    /** Arrow keys wrap around from the last tab to the first. */
+    loop?: boolean;
+    /** Accessible name for the tab strip. */
+    ariaLabel?: string;
+}
+export interface TabsEmits {
+    change: [value: TabValue];
+}
+/** What `WxTabs` reads off each `WxTab` in its slot to build the strip. */
+export interface TabDescriptor {
+    value: TabValue;
+    label?: string;
+    icon?: IconName;
+    badge?: string | number;
+    disabled: boolean;
+    labelSlot?: () => unknown;
+}

package/dist/components/TagsInput/TagsInput.d.ts

@@ -6,12 +6,12 @@ type __VLS_PublicProps = {
 declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
     focus: () => void | undefined;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    search: (term: string) => any;
     change: (value: string[]) => any;
+    search: (term: string) => any;
     "update:modelValue": (value: string[]) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onSearch?: ((term: string) => any) | undefined;
     onChange?: ((value: string[]) => any) | undefined;
+    onSearch?: ((term: string) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
 }>, {
     name: string;

package/dist/components/Text/Text.d.ts

@@ -10,8 +10,8 @@ declare function __VLS_template(): {
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<TextProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TextProps> & Readonly<{}>, {
     size: import('./types').TextSize;
-    tone: import('./types').TextTone;
     as: string;
+    tone: import('./types').TextTone;
     align: import('./types').TextAlign;
     truncate: boolean | number;
     weight: import('./types').TextWeight;

package/dist/components/Textarea/Textarea.d.ts

@@ -9,15 +9,15 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
     select: () => void | undefined;
     textarea: import('vue').Ref<HTMLTextAreaElement | null, HTMLTextAreaElement | null>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    input: (value: string) => any;
     change: (value: string) => any;
     "update:modelValue": (value: TextareaModelValue) => any;
+    input: (value: string) => any;
     blur: (event: FocusEvent) => any;
     focus: (event: FocusEvent) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onInput?: ((value: string) => any) | undefined;
     onChange?: ((value: string) => any) | undefined;
     "onUpdate:modelValue"?: ((value: TextareaModelValue) => any) | undefined;
+    onInput?: ((value: string) => any) | undefined;
     onBlur?: ((event: FocusEvent) => any) | undefined;
     onFocus?: ((event: FocusEvent) => any) | undefined;
 }>, {

package/dist/components/TimePicker/TimePicker.d.ts

@@ -12,7 +12,7 @@ type __VLS_PublicProps = {
 } & __VLS_Props;
 declare function __VLS_template(): {
     attrs: Partial<{}>;
-    slots: any;
+    slots: Readonly<Record<string, (props: Record<string, unknown>) => unknown>> & Record<string, (props: Record<string, unknown>) => unknown>;
     refs: {};
     rootEl: any;
 };
@@ -25,8 +25,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     name: string;
     size: import('../..').ControlSize;
     disabled: boolean;
-    teleport: boolean | string;
     placeholder: string;
+    teleport: boolean | string;
     ariaLabel: string;
     clearable: boolean;
     status: import('../..').ControlStatus;

package/dist/components/index.d.ts

@@ -1,3 +1,5 @@
+export * from './Accordion';
+export * from './AccordionItem';
 export * from './Action';
 export * from './Actions';
 export * from './Autocomplete';
@@ -25,6 +27,7 @@ export * from './Input';
 export * from './InputNumber';
 export * from './Link';
 export * from './Pagination';
+export * from './Popover';
 export * from './Prose';
 export * from './Radio';
 export * from './RadioGroup';
@@ -34,7 +37,9 @@ export * from './Select';
 export * from './Slider';
 export * from './Statistic';
 export * from './Switch';
+export * from './Tab';
 export * from './Table';
+export * from './Tabs';
 export * from './TagsInput';
 export * from './Text';
 export * from './Textarea';

package/dist/composables/useAccordion.d.ts

@@ -0,0 +1,16 @@
+import { ComputedRef, InjectionKey } from 'vue';
+export type AccordionSize = 'sm' | 'md';
+/** Boxed as one list, each panel its own card, or nothing but rules between them. */
+export type AccordionVariant = 'bordered' | 'separated' | 'plain';
+/** Which side of the header the chevron sits on. */
+export type AccordionIconPosition = 'start' | 'end';
+/** What `WxAccordion` hands down to the items inside it. */
+export interface AccordionContext {
+    size: ComputedRef<AccordionSize>;
+    variant: ComputedRef<AccordionVariant>;
+    iconPosition: ComputedRef<AccordionIconPosition>;
+    /** The element each header is written as, so a page keeps one heading outline. */
+    headingTag: ComputedRef<string>;
+}
+export declare const accordionKey: InjectionKey<AccordionContext>;
+export declare function useAccordion(): AccordionContext | null;