@webx-ui/core 0.0.2 → 0.1.0

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

@@ -0,0 +1,32 @@
+import { TagsInputProps } from './types';
+type __VLS_Props = TagsInputProps;
+type __VLS_PublicProps = {
+    modelValue?: string[];
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
+    focus: () => void | undefined;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    search: (term: string) => any;
+    change: (value: string[]) => any;
+    "update:modelValue": (value: string[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSearch?: ((term: string) => any) | undefined;
+    onChange?: ((value: string[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {
+    name: string;
+    size: import('../..').ControlSize;
+    disabled: boolean;
+    id: string;
+    ariaLabel: string;
+    max: number;
+    placeholder: string;
+    status: import('../..').ControlStatus;
+    emptyText: string;
+    suggestions: string[];
+    duplicates: boolean;
+    allowCreate: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    inputRef: HTMLInputElement;
+}, any>;
+export default _default;

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

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

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

@@ -0,0 +1,26 @@
+import { ControlSize, ControlStatus } from '../../composables/useFormField';
+export interface TagsInputProps {
+    /** Options offered while typing. Refresh them from the `search` event for a backend. */
+    suggestions?: string[];
+    placeholder?: string;
+    /** Shown when nothing matches and new tags are not allowed. */
+    emptyText?: string;
+    /** Largest number of tags the user may end up with. */
+    max?: number;
+    /** Allow the same tag twice. */
+    duplicates?: boolean;
+    /** Let Enter add a tag that is not in the suggestions. */
+    allowCreate?: boolean;
+    disabled?: boolean;
+    size?: ControlSize;
+    status?: ControlStatus;
+    id?: string;
+    name?: string;
+    /** Accessible label used when there is no visible `<label>`. */
+    ariaLabel?: string;
+}
+export interface TagsInputEmits {
+    change: [value: string[]];
+    /** What the user typed, on every keystroke — use it to fetch suggestions. */
+    search: [term: string];
+}

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

@@ -0,0 +1,39 @@
+import { TextareaModelValue, TextareaProps } from './types';
+type __VLS_Props = TextareaProps;
+type __VLS_PublicProps = {
+    modelValue?: TextareaModelValue;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
+    focus: () => void | undefined;
+    blur: () => void | undefined;
+    select: () => void | undefined;
+    textarea: import('vue').Ref<HTMLTextAreaElement | null, HTMLTextAreaElement | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    input: (value: string) => any;
+    change: (value: string) => any;
+    "update:modelValue": (value: TextareaModelValue) => any;
+    blur: (event: FocusEvent) => any;
+    focus: (event: FocusEvent) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onInput?: ((value: string) => any) | undefined;
+    onChange?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: TextareaModelValue) => any) | undefined;
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+}>, {
+    size: import('../..').ControlSize;
+    disabled: boolean;
+    id: string;
+    ariaLabel: string;
+    placeholder: string;
+    readonly: boolean;
+    status: import('../..').ControlStatus;
+    maxlength: number;
+    showCount: boolean;
+    resize: "none" | "vertical" | "both";
+    rows: number;
+    autosize: boolean | import('./types').AutosizeOptions;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    textareaRef: HTMLTextAreaElement;
+}, any>;
+export default _default;

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

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

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

@@ -0,0 +1,31 @@
+import { ControlSize, ControlStatus } from '../../composables/useFormField';
+export interface AutosizeOptions {
+    minRows?: number;
+    maxRows?: number;
+}
+export interface TextareaProps {
+    size?: ControlSize;
+    status?: ControlStatus;
+    id?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    /** Visible rows when autosize is off. */
+    rows?: number;
+    /** Grows with the content. Pass an object to bound the growth. */
+    autosize?: boolean | AutosizeOptions;
+    maxlength?: number;
+    /** Renders a `current / max` counter (requires `maxlength`). */
+    showCount?: boolean;
+    /** Which way the user may resize the field by hand. */
+    resize?: 'none' | 'vertical' | 'both';
+    /** Accessible label used when the field has no visible `<label>`. */
+    ariaLabel?: string;
+}
+export type TextareaModelValue = string | undefined;
+export interface TextareaEmits {
+    input: [value: string];
+    change: [value: string];
+    focus: [event: FocusEvent];
+    blur: [event: FocusEvent];
+}

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

@@ -0,0 +1,52 @@
+import { DatePickerModelValue, DatePickerProps } from '../DatePicker/types';
+/**
+ * Every prop defaults to `undefined` on purpose. Vue casts an absent boolean prop
+ * to `false`, and this preset forwards its whole prop object — without these the
+ * preset would hand `WxDatePicker` an explicit `false` for `is24`, `clearable`,
+ * `autoApply` and `teleport`, overriding that component's own defaults. Passing
+ * `undefined` lets each default apply as if the prop had never been written.
+ */
+type __VLS_Props = Omit<DatePickerProps, 'type'>;
+type __VLS_PublicProps = {
+    modelValue?: DatePickerModelValue;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: any;
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: DatePickerModelValue) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: DatePickerModelValue) => any) | undefined;
+}>, {
+    name: string;
+    size: import('../..').ControlSize;
+    disabled: boolean;
+    id: string;
+    ariaLabel: string;
+    clearable: boolean;
+    placeholder: string;
+    teleport: boolean | string;
+    readonly: boolean;
+    status: import('../..').ControlStatus;
+    valueFormat: string;
+    format: string;
+    minDate: string | Date;
+    maxDate: string | Date;
+    seconds: boolean;
+    minutesIncrement: number;
+    is24: boolean;
+    weekStart: number;
+    autoApply: boolean;
+    textInput: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1 @@
+export { default as WxTimePicker } from './TimePicker';

package/dist/components/index.d.ts

@@ -1,3 +1,22 @@
 export * from './Button';
-export * from './Input';
 export * from './Card';
+export * from './Checkbox';
+export * from './CheckboxGroup';
+export * from './ColorPicker';
+export * from './DatePicker';
+export * from './DateRangePicker';
+export * from './DateTimePicker';
+export * from './Form';
+export * from './FormItem';
+export * from './Input';
+export * from './InputNumber';
+export * from './Radio';
+export * from './RadioGroup';
+export * from './Rate';
+export * from './RichText';
+export * from './Select';
+export * from './Slider';
+export * from './Switch';
+export * from './TagsInput';
+export * from './Textarea';
+export * from './TimePicker';

package/dist/composables/useFormField.d.ts

@@ -0,0 +1,64 @@
+import { ComputedRef, InjectionKey, Ref } from 'vue';
+export type ControlSize = 'sm' | 'md' | 'lg';
+export type ControlStatus = 'default' | 'success' | 'warning' | 'error';
+/** Field name -> messages, the shape Laravel returns on a 422. */
+export type ValidationErrors = Record<string, string[]>;
+export interface FormContext {
+    /** Server-side errors, keyed by field name. */
+    errors: Ref<ValidationErrors>;
+    disabled: Ref<boolean>;
+    size: Ref<ControlSize>;
+    labelPosition: Ref<'top' | 'left'>;
+    labelWidth: Ref<string | undefined>;
+}
+export interface FormItemContext {
+    /** Id given to the control, so the label's `for` matches. */
+    id: ComputedRef<string>;
+    /** Ids of the help and error nodes, for `aria-describedby`. */
+    describedBy: ComputedRef<string | undefined>;
+    status: ComputedRef<ControlStatus>;
+    disabled: ComputedRef<boolean>;
+    size: ComputedRef<ControlSize | undefined>;
+    /** Set by grouped controls so the label points at the group, not one input. */
+    registerLabelTarget: (id: string | undefined) => void;
+}
+export declare const formContextKey: InjectionKey<FormContext>;
+export declare const formItemContextKey: InjectionKey<FormItemContext>;
+export declare function useId(prefix?: string): string;
+export interface FormFieldProps {
+    disabled?: boolean;
+    size?: ControlSize;
+    status?: ControlStatus;
+    id?: string;
+}
+/**
+ * Resolves what a control should render as, given its own props, the enclosing
+ * `WxFormItem` and the enclosing `WxForm`. The control's own prop always wins;
+ * `WxFormItem` beats `WxForm`.
+ */
+export declare function useFormField(props: FormFieldProps): {
+    id: ComputedRef<string>;
+    disabled: ComputedRef<boolean>;
+    size: ComputedRef<ControlSize>;
+    status: ComputedRef<ControlStatus>;
+    describedBy: ComputedRef<string | undefined>;
+    form: FormContext | null;
+    item: FormItemContext | null;
+};
+/**
+ * What a checkbox, radio or switch may carry. Deliberately narrower than `unknown`:
+ * a `v-model` that hands back `unknown` is useless to the caller, and object values
+ * would need identity comparison rather than `===`.
+ */
+export type ChoiceValue = string | number | boolean | null;
+/** Used by `WxCheckboxGroup` / `WxRadioGroup` to share state with their children. */
+export interface ChoiceGroupContext<T> {
+    name: ComputedRef<string | undefined>;
+    modelValue: Ref<T>;
+    disabled: ComputedRef<boolean>;
+    size: ComputedRef<ControlSize>;
+    toggle: (value: ChoiceValue, checked: boolean) => void;
+}
+export declare const checkboxGroupKey: InjectionKey<ChoiceGroupContext<ChoiceValue[]>>;
+export declare const radioGroupKey: InjectionKey<ChoiceGroupContext<ChoiceValue | undefined>>;
+export declare function provideFormItem(context: FormItemContext): void;

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components';
 export { WebxUI, type WebxUiOptions } from './plugin';
+export type { ControlSize, ControlStatus, ValidationErrors } from './composables/useFormField';