@mono-lit/helper 0.0.0-stage → 0.0.1

package/dist/src/components/tabs/tabs-types.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Tabs Component Type Definitions
+ */
+export type TabsSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type TabsColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'teal' | 'purple' | 'neutral' | 'dark';
+export type TabsVariant = 'underline' | 'pill' | 'ghost';
+/** Which way the strip runs. Written to the tablist's own `aria-orientation`. */
+export type TabsOrientation = 'horizontal' | 'vertical';
+export interface TabItem {
+    id: string;
+    label: string;
+    badge?: string | number;
+    disabled?: boolean;
+}
+export interface TabsCssClass {
+    root?: string;
+    tab?: string;
+    tabActive?: string;
+    tabDisabled?: string;
+    icon?: string;
+    label?: string;
+    badge?: string;
+    indicator?: string;
+}
+export type TabsClickEventDetail = {
+    modelValue: string;
+    currentValue: string;
+    oldValue: string;
+    value: string;
+    item: TabItem;
+    sourceEvent?: Event;
+};
+export type TabsClickEvent = CustomEvent<TabsClickEventDetail>;
+export interface TabsProps {
+    /** List of tabs to render. */
+    items?: TabItem[];
+    /** Two-way bound id of the active tab. */
+    modelValue?: string;
+    'model-value'?: string;
+    modelvalue?: string;
+    /** Id of the active tab (kept in sync with modelValue). */
+    value?: string;
+    /** Size of the tabs. */
+    size?: TabsSize;
+    /** Color theme of the tabs. */
+    color?: TabsColor;
+    /** Visual style of the tabs. */
+    variant?: TabsVariant;
+    /**
+     * Which way the strip runs (default `horizontal`). Sets the tablist's
+     * `aria-orientation`, which is what the vertical styling keys on.
+     */
+    orientation?: TabsOrientation;
+    /** Disables interaction with all tabs. */
+    disabled?: boolean;
+    /** Per-part class overrides for styling internal elements. */
+    cssClass?: TabsCssClass;
+    cssclass?: TabsCssClass;
+    'css-class'?: TabsCssClass | string;
+}
+export interface TabsEvents {
+    change: TabsClickEvent;
+    'mno-click': TabsClickEvent;
+    mnoClick: TabsClickEvent;
+}

package/dist/src/components/tag-input/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference path="../../../vue.d.ts" />
+export { MonoTagInput } from './mono-tag-input.js';
+export type { TagInputSize, TagInputColor, TagInputVariant, TagInputValidationState, TagInputValue, TagInputItem, TagInputDisplayValue, TagInputDisplayGroup, TagInputDataSource, TagInputLoadMore, TagInputCssClass, TagInputDropdownOptions, TagInputModelEventDetail, TagInputModelEvent, TagInputProps, TagInputEvents, TagInputChipProps, ChipBehaviour, } from './tag-input-types.js';
+export { validateTagInputProps, normalizeSuggestions, } from './tag-input-utils.js';

package/dist/src/components/tag-input/index.shadow.d.ts

@@ -0,0 +1,5 @@
+/// <reference path="../../../vue.d.ts" />
+export { MonoTagInputShadow } from './mono-tag-input.shadow.js';
+export { MonoTagInputCore, type TagInputSlotName } from './tag-input-core.js';
+export type { TagInputSize, TagInputColor, TagInputVariant, TagInputValidationState, TagInputValue, TagInputItem, TagInputDisplayValue, TagInputDisplayGroup, TagInputDataSource, TagInputLoadMore, TagInputCssClass, TagInputModelEventDetail, TagInputModelEvent, TagInputProps, TagInputEvents, TagInputChipProps, ChipBehaviour, } from './tag-input-types.js';
+export { validateTagInputProps, normalizeSuggestions, } from './tag-input-utils.js';

package/dist/src/components/tag-input/mono-tag-input.d.ts

