import { AllDateTimeFormat } from 'hisonjs'; import { ApiDelete } from 'hisonjs'; import { ApiDeleteUrl } from 'hisonjs'; import { ApiGet } from 'hisonjs'; import { ApiGetUrl } from 'hisonjs'; import { ApiPatch } from 'hisonjs'; import { ApiPatchUrl } from 'hisonjs'; import { ApiPost } from 'hisonjs'; import { ApiPostUrl } from 'hisonjs'; import { ApiPut } from 'hisonjs'; import { ApiPutUrl } from 'hisonjs'; import { App } from 'vue'; import { Attrs } from 'vue'; import { CachingModule } from 'hisonjs'; import { Cell } from 'vanillagrid2'; import { CellData } from 'vanillagrid2'; import { CellRecord } from 'vanillagrid2'; import { Chart } from 'chart.js'; import { ChartData } from 'chart.js'; import type * as ChartNS from 'chart.js'; import { ChartOptions } from 'chart.js'; import { ChartType } from 'chart.js'; import { CheckByte } from 'vanillagrid2'; import { ClassNames } from 'vanillanote2'; import { ColInfo } from 'vanillagrid2'; import { Colors } from 'vanillanote2'; import { ColorSet } from 'vanillagrid2'; import { Component } from 'vue'; import { ComponentOptionsMixin } from 'vue'; import { ComponentProvideOptions } from 'vue'; import { ComponentPublicInstance } from 'vue'; import { ComputedRef } from 'vue'; import { Consts } from 'vanillanote2'; import { CountDateType } from 'hisonjs'; import { createHison } from 'hisonjs'; import { Csses } from 'vanillanote2'; import { CSSProperties } from 'vue'; import { Data } from 'hisonjs'; import { DataModel } from 'hisonjs'; import { DataModelFillter } from 'hisonjs'; import { DataModelFormatter } from 'hisonjs'; import { DataModelValidator } from 'hisonjs'; import { DataType } from 'vanillagrid2'; import { DataWrapper } from 'hisonjs'; import { DateFormat } from 'hisonjs'; import { DateObject } from 'hisonjs'; import { DateTimeFormat } from 'hisonjs'; import { DateTimeObject } from 'hisonjs'; import { DayFormat } from 'hisonjs'; import { DayOfWeekFormat } from 'hisonjs'; import { DayOfWeekFullName } from 'hisonjs'; import { DayOfWeekFullNameKR } from 'hisonjs'; import { DayOfWeekShortName } from 'hisonjs'; import { DayOfWeekShortNameKR } from 'hisonjs'; import { DefaultColInfo } from 'vanillagrid2'; import { DefaultGridCssInfo } from 'vanillagrid2'; import { DefaultGridInfo } from 'vanillagrid2'; import { Defaults } from 'chart.js'; import { DefineComponent } from 'vue'; import { documentEvent } from 'vanillagrid2'; import { DocumentEvents } from 'vanillanote2'; import { ExtractPropTypes } from 'vue'; import { getVanillagrid } from 'vanillagrid2'; import { getVanillagridConfig } from 'vanillagrid2'; import { getVanillanote } from 'vanillanote2'; import { getVanillanoteConfig } from 'vanillanote2'; import { Align as GridAlign } from 'vanillagrid2'; import { BasicDataType as GridBasicDataType } from 'vanillagrid2'; import { GridCssInfo } from 'vanillagrid2'; import { DateFormat as GridDateFormat } from 'vanillagrid2'; import { GridInfo } from 'vanillagrid2'; import { GridMethods } from 'vanillagrid2'; import { MonthFormat as GridMonthFormat } from 'vanillagrid2'; import { RowStatus as GridRowStatus } from 'vanillagrid2'; import { VerticalAlign as GridVerticalAlign } from 'vanillagrid2'; import { Hison as Hison_2 } from 'hisonjs'; import { HourFormat } from 'hisonjs'; import { HourMinuteFormat } from 'hisonjs'; import { InterfaceApiDelete } from 'hisonjs'; import { InterfaceApiDeleteUrl } from 'hisonjs'; import { InterfaceApiGet } from 'hisonjs'; import { InterfaceApiGetUrl } from 'hisonjs'; import { InterfaceApiPatch } from 'hisonjs'; import { InterfaceApiPatchUrl } from 'hisonjs'; import { InterfaceApiPost } from 'hisonjs'; import { InterfaceApiPostUrl } from 'hisonjs'; import { InterfaceApiPut } from 'hisonjs'; import { InterfaceApiPutUrl } from 'hisonjs'; import { InterfaceCachingModule } from 'hisonjs'; import { InterfaceDataModel } from 'hisonjs'; import { InterfaceDataWrapper } from 'hisonjs'; import { LanguagePack } from 'vanillanote2'; import { LanguageSet } from 'vanillanote2'; import { Link } from 'hisonjs'; import { LooseRequired } from '@vue/shared'; import { MinuteFormat } from 'hisonjs'; import { MonthFormat } from 'hisonjs'; import { MonthFullName } from 'hisonjs'; import { MonthShortName } from 'hisonjs'; import { NoteData } from 'vanillanote2'; import { NoteFileData } from 'vanillanote2'; import { NoteImageData } from 'vanillanote2'; import { NoteLinkData } from 'vanillanote2'; import { NoteModeByDevice } from 'vanillanote2'; import { ToolPosition as NoteToolPosition } from 'vanillanote2'; import { NoteVideoData } from 'vanillanote2'; import { PropType } from 'vue'; import { PublicProps } from 'vue'; import { Ref } from 'vue'; import { RendererElement } from 'vue'; import { RendererNode } from 'vue'; import { SecondFormat } from 'hisonjs'; import { SelectionPolicy } from 'vanillagrid2'; import { Shield } from 'hisonjs'; import { TimeFormat } from 'hisonjs'; import { TimeObject } from 'hisonjs'; import { Utils } from 'hisonjs'; import { Vanillagrid } from 'vanillagrid2'; import { VanillagridConfig } from 'vanillagrid2'; import { Vanillanote } from 'vanillanote2'; import { VanillanoteConfig } from 'vanillanote2'; import { VanillanoteElement } from 'vanillanote2'; import { Variables } from 'vanillanote2'; import { VNode } from 'vue'; import type * as VuecalNS from 'vue-cal'; import { YearFormat } from 'hisonjs'; import { YearMonthFormat } from 'hisonjs'; export { AllDateTimeFormat } export { ApiDelete } export { ApiDeleteUrl } export { ApiGet } export { ApiGetUrl } export { ApiPatch } export { ApiPatchUrl } export { ApiPost } export { ApiPostUrl } export { ApiPut } export { ApiPutUrl } /** * Represents a file item attached to the HFileset component. * * This interface is used to describe both server-provided files (already uploaded) * and new files selected via input or drag-and-drop. */ export declare interface AttachedFileItem { /** * Unique identifier of the file from the server. * Used to distinguish pre-existing files stored in the DB. */ fileId?: string; /** * Display name of the file (including extension). */ fileName: string; /** * Size of the file in bytes. * This may be undefined for server-loaded files unless provided. */ fileSize?: number; /** * Path or URL to download the file from the server. */ filePath?: string; /** * File extension, such as `pdf`, `jpg`, `docx`. * This is automatically extracted from `fileName` if not provided. */ extension?: string; /** * Native File object (from input or drag-and-drop). * Exists only for newly uploaded files. */ file?: File; /** * Indicates whether this file was newly added by the user. */ isNew?: boolean; /** * Indicates whether this file has been marked for deletion. * Deleted files will not appear in the visible file list. */ isDeleted?: boolean; } export declare const BACK_IMAGE_ALIGN_VALUES: readonly ["left", "center", "right"]; export declare const BACK_IMAGE_STYLE_VALUES: readonly ["repeat", "no-repeat", "cover", "contain"]; export declare const BACK_IMAGE_VERTICAL_ALIGN_VALUES: readonly ["top", "center", "bottom"]; export declare const BACKGROUND_TYPE_VALUES: readonly ["filled", "empty", "transparent"]; export declare enum BackgroundType { filled = "filled", empty = "empty", transparent = "transparent" } export declare type BackgroundTypeValue = 'filled' | 'empty' | 'transparent'; export declare enum BackImageAlign { left = "left", center = "center", right = "right" } export declare type BackImageAlignValue = 'left' | 'center' | 'right'; export declare enum BackImageRepeat { repeat = "repeat", no_repeat = "no-repeat", cover = "cover", contain = "contain" } export declare type BackImageRepeatValue = 'repeat' | 'no-repeat' | 'cover' | 'contain'; export declare enum BackImageVerticalAlign { top = "top", center = "center", bottom = "bottom" } export declare type BackImageVerticalAlignValue = 'top' | 'center' | 'bottom'; export { CachingModule } export { Cell } export { CellData } export { CellRecord } export { ChartNS } export { CheckByte } export { ClassNames } export { ColInfo } export declare enum Color { primary = "primary", muted = "muted", info = "info", success = "success", danger = "danger", warning = "warning", custom1 = "custom1", custom2 = "custom2", custom3 = "custom3", custom4 = "custom4", custom5 = "custom5" } export declare const COLOR_SET_VALUES: readonly ["skyblue", "blue", "light_red", "red", "light_green", "green", "orange", "yellow", "purple", "brown", "black"]; export { Colors } export { ColorSet } export declare interface ComponentConfig { /** * Use npm vanillanote2. See vanillanote2's specification. * The component's style follows HisonConfig's componentStyle property, so there may be properties in vanillanote that are ignored. */ note: VanillanoteConfig; /** * Use npm vanillagrid2. See vanillagrid's specification. * The component's style follows HisonConfig's componentStyle property, so there may be properties in vanillagrid that are ignored. */ grid: VanillagridConfig; /** * Use npm chart.js. ^4.5.0. See chartjs's specification. * chart.js default properties */ chart: Defaults; /** * The maximum size of all uploaded files that the fileset component will have by default. */ filesetTotalSize: number; /** * The maximum size per upload file that the fileset component will have by default. */ filesetSize: number; } /** * Basic methods in all components */ export declare interface ComponentMethods { isHisonvueComponent: true; /** * Returns the unique ID of the component. * This is the same as the `id` prop (or auto-generated if not set). */ getId(): string; /** * Returns the type of the component. */ getType(): string; /** * Returns whether this component is currently visible. * - `false` means `display: none` is applied. */ isVisible(): boolean; /** * Shows or hides this component. * - `true` makes this component visible. * - `false` applies `display: none`. */ setVisible(visible: boolean): void; /** * Forces this component to re-render by unmounting and remounting internally. * * This is useful when you want to apply dynamic style or class changes * (such as responsive styles or visibility) that are not automatically reflected * through reactive props alone. */ reload(): void; } export declare interface ComponentStyleConfig { size: Size.xs | Size.s | Size.m | Size.l | Size.xl; primaryColor: string; mutedColor: string; infoColor: string; successColor: string; dangerColor: string; warningColor: string; custom1Color: string; custom2Color: string; custom3Color: string; custom4Color: string; custom5Color: string; filledColor: string; emptyColor: string; filledTextColor: string; emptyTextColor: string; /** Whether to invert colors. Used in dark mode. */ invertColor: boolean; /** The default height of an element when it is small. The unit is 'rem'. (default 1.4) */ minHeightXS: number; /** The default height of an element when it is small. The unit is 'rem'. (default 1.7) */ minHeightS: number; /** The default height of an element when it is medium. The unit is 'rem'. (default 1.95) */ minHeightM: number; /** The default height of an element when it is large. The unit is 'rem'. (default 2.25) */ minHeightL: number; /** The default height of an element when it is extra large. The unit is 'rem'. (default 2.55) */ minHeightXL: number; /** The default font size of an element when it is small. The unit is 'rem'. (default 0.6) */ fontSizeXS: number; /** The default font size of an element when it is small. The unit is 'rem'. (default 0.7) */ fontSizeS: number; /** The default font size of an element when it is medium. The unit is 'rem'. (default 0.75) */ fontSizeM: number; /** The default font size of an element when it is large. The unit is 'rem'. (default 0.85) */ fontSizeL: number; /** The default font size of an element when it is extra large. The unit is 'rem'. (default 1) */ fontSizeXL: number; } export { Consts } export { CountDateType } export { createHison } export declare const CSS_VAR_RE: RegExp; export { Csses } export declare interface CssEvent { textbox_onBeforeFocus: (e: FocusEvent) => boolean; textbox_onAfterFocus: (e: FocusEvent) => void; textbox_onBeforeBlur: (e: FocusEvent) => boolean; textbox_onAfterBlur: (e: FocusEvent) => void; textbox_onBeforeClick: (e: MouseEvent) => boolean; textbox_onAfterClick: (e: MouseEvent) => void; textbox_onBeforeMouseover: (e: MouseEvent) => boolean; textbox_onAfterMouseover: (e: MouseEvent) => void; textbox_onBeforeMouseout: (e: MouseEvent) => boolean; textbox_onAfterMouseout: (e: MouseEvent) => void; textbox_onBeforeTouchstart: (e: TouchEvent) => boolean; textbox_onAfterTouchstart: (e: TouchEvent) => void; textbox_onBeforeTouchend: (e: TouchEvent) => boolean; textbox_onAfterTouchend: (e: TouchEvent) => void; button_onBeforeFocus: (e: FocusEvent) => boolean; button_onAfterFocus: (e: FocusEvent) => void; button_onBeforeBlur: (e: FocusEvent) => boolean; button_onAfterBlur: (e: FocusEvent) => void; button_onBeforeClick: (e: MouseEvent) => boolean; button_onAfterClick: (e: MouseEvent) => void; button_onBeforeMouseover: (e: MouseEvent) => boolean; button_onAfterMouseover: (e: MouseEvent) => void; button_onBeforeMouseout: (e: MouseEvent) => boolean; button_onAfterMouseout: (e: MouseEvent) => void; button_onBeforeTouchstart: (e: TouchEvent) => boolean; button_onAfterTouchstart: (e: TouchEvent) => void; button_onBeforeTouchend: (e: TouchEvent) => boolean; button_onAfterTouchend: (e: TouchEvent) => void; input_onBeforeFocus: (e: FocusEvent) => boolean; input_onAfterFocus: (e: FocusEvent) => void; input_onBeforeBlur: (e: FocusEvent) => boolean; input_onAfterBlur: (e: FocusEvent) => void; input_onBeforeMouseover: (e: MouseEvent) => boolean; input_onAfterMouseover: (e: MouseEvent) => void; input_onBeforeMouseout: (e: MouseEvent) => boolean; input_onAfterMouseout: (e: MouseEvent) => void; input_onBeforeTouchstart: (e: TouchEvent) => boolean; input_onAfterTouchstart: (e: TouchEvent) => void; input_onBeforeTouchend: (e: TouchEvent) => boolean; input_onAfterTouchend: (e: TouchEvent) => void; } export { Data } export declare const DATA_STATUS_VALUES: readonly ["C", "R", "U", "D"]; declare interface DataConfig { /** * A function that allows customization of how specific objects are inserted into a `DataModel`. * * In `hisondev`, all values inserted into a `DataModel` are **copied** to maintain data integrity. * However, certain JavaScript objects, such as `Date`, require a more flexible way of handling * their copying process. Instead of manually defining conversion logic for every object type, * `convertValue` provides a way for developers to customize how specific objects are transformed * before being inserted into a `DataModel`. * * - By default, this function **returns the input value as is**. * - Developers can override this function to implement custom conversion logic. * - Used in `DataModel._deepCopy(object)`, where it is applied to non-plain objects. * * ### Usage in `DataModel` * When copying an object, if it is not a plain `Object` or `Array`, `convertValue` is called: * ```typescript * if (object.constructor !== Object && object.constructor !== Array) { * const convertValue = customOption.data.convertValue(object); * return convertValue !== undefined ? convertValue : object; * } * ``` * * ### Example: Customizing `convertValue` to Handle `Date` Objects * ```typescript * hison.setConvertValue((value: any) => { * return value instanceof Date ? value.getTime() : value; * }); * ``` * * - The above example ensures that when a `Date` object is inserted into `DataModel`, * it is converted into a timestamp (`number`) instead of being copied as a reference. * * @param value The value to be processed before being inserted into `DataModel`. * @returns The customized or original value. */ convertValue(value: any): any; } export { DataModel } export { DataModelFillter } export { DataModelFormatter } export { DataModelValidator } export declare enum DataStatus { R = "R", C = "C", U = "U", D = "D" } export declare type DataStatusValue = typeof DATA_STATUS_VALUES[number]; export { DataType } export { DataWrapper } export { DateFormat } export { DateObject } export { DateTimeFormat } export { DateTimeObject } export { DayFormat } export declare enum DayOfWeek { sun = 0, mon = 1, tue = 2, wed = 3, thu = 4, fri = 5, sat = 6 } export { DayOfWeekFormat } export { DayOfWeekFullName } export { DayOfWeekFullNameKR } export { DayOfWeekShortName } export { DayOfWeekShortNameKR } export { DefaultColInfo } export { DefaultGridCssInfo } export { DefaultGridInfo } export declare type DeviceType = 'mb' | 'tb' | 'pc' | 'wd'; export { documentEvent } export { DocumentEvents } declare type DrawerPos = 'top' | 'bottom' | 'left' | 'right'; declare type DrawerPosition = 'top' | 'bottom' | 'left' | 'right'; export declare const DROPDOWN_TRIGGER_VALUES: readonly ["click", "hover"]; export declare enum DropdownTrigger { click = "click", hover = "hover" } export declare type DropdownTriggerValue = typeof DROPDOWN_TRIGGER_VALUES[number]; export declare const EDIT_MODE_VALUES: readonly ["editable", "disable", "readonly"]; export declare enum EditMode { editable = "editable", disable = "disable", readonly = "readonly" } export declare type EditModeValue = typeof EDIT_MODE_VALUES[number]; export declare const getDefaultHisonConfig: () => HisonConfig; export { getVanillagrid } export { getVanillagridConfig } export { getVanillanote } export { getVanillanoteConfig } export declare const GRID_ALIGN_VALUES: readonly ["left", "center", "right"]; export declare const GRID_DATE_FORMAT_VALUES: readonly ["yyyy-mm-dd", "yyyy/mm/dd", "yyyy. mm. dd", "yyyymmdd", "mm-dd-yyyy", "mm/dd/yyyy", "mm. dd. yyyy", "mmddyyyy", "dd-mm-yyyy", "dd/mm/yyyy", "dd. mm. yyyy", "ddmmyyyy"]; export declare const GRID_MONTH_FORMAT_VALUES: readonly ["yyyymm", "yyyy-mm", "yyyy/mm", "yyyy. mm", "mmyyyy", "mm-yyyy", "mm/yyyy", "mm. yyyy"]; export declare const GRID_VERTICAL_ALIGN_VALUES: readonly ["top", "center", "bottom"]; export { GridAlign } export declare type GridAlignValue = typeof GRID_ALIGN_VALUES[number]; export { GridBasicDataType } export { GridCssInfo } export { GridDateFormat } export declare type GridDateFormatValue = typeof GRID_DATE_FORMAT_VALUES[number]; export { GridInfo } export { GridMethods } export { GridMonthFormat } export declare type GridMonthFormatValue = typeof GRID_MONTH_FORMAT_VALUES[number]; export { GridRowStatus } export { GridVerticalAlign } export declare type GridVerticalAlignValue = typeof GRID_VERTICAL_ALIGN_VALUES[number]; export declare const H_CALENDAR_TIME_FORMAT_VALUES: readonly ["H", "HH", "h", "hh", "m", "mm", "H:m", "H:mm", "HH:m", "HH:mm", "h:m", "h:mm", "hh:m", "hh:mm", "H{am}", "HH{am}", "h{am}", "hh{am}", "m{am}", "mm{am}", "H:m{am}", "H:mm{am}", "HH:m{am}", "HH:mm{am}", "h:m{am}", "h:mm{am}", "hh:m{am}", "hh:mm{am}"]; export declare const H_CALENDAR_VIEW_VALUES: readonly ["day", "week", "month", "year", "years"]; export declare const H_GAP_LINE_STYLE_VALUES: readonly ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset"]; export declare const H_GAP_RULE_VALUES: readonly ["none", "horizontal", "vertical"]; export declare const HAccordion: DefineComponent>; required: boolean; }; style: { type: PropType; required: boolean; }; headerStyle: { type: PropType; required: boolean; }; contentStyle: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; defaultOpen: { type: BooleanConstructor; default: boolean; }; title: { type: StringConstructor; default: string; }; textAlign: { type: PropType; default: string; validator: (v: any) => boolean; }; animate: { type: BooleanConstructor; default: boolean; }; duration: { type: NumberConstructor; default: number; validator: (n: any) => boolean; }; easing: { type: StringConstructor; default: string; }; tabIndex: { type: PropType; default: null; validator: (v: any) => boolean; }; }>, { headerRef: Ref; contentRef: Ref; props: LooseRequired>; required: boolean; }; style: { type: PropType; required: boolean; }; headerStyle: { type: PropType; required: boolean; }; contentStyle: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; defaultOpen: { type: BooleanConstructor; default: boolean; }; title: { type: StringConstructor; default: string; }; textAlign: { type: PropType; default: string; validator: (v: any) => boolean; }; animate: { type: BooleanConstructor; default: boolean; }; duration: { type: NumberConstructor; default: number; validator: (n: any) => boolean; }; easing: { type: StringConstructor; default: string; }; tabIndex: { type: PropType; default: null; validator: (v: any) => boolean; }; }>> & Readonly<{ onClose?: ((...args: any[]) => any) | undefined; onToggle?: ((...args: any[]) => any) | undefined; onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; onOpen?: ((...args: any[]) => any) | undefined; }> & {}>; visibleClass: ComputedRef<"" | "hison-display-none">; responsiveClassList: Ref; isOpen: Ref; title: Ref; headerBoxStyle: ComputedRef< {}>; titleInlineStyle: ComputedRef< { textAlign: "left" | "center" | "right"; }>; rootInlineStyle: ComputedRef>; animate: Ref; tabIndex: Ref; onToggleClick: (e: MouseEvent | KeyboardEvent) => void; open: (e?: Event | null) => void; close: (e?: Event | null) => void; toggle: (e?: Event | null) => void; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("mounted" | "close" | "toggle" | "responsive-change" | "open")[], "mounted" | "close" | "toggle" | "responsive-change" | "open", PublicProps, Readonly>; required: boolean; }; style: { type: PropType; required: boolean; }; headerStyle: { type: PropType; required: boolean; }; contentStyle: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; defaultOpen: { type: BooleanConstructor; default: boolean; }; title: { type: StringConstructor; default: string; }; textAlign: { type: PropType; default: string; validator: (v: any) => boolean; }; animate: { type: BooleanConstructor; default: boolean; }; duration: { type: NumberConstructor; default: number; validator: (n: any) => boolean; }; easing: { type: StringConstructor; default: string; }; tabIndex: { type: PropType; default: null; validator: (v: any) => boolean; }; }>> & Readonly<{ onClose?: ((...args: any[]) => any) | undefined; onToggle?: ((...args: any[]) => any) | undefined; onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; onOpen?: ((...args: any[]) => any) | undefined; }>, { title: string; textAlign: "left" | "center" | "right" | TextAlign; visible: boolean; defaultOpen: boolean; animate: boolean; duration: number; easing: string; tabIndex: string | number | null; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; export declare const HAccordionClientOnly: Component; /** * Runtime control methods for `HAccordion` component. * * This interface defines methods accessible via `hison.component.getAccordion(id)`. * It allows you to programmatically open/close/toggle the accordion, update its title, * adjust header text alignment, and control expand/collapse animation behavior. * * --- * * ### 🔧 Example Usage * ```ts * const acc = hison.component.getAccordion('filters'); * * // Open/close programmatically * acc.open(); * acc.close(); * * // Update header title dynamically * acc.setTitle('Advanced Filters'); * * // Adjust alignment at runtime * acc.setTextAlign('center'); * * // Customize animation * acc.setDuration(800); * acc.setEasing('ease-in-out'); * * // Move focus to the header (keyboard accessible) * acc.focus(); * ``` * * --- * * ### ⚠️ Notes * - Accordions are **display/output-only**; no editMode or value binding is supported. * - Title slot (`#title`) visually overrides the `title` prop. * When slot content is used, `setTitle()` still updates the internal state but will not affect the rendered header. * - Animation (`animate`, `duration`, `easing`) is applied per instance and reflected immediately. */ export declare interface HAccordionMethods extends ComponentMethods { /** * Returns the component type literal. */ getType(): 'accordion'; /** * Whether the accordion body is currently expanded. */ isOpen(): boolean; /** * Expands the accordion body with animation (if enabled). */ open(e?: Event | null): void; /** * Collapses the accordion body with animation (if enabled). */ close(e?: Event | null): void; /** * Toggles the accordion body between expanded and collapsed. */ toggle(e?: Event | null): void; /** * Returns the current header title (from `title` prop/state). */ getTitle(): string; /** * Updates the header title text. * - ⚠️ If a `#title` slot is provided, this will not change the visible header. */ setTitle(text: string): void; /** * Returns the current header text alignment. */ getTextAlign(): 'left' | 'center' | 'right'; /** * Sets the header text alignment. * - Accepted values: `'left' | 'center' | 'right'` */ setTextAlign(v: 'left' | 'center' | 'right'): void; /** * Whether expand/collapse animation is enabled. */ getAnimate(): boolean; /** * Enables/disables expand/collapse animation. */ setAnimate(v: boolean): void; /** * Returns the current animation duration (in ms). */ getDuration(): number; /** * Sets the animation duration (in ms). */ setDuration(ms: number): void; /** * Returns the CSS timing function used for animation. */ getEasing(): string; /** * Sets the CSS timing function for animation (e.g., `'ease'`, `'linear'`, `'cubic-bezier(...)'`). */ setEasing(fn: string): void; /** * Gets the current `tabIndex` applied to element. * - `null`: no `tabindex` attribute (items not focusable). * - `0` or positive number: items can be focused via keyboard navigation. */ getTabIndex(): number | null; /** * Sets `tabIndex` for element. * @param v - `null` to remove, or number to make focusable. */ setTabIndex(v: number | null): void; /** * Moves focus to the accordion header (for accessibility/keyboard usage). */ focus(): void; } export declare const HBaggie: DefineComponent>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; baggieVisible: { type: BooleanConstructor; default: boolean; }; zIndex: { type: NumberConstructor; default: number; }; position: { type: PropType; default: ScreenPosition; validator: (v: any) => boolean; }; text: { type: StringConstructor; required: boolean; }; backgroundType: { type: PropType; default: BackgroundType; validator: (v: any) => boolean; }; border: { type: BooleanConstructor; default: boolean; }; shape: { type: PropType<"square" | "rounded" | "circle">; default: string; validator: (v: any) => boolean; }; tabIndex: { type: PropType; default: null; validator: (v: any) => boolean; }; buttonEnabled: { type: BooleanConstructor; default: boolean; }; }>, { id: string; props: LooseRequired>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; baggieVisible: { type: BooleanConstructor; default: boolean; }; zIndex: { type: NumberConstructor; default: number; }; position: { type: PropType; default: ScreenPosition; validator: (v: any) => boolean; }; text: { type: StringConstructor; required: boolean; }; backgroundType: { type: PropType; default: BackgroundType; validator: (v: any) => boolean; }; border: { type: BooleanConstructor; default: boolean; }; shape: { type: PropType<"square" | "rounded" | "circle">; default: string; validator: (v: any) => boolean; }; tabIndex: { type: PropType; default: null; validator: (v: any) => boolean; }; buttonEnabled: { type: BooleanConstructor; default: boolean; }; }>> & Readonly<{ onClick?: ((...args: any[]) => any) | undefined; onMousedown?: ((...args: any[]) => any) | undefined; onMouseout?: ((...args: any[]) => any) | undefined; onMouseover?: ((...args: any[]) => any) | undefined; onMouseup?: ((...args: any[]) => any) | undefined; onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; }> & {}>; anchorRef: Ref; baggieRef: Ref; text: Ref; visibleClass: ComputedRef<"" | "hison-display-none">; baggieVisibleClass: ComputedRef<"" | "hison-display-none">; responsiveClassList: Ref; backgroundTypeClass: ComputedRef<"hison-bg-transparent" | "hison-bg-empty" | "hison-bg-filled">; borderClass: ComputedRef<"" | "hison-border">; shapeClass: ComputedRef<"hison-baggie-shape-circle" | "hison-baggie-shape-square" | "hison-baggie-shape-rounded">; positionClass: ComputedRef; anchorStyle: ComputedRef< { zIndex: number; }>; badgeStyle: ComputedRef< { zIndex: number; }>; baggieMethods: ComputedRef "baggie"; isVisible: () => boolean; setVisible: (v: boolean) => void; isBaggieVisible: () => boolean; setBaggieVisible: (v: boolean) => void; getZIndex: () => number; setZIndex: (v: number) => void; getPosition: () => ScreenPositionValue; setPosition: (v: ScreenPosition | ScreenPositionValue) => void; getText: () => string; setText: (t: string) => void; isBorder: () => boolean; setBorder: (v: boolean) => void; getBackgroundType: () => BackgroundTypeValue; setBackgroundType: (t: BackgroundType | BackgroundTypeValue) => void; getShape: () => "square" | "rounded" | "circle"; setShape: (s: "square" | "rounded" | "circle") => void; getTabIndex: () => number | null; setTabIndex: (v: number | null) => void; isButtonEnabled: () => boolean; setButtonEnabled: (v: boolean) => void; reload: () => void; isHisonvueComponent: true; getId: () => string; } | null>; tabIndex: Ref; buttonEnabled: Ref; onClick: (e: MouseEvent) => void; onKeyActivate: () => void; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("click" | "mounted" | "mousedown" | "mouseout" | "mouseover" | "mouseup" | "responsive-change")[], "click" | "mounted" | "mousedown" | "mouseout" | "mouseover" | "mouseup" | "responsive-change", PublicProps, Readonly>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; baggieVisible: { type: BooleanConstructor; default: boolean; }; zIndex: { type: NumberConstructor; default: number; }; position: { type: PropType; default: ScreenPosition; validator: (v: any) => boolean; }; text: { type: StringConstructor; required: boolean; }; backgroundType: { type: PropType; default: BackgroundType; validator: (v: any) => boolean; }; border: { type: BooleanConstructor; default: boolean; }; shape: { type: PropType<"square" | "rounded" | "circle">; default: string; validator: (v: any) => boolean; }; tabIndex: { type: PropType; default: null; validator: (v: any) => boolean; }; buttonEnabled: { type: BooleanConstructor; default: boolean; }; }>> & Readonly<{ onClick?: ((...args: any[]) => any) | undefined; onMousedown?: ((...args: any[]) => any) | undefined; onMouseout?: ((...args: any[]) => any) | undefined; onMouseover?: ((...args: any[]) => any) | undefined; onMouseup?: ((...args: any[]) => any) | undefined; onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; }>, { border: boolean; position: ScreenPositionValue | ScreenPosition; zIndex: number; visible: boolean; tabIndex: string | number | null; baggieVisible: boolean; backgroundType: BackgroundTypeValue | BackgroundType; shape: "square" | "rounded" | "circle"; buttonEnabled: boolean; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; export declare const HBaggieClientOnly: Component; /** * Runtime control methods for `HBaggie` component. * * This interface defines programmatic access to a baggie’s visibility, * badge-only visibility, z-index layering, position, text content, shape, * background, border, tabindex, and interactive state. * You can retrieve an instance using `hison.component.getBaggie(id)`. * * --- * * ### 🔧 Example Usage * ```ts * const baggie = hison.component.getBaggie('bag01'); * baggie.setText('9+'); * baggie.setPosition('bottom-left'); * baggie.setButtonEnabled(true); * ``` * * --- * * ### ⚠️ Notes * - The `visible` prop hides both the target and badge; `baggieVisible` hides **only the badge**. * - `zIndex` applies to the anchor; the badge itself is rendered at `zIndex + 1`. * - For custom content, the `#badge` slot overrides the `text` prop entirely. */ export declare interface HBaggieMethods extends ComponentMethods { /** * Returns the type of the component. * Always `'baggie'`. */ getType(): 'baggie'; /** * Returns whether the entire baggie anchor (target + badge) is visible. */ isVisible(): boolean; /** * Sets whether the entire baggie anchor (target + badge) is visible. */ setVisible(v: boolean): void; /** * Returns whether the badge itself is visible. * (Target element stays visible regardless.) */ isBaggieVisible(): boolean; /** * Sets whether the badge itself is visible. */ setBaggieVisible(v: boolean): void; /** * Gets the current base z-index (applied to the anchor). * The badge uses `zIndex + 1`. */ getZIndex(): number; /** * Sets the base z-index (applied to the anchor). * The badge will automatically render at `zIndex + 1`. */ setZIndex(v: number): void; /** * Gets the current badge position relative to its target. */ getPosition(): ScreenPositionValue; /** * Sets the badge position relative to its target. * Accepts any `ScreenPosition` value (e.g. `'top-right'`, `'bottom-center'`). */ setPosition(v: ScreenPosition | ScreenPositionValue): void; /** * Gets the current text content of the badge. * Returns empty string if no text is set. */ getText(): string; /** * Sets the text content of the badge. * Ignored if slot `#badge` is used. */ setText(t: string): void; /** * Returns whether the badge has border/shadow styling. */ isBorder(): boolean; /** * Sets whether the badge shows border/shadow styling. */ setBorder(v: boolean): void; /** * Gets the current background type of the badge. */ getBackgroundType(): BackgroundTypeValue; /** * Sets the background type of the badge. * One of: `'empty' | 'transparent' | 'filled'` */ setBackgroundType(t: BackgroundType | BackgroundTypeValue): void; /** * Gets the shape of the badge. * One of: `'square' | 'rounded' | 'circle'` */ getShape(): 'square' | 'rounded' | 'circle'; /** * Sets the shape of the badge. */ setShape(s: 'square' | 'rounded' | 'circle'): void; /** * Gets the tabindex value of the badge (or `null` if not focusable). */ getTabIndex(): number | null; /** * Sets the tabindex value of the badge. * Use `null` to remove focusability. */ setTabIndex(v: number | null): void; /** * Returns whether the badge is enabled for button-like interaction. */ isButtonEnabled(): boolean; /** * Enables or disables button-like interaction styling/behavior. */ setButtonEnabled(v: boolean): void; /** * Reloads the component instance (re-applies props and state). * Typically used internally for hot-reload or style updates. */ reload(): void; } export declare const HBanner: DefineComponent>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; backgroundType: { type: PropType; default: BackgroundType; validator: (v: any) => boolean; }; border: { type: BooleanConstructor; default: boolean; }; initialIndex: { type: NumberConstructor; default: number; }; transitionMs: { type: NumberConstructor; default: number; }; navButtonStyle: { type: PropType<"chevron" | "triangle">; default: string; validator: (v: any) => boolean; }; showNavButtons: { type: BooleanConstructor; default: boolean; }; showIndicators: { type: BooleanConstructor; default: boolean; }; indicatorsPosition: { type: PropType<"bottom" | "overlay">; default: string; validator: (v: any) => boolean; }; indicatorClickable: { type: BooleanConstructor; default: boolean; }; autoIntervalMs: { type: NumberConstructor; default: number; }; autoDirection: { type: PropType<"next" | "prev">; default: string; validator: (v: any) => boolean; }; loop: { type: BooleanConstructor; default: boolean; }; pauseOnHover: { type: BooleanConstructor; default: boolean; }; }>, { id: string; props: LooseRequired>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; backgroundType: { type: PropType; default: BackgroundType; validator: (v: any) => boolean; }; border: { type: BooleanConstructor; default: boolean; }; initialIndex: { type: NumberConstructor; default: number; }; transitionMs: { type: NumberConstructor; default: number; }; navButtonStyle: { type: PropType<"chevron" | "triangle">; default: string; validator: (v: any) => boolean; }; showNavButtons: { type: BooleanConstructor; default: boolean; }; showIndicators: { type: BooleanConstructor; default: boolean; }; indicatorsPosition: { type: PropType<"bottom" | "overlay">; default: string; validator: (v: any) => boolean; }; indicatorClickable: { type: BooleanConstructor; default: boolean; }; autoIntervalMs: { type: NumberConstructor; default: number; }; autoDirection: { type: PropType<"next" | "prev">; default: string; validator: (v: any) => boolean; }; loop: { type: BooleanConstructor; default: boolean; }; pauseOnHover: { type: BooleanConstructor; default: boolean; }; }>> & Readonly<{ onChange?: ((...args: any[]) => any) | undefined; onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; onNext?: ((...args: any[]) => any) | undefined; onPrev?: ((...args: any[]) => any) | undefined; "onAutoplay-start"?: ((...args: any[]) => any) | undefined; "onAutoplay-stop"?: ((...args: any[]) => any) | undefined; }> & {}>; bannerMethods: ComputedRef "banner"; isVisible: () => boolean; setVisible: (v: boolean) => void; isBorder: () => boolean; setBorder: (v: boolean) => void; getBackgroundType: () => BackgroundTypeValue; setBackgroundType: (t: BackgroundType | BackgroundTypeValue) => void; getCurrentIndex: () => number; setCurrentIndex: (i: number) => void; getInitialIndex: () => number; setInitialIndex: (i: number) => void; getSlideCount: () => number; next: () => void; prev: () => void; goTo: (i: number) => void; getNavButtonStyle: () => "chevron" | "triangle"; setNavButtonStyle: (s: "chevron" | "triangle") => void; isShowNavButtons: () => boolean; setShowNavButtons: (v: boolean) => void; isShowIndicators: () => boolean; setShowIndicators: (v: boolean) => void; getIndicatorsPosition: () => "bottom" | "overlay"; setIndicatorsPosition: (p: "bottom" | "overlay") => void; isIndicatorClickable: () => boolean; setIndicatorClickable: (v: boolean) => void; getAutoInterval: () => number; setAutoInterval: (ms: number) => void; getAutoDirection: () => "next" | "prev"; setAutoDirection: (d: "next" | "prev") => void; isLoop: () => boolean; setLoop: (v: boolean) => void; isPauseOnHover: () => boolean; setPauseOnHover: (v: boolean) => void; startAuto: () => void; stopAuto: () => void; getTransitionMs: () => number; setTransitionMs: (ms: number) => void; reload: () => void; isHisonvueComponent: true; getId: () => string; } | null>; visibleClass: ComputedRef<"" | "hison-display-none">; borderClass: ComputedRef<"" | "hison-border">; backgroundTypeClass: ComputedRef<"hison-bg-transparent" | "hison-bg-empty" | "hison-bg-filled">; responsiveClassList: Ref; buttonClassList: ComputedRef; slideNodes: ComputedRef[]>; slideCount: ComputedRef; currentIndex: Ref; navButtonStyle: Ref<"chevron" | "triangle", "chevron" | "triangle">; showNavButtons: Ref; showIndicators: Ref; indicatorsPositionClass: ComputedRef<"hison-banner-indicators-overlay" | "hison-banner-indicators-bottom">; indicatorClickable: Ref; isPrevDisabled: ComputedRef; isNextDisabled: ComputedRef; trackStyle: ComputedRef; trackRef: Ref; goPrev: () => void; goNext: () => void; goTo: (idx: number) => void; onMouseEnter: () => void; onMouseLeave: () => void; onTouchStart: (e: TouchEvent) => void; onTouchMove: (e: TouchEvent) => void; onTouchEnd: () => void; onTouchCancel: () => void; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("next" | "prev" | "mounted" | "change" | "responsive-change" | "autoplay-start" | "autoplay-stop")[], "next" | "prev" | "mounted" | "change" | "responsive-change" | "autoplay-start" | "autoplay-stop", PublicProps, Readonly>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; backgroundType: { type: PropType; default: BackgroundType; validator: (v: any) => boolean; }; border: { type: BooleanConstructor; default: boolean; }; initialIndex: { type: NumberConstructor; default: number; }; transitionMs: { type: NumberConstructor; default: number; }; navButtonStyle: { type: PropType<"chevron" | "triangle">; default: string; validator: (v: any) => boolean; }; showNavButtons: { type: BooleanConstructor; default: boolean; }; showIndicators: { type: BooleanConstructor; default: boolean; }; indicatorsPosition: { type: PropType<"bottom" | "overlay">; default: string; validator: (v: any) => boolean; }; indicatorClickable: { type: BooleanConstructor; default: boolean; }; autoIntervalMs: { type: NumberConstructor; default: number; }; autoDirection: { type: PropType<"next" | "prev">; default: string; validator: (v: any) => boolean; }; loop: { type: BooleanConstructor; default: boolean; }; pauseOnHover: { type: BooleanConstructor; default: boolean; }; }>> & Readonly<{ onChange?: ((...args: any[]) => any) | undefined; onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; onNext?: ((...args: any[]) => any) | undefined; onPrev?: ((...args: any[]) => any) | undefined; "onAutoplay-start"?: ((...args: any[]) => any) | undefined; "onAutoplay-stop"?: ((...args: any[]) => any) | undefined; }>, { border: boolean; visible: boolean; backgroundType: BackgroundTypeValue | BackgroundType; initialIndex: number; transitionMs: number; navButtonStyle: "chevron" | "triangle"; showNavButtons: boolean; showIndicators: boolean; indicatorsPosition: "bottom" | "overlay"; indicatorClickable: boolean; autoIntervalMs: number; autoDirection: "next" | "prev"; loop: boolean; pauseOnHover: boolean; }, {}, { HButton: DefineComponent>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; disable: { type: BooleanConstructor; default: boolean; }; title: { type: StringConstructor; required: boolean; }; text: { type: StringConstructor; required: boolean; }; clickInterval: { type: NumberConstructor; default: number; }; border: { type: BooleanConstructor; default: boolean; }; backgroundType: { type: PropType; default: BackgroundType; validator: (v: any) => boolean; }; tabIndex: { type: PropType; default: null; validator: (v: any) => boolean; }; }>, { buttonRef: Ref; buttonMethods: ComputedRef "button"; getText: () => string; getTitle: () => string; isDisable: () => boolean; setText: (text: string) => void; setTitle: (title: string) => void; setDisable: (disable: boolean) => void; isBorder: () => boolean; setBorder: (border: boolean) => void; getBackgroundType: () => BackgroundTypeValue; setBackgroundType: (type: BackgroundType | BackgroundTypeValue) => void; unlock: () => void; getClickInterval: () => number; setClickInterval: (ms: number) => void; getTabIndex: () => number | null; setTabIndex: (v: number | null) => void; focus: () => void; isHisonvueComponent: true; getId: () => string; isVisible: () => boolean; setVisible: (visible: boolean) => void; reload: () => void; } | null>; props: LooseRequired>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; disable: { type: BooleanConstructor; default: boolean; }; title: { type: StringConstructor; required: boolean; }; text: { type: StringConstructor; required: boolean; }; clickInterval: { type: NumberConstructor; default: number; }; border: { type: BooleanConstructor; default: boolean; }; backgroundType: { type: PropType; default: BackgroundType; validator: (v: any) => boolean; }; tabIndex: { type: PropType; default: null; validator: (v: any) => boolean; }; }>> & Readonly<{ onClick?: ((...args: any[]) => any) | undefined; onMousedown?: ((...args: any[]) => any) | undefined; onMouseout?: ((...args: any[]) => any) | undefined; onMouseover?: ((...args: any[]) => any) | undefined; onMouseup?: ((...args: any[]) => any) | undefined; onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; }> & {}>; visibleClass: ComputedRef<"" | "hison-display-none">; disable: Ref; disableClass: ComputedRef<"" | "hison-disable">; borderClass: ComputedRef<"" | "hison-border">; backgroundTypeClass: ComputedRef<"hison-bg-transparent" | "hison-bg-empty" | "hison-bg-filled">; title: Ref; responsiveClassList: Ref; hasLabelSlot: ComputedRef; computedAriaLabel: ComputedRef; internalText: Ref; tabIndex: Ref; onClick: (e: MouseEvent) => Promise; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("click" | "mounted" | "mousedown" | "mouseout" | "mouseover" | "mouseup" | "responsive-change")[], "click" | "mounted" | "mousedown" | "mouseout" | "mouseover" | "mouseup" | "responsive-change", PublicProps, Readonly>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; disable: { type: BooleanConstructor; default: boolean; }; title: { type: StringConstructor; required: boolean; }; text: { type: StringConstructor; required: boolean; }; clickInterval: { type: NumberConstructor; default: number; }; border: { type: BooleanConstructor; default: boolean; }; backgroundType: { type: PropType; default: BackgroundType; validator: (v: any) => boolean; }; tabIndex: { type: PropType; default: null; validator: (v: any) => boolean; }; }>> & Readonly<{ onClick?: ((...args: any[]) => any) | undefined; onMousedown?: ((...args: any[]) => any) | undefined; onMouseout?: ((...args: any[]) => any) | undefined; onMouseover?: ((...args: any[]) => any) | undefined; onMouseup?: ((...args: any[]) => any) | undefined; onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; }>, { disable: boolean; border: boolean; visible: boolean; tabIndex: string | number | null; backgroundType: BackgroundTypeValue | BackgroundType; clickInterval: number; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; }, {}, string, ComponentProvideOptions, true, {}, any>; export declare const HBannerClientOnly: Component; /** * Runtime control methods for `HBanner` component. * * This interface defines programmatic access to a banner’s visibility, * frame styling (background/border), slide index navigation, navigation UI * (prev/next buttons, indicators, indicators’ position), autoplay behavior, * and transition timing. You can retrieve an instance using * `hison.component.getBanner(id)`. * * --- * * ### 🔧 Example Usage * ```ts * const banner = hison.component.getBanner('bn1'); * banner.next(); * banner.setAutoInterval(3000); * banner.startAuto(); * ``` * * --- * * ### ⚠️ Notes * - `initialIndex` is applied on mount; calling `setInitialIndex()` will navigate immediately. * - When `loop` is `false`, navigation at the first/last slide is disabled and buttons may be disabled. * - Setting `autoInterval` to a value < 100 disables autoplay. * - If `pauseOnHover` is `true`, hovering the banner pauses autoplay. * - `indicatorClickable = false` renders dots as non-interactive. * - `indicatorsPosition: 'overlay'` draws dots inside the banner near the bottom edge; `'bottom'` places them below. */ export declare interface HBannerMethods extends ComponentMethods { /** * Returns the type of the component. * Always `'banner'`. */ getType(): 'banner'; /** * Returns whether the entire banner frame is visible. */ isVisible(): boolean; /** * Sets whether the entire banner frame is visible. */ setVisible(v: boolean): void; /** * Returns whether the banner shows border/shadow styling. */ isBorder(): boolean; /** * Sets whether the banner shows border/shadow styling. */ setBorder(v: boolean): void; /** * Gets the current background type of the banner. */ getBackgroundType(): BackgroundTypeValue; /** * Sets the background type of the banner. * One of: `'empty' | 'transparent' | 'filled'` */ setBackgroundType(t: BackgroundType | BackgroundTypeValue): void; /** * Gets the current zero-based slide index. */ getCurrentIndex(): number; /** * Navigates to the given zero-based slide index. * Clamped to bounds; when `loop` is true, wraps around. */ setCurrentIndex(i: number): void; /** * Gets the initial zero-based slide index used on mount. */ getInitialIndex(): number; /** * Sets the initial slide index and navigates immediately. */ setInitialIndex(i: number): void; /** * Returns the total number of slides (default slot children). */ getSlideCount(): number; /** * Navigates to the next slide (respecting `loop`). */ next(): void; /** * Navigates to the previous slide (respecting `loop`). */ prev(): void; /** * Navigates to the specified zero-based slide index. */ goTo(i: number): void; /** * Gets the current navigation button style. * One of: `'chevron' | 'triangle'` */ getNavButtonStyle(): 'chevron' | 'triangle'; /** * Sets the navigation button style. */ setNavButtonStyle(s: 'chevron' | 'triangle'): void; /** * Returns whether prev/next navigation buttons are shown. */ isShowNavButtons(): boolean; /** * Sets whether prev/next navigation buttons are shown. */ setShowNavButtons(v: boolean): void; /** * Returns whether page indicators (dots) are shown. */ isShowIndicators(): boolean; /** * Sets whether page indicators (dots) are shown. */ setShowIndicators(v: boolean): void; /** * Gets the indicators’ position. * One of: `'bottom' | 'overlay'` */ getIndicatorsPosition(): 'bottom' | 'overlay'; /** * Sets the indicators’ position. */ setIndicatorsPosition(p: 'bottom' | 'overlay'): void; /** * Returns whether page indicators are clickable. */ isIndicatorClickable(): boolean; /** * Sets whether page indicators are clickable. */ setIndicatorClickable(v: boolean): void; /** * Gets the autoplay interval in milliseconds. * Values < 100 disable autoplay. */ getAutoInterval(): number; /** * Sets the autoplay interval in milliseconds. * If autoplay is running, the timer is restarted. */ setAutoInterval(ms: number): void; /** * Gets the autoplay direction. * One of: `'next' | 'prev'` */ getAutoDirection(): 'next' | 'prev'; /** * Sets the autoplay direction. */ setAutoDirection(d: 'next' | 'prev'): void; /** * Returns whether edge navigation wraps around. */ isLoop(): boolean; /** * Sets whether edge navigation wraps around. */ setLoop(v: boolean): void; /** * Returns whether hovering the banner pauses autoplay. */ isPauseOnHover(): boolean; /** * Sets whether hovering the banner pauses autoplay. */ setPauseOnHover(v: boolean): void; /** * Starts autoplay (if interval ≥ 100 ms). */ startAuto(): void; /** * Stops autoplay. */ stopAuto(): void; /** * Gets the slide transition duration in milliseconds. */ getTransitionMs(): number; /** * Sets the slide transition duration in milliseconds. */ setTransitionMs(ms: number): void; /** * Reloads the component instance (re-applies props and state). * Typically used for hot-reload or style updates. */ reload(): void; } export declare const HButton: DefineComponent>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; disable: { type: BooleanConstructor; default: boolean; }; title: { type: StringConstructor; required: boolean; }; text: { type: StringConstructor; required: boolean; }; clickInterval: { type: NumberConstructor; default: number; }; border: { type: BooleanConstructor; default: boolean; }; backgroundType: { type: PropType; default: BackgroundType; validator: (v: any) => boolean; }; tabIndex: { type: PropType; default: null; validator: (v: any) => boolean; }; }>, { buttonRef: Ref; buttonMethods: ComputedRef "button"; getText: () => string; getTitle: () => string; isDisable: () => boolean; setText: (text: string) => void; setTitle: (title: string) => void; setDisable: (disable: boolean) => void; isBorder: () => boolean; setBorder: (border: boolean) => void; getBackgroundType: () => BackgroundTypeValue; setBackgroundType: (type: BackgroundType | BackgroundTypeValue) => void; unlock: () => void; getClickInterval: () => number; setClickInterval: (ms: number) => void; getTabIndex: () => number | null; setTabIndex: (v: number | null) => void; focus: () => void; isHisonvueComponent: true; getId: () => string; isVisible: () => boolean; setVisible: (visible: boolean) => void; reload: () => void; } | null>; props: LooseRequired>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; disable: { type: BooleanConstructor; default: boolean; }; title: { type: StringConstructor; required: boolean; }; text: { type: StringConstructor; required: boolean; }; clickInterval: { type: NumberConstructor; default: number; }; border: { type: BooleanConstructor; default: boolean; }; backgroundType: { type: PropType; default: BackgroundType; validator: (v: any) => boolean; }; tabIndex: { type: PropType; default: null; validator: (v: any) => boolean; }; }>> & Readonly<{ onClick?: ((...args: any[]) => any) | undefined; onMousedown?: ((...args: any[]) => any) | undefined; onMouseout?: ((...args: any[]) => any) | undefined; onMouseover?: ((...args: any[]) => any) | undefined; onMouseup?: ((...args: any[]) => any) | undefined; onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; }> & {}>; visibleClass: ComputedRef<"" | "hison-display-none">; disable: Ref; disableClass: ComputedRef<"" | "hison-disable">; borderClass: ComputedRef<"" | "hison-border">; backgroundTypeClass: ComputedRef<"hison-bg-transparent" | "hison-bg-empty" | "hison-bg-filled">; title: Ref; responsiveClassList: Ref; hasLabelSlot: ComputedRef; computedAriaLabel: ComputedRef; internalText: Ref; tabIndex: Ref; onClick: (e: MouseEvent) => Promise; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("click" | "mounted" | "mousedown" | "mouseout" | "mouseover" | "mouseup" | "responsive-change")[], "click" | "mounted" | "mousedown" | "mouseout" | "mouseover" | "mouseup" | "responsive-change", PublicProps, Readonly>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; disable: { type: BooleanConstructor; default: boolean; }; title: { type: StringConstructor; required: boolean; }; text: { type: StringConstructor; required: boolean; }; clickInterval: { type: NumberConstructor; default: number; }; border: { type: BooleanConstructor; default: boolean; }; backgroundType: { type: PropType; default: BackgroundType; validator: (v: any) => boolean; }; tabIndex: { type: PropType; default: null; validator: (v: any) => boolean; }; }>> & Readonly<{ onClick?: ((...args: any[]) => any) | undefined; onMousedown?: ((...args: any[]) => any) | undefined; onMouseout?: ((...args: any[]) => any) | undefined; onMouseover?: ((...args: any[]) => any) | undefined; onMouseup?: ((...args: any[]) => any) | undefined; onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; }>, { disable: boolean; border: boolean; visible: boolean; tabIndex: string | number | null; backgroundType: BackgroundTypeValue | BackgroundType; clickInterval: number; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; export declare const HButtonClientOnly: Component; /** * Runtime control methods for `HButton` component. * * This interface defines methods that can be accessed via `hison.component.getButton(id)`. * Use these methods to manipulate button state programmatically at runtime. * * --- * * ### 🔧 Example Usage * ```ts * const btn = hison.component.getButton('btn01'); * btn.setVisible(false); * btn.setDisable(true); * btn.setText('Loading...'); * btn.setTitle('Please wait'); * ``` * * --- * * ### ⚠️ Notes * - `setText` and `getText` only work if the button **does not use a slot**. * - All changes are reactive and immediately reflected in the DOM. */ export declare interface HButtonMethods extends ComponentMethods { /** * Returns the type of the button. */ getType(): 'button'; /** * Gets the current button text. * - Returns `''` if the button uses a ``. * - Returns the internally managed `text` otherwise. */ getText(): string; /** * Gets the current tooltip (title) of the button. * - Reflects the current `title` attribute shown on hover. */ getTitle(): string; /** * Returns whether the button is currently disabled. * - `true` means the button cannot be clicked. */ isDisable(): boolean; /** * Sets the button text (only if no slot is used). * - If a slot is used, this has no effect. * - Updates internal reactive `text` state. */ setText(text: string): void; /** * Sets the button tooltip (title) text. * - Affects what appears on hover. */ setTitle(title: string): void; /** * Enables or disables the button. * - When disabled, button is grayed out and not clickable. */ setDisable(disable: boolean): void; /** * Returns whether the current element displays a border. */ isBorder(): boolean; /** * ESets whether the current element displays a border. * * @param border - `true` to display border, `false` to none display border */ setBorder(border: boolean): void; /** * Gets the current background type of the button. * Returns 'filled', 'empty', or 'transparent' according to the applied style. * See BackgroundType enum for all possible values. */ getBackgroundType(): BackgroundTypeValue; /** * Changes the button's background type at runtime. * Accepts 'filled', 'empty', or 'transparent' (see BackgroundType). * Triggers re-render and updates the button's CSS class immediately. * @param type - New background type to apply. */ setBackgroundType(type: BackgroundType | BackgroundTypeValue): void; /** * Unlocks the button, allowing it to be clicked again after a manual lock. * * This method is used to release the "pending" (locked) state of the button, * which is automatically enabled to prevent double submission while the `click` handler is running. * * - If your `@click` handler performs asynchronous logic (such as API requests or timeouts) * and you want to allow another click only after a certain condition or callback, use this method. * * --- * * ### 🛠 Usage Example * ```vue * * * * ``` */ unlock(): void; /** * Returns the current minimum interval (in milliseconds) required between button clicks. * - When set, the button cannot be clicked again until the specified time has passed since the last accepted click. * * @returns {number} The interval in milliseconds. `0` means no interval limit. * * --- * * ### 🛠 Usage Example * ```ts * const btn = hison.component.getButton('myBtn') * const interval = btn.getClickInterval() * // e.g., interval === 500 (for a 0.5s interval) * ``` */ getClickInterval(): number; /** * Sets the minimum interval (in milliseconds) between button clicks. * - When set, any clicks that occur before the interval has passed since the last click will be ignored. * - This is independent of the isPending (pending/locked) state. * * @param {number} ms - The interval in milliseconds (e.g., `500` for 0.5 seconds). * * --- * * ### 🛠 Usage Example * ```ts * const btn = hison.component.getButton('myBtn') * btn.setClickInterval(1500) // Now only one click is allowed every 1.5 seconds. * ``` */ setClickInterval(ms: number): void; /** * Gets the current `tabIndex` applied to element. * - `null`: no `tabindex` attribute (items not focusable). * - `0` or positive number: items can be focused via keyboard navigation. */ getTabIndex(): number | null; /** * Sets `tabIndex` for element. * @param v - `null` to remove, or number to make focusable. */ setTabIndex(v: number | null): void; /** * Focus on the button. */ focus(): void; } export declare const HCalendar: DefineComponent>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; disable: { type: BooleanConstructor; default: boolean; }; selectedDate: { type: PropType; default: () => Date; }; events: { type: PropType; default: () => never[]; }; weekendColor: { type: StringConstructor; required: boolean; }; weekendDays: { type: PropType; required: boolean; validator: (arr: unknown) => boolean; }; showTodayColor: { type: BooleanConstructor; default: boolean; }; selectedColor: { type: StringConstructor; required: boolean; }; specialTime: { type: PropType; required: boolean; }; dateCellMinHeight: { type: NumberConstructor; required: boolean; }; dateCellMaxHeight: { type: NumberConstructor; required: boolean; }; disableDays: { type: PropType; required: boolean; default: undefined; }; eventsOnMonthView: { type: PropType; default: boolean; }; hideWeekdays: { type: PropType; required: boolean; validator: (arr: unknown) => boolean; }; hideWeekends: { type: BooleanConstructor; default: boolean; }; locale: { type: StringConstructor; default: string; }; maxDate: { type: PropType; required: boolean; }; minDate: { type: PropType; required: boolean; }; startWeekOnSunday: { type: BooleanConstructor; default: boolean; }; time: { type: BooleanConstructor; default: boolean; }; timeCellHeight: { type: NumberConstructor; required: boolean; }; timeFormat: { type: PropType; required: boolean; validator: (v: any) => boolean; }; timeFrom: { type: NumberConstructor; required: boolean; validator: (n: any) => boolean; }; timeStep: { type: NumberConstructor; required: boolean; validator: (n: any) => boolean; }; timeTo: { type: NumberConstructor; required: boolean; validator: (n: any) => boolean; }; hideTitleBar: { type: BooleanConstructor; default: boolean; }; twelveHour: { type: BooleanConstructor; default: boolean; }; activeView: { type: PropType; required: boolean; validator: (v: any) => boolean; }; disableViews: { type: PropType<(HCalendarView | HCalendarViewValue)[]>; required: boolean; validator: (arr: any) => boolean; }; }>, { VueCal: DefineComponent; attrs: Attrs; props: LooseRequired>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; disable: { type: BooleanConstructor; default: boolean; }; selectedDate: { type: PropType; default: () => Date; }; events: { type: PropType; default: () => never[]; }; weekendColor: { type: StringConstructor; required: boolean; }; weekendDays: { type: PropType; required: boolean; validator: (arr: unknown) => boolean; }; showTodayColor: { type: BooleanConstructor; default: boolean; }; selectedColor: { type: StringConstructor; required: boolean; }; specialTime: { type: PropType; required: boolean; }; dateCellMinHeight: { type: NumberConstructor; required: boolean; }; dateCellMaxHeight: { type: NumberConstructor; required: boolean; }; disableDays: { type: PropType; required: boolean; default: undefined; }; eventsOnMonthView: { type: PropType; default: boolean; }; hideWeekdays: { type: PropType; required: boolean; validator: (arr: unknown) => boolean; }; hideWeekends: { type: BooleanConstructor; default: boolean; }; locale: { type: StringConstructor; default: string; }; maxDate: { type: PropType; required: boolean; }; minDate: { type: PropType; required: boolean; }; startWeekOnSunday: { type: BooleanConstructor; default: boolean; }; time: { type: BooleanConstructor; default: boolean; }; timeCellHeight: { type: NumberConstructor; required: boolean; }; timeFormat: { type: PropType; required: boolean; validator: (v: any) => boolean; }; timeFrom: { type: NumberConstructor; required: boolean; validator: (n: any) => boolean; }; timeStep: { type: NumberConstructor; required: boolean; validator: (n: any) => boolean; }; timeTo: { type: NumberConstructor; required: boolean; validator: (n: any) => boolean; }; hideTitleBar: { type: BooleanConstructor; default: boolean; }; twelveHour: { type: BooleanConstructor; default: boolean; }; activeView: { type: PropType; required: boolean; validator: (v: any) => boolean; }; disableViews: { type: PropType<(HCalendarView | HCalendarViewValue)[]>; required: boolean; validator: (arr: any) => boolean; }; }>> & Readonly<{ onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; "onCell-click"?: ((...args: any[]) => any) | undefined; "onView-change"?: ((...args: any[]) => any) | undefined; }> & {}>; calendarRef: Ref; visibleClass: ComputedRef<"" | "hison-display-none">; disableClass: ComputedRef<"" | "hison-disable-calendar">; responsiveClassList: Ref; slotNames: ComputedRef; selectedDate: Ref; events: Ref< { start: Date | string; end: Date | string; title?: string | undefined; content?: string | undefined; class?: string | undefined; background?: boolean | undefined; schedule?: number | undefined; allDay?: boolean | undefined; deletable?: boolean | undefined; resizable?: boolean | undefined; }[], HCalendarEvent[] | { start: Date | string; end: Date | string; title?: string | undefined; content?: string | undefined; class?: string | undefined; background?: boolean | undefined; schedule?: number | undefined; allDay?: boolean | undefined; deletable?: boolean | undefined; resizable?: boolean | undefined; }[]>; disableDays: Ref; eventsOnMonthView: Ref; hideWeekdays: Ref; hideWeekends: Ref; locale: Ref; maxDate: Ref; minDate: Ref; startWeekOnSunday: Ref; time: Ref; timeCellHeight: Ref; timeFormat: Ref<"m" | "H" | "HH" | "h" | "hh" | "mm" | "H:m" | "H:mm" | "HH:m" | "HH:mm" | "h:m" | "h:mm" | "hh:m" | "hh:mm" | "H{am}" | "HH{am}" | "h{am}" | "hh{am}" | "m{am}" | "mm{am}" | "H:m{am}" | "H:mm{am}" | "HH:m{am}" | "HH:mm{am}" | "h:m{am}" | "h:mm{am}" | "hh:m{am}" | "hh:mm{am}" | HCalendarTimeFormat | undefined, "m" | "H" | "HH" | "h" | "hh" | "mm" | "H:m" | "H:mm" | "HH:m" | "HH:mm" | "h:m" | "h:mm" | "hh:m" | "hh:mm" | "H{am}" | "HH{am}" | "h{am}" | "hh{am}" | "m{am}" | "mm{am}" | "H:m{am}" | "H:mm{am}" | "HH:m{am}" | "HH:mm{am}" | "h:m{am}" | "h:mm{am}" | "hh:m{am}" | "hh:mm{am}" | HCalendarTimeFormat | undefined>; timeFrom: Ref; timeStep: Ref; timeTo: Ref; hideTitleBar: Ref; twelveHour: Ref; activeView: Ref<"month" | "day" | "week" | "year" | "years" | HCalendarView | undefined, "month" | "day" | "week" | "year" | "years" | HCalendarView | undefined>; disableViews: Ref<("month" | "day" | "week" | "year" | "years" | HCalendarView)[] | undefined, ("month" | "day" | "week" | "year" | "years" | HCalendarView)[] | undefined>; onViewChange: (event: any) => void; onCellClick: (_date: any) => void; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("mounted" | "responsive-change" | "cell-click" | "view-change")[], "mounted" | "responsive-change" | "cell-click" | "view-change", PublicProps, Readonly>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; disable: { type: BooleanConstructor; default: boolean; }; selectedDate: { type: PropType; default: () => Date; }; events: { type: PropType; default: () => never[]; }; weekendColor: { type: StringConstructor; required: boolean; }; weekendDays: { type: PropType; required: boolean; validator: (arr: unknown) => boolean; }; showTodayColor: { type: BooleanConstructor; default: boolean; }; selectedColor: { type: StringConstructor; required: boolean; }; specialTime: { type: PropType; required: boolean; }; dateCellMinHeight: { type: NumberConstructor; required: boolean; }; dateCellMaxHeight: { type: NumberConstructor; required: boolean; }; disableDays: { type: PropType; required: boolean; default: undefined; }; eventsOnMonthView: { type: PropType; default: boolean; }; hideWeekdays: { type: PropType; required: boolean; validator: (arr: unknown) => boolean; }; hideWeekends: { type: BooleanConstructor; default: boolean; }; locale: { type: StringConstructor; default: string; }; maxDate: { type: PropType; required: boolean; }; minDate: { type: PropType; required: boolean; }; startWeekOnSunday: { type: BooleanConstructor; default: boolean; }; time: { type: BooleanConstructor; default: boolean; }; timeCellHeight: { type: NumberConstructor; required: boolean; }; timeFormat: { type: PropType; required: boolean; validator: (v: any) => boolean; }; timeFrom: { type: NumberConstructor; required: boolean; validator: (n: any) => boolean; }; timeStep: { type: NumberConstructor; required: boolean; validator: (n: any) => boolean; }; timeTo: { type: NumberConstructor; required: boolean; validator: (n: any) => boolean; }; hideTitleBar: { type: BooleanConstructor; default: boolean; }; twelveHour: { type: BooleanConstructor; default: boolean; }; activeView: { type: PropType; required: boolean; validator: (v: any) => boolean; }; disableViews: { type: PropType<(HCalendarView | HCalendarViewValue)[]>; required: boolean; validator: (arr: any) => boolean; }; }>> & Readonly<{ onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; "onCell-click"?: ((...args: any[]) => any) | undefined; "onView-change"?: ((...args: any[]) => any) | undefined; }>, { time: boolean; disable: boolean; visible: boolean; selectedDate: string | Date; events: HCalendarEvent[]; showTodayColor: boolean; disableDays: string[]; eventsOnMonthView: string | boolean; hideWeekends: boolean; locale: string; startWeekOnSunday: boolean; hideTitleBar: boolean; twelveHour: boolean; }, {}, { VueCal: DefineComponent; }, {}, string, ComponentProvideOptions, true, {}, any>; export declare const HCalendarClientOnly: Component; /** * Defines a calendar event shown on the calendar. * * Supports both formatted date strings (e.g., '2025-06-16 10:00') * and JavaScript `Date` objects for `start` and `end` fields. * * Optional fields can control how the event is rendered or interacted with. * These map directly to `vue-cal` behavior. * * @example * { * start: '2025-07-01 09:00', * end: '2025-07-01 10:30', * title: 'Team Meeting', * background: true, * deletable: true, * class: 'event-blue' * } */ export declare type HCalendarEvent = { start: Date | string; end: Date | string; title?: string; content?: string; class?: string; /** * If true, the event is treated as a background highlight. * Does not display as a block, but colors the background area. */ background?: boolean; /** * Optional `vue-cal` property to group events or apply external schedule logic. */ schedule?: number; /** * If true, the event spans the whole day without a specific time. */ allDay?: boolean; /** * If true, the user can delete this event. */ deletable?: boolean; /** * If true, the user cannot resize this event. */ resizable?: boolean; }; /** * Runtime control methods for `HCalendar` component. * * This interface defines the available methods on `HCalendar`, * accessible via `hison.component.getCalendar(id)`, to programmatically control * calendar state, selected date, events, and display configuration. * * --- * * ### 🔧 Example Usage * ```ts * const calendar = hison.component.getCalendar('cal1'); * calendar.setSelectedDate('2025-07-01'); * calendar.setDisable(true); * calendar.setVisible(false); * * const events = calendar.getEvents(); * calendar.setEvents([...events, { start: '2025-07-02 10:00', end: '2025-07-02 11:00', title: 'Meeting' }]); * ``` * * --- * * ### ⚠️ Notes * - Each `HCalendar` instance is automatically registered by `id` via `hison.component.getCalendar(id)`. * - Style-related changes (e.g. `weekendColor`, `selectedColor`) are applied via dynamic CSS variables. * - Date/time options use minutes (0~1440) where applicable (e.g. `timeFrom`, `timeTo`). * - Some properties like view mode (`setActiveView`) or locale (`setLocale`) can be changed live without re-render. * - `HCalendar` supports both `v-model:selected-date` and `v-model:events`, but changes via method calls will override both. */ export declare interface HCalendarMethods extends ComponentMethods { /** * Returns the type identifier for the component. * Always returns `'calendar'`. */ getType(): 'calendar'; /** * Returns whether the calendar is currently disabled. * - `true` means the calendar cannot be clicked. */ isDisable(): boolean; /** * Enables or disables the calendar. * - When disabled, calendar is grayed out and not clickable. * @param disable */ setDisable(disable: boolean): void; /** * Returns the currently selected date. * @param getDateType If `true`, returns a `Date` object; otherwise returns a formatted string. * @param format Optional format string. Defaults to global hison datetime format. */ getSelectedDate(getDateType?: boolean, format?: string): string | Date; /** * Sets the selected date in the calendar. * @param selectedDate A string or Date object. */ setSelectedDate(selectedDate: string | Date): void; /** * Returns the array of events currently displayed in the calendar. */ getEvents(): HCalendarEvent[]; /** * Updates the calendar events array. * @param events List of events to set. */ setEvents(events: HCalendarEvent[]): void; /** * Returns the map of special time highlights. */ getSpecialTime(): HCalendarSpecialTimeMap; /** * Sets special time ranges for specific days of the week. * @param specialTimeMap Object mapping day index to time ranges. */ setSpecialTime(specialTimeMap: HCalendarSpecialTimeMap): void; /** * Returns the background color for weekend header cells. */ getWeekendColor(): string | undefined; /** * Sets the weekend header background color. * @param cssText CSS color value (e.g., `#ff0000`, `rgba(...)`). */ setWeekendColor(cssText: string): void; /** * Returns which weekday indices are considered weekends. */ getWeekendDays(): number[] | undefined; /** * Sets which weekday indices are treated as weekends. * @param weekendDays Array of day indices (0 = Sunday). */ setWeekendDays(weekendDays: number[]): void; /** * Returns whether today is highlighted with background color. */ isShowTodayColor(): boolean; /** * Enables or disables special background highlight for today's date. * @param showTodayColor Boolean */ setShowTodayColor(showTodayColor: boolean): void; /** * Returns the background color for the selected date. */ getSelectedColor(): string | undefined; /** * Sets the background color for the selected date cell. * @param cssText (e.g., '#ff0000' or 'rgba(255,0,0,0.2)') */ setSelectedColor(cssText: string): void; /** * Returns the minimum height (in px) for date cells in month view. */ getDateCellMinHeight(): number | undefined; /** * Sets the minimum height (in px) for date cells in month view. * @param minHeight number of px */ setDateCellMinHeight(minHeight: number): void; /** * Returns the maximum height (in px) for date cells in month view. */ getDateCellMaxHeight(): number | undefined; /** * Sets the maximum height (in px) for date cells in month view. * @param maxHeight number of px */ setDateCellMaxHeight(maxHeight: number): void; /** * Returns the list of disabled dates. * - These are dates that users cannot select in the calendar. */ getDisableDays(): string[] | undefined; /** * Sets the list of disabled dates. * @param disableDays array of string dates (e.g., ['2025-06-26', '2025-06-27']) */ setDisableDays(disableDays: string[]): void; /** * Returns the current setting for month view event display. * - Can be `false`, `'short'`, or other strings for full event text. */ getEventsOnMonthView(): string | boolean | undefined; /** * Sets how events are displayed in the month view. * @param eventsOnMonthView * - `false`: shows event count only * - `'short'`: shows only titles * - others: shows full event contents */ setEventsOnMonthView(eventsOnMonthView: string | boolean): void; /** * Returns which weekdays are currently hidden. * - Array of weekday indexes: 0 = Sunday, 6 = Saturday */ getHideWeekdays(): number[] | undefined; /** * Hides or shows specific weekdays. * @param hideWeekdays Array of weekday indexes to hide (e.g., [2,3] to hide Tue/Wed) */ setHideWeekdays(hideWeekdays: number[]): void; /** * Returns whether weekends (Saturday and Sunday) are currently hidden. */ getHideWeekends(): boolean; /** * Hides or shows weekends in the calendar. * @param hideWeekends */ setHideWeekends(hideWeekends: boolean): void; /** * Returns the current locale (language code). * - Example: 'en', 'ko' */ getLocale(): string; /** * Sets the calendar language (locale). * - Example: 'fr', 'zh-cn' * @param locale See vue-cal docs for full list of locales */ setLocale(locale: string): void; /** * Returns the maximum selectable date. * @param getDateType If `true`, returns a Date object; otherwise returns a string. */ getMaxDate(getDateType?: boolean): string | Date | undefined | null; /** * Sets the maximum date users can select. * @param maxDate A string or Date object. */ setMaxDate(maxDate: string | Date): void; /** * Returns the minimum selectable date. * @param getDateType If `true`, returns a Date object; otherwise returns a string. */ getMinDate(getDateType?: boolean): string | Date | undefined | null; /** * Sets the minimum date users can select. * @param minDate A string or Date object. */ setMinDate(minDate: string | Date): void; /** * Returns whether the week starts on Sunday. * - `true`: Sunday, `false`: Monday */ isStartWeekOnSunday(): boolean; /** * Sets the start day of the week. * @param startWeekOnSunday `true` for Sunday, `false` for Monday */ setStartWeekOnSunday(startWeekOnSunday: boolean): void; /** * Returns whether time cells are currently shown in 'day' or 'week' views. * - Equivalent to the `time` prop. */ isShowTimeCell(): boolean; /** * Enables or disables display of time cells. * @param showTimeCell `true` to show time column, `false` to hide */ setShowTimeCell(showTimeCell: boolean): void; /** * Returns the height (in pixels) of each time cell. */ getTimeCellHeight(): number | undefined; /** * Sets the height (in pixels) of each time cell. * @param timeCellHeight A positive number (e.g., `40`) */ setTimeCellHeight(timeCellHeight: number): void; /** * Returns the current time format used in the time column. */ getTimeFormat(): HCalendarTimeFormat | HCalendarTimeFormatValue | undefined; /** * Sets the time format used for displaying time cells. * @param timeFormat Format string from `HCalendarTimeFormat` enum */ setTimeFormat(timeFormat: HCalendarTimeFormat): void; /** * Returns the start time of the time axis (in minutes). */ getTimeFrom(): number | undefined; /** * Sets the start time of the time axis (in minutes). * @param timeFrom A number between 0 and 1440 (e.g., `9 * 60` = 9:00 AM) */ setTimeFrom(timeFrom: number): void; /** * Returns the time step between time cells (in minutes). */ getTimeStep(): number | undefined; /** * Sets the time step interval for time cells. * @param timeStep A number between 1 and 60 (e.g., `30` for half-hour blocks) */ setTimeStep(timeStep: number): void; /** * Returns the end time of the time axis (in minutes). */ getTimeTo(): number | undefined; /** * Sets the end time of the time axis (in minutes). * @param timeTo A number between 0 and 1440 (e.g., `18 * 60` = 6:00 PM) */ setTimeTo(timeTo: number): void; /** * Returns whether the title bar (month/year label & arrows) is hidden. */ isHideTitleBar(): boolean; /** * Shows or hides the title bar at the top of the calendar. * @param hideTitleBar `true` to hide, `false` to show */ setHideTitleBar(hideTitleBar: boolean): void; /** * Returns whether the calendar is using 12-hour AM/PM format. */ isTwelveHour(): boolean; /** * Enables or disables 12-hour format display. * @param twelveHour `true` for AM/PM display, `false` for 24-hour */ setTwelveHour(twelveHour: boolean): void; /** * Returns the currently active view mode. * - One of `'day'`, `'week'`, `'month'`, `'year'`, `'years'` */ getActiveView(): HCalendarViewValue; /** * Changes the active calendar view. * @param view New view mode from `HCalendarView` enum */ setActiveView(view: HCalendarView | HCalendarViewValue): void; /** * Returns the list of views that are currently disabled. */ getDisableViews(): HCalendarView[] | HCalendarViewValue[] | undefined; /** * Disables specific view modes to restrict user navigation. * @param disableViews Array of view modes to disable */ setDisableViews(disableViews: HCalendarView[]): void; } /** * Defines a special time block on a specific day. * This can be used to highlight time ranges (e.g., lunch breaks, maintenance periods) * with a custom background color or class. * * - Time units are in **minutes** from midnight (0–1440). * - Use `className` to apply specific CSS styling to that time range. * * @example * { * from: 12 * 60, // 12:00 PM * to: 13 * 60, // 1:00 PM * className: 'lunch-time' * } */ export declare type HCalendarSpecialTime = { from: number; to: number; className?: string; }; /** * Maps days of the week to arrays of special time blocks. * Allows you to specify custom time ranges (with styles) for each day. * * - Keys are 0 (Sunday) through 6 (Saturday). * - Values are arrays of `HCalendarSpecialTime` entries. * * @example * { * 1: [ { from: 720, to: 780, className: 'meeting-block' } ], // Monday 12:00–13:00 * 5: [ { from: 1080, to: 1140 } ] // Friday 18:00–19:00 * } */ export declare type HCalendarSpecialTimeMap = { [key in DayOfWeek]?: HCalendarSpecialTime[]; }; export declare enum HCalendarTimeFormat { 'h24' = "H", 'hh24' = "HH", 'h' = "h", 'hh' = "hh", 'm' = "m", 'mm' = "mm", 'h24:m' = "H:m", 'h24:mm' = "H:mm", 'hh24:m' = "HH:m", 'hh24:mm' = "HH:mm", 'h:m' = "h:m", 'h:mm' = "h:mm", 'hh:m' = "hh:m", 'hh:mm' = "hh:mm", 'h24{am}' = "H{am}", 'hh24{am}' = "HH{am}", 'h{am}' = "h{am}", 'hh{am}' = "hh{am}", 'm{am}' = "m{am}", 'mm{am}' = "mm{am}", 'h24:m{am}' = "H:m{am}", 'h24:mm{am}' = "H:mm{am}", 'hh24:m{am}' = "HH:m{am}", 'hh24:mm{am}' = "HH:mm{am}", 'h:m{am}' = "h:m{am}", 'h:mm{am}' = "h:mm{am}", 'hh:m{am}' = "hh:m{am}", 'hh:mm{am}' = "hh:mm{am}" } export declare type HCalendarTimeFormatValue = typeof H_CALENDAR_TIME_FORMAT_VALUES[number]; export declare enum HCalendarView { day = "day", week = "week", month = "month", year = "year", years = "years" } export declare type HCalendarViewValue = typeof H_CALENDAR_VIEW_VALUES[number]; export declare const HCaption: DefineComponent>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; title: { type: StringConstructor; required: boolean; }; text: { type: StringConstructor; required: boolean; }; level: { type: PropType<1 | 2 | 3 | 4 | 5 | 6 | number>; default: number; validator: (v: any) => boolean; }; fontBold: { type: BooleanConstructor; default: boolean; }; fontItalic: { type: BooleanConstructor; default: boolean; }; fontThruline: { type: BooleanConstructor; default: boolean; }; fontUnderline: { type: BooleanConstructor; default: boolean; }; textAlign: { type: PropType; default: null; validator: (v: any) => boolean; }; border: { type: BooleanConstructor; default: boolean; }; backgroundType: { type: PropType; default: BackgroundType; validator: (v: any) => boolean; }; }>, { captionRef: Ref; captionMethods: ComputedRef "caption"; isVisible: () => boolean; setVisible: (visible: boolean) => void; getTitle: () => string; setTitle: (title: string) => void; getText: () => string; setText: (text: string) => void; getLevel: () => number; setLevel: (level: number) => void; getTextAlign: () => TextAlignValue; setTextAlign: (textAlign: TextAlign | TextAlignValue) => void; isFontBold: () => boolean; setFontBold: (bold: boolean) => void; isFontItalic: () => boolean; setFontItalic: (italic: boolean) => void; isFontThruline: () => boolean; setFontThruline: (thruline: boolean) => void; isFontUnderline: () => boolean; setFontUnderline: (underline: boolean) => void; isBorder: () => boolean; setBorder: (border: boolean) => void; getBackgroundType: () => BackgroundTypeValue; setBackgroundType: (type: BackgroundType | BackgroundTypeValue) => void; isHisonvueComponent: true; getId: () => string; reload: () => void; } | null>; props: LooseRequired>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; title: { type: StringConstructor; required: boolean; }; text: { type: StringConstructor; required: boolean; }; level: { type: PropType<1 | 2 | 3 | 4 | 5 | 6 | number>; default: number; validator: (v: any) => boolean; }; fontBold: { type: BooleanConstructor; default: boolean; }; fontItalic: { type: BooleanConstructor; default: boolean; }; fontThruline: { type: BooleanConstructor; default: boolean; }; fontUnderline: { type: BooleanConstructor; default: boolean; }; textAlign: { type: PropType; default: null; validator: (v: any) => boolean; }; border: { type: BooleanConstructor; default: boolean; }; backgroundType: { type: PropType; default: BackgroundType; validator: (v: any) => boolean; }; }>> & Readonly<{ onClick?: ((...args: any[]) => any) | undefined; onMousedown?: ((...args: any[]) => any) | undefined; onMouseout?: ((...args: any[]) => any) | undefined; onMouseover?: ((...args: any[]) => any) | undefined; onMouseup?: ((...args: any[]) => any) | undefined; onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; }> & {}>; visibleClass: ComputedRef<"" | "hison-display-none">; fontBoldClass: ComputedRef<"hison-font-bold-important" | null>; fontItalicClass: ComputedRef<"hison-font-italic" | null>; fontThrulineClass: ComputedRef<"hison-font-thruline" | null>; fontUnderlineClass: ComputedRef<"hison-font-underline" | null>; borderClass: ComputedRef<"" | "hison-border">; backgroundTypeClass: ComputedRef<"hison-bg-transparent" | "hison-bg-empty" | "hison-bg-filled">; textAlignStyle: ComputedRef< { textAlign: "left" | "center" | "right"; }>; renderTag: ComputedRef<"h1" | "h2" | "h3" | "h4" | "h5" | "h6">; hasElementSlot: ComputedRef; internalText: Ref; responsiveClassList: Ref; onClick: (e: MouseEvent) => void; title: Ref; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("click" | "mounted" | "mousedown" | "mouseout" | "mouseover" | "mouseup" | "responsive-change")[], "click" | "mounted" | "mousedown" | "mouseout" | "mouseover" | "mouseup" | "responsive-change", PublicProps, Readonly>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; title: { type: StringConstructor; required: boolean; }; text: { type: StringConstructor; required: boolean; }; level: { type: PropType<1 | 2 | 3 | 4 | 5 | 6 | number>; default: number; validator: (v: any) => boolean; }; fontBold: { type: BooleanConstructor; default: boolean; }; fontItalic: { type: BooleanConstructor; default: boolean; }; fontThruline: { type: BooleanConstructor; default: boolean; }; fontUnderline: { type: BooleanConstructor; default: boolean; }; textAlign: { type: PropType; default: null; validator: (v: any) => boolean; }; border: { type: BooleanConstructor; default: boolean; }; backgroundType: { type: PropType; default: BackgroundType; validator: (v: any) => boolean; }; }>> & Readonly<{ onClick?: ((...args: any[]) => any) | undefined; onMousedown?: ((...args: any[]) => any) | undefined; onMouseout?: ((...args: any[]) => any) | undefined; onMouseover?: ((...args: any[]) => any) | undefined; onMouseup?: ((...args: any[]) => any) | undefined; onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; }>, { border: boolean; textAlign: "left" | "center" | "right" | TextAlign; fontBold: boolean; fontItalic: boolean; fontThruline: boolean; fontUnderline: boolean; visible: boolean; backgroundType: BackgroundTypeValue | BackgroundType; level: number; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; export declare const HCaptionClientOnly: Component; /** * Runtime control methods for `HCaption` component. * * This interface defines methods that can be accessed via `hison.component.getCaption(id)`. * Use these methods to manipulate caption (heading) state programmatically at runtime. * * --- * * ### 🔧 Example Usage * ```ts * const cp = hison.component.getCaption('title01'); * cp.setLevel(2); //

