@ghentcdh/ui 1.0.2 → 1.0.4

package/form/core/ControlWrapper.vue.d.ts

@@ -0,0 +1,221 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLFieldSetElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    placeholder: {
+        type: StringConstructor;
+    };
+    description: {
+        type: StringConstructor;
+    };
+    errors: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isFocused: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isTouched: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideLabel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    styles: {
+        type: import('vue').PropType<import('./styles').MyStyles>;
+        default: () => {
+            readonly group: {
+                readonly root: "group";
+                readonly label: "text-primary text-lg font-bold";
+                readonly item: "group-item";
+            };
+            readonly verticalLayout: {
+                readonly root: "flex flex-col gap-x-2";
+                readonly item: "w-full";
+            };
+            readonly horizontalLayout: {
+                readonly root: "flex flex-row gap-x-2";
+                readonly item: "w-full";
+            };
+            readonly arrayList: {
+                readonly root: "fieldset";
+                readonly legend: "fieldset-legend text-xl capitalize";
+            };
+            readonly control: {
+                readonly root: "fieldset";
+                readonly wrapper: "fieldset";
+                readonly label: "fieldset-legend";
+                readonly error: "";
+                readonly input: "input";
+                readonly textarea: "input h-32";
+                readonly checkbox: "checkbox";
+                readonly select: "input pr-14";
+                readonly description: "form-control--description label text-xs text-gray-500";
+            };
+            readonly fixedArrayList: {
+                readonly root: "flex flex-row gap-x-2";
+                readonly item: "w-full";
+            };
+        };
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    placeholder: {
+        type: StringConstructor;
+    };
+    description: {
+        type: StringConstructor;
+    };
+    errors: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isFocused: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isTouched: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideLabel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    styles: {
+        type: import('vue').PropType<import('./styles').MyStyles>;
+        default: () => {
+            readonly group: {
+                readonly root: "group";
+                readonly label: "text-primary text-lg font-bold";
+                readonly item: "group-item";
+            };
+            readonly verticalLayout: {
+                readonly root: "flex flex-col gap-x-2";
+                readonly item: "w-full";
+            };
+            readonly horizontalLayout: {
+                readonly root: "flex flex-row gap-x-2";
+                readonly item: "w-full";
+            };
+            readonly arrayList: {
+                readonly root: "fieldset";
+                readonly legend: "fieldset-legend text-xl capitalize";
+            };
+            readonly control: {
+                readonly root: "fieldset";
+                readonly wrapper: "fieldset";
+                readonly label: "fieldset-legend";
+                readonly error: "";
+                readonly input: "input";
+                readonly textarea: "input h-32";
+                readonly checkbox: "checkbox";
+                readonly select: "input pr-14";
+                readonly description: "form-control--description label text-xs text-gray-500";
+            };
+            readonly fixedArrayList: {
+                readonly root: "flex flex-row gap-x-2";
+                readonly item: "w-full";
+            };
+        };
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    required: boolean;
+    width: string;
+    styles: {
+        readonly group: {
+            readonly root: "group";
+            readonly label: "text-primary text-lg font-bold";
+            readonly item: "group-item";
+        };
+        readonly verticalLayout: {
+            readonly root: "flex flex-col gap-x-2";
+            readonly item: "w-full";
+        };
+        readonly horizontalLayout: {
+            readonly root: "flex flex-row gap-x-2";
+            readonly item: "w-full";
+        };
+        readonly arrayList: {
+            readonly root: "fieldset";
+            readonly legend: "fieldset-legend text-xl capitalize";
+        };
+        readonly control: {
+            readonly root: "fieldset";
+            readonly wrapper: "fieldset";
+            readonly label: "fieldset-legend";
+            readonly error: "";
+            readonly input: "input";
+            readonly textarea: "input h-32";
+            readonly checkbox: "checkbox";
+            readonly select: "input pr-14";
+            readonly description: "form-control--description label text-xs text-gray-500";
+        };
+        readonly fixedArrayList: {
+            readonly root: "flex flex-row gap-x-2";
+            readonly item: "w-full";
+        };
+    };
+    hideLabel: boolean;
+    isTouched: boolean;
+    visible: boolean;
+    enabled: boolean;
+    isFocused: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLFieldSetElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/form/core/emits.d.ts

@@ -0,0 +1,7 @@
+export type ControlEmits = {
+    'update:modelValue': [value: any];
+    change: [value: any];
+    clear: [];
+    focus: [event: FocusEvent];
+    blur: [event: Event];
+};

package/form/core/properties.d.ts

@@ -0,0 +1,25 @@
+import { Editor } from '@tiptap/vue-3';
+import { MyStyles } from './styles';
+export type ControlProperties = {
+    id?: string;
+    placeholder?: string;
+    description?: string;
+    errors?: string;
+    label?: string;
+    visible?: boolean;
+    required?: boolean;
+    enabled?: boolean;
+    isFocused?: boolean;
+    isTouched?: boolean;
+    hideLabel?: boolean;
+    styles?: MyStyles;
+    width: string;
+};
+export type ToolbarAction = {
+    /** Displayed inside the button (text or HTML, e.g. an icon) */
+    label: string;
+    /** The Tiptap mark/node name used for isActive() highlighting */
+    name: string;
+    /** Called with the editor instance when the button is clicked */
+    action: (editor: Editor | undefined) => void;
+};

package/form/core/styles.d.ts

@@ -0,0 +1,36 @@
+export declare const myStyles: {
+    readonly group: {
+        readonly root: "group";
+        readonly label: "text-primary text-lg font-bold";
+        readonly item: "group-item";
+    };
+    readonly verticalLayout: {
+        readonly root: "flex flex-col gap-x-2";
+        readonly item: "w-full";
+    };
+    readonly horizontalLayout: {
+        readonly root: "flex flex-row gap-x-2";
+        readonly item: "w-full";
+    };
+    readonly arrayList: {
+        readonly root: "fieldset";
+        readonly legend: "fieldset-legend text-xl capitalize";
+    };
+    readonly control: {
+        readonly root: "fieldset";
+        readonly wrapper: "fieldset";
+        readonly label: "fieldset-legend";
+        readonly error: "";
+        readonly input: "input";
+        readonly textarea: "input h-32";
+        readonly checkbox: "checkbox";
+        readonly select: "input pr-14";
+        readonly description: "form-control--description label text-xs text-gray-500";
+    };
+    readonly fixedArrayList: {
+        readonly root: "flex flex-row gap-x-2";
+        readonly item: "w-full";
+    };
+};
+export type MyStyles = typeof myStyles;
+export declare const mergeStyles: (overrides?: Partial<MyStyles>) => MyStyles;

package/form/core/utils/style.d.ts

@@ -0,0 +1,6 @@
+import { ControlProperties } from '../properties';
+type ErrorControlProperties = Pick<ControlProperties, 'errors' | 'isTouched'>;
+export declare const showErrors: ({ isTouched, errors }: ErrorControlProperties) => boolean;
+export declare const isDescriptionHidden: (visible: boolean, description: string | undefined, isFocused: boolean, showUnfocusedDescription: boolean) => boolean;
+export declare const buildInputStyle: (styles: string, properties: ErrorControlProperties) => any;
+export {};

package/form/index.d.ts

@@ -0,0 +1,12 @@
+export { default as SelectComponent } from './select/SelectComponent.vue';
+export { default as ControlWrapper } from './core/ControlWrapper.vue';
+export { default as Autocomplete } from './select/AutoComplete.vue';
+export { default as MultiSelect } from './select/MultiSelect.vue';
+export * from './core/styles';
+export * from './core/utils/style';
+export * from './core/properties';
+export { default as Markdown } from './text/Markdown.vue';
+export { default as Checkbox } from './Checkbox.vue';
+export { default as Input } from './Input.vue';
+export { default as InputNumber } from './InputNumber.vue';
+export { default as Textarea } from './Textarea.vue';

package/form/select/AutoComplete.properties.d.ts

@@ -0,0 +1,139 @@
+export declare const AutocompleteProperties: {
+    /** v-model binding */
+    modelValue: {
+        type: (StringConstructor | ObjectConstructor)[];
+        default: string;
+    };
+    /**
+     * HTTP mode: async function that receives the search string and returns
+     * an array of strings or { label, value } objects.
+     * e.g. :fetchOptions="(q) => fetch(`/api/search?q=${q}`).then(r => r.json())"
+     */
+    fetchOptions: {
+        type: FunctionConstructor;
+        default: null;
+    };
+    /** Debounce delay in ms for HTTP mode */
+    debounceMs: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** How many results to show at once */
+    maxResults: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Allow free-text (don't clear input if nothing selected) */
+    freeText: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    options: {
+        type: import('vue').PropType<Array<import('./ListResults.properties').OptionValue>>;
+        required: false;
+    };
+    isLoading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    query: {
+        type: StringConstructor;
+        default: null;
+    };
+    isActive: {
+        type: FunctionConstructor;
+        default: (item: any) => boolean;
+    };
+    labelKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    valueKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    enableCreate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    id: {
+        type: StringConstructor;
+    };
+    placeholder: {
+        type: StringConstructor;
+    };
+    description: {
+        type: StringConstructor;
+    };
+    errors: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isFocused: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isTouched: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideLabel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    styles: {
+        type: import('vue').PropType<import('..').MyStyles>;
+        default: () => {
+            readonly group: {
+                readonly root: "group";
+                readonly label: "text-primary text-lg font-bold";
+                readonly item: "group-item";
+            };
+            readonly verticalLayout: {
+                readonly root: "flex flex-col gap-x-2";
+                readonly item: "w-full";
+            };
+            readonly horizontalLayout: {
+                readonly root: "flex flex-row gap-x-2";
+                readonly item: "w-full";
+            };
+            readonly arrayList: {
+                readonly root: "fieldset";
+                readonly legend: "fieldset-legend text-xl capitalize";
+            };
+            readonly control: {
+                readonly root: "fieldset";
+                readonly wrapper: "fieldset";
+                readonly label: "fieldset-legend";
+                readonly error: "";
+                readonly input: "input";
+                readonly textarea: "input h-32";
+                readonly checkbox: "checkbox";
+                readonly select: "input pr-14";
+                readonly description: "form-control--description label text-xs text-gray-500";
+            };
+            readonly fixedArrayList: {
+                readonly root: "flex flex-row gap-x-2";
+                readonly item: "w-full";
+            };
+        };
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+};