@@ -0,0 +1,66 @@
+import { LitElement, TemplateResult } from 'lit';
+declare const MonoTagInput_base: import('../../composables/hybird-prop').Constructor<import('./tag-input-core.js').MonoTagInputCoreInterface> & typeof LitElement;
+/**
+ * Light-DOM `mono-tag-input` (default build, `@mono-lit/helper/ui/tag-input`).
+ *
+ * `createRenderRoot()` returns `this`, so it renders into light DOM and inherits
+ * the page's global stylesheet. Named slots (label/helper) are captured from the
+ * light-DOM children in `connectedCallback` and re-parented into the rendered
+ * `data-mono-slot` placeholders in `updated()`. All render-mode-agnostic logic is
+ * shared with the shadow build (`@mono-lit/helper/ui/shadow/tag-input`) via
+ * `MonoTagInputCore`; both register `mono-tag-input`, so a document loads one.
+ */
+export declare class MonoTagInput extends MonoTagInput_base {
+    static styles: import('lit').CSSResult[];
+    protected createRenderRoot(): HTMLElement;
+    private _slotsCaptured;
+    private _slotLabel;
+    private _slotHelper;
+    /**
+     * The consumer's `slot="list"` wrapper — ONE element holding their own `v-for`.
+     *
+     * Held as a single node and never opened: mono places the wrapper and leaves its children alone.
+     * Relocating them would break the consumer's next insert, since Vue positions a new row with
+     * `insertBefore(node, anchor)` against the sibling that mono had moved away.
+     */
+    private _slotList;
+    connectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    /**
+     * The captured wrapper, which is the truth for this build at every moment: parked out of the
+     * host before the panel exists, and inside the panel after. The core's default (a light child of
+     * the host) is the SHADOW build's answer and would find nothing here.
+     */
+    protected get _listSlotWrapper(): HTMLElement | null;
+    /** Light-DOM target for the list wrapper; the shadow build projects instead. */
+    protected renderListSlot(): TemplateResult;
+    /**
+     * Move the wrapper into the panel, once it exists.
+     *
+     * The panel is relocated into a body portal while open, so the target is queried through the
+     * core's portal-aware root rather than the host. Idempotent: once the wrapper is inside the
+     * target it is left alone, which matters because re-appending it on every render would blow away
+     * the consumer's scroll position and focus.
+     */
+    private _placeListSlot;
+    private _captureSlots;
+    /**
+     * Adopt a wrapper that appeared after `connectedCallback` — see `LateSlotWatcher`.
+     *
+     * Two things have to happen and the order matters. It is PARKED first, out of the host, because
+     * until it is placed it would otherwise paint in the host's own flow, under the field rather
+     * than inside the panel — that is the bug this exists for. Only then is the flag flipped, which
+     * schedules the render that creates the target `_placeListSlot` needs.
+     *
+     * Parking detached is safe for the subtree inside it: the consumer's `v-for` inserts against
+     * anchors that are its OWN children, and those move with it.
+     */
+    protected _onLateListSlot(): void;
+    private _placeSlot;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mono-tag-input': MonoTagInput;
+    }
+}
+export {};

package/dist/src/components/tag-input/mono-tag-input.shadow.d.ts

@@ -0,0 +1,40 @@
+import { LitElement, TemplateResult } from 'lit';
+import { TagInputSlotName } from './tag-input-core.js';
+declare const MonoTagInputShadow_base: import('../../composables/hybird-prop').Constructor<import('./tag-input-core.js').MonoTagInputCoreInterface> & typeof LitElement;
+export declare class MonoTagInputShadow extends MonoTagInputShadow_base {
+    static styles: import('lit').CSSResult[];
+    protected get _slotsAlwaysRender(): boolean;
+    connectedCallback(): void;
+    firstUpdated(changed: Map<string, unknown>): void;
+    protected updated(changed: Map<string, unknown>): void;
+    /**
+     * Slotted content stays in the LIGHT DOM, so the checkbox mono injects into it is out of reach
+     * of this build's scoped styles — the one place where projection's virtue (the page's CSS still
+     * applies) turns into a cost. The rules it needs are added to the document once, under an id, and
+     * only when a list slot actually asks for chrome; `checkboxCss` is already bundled here for the
+     * shadow root's own copy, so this costs no extra bytes.
+     */
+    protected _syncListChrome(): void;
+    private _slotFor;
+    private _slotHasContent;
+    private _onSlotChange;
+    /** A wrapper appeared after connect — the flag is all this build needs, projection does the rest. */
+    protected _onLateListSlot(): void;
+    /** Reconcile the 3 slot-presence flags from their slots' assigned content. */
+    private _scanSlots;
+    /**
+     * The consumer's list wrapper, PROJECTED rather than moved.
+     *
+     * Projection is what makes this work in a shadow root at all: slotted content stays in the light
+     * DOM, so the app's own stylesheet still reaches it. Moving those nodes inside the shadow root
+     * would cut them off from it — the same reason this build inlines SVGs instead of icon classes.
+     */
+    protected renderListSlot(): TemplateResult;
+    /** Native `<slot>` carrying the prop fallback as native slot content. */
+    protected _slotOutlet(name: TagInputSlotName, fallback?: unknown): TemplateResult;
+    /** Inline SVG — the global `.mono-icon`/`i-mdi-close` UnoCSS icon can't reach a
+     *  shadow root. (The caret and scroll chevrons are already inline SVG from
+     *  `composables/field-icons`, so they need no override.) */
+    protected renderIcon(_name: 'close'): TemplateResult;
+}
+export {};

package/dist/src/components/tag-input/tag-input-core.d.ts