* cp.setText('Section Title'); // when not rendering an element-slot * cp.setTextAlign('center'); * cp.setFontBold(true); * cp.setBorder(true); * cp.setBackgroundType('transparent'); * ``` * * --- * * ### ⚠️ Notes * - If the default slot contains **any element vnode**, `getText()` returns `''` and `setText()` has no effect. * - If the default slot is **pure text nodes**, that text is absorbed and becomes controllable by `getText/setText`. * - Changes are reactive and reflected immediately in the DOM. * - Heading level is constrained to **1 ~ 6** and maps to actual `

~

` tags at render time. */ export declare interface HCaptionMethods extends ComponentMethods { /** * Returns the type of the component. * - Always `'caption'` for this component. */ getType(): 'caption'; /** * Returns whether the caption is visible. * - `true`: rendered normally. * - `false`: hidden via `hison-display-none` on wrapper. */ isVisible(): boolean; /** * Sets caption visibility. * @param visible - `true` to show, `false` to hide. */ setVisible(visible: boolean): void; /** * Gets the current tooltip (title attribute) text shown on hover. */ getTitle(): string; /** * Sets the tooltip (title attribute) text shown on hover. * @param title - Tooltip text. */ setTitle(title: string): void; /** * Gets the caption text when controllable: * - Returns `''` if the default slot renders **any element vnode**. * - Otherwise, returns the internally managed text (including text-only slot absorption). */ getText(): string; /** * Sets the caption text when controllable: * - No effect if the default slot renders **any element vnode**. * - Updates internal reactive text rendered inside the heading element. * @param text - New caption text. */ setText(text: string): void; /** * Gets the current heading level (1~6). * - Maps to `

` ~ `

` at render time. */ getLevel(): number; /** * Sets the heading level. * - Values outside 1~6 are clamped to the nearest bound. * @param level - Target heading level (1~6). */ setLevel(level: number): void; /** * Gets current text alignment (`'left' | 'center' | 'right'`). */ getTextAlign(): TextAlignValue; /** * Sets text alignment. * - Accepts enum `TextAlign` or its string literal values. * @param textAlign - `'left' | 'center' | 'right'`. */ setTextAlign(textAlign: TextAlign | TextAlignValue): void; /** * Returns whether bold style is applied. */ isFontBold(): boolean; /** * Applies or removes bold style. * @param bold - `true` to apply, `false` to remove. */ setFontBold(bold: boolean): void; /** * Returns whether italic style is applied. */ isFontItalic(): boolean; /** * Applies or removes italic style. * @param italic - `true` to apply, `false` to remove. */ setFontItalic(italic: boolean): void; /** * Returns whether strikethrough is applied. */ isFontThruline(): boolean; /** * Applies or removes strikethrough style. * @param thruline - `true` to apply, `false` to remove. */ setFontThruline(thruline: boolean): void; /** * Returns whether underline is applied. */ isFontUnderline(): boolean; /** * Applies or removes underline style. * @param underline - `true` to apply, `false` to remove. */ setFontUnderline(underline: boolean): void; /** * Returns whether the caption shows border (box-shadow). */ isBorder(): boolean; /** * Sets whether border (box-shadow) is shown. * @param border - `true` to show, `false` to hide. */ setBorder(border: boolean): void; /** * Gets current background type of the caption. * - One of `'filled' | 'empty' | 'transparent'`. */ getBackgroundType(): BackgroundTypeValue; /** * Sets background type of the caption. * - Accepts `'filled' | 'empty' | 'transparent'` (see `BackgroundType` enum). * @param type - New background type to apply. */ setBackgroundType(type: BackgroundType | BackgroundTypeValue): void; } export declare const HChart: DefineComponent>; required: boolean; }; style: { type: PropType; required: boolean; }; type: { type: PropType; required: boolean; }; modelValue: { type: PropType; required: boolean; }; options: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; loadDelay: { type: NumberConstructor; default: number; }; }>, { canvasRef: Ref; props: LooseRequired>; required: boolean; }; style: { type: PropType; required: boolean; }; type: { type: PropType; required: boolean; }; modelValue: { type: PropType; required: boolean; }; options: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; loadDelay: { type: NumberConstructor; default: number; }; }>> & Readonly<{ onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined; }> & {}>; attrs: Attrs; visibleClass: ComputedRef<"" | "hison-display-none">; responsiveClassList: Ref; isPending: Ref; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("mounted" | "responsive-change" | "update:modelValue")[], "mounted" | "responsive-change" | "update:modelValue", PublicProps, Readonly>; required: boolean; }; style: { type: PropType; required: boolean; }; type: { type: PropType; required: boolean; }; modelValue: { type: PropType; required: boolean; }; options: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; loadDelay: { type: NumberConstructor; default: number; }; }>> & Readonly<{ onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined; }>, { visible: boolean; loadDelay: number; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; export declare const HChartClientOnly: Component; /** * Runtime control interface for the `HChart` component. * * This interface is returned by `hison.component.getChart(id)` and allows full programmatic control of the chart. * * --- * * ### 📊 Example Usage * ```ts * const chart = hison.component.getChart('salesChart') * if (chart) { * chart.setVisible(true) * chart.data.labels = ['Jan', 'Feb', 'Mar'] * chart.data.datasets[0].data = [10, 20, 30] * chart.update() * } * ``` * * --- * * ### ⚙️ Chart.js Integration * - `HChartInstance` extends [`Chart`](https://www.chartjs.org/docs/latest/api/chart) from Chart.js. * - This means **you can directly use all Chart.js instance methods**, such as: * - `.update()` * - `.resize()` * - `.destroy()` * - `.reset()` * - `.render()` * - `.stop()` * - `.toBase64Image()` * - `.getElementsAtEventForMode()` * - You also have full access to mutable properties like: * - `chart.data` * - `chart.options` * - `chart.canvas` * - `chart.config` * - `chart.scales`, etc. * * --- * * ### ⚠️ Notes * - `getChartInstance()` is no longer needed; the entire Chart instance is exposed directly. * - `setData()` and `setOptions()` helpers are unnecessary—just mutate `data` or `options` and call `.update()`. */ export declare interface HChartInstance extends ComponentMethods, Chart { /** * Returns the type identifier. * Always returns `'chart'`. */ getType(): 'chart'; /** * Get the current reload delay (ms) used for re-creating the chart after unmount. * * @returns {number} The delay in milliseconds. * * @example * const chart = hison.component.getChart('chart1'); * const delay = chart.getLoadDelay(); * console.log('Current delay:', delay); */ getLoadDelay(): number; /** * Set the reload delay (ms) to wait before re-creating the chart after unmount. * Useful for adjusting the debounce period for rapid reloads. * * @param {number} ms - The delay in milliseconds to use for subsequent reloads. * * @example * const chart = hison.component.getChart('chart1'); * chart.setLoadDelay(1000); // Sets delay to 1 second for reloads */ setLoadDelay(ms: number): void; } export declare const HDrawer: DefineComponent>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; border: { type: BooleanConstructor; default: boolean; }; zIndex: { type: NumberConstructor; default: number; }; position: { type: PropType; default: string; validator: (v: any) => boolean; }; width: { type: PropType; default: null; }; height: { type: PropType; default: null; }; closeButtonVisible: { type: BooleanConstructor; default: boolean; }; closeButtonText: { type: StringConstructor; default: string; }; closeButtonTitle: { type: StringConstructor; default: string; }; swipeClose: { type: BooleanConstructor; default: boolean; }; showOverlay: { type: BooleanConstructor; default: boolean; }; closeClickOverlay: { type: BooleanConstructor; default: boolean; }; overlayStyle: { type: PropType; required: boolean; }; scrollLock: { type: BooleanConstructor; default: boolean; }; enterAnimationClass: { type: StringConstructor; required: boolean; }; leaveAnimationClass: { type: StringConstructor; required: boolean; }; }>, { id: string; props: LooseRequired>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; border: { type: BooleanConstructor; default: boolean; }; zIndex: { type: NumberConstructor; default: number; }; position: { type: PropType; default: string; validator: (v: any) => boolean; }; width: { type: PropType; default: null; }; height: { type: PropType; default: null; }; closeButtonVisible: { type: BooleanConstructor; default: boolean; }; closeButtonText: { type: StringConstructor; default: string; }; closeButtonTitle: { type: StringConstructor; default: string; }; swipeClose: { type: BooleanConstructor; default: boolean; }; showOverlay: { type: BooleanConstructor; default: boolean; }; closeClickOverlay: { type: BooleanConstructor; default: boolean; }; overlayStyle: { type: PropType; required: boolean; }; scrollLock: { type: BooleanConstructor; default: boolean; }; enterAnimationClass: { type: StringConstructor; required: boolean; }; leaveAnimationClass: { type: StringConstructor; required: boolean; }; }>> & Readonly<{ onClose?: ((...args: any[]) => any) | undefined; onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; onOpen?: ((...args: any[]) => any) | undefined; }> & {}>; wrapperRef: Ref; drawerRef: Ref; position: Ref; visibleClass: ComputedRef<"" | "hison-display-none">; responsiveClassList: Ref; childClassList: ComputedRef; borderClass: ComputedRef<"" | "hison-border">; backgroundTypeClass: ComputedRef; wrapperStyle: ComputedRef>; overlayStyleWithZ: ComputedRef; isOverlayVisible: ComputedRef; sizeStyle: ComputedRef>; closeButtonVisible: Ref; closeButtonBorder: ComputedRef; closeButtonBackgroundType: ComputedRef; closeButtonText: Ref; closeButtonTitle: Ref; onOverlayClick: () => void; onClickClose: () => Promise; onSwipePointerDown: (e: PointerEvent) => void; drawerMethods: ComputedRef "drawer"; isVisible: () => boolean; setVisible: (v: boolean) => void | Promise; isOpen: () => boolean; open: () => void | Promise; close: () => void | Promise; toggle: () => void | Promise; getZIndex: () => number; setZIndex: (v: number) => void; getPosition: () => "top" | "bottom" | "left" | "right"; setPosition: (p: "top" | "bottom" | "left" | "right") => void; getWidth: () => number | null; setWidth: (v: number | null, animate: boolean) => Promise | void; getHeight: () => number | null; setHeight: (v: number | null, animate: boolean) => Promise | void; isSwipeCloseEnabled: () => boolean; setSwipeCloseEnabled: (v: boolean) => void; isCloseButtonVisible: () => boolean; setCloseButtonVisible: (v: boolean) => void; isOverlayShown: () => boolean; setOverlayShown: (v: boolean) => void; isCloseClickOverlay: () => boolean; setCloseClickOverlay: (v: boolean) => void; isScrollLocked: () => boolean; setScrollLock: (v: boolean) => void; isBorder: () => boolean; setBorder: (v: boolean) => void; getAnimationClasses: () => { enter: string; leave: string; }; setAnimationClasses: (opt: Partial<{ enter: string; leave: string; }>) => void; reload: () => void; isHisonvueComponent: true; getId: () => string; } | null>; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("mounted" | "close" | "responsive-change" | "open")[], "mounted" | "close" | "responsive-change" | "open", PublicProps, Readonly>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; border: { type: BooleanConstructor; default: boolean; }; zIndex: { type: NumberConstructor; default: number; }; position: { type: PropType; default: string; validator: (v: any) => boolean; }; width: { type: PropType; default: null; }; height: { type: PropType; default: null; }; closeButtonVisible: { type: BooleanConstructor; default: boolean; }; closeButtonText: { type: StringConstructor; default: string; }; closeButtonTitle: { type: StringConstructor; default: string; }; swipeClose: { type: BooleanConstructor; default: boolean; }; showOverlay: { type: BooleanConstructor; default: boolean; }; closeClickOverlay: { type: BooleanConstructor; default: boolean; }; overlayStyle: { type: PropType; required: boolean; }; scrollLock: { type: BooleanConstructor; default: boolean; }; enterAnimationClass: { type: StringConstructor; required: boolean; }; leaveAnimationClass: { type: StringConstructor; required: boolean; }; }>> & Readonly<{ onClose?: ((...args: any[]) => any) | undefined; onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; onOpen?: ((...args: any[]) => any) | undefined; }>, { width: number | null; height: number | null; border: boolean; position: DrawerPosition; zIndex: number; visible: boolean; closeButtonVisible: boolean; closeButtonText: string; closeButtonTitle: string; swipeClose: boolean; showOverlay: boolean; closeClickOverlay: boolean; scrollLock: boolean; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; export declare const HDrawerClientOnly: Component; /** * Runtime control methods for `HDrawer` component. * * This interface defines programmatic access to a drawer’s visibility, * edge position, dimensions, swipe-close gestures, overlay, scroll lock, * border, and animation settings. You can retrieve an instance * using `hison.component.getDrawer(id)`. * * --- * * ### 🔧 Example Usage * ```ts * const drawer = hison.component.getDrawer('drawer01'); * drawer.open(); * drawer.setPosition('left'); * drawer.setWidth(300, true); // animate width change * drawer.setZIndex(1400); * ``` * * --- * * ### ⚠️ Notes * - Visibility (`visible`) is **only** controlled by these methods. The `visible` prop is an initial state. * - `scrollLock` is reference-counted across multiple drawers; closing one does not unlock if others are still open. * - `zIndex` applies to the wrapper; the overlay is always rendered at `zIndex - 1`. * - Size changes (`setWidth` / `setHeight`) can be animated when supported by the current edge position. */ export declare interface HDrawerMethods extends ComponentMethods { /** * Returns the type of the component. * Always `'drawer'`. */ getType(): 'drawer'; /** * Returns whether the drawer is currently visible. */ isVisible(): boolean; /** * Sets drawer visibility. * @param v `true` → open, `false` → close */ setVisible(v: boolean): void | Promise; /** * Whether the menu is currently open. */ isOpen(): boolean; /** * Opens the drawer (with animation and scroll lock). */ open(): void | Promise; /** * Closes the drawer (with animation and scroll unlock). */ close(): void | Promise; /** * Toggles drawer open/close state. */ toggle(): void | Promise; /** * Gets the current z-index of the drawer wrapper. */ getZIndex(): number; /** * Sets the z-index of the drawer wrapper (overlay will use `zIndex - 1`). */ setZIndex(v: number): void; /** * Gets the current screen edge position of the drawer. */ getPosition(): 'top' | 'bottom' | 'left' | 'right'; /** * Sets the drawer position to a screen edge. * Also updates default animations if none were provided via props. */ setPosition(p: 'top' | 'bottom' | 'left' | 'right'): void; /** * Gets the current width of the drawer in pixels. * Returns `null` if not explicitly set (auto). */ getWidth(): number | null; /** * Sets the drawer width in pixels. * @param v width in px (`null` for auto) * @param animate whether to animate the resize (default: `false`) */ setWidth(v: number | null, animate: boolean): Promise | void; /** * Gets the current height of the drawer in pixels. * Returns `null` if not explicitly set (auto). */ getHeight(): number | null; /** * Sets the drawer height in pixels. * @param v height in px (`null` for auto) * @param animate whether to animate the resize (default: `false`) */ setHeight(v: number | null, animate: boolean): Promise | void; /** * Returns whether swipe-to-close is enabled. */ isSwipeCloseEnabled(): boolean; /** * Enables or disables swipe-to-close gestures. */ setSwipeCloseEnabled(v: boolean): void; /** * Returns whether a close button is visible inside the drawer. */ isCloseButtonVisible(): boolean; /** * Shows or hides the close button. */ setCloseButtonVisible(v: boolean): void; /** * Returns whether the overlay (backdrop) is shown. */ isOverlayShown(): boolean; /** * Sets whether the overlay (backdrop) is shown. */ setOverlayShown(v: boolean): void; /** * Returns whether clicking the overlay closes the drawer. */ isCloseClickOverlay(): boolean; /** * Sets whether clicking the overlay closes the drawer. */ setCloseClickOverlay(v: boolean): void; /** * Returns whether scroll lock is enabled for this drawer. */ isScrollLocked(): boolean; /** * Enables or disables scroll lock. * If enabled while visible, locks immediately. * If disabled while visible, unlocks immediately. */ setScrollLock(v: boolean): void; /** * Returns whether border styling is enabled. */ isBorder(): boolean; /** * Enables or disables border styling. */ setBorder(v: boolean): void; /** * Gets the CSS class names for enter/leave animations. */ getAnimationClasses(): { enter: string; leave: string; }; /** * Sets one or both CSS animation classes for drawer enter/leave. * Example: `{ enter: 'slide-in', leave: 'slide-out' }` */ setAnimationClasses(opt: Partial<{ enter: string; leave: string; }>): void; /** * Forces a full component reload (rebuild internals). */ reload(): void; } export declare const HDropdown: DefineComponent>; required: boolean; }; style: { type: PropType; required: boolean; }; toggleStyle: { type: PropType; required: boolean; }; menuStyle: { type: PropType; required: boolean; }; itemStyle: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; editMode: { type: PropType; default: EditMode; validator: (v: any) => boolean; }; placeholder: { type: StringConstructor; default: string; }; trigger: { type: PropType; default: DropdownTrigger; validator: (v: any) => boolean; }; modelValue: { type: PropType; required: boolean; }; maxHeight: { type: NumberConstructor; default: number; validator: (n: any) => boolean; }; closeOnSelect: { type: BooleanConstructor; default: boolean; }; textAlign: { type: PropType; default: TextAlign; validator: (v: any) => boolean; }; animate: { type: BooleanConstructor; default: boolean; }; duration: { type: NumberConstructor; default: number; validator: (n: any) => boolean; }; easing: { type: StringConstructor; default: string; }; tabIndex: { type: PropType; default: null; validator: (v: any) => boolean; }; zIndex: { type: NumberConstructor; default: number; }; }>, { toggleRef: Ref; menuRef: Ref; props: LooseRequired>; required: boolean; }; style: { type: PropType; required: boolean; }; toggleStyle: { type: PropType; required: boolean; }; menuStyle: { type: PropType; required: boolean; }; itemStyle: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; editMode: { type: PropType; default: EditMode; validator: (v: any) => boolean; }; placeholder: { type: StringConstructor; default: string; }; trigger: { type: PropType; default: DropdownTrigger; validator: (v: any) => boolean; }; modelValue: { type: PropType; required: boolean; }; maxHeight: { type: NumberConstructor; default: number; validator: (n: any) => boolean; }; closeOnSelect: { type: BooleanConstructor; default: boolean; }; textAlign: { type: PropType; default: TextAlign; validator: (v: any) => boolean; }; animate: { type: BooleanConstructor; default: boolean; }; duration: { type: NumberConstructor; default: number; validator: (n: any) => boolean; }; easing: { type: StringConstructor; default: string; }; tabIndex: { type: PropType; default: null; validator: (v: any) => boolean; }; zIndex: { type: NumberConstructor; default: number; }; }>> & Readonly<{ onChange?: ((...args: any[]) => any) | undefined; onClose?: ((...args: any[]) => any) | undefined; onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; onOpen?: ((...args: any[]) => any) | undefined; "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined; "onToggle-click"?: ((...args: any[]) => any) | undefined; "onItem-click"?: ((...args: any[]) => any) | undefined; }> & {}>; isDisabled: ComputedRef; isReadonly: ComputedRef; visibleClass: ComputedRef<"" | "hison-display-none">; disableClass: ComputedRef<"" | "hison-disable">; readonlyClass: ComputedRef<"" | "hison-readonly">; responsiveClassList: Ref; isOpen: Ref; trigger: Ref<"click" | "hover" | DropdownTrigger, "click" | "hover" | DropdownTrigger>; selectedValue: Ref; selectedLabel: ComputedRef; placeholder: Ref; activeDescId: ComputedRef; menuInlineStyle: ComputedRef>; options: Ref< { label: string; value: any; disabled?: boolean | undefined; }[], HDropdownOption[] | { label: string; value: any; disabled?: boolean | undefined; }[]>; animate: Ref; rootInlineStyle: ComputedRef>; tabIndex: Ref; fixedMenuStyle: Ref, Record>; openBelow: Ref; onToggleClick: (e: MouseEvent | KeyboardEvent) => void; onSelect: (opt: HDropdownOption, e?: MouseEvent) => void; textAlignStyle: ComputedRef< { textAlign: "left" | "center" | "right"; }>; open: (e?: Event | null) => void; close: (e?: Event | null) => void; toggle: (e?: Event | null) => void; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("mounted" | "change" | "close" | "responsive-change" | "open" | "update:modelValue" | "toggle-click" | "item-click")[], "mounted" | "change" | "close" | "responsive-change" | "open" | "update:modelValue" | "toggle-click" | "item-click", PublicProps, Readonly>; required: boolean; }; style: { type: PropType; required: boolean; }; toggleStyle: { type: PropType; required: boolean; }; menuStyle: { type: PropType; required: boolean; }; itemStyle: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; editMode: { type: PropType; default: EditMode; validator: (v: any) => boolean; }; placeholder: { type: StringConstructor; default: string; }; trigger: { type: PropType; default: DropdownTrigger; validator: (v: any) => boolean; }; modelValue: { type: PropType; required: boolean; }; maxHeight: { type: NumberConstructor; default: number; validator: (n: any) => boolean; }; closeOnSelect: { type: BooleanConstructor; default: boolean; }; textAlign: { type: PropType; default: TextAlign; validator: (v: any) => boolean; }; animate: { type: BooleanConstructor; default: boolean; }; duration: { type: NumberConstructor; default: number; validator: (n: any) => boolean; }; easing: { type: StringConstructor; default: string; }; tabIndex: { type: PropType; default: null; validator: (v: any) => boolean; }; zIndex: { type: NumberConstructor; default: number; }; }>> & Readonly<{ onChange?: ((...args: any[]) => any) | undefined; onClose?: ((...args: any[]) => any) | undefined; onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; onOpen?: ((...args: any[]) => any) | undefined; "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined; "onToggle-click"?: ((...args: any[]) => any) | undefined; "onItem-click"?: ((...args: any[]) => any) | undefined; }>, { maxHeight: number; textAlign: "left" | "center" | "right" | TextAlign; zIndex: number; visible: boolean; animate: boolean; duration: number; easing: string; tabIndex: string | number | null; placeholder: string; editMode: "editable" | "disable" | "readonly" | EditMode; trigger: "click" | "hover" | DropdownTrigger; closeOnSelect: boolean; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; export declare const HDropdownClientOnly: Component; /** * Runtime control methods for `HDropdown` component. * * This interface defines methods accessible via `hison.component.getDropdown(id)`. * It lets you open/close the menu, change selection/options, adjust behavior (trigger, close-on-select), * and tweak appearance (edit mode, text alignment) at runtime. * * --- * * ### 🔧 Example Usage * ```ts * const dd = hison.component.getDropdown('country'); * dd.open(); * dd.setOptions([{ label: 'Korea', value: 'KR' }]); * dd.setValue('KR'); * dd.setEditMode('readonly'); * dd.setTextAlign('center'); * ``` * * --- * * ### ⚠️ Notes * - All changes are reactive and reflected immediately. * - Edit modes: `editable`, `readonly`, `disable` (readonly hides the caret & removes box-shadow). * - `getText()` returns the label of the currently selected option. */ export declare interface HDropdownMethods extends ComponentMethods { /** * Returns the component type literal. */ getType(): 'dropdown'; /** * Whether the menu is currently open. */ isOpen(): boolean; /** * Opens the menu. */ open(): void; /** * Closes the menu. */ close(): void; /** * Toggles the menu open/closed. */ toggle(): void; /** * Gets the current edit mode (`editable` | `readonly` | `disable`). */ getEditMode(): EditModeValue; /** * Sets the edit mode. */ setEditMode(v: EditMode | EditModeValue): void; /** * Gets the current selected value. */ getValue(): any; /** * Sets the selected value (does not emit user events). */ setValue(val: any): void; /** * Returns the label (text) of the current selection. */ getText(): string; /** * Returns the current option list. */ getOptions(): HDropdownOption[]; /** * Replaces the option list at runtime. */ setOptions(options: HDropdownOption[]): void; /** * Sets how the menu opens: `'click'` or `'hover'`. */ setTriggerType(trigger: DropdownTrigger): void; /** * Gets the max menu height in pixels. */ getMaxHeight(): number; /** * Sets the max menu height in pixels. */ setMaxHeight(maxHeightPx: number): void; /** * Whether the menu closes automatically after selecting an item. */ isCloseOnSelect(): boolean; /** * Enables/disables close-on-select behavior. */ setCloseOnSelect(closeOn: boolean): void; /** * Returns current text alignment (`left` | `center` | `right`). */ getTextAlign(): TextAlignValue; /** * Sets text alignment for both the toggle and the menu. */ setTextAlign(textAlign: TextAlign | TextAlignValue): void; /** * Whether animation is enabled. */ getAnimate(): boolean; /** * Enables/disables animation (caret + menu). */ setAnimate(v: boolean): void; /** * Returns animation duration in ms. */ getDuration(): number; /** * Sets animation duration in ms. */ setDuration(ms: number): void; /** * Returns CSS timing function used by transitions. */ getEasing(): string; /** * Sets CSS timing function (e.g., 'ease-in-out', 'cubic-bezier(...)'). */ setEasing(fn: string): void; /** * Gets the current `tabIndex` applied to element. * - `null`: no `tabindex` attribute (items not focusable). * - `0` or positive number: items can be focused via keyboard navigation. */ getTabIndex(): number | null; /** * Sets `tabIndex` for element. * @param v - `null` to remove, or number to make focusable. */ setTabIndex(v: number | null): void; /** * Gets the current z-index of the dropdwon wrapper. */ getZIndex(): number; /** * Sets the z-index of the dropdwon wrapper */ setZIndex(v: number): void; /** * Moves focus to the toggle element. */ focus(): void; } /** * v-model payload for `HDropdown`. * * Contains the current `value` and the list of `options`. * Used for two-way binding and runtime updates. * * @example * { * value: 'KR', * options: [ * { label: 'Korea', value: 'KR' }, * { label: 'Japan', value: 'JP' } * ] * } */ export declare interface HDropdownModel { /** Currently selected option value */ value: any; /** Full list of selectable options */ options: HDropdownOption[]; } /** * Defines a selectable option in `HDropdown`. * * Each option has a `label` (shown to user) and `value` (programmatic). * Optional `disabled` makes the item visible but not selectable. * * @example * { label: 'Korea', value: 'KR' } */ export declare interface HDropdownOption { /** Display text shown in the dropdown menu */ label: string; /** Programmatic value associated with this option */ value: any; /** If true, option is visible but cannot be selected */ disabled?: boolean; } export declare const HEX_COLOR_RE: RegExp; export declare const HFileset: DefineComponent>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; editMode: { type: PropType; default: EditMode; validator: (v: any) => boolean; }; modelValue: { type: PropType; default: () => never[]; }; attId: { type: StringConstructor; default: string; }; addButtonText: { type: StringConstructor; default: string; }; removeButtonText: { type: StringConstructor; default: string; }; placeholder: { type: StringConstructor; default: string; }; enableDrop: { type: BooleanConstructor; default: boolean; }; downloadHandler: { type: PropType<(file: AttachedFileItem) => void>; default: undefined; }; buttonOnly: { type: BooleanConstructor; default: boolean; }; multiCols: { type: BooleanConstructor; default: boolean; }; multiple: { type: BooleanConstructor; default: boolean; }; allowedTypes: { type: PropType; default: undefined; validator: (v: any) => boolean; }; disallowedTypes: { type: PropType; default: undefined; validator: (v: any) => boolean; }; maxFileSize: { type: NumberConstructor; default: number; validator: (n: any) => boolean; }; maxTotalFileSize: { type: NumberConstructor; default: number; validator: (n: any) => boolean; }; maxFileCount: { type: NumberConstructor; default: number; validator: (n: any) => boolean; }; onDisallowedType: { type: PropType<(currentCheckFile: File, allowedTypes: string[] | null, disallowedTypes: string[] | null) => void>; default: undefined; }; onMaxFileSizeExceeded: { type: PropType<(currentCheckFile: File, currentFileSize: number, maxFileSizeAllowed: number) => void>; default: undefined; }; onMaxTotalSizeExceeded: { type: PropType<(currentCheckFile: File, currentTotalFileSize: number, maxTotalFileSizeAllowed: number) => void>; default: undefined; }; tabIndex: { type: PropType; default: null; validator: (v: any) => boolean; }; }>, { fileInputRef: Ref; id: string; props: LooseRequired>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; editMode: { type: PropType; default: EditMode; validator: (v: any) => boolean; }; modelValue: { type: PropType; default: () => never[]; }; attId: { type: StringConstructor; default: string; }; addButtonText: { type: StringConstructor; default: string; }; removeButtonText: { type: StringConstructor; default: string; }; placeholder: { type: StringConstructor; default: string; }; enableDrop: { type: BooleanConstructor; default: boolean; }; downloadHandler: { type: PropType<(file: AttachedFileItem) => void>; default: undefined; }; buttonOnly: { type: BooleanConstructor; default: boolean; }; multiCols: { type: BooleanConstructor; default: boolean; }; multiple: { type: BooleanConstructor; default: boolean; }; allowedTypes: { type: PropType; default: undefined; validator: (v: any) => boolean; }; disallowedTypes: { type: PropType; default: undefined; validator: (v: any) => boolean; }; maxFileSize: { type: NumberConstructor; default: number; validator: (n: any) => boolean; }; maxTotalFileSize: { type: NumberConstructor; default: number; validator: (n: any) => boolean; }; maxFileCount: { type: NumberConstructor; default: number; validator: (n: any) => boolean; }; onDisallowedType: { type: PropType<(currentCheckFile: File, allowedTypes: string[] | null, disallowedTypes: string[] | null) => void>; default: undefined; }; onMaxFileSizeExceeded: { type: PropType<(currentCheckFile: File, currentFileSize: number, maxFileSizeAllowed: number) => void>; default: undefined; }; onMaxTotalSizeExceeded: { type: PropType<(currentCheckFile: File, currentTotalFileSize: number, maxTotalFileSizeAllowed: number) => void>; default: undefined; }; tabIndex: { type: PropType; default: null; validator: (v: any) => boolean; }; }>> & Readonly<{ onBlur?: ((...args: any[]) => any) | undefined; onChange?: ((...args: any[]) => any) | undefined; onFocus?: ((...args: any[]) => any) | undefined; onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined; onAdd?: ((...args: any[]) => any) | undefined; onDownload?: ((...args: any[]) => any) | undefined; onRemove?: ((...args: any[]) => any) | undefined; }> & {}>; visibleFiles: ComputedRef< { fileId?: string | undefined; fileName: string; fileSize?: number | undefined; filePath?: string | undefined; extension?: string | undefined; file?: { readonly lastModified: number; readonly name: string; readonly webkitRelativePath: string; readonly size: number; readonly type: string; arrayBuffer: () => Promise; bytes: () => Promise>; slice: (start?: number, end?: number, contentType?: string) => Blob; stream: () => ReadableStream>; text: () => Promise; } | undefined; isNew?: boolean | undefined; isDeleted?: boolean | undefined; }[]>; filesetMethods: Ref< { getType: () => "fileset"; getEditMode: () => EditModeValue; setEditMode: (mode: EditMode | EditModeValue) => void; getValue: () => AttachedFileItem[] | null; setValue: (attachedFileItem: AttachedFileItem[]) => void; getDataModel: () => InterfaceDataModel | null; setDataModel: (dataModel: InterfaceDataModel) => void; load: >(data: AttachedFileItem | Record | InterfaceDataModel) => void; getAttId: () => string; setAttId: (attId: string) => void; getAddButtonText: () => string; setAddButtonText: (addButtonText: string) => void; getRemoveButtonText: () => string; setRemoveButtonText: (removeButtonText: string) => void; getPlaceholder: () => string; setPlaceholder: (placeholder: string) => void; isEnableDrop: () => boolean; setEnableDrop: (enableDrop: boolean) => void; setDownloadHandler: (downloadHandler: (file: AttachedFileItem) => void) => void; isButtonOnly: () => boolean; setButtonOnly: (v: boolean) => void; isMultiCols: () => boolean; setMultiCols: (multiCols: boolean) => void; isMultiple: () => boolean; setMultiple: (multiple: boolean) => void; getAllowedTypes: () => string[]; setAllowedTypes: (allowedTypes: string[]) => void; getDisallowedTypes: () => string[]; setDisallowedTypes: (disallowedTypes: string[]) => void; getMaxFileSize: () => number; setMaxFileSize: (maxFileSize: number) => void; getMaxTotalFileSize: () => number; setMaxTotalFileSize: (maxTotalFileSize: number) => void; getMaxFileCount: () => number; setMaxFileCount: (maxFileCount: number) => void; setOnDisallowedType: (onDisallowedType: (currentCheckFile: File, allowedTypes: string[] | null, disallowedTypes: string[] | null) => void) => void; setOnMaxFileSizeExceeded: (onMaxFileSizeExceeded: (currentCheckFile: File, currentFileSize: number, maxFileSizeAllowed: number) => void) => void; setOnMaxTotalSizeExceeded: (onMaxTotalSizeExceeded: (currentCheckFile: File, currentTotalFileSize: number, maxTotalFileSizeAllowed: number) => void) => void; isModified: () => boolean; setModified: (modified: boolean) => void; getTabIndex: () => number | null; setTabIndex: (v: number | null) => void; focus: () => void; isHisonvueComponent: true; getId: () => string; isVisible: () => boolean; setVisible: (visible: boolean) => void; reload: () => void; } | null, HFilesetMethods | { getType: () => "fileset"; getEditMode: () => EditModeValue; setEditMode: (mode: EditMode | EditModeValue) => void; getValue: () => AttachedFileItem[] | null; setValue: (attachedFileItem: AttachedFileItem[]) => void; getDataModel: () => InterfaceDataModel | null; setDataModel: (dataModel: InterfaceDataModel) => void; load: >(data: AttachedFileItem | Record | InterfaceDataModel) => void; getAttId: () => string; setAttId: (attId: string) => void; getAddButtonText: () => string; setAddButtonText: (addButtonText: string) => void; getRemoveButtonText: () => string; setRemoveButtonText: (removeButtonText: string) => void; getPlaceholder: () => string; setPlaceholder: (placeholder: string) => void; isEnableDrop: () => boolean; setEnableDrop: (enableDrop: boolean) => void; setDownloadHandler: (downloadHandler: (file: AttachedFileItem) => void) => void; isButtonOnly: () => boolean; setButtonOnly: (v: boolean) => void; isMultiCols: () => boolean; setMultiCols: (multiCols: boolean) => void; isMultiple: () => boolean; setMultiple: (multiple: boolean) => void; getAllowedTypes: () => string[]; setAllowedTypes: (allowedTypes: string[]) => void; getDisallowedTypes: () => string[]; setDisallowedTypes: (disallowedTypes: string[]) => void; getMaxFileSize: () => number; setMaxFileSize: (maxFileSize: number) => void; getMaxTotalFileSize: () => number; setMaxTotalFileSize: (maxTotalFileSize: number) => void; getMaxFileCount: () => number; setMaxFileCount: (maxFileCount: number) => void; setOnDisallowedType: (onDisallowedType: (currentCheckFile: File, allowedTypes: string[] | null, disallowedTypes: string[] | null) => void) => void; setOnMaxFileSizeExceeded: (onMaxFileSizeExceeded: (currentCheckFile: File, currentFileSize: number, maxFileSizeAllowed: number) => void) => void; setOnMaxTotalSizeExceeded: (onMaxTotalSizeExceeded: (currentCheckFile: File, currentTotalFileSize: number, maxTotalFileSizeAllowed: number) => void) => void; isModified: () => boolean; setModified: (modified: boolean) => void; getTabIndex: () => number | null; setTabIndex: (v: number | null) => void; focus: () => void; isHisonvueComponent: true; getId: () => string; isVisible: () => boolean; setVisible: (visible: boolean) => void; reload: () => void; } | null>; responsiveClassList: Ref; buttonClassList: ComputedRef; visibleClass: ComputedRef<"" | "hison-display-none">; editModeClass: ComputedRef; disable: ComputedRef; readonly: ComputedRef; addButtonText: Ref; removeButtonText: Ref; placeholder: Ref; isDragging: Ref; multiCols: Ref; multiple: Ref; accept: ComputedRef; tabIndex: Ref; buttonOnly: Ref; buttonOnlyClass: ComputedRef; openFileDialog: () => void; removeFile: (file: AttachedFileItem) => void; onFileChange: (e: Event) => void; downloadFile: (file: AttachedFileItem) => void; handleDragEnter: () => void; handleDrop: (e: DragEvent) => void; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("download" | "add" | "mounted" | "blur" | "change" | "focus" | "responsive-change" | "update:modelValue" | "remove")[], "download" | "add" | "mounted" | "blur" | "change" | "focus" | "responsive-change" | "update:modelValue" | "remove", PublicProps, Readonly>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; editMode: { type: PropType; default: EditMode; validator: (v: any) => boolean; }; modelValue: { type: PropType; default: () => never[]; }; attId: { type: StringConstructor; default: string; }; addButtonText: { type: StringConstructor; default: string; }; removeButtonText: { type: StringConstructor; default: string; }; placeholder: { type: StringConstructor; default: string; }; enableDrop: { type: BooleanConstructor; default: boolean; }; downloadHandler: { type: PropType<(file: AttachedFileItem) => void>; default: undefined; }; buttonOnly: { type: BooleanConstructor; default: boolean; }; multiCols: { type: BooleanConstructor; default: boolean; }; multiple: { type: BooleanConstructor; default: boolean; }; allowedTypes: { type: PropType; default: undefined; validator: (v: any) => boolean; }; disallowedTypes: { type: PropType; default: undefined; validator: (v: any) => boolean; }; maxFileSize: { type: NumberConstructor; default: number; validator: (n: any) => boolean; }; maxTotalFileSize: { type: NumberConstructor; default: number; validator: (n: any) => boolean; }; maxFileCount: { type: NumberConstructor; default: number; validator: (n: any) => boolean; }; onDisallowedType: { type: PropType<(currentCheckFile: File, allowedTypes: string[] | null, disallowedTypes: string[] | null) => void>; default: undefined; }; onMaxFileSizeExceeded: { type: PropType<(currentCheckFile: File, currentFileSize: number, maxFileSizeAllowed: number) => void>; default: undefined; }; onMaxTotalSizeExceeded: { type: PropType<(currentCheckFile: File, currentTotalFileSize: number, maxTotalFileSizeAllowed: number) => void>; default: undefined; }; tabIndex: { type: PropType; default: null; validator: (v: any) => boolean; }; }>> & Readonly<{ onBlur?: ((...args: any[]) => any) | undefined; onChange?: ((...args: any[]) => any) | undefined; onFocus?: ((...args: any[]) => any) | undefined; onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined; onAdd?: ((...args: any[]) => any) | undefined; onDownload?: ((...args: any[]) => any) | undefined; onRemove?: ((...args: any[]) => any) | undefined; }>, { visible: boolean; tabIndex: string | number | null; multiple: boolean; placeholder: string; modelValue: AttachedFileItem[]; editMode: "editable" | "disable" | "readonly" | EditMode; attId: string; addButtonText: string; removeButtonText: string; enableDrop: boolean; downloadHandler: (file: AttachedFileItem) => void; buttonOnly: boolean; multiCols: boolean; allowedTypes: string | string[]; disallowedTypes: string | string[]; maxFileSize: number; maxTotalFileSize: number; maxFileCount: number; onDisallowedType: (currentCheckFile: File, allowedTypes: string[] | null, disallowedTypes: string[] | null) => void; onMaxFileSizeExceeded: (currentCheckFile: File, currentFileSize: number, maxFileSizeAllowed: number) => void; onMaxTotalSizeExceeded: (currentCheckFile: File, currentTotalFileSize: number, maxTotalFileSizeAllowed: number) => void; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; export declare const HFilesetClientOnly: Component; /** * Interface for runtime control of `` component. * * This interface exposes a full set of methods for dynamically controlling and querying the state * of an HFileset instance registered with hisonvue. All methods are available via `hison.vue.getInput(id)` or * on the instance exposed in the `mounted` event. * * **Typical use cases include:** * - Programmatically changing edit mode, file upload rules, button labels, and placeholders * - Updating allowed/disallowed file types, file size/count limits, and drag-and-drop settings at runtime * - Assigning custom file download logic (e.g., S3, access control) * - Replacing or reading the list of attached files (including marking deletions or restoring files) * - Integrating with server or parent logic to control the file set from outside the component * * :::example * ```ts * // Get runtime methods from hison.vue * const fileset = hison.vue.getInput('myFileset') as HFilesetMethods * * // Change edit mode to readonly * fileset.setEditMode('readonly') * * // Limit to only 2 files and only PDFs * fileset.setMaxFileCount(2) * fileset.setAllowedTypes(['.pdf']) * * // Change add button label dynamically * fileset.setAddButtonText('ADD FILE') * * // Replace all files with new ones * fileset.setValue([ * { fileName: 'newfile.pdf', fileSize: 100000, extension: 'pdf', isNew: true, file: someFileObj } * ]) * * // Focus add button programmatically * fileset.focus() * ``` * ::: * * **Method groups:** * - **Edit Mode & Visibility**: Control when/how the user can add/delete files * - **File List**: Get/set all attached files, reflecting deletion or restoration * - **File Upload Options**: Allowed/disallowed types, size, count, drag-and-drop, multi-column * - **UI Labels & Placeholders**: Set button texts and empty message dynamically * - **Custom Handlers**: Assign custom download or validation error logic * - **State Query**: Check for modification, get attachment group ID, etc. * * All setters immediately update the internal state and UI. */ export declare interface HFilesetMethods extends ComponentMethods { /** * Returns the type of this component instance. * Always returns `'fileset'` for ``. */ getType(): 'fileset'; /** * Gets the current edit mode of the file set. * * - `'editable'`: Full editing (add/delete) enabled * - `'readonly'`: View only, file actions hidden * - `'disable'`: Completely disabled, grayed out */ getEditMode(): EditModeValue; /** * Sets the edit mode of the file set. * * - `'editable'`: Allows adding/removing files * - `'readonly'`: Disables all file operations but keeps UI visible * - `'disable'`: Fully disables the UI (input, buttons) * * @param mode - The new edit mode */ setEditMode(mode: EditMode | EditModeValue): void; /** * Returns the current (visible, not deleted) file list. * * Each file is an object conforming to `AttachedFileItem`. * Files marked `isDeleted: true` are excluded. * * @returns The current list of files. */ getValue(): AttachedFileItem[] | null; /** * Sets the internal file list to the provided value. * * - The list will be displayed immediately and emitted via `update:modelValue`. * - Use this to reset, replace, or synchronize the files with backend data. * * @param attachedFileItem - The new file list. */ setValue(attachedFileItem: AttachedFileItem[]): void; /** * Converts the current editor content into a `DataModel` instance. * * - Returns a new `DataModel` where each property of `AttachedFileItem` (like `html`, `links`, `files`, etc.) * becomes a column, and a single row represents the editor state. * * @returns A `DataModel` containing the editor's current data. */ getDataModel(): InterfaceDataModel | null; /** * Populates the editor using a `DataModel` instance. * * - Extracts values from the first row of the `DataModel`, if available. * - Uses the values from columns like `html`, `plainText`, `links`, etc. to restore editor content. * * @param dataModel A `DataModel` whose first row maps to `AttachedFileItem` structure. */ setDataModel(dataModel: InterfaceDataModel): void; /** * Loads editor content from either a `AttachedFileItem` object or a compatible `DataModel`. * * - Accepts plain `AttachedFileItem`, raw object, or `DataModel`. * - Automatically determines how to process the input and restores the editor accordingly. * * @param data Editor content to load, in `AttachedFileItem` or `DataModel` form. */ load>(data: AttachedFileItem | Record | InterfaceDataModel): void; /** * Returns the current `attId` (attachment group ID). * * Used to group files logically, often for backend APIs. */ getAttId(): string; /** * Sets the `attId` (attachment group ID). * * - Use to associate this file set with a different group in your backend. * - Has no effect on UI, but is included in emitted file info. * * @param attId - The new attachment group ID. */ setAttId(attId: string): void; /** * Gets the text content currently shown on the add/upload button. * * - Corresponds to `addButtonText` prop. */ getAddButtonText(): string; /** * Sets the text shown on the add/upload button. * * - Supports multiline via `\n` (rendered as `
`). * - If an `add-button` slot is used, this will have no effect. * * @param addButtonText - New button text */ setAddButtonText(addButtonText: string): void; /** * Gets the text content currently shown on the remove/delete button. * * - Corresponds to `removeButtonText` prop. */ getRemoveButtonText(): string; /** * Sets the text shown on the remove/delete button. * * - Supports multiline via `\n` (rendered as `
`). * - If a `remove-button` slot is used, this will have no effect. * * @param removeButtonText - New button text */ setRemoveButtonText(removeButtonText: string): void; /** * Gets the current placeholder text (empty state message). * * - Shown when there are no files in the file set. * - Corresponds to the `placeholder` prop. */ getPlaceholder(): string; /** * Sets the placeholder text (empty state message). * * - Updates UI immediately. * * @param placeholder - New placeholder text */ setPlaceholder(placeholder: string): void; /** * Returns whether drag-and-drop uploading is currently enabled. * * - Controlled by the `enableDrop` prop. */ isEnableDrop(): boolean; /** * Enables or disables drag-and-drop file uploading. * * @param enableDrop - `true` to allow drag-and-drop, `false` to block it. */ setEnableDrop(enableDrop: boolean): void; /** * Sets a custom download handler function for files. * * - If set, this function is called when a file is downloaded (clicked). * - Use for custom logic, e.g. auth, S3, signed URL, access logging, etc. * - Overrides default file download behavior. * * @param downloadHandler - Function called with the file to download */ setDownloadHandler(downloadHandler: (file: AttachedFileItem) => void): void; /** * Returns whether the component is currently in button-only mode. * * - `true`: Only the add/upload button is rendered. * - `false`: Normal mode (file list + add button). */ isButtonOnly(): boolean; /** * Enables or disables button-only mode. * * @param v - `true` to render only the button, `false` for normal UI. */ setButtonOnly(v: boolean): void; /** * Returns whether the file list is currently displayed in multiple columns. * * - Controlled by the `multiCols` prop. */ isMultiCols(): boolean; /** * Enables or disables multi-column display of the file list. * * - When enabled, files wrap into multiple rows/columns for easier viewing. * * @param multiCols - `true` to enable, `false` to disable. */ setMultiCols(multiCols: boolean): void; /** * Returns whether multiple file selection is currently allowed. * * - Controlled by the `multiple` prop. * - If false, only one file can be uploaded at a time (new files replace previous). */ isMultiple(): boolean; /** * Enables or disables multiple file selection. * * - If set to `false`, adding new files replaces the existing one. * - If set to `true`, users can add up to `maxFileCount` files. * * @param multiple - `true` to allow multiple, `false` for single file only. */ setMultiple(multiple: boolean): void; /** * Gets the current list of allowed file types/extensions. * * - Controlled by the `allowedTypes` prop. * - MIME types or extensions (e.g. `.pdf`, `image/png`). */ getAllowedTypes(): string[]; /** * Sets the allowed file types/extensions. * * - Accepts an array of MIME types or file extensions. * - Updates the file input's accept filter and internal validation. * * @param allowedTypes - Array of allowed types/extensions. */ setAllowedTypes(allowedTypes: string[]): void; /** * Gets the current list of disallowed file types/extensions. * * - Controlled by the `disallowedTypes` prop. * - MIME types or extensions (e.g. `.exe`, `application/x-msdownload`). */ getDisallowedTypes(): string[]; /** * Sets the disallowed file types/extensions. * * - Accepts an array of MIME types or file extensions. * - Any file matching these types/extensions will be rejected. * * @param disallowedTypes - Array of disallowed types/extensions. */ setDisallowedTypes(disallowedTypes: string[]): void; /** * Gets the current maximum allowed file size (per file, bytes). * * - Controlled by the `maxFileSize` prop. */ getMaxFileSize(): number; /** * Sets the maximum allowed file size (per file, bytes). * * - Files exceeding this size are rejected on upload. * * @param maxFileSize - Maximum size in bytes */ setMaxFileSize(maxFileSize: number): void; /** * Gets the current maximum allowed total file size (all files, bytes). * * - Controlled by the `maxTotalFileSize` prop. */ getMaxTotalFileSize(): number; /** * Sets the maximum allowed total file size (all files, bytes). * * - The sum of all attached files (including new and existing). * - Files causing the total to exceed this value will be rejected. * * @param maxTotalFileSize - Maximum combined size in bytes */ setMaxTotalFileSize(maxTotalFileSize: number): void; /** * Gets the current maximum number of files that can be uploaded. * * - Controlled by the `maxFileCount` prop. * - `0` means unlimited. */ getMaxFileCount(): number; /** * Sets the maximum number of files that can be uploaded. * * - When exceeded, older files are removed/replaced automatically. * * @param maxFileCount - Maximum file count (0 for unlimited) */ setMaxFileCount(maxFileCount: number): void; /** * Sets a custom callback when a file has a disallowed type/extension. * * - Called during file selection/drag if a file fails allowed/disallowed check. * - Use for custom alerts, validation UI, logging, etc. * * @param onDisallowedType - Callback with the file, allowedTypes, disallowedTypes. */ setOnDisallowedType(onDisallowedType: (currentCheckFile: File, allowedTypes: string[] | null, disallowedTypes: string[] | null) => void): void; /** * Sets a custom callback when a file exceeds the maximum file size. * * - Use to alert the user or log the event. * * @param onMaxFileSizeExceeded - Callback with file, file size, and limit. */ setOnMaxFileSizeExceeded(onMaxFileSizeExceeded: (currentCheckFile: File, currentFileSize: number, maxFileSizeAllowed: number) => void): void; /** * Sets a custom callback when the total file size exceeds the maximum allowed. * * - Called before adding a file that would overflow the total allowed size. * * @param onMaxTotalSizeExceeded - Callback with file, projected total, and limit. */ setOnMaxTotalSizeExceeded(onMaxTotalSizeExceeded: (currentCheckFile: File, currentTotalFileSize: number, maxTotalFileSizeAllowed: number) => void): void; /** * Returns whether the file list has been modified since the last set/reset. * * - Adding or removing files, or changing file info, sets this to true. */ isModified(): boolean; /** * Sets the "modified" state of the file set. * * - Use to manually reset the modified flag (e.g., after save). * * @param modified - `true` to mark as modified, `false` to reset. */ setModified(modified: boolean): void; /** * Gets the current `tabIndex` applied to element. * - `null`: no `tabindex` attribute (items not focusable). * - `0` or positive number: items can be focused via keyboard navigation. */ getTabIndex(): number | null; /** * Sets `tabIndex` for element. * @param v - `null` to remove, or number to make focusable. */ setTabIndex(v: number | null): void; /** * Focuses the add file button. * * - Useful for accessibility or guiding user attention programmatically. */ focus(): void; } export declare const HGap: DefineComponent>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; border: { type: BooleanConstructor; default: boolean; }; backgroundType: { type: PropType; default: BackgroundType; validator: (v: any) => boolean; }; line: { type: PropType; default: string; validator: (v: any) => boolean; }; lineStyle: { type: PropType; default: string; validator: (v: any) => boolean; }; lineWidth: { type: PropType; default: number; }; lineColor: { type: StringConstructor; default: string; }; }>, { gapRef: Ref; props: LooseRequired>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; border: { type: BooleanConstructor; default: boolean; }; backgroundType: { type: PropType; default: BackgroundType; validator: (v: any) => boolean; }; line: { type: PropType; default: string; validator: (v: any) => boolean; }; lineStyle: { type: PropType; default: string; validator: (v: any) => boolean; }; lineWidth: { type: PropType; default: number; }; lineColor: { type: StringConstructor; default: string; }; }>> & Readonly<{ onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; }> & {}>; line: Ref<"none" | "horizontal" | "vertical" | HGapLine, "none" | "horizontal" | "vertical" | HGapLine>; visibleClass: ComputedRef<"" | "hison-display-none">; borderClass: ComputedRef<"" | "hison-border">; backgroundTypeClass: ComputedRef<"hison-bg-transparent" | "hison-bg-empty" | "hison-bg-filled">; responsiveClassList: Ref; horizontalStyle: ComputedRef< { borderTop: string; }>; verticalStyle: ComputedRef< { borderLeft: string; }>; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("mounted" | "responsive-change")[], "mounted" | "responsive-change", PublicProps, Readonly>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; border: { type: BooleanConstructor; default: boolean; }; backgroundType: { type: PropType; default: BackgroundType; validator: (v: any) => boolean; }; line: { type: PropType; default: string; validator: (v: any) => boolean; }; lineStyle: { type: PropType; default: string; validator: (v: any) => boolean; }; lineWidth: { type: PropType; default: number; }; lineColor: { type: StringConstructor; default: string; }; }>> & Readonly<{ onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; }>, { line: "none" | "horizontal" | "vertical" | HGapLine; border: boolean; visible: boolean; backgroundType: BackgroundTypeValue | BackgroundType; lineWidth: string | number; lineStyle: "solid" | "dashed" | "dotted" | "double" | "groove" | "ridge" | "inset" | "outset" | HGapLineStyle; lineColor: string; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; export declare const HGapClientOnly: Component; export declare enum HGapLine { none = "none", horizontal = "horizontal", vertical = "vertical" } export declare enum HGapLineStyle { solid = "solid", dashed = "dashed", dotted = "dotted", double = "double", groove = "groove", ridge = "ridge", inset = "inset", outset = "outset" } export declare type HGapLineStyleValue = typeof H_GAP_LINE_STYLE_VALUES[number]; export declare type HGapLineValue = typeof H_GAP_RULE_VALUES[number]; /** * Runtime control methods for `HGap` component. * * This interface defines methods that can be accessed via `hison.component.getGap(id)`. * Use these methods to programmatically control spacing behavior and optional divider line rendering. * * --- * * ### 🔧 Example Usage * ```ts * const gap = hison.component.getGap('gap01') * * // Show a horizontal divider with dashed line * gap.setVisible(true) * gap.setLine('horizontal') * gap.setLineStyle('dashed') * gap.setLineWidth(2) // number => px * * // Theme-driven color (from hison-color-* class) * gap.setLineColor('') * * // Switch to vertical divider with transparent background * gap.setBackgroundType('transparent') * gap.setLine('vertical') * * // Hide again * gap.setVisible(false) * ``` * * --- * * ### ⚠️ Notes * - `lineColor`: * - `''` (empty) → auto color from wrapper’s `hison-color-*` class or fallback muted color. * - Any valid CSS color (hex, rgb, var) is accepted. * - `lineWidth` accepts a `number` (treated as `px`) or a CSS length string (e.g. `'0.5rem'`, `'2px'`). * - All changes are reactive and reflected immediately in the DOM. */ export declare interface HGapMethods extends ComponentMethods { /** * Returns the type of the component (always `'gap'`). */ getType(): 'gap'; /** * Returns whether the gap is visible. */ isVisible(): boolean; /** * Sets visibility of the gap. */ setVisible(visible: boolean): void; /** * Returns whether the gap shows border (box-shadow). */ isBorder(): boolean; /** * Sets whether the gap shows border (box-shadow). */ setBorder(border: boolean): void; /** * Gets the current background type ('filled' | 'empty' | 'transparent'). */ getBackgroundType(): BackgroundTypeValue; /** * Sets the background type of the gap. */ setBackgroundType(type: BackgroundType | BackgroundTypeValue): void; /** * Gets the current line mode ('none' | 'horizontal' | 'vertical'). */ getLine(): 'none' | 'horizontal' | 'vertical'; /** * Sets the line mode ('none' | 'horizontal' | 'vertical'). */ setLine(line: HGapLine | HGapLineValue): void; /** * Gets the current line style ('solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset'). */ getLineStyle(): HGapLineStyleValue; /** * Sets the line style. */ setLineStyle(style: HGapLineStyle | HGapLineStyleValue): void; /** * Gets the current line width (number in px or CSS length string). */ getLineWidth(): number | string; /** * Sets the line width (number → px, or CSS length string). */ setLineWidth(width: number | string): void; /** * Gets the current line color (CSS value or empty string for auto). */ getLineColor(): string; /** * Sets the line color (CSS value, or '' to auto resolve from theme). */ setLineColor(color?: string): void; } export declare const HGrid: DefineComponent boolean>; activeCells: PropType<(startRow: number, startColId: string, endRow: number, endColId: string) => boolean>; activeRow: PropType<(row: number) => boolean>; activeRows: PropType<(startRow: number, endRow: number) => boolean>; activeCol: PropType<(colId: string) => boolean>; activeCols: PropType<(startColId: string, endColId: string) => boolean>; beforeChange: PropType<(row: number, colId: string, oldValue: any, newValue: any) => boolean>; afterChange: PropType<(row: number, colId: string, oldValue: any, newValue: any) => void>; beforeClickCell: PropType<(row: number, colId: string) => boolean>; afterClickCell: PropType<(row: number, colId: string) => void>; clickSelect: PropType<(row: number, colId: string, selectNode: HTMLElement) => boolean>; clickCheckbox: PropType<(row: number, colId: string, checkboxNode: HTMLElement) => boolean>; clickButton: PropType<(row: number, colId: string, buttonNude: HTMLElement) => boolean>; clickLink: PropType<(row: number, colId: string, linkNode: HTMLElement) => boolean>; beforeDblClickCell: PropType<(row: number, colId: string) => boolean>; afterDblClickCell: PropType<(row: number, colId: string) => void>; beforeClickHeader: PropType<(row: number, colId: string) => boolean>; afterClickHeader: PropType<(row: number, colId: string) => void>; beforeDblClickHeader: PropType<(row: number, colId: string) => boolean>; afterDblClickHeader: PropType<(row: number, colId: string) => void>; beforeEditEnter: PropType<(row: number, colId: string, editorNode: HTMLElement) => boolean>; afterEditEnter: PropType<(row: number, colId: string, editorNode: HTMLElement) => void>; editEnding: PropType<(row: number, colId: string, oldValue: any, newValue: any) => boolean>; clickFilter: PropType<(row: number, colId: string, filterNode: HTMLElement) => boolean>; chooseFilter: PropType<(row: number, colId: string, oldValue: any, newValue: any) => boolean>; paste: PropType<(startRow: number, startColId: string, clipboardText: string) => boolean>; copy: PropType<(startRow: number, startColId: string, endRow: number, endColId: string, copyText: string) => boolean>; resize: PropType<(colId: string) => boolean>; keydownEditor: PropType<(event: KeyboardEvent) => boolean>; inputEditor: PropType<(event: InputEvent) => boolean>; keydownGrid: PropType<(event: KeyboardEvent) => boolean>; modelValue: PropType; id: { type: StringConstructor; required: boolean; }; columns: { type: PropType; required: boolean; }; class: { type: PropType>; required: boolean; }; style: { type: PropType; required: boolean; }; name: { type: StringConstructor; required: boolean; }; locked: { type: BooleanConstructor; default: boolean; }; lockedColor: { type: BooleanConstructor; default: boolean; }; resizable: { type: BooleanConstructor; default: boolean; }; redoable: { type: BooleanConstructor; default: boolean; }; redoCount: { type: NumberConstructor; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; headerVisible: { type: BooleanConstructor; default: boolean; }; rownumVisible: { type: BooleanConstructor; default: boolean; }; rownumSize: { type: StringConstructor; required: boolean; }; rownumLockedColor: { type: BooleanConstructor; default: boolean; }; statusVisible: { type: BooleanConstructor; default: boolean; }; statusLockedColor: { type: BooleanConstructor; default: boolean; }; selectionPolicy: { type: PropType; required: boolean; validator: (v: any) => boolean; }; nullValue: { type: StringConstructor; required: boolean; }; dateFormat: { type: PropType; required: boolean; validator: (v: any) => boolean; }; monthFormat: { type: PropType; required: boolean; validator: (v: any) => boolean; }; alterRow: { type: BooleanConstructor; default: boolean; }; frozenColCount: { type: NumberConstructor; required: boolean; }; frozenRowCount: { type: NumberConstructor; required: boolean; }; sortable: { type: BooleanConstructor; default: boolean; }; filterable: { type: BooleanConstructor; default: boolean; }; allCheckable: { type: BooleanConstructor; default: boolean; }; checkedValue: { type: StringConstructor; required: boolean; }; uncheckedValue: { type: StringConstructor; required: boolean; }; width: { type: StringConstructor; required: boolean; }; height: { type: StringConstructor; required: boolean; }; margin: { type: StringConstructor; required: boolean; }; padding: { type: StringConstructor; required: boolean; }; sizeLevel: { type: NumberConstructor; required: boolean; }; verticalAlign: { type: PropType; required: boolean; validator: (v: any) => boolean; }; cellFontSize: { type: StringConstructor; required: boolean; }; cellMinHeight: { type: StringConstructor; required: boolean; }; horizenBorderSize: { type: NumberConstructor; required: boolean; }; verticalBorderSize: { type: NumberConstructor; required: boolean; }; gridFontFamily: { type: StringConstructor; required: boolean; }; editorFontFamily: { type: StringConstructor; required: boolean; }; overflowWrap: { type: StringConstructor; required: boolean; }; wordBreak: { type: StringConstructor; required: boolean; }; whiteSpace: { type: StringConstructor; required: boolean; }; linkHasUnderLine: { type: BooleanConstructor; required: boolean; }; invertColor: { type: BooleanConstructor; default: boolean; }; color: { type: PropType; required: boolean; validator: (v: any) => boolean; }; gridBorderColor: { type: StringConstructor; required: boolean; }; headerCellBackColor: { type: StringConstructor; required: boolean; }; headerCellBorderColor: { type: StringConstructor; required: boolean; }; headerCellFontColor: { type: StringConstructor; required: boolean; }; footerCellBackColor: { type: StringConstructor; required: boolean; }; footerCellBorderColor: { type: StringConstructor; required: boolean; }; footerCellFontColor: { type: StringConstructor; required: boolean; }; bodyBackColor: { type: StringConstructor; required: boolean; }; bodyCellBackColor: { type: StringConstructor; required: boolean; }; bodyCellBorderColor: { type: StringConstructor; required: boolean; }; bodyCellFontColor: { type: StringConstructor; required: boolean; }; editorBackColor: { type: StringConstructor; required: boolean; }; editorFontColor: { type: StringConstructor; required: boolean; }; selectCellBackColor: { type: StringConstructor; required: boolean; }; selectCellFontColor: { type: StringConstructor; required: boolean; }; selectColBackColor: { type: StringConstructor; required: boolean; }; selectColFontColor: { type: StringConstructor; required: boolean; }; selectRowBackColor: { type: StringConstructor; required: boolean; }; selectRowFontColor: { type: StringConstructor; required: boolean; }; mouseoverCellBackColor: { type: StringConstructor; required: boolean; }; mouseoverCellFontColor: { type: StringConstructor; required: boolean; }; lockCellBackColor: { type: StringConstructor; required: boolean; }; lockCellFontColor: { type: StringConstructor; required: boolean; }; alterRowBackColor: { type: StringConstructor; required: boolean; }; alterRowFontColor: { type: StringConstructor; required: boolean; }; buttonFontColor: { type: StringConstructor; required: boolean; }; buttonBorderColor: { type: StringConstructor; required: boolean; }; buttonBackColor: { type: StringConstructor; required: boolean; }; buttonHoverFontColor: { type: StringConstructor; required: boolean; }; buttonHoverBackColor: { type: StringConstructor; required: boolean; }; buttonActiveFontColor: { type: StringConstructor; required: boolean; }; buttonActiveBackColor: { type: StringConstructor; required: boolean; }; linkFontColor: { type: StringConstructor; required: boolean; }; linkHoverFontColor: { type: StringConstructor; required: boolean; }; linkActiveFontColor: { type: StringConstructor; required: boolean; }; linkVisitedFontColor: { type: StringConstructor; required: boolean; }; linkFocusFontColor: { type: StringConstructor; required: boolean; }; }>, { editorWrap: Ref; props: LooseRequired boolean>; activeCells: PropType<(startRow: number, startColId: string, endRow: number, endColId: string) => boolean>; activeRow: PropType<(row: number) => boolean>; activeRows: PropType<(startRow: number, endRow: number) => boolean>; activeCol: PropType<(colId: string) => boolean>; activeCols: PropType<(startColId: string, endColId: string) => boolean>; beforeChange: PropType<(row: number, colId: string, oldValue: any, newValue: any) => boolean>; afterChange: PropType<(row: number, colId: string, oldValue: any, newValue: any) => void>; beforeClickCell: PropType<(row: number, colId: string) => boolean>; afterClickCell: PropType<(row: number, colId: string) => void>; clickSelect: PropType<(row: number, colId: string, selectNode: HTMLElement) => boolean>; clickCheckbox: PropType<(row: number, colId: string, checkboxNode: HTMLElement) => boolean>; clickButton: PropType<(row: number, colId: string, buttonNude: HTMLElement) => boolean>; clickLink: PropType<(row: number, colId: string, linkNode: HTMLElement) => boolean>; beforeDblClickCell: PropType<(row: number, colId: string) => boolean>; afterDblClickCell: PropType<(row: number, colId: string) => void>; beforeClickHeader: PropType<(row: number, colId: string) => boolean>; afterClickHeader: PropType<(row: number, colId: string) => void>; beforeDblClickHeader: PropType<(row: number, colId: string) => boolean>; afterDblClickHeader: PropType<(row: number, colId: string) => void>; beforeEditEnter: PropType<(row: number, colId: string, editorNode: HTMLElement) => boolean>; afterEditEnter: PropType<(row: number, colId: string, editorNode: HTMLElement) => void>; editEnding: PropType<(row: number, colId: string, oldValue: any, newValue: any) => boolean>; clickFilter: PropType<(row: number, colId: string, filterNode: HTMLElement) => boolean>; chooseFilter: PropType<(row: number, colId: string, oldValue: any, newValue: any) => boolean>; paste: PropType<(startRow: number, startColId: string, clipboardText: string) => boolean>; copy: PropType<(startRow: number, startColId: string, endRow: number, endColId: string, copyText: string) => boolean>; resize: PropType<(colId: string) => boolean>; keydownEditor: PropType<(event: KeyboardEvent) => boolean>; inputEditor: PropType<(event: InputEvent) => boolean>; keydownGrid: PropType<(event: KeyboardEvent) => boolean>; modelValue: PropType; id: { type: StringConstructor; required: boolean; }; columns: { type: PropType; required: boolean; }; class: { type: PropType>; required: boolean; }; style: { type: PropType; required: boolean; }; name: { type: StringConstructor; required: boolean; }; locked: { type: BooleanConstructor; default: boolean; }; lockedColor: { type: BooleanConstructor; default: boolean; }; resizable: { type: BooleanConstructor; default: boolean; }; redoable: { type: BooleanConstructor; default: boolean; }; redoCount: { type: NumberConstructor; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; headerVisible: { type: BooleanConstructor; default: boolean; }; rownumVisible: { type: BooleanConstructor; default: boolean; }; rownumSize: { type: StringConstructor; required: boolean; }; rownumLockedColor: { type: BooleanConstructor; default: boolean; }; statusVisible: { type: BooleanConstructor; default: boolean; }; statusLockedColor: { type: BooleanConstructor; default: boolean; }; selectionPolicy: { type: PropType; required: boolean; validator: (v: any) => boolean; }; nullValue: { type: StringConstructor; required: boolean; }; dateFormat: { type: PropType; required: boolean; validator: (v: any) => boolean; }; monthFormat: { type: PropType; required: boolean; validator: (v: any) => boolean; }; alterRow: { type: BooleanConstructor; default: boolean; }; frozenColCount: { type: NumberConstructor; required: boolean; }; frozenRowCount: { type: NumberConstructor; required: boolean; }; sortable: { type: BooleanConstructor; default: boolean; }; filterable: { type: BooleanConstructor; default: boolean; }; allCheckable: { type: BooleanConstructor; default: boolean; }; checkedValue: { type: StringConstructor; required: boolean; }; uncheckedValue: { type: StringConstructor; required: boolean; }; width: { type: StringConstructor; required: boolean; }; height: { type: StringConstructor; required: boolean; }; margin: { type: StringConstructor; required: boolean; }; padding: { type: StringConstructor; required: boolean; }; sizeLevel: { type: NumberConstructor; required: boolean; }; verticalAlign: { type: PropType; required: boolean; validator: (v: any) => boolean; }; cellFontSize: { type: StringConstructor; required: boolean; }; cellMinHeight: { type: StringConstructor; required: boolean; }; horizenBorderSize: { type: NumberConstructor; required: boolean; }; verticalBorderSize: { type: NumberConstructor; required: boolean; }; gridFontFamily: { type: StringConstructor; required: boolean; }; editorFontFamily: { type: StringConstructor; required: boolean; }; overflowWrap: { type: StringConstructor; required: boolean; }; wordBreak: { type: StringConstructor; required: boolean; }; whiteSpace: { type: StringConstructor; required: boolean; }; linkHasUnderLine: { type: BooleanConstructor; required: boolean; }; invertColor: { type: BooleanConstructor; default: boolean; }; color: { type: PropType; required: boolean; validator: (v: any) => boolean; }; gridBorderColor: { type: StringConstructor; required: boolean; }; headerCellBackColor: { type: StringConstructor; required: boolean; }; headerCellBorderColor: { type: StringConstructor; required: boolean; }; headerCellFontColor: { type: StringConstructor; required: boolean; }; footerCellBackColor: { type: StringConstructor; required: boolean; }; footerCellBorderColor: { type: StringConstructor; required: boolean; }; footerCellFontColor: { type: StringConstructor; required: boolean; }; bodyBackColor: { type: StringConstructor; required: boolean; }; bodyCellBackColor: { type: StringConstructor; required: boolean; }; bodyCellBorderColor: { type: StringConstructor; required: boolean; }; bodyCellFontColor: { type: StringConstructor; required: boolean; }; editorBackColor: { type: StringConstructor; required: boolean; }; editorFontColor: { type: StringConstructor; required: boolean; }; selectCellBackColor: { type: StringConstructor; required: boolean; }; selectCellFontColor: { type: StringConstructor; required: boolean; }; selectColBackColor: { type: StringConstructor; required: boolean; }; selectColFontColor: { type: StringConstructor; required: boolean; }; selectRowBackColor: { type: StringConstructor; required: boolean; }; selectRowFontColor: { type: StringConstructor; required: boolean; }; mouseoverCellBackColor: { type: StringConstructor; required: boolean; }; mouseoverCellFontColor: { type: StringConstructor; required: boolean; }; lockCellBackColor: { type: StringConstructor; required: boolean; }; lockCellFontColor: { type: StringConstructor; required: boolean; }; alterRowBackColor: { type: StringConstructor; required: boolean; }; alterRowFontColor: { type: StringConstructor; required: boolean; }; buttonFontColor: { type: StringConstructor; required: boolean; }; buttonBorderColor: { type: StringConstructor; required: boolean; }; buttonBackColor: { type: StringConstructor; required: boolean; }; buttonHoverFontColor: { type: StringConstructor; required: boolean; }; buttonHoverBackColor: { type: StringConstructor; required: boolean; }; buttonActiveFontColor: { type: StringConstructor; required: boolean; }; buttonActiveBackColor: { type: StringConstructor; required: boolean; }; linkFontColor: { type: StringConstructor; required: boolean; }; linkHoverFontColor: { type: StringConstructor; required: boolean; }; linkActiveFontColor: { type: StringConstructor; required: boolean; }; linkVisitedFontColor: { type: StringConstructor; required: boolean; }; linkFocusFontColor: { type: StringConstructor; required: boolean; }; }>> & Readonly<{ onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; }> & {}>; bindAttrs: ComputedRef>; responsiveClassList: Ref; visibleClass: ComputedRef<"" | "hison-display-none">; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("mounted" | "responsive-change")[], "mounted" | "responsive-change", PublicProps, Readonly boolean>; activeCells: PropType<(startRow: number, startColId: string, endRow: number, endColId: string) => boolean>; activeRow: PropType<(row: number) => boolean>; activeRows: PropType<(startRow: number, endRow: number) => boolean>; activeCol: PropType<(colId: string) => boolean>; activeCols: PropType<(startColId: string, endColId: string) => boolean>; beforeChange: PropType<(row: number, colId: string, oldValue: any, newValue: any) => boolean>; afterChange: PropType<(row: number, colId: string, oldValue: any, newValue: any) => void>; beforeClickCell: PropType<(row: number, colId: string) => boolean>; afterClickCell: PropType<(row: number, colId: string) => void>; clickSelect: PropType<(row: number, colId: string, selectNode: HTMLElement) => boolean>; clickCheckbox: PropType<(row: number, colId: string, checkboxNode: HTMLElement) => boolean>; clickButton: PropType<(row: number, colId: string, buttonNude: HTMLElement) => boolean>; clickLink: PropType<(row: number, colId: string, linkNode: HTMLElement) => boolean>; beforeDblClickCell: PropType<(row: number, colId: string) => boolean>; afterDblClickCell: PropType<(row: number, colId: string) => void>; beforeClickHeader: PropType<(row: number, colId: string) => boolean>; afterClickHeader: PropType<(row: number, colId: string) => void>; beforeDblClickHeader: PropType<(row: number, colId: string) => boolean>; afterDblClickHeader: PropType<(row: number, colId: string) => void>; beforeEditEnter: PropType<(row: number, colId: string, editorNode: HTMLElement) => boolean>; afterEditEnter: PropType<(row: number, colId: string, editorNode: HTMLElement) => void>; editEnding: PropType<(row: number, colId: string, oldValue: any, newValue: any) => boolean>; clickFilter: PropType<(row: number, colId: string, filterNode: HTMLElement) => boolean>; chooseFilter: PropType<(row: number, colId: string, oldValue: any, newValue: any) => boolean>; paste: PropType<(startRow: number, startColId: string, clipboardText: string) => boolean>; copy: PropType<(startRow: number, startColId: string, endRow: number, endColId: string, copyText: string) => boolean>; resize: PropType<(colId: string) => boolean>; keydownEditor: PropType<(event: KeyboardEvent) => boolean>; inputEditor: PropType<(event: InputEvent) => boolean>; keydownGrid: PropType<(event: KeyboardEvent) => boolean>; modelValue: PropType; id: { type: StringConstructor; required: boolean; }; columns: { type: PropType; required: boolean; }; class: { type: PropType>; required: boolean; }; style: { type: PropType; required: boolean; }; name: { type: StringConstructor; required: boolean; }; locked: { type: BooleanConstructor; default: boolean; }; lockedColor: { type: BooleanConstructor; default: boolean; }; resizable: { type: BooleanConstructor; default: boolean; }; redoable: { type: BooleanConstructor; default: boolean; }; redoCount: { type: NumberConstructor; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; headerVisible: { type: BooleanConstructor; default: boolean; }; rownumVisible: { type: BooleanConstructor; default: boolean; }; rownumSize: { type: StringConstructor; required: boolean; }; rownumLockedColor: { type: BooleanConstructor; default: boolean; }; statusVisible: { type: BooleanConstructor; default: boolean; }; statusLockedColor: { type: BooleanConstructor; default: boolean; }; selectionPolicy: { type: PropType; required: boolean; validator: (v: any) => boolean; }; nullValue: { type: StringConstructor; required: boolean; }; dateFormat: { type: PropType; required: boolean; validator: (v: any) => boolean; }; monthFormat: { type: PropType; required: boolean; validator: (v: any) => boolean; }; alterRow: { type: BooleanConstructor; default: boolean; }; frozenColCount: { type: NumberConstructor; required: boolean; }; frozenRowCount: { type: NumberConstructor; required: boolean; }; sortable: { type: BooleanConstructor; default: boolean; }; filterable: { type: BooleanConstructor; default: boolean; }; allCheckable: { type: BooleanConstructor; default: boolean; }; checkedValue: { type: StringConstructor; required: boolean; }; uncheckedValue: { type: StringConstructor; required: boolean; }; width: { type: StringConstructor; required: boolean; }; height: { type: StringConstructor; required: boolean; }; margin: { type: StringConstructor; required: boolean; }; padding: { type: StringConstructor; required: boolean; }; sizeLevel: { type: NumberConstructor; required: boolean; }; verticalAlign: { type: PropType; required: boolean; validator: (v: any) => boolean; }; cellFontSize: { type: StringConstructor; required: boolean; }; cellMinHeight: { type: StringConstructor; required: boolean; }; horizenBorderSize: { type: NumberConstructor; required: boolean; }; verticalBorderSize: { type: NumberConstructor; required: boolean; }; gridFontFamily: { type: StringConstructor; required: boolean; }; editorFontFamily: { type: StringConstructor; required: boolean; }; overflowWrap: { type: StringConstructor; required: boolean; }; wordBreak: { type: StringConstructor; required: boolean; }; whiteSpace: { type: StringConstructor; required: boolean; }; linkHasUnderLine: { type: BooleanConstructor; required: boolean; }; invertColor: { type: BooleanConstructor; default: boolean; }; color: { type: PropType; required: boolean; validator: (v: any) => boolean; }; gridBorderColor: { type: StringConstructor; required: boolean; }; headerCellBackColor: { type: StringConstructor; required: boolean; }; headerCellBorderColor: { type: StringConstructor; required: boolean; }; headerCellFontColor: { type: StringConstructor; required: boolean; }; footerCellBackColor: { type: StringConstructor; required: boolean; }; footerCellBorderColor: { type: StringConstructor; required: boolean; }; footerCellFontColor: { type: StringConstructor; required: boolean; }; bodyBackColor: { type: StringConstructor; required: boolean; }; bodyCellBackColor: { type: StringConstructor; required: boolean; }; bodyCellBorderColor: { type: StringConstructor; required: boolean; }; bodyCellFontColor: { type: StringConstructor; required: boolean; }; editorBackColor: { type: StringConstructor; required: boolean; }; editorFontColor: { type: StringConstructor; required: boolean; }; selectCellBackColor: { type: StringConstructor; required: boolean; }; selectCellFontColor: { type: StringConstructor; required: boolean; }; selectColBackColor: { type: StringConstructor; required: boolean; }; selectColFontColor: { type: StringConstructor; required: boolean; }; selectRowBackColor: { type: StringConstructor; required: boolean; }; selectRowFontColor: { type: StringConstructor; required: boolean; }; mouseoverCellBackColor: { type: StringConstructor; required: boolean; }; mouseoverCellFontColor: { type: StringConstructor; required: boolean; }; lockCellBackColor: { type: StringConstructor; required: boolean; }; lockCellFontColor: { type: StringConstructor; required: boolean; }; alterRowBackColor: { type: StringConstructor; required: boolean; }; alterRowFontColor: { type: StringConstructor; required: boolean; }; buttonFontColor: { type: StringConstructor; required: boolean; }; buttonBorderColor: { type: StringConstructor; required: boolean; }; buttonBackColor: { type: StringConstructor; required: boolean; }; buttonHoverFontColor: { type: StringConstructor; required: boolean; }; buttonHoverBackColor: { type: StringConstructor; required: boolean; }; buttonActiveFontColor: { type: StringConstructor; required: boolean; }; buttonActiveBackColor: { type: StringConstructor; required: boolean; }; linkFontColor: { type: StringConstructor; required: boolean; }; linkHoverFontColor: { type: StringConstructor; required: boolean; }; linkActiveFontColor: { type: StringConstructor; required: boolean; }; linkVisitedFontColor: { type: StringConstructor; required: boolean; }; linkFocusFontColor: { type: StringConstructor; required: boolean; }; }>> & Readonly<{ onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; }>, { invertColor: boolean; linkHasUnderLine: boolean; resizable: boolean; sortable: boolean; filterable: boolean; locked: boolean; lockedColor: boolean; visible: boolean; redoable: boolean; headerVisible: boolean; rownumVisible: boolean; rownumLockedColor: boolean; statusVisible: boolean; statusLockedColor: boolean; alterRow: boolean; allCheckable: boolean; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; export declare const HGridClientOnly: Component; /** * This is config about the column. */ export declare interface HGridColumn { /** * Required value. It is the id of the column. */ id: string; /** * The name of the column. If null, the grid Id is inserted. */ name?: string; /** * Header text value. Use ';' as the delimiter. Empty values are automatically merged. */ header?: string; /** * Insert the footer using ';' as the delimiter. General text: Insert the string as text in the footer. * $$MAX: Calculate and display the maximum value in the footer. * $$MIN: Calculate and display the minimum value in the footer. * $$SUM: Calculate and display the sum in the footer. * $$AVG: Calculate and display the average in the footer (excluding null). */ footer?: string; /** * Sets the type of the column. * text: Text input type. A textarea input box is created on double click. * number: Number input type. An input number type is created on double click. * date: Date input type. An input date type is created on double click. * month: Month input type. An input month type is created on double click. * mask: Text input type that matches the format. An input text type is created on double click. Controlled by the format attribute. * select: Input select type. Options are received when inserting values. Ex) [{value:"val1", text:"text1", selected:true},{value:"val2", text:"text2"}..] * checkbox: Input checkbox type. Checked if it matches the checkedValue of the grid info, unchecked otherwise. * button: Button type. The inserted value is displayed as the innerText of the button. If there is no value, the button is not created. * link: a tag. Insert the value as an object in the form {text:"text", value:"https://..", target:"_blank"}. The text is set as innerText, the value as href, and the target as target. * code: A type that cannot have or display values other than the specified codes. If nullValue is not in the codes, it is not allowed. Empty values are stored as default-code. */ dataType?: string; /** * If untarget is true, the cells in this column cannot be selected. */ untarget?: boolean; /** * If rowMerge is true, this column merges rows based on the cell above if the value, data-type, and format are the same. */ rowMerge?: boolean; /** * If colMerge is true, this column merges columns based on the cell in front if the value, data-type, and format are the same. */ colMerge?: boolean; /** * If visible is false, this column's width becomes 0 and size cannot be changed (hidden). */ visible?: boolean; /** * If required is true, this column can be checked for input using the checkRequired() method. */ required?: boolean; /** * If resizable is false, the user cannot change the width size of this column. */ resizable?: boolean; /** * Indicates whether the user can use the sorting feature for this column. */ sortable?: boolean; /** * Indicates whether the user can use the filtering feature for this column. */ filterable?: boolean; /** * The width of the column. Insert cssText. If only a number is entered, the unit is 'px'. */ width?: string; /** * Sets the select width size for this column. Insert cssText. The unit can only be px or %. */ selectSize?: string; /** * If locked is true, the cells in this column cannot be changed. */ locked?: boolean; /** * If lockedColor is true, the cells in this column will display a background color indicating the locked state when locked. */ lockedColor?: boolean; /** * Sets the format for data-type mask, number. * Mask format: A: Uppercase letter, a: Lowercase letter, 9: Number, others: Matching character. * Ex) format: "AAA-991", value: "ABC-123456" => result: "ABC-12" * * Number format: * Integer part: * "#,###": Display with thousand separators, 0 is displayed as null, "#,##0": Display with thousand separators, * 0 is displayed as 0, "#": Display as is, 0 is displayed as null, "0": Display as is, 0 is displayed as 0. * Decimal part: "#": Display if present, "0": Display as 0 if not present. * Others: Characters before and after are displayed as is, and if the last character is "%", it is displayed as a percentage. * Ex1) format: "#,##0.## $", number: 1234.1234 => result: "1,234.12 $" * Ex2) format: "0%", number: 0.12 => result: "12%" */ format?: string; /** * Valid only for columns with data-type code. Sets codes separated by ";". This column can only have the specified code values. * Ex) "US;KR;JP" => Can only have the values "US", "KR", "JP" */ codes?: string; /** * Valid only for columns with data-type code. If a column with data-type code has no value, the default-code is used as the value instead of grid.info's nullValue. */ defaultCode?: string; /** * Valid only for columns with data-type text. Sets the maximum string length that can be inserted into the value. Enter only positive integers. */ maxLength?: number; /** * Valid only for columns with data-type text. Sets the maximum byte size of the string that can be inserted into the value. Enter only positive integers. * Byte size criteria are set with vg.lessoreq0x7ffByte, vg.lessoreq0xffffByte, vg.greater0xffffByte. * lessoreq0x7ffByte: Characters with charCode less than or equal to 0x7FF, default value is 2 (common symbols or English alphabet based on UTF-8). * lessoreq0xffffByte: Characters with charCode less than or equal to 0xFFFF, default value is 3 (additional alphabets such as Latin based on UTF-8). * greater0xffffByte: Characters with charCode greater than 0xFFFF, default value is 4 (emoji, Korean, Chinese, Japanese, etc. based on UTF-8). */ maxByte?: number; /** * Valid only for columns with data-type number. Sets the maximum value. If a value exceeding this is entered, it is stored as the maximum value. Enter only numbers. */ maxNumber?: number; /** * Valid only for columns with data-type number. Sets the minimum value. If a value below this is entered, it is stored as the minimum value. Enter only numbers. */ minNumber?: number; /** * Valid only for columns with data-type number. Specifies the rounding place. * roundNumber positive integer: Specifies the decimal place to round. * roundNumber negative integer: Specifies the integer place to round. * Ex) roundNumber: 2, number: 1234.1234 => result: 1234.12 * Ex) roundNumber: -2, number: 1234.1234 => result: 1200 */ roundNumber?: number; /** * Sets the align of the column. Choose from 'left', 'center', 'right'. If no value is specified, the default align follows the data-type. * text, mask: left, number: right, date, month, code, select, checkbox, button, link: center. */ align?: GridAlign | GridAlignValue; /** * Sets the default vertical-align of the column. Choose from 'top', 'center', 'bottom'. If no value is specified, it defaults to center. */ verticalAlign?: GridVerticalAlign | GridVerticalAlignValue; /** * Sets the default overflow-wrap of the column. Enter the overflow-wrap in cssText. */ overflowWrap?: string; /** * Sets the default word-break of the column. Enter the word-break in cssText. */ wordBreak?: string; /** * Sets the default white-space of the column. Enter the white-space in cssText. */ whiteSpace?: string; /** * Sets the background color of the column. Insert the 16-digit color code in cssText. Ex) "#ffffff" */ backColor?: string; /** * Sets the font color of the column. Insert the 16-digit color code in cssText. Ex) "#ffffff" */ fontColor?: string; /** * If fontBold is true, the innerText of the column's cells will be bold. */ fontBold?: boolean; /** * If fontItalic is true, the innerText of the column's cells will be italic. */ fontItalic?: boolean; /** * If fontThruline is true, the innerText of the column's cells will have a strikethrough. */ fontThruline?: boolean; /** * If fontUnderline is true, the innerText of the column's cells will be underlined. */ fontUnderline?: boolean; } /** * Provides various methods to manipulate and manage a Vanillagrid instance. * * - This interface includes over 200 methods for handling grid structure, data, * filtering, sorting, appearance, and user interactions. * - A `GridMethods` instance can be retrieved using `vg.getGrid({gridId})`. * - It allows users to dynamically modify grid properties, update cell values, * and customize the grid's behavior through predefined methods. * * ### Key Features: * - Manage grid headers, footers, rows, and columns. * - Load and retrieve data as JSON. * - Apply filters, sorting, and styling dynamically. * - Control grid visibility, locking, and resizing. * - Undo and redo changes within the grid. * * ### Example usage: * ```typescript * const grid = vg.getGrid('gridId'); * grid.setHeaderText('col1', 'New Header'); * grid.setCellValue(1, 'col1', 'Updated Value'); * ``` */ export declare interface HGridMethods extends ComponentMethods, Omit { /** * Returns the type of the grid. */ getType(): 'grid'; /** * Extracts the current grid content as a `DataModel` instance. * * - Converts all current grid rows into a `DataModel`. * - Each row becomes a record in the `DataModel`. * - Columns are inferred automatically from the grid's structure or cell values. * * @returns A `DataModel` instance representing the current grid content. */ getDataModel(): InterfaceDataModel>; /** * Loads data into the grid using a `DataModel` instance. * * - Converts the first `getRowCount()` rows of the provided `DataModel` into key-value records. * - These records are then inserted into the grid. * - Grid is cleared before new data is loaded. * * @param dataModel A `DataModel` object representing the rows to load into the grid. */ setDataModel>(dataModel: InterfaceDataModel): void; /** * Loads data into the grid. * * - Supports three different data formats: * 1. **Key-Value Format**: An array of objects where each object represents a row with column-value pairs. * 2. **Datas Format**: A 2D array of cell objects, each containing `{ colId, value }`. * 3. **DataModel Format**: A `DataModel` instance whose rows are inserted into the grid. * - Before loading, the grid is automatically cleared. * * ### Example Usage: * ```ts * // 1. Key-Value Format * grid.load([ * { col1: 'value1-1', col2: 'value1-2' }, * { col1: 'value2-1', col2: 'value2-2' } * ]); * * // 2. Datas Format * grid.load([ * [{ colId: 'col1', value: 'value1-1' }, { colId: 'col2', value: 'value1-2' }], * [{ colId: 'col1', value: 'value2-1' }, { colId: 'col2', value: 'value2-2' }] * ]); * * // 3. DataModel Format * const model = new hison.data.DataModel(); * model.setColumns(['col1', 'col2']); * model.addRow({ col1: 'value1-1', col2: 'value1-2' }); * grid.load(model); * ``` * * @param keyValueOrDatas The data to load into the grid. * @returns `true` if the data was successfully loaded. */ load>(keyValueOrDatas: Record | Record[] | InterfaceDataModel): boolean; } export declare const HImagebox: DefineComponent>; required: boolean; }; style: { type: PropType; required: boolean; }; imgStyle: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; editMode: { type: PropType; default: EditMode; validator: (v: any) => boolean; }; modelValue: { type: PropType; default: null; }; attId: { type: StringConstructor; default: string; }; addButtonText: { type: StringConstructor; default: string; }; removeButtonText: { type: StringConstructor; default: string; }; modifyButtonText: { type: StringConstructor; default: string; }; placeholder: { type: StringConstructor; default: string; }; enableDrop: { type: BooleanConstructor; default: boolean; }; allowedTypes: { type: PropType; default: () => string[]; }; disallowedTypes: { type: PropType; default: undefined; }; maxFileSize: { type: NumberConstructor; default: number; }; border: { type: BooleanConstructor; default: boolean; }; onDisallowedType: PropType<(currentCheckFile: File, allowedTypes: string[] | null, disallowedTypes: string[] | null) => void>; onMaxFileSizeExceeded: PropType<(file: File, size: number, max: number) => void>; tabIndex: { type: PropType; default: null; validator: (v: any) => boolean; }; }>, { fileInputRef: Ref; id: string; props: LooseRequired>; required: boolean; }; style: { type: PropType; required: boolean; }; imgStyle: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; editMode: { type: PropType; default: EditMode; validator: (v: any) => boolean; }; modelValue: { type: PropType; default: null; }; attId: { type: StringConstructor; default: string; }; addButtonText: { type: StringConstructor; default: string; }; removeButtonText: { type: StringConstructor; default: string; }; modifyButtonText: { type: StringConstructor; default: string; }; placeholder: { type: StringConstructor; default: string; }; enableDrop: { type: BooleanConstructor; default: boolean; }; allowedTypes: { type: PropType; default: () => string[]; }; disallowedTypes: { type: PropType; default: undefined; }; maxFileSize: { type: NumberConstructor; default: number; }; border: { type: BooleanConstructor; default: boolean; }; onDisallowedType: PropType<(currentCheckFile: File, allowedTypes: string[] | null, disallowedTypes: string[] | null) => void>; onMaxFileSizeExceeded: PropType<(file: File, size: number, max: number) => void>; tabIndex: { type: PropType; default: null; validator: (v: any) => boolean; }; }>> & Readonly<{ onBlur?: ((...args: any[]) => any) | undefined; onChange?: ((...args: any[]) => any) | undefined; onFocus?: ((...args: any[]) => any) | undefined; onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined; onAdd?: ((...args: any[]) => any) | undefined; onRemove?: ((...args: any[]) => any) | undefined; "onPreview-click"?: ((...args: any[]) => any) | undefined; "onPreview-dblclick"?: ((...args: any[]) => any) | undefined; "onPreview-contextmenu"?: ((...args: any[]) => any) | undefined; "onPreview-pointerenter"?: ((...args: any[]) => any) | undefined; "onPreview-pointerleave"?: ((...args: any[]) => any) | undefined; "onPreview-pointerdown"?: ((...args: any[]) => any) | undefined; "onPreview-pointerup"?: ((...args: any[]) => any) | undefined; }> & {}>; imgStyle: ComputedRef; imageValue: Ref< { fileId?: string | undefined; fileName: string; fileSize?: number | undefined; filePath?: string | undefined; extension?: string | undefined; file?: { readonly lastModified: number; readonly name: string; readonly webkitRelativePath: string; readonly size: number; readonly type: string; arrayBuffer: () => Promise; bytes: () => Promise>; slice: (start?: number, end?: number, contentType?: string) => Blob; stream: () => ReadableStream>; text: () => Promise; } | undefined; isNew?: boolean | undefined; isDeleted?: boolean | undefined; } | null, AttachedFileItem | { fileId?: string | undefined; fileName: string; fileSize?: number | undefined; filePath?: string | undefined; extension?: string | undefined; file?: { readonly lastModified: number; readonly name: string; readonly webkitRelativePath: string; readonly size: number; readonly type: string; arrayBuffer: () => Promise; bytes: () => Promise>; slice: (start?: number, end?: number, contentType?: string) => Blob; stream: () => ReadableStream>; text: () => Promise; } | undefined; isNew?: boolean | undefined; isDeleted?: boolean | undefined; } | null>; imageboxMethods: Ref< { getType: () => "imagebox"; getEditMode: () => EditModeValue; setEditMode: (mode: EditMode | EditModeValue) => void; getValue: () => AttachedFileItem | null; setValue: (attachedFileItem: AttachedFileItem) => void; getDataModel: () => InterfaceDataModel | null; setDataModel: (dataModel: InterfaceDataModel) => void; load: >(data: AttachedFileItem | Record | InterfaceDataModel) => void; getAttId: () => string; setAttId: (attId: string) => void; getAddButtonText: () => string; setAddButtonText: (addButtonText: string) => void; getRemoveButtonText: () => string; setRemoveButtonText: (removeButtonText: string) => void; getModifyButtonText: () => string; setModifyButtonText: (val: string) => void; getPlaceholder: () => string; setPlaceholder: (placeholder: string) => void; isEnableDrop: () => boolean; setEnableDrop: (enableDrop: boolean) => void; getAllowedTypes: () => string[]; setAllowedTypes: (allowedTypes: string[]) => void; getDisallowedTypes: () => string[]; setDisallowedTypes: (disallowedTypes: string[]) => void; getMaxFileSize: () => number; setMaxFileSize: (maxFileSize: number) => void; isBorder: () => boolean; setBorder: (border: boolean) => void; setOnDisallowedType: (onDisallowedType: (currentCheckFile: File, allowedTypes: string[] | null, disallowedTypes: string[] | null) => void) => void; setOnMaxFileSizeExceeded: (onMaxFileSizeExceeded: (currentCheckFile: File, currentFileSize: number, maxFileSizeAllowed: number) => void) => void; isModified: () => boolean; setModified: (modified: boolean) => void; getTabIndex: () => number | null; setTabIndex: (v: number | null) => void; focus: () => void; isHisonvueComponent: true; getId: () => string; isVisible: () => boolean; setVisible: (visible: boolean) => void; reload: () => void; } | null, HImageboxMethods | { getType: () => "imagebox"; getEditMode: () => EditModeValue; setEditMode: (mode: EditMode | EditModeValue) => void; getValue: () => AttachedFileItem | null; setValue: (attachedFileItem: AttachedFileItem) => void; getDataModel: () => InterfaceDataModel | null; setDataModel: (dataModel: InterfaceDataModel) => void; load: >(data: AttachedFileItem | Record | InterfaceDataModel) => void; getAttId: () => string; setAttId: (attId: string) => void; getAddButtonText: () => string; setAddButtonText: (addButtonText: string) => void; getRemoveButtonText: () => string; setRemoveButtonText: (removeButtonText: string) => void; getModifyButtonText: () => string; setModifyButtonText: (val: string) => void; getPlaceholder: () => string; setPlaceholder: (placeholder: string) => void; isEnableDrop: () => boolean; setEnableDrop: (enableDrop: boolean) => void; getAllowedTypes: () => string[]; setAllowedTypes: (allowedTypes: string[]) => void; getDisallowedTypes: () => string[]; setDisallowedTypes: (disallowedTypes: string[]) => void; getMaxFileSize: () => number; setMaxFileSize: (maxFileSize: number) => void; isBorder: () => boolean; setBorder: (border: boolean) => void; setOnDisallowedType: (onDisallowedType: (currentCheckFile: File, allowedTypes: string[] | null, disallowedTypes: string[] | null) => void) => void; setOnMaxFileSizeExceeded: (onMaxFileSizeExceeded: (currentCheckFile: File, currentFileSize: number, maxFileSizeAllowed: number) => void) => void; isModified: () => boolean; setModified: (modified: boolean) => void; getTabIndex: () => number | null; setTabIndex: (v: number | null) => void; focus: () => void; isHisonvueComponent: true; getId: () => string; isVisible: () => boolean; setVisible: (visible: boolean) => void; reload: () => void; } | null>; visibleClass: ComputedRef<"" | "hison-display-none">; editModeClass: ComputedRef; borderClass: ComputedRef<"" | "hison-border">; responsiveClassList: Ref; buttonClassList: ComputedRef; disable: ComputedRef; readonly: ComputedRef; addButtonText: Ref; modifyButtonText: Ref; removeButtonText: Ref; placeholder: Ref; isDragging: Ref; previewUrl: Ref; showAddButton: ComputedRef; showRemoveButton: ComputedRef; accept: ComputedRef; tabIndex: Ref; handleDragEnter: (e: DragEvent) => void; handleDrop: (e: DragEvent) => void; openFileDialog: () => void; removeImage: () => void; onFileChange: (e: Event) => void; onPreviewClick: (e: MouseEvent) => void; onPreviewDblClick: (e: MouseEvent) => void; onPreviewContextMenu: (e: MouseEvent) => void; onPreviewPointerEnter: (e: PointerEvent) => void; onPreviewPointerLeave: (e: PointerEvent) => void; onPreviewPointerDown: (e: PointerEvent) => void; onPreviewPointerUp: (e: PointerEvent) => void; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("add" | "mounted" | "blur" | "change" | "focus" | "responsive-change" | "update:modelValue" | "remove" | "preview-click" | "preview-dblclick" | "preview-contextmenu" | "preview-pointerenter" | "preview-pointerleave" | "preview-pointerdown" | "preview-pointerup")[], "add" | "mounted" | "blur" | "change" | "focus" | "responsive-change" | "update:modelValue" | "remove" | "preview-click" | "preview-dblclick" | "preview-contextmenu" | "preview-pointerenter" | "preview-pointerleave" | "preview-pointerdown" | "preview-pointerup", PublicProps, Readonly>; required: boolean; }; style: { type: PropType; required: boolean; }; imgStyle: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; editMode: { type: PropType; default: EditMode; validator: (v: any) => boolean; }; modelValue: { type: PropType; default: null; }; attId: { type: StringConstructor; default: string; }; addButtonText: { type: StringConstructor; default: string; }; removeButtonText: { type: StringConstructor; default: string; }; modifyButtonText: { type: StringConstructor; default: string; }; placeholder: { type: StringConstructor; default: string; }; enableDrop: { type: BooleanConstructor; default: boolean; }; allowedTypes: { type: PropType; default: () => string[]; }; disallowedTypes: { type: PropType; default: undefined; }; maxFileSize: { type: NumberConstructor; default: number; }; border: { type: BooleanConstructor; default: boolean; }; onDisallowedType: PropType<(currentCheckFile: File, allowedTypes: string[] | null, disallowedTypes: string[] | null) => void>; onMaxFileSizeExceeded: PropType<(file: File, size: number, max: number) => void>; tabIndex: { type: PropType; default: null; validator: (v: any) => boolean; }; }>> & Readonly<{ onBlur?: ((...args: any[]) => any) | undefined; onChange?: ((...args: any[]) => any) | undefined; onFocus?: ((...args: any[]) => any) | undefined; onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined; onAdd?: ((...args: any[]) => any) | undefined; onRemove?: ((...args: any[]) => any) | undefined; "onPreview-click"?: ((...args: any[]) => any) | undefined; "onPreview-dblclick"?: ((...args: any[]) => any) | undefined; "onPreview-contextmenu"?: ((...args: any[]) => any) | undefined; "onPreview-pointerenter"?: ((...args: any[]) => any) | undefined; "onPreview-pointerleave"?: ((...args: any[]) => any) | undefined; "onPreview-pointerdown"?: ((...args: any[]) => any) | undefined; "onPreview-pointerup"?: ((...args: any[]) => any) | undefined; }>, { border: boolean; visible: boolean; tabIndex: string | number | null; placeholder: string; modelValue: AttachedFileItem | null; editMode: "editable" | "disable" | "readonly" | EditMode; attId: string; addButtonText: string; removeButtonText: string; enableDrop: boolean; allowedTypes: string | string[]; disallowedTypes: string | string[]; maxFileSize: number; modifyButtonText: string; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; export declare const HImageboxClientOnly: Component; /** * Interface for runtime control of `` component. * * This interface provides a complete set of methods for dynamically controlling and querying the state * of an HImagebox instance in hisonvue. All methods are accessible via `hison.vue.getInput(id)` or * on the instance emitted via the `mounted` event. * * **Typical use cases include:** * - Changing edit mode, button text, allowed file types, or drag-and-drop support at runtime * - Setting the image programmatically (e.g., for editing or resetting forms) * - Integrating with backend logic to preload, update, or clear the image state * - Customizing validation or error handling logic for file type or file size checks * - Dynamically updating UI text such as placeholder or button labels in response to user actions * - Managing attachment group IDs for file association with backend records * * :::example * ```ts * // Get runtime methods from hison.vue * const imagebox = hison.vue.getInput('avatarBox') as HImageboxMethods * * // Make the component readonly * imagebox.setEditMode('readonly') * * // Set allowed file types to PNG only * imagebox.setAllowedTypes(['image/png']) * * // Change add button label at runtime * imagebox.setAddButtonText('Upload Photo') * * // Replace the image with a new uploaded file * imagebox.setValue({ * fileName: 'profile.png', * file: someFileObj, * fileSize: someFileObj.size, * extension: 'png', * isNew: true * }) * * // Attach a custom handler for max file size exceeded * imagebox.setOnMaxFileSizeExceeded((file, size, max) => { * alert(`File too large! Max allowed: ${max} bytes`) * }) * * // Programmatically focus the add button * imagebox.focus() * ``` * ::: * * **Method groups:** * - **Edit Mode & Visibility**: Control user interaction and UI state * - **Image Value**: Get or set the attached image file (including clearing or preloading) * - **File Upload Options**: Allowed/disallowed types, file size, drag-and-drop, validation handlers * - **UI Labels & Placeholders**: Set button labels or placeholder dynamically * - **Attachment Grouping**: Manage `attId` for backend association * - **State Query**: Check if the image box has been modified * * All setters update the internal state and UI instantly. */ export declare interface HImageboxMethods extends ComponentMethods { /** * Returns the type of this component instance. * Always returns `'imagebox'` for ``. */ getType(): 'imagebox'; /** * Gets the current edit mode of the image box. * * - `'editable'`: Full editing (add/delete) enabled * - `'readonly'`: View only, image file actions hidden * - `'disable'`: Completely disabled, grayed out */ getEditMode(): EditModeValue; /** * Sets the edit mode of the image box. * * - `'editable'`: Allows adding/removing image file * - `'readonly'`: Disables all image file operations but keeps UI visible * - `'disable'`: Fully disables the UI (input, buttons) * * @param mode - The new edit mode */ setEditMode(mode: EditMode | EditModeValue): void; /** * Returns the current (visible, not deleted) image file. * * file is an object conforming to `AttachedFileItem`. * Files marked `isDeleted: true` are excluded. * * @returns The current list of image file. */ getValue(): AttachedFileItem | null; /** * Sets the internal image file to the provided value. * * - The list will be displayed immediately and emitted via `update:modelValue`. * - Use this to reset, replace, or synchronize the image file with backend data. * * @param attachedFileItem - The new image file. */ setValue(attachedFileItem: AttachedFileItem): void; /** * Converts the current editor content into a `DataModel` instance. * * - Returns a new `DataModel` where each property of `AttachedFileItem` * becomes a column, and a single row represents the editor state. * * @returns A `DataModel` containing the editor's current data. */ getDataModel(): InterfaceDataModel | null; /** * Populates the editor using a `DataModel` instance. * * - Extracts values from the first row of the `DataModel`, if available. * - Uses the values from columns like `html`, `plainText`, `links`, etc. to restore editor content. * * @param dataModel A `DataModel` whose first row maps to `AttachedFileItem` structure. */ setDataModel(dataModel: InterfaceDataModel): void; /** * Loads editor content from either a `AttachedFileItem` object or a compatible `DataModel`. * * - Accepts plain `AttachedFileItem`, raw object, or `DataModel`. * - Automatically determines how to process the input and restores the editor accordingly. * * @param data Editor content to load, in `AttachedFileItem` or `DataModel` form. */ load>(data: AttachedFileItem | Record | InterfaceDataModel): void; /** * Returns the current `attId` (attachment group ID). * * Used to group image file logically, often for backend APIs. */ getAttId(): string; /** * Sets the `attId` (attachment group ID). * * - Use to associate this image box with a different group in your backend. * - Has no effect on UI, but is included in emitted file info. * * @param attId - The new attachment group ID. */ setAttId(attId: string): void; /** * Gets the text content currently shown on the add/upload button. * * - Corresponds to `addButtonText` prop. */ getAddButtonText(): string; /** * Sets the text shown on the add/upload button. * * - Supports multiline via `\n` (rendered as `
`). * - If an `add-button` slot is used, this will have no effect. * * @param addButtonText - New button text */ setAddButtonText(addButtonText: string): void; /** * Gets the text content currently shown on the remove/delete button. * * - Corresponds to `removeButtonText` prop. */ getRemoveButtonText(): string; /** * Sets the text shown on the remove/delete button. * * - Supports multiline via `\n` (rendered as `
`). * - If a `remove-button` slot is used, this will have no effect. * * @param removeButtonText - New button text */ setRemoveButtonText(removeButtonText: string): void; /** * Returns the current modify/edit button text. * @returns Current text for the modify button shown when an image exists. */ getModifyButtonText(): string; /** * Sets the modify/edit button text. * @param val - New text for the modify button shown when an image exists. */ setModifyButtonText(val: string): void; /** * Gets the current placeholder text (empty state message). * * - Shown when there is no image in the image box. * - Corresponds to the `placeholder` prop. */ getPlaceholder(): string; /** * Sets the placeholder text (empty state message). * * - Updates UI immediately. * * @param placeholder - New placeholder text */ setPlaceholder(placeholder: string): void; /** * Returns whether drag-and-drop uploading is currently enabled. * * - Controlled by the `enableDrop` prop. */ isEnableDrop(): boolean; /** * Enables or disables drag-and-drop image file uploading. * * @param enableDrop - `true` to allow drag-and-drop, `false` to block it. */ setEnableDrop(enableDrop: boolean): void; /** * Gets the current list of allowed image file types/extensions. * * - Controlled by the `allowedTypes` prop. * - MIME types or extensions (e.g. `.pdf`, `image/png`). */ getAllowedTypes(): string[]; /** * Sets the allowed file types/extensions. * * - Accepts an array of MIME types or file extensions. * - Updates the file input's accept filter and internal validation. * * @param allowedTypes - Array of allowed types/extensions. */ setAllowedTypes(allowedTypes: string[]): void; /** * Gets the current list of disallowed file types/extensions. * * - Controlled by the `disallowedTypes` prop. * - MIME types or extensions (e.g. `.exe`, `application/x-msdownload`). */ getDisallowedTypes(): string[]; /** * Sets the disallowed file types/extensions. * * - Accepts an array of MIME types or file extensions. * - Any file matching these types/extensions will be rejected. * * @param disallowedTypes - Array of disallowed types/extensions. */ setDisallowedTypes(disallowedTypes: string[]): void; /** * Gets the current maximum allowed file size (per file, bytes). * * - Controlled by the `maxFileSize` prop. */ getMaxFileSize(): number; /** * Sets the maximum allowed file size (per file, bytes). * * - Files exceeding this size are rejected on upload. * * @param maxFileSize - Maximum size in bytes */ setMaxFileSize(maxFileSize: number): void; /** * Returns whether the current element displays a border. */ isBorder(): boolean; /** * ESets whether the current element displays a border. * * @param border - `true` to display border, `false` to none display border */ setBorder(border: boolean): void; /** * Sets a custom callback when a file has a disallowed type/extension. * * - Called during file selection/drag if a file fails allowed/disallowed check. * - Use for custom alerts, validation UI, logging, etc. * * @param onDisallowedType - Callback with the file, allowedTypes, disallowedTypes. */ setOnDisallowedType(onDisallowedType: (currentCheckFile: File, allowedTypes: string[] | null, disallowedTypes: string[] | null) => void): void; /** * Sets a custom callback when a file exceeds the maximum file size. * * - Use to alert the user or log the event. * * @param onMaxFileSizeExceeded - Callback with file, file size, and limit. */ setOnMaxFileSizeExceeded(onMaxFileSizeExceeded: (currentCheckFile: File, currentFileSize: number, maxFileSizeAllowed: number) => void): void; /** * Returns whether the file list has been modified since the last set/reset. * * - Adding or removing files, or changing file info, sets this to true. */ isModified(): boolean; /** * Sets the "modified" state of the image box. * * - Use to manually reset the modified flag (e.g., after save). * * @param modified - `true` to mark as modified, `false` to reset. */ setModified(modified: boolean): void; /** * Gets the current `tabIndex` applied to element. * - `null`: no `tabindex` attribute (items not focusable). * - `0` or positive number: items can be focused via keyboard navigation. */ getTabIndex(): number | null; /** * Sets `tabIndex` for element. * @param v - `null` to remove, or number to make focusable. */ setTabIndex(v: number | null): void; /** * Focuses the add image file button. * * - Useful for accessibility or guiding user attention programmatically. */ focus(): void; } export declare const HInput: DefineComponent; default: null; }; class: { type: PropType>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; title: { type: StringConstructor; required: boolean; }; inputType: { type: PropType; required: boolean; validator: (v: any) => boolean; }; format: { type: StringConstructor; required: boolean; }; nullText: { type: StringConstructor; default: string; }; maxNumber: { type: PropType; required: boolean; }; minNumber: { type: PropType; required: boolean; }; roundNumber: { type: PropType; required: boolean; }; maxLength: { type: PropType; required: boolean; }; maxByte: { type: PropType; required: boolean; }; placeholder: { type: StringConstructor; required: boolean; }; placeholderColor: { type: PropType; default: string; }; editMode: { type: PropType; default: EditMode; validator: (v: any) => boolean; }; required: { type: BooleanConstructor; default: boolean; }; fontBold: { type: BooleanConstructor; default: boolean; }; fontItalic: { type: BooleanConstructor; default: boolean; }; fontThruline: { type: BooleanConstructor; default: boolean; }; fontUnderline: { type: BooleanConstructor; default: boolean; }; textAlign: { type: PropType; default: null; validator: (v: any) => boolean; }; border: { type: BooleanConstructor; default: boolean; }; options: { type: PropType< { text: string; value: any; }[]>; required: boolean; default: () => never[]; }; checkedText: { type: StringConstructor; default: string; }; uncheckedText: { type: StringConstructor; default: string; }; inputTextdHandler: { type: PropType<(value: any) => string>; default: undefined; }; toggleStyle: { type: PropType<"default" | "switch">; default: string; validator: (v: any) => boolean; }; disableAutoCapitalize: { type: BooleanConstructor; default: boolean; }; tabIndex: { type: PropType; default: null; validator: (v: any) => boolean; }; }>, { inputRef: Ref; inputTextRef: Ref; inputMethods: ComputedRef "input"; getName: () => string; setName: (name: string) => void; getDataKey: () => string; setDataKey: (dataKey: string) => void; getText: () => string; getValue: () => any; setValue: (val: any, opt?: { emitModelValue?: boolean; emitChange?: boolean; notifyGroup?: boolean; markModified?: boolean; }) => void; getInputType: () => InputTypeValue; setInputType: (type: InputType | InputTypeValue) => void; getFormat: () => string; setFormat: (format: string) => void; getTitle: () => string; setTitle: (title: string) => void; getNullText: () => string; setNullText: (nullText: string) => void; getEditMode: () => EditModeValue; setEditMode: (mode: EditMode | EditModeValue) => void; getMaxNumber: () => number | null; setMaxNumber: (maxNumber: number) => void; getMinNumber: () => number | null; setMinNumber: (minNumber: number) => void; getRoundNumber: () => number | null; setRoundNumber: (roundNumber: number) => void; getMaxLength: () => number | null; setMaxLength: (maxLength: number) => void; getMaxByte: () => number | null; setMaxByte: (maxByte: number) => void; getRequired: () => boolean; setRequired: (required: boolean) => void; getPlaceholder: () => string; setPlaceholder: (placeholder: string) => void; getPlaceholderColor: () => string; setPlaceholderColor: (color: string) => void; isFontBold: () => boolean; setFontBold: (bold: boolean) => void; isFontItalic: () => boolean; setFontItalic: (italic: boolean) => void; isFontThruline: () => boolean; setFontThruline: (thruline: boolean) => void; isFontUnderline: () => boolean; setFontUnderline: (underline: boolean) => void; getTextAlign: () => TextAlignValue; setTextAlign: (textAlign: TextAlign | TextAlignValue) => void; isBorder: () => boolean; setBorder: (border: boolean) => void; isModified: () => boolean; setModified: (modified: boolean) => void; getToggleStyle: () => "default" | "switch"; setToggleStyle: (style: "default" | "switch") => void; getDisableAutoCapitalize: () => boolean; setDisableAutoCapitalize: (v: boolean) => void; getTabIndex: () => number | null; setTabIndex: (v: number | null) => void; focus: () => void; isHisonvueComponent: true; getId: () => string; isVisible: () => boolean; setVisible: (visible: boolean) => void; reload: () => void; } | null>; inputValue: ComputedRef; editing: Ref; props: LooseRequired; default: null; }; class: { type: PropType>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; title: { type: StringConstructor; required: boolean; }; inputType: { type: PropType; required: boolean; validator: (v: any) => boolean; }; format: { type: StringConstructor; required: boolean; }; nullText: { type: StringConstructor; default: string; }; maxNumber: { type: PropType; required: boolean; }; minNumber: { type: PropType; required: boolean; }; roundNumber: { type: PropType; required: boolean; }; maxLength: { type: PropType; required: boolean; }; maxByte: { type: PropType; required: boolean; }; placeholder: { type: StringConstructor; required: boolean; }; placeholderColor: { type: PropType; default: string; }; editMode: { type: PropType; default: EditMode; validator: (v: any) => boolean; }; required: { type: BooleanConstructor; default: boolean; }; fontBold: { type: BooleanConstructor; default: boolean; }; fontItalic: { type: BooleanConstructor; default: boolean; }; fontThruline: { type: BooleanConstructor; default: boolean; }; fontUnderline: { type: BooleanConstructor; default: boolean; }; textAlign: { type: PropType; default: null; validator: (v: any) => boolean; }; border: { type: BooleanConstructor; default: boolean; }; options: { type: PropType< { text: string; value: any; }[]>; required: boolean; default: () => never[]; }; checkedText: { type: StringConstructor; default: string; }; uncheckedText: { type: StringConstructor; default: string; }; inputTextdHandler: { type: PropType<(value: any) => string>; default: undefined; }; toggleStyle: { type: PropType<"default" | "switch">; default: string; validator: (v: any) => boolean; }; disableAutoCapitalize: { type: BooleanConstructor; default: boolean; }; tabIndex: { type: PropType; default: null; validator: (v: any) => boolean; }; }>> & Readonly<{ onClick?: ((...args: any[]) => any) | undefined; onInput?: ((...args: any[]) => any) | undefined; onBlur?: ((...args: any[]) => any) | undefined; onChange?: ((...args: any[]) => any) | undefined; onCompositionend?: ((...args: any[]) => any) | undefined; onCompositionstart?: ((...args: any[]) => any) | undefined; onCompositionupdate?: ((...args: any[]) => any) | undefined; onContextmenu?: ((...args: any[]) => any) | undefined; onCopy?: ((...args: any[]) => any) | undefined; onCut?: ((...args: any[]) => any) | undefined; onDblclick?: ((...args: any[]) => any) | undefined; onDrag?: ((...args: any[]) => any) | undefined; onDragend?: ((...args: any[]) => any) | undefined; onDragstart?: ((...args: any[]) => any) | undefined; onDrop?: ((...args: any[]) => any) | undefined; onFocus?: ((...args: any[]) => any) | undefined; onKeydown?: ((...args: any[]) => any) | undefined; onKeyup?: ((...args: any[]) => any) | undefined; onMousedown?: ((...args: any[]) => any) | undefined; onMouseenter?: ((...args: any[]) => any) | undefined; onMouseleave?: ((...args: any[]) => any) | undefined; onMousemove?: ((...args: any[]) => any) | undefined; onMouseout?: ((...args: any[]) => any) | undefined; onMouseover?: ((...args: any[]) => any) | undefined; onMouseup?: ((...args: any[]) => any) | undefined; onPaste?: ((...args: any[]) => any) | undefined; onPointerdown?: ((...args: any[]) => any) | undefined; onPointerenter?: ((...args: any[]) => any) | undefined; onPointerleave?: ((...args: any[]) => any) | undefined; onPointermove?: ((...args: any[]) => any) | undefined; onPointerup?: ((...args: any[]) => any) | undefined; onTouchcancel?: ((...args: any[]) => any) | undefined; onTouchend?: ((...args: any[]) => any) | undefined; onTouchmove?: ((...args: any[]) => any) | undefined; onTouchstart?: ((...args: any[]) => any) | undefined; onWheel?: ((...args: any[]) => any) | undefined; onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined; }> & {}>; id: string; nameAttr: ComputedRef; responsiveClassList: Ref; visibleClass: ComputedRef<"" | "hison-display-none">; editModeClassList: ComputedRef; requiredClassList: ComputedRef; fontBoldClass: ComputedRef<"hison-font-bold" | undefined>; fontItalicClass: ComputedRef<"hison-font-italic" | undefined>; fontThrulineClass: ComputedRef<"hison-font-thruline" | undefined>; fontUnderlineClass: ComputedRef<"hison-font-underline" | undefined>; textAlignStyle: ComputedRef< { textAlign: "left" | "center" | "right"; }>; placeholderColorStyle: ComputedRef; borderClass: ComputedRef<"" | "hison-border">; disable: ComputedRef; readonly: ComputedRef; inputType: Ref<"number" | "text" | "mask" | "digit" | "date" | "month" | "time" | "email" | "password" | "checkbox" | "range" | "color" | "textarea" | "select" | "radio" | InputType, "number" | "text" | "mask" | "digit" | "date" | "month" | "time" | "email" | "password" | "checkbox" | "range" | "color" | "textarea" | "select" | "radio" | InputType>; inputExpressionType: ComputedRef<"text" | "checkbox" | "range" | "color" | "select" | "radio">; inputAttrType: ComputedRef<"number" | "text" | "mask" | "digit" | "date" | "month" | "time" | "email" | "password" | "checkbox" | "range" | "color" | "textarea" | "select" | "radio" | InputType.text | InputType.number | InputType.date | InputType.month | InputType.time | InputType.email | InputType.password | InputType.checkbox | InputType.range | InputType.color | InputType.textarea | InputType.select | InputType.radio>; title: Ref; placeholder: Ref; maxNumber: Ref; minNumber: Ref; spanText: Ref; toggleStyle: Ref<"default" | "switch", "default" | "switch">; tabIndex: Ref; disableAutoCapitalize: Ref; onInput: (e: Event) => void; onTextInputFocus: (e: Event) => void; onFocus: (e: FocusEvent) => void; onBlur: (e: Event) => void; onRangeChange: (e: Event) => void; onColorChange: (e: Event) => void; onCheckboxChange: (e: Event) => void; onRadioChange: (e: Event) => void; onSelectChange: (e: Event) => void; onKeydown: (e: KeyboardEvent) => void; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("click" | "input" | "mounted" | "blur" | "change" | "compositionend" | "compositionstart" | "compositionupdate" | "contextmenu" | "copy" | "cut" | "dblclick" | "drag" | "dragend" | "dragstart" | "drop" | "focus" | "keydown" | "keyup" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "paste" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerup" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "wheel" | "responsive-change" | "update:modelValue")[], "click" | "input" | "mounted" | "blur" | "change" | "compositionend" | "compositionstart" | "compositionupdate" | "contextmenu" | "copy" | "cut" | "dblclick" | "drag" | "dragend" | "dragstart" | "drop" | "focus" | "keydown" | "keyup" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "paste" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerup" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "wheel" | "responsive-change" | "update:modelValue", PublicProps, Readonly; default: null; }; class: { type: PropType>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; title: { type: StringConstructor; required: boolean; }; inputType: { type: PropType; required: boolean; validator: (v: any) => boolean; }; format: { type: StringConstructor; required: boolean; }; nullText: { type: StringConstructor; default: string; }; maxNumber: { type: PropType; required: boolean; }; minNumber: { type: PropType; required: boolean; }; roundNumber: { type: PropType; required: boolean; }; maxLength: { type: PropType; required: boolean; }; maxByte: { type: PropType; required: boolean; }; placeholder: { type: StringConstructor; required: boolean; }; placeholderColor: { type: PropType; default: string; }; editMode: { type: PropType; default: EditMode; validator: (v: any) => boolean; }; required: { type: BooleanConstructor; default: boolean; }; fontBold: { type: BooleanConstructor; default: boolean; }; fontItalic: { type: BooleanConstructor; default: boolean; }; fontThruline: { type: BooleanConstructor; default: boolean; }; fontUnderline: { type: BooleanConstructor; default: boolean; }; textAlign: { type: PropType; default: null; validator: (v: any) => boolean; }; border: { type: BooleanConstructor; default: boolean; }; options: { type: PropType< { text: string; value: any; }[]>; required: boolean; default: () => never[]; }; checkedText: { type: StringConstructor; default: string; }; uncheckedText: { type: StringConstructor; default: string; }; inputTextdHandler: { type: PropType<(value: any) => string>; default: undefined; }; toggleStyle: { type: PropType<"default" | "switch">; default: string; validator: (v: any) => boolean; }; disableAutoCapitalize: { type: BooleanConstructor; default: boolean; }; tabIndex: { type: PropType; default: null; validator: (v: any) => boolean; }; }>> & Readonly<{ onClick?: ((...args: any[]) => any) | undefined; onInput?: ((...args: any[]) => any) | undefined; onBlur?: ((...args: any[]) => any) | undefined; onChange?: ((...args: any[]) => any) | undefined; onCompositionend?: ((...args: any[]) => any) | undefined; onCompositionstart?: ((...args: any[]) => any) | undefined; onCompositionupdate?: ((...args: any[]) => any) | undefined; onContextmenu?: ((...args: any[]) => any) | undefined; onCopy?: ((...args: any[]) => any) | undefined; onCut?: ((...args: any[]) => any) | undefined; onDblclick?: ((...args: any[]) => any) | undefined; onDrag?: ((...args: any[]) => any) | undefined; onDragend?: ((...args: any[]) => any) | undefined; onDragstart?: ((...args: any[]) => any) | undefined; onDrop?: ((...args: any[]) => any) | undefined; onFocus?: ((...args: any[]) => any) | undefined; onKeydown?: ((...args: any[]) => any) | undefined; onKeyup?: ((...args: any[]) => any) | undefined; onMousedown?: ((...args: any[]) => any) | undefined; onMouseenter?: ((...args: any[]) => any) | undefined; onMouseleave?: ((...args: any[]) => any) | undefined; onMousemove?: ((...args: any[]) => any) | undefined; onMouseout?: ((...args: any[]) => any) | undefined; onMouseover?: ((...args: any[]) => any) | undefined; onMouseup?: ((...args: any[]) => any) | undefined; onPaste?: ((...args: any[]) => any) | undefined; onPointerdown?: ((...args: any[]) => any) | undefined; onPointerenter?: ((...args: any[]) => any) | undefined; onPointerleave?: ((...args: any[]) => any) | undefined; onPointermove?: ((...args: any[]) => any) | undefined; onPointerup?: ((...args: any[]) => any) | undefined; onTouchcancel?: ((...args: any[]) => any) | undefined; onTouchend?: ((...args: any[]) => any) | undefined; onTouchmove?: ((...args: any[]) => any) | undefined; onTouchstart?: ((...args: any[]) => any) | undefined; onWheel?: ((...args: any[]) => any) | undefined; onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined; }>, { border: boolean; textAlign: "left" | "center" | "right" | TextAlign; required: boolean; fontBold: boolean; fontItalic: boolean; fontThruline: boolean; fontUnderline: boolean; visible: boolean; tabIndex: string | number | null; modelValue: any; options: { text: string; value: any; }[]; toggleStyle: "default" | "switch"; editMode: "editable" | "disable" | "readonly" | EditMode; nullText: string; placeholderColor: string; checkedText: string; uncheckedText: string; inputTextdHandler: (value: any) => string; disableAutoCapitalize: boolean; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; export declare const HInputClientOnly: Component; export declare const HInputGroup: DefineComponent; required: boolean; validator: (v: any) => boolean; }; status: { type: PropType; required: boolean; default: DataStatus; validator: (v: any) => boolean; }; modelValue: { type: PropType>; default: () => {}; }; }>, { inputGroupRef: Ref; props: LooseRequired; required: boolean; validator: (v: any) => boolean; }; status: { type: PropType; required: boolean; default: DataStatus; validator: (v: any) => boolean; }; modelValue: { type: PropType>; default: () => {}; }; }>> & Readonly<{ onMounted?: ((...args: any[]) => any) | undefined; "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined; }> & {}>; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("mounted" | "update:modelValue")[], "mounted" | "update:modelValue", PublicProps, Readonly; required: boolean; validator: (v: any) => boolean; }; status: { type: PropType; required: boolean; default: DataStatus; validator: (v: any) => boolean; }; modelValue: { type: PropType>; default: () => {}; }; }>> & Readonly<{ onMounted?: ((...args: any[]) => any) | undefined; "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined; }>, { status: "C" | "R" | "U" | "D" | DataStatus; modelValue: Record; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; export declare const HInputGroupClientOnly: Component; /** * Runtime control methods for `HInputGroup` component. * * This interface defines the available methods on `HInputGroup`, * accessible via `hison.component.getInputGroup(id)`, to programmatically control * input group behaviors, state tracking, and data retrieval. * * --- * * ### 🔧 Example Usage * ```ts * const group = hison.component.getInputGroup('inputGroup1'); * group.load({ userid: 'hison', email: 'a@b.com' }); * group.setStatus('U'); * if (group.isModified()) { * const updated = group.getDataWrapper(); * saveToServer(updated); * } * ``` * * --- * * ### ⚠️ Notes * - `HInputGroup` tracks internal status (`R`, `C`, `U`, `D`) to reflect data lifecycle. * - Modification is automatically tracked when any child input emits a user-driven change. * - Supports runtime edit mode toggle and required-field validation. */ export declare interface HInputGroupMethods extends Omit { /** * Returns the type identifier for the component. * Always returns `'inputGroup'`. */ getType(): 'inputGroup'; /** * Clears all values inside the group’s child inputs. * * @param autoSetStatus If `true`, resets status to `'C'` (created) and clears modification state. */ clear(autoSetStatus?: boolean): void; /** * Retrieves the current input values as a `DataModel` instance. * * @returns A `DataModel` object representing the group data as a table (1 row). */ getDataModel>(): InterfaceDataModel; /** * Applies a `DataModel` instance to the input group. * * This will populate each child input using the first row of the provided `DataModel`. * Keys in the row must match input `id`s within the group. * * --- * * ### ⚠️ Notes * - Only the **first row** of the `DataModel` is used. * - If a key is not registered as an input `id`, its value is ignored. * - Automatically sets `status` to `'R'` unless suppressed using `load(..., false)` * * @template T - The shape of the row object in the `DataModel`. * @param dataModel A `DataModel` instance containing one or more rows. */ setDataModel>(dataModel: InterfaceDataModel): void; /** * Retrieves the current input values as a plain JavaScript object. * * @returns An object with keys matching input IDs and values as their current values. */ getDataObject(): Record; /** * Populates the input group with values from a plain JavaScript object. * * This is equivalent to assigning values directly to each input. * Keys in the object must match input `id`s in the group. * * --- * * ### ✅ Example * ```ts * inputGroup.setDataObject({ * userId: 'hison', * email: 'a@b.com', * age: 30, * }); * ``` * * @param dataObject An object with keys matching input IDs and values to apply. */ setDataObject(dataObject: Record): void; /** * Loads data into the group’s inputs. * * Supports `Record`, `DataModel`, or `DataWrapper` as source. * * @param data The data source to apply to the group inputs. */ load>(data: Record | InterfaceDataModel): void; /** * Returns the current status of the input group. * * - `R`: Read * - `C`: Created * - `U`: Updated * - `D`: Deleted */ getStatus(): DataStatusValue; /** * Sets the status of the input group. * * Used to manually change the internal data lifecycle state. * * @param status A valid `DataStatus` value (`R`, `C`, `U`, `D`). */ setStatus(status: DataStatus | DataStatusValue): void; /** * Returns whether any input inside the group has been modified by user interaction. * * @returns `true` if at least one input is marked as modified. */ isModified(): boolean; /** * Resets the modification status of all inputs in the group. * * Typically called after saving or loading new data. */ initModified(): void; /** * Validates required fields in the group. * * Checks all child `HInput` and `HNote` components with `required=true`. * * @returns The first invalid component’s method instance, or `null` if all pass. */ checkRequired(): HInputMethods | null; /** * Gets the current edit mode of the group. * * Possible values: * - `'editable'`: Inputs are editable * - `'readonly'`: Inputs are readonly (visually different) * - `'disable'`: Inputs are disabled (fully blocked) */ getEditMode(): EditModeValue; /** * Sets the edit mode for all inputs in the group. * * @param mode One of: `'editable'`, `'readonly'`, `'disable'` */ setEditMode(mode: EditMode | EditModeValue): void; /** * Focus on the first input that is editable, or a specific input if `inputId` is provided. * * - If `inputId` is specified, it directly focuses on the corresponding input component within the group (if found). * - If `inputId` is omitted, the method will iterate over all registered input IDs in alphabetical order * and focus on the first one whose edit mode is `'editable'`. * - The sorting ensures consistent focus behavior regardless of DOM render timing or Vue's mount order. * * @param inputId - Optional ID of the specific input to focus. If omitted, the first editable input is focused. */ focus(inputId?: string): void; } /** * Runtime control methods for `HInput` component. * * This interface defines methods accessible via `hison.component.getInput(id)`. * It enables full runtime control over the input’s value, style, state, and formatting. * * --- * * ### 🔧 Example Usage * ```ts * const input = hison.component.getInput('input01'); * input.setValue('123456'); * input.setVisible(true); * input.setFormat('###-###'); * input.setEditMode('readonly'); * input.setFontUnderline(true); * ``` * * --- * * ### ⚠️ Notes * - All changes are reactive and immediately reflected in the DOM. * - Formatting is internally handled via `hison.utils` functions. * - Input can operate in `editable`, `readonly`, or `disable` mode. */ export declare interface HInputMethods extends ComponentMethods { /** * Returns the type of the input. */ getType(): 'input'; /** * Gets the current HTML `name` of this input. * - For radio inputs, this is the **group key** used by `HInputGroup` to aggregate * selection as `{ [name]: selectedRadioId | null }`. * - For non-radio inputs, it’s just the underlying HTML attribute. */ getName(): string; /** * Sets the HTML `name` of this input. * - Safe to call at runtime. * - **Radio inputs:** re-registers group membership with `HInputGroup` * (moves this radio from the old group to the new one). The current `checked` * state is preserved and the group’s `{ [name]: id | null }` mapping updates. * - **Non-radio inputs:** only updates the HTML attribute; no grouping behavior. * - Does **not** toggle the radio’s checked state by itself. */ setName(name: string): void; /** * Gets the data extraction key for `HInputGroup`. * - Used as the key when `HInputGroup` extracts data. * - If empty, `HInput` falls back to `id`. */ getDataKey(): string; /** * Sets the data extraction key for `HInputGroup`. * - If empty, it falls back to `id`. * - This does not change the runtime identifier (`id`). */ setDataKey(dataKey: string): void; /** * Returns the formatted display text shown in the span layer. * - Applies `format`, `nullText`, and masking logic based on `type`. */ getText(): string; /** * Gets the current raw input value (after internal processing). * - For example, digit-only inputs are stripped via `getDigitsOnly`. */ getValue(): any; /** * Sets the current input value. * - Automatically re-applies formatting and validation. * * @param opt - Optional flags (default: all `true`) * - `emitModelValue`: emit `update:modelValue` * - `emitChange`: emit `change(oldValue, newValue, methods)` * - `notifyGroup`: sync with `HInputGroup` (radio: `{ [name]: selectedKey | null }`) * - `markModified`: set `isModified = true` */ setValue: (val: any, opt?: { emitModelValue?: boolean; emitChange?: boolean; notifyGroup?: boolean; markModified?: boolean; }) => void; /** * Gets the current input type. * - Matches the `InputType` enum (e.g., `'text'`, `'date'`, `'number'`, etc.) */ getInputType(): InputTypeValue; /** * Sets the input type. * - Automatically adjusts formatting/rendering logic. */ setInputType(type: InputType | InputTypeValue): void; /** * Gets the format string used to format the value. * - Affects `'number'`, `'mask'`, `'date'`, `'month'` types. */ getFormat(): string; /** * Sets the input format. * - Uses `hison.utils.getDateWithFormat`, `getNumberFormat`, etc. */ setFormat(format: string): void; /** * Gets the tooltip (title attribute) of the input. */ getTitle(): string; /** * Sets the tooltip (title attribute) of the input. * - Appears on hover. */ setTitle(title: string): void; /** * Gets the current `nullText` string used when value is empty. */ getNullText(): string; /** * Sets the `nullText` to display when the value is empty or null. */ setNullText(nullText: string): void; /** * Gets the current edit mode. * - Possible values: `'editable'`, `'readonly'`, `'disable'` */ getEditMode(): EditModeValue; /** * Sets the edit mode of the input. * - `'readonly'` and `'disable'` both prevent editing but differ in style. */ setEditMode(mode: EditMode | EditModeValue): void; /** * Gets the maximum allowed numeric value (if applicable). * - Only applies when `type === 'number'` */ getMaxNumber(): number | null; /** * Sets the maximum numeric value. * - Enforced on input and formatting. */ setMaxNumber(maxNumber: number): void; /** * Gets the minimum allowed numeric value. */ getMinNumber(): number | null; /** * Sets the minimum numeric value. * - Enforced during input. */ setMinNumber(minNumber: number): void; /** * Gets the rounding precision for numeric values. * - Applies only to `type === 'number'` */ getRoundNumber(): number | null; /** * Sets the rounding precision. * - Accepts positive/negative integers or `0`. */ setRoundNumber(roundNumber: number): void; /** * Gets the current maximum character length allowed. * - Input is truncated if exceeded. */ getMaxLength(): number | null; /** * Sets the maximum allowed character length. */ setMaxLength(maxLength: number): void; /** * Gets the maximum allowed byte size. * - Uses UTF-8 encoding logic via `hison.utils.getCutByteLength()`. */ getMaxByte(): number | null; /** * Sets the maximum allowed byte size. * - Truncates input based on encoded byte length. */ setMaxByte(maxByte: number): void; /** * Gets whether the input is currently required. * - If `true`, the input will show a visual required style. */ getRequired(): boolean; /** * Sets the required state of the input. */ setRequired(required: boolean): void; /** * Gets the current placeholder text. */ getPlaceholder(): string; /** * Sets the placeholder text. * - Maps to the native `placeholder` attribute. */ setPlaceholder(placeholder: string): void; /** * Gets the current placeholder text color. * - Returns semantic token (e.g. 'primary') or raw CSS color string. */ getPlaceholderColor(): string; /** * Sets the placeholder text color. * - Accepts semantic tokens: 'primary' | 'muted' | 'info' | 'success' | 'danger' | 'warning' * or any valid CSS color string (e.g. '#fff', '#ffffff', 'rgb(...)', 'rgba(...)'). */ setPlaceholderColor(color: string): void; /** * Returns whether bold font is applied to the span text. */ isFontBold(): boolean; /** * Applies or removes bold style from the span text. */ setFontBold(bold: boolean): void; /** * Returns whether italic font is applied to the span text. */ isFontItalic(): boolean; /** * Applies or removes italic style from the span text. */ setFontItalic(italic: boolean): void; /** * Returns whether strikethrough is applied to the span text. */ isFontThruline(): boolean; /** * Applies or removes strikethrough style from the span text. */ setFontThruline(thruline: boolean): void; /** * Returns whether underline is applied to the span text. */ isFontUnderline(): boolean; /** * Applies or removes underline style from the span text. */ setFontUnderline(underline: boolean): void; /** * Returns current text alignment ('left' | 'center' | 'right'). */ getTextAlign(): TextAlignValue; /** * Sets text alignment for the input. */ setTextAlign(textAlign: TextAlign | TextAlignValue): void; /** * Returns whether the label shows border (box-shadow). */ isBorder(): boolean; /** * Sets whether border (box-shadow) is shown. * @param border - `true` to show, `false` to hide. */ setBorder(border: boolean): void; /** * Returns whether the input value has been modified since initial load or last reset. * - Modification is only tracked via user interactions (`onInput`, `onBlur`, `onChange`). * - This is used by parent components like `HInputGroup` to determine group-level state. */ isModified(): boolean; /** * Sets the modified state of the input manually. * - Typically used by container components (e.g., `HInputGroup`) to reset modification tracking. * @param modified A boolean indicating whether the input should be marked as modified. */ setModified(modified: boolean): void; /** * Returns the current toggle style of the input (`checkbox` or `radio`). * @returns `'default'` for standard style, or `'switch'` for switch-type toggle. */ getToggleStyle(): 'default' | 'switch'; /** * Sets the toggle style for the input (`checkbox` or `radio`). * @param style - `'default'` for standard style, or `'switch'` for switch-type toggle. */ setToggleStyle(style: 'default' | 'switch'): void; /** * Returns whether automatic capitalization is disabled on mobile keyboards. * @returns `true` if disabled, otherwise `false`. */ getDisableAutoCapitalize(): boolean; /** * Enables or disables automatic capitalization on mobile keyboards. * @param v - `true` to disable auto capitalization, otherwise `false`. */ setDisableAutoCapitalize(v: boolean): void; /** * Gets the current `tabIndex` applied to element. * - `null`: no `tabindex` attribute (items not focusable). * - `0` or positive number: items can be focused via keyboard navigation. */ getTabIndex(): number | null; /** * Sets `tabIndex` for element. * @param v - `null` to remove, or number to make focusable. */ setTabIndex(v: number | null): void; /** * Focus on the input. */ focus(): void; } /** * Global runtime facade for the `hisonvue` ecosystem. * * The `Hison` object in `hisonvue` acts as the **frontend counterpart** to the core `Hison` from `hisonjs`. * While `hisonjs` focuses on configuration, data handling, and communication logic, * `hisonvue` extends this foundation into the **UI runtime layer**—managing * event hooks, component lifecycles, and theme styling in real time. * * --- * ### Relation to `hisonjs` * This object extends {@link Hisonjs}, inheriting: * - **Configuration and Utility Layers**: Formatting, type conversion, validation, and constants. * - **Security Controls (`hison.shield`)**: Access, freezing, and developer tool restrictions. * - **Data Models (`hison.data`)**: `DataWrapper`, `DataModel`, and related data transformation tools. * - **API Communication (`hison.link`)**: Promise-based REST and WebSocket interfaces. * * On top of these, `hisonvue` introduces **UI-centric runtime systems**: * * - **Global Event Hooks (`cssEvent`)** * Intercept and modify component interactions (click, focus, blur, mouse/touch events) * across the entire app, before or after they occur. * * - **Component Registry (`component`)** * Provides runtime access to all mounted hisonvue components via `id`. * Developers can programmatically control or query components even outside Vue scopes, * enabling reactive orchestration between views and data. * * - **Dynamic Theming & Size Control (`style`)** * Manages global CSS variable states for colors, text, and layout sizes. * Changing these values automatically updates all mounted components without reloading the page. * * --- * ### Internal Architecture * The entire hisonvue runtime is built around a **shared internal state container** known as `hison`. * This closure encapsulates mutable runtime data and exposes only safe API methods through this public interface. * * - **Public Setters/Getters** → update the internal `hison` fields. * - **CSS Variable Management** → uses `applyCssVariables()` to re-apply computed styles to the document root. * - **Component Reload** → triggers `reloadAllHisonComponents()` to refresh visual themes non-destructively. * - **SSR-Safe Operation** → browser-only side effects are guarded by runtime environment checks. * * This separation ensures: * - Consistent theme and event propagation across all components. * - Isolation of mutable UI state from the immutable base hisonjs core. * - Full TypeScript typing and IntelliSense coverage for both logic and UI. * * --- * ### Runtime Flow Example * ```typescript * // Customize global button behavior * hison.cssEvent.setButtonOnBefoerClick((e) => { * console.log("Before click:", e.target); * return true; // returning false cancels the event * }); * * // Dynamically recolor the theme * hison.style.setPrimaryColor("#4E79FF"); * hison.style.setInvertColor(true); * * // Access and control a mounted component by id * const modal = hison.component.getModal("userInfoModal"); * modal?.open(); * ``` * * --- * ### Design Philosophy * - **Unified Runtime Bridge** — Integrates logic (hisonjs) and UI (hisonvue) through a single global object. * - **Declarative yet Controllable** — All Vue components are reactive but remain controllable imperatively. * - **Theme Reactivity** — Any visual property (color, size, typography) can be updated at runtime. * - **Extensible Hooks** — Developers can globally override or extend behavior without touching component internals. * - **SSR Compatibility** — Designed to be safe for use with Nuxt 3 or Vue SSR environments. * * --- * ### Usage Scenarios * - Injecting custom UX logic globally (e.g., analytics before button clicks). * - Building dynamic dashboards that manipulate component layouts in runtime. * - Re-theming enterprise applications without recompilation. * - Providing consistent interaction feedback across all hisonvue elements. * * --- * ### Notes * - **SSR-Safe**: CSS variable application runs only in client environments (`typeof window !== 'undefined'`). * - **Component Safety**: Each `getXxx(id)` returns `null` if no component is registered under that id—no runtime throw. * - **Naming Consistency**: Certain method names contain legacy typos (e.g., `Befoer` instead of `Before`); * they are preserved for backward compatibility but may be formally deprecated in a future release. * * --- * ### Summary * The `Hison` object in `hisonvue` represents the **bridge between data-driven logic and UI runtime control**. * It inherits all configuration, data, and communication capabilities from `hisonjs`, * while providing unified control over visual, behavioral, and interactive elements in Vue-based applications. * * By consolidating configuration, runtime state, and UI event orchestration into a single * globally accessible object, it ensures both **developer productivity** and **runtime consistency** * across large-scale, enterprise-grade applications built with the hisondev ecosystem. */ export declare interface Hison extends Hison_2 { /** * Sets the **maximum total upload size (bytes)** allowed across an entire HFileSet component. * This guards the *sum* of all selected files in a single widget. * * @param fileSize - Maximum total size in bytes. Use `Infinity` for no global limit. * @example * hison.setMaxFilesetTotalSize(20 * 1024 * 1024) // 20 MB across all files */ setMaxFilesetTotalSize(fileSize: number): void; /** * Sets the **maximum per-file upload size (bytes)** for HFileSet. * This guards the size of **each individual** file that a user selects. * * @param fileTotalSize - Maximum bytes allowed per file. Use `Infinity` to remove this cap. * @example * hison.setMaxFilesetSize(5 * 1024 * 1024) // 5 MB per file */ setMaxFilesetSize(fileTotalSize: number): void; /** * Returns the currently effective **maximum total upload size** (bytes) across the entire HFileSet. * @returns The configured limit in bytes (or `Infinity` if unlimited). */ getMaxFilesetTotalSize(): number; /** * Returns the currently effective **maximum per-file upload size** (bytes) for HFileSet. * @returns The configured limit in bytes (or `Infinity` if unlimited). */ getMaxFilesetSize(): number; /** * Global UI interaction hooks for hisonvue components. * * Each setter replaces the active handler for the given event “slot”. * - **Button** series targets `` UI events. * - **Input** series targets text-input-like components (e.g., ``, ``). * * @remarks * - “Before” handlers (`...OnBefore...`) may return `false` to cancel the action. * - “After” handlers (`...OnAfter...`) run after the component processes the event. * - Handlers are invoked by components that integrate with the hisonvue event system. * - Method names include a typo (`Befoer` → *Before*). Kept for compatibility. * - If you need **multiple** handlers per event, compose them manually in your setter or * consider introducing an internal add/remove pipeline in a future version. * * @example * // Cancel every HButton click unless a condition passes * hison.cssEvent.setButtonOnBefoerClick((e) => { * const allow = someGuard(); * if (!allow) e.preventDefault(); * return allow; * }); * * @example * // Add a visual cue after any HInput focus * hison.cssEvent.setInputOnAfterFocus(() => highlightInputs()); */ cssEvent: { /** Registers a global BEFORE-focus handler for HButton (return `false` to cancel). (typo: Befoer) */ setButtonOnBefoerFocus(func: (e: FocusEvent) => boolean): void; /** Registers a global AFTER-focus handler for HButton. */ setButtonOnAfterFocus(func: (e: FocusEvent) => void): void; /** Registers a global BEFORE-blur handler for HButton (return `false` to cancel). (typo: Befoer) */ setButtonOnBefoerBlur(func: (e: FocusEvent) => boolean): void; /** Registers a global AFTER-blur handler for HButton. */ setButtonOnAfterBlur(func: (e: FocusEvent) => void): void; /** Registers a global BEFORE-click handler for HButton (return `false` to cancel). (typo: Befoer) */ setButtonOnBefoerClick(func: (e: MouseEvent) => boolean): void; /** Registers a global AFTER-click handler for HButton. */ setButtonOnAfterClick(func: (e: MouseEvent) => void): void; /** Registers a global BEFORE-mouseover handler for HButton (return `false` to cancel). */ setButtonOnBeforeMouseover(func: (e: MouseEvent) => boolean): void; /** Registers a global AFTER-mouseover handler for HButton. */ setButtonOnAfterMouseover(func: (e: MouseEvent) => void): void; /** Registers a global BEFORE-mouseout handler for HButton (return `false` to cancel). */ setButtonOnBeforeMouseout(func: (e: MouseEvent) => boolean): void; /** Registers a global AFTER-mouseout handler for HButton. */ setButtonOnAfterMouseout(func: (e: MouseEvent) => void): void; /** Registers a global BEFORE-touchstart handler for HButton (return `false` to cancel). */ setButtonOnBeforeTouchstart(func: (e: TouchEvent) => boolean): void; /** Registers a global AFTER-touchstart handler for HButton. */ setButtonOnAfterTouchstart(func: (e: TouchEvent) => void): void; /** Registers a global BEFORE-touchend handler for HButton (return `false` to cancel). */ setButtonOnBeforeTouchend(func: (e: TouchEvent) => boolean): void; /** Registers a global AFTER-touchend handler for HButton. */ setButtonOnAfterTouchend(func: (e: TouchEvent) => void): void; /** Registers a global BEFORE-focus handler for Input-like components (return `false` to cancel). (typo: Befoer) */ setInputOnBefoerFocus(func: (e: FocusEvent) => boolean): void; /** Registers a global AFTER-focus handler for Input-like components. */ setInputOnAfterFocus(func: (e: FocusEvent) => void): void; /** Registers a global BEFORE-blur handler for Input-like components (return `false` to cancel). (typo: Befoer) */ setInputOnBefoerBlur(func: (e: FocusEvent) => boolean): void; /** Registers a global AFTER-blur handler for Input-like components. */ setInputOnAfterBlur(func: (e: FocusEvent) => void): void; /** Registers a global BEFORE-mouseover handler for Input-like components (return `false` to cancel). */ setInputOnBeforeMouseover(func: (e: MouseEvent) => boolean): void; /** Registers a global AFTER-mouseover handler for Input-like components. */ setInputOnAfterMouseover(func: (e: MouseEvent) => void): void; /** Registers a global BEFORE-mouseout handler for Input-like components (return `false` to cancel). */ setInputOnBeforeMouseout(func: (e: MouseEvent) => boolean): void; /** Registers a global AFTER-mouseout handler for Input-like components. */ setInputOnAfterMouseout(func: (e: MouseEvent) => void): void; /** Registers a global BEFORE-touchstart handler for Input-like components (return `false` to cancel). */ setInputOnBeforeTouchstart(func: (e: TouchEvent) => boolean): void; /** Registers a global AFTER-touchstart handler for Input-like components. */ setInputOnAfterTouchstart(func: (e: TouchEvent) => void): void; /** Registers a global BEFORE-touchend handler for Input-like components (return `false` to cancel). */ setInputOnBeforeTouchend(func: (e: TouchEvent) => boolean): void; /** Registers a global AFTER-touchend handler for Input-like components. */ setInputOnAfterTouchend(func: (e: TouchEvent) => void): void; }; /** * Runtime accessors for **mounted component instances** by their `id`. * * Components register/unregister themselves to an internal registry during mount/unmount. * Each getter returns the type-specific method interface for imperative control, * or `null` if no component is registered under that id. * * @remarks * - Use these accessors to orchestrate UI from outside component scopes (e.g., from services or stores). * - Prefer stable, unique `id` assignments to avoid collisions. * - If you need strict behavior, wrap calls with your own `requireXxx(id)` helper that throws on `null`. * * @example * const btn = hison.component.getButton('primarySubmit'); * btn?.setLoading(true); * btn?.setDisabled(true); */ component: { /** Returns the runtime methods for an HAccordion, or `null` if not found. */ getAccordion(accordionId: string): HAccordionMethods | null; /** Returns the runtime methods for an HBaggie, or `null` if not found. */ getBaggie(baggieId: string): HBaggieMethods | null; /** Returns the runtime methods for an HBanner, or `null` if not found. */ getBanner(bannerId: string): HBannerMethods | null; /** Returns the runtime methods for an HButton, or `null` if not found. */ getButton(buttonId: string): HButtonMethods | null; /** Returns the runtime methods for an HCalendar, or `null` if not found. */ getCalendar(calendarId: string): HCalendarMethods | null; /** Returns the runtime methods for an HCaption, or `null` if not found. */ getCaption(calendarId: string): HCaptionMethods | null; /** Returns the chart instance handle, or `null` if not found. */ getChart(chartId: string): HChartInstance | null; /** Returns the runtime methods for an HDrawer, or `null` if not found. */ getDrawer(drawerId: string): HDrawerMethods | null; /** Returns the runtime methods for an HDropdown, or `null` if not found. */ getDropdown(dropdownId: string): HDropdownMethods | null; /** Returns the runtime methods for an HFileSet, or `null` if not found. */ getFileset(filesetId: string): HFilesetMethods | null; /** Returns the runtime methods for an HGap, or `null` if not found. */ getGap(gapId: string): HGapMethods | null; /** Returns the runtime methods for an HGrid, or `null` if not found. */ getGrid(gridId: string): HGridMethods | null; /** Returns the runtime methods for an HImageBox, or `null` if not found. */ getImagebox(imageboxId: string): HImageboxMethods | null; /** Returns the runtime methods for an HInput, or `null` if not found. */ getInput(inputId: string): HInputMethods | null; /** Returns the runtime methods for an HInputGroup, or `null` if not found. */ getInputGroup(inputGroupId: string): HInputGroupMethods | null; /** Returns the runtime methods for an HLabel, or `null` if not found. */ getLabel(labelId: string): HLabelMethods | null; /** Returns the runtime methods for an HLayout, or `null` if not found. */ getLayout(layoutId: string): HLayoutMethods | null; /** Returns the runtime methods for an HList, or `null` if not found. (param name has a typo: listtId) */ getList(listtId: string): HListMethods | null; /** Returns the runtime methods for an HModal, or `null` if not found. (param name has a typo: listtId) */ getModal(listtId: string): HModalMethods | null; /** Returns the DOM-like note element handle, or `null` if not found. */ getNote(noteId: string): HNoteElement | null; /** Returns the runtime methods for an HPagination, or `null` if not found. */ getPagination(paginationId: string): HPaginationMethods | null; /** Returns the runtime methods for an HParagraph, or `null` if not found. */ getParagraph(paragraphId: string): HParagraphMethods | null; /** Returns the runtime methods for an HPopup, or `null` if not found. */ getPopup(popupId: string): HPopupMethods | null; /** Returns the runtime methods for an HSpinner, or `null` if not found. */ getSpinner(spinnerId: string): HSpinnerMethods | null; /** Returns the runtime methods for an HTable, or `null` if not found. */ getTable(tableId: string): HTableMethods | null; }; /** * Global theme & sizing controller. Mutators update the runtime theme state and * re-apply CSS variables to the document, then softly reload mounted components * so visual changes take effect immediately. * * Colors accept any valid CSS color string (hex, rgb(a), hsl(a), named colors). * Size uses the predefined scale from {@link Size}. * * @remarks * - Some “derived” getters (e.g., button/border/hover colors) return computed values * from the base palette; implementations typically cache or derive them from the * current theme and inversion state. * - `invertColor` flips foreground/background contrast for dark/light schemes. * * @example * // Switch to a medium size scale and update the primary palette: * hison.style.setSize(Size.m); * hison.style.setPrimaryColor('#4e79ff'); * hison.style.setInvertColor(true); */ style: { /** Sets the global size scale. Affects paddings, radii, and control heights. */ setSize(size: Size.xs | Size.s | Size.m | Size.l | Size.xl): void; /** Sets the base “filled” surface color used by components. */ setFilledColor(filledColor: string): void; /** Sets the base “empty/outline” surface color used by components. */ setEmptyColor(emptyColor: string): void; /** Sets the default text color on filled surfaces. */ setFilledTextColor(filledTextColor: string): void; /** Sets the default text color on empty/outline surfaces. */ setEmptyTextColor(emptyTextColor: string): void; /** Sets the primary accent color (brand color). */ setPrimaryColor(primaryColor: string): void; /** Sets the muted/neutral color. */ setMutedColor(mutedColor: string): void; /** Sets the informational color (status). */ setInfoColor(infoColor: string): void; /** Sets the success color (status). */ setSuccessColor(successColor: string): void; /** Sets the danger color (status). */ setDangerColor(dangerColor: string): void; /** Sets the warning color (status). */ setWarningColor(warningColor: string): void; /** Sets the custom1 color (status). */ setCustom1Color(custom1Color: string): void; /** Sets the custom2 color (status). */ setCustom2Color(custom2Color: string): void; /** Sets the custom3 color (status). */ setCustom3Color(custom3Color: string): void; /** Sets the custom4 color (status). */ setCustom4Color(custom4Color: string): void; /** Sets the custom5 color (status). */ setCustom5Color(custom5Color: string): void; /** * Enables or disables **color inversion** (dark/light intent). * When enabled, derived text/background pairs flip to preserve contrast. */ setInvertColor(invert: boolean): void; /** * Returns the current device type based on the client viewport width. * - SSR-safe: returns `'pc'` by default when executed on the server. * * @returns {'mb' | 'tb' | 'pc' | 'wd'} - Device type: * - 'mb': mobile (<768px) * - 'tb': tablet (<1200px) * - 'pc': desktop (<1980px) * - 'wd': wide (≥1980px) */ getDeviceType(): DeviceType; /** Returns the base filled surface color. */ getFilledColor(): string; /** Returns the base empty/outline surface color. */ getEmptyColor(): string; /** Returns the default text color on filled surfaces. */ getFilledTextColor(): string; /** Returns the default text color on empty/outline surfaces. */ getEmptyTextColor(): string; /** Returns the primary base color. */ getPrimaryColor(): string; /** Returns the computed button color for the primary palette. */ getPrimaryButtonColor(): string; /** Returns the computed border color for the primary palette. */ getPrimaryBorderColor(): string; /** Returns the computed shadow color for the primary palette. */ getPrimaryShadowColor(): string; /** Returns the computed hover color for the primary palette. */ getPrimaryHoverColor(): string; /** Returns the computed active color for the primary palette. */ getPrimaryActiveColor(): string; /** Returns the computed row hover color for the primary palette (e.g., tables). */ getPrimaryRowHoverColor(): string; /** Returns the computed stripe color for the primary palette (e.g., zebra rows). */ getPrimaryStripeColor(): string; /** Returns the muted base color. */ getMutedColor(): string; /** Returns the computed button color for the muted palette. */ getMutedButtonColor(): string; /** Returns the computed border color for the muted palette. */ getMutedBorderColor(): string; /** Returns the computed shadow color for the muted palette. */ getMutedShadowColor(): string; /** Returns the computed hover color for the muted palette. */ getMutedHoverColor(): string; /** Returns the computed active color for the muted palette. */ getMutedActiveColor(): string; /** Returns the computed row hover color for the muted palette. */ getMutedRowHoverColor(): string; /** Returns the computed stripe color for the muted palette. */ getMutedStripeColor(): string; /** Returns the info base color. */ getInfoColor(): string; /** Returns the computed button color for the info palette. */ getInfoButtonColor(): string; /** Returns the computed border color for the info palette. */ getInfoBorderColor(): string; /** Returns the computed shadow color for the info palette. */ getInfoShadowColor(): string; /** Returns the computed hover color for the info palette. */ getInfoHoverColor(): string; /** Returns the computed active color for the info palette. */ getInfoActiveColor(): string; /** Returns the computed row hover color for the info palette. */ getInfoRowHoverColor(): string; /** Returns the computed stripe color for the info palette. */ getInfoStripeColor(): string; /** Returns the success base color. */ getSuccessColor(): string; /** Returns the computed button color for the success palette. */ getSuccessButtonColor(): string; /** Returns the computed border color for the success palette. */ getSuccessBorderColor(): string; /** Returns the computed shadow color for the success palette. */ getSuccessShadowColor(): string; /** Returns the computed hover color for the success palette. */ getSuccessHoverColor(): string; /** Returns the computed active color for the success palette. */ getSuccessActiveColor(): string; /** Returns the computed row hover color for the success palette. */ getSuccessRowHoverColor(): string; /** Returns the computed stripe color for the success palette. */ getSuccessStripeColor(): string; /** Returns the danger base color. */ getDangerColor(): string; /** Returns the computed button color for the danger palette. */ getDangerButtonColor(): string; /** Returns the computed border color for the danger palette. */ getDangerBorderColor(): string; /** Returns the computed shadow color for the danger palette. */ getDangerShadowColor(): string; /** Returns the computed hover color for the danger palette. */ getDangerHoverColor(): string; /** Returns the computed active color for the danger palette. */ getDangerActiveColor(): string; /** Returns the computed row hover color for the danger palette. */ getDangerRowHoverColor(): string; /** Returns the computed stripe color for the danger palette. */ getDangerStripeColor(): string; /** Returns the warning base color. */ getWarningColor(): string; /** Returns the computed button color for the warning palette. */ getWarningButtonColor(): string; /** Returns the computed border color for the warning palette. */ getWarningBorderColor(): string; /** Returns the computed shadow color for the warning palette. */ getWarningShadowColor(): string; /** Returns the computed hover color for the warning palette. */ getWarningHoverColor(): string; /** Returns the computed active color for the warning palette. */ getWarningActiveColor(): string; /** Returns the computed row hover color for the warning palette. */ getWarningRowHoverColor(): string; /** Returns the computed stripe color for the warning palette. */ getWarningStripeColor(): string; /** Returns the custom1 base color. */ getCustom1Color(): string; /** Returns the computed button color for the custom1 palette. */ getCustom1ButtonColor(): string; /** Returns the computed border color for the custom1 palette. */ getCustom1BorderColor(): string; /** Returns the computed shadow color for the custom1 palette. */ getCustom1ShadowColor(): string; /** Returns the computed hover color for the custom1 palette. */ getCustom1HoverColor(): string; /** Returns the computed active color for the custom1 palette. */ getCustom1ActiveColor(): string; /** Returns the computed row hover color for the custom1 palette. */ getCustom1RowHoverColor(): string; /** Returns the computed stripe color for the custom1 palette. */ getCustom1StripeColor(): string; /** Returns the custom2 base color. */ getCustom2Color(): string; /** Returns the computed button color for the custom2 palette. */ getCustom2ButtonColor(): string; /** Returns the computed border color for the custom2 palette. */ getCustom2BorderColor(): string; /** Returns the computed shadow color for the custom2 palette. */ getCustom2ShadowColor(): string; /** Returns the computed hover color for the custom2 palette. */ getCustom2HoverColor(): string; /** Returns the computed active color for the custom2 palette. */ getCustom2ActiveColor(): string; /** Returns the computed row hover color for the custom2 palette. */ getCustom2RowHoverColor(): string; /** Returns the computed stripe color for the custom2 palette. */ getCustom2StripeColor(): string; /** Returns the custom3 base color. */ getCustom3Color(): string; /** Returns the computed button color for the custom3 palette. */ getCustom3ButtonColor(): string; /** Returns the computed border color for the custom3 palette. */ getCustom3BorderColor(): string; /** Returns the computed shadow color for the custom3 palette. */ getCustom3ShadowColor(): string; /** Returns the computed hover color for the custom3 palette. */ getCustom3HoverColor(): string; /** Returns the computed active color for the custom3 palette. */ getCustom3ActiveColor(): string; /** Returns the computed row hover color for the custom3 palette. */ getCustom3RowHoverColor(): string; /** Returns the computed stripe color for the custom3 palette. */ getCustom3StripeColor(): string; /** Returns the custom4 base color. */ getCustom4Color(): string; /** Returns the computed button color for the custom4 palette. */ getCustom4ButtonColor(): string; /** Returns the computed border color for the custom4 palette. */ getCustom4BorderColor(): string; /** Returns the computed shadow color for the custom4 palette. */ getCustom4ShadowColor(): string; /** Returns the computed hover color for the custom4 palette. */ getCustom4HoverColor(): string; /** Returns the computed active color for the custom4 palette. */ getCustom4ActiveColor(): string; /** Returns the computed row hover color for the custom4 palette. */ getCustom4RowHoverColor(): string; /** Returns the computed stripe color for the custom4 palette. */ getCustom4StripeColor(): string; /** Returns the custom5 base color. */ getCustom5Color(): string; /** Returns the computed button color for the custom5 palette. */ getCustom5ButtonColor(): string; /** Returns the computed border color for the custom5 palette. */ getCustom5BorderColor(): string; /** Returns the computed shadow color for the custom5 palette. */ getCustom5ShadowColor(): string; /** Returns the computed hover color for the custom5 palette. */ getCustom5HoverColor(): string; /** Returns the computed active color for the custom5 palette. */ getCustom5ActiveColor(): string; /** Returns the computed row hover color for the custom5 palette. */ getCustom5RowHoverColor(): string; /** Returns the computed stripe color for the custom5 palette. */ getCustom5StripeColor(): string; /** Returns whether theme inversion (dark/light intent) is currently enabled. */ isInvertColor(): boolean; }; } export declare const hison: Hison; /** * Configuration interface for global Hisonvue settings. * * @property primaryColor - The main color applied to all components (hex color string). * @property size - Default size used across all components (xs, s, m, l, xl). * @property editorConfig - Default config for HNote (based on Vanillanote). */ export declare interface HisonConfig extends UtilsConfig, ShieldConfig, DataConfig, LinkConfig { componentStyle: ComponentStyleConfig; component: ComponentConfig; event: HisonvueEvent; } export declare const hisonvue: { install(app: App, hisonConfig?: HisonConfig): void; }; export declare interface HisonvueEvent { cssEvent: CssEvent; } export declare const HLabel: DefineComponent>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; title: { type: StringConstructor; required: boolean; }; text: { type: StringConstructor; required: boolean; }; href: { type: PropType; default: null; }; anchorAttrs: { type: PropType | Record>; default: () => {}; }; fontBold: { type: BooleanConstructor; default: boolean; }; fontItalic: { type: BooleanConstructor; default: boolean; }; fontThruline: { type: BooleanConstructor; default: boolean; }; fontUnderline: { type: BooleanConstructor; default: boolean; }; textAlign: { type: PropType; default: null; validator: (v: any) => boolean; }; border: { type: BooleanConstructor; default: boolean; }; backgroundType: { type: PropType; default: BackgroundType; validator: (v: any) => boolean; }; toggleTarget: { type: PropType; default: null; }; translate: { type: BooleanConstructor; default: boolean; }; tabIndex: { type: PropType; default: null; validator: (v: any) => boolean; }; }>, { labelRef: Ref; labelMethods: ComputedRef "label"; isVisible: () => boolean; setVisible: (visible: boolean) => void; getTitle: () => string; setTitle: (title: string) => void; getText: () => string; setText: (text: string) => void; getHref: () => string; setHref: (href?: string | null) => void; getAnchorAttrs: () => Record; replaceAnchorAttrs: (next: Record) => void; mergeAnchorAttrs: (patch: Record) => void; setAnchorAttr: (key: string, val: unknown) => void; removeAnchorAttr: (key: string) => void; isFontBold: () => boolean; setFontBold: (bold: boolean) => void; isFontItalic: () => boolean; setFontItalic: (italic: boolean) => void; isFontThruline: () => boolean; setFontThruline: (thruline: boolean) => void; isFontUnderline: () => boolean; setFontUnderline: (underline: boolean) => void; getTextAlign: () => TextAlignValue; setTextAlign: (textAlign: TextAlign | TextAlignValue) => void; isBorder: () => boolean; setBorder: (border: boolean) => void; getBackgroundType: () => BackgroundTypeValue; setBackgroundType: (type: BackgroundType | BackgroundTypeValue) => void; getToggleTarget: () => string | null; setToggleTarget: (id: string | null) => void; isTranslate: () => boolean; setTranslate: (translate: boolean) => void; getTabIndex: () => number | null; setTabIndex: (v: number | null) => void; focus: () => void; isHisonvueComponent: true; getId: () => string; reload: () => void; } | null>; props: LooseRequired>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; title: { type: StringConstructor; required: boolean; }; text: { type: StringConstructor; required: boolean; }; href: { type: PropType; default: null; }; anchorAttrs: { type: PropType | Record>; default: () => {}; }; fontBold: { type: BooleanConstructor; default: boolean; }; fontItalic: { type: BooleanConstructor; default: boolean; }; fontThruline: { type: BooleanConstructor; default: boolean; }; fontUnderline: { type: BooleanConstructor; default: boolean; }; textAlign: { type: PropType; default: null; validator: (v: any) => boolean; }; border: { type: BooleanConstructor; default: boolean; }; backgroundType: { type: PropType; default: BackgroundType; validator: (v: any) => boolean; }; toggleTarget: { type: PropType; default: null; }; translate: { type: BooleanConstructor; default: boolean; }; tabIndex: { type: PropType; default: null; validator: (v: any) => boolean; }; }>> & Readonly<{ onClick?: ((...args: any[]) => any) | undefined; onMousedown?: ((...args: any[]) => any) | undefined; onMouseout?: ((...args: any[]) => any) | undefined; onMouseover?: ((...args: any[]) => any) | undefined; onMouseup?: ((...args: any[]) => any) | undefined; onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; }> & {}>; title: Ref; hasHref: ComputedRef; hasToggleTarget: ComputedRef; hasElementSlot: ComputedRef; renderTag: ComputedRef<"a" | "div" | "span">; internalText: Ref; computedAnchorAttrs: ComputedRef>; visibleClass: ComputedRef<"" | "hison-display-none">; fontBoldClass: ComputedRef<"hison-font-bold" | undefined>; fontItalicClass: ComputedRef<"hison-font-italic" | undefined>; fontThrulineClass: ComputedRef<"hison-font-thruline-important" | undefined>; fontUnderlineClass: ComputedRef<"hison-font-underline-important" | undefined>; textAlignStyle: ComputedRef< { textAlign: "left" | "center" | "right"; }>; translateAttr: ComputedRef<"no" | undefined>; translateClass: ComputedRef<"" | "notranslate">; borderClass: ComputedRef<"" | "hison-border">; backgroundTypeClass: ComputedRef<"hison-bg-transparent" | "hison-bg-empty" | "hison-bg-filled">; responsiveClassList: Ref; tabIndex: Ref; onClick: (e: MouseEvent) => void; onKeyActivate: (e: KeyboardEvent) => void; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("click" | "mounted" | "mousedown" | "mouseout" | "mouseover" | "mouseup" | "responsive-change")[], "click" | "mounted" | "mousedown" | "mouseout" | "mouseover" | "mouseup" | "responsive-change", PublicProps, Readonly>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; title: { type: StringConstructor; required: boolean; }; text: { type: StringConstructor; required: boolean; }; href: { type: PropType; default: null; }; anchorAttrs: { type: PropType | Record>; default: () => {}; }; fontBold: { type: BooleanConstructor; default: boolean; }; fontItalic: { type: BooleanConstructor; default: boolean; }; fontThruline: { type: BooleanConstructor; default: boolean; }; fontUnderline: { type: BooleanConstructor; default: boolean; }; textAlign: { type: PropType; default: null; validator: (v: any) => boolean; }; border: { type: BooleanConstructor; default: boolean; }; backgroundType: { type: PropType; default: BackgroundType; validator: (v: any) => boolean; }; toggleTarget: { type: PropType; default: null; }; translate: { type: BooleanConstructor; default: boolean; }; tabIndex: { type: PropType; default: null; validator: (v: any) => boolean; }; }>> & Readonly<{ onClick?: ((...args: any[]) => any) | undefined; onMousedown?: ((...args: any[]) => any) | undefined; onMouseout?: ((...args: any[]) => any) | undefined; onMouseover?: ((...args: any[]) => any) | undefined; onMouseup?: ((...args: any[]) => any) | undefined; onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; }>, { border: boolean; textAlign: "left" | "center" | "right" | TextAlign; translate: boolean; fontBold: boolean; fontItalic: boolean; fontThruline: boolean; fontUnderline: boolean; visible: boolean; tabIndex: string | number | null; backgroundType: BackgroundTypeValue | BackgroundType; href: string | null; anchorAttrs: Record | Partial; toggleTarget: string | null; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; /** * Defines additional attributes that can be bound to an `` element in `HLabel`. * * These map directly to standard HTML anchor attributes plus ARIA support. * Provides flexibility for accessibility and advanced link behavior. * * @example * { * target: '_blank', * rel: 'noopener noreferrer', * download: true, * hreflang: 'en', * 'aria-label': 'External link' * } */ export declare interface HLabelAnchorAttrs { /** Where to display the linked URL (`_self`, `_blank`, `_parent`, `_top`, etc.) */ target?: '_self' | '_blank' | '_parent' | '_top' | (string & {}); /** Relationship of the target object (e.g., `"noopener noreferrer"`) */ rel?: string; /** Marks link for download; may specify filename */ download?: boolean | string; /** Language of the linked resource (e.g., `"en"`, `"ko"`) */ hreflang?: string; /** Referrer policy for the request */ referrerpolicy?: 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url'; /** MIME type of the linked resource */ type?: string; /** Space-separated URLs to notify when link is clicked */ ping?: string; /** ARIA role for accessibility */ role?: string; /** Tab order index for keyboard navigation */ tabindex?: number; /** Accessible label text */ 'aria-label'?: string; /** Indicates the current item within a set of related links */ 'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | boolean; /** Any additional custom attribute */ [key: string]: unknown; } export declare const HLabelClientOnly: Component; /** * Runtime control methods for `HLabel` component. * * This interface defines methods that can be accessed via `hison.component.getLabel(id)`. * Use these methods to manipulate label state programmatically at runtime. * * --- * * ### 🔧 Example Usage * ```ts * const lb = hison.component.getLabel('lb1'); * lb.setVisible(true); * lb.setTitle('Go to naver'); * lb.setHref('https://www.naver.com/'); * lb.setText('Open Naver'); // works when the label doesn't render an element-slot * lb.mergeAnchorAttrs({ target: '_blank' }); * ``` * * --- * * ### ⚠️ Notes * - `setText` / `getText` are effective when the label **does not render an element-slot**: * - If the default slot is **text-only**, the text is absorbed into internal state ➜ controllable by `getText/setText`. * - If the default slot contains **any element vnode**, the slot is rendered as-is ➜ `getText()` returns `''` and `setText()` has no effect. * - When `href` is a non-empty string, the label renders as an `` and button-like CSS events are attached to the root. * - All changes are reactive and reflected immediately in the DOM. */ export declare interface HLabelMethods extends ComponentMethods { /** * Returns the type of the component. */ getType(): 'label'; /** * Returns whether the label is visible. * - `true`: rendered normally. * - `false`: hidden via `hison-display-none` on wrapper. */ isVisible(): boolean; /** * Sets label visibility. * @param visible - `true` to show, `false` to hide. */ setVisible(visible: boolean): void; /** * Gets the current tooltip (title) text shown on hover. */ getTitle(): string; /** * Sets the tooltip (title) text shown on hover. */ setTitle(title: string): void; /** * Gets the label text when controllable: * - Returns `''` if the default slot renders **any element vnode**. * - Otherwise returns the internally managed text (including text-only slot absorption). */ getText(): string; /** * Sets the label text when controllable: * - No effect if the default slot renders **any element vnode**. * - Updates internal reactive text which is rendered either inside `` (when `href` exists) or ``. */ setText(text: string): void; /** * Gets the current `href`. * - Empty string means "no link" (label renders as `` or `
` depending on slot). */ getHref(): string; /** * Sets the `href`. * - `null` or empty string disables link mode (label becomes non-anchor). * - Non-empty string enables link mode (label renders as ``). */ setHref(href?: string | null): void; /** * Reads the full `anchorAttrs` (shallow-copied) object used for ``. * - Typical keys: `target`, `rel`, `download`, `referrerPolicy`, `hreflang`, etc. */ getAnchorAttrs(): Record; /** * Replaces the entire `anchorAttrs` object. * - Use to reset all attributes at once. */ replaceAnchorAttrs(next: Record): void; /** * Shallow-merges given patch into current `anchorAttrs`. * - Use to update a subset of attributes without losing others. */ mergeAnchorAttrs(patch: Record): void; /** * Sets a single anchor attribute by key. * - Example: `setAnchorAttr('target', '_blank')` */ setAnchorAttr(key: string, val: unknown): void; /** * Removes a single anchor attribute by key. * - Example: `removeAnchorAttr('download')` */ removeAnchorAttr(key: string): void; /** * Returns whether bold style is applied. */ isFontBold(): boolean; /** * Applies or removes bold style. */ setFontBold(bold: boolean): void; /** * Returns whether italic style is applied. */ isFontItalic(): boolean; /** * Applies or removes italic style. */ setFontItalic(italic: boolean): void; /** * Returns whether strikethrough is applied. */ isFontThruline(): boolean; /** * Applies or removes strikethrough style. */ setFontThruline(thruline: boolean): void; /** * Returns whether underline is applied. */ isFontUnderline(): boolean; /** * Applies or removes underline style. */ setFontUnderline(underline: boolean): void; /** * Gets current text alignment ('left' | 'center' | 'right'). */ getTextAlign(): TextAlignValue; /** * Sets text alignment. */ setTextAlign(textAlign: TextAlign | TextAlignValue): void; /** * Returns whether the label shows border (box-shadow). */ isBorder(): boolean; /** * Sets whether border (box-shadow) is shown. * @param border - `true` to show, `false` to hide. */ setBorder(border: boolean): void; /** * Gets current background type of the label. * - One of 'filled' | 'empty' | 'transparent'. */ getBackgroundType(): BackgroundTypeValue; /** * Sets background type of the label. * - Accepts 'filled' | 'empty' | 'transparent'. */ setBackgroundType(type: BackgroundType | BackgroundTypeValue): void; /** * Gets the current toggle target id. * - Returns the id of the `HInput` (checkbox/radio) linked to this label, or `null` if none. */ getToggleTarget(): string | null; /** * Sets or changes the toggle target id. * - When assigned, clicking the label (or pressing Enter/Space) will toggle the specified `HInput`. * - Accepts `null` to remove toggle linkage. */ setToggleTarget(id: string | null): void; /** * Returns whether translation is currently enabled. * - When `false`, the label has `translate="no"` and `.notranslate` class. */ isTranslate(): boolean; /** * Enables or disables browser translation prevention. * - `true` → nothing (translation allowed) * - `false` → adds `translate="no"` + `.notranslate` */ setTranslate(translate: boolean): void; /** * Gets the current `tabIndex` applied to element. * - `null`: no `tabindex` attribute (items not focusable). * - `0` or positive number: items can be focused via keyboard navigation. */ getTabIndex(): number | null; /** * Sets `tabIndex` for element. * @param v - `null` to remove, or number to make focusable. */ setTabIndex(v: number | null): void; /** * Focuses the label when applicable. * - If the label renders as ``, focus moves to the anchor element. * - Otherwise (non-anchor), no-op. */ focus(): void; } export declare const HLayout: DefineComponent>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; backImageSrc: { type: StringConstructor; required: boolean; }; backImageRepeat: { type: PropType; required: boolean; validator: (v: any) => boolean; }; backImageWidth: { type: StringConstructor; required: boolean; }; backImageAlign: { type: PropType; required: boolean; validator: (v: any) => boolean; }; backImageVerticalAlign: { type: PropType; required: boolean; validator: (v: any) => boolean; }; backColor: { type: StringConstructor; required: boolean; }; border: { type: BooleanConstructor; default: boolean; }; height: { type: StringConstructor; required: boolean; }; }>, { layoutRef: Ref; layoutMethods: ComputedRef "layout"; getBackImageSrc: () => string; setBackImageSrc: (src: string) => void; getBackImageRepeat: () => string | BackImageAlignValue; setBackImageRepeat: (cssText: string | BackImageAlign | BackImageAlignValue) => void; getBackImageWidth: () => string; setBackImageWidth: (cssText: string) => void; getBackImageAlign: () => string | BackImageAlignValue; setBackImageAlign: (cssText: BackImageAlign | BackImageAlignValue) => void; getBackImageVerticalAlign: () => string | BackImageVerticalAlignValue; setBackImageVerticalAlign: (cssText: BackImageVerticalAlign | BackImageVerticalAlignValue) => void; getBackColor: () => string; setBackColor: (cssText: string) => void; isBorder: () => boolean; setBorder: (border: boolean) => void; getHeight: () => string; setHeight: (cssText: string) => void; isHisonvueComponent: true; getId: () => string; isVisible: () => boolean; setVisible: (visible: boolean) => void; reload: () => void; } | null>; props: LooseRequired>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; backImageSrc: { type: StringConstructor; required: boolean; }; backImageRepeat: { type: PropType; required: boolean; validator: (v: any) => boolean; }; backImageWidth: { type: StringConstructor; required: boolean; }; backImageAlign: { type: PropType; required: boolean; validator: (v: any) => boolean; }; backImageVerticalAlign: { type: PropType; required: boolean; validator: (v: any) => boolean; }; backColor: { type: StringConstructor; required: boolean; }; border: { type: BooleanConstructor; default: boolean; }; height: { type: StringConstructor; required: boolean; }; }>> & Readonly<{ onClick?: ((...args: any[]) => any) | undefined; onMousedown?: ((...args: any[]) => any) | undefined; onMouseout?: ((...args: any[]) => any) | undefined; onMouseover?: ((...args: any[]) => any) | undefined; onMouseup?: ((...args: any[]) => any) | undefined; onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; }> & {}>; responsiveClassList: Ref; visibleClass: ComputedRef<"" | "hison-display-none">; borderClass: ComputedRef<"" | "hison-border">; computedBackStyle: ComputedRef>; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("click" | "mounted" | "mousedown" | "mouseout" | "mouseover" | "mouseup" | "responsive-change")[], "click" | "mounted" | "mousedown" | "mouseout" | "mouseover" | "mouseup" | "responsive-change", PublicProps, Readonly>; required: boolean; }; style: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; backImageSrc: { type: StringConstructor; required: boolean; }; backImageRepeat: { type: PropType; required: boolean; validator: (v: any) => boolean; }; backImageWidth: { type: StringConstructor; required: boolean; }; backImageAlign: { type: PropType; required: boolean; validator: (v: any) => boolean; }; backImageVerticalAlign: { type: PropType; required: boolean; validator: (v: any) => boolean; }; backColor: { type: StringConstructor; required: boolean; }; border: { type: BooleanConstructor; default: boolean; }; height: { type: StringConstructor; required: boolean; }; }>> & Readonly<{ onClick?: ((...args: any[]) => any) | undefined; onMousedown?: ((...args: any[]) => any) | undefined; onMouseout?: ((...args: any[]) => any) | undefined; onMouseover?: ((...args: any[]) => any) | undefined; onMouseup?: ((...args: any[]) => any) | undefined; onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; }>, { border: boolean; visible: boolean; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; export declare const HLayoutClientOnly: Component; /** * Runtime control methods for `HLayout` component. * * This interface defines programmatic access to a layout's visibility, * background, border, and layout styling. You can retrieve an instance * using `hison.component.getLayout(id)`. * * --- * * ### 🔧 Example Usage * ```ts * const layout = hison.component.getLayout('layout01'); * layout.setVisible(true); * layout.setBackColor('primary'); * layout.setBackImageSrc('/assets/bg.jpg'); * layout.setHeight('300px'); * ``` * * --- * * ### ⚠️ Notes * - All methods are reactive and immediately affect the DOM. * - Background-related methods directly modify the `style` attribute of the layout. */ export declare interface HLayoutMethods extends ComponentMethods { /** * Returns the type of the layout. */ getType(): 'layout'; /** * Gets the current background image URL (`background-image`). */ getBackImageSrc(): string; /** * Sets the background image URL. * Applies to `background-image` via `url(...)`. */ setBackImageSrc(src: string): void; /** * Gets the background repeat or scaling mode. * Corresponds to `background-repeat` or `background-size`. */ getBackImageRepeat(): string | BackImageAlignValue; /** * Sets the background repeat or scale style. * Examples: `'no-repeat'`, `'repeat'`, `'cover'`, `'contain'` */ setBackImageRepeat(cssText: string | BackImageAlign | BackImageAlignValue): void; /** * Gets the background image width setting (`background-size`). * Examples: `'100%'`, `'300px'` */ getBackImageWidth(): string; /** * Sets the background image width (`background-size`). */ setBackImageWidth(cssText: string): void; /** * Gets the horizontal alignment of the background image. * Values: `'left'`, `'center'`, `'right'` */ getBackImageAlign(): string | BackImageAlignValue; /** * Sets the horizontal alignment of the background image. */ setBackImageAlign(cssText: BackImageAlign | BackImageAlignValue): void; /** * Gets the vertical alignment of the background image. * Values: `'top'`, `'center'`, `'bottom'` */ getBackImageVerticalAlign(): string | BackImageVerticalAlignValue; /** * Sets the vertical alignment of the background image. */ setBackImageVerticalAlign(cssText: BackImageVerticalAlign | BackImageVerticalAlignValue): void; /** * Gets the background color of the layout. * May be a hex color, rgba string, or keyword (e.g. `'primary'`). */ getBackColor(): string; /** * Sets the background color. * Accepts hex, rgba, or `hison` keyword values (`'primary'`, `'danger'`, etc.). */ setBackColor(cssText: string): void; /** * Returns whether the label shows border (box-shadow). */ isBorder(): boolean; /** * Sets whether border (box-shadow) is shown. * @param border - `true` to show, `false` to hide. */ setBorder(border: boolean): void; /** * Gets the current height of the layout container. * Examples: `'100px'`, `'50%'`, `'auto'`, `'100vh'` */ getHeight(): string; /** * Sets the height of the layout container. */ setHeight(cssText: string): void; } export declare const HList: DefineComponent>; required: boolean; }; style: { type: PropType; required: boolean; }; listItemStyle: { type: PropType; required: boolean; }; listItemInnerStyle: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; border: { type: BooleanConstructor; default: boolean; }; listBorder: { type: BooleanConstructor; default: boolean; }; backgroundType: { type: PropType; default: BackgroundType; validator: (v: any) => boolean; }; listBackgroundType: { type: PropType; default: BackgroundType; validator: (v: any) => boolean; }; listType: { type: PropType<"ul" | "ol">; default: string; validator: (v: any) => boolean; }; bulletChar: { type: StringConstructor; default: string; }; showMarker: { type: BooleanConstructor; default: boolean; }; textList: { type: PropType>; default: () => never[]; }; addEvent: { type: BooleanConstructor; default: boolean; }; columns: { type: NumberConstructor; default: number; validator: (v: any) => boolean; }; columnGap: { type: PropType; default: number; }; tabIndex: { type: PropType; default: null; validator: (v: any) => boolean; }; }>, { props: LooseRequired>; required: boolean; }; style: { type: PropType; required: boolean; }; listItemStyle: { type: PropType; required: boolean; }; listItemInnerStyle: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; border: { type: BooleanConstructor; default: boolean; }; listBorder: { type: BooleanConstructor; default: boolean; }; backgroundType: { type: PropType; default: BackgroundType; validator: (v: any) => boolean; }; listBackgroundType: { type: PropType; default: BackgroundType; validator: (v: any) => boolean; }; listType: { type: PropType<"ul" | "ol">; default: string; validator: (v: any) => boolean; }; bulletChar: { type: StringConstructor; default: string; }; showMarker: { type: BooleanConstructor; default: boolean; }; textList: { type: PropType>; default: () => never[]; }; addEvent: { type: BooleanConstructor; default: boolean; }; columns: { type: NumberConstructor; default: number; validator: (v: any) => boolean; }; columnGap: { type: PropType; default: number; }; tabIndex: { type: PropType; default: null; validator: (v: any) => boolean; }; }>> & Readonly<{ onClick?: ((...args: any[]) => any) | undefined; onMousedown?: ((...args: any[]) => any) | undefined; onMouseout?: ((...args: any[]) => any) | undefined; onMouseover?: ((...args: any[]) => any) | undefined; onMouseup?: ((...args: any[]) => any) | undefined; onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; }> & {}>; listRef: Ref; itemRefs: Ref; itemInnerRefs: Ref; renderTag: ComputedRef<"ul" | "ol">; listType: Ref<"ul" | "ol", "ul" | "ol">; bulletChar: Ref; showMarker: Ref; visibleClass: ComputedRef<"" | "hison-display-none">; borderClass: ComputedRef<"" | "hison-border">; listBorderClass: ComputedRef<"" | "hison-border">; backgroundTypeClass: ComputedRef<"hison-bg-transparent" | "hison-bg-empty" | "hison-bg-filled">; listBackgroundTypeClass: ComputedRef<"hison-bg-transparent" | "hison-bg-empty" | "hison-bg-filled">; responsiveClassList: Ref; hasElementSlot: ComputedRef; elementNodes: ComputedRef[]>; normalizedItems: ComputedRef<(string | number)[]>; listLayoutStyle: ComputedRef; listItemLayoutStyle: ComputedRef; tabIndex: Ref; setItemRef: (el: Element | ComponentPublicInstance | null) => void; setItemInnerRef: (el: Element | ComponentPublicInstance | null) => void; onItemClick: (e: MouseEvent) => void; emitItem: (name: "mousedown" | "mouseup" | "mouseover" | "mouseout", e: MouseEvent) => void; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("click" | "mounted" | "mousedown" | "mouseout" | "mouseover" | "mouseup" | "responsive-change")[], "click" | "mounted" | "mousedown" | "mouseout" | "mouseover" | "mouseup" | "responsive-change", PublicProps, Readonly>; required: boolean; }; style: { type: PropType; required: boolean; }; listItemStyle: { type: PropType; required: boolean; }; listItemInnerStyle: { type: PropType; required: boolean; }; visible: { type: BooleanConstructor; default: boolean; }; border: { type: BooleanConstructor; default: boolean; }; listBorder: { type: BooleanConstructor; default: boolean; }; backgroundType: { type: PropType; default: BackgroundType; validator: (v: any) => boolean; }; listBackgroundType: { type: PropType; default: BackgroundType; validator: (v: any) => boolean; }; listType: { type: PropType<"ul" | "ol">; default: string; validator: (v: any) => boolean; }; bulletChar: { type: StringConstructor; default: string; }; showMarker: { type: BooleanConstructor; default: boolean; }; textList: { type: PropType>; default: () => never[]; }; addEvent: { type: BooleanConstructor; default: boolean; }; columns: { type: NumberConstructor; default: number; validator: (v: any) => boolean; }; columnGap: { type: PropType; default: number; }; tabIndex: { type: PropType; default: null; validator: (v: any) => boolean; }; }>> & Readonly<{ onClick?: ((...args: any[]) => any) | undefined; onMousedown?: ((...args: any[]) => any) | undefined; onMouseout?: ((...args: any[]) => any) | undefined; onMouseover?: ((...args: any[]) => any) | undefined; onMouseup?: ((...args: any[]) => any) | undefined; onMounted?: ((...args: any[]) => any) | undefined; "onResponsive-change"?: ((...args: any[]) => any) | undefined; }>, { border: boolean; columnGap: string | number; columns: number; visible: boolean; tabIndex: string | number | null; backgroundType: BackgroundTypeValue | BackgroundType; listBorder: boolean; listBackgroundType: BackgroundTypeValue | BackgroundType; listType: "ul" | "ol"; bulletChar: string; showMarker: boolean; textList: (string | number)[]; addEvent: boolean; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>; export declare const HListClientOnly: Component; /** * Runtime control methods for `HList` component. * * This interface defines methods that can be accessed via `hison.component.getList(id)`. * Use these methods to manipulate list state, appearance, and items programmatically at runtime. * * --- * * ### 🔧 Example Usage * ```ts * const list = hison.component.getList('list1'); * list.setVisible(true); * list.setListType('ol'); * list.setShowMarker(true); * list.setBulletChar('★'); * list.setTextList(['Alpha', 'Beta', 'Gamma']); * list.setTabIndex(0); // make items focusable * list.focus(); // focuses the first item * ``` * * --- * * ### ⚠️ Notes * - **Slots vs textList**: * - If the default slot contains element vnodes, items render directly from the slot ➜ `getTextList/setTextList` do not affect them. * - If slot is absent or text-only, items are driven by `textList`. * - **Keyboard navigation**: * - `tabIndex` applies to all `
  • ` items. When set (e.g., `0`), items become focusable and respond to keyboard `Enter` / `Space` as click. * - **Event model**: * - When `addEvent = true`, items attach textbox-like CSS states and emit `click/mousedown/mouseup/mouseover/mouseout`. * - Events are `.stop`-scoped internally to avoid propagating into consumer code unexpectedly. * - All changes are reactive and reflected immediately in the DOM. */ export declare interface HListMethods extends ComponentMethods { /** * Returns the type of the component. */ getType(): 'list'; /** * Returns whether the list is visible. * - `true`: rendered normally. * - `false`: hidden via `hison-display-none` on wrapper. */ isVisible(): boolean; /** * Sets list visibility. * @param visible - `true` to show, `false` to hide. */ setVisible(visible: boolean): void; /** * Gets the current list tag type. * - `'ul'` → unordered list. * - `'ol'` → ordered list. */ getListType(): 'ul' | 'ol'; /** * Sets the list tag type. * - Switches rendering between `