@@ -0,0 +1,108 @@
+import { LitElement, TemplateResult } from 'lit';
+import { TagInputSize, TagInputColor, TagInputVariant, TagInputChipProps, TagInputDropdownOptions, TagInputValidationState, TagInputValue, TagInputItem, TagInputDataSource, TagInputLoadMore, TagInputDisplayValue, TagInputDisplayGroup, TagInputCssClass } from './tag-input-types.js';
+import { Constructor } from '../../composables/hybird-prop';
+import { CssSizeValue } from '../../composables/css-size';
+import { LateSlotWatcher } from '../../composables/light-slots';
+import { MonoSearchValue } from '../../search/data-search.js';
+/** Named slots projected by `mono-tag-input` (light: captured; shadow: native). */
+export type TagInputSlotName = 'label' | 'helper' | 'list';
+/**
+ * `MonoTagInputCore` — render-mode-agnostic logic for `mono-tag-input` (props,
+ * hybrid aliases, array value/model sync, DataSource paging, search, grouping,
+ * keyboard, tag chips, the popup controller, and the full `render()`). SSR-safe:
+ * every `document`/`window`/focus access is `isServer`-guarded. Each build
+ * supplies `createRenderRoot()` + `static styles`, the slot strategy (light
+ * captures children into `data-mono-slot` placeholders; shadow uses native
+ * `<slot>`), and the `_slotOutlet` / `renderIcon` hooks. Mirrors `select-core`.
+ */
+export declare const MonoTagInputCore: <T extends Constructor<LitElement>>(superClass: T) => Constructor<MonoTagInputCoreInterface> & T;
+/** Public + shared-protected surface added by the core mixin. */
+export declare class MonoTagInputCoreInterface {
+    /** True once a build has captured a `slot="list"`; swaps the generated rows for the slot. */
+    protected _hasListSlotState: boolean;
+    protected _lateListSlot: LateSlotWatcher;
+    protected _onLateListSlot(): void;
+    protected get _listSlotWrapper(): HTMLElement | null;
+    protected _watchListChrome(): void;
+    protected _stopWatchingListChrome(): void;
+    protected _syncListChrome(): void;
+    /** Per-build render point for the consumer's list wrapper. */
+    protected renderListSlot(): TemplateResult;
+    /** Delegated click over the consumer's rows, resolved by `data-mono-item-key`. */
+    protected _onListSlotClick: (event: Event) => void;
+    /** The list wrapper's parking spot, portal-aware. */
+    protected readonly _listSlotTarget: HTMLElement | null;
+    size: TagInputSize;
+    color: TagInputColor;
+    variant: TagInputVariant;
+    chip: TagInputChipProps;
+    modelValue: TagInputValue[];
+    value: TagInputValue[];
+    name: string;
+    label: string;
+    placeholder: string;
+    helperText: string;
+    validationState: TagInputValidationState;
+    validationMessage: string;
+    errorMessage: string;
+    successMessage: string;
+    ariaLabelText?: string;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    clearable: boolean;
+    allowCustom: boolean;
+    max?: number;
+    min?: number;
+    checkable: boolean;
+    maxVisible?: number;
+    minVisible?: number;
+    items: TagInputItem[];
+    dataSource: TagInputDataSource | null;
+    immediate: boolean;
+    loadMore?: TagInputLoadMore | '' | boolean;
+    pageSize: number;
+    dropdown?: TagInputDropdownOptions;
+    dropdownHeight: string | number;
+    dropdownMaxHeight: string | number;
+    flip: boolean;
+    shift: boolean;
+    keyValue: string;
+    displayValue: TagInputDisplayValue;
+    displayGroup: TagInputDisplayGroup;
+    groupKey: string;
+    groupItems: string;
+    group: boolean;
+    groupSticky: boolean;
+    selectAll: boolean;
+    selectAllLabel: string;
+    groupSelectAll: boolean;
+    searchable: boolean;
+    stayOpen: boolean;
+    searchValue: MonoSearchValue;
+    searchOperation: string;
+    searchDebounce: number;
+    cssClass: TagInputCssClass;
+    cssClassName: string;
+    width?: CssSizeValue;
+    height?: CssSizeValue;
+    minWidth?: CssSizeValue;
+    maxWidth?: CssSizeValue;
+    minHeight?: CssSizeValue;
+    maxHeight?: CssSizeValue;
+    focus(): void;
+    blur(): void;
+    readonly isOpen: boolean;
+    open(): void;
+    close(): void;
+    toggle(): void;
+    clearTags(): void;
+    addTag(value: TagInputValue): void;
+    removeTag(value: TagInputValue): void;
+    protected _hasLabelSlotState: boolean;
+    protected _hasHelperSlotState: boolean;
+    protected get _slotsAlwaysRender(): boolean;
+    protected _setSlotState(name: TagInputSlotName, has: boolean): void;
+    protected _slotOutlet(name: TagInputSlotName, fallback?: unknown): TemplateResult;
+    protected renderIcon(name: 'close'): TemplateResult;
+}