@golemui/gui-shared 0.0.2 → 0.12.1

package/lib/widget.props.d.ts

@@ -15,17 +15,22 @@ export type AccordionProps = {
     }[];
 };
 export type ButtonProps = {
-    variant?: 'filled' | 'outlined';
+    variant?: 'filled' | 'outlined' | 'link';
+    icon?: string;
+    iconPosition?: 'left' | 'right';
 };
+export type Autocomplete = 'on' | 'off' | (string & {});
 export type TextinputProps = {
     hint?: string;
     placeholder?: string;
     icon?: string;
+    autocomplete?: Autocomplete;
 };
 export type PasswordProps = {
     hint?: string;
     placeholder?: string;
     icon?: string;
+    autocomplete?: Autocomplete;
     showPasswordIcon?: string;
     hidePasswordIcon?: string;
     showPasswordLabel?: string;
@@ -39,16 +44,49 @@ export type CurrencyProps = {
     hint?: string;
     placeholder?: string;
     icon?: string;
+    autocomplete?: Autocomplete;
 };
 export type TextareaProps = {
     hint?: string;
     placeholder?: string;
-    icon?: string;
+    autocomplete?: Autocomplete;
     counterMode?: 'remaining' | 'current';
     minimumHeight?: number;
     autoGrow?: boolean;
     maxLength?: number;
 };
+type MarkdownButtons = 'H' | 'B' | 'I' | 'S' | 'Q' | 'L' | 'OL' | 'UL' | '|';
+export type MarkdownProps = {
+    /**
+     * A collection of markdown-style formatting tokens.
+     * * @remarks
+     * Each token corresponds to a specific text decoration:
+     * - **H**: Heading -> `### Title`
+     * - **B**: Bold -> `**some text**`
+     * - **I**: Italic -> `_some text_`
+     * - **S**: Strikethrough -> `~~strikethrough~~`
+     * - **Q**: Quote -> `> some text`
+     * - **L**: Link -> `[some text](url)`
+     * - **NL**: Ordered list -> `1. some text`
+     * - **UL**: Unordered list -> `- some text`
+     * - **|**: Separator -> `|`
+     * * @example
+     * ```ts
+     * const toolbar = ['H', 'B', 'I', 'S', 'Q', 'L', '|', 'OL', 'UL'];
+     * ```
+     */
+    tools?: MarkdownButtons[];
+    headingTitle?: string;
+    boldTitle?: string;
+    italicTitle?: string;
+    strikethroughTitle?: string;
+    quoteTitle?: string;
+    linkTitle?: string;
+    orderedListTitle?: string;
+    unorderedListTitle?: string;
+    splitViewTitle?: string;
+    defaultOpenPreview?: boolean;
+} & TextareaProps;
 export type CalendarProps = {
     /**
      * An optional descriptive text providing guidance or information about the associated field or functionality.
@@ -212,14 +250,25 @@ export type RangeCalendarProps = {
      * Default is 1.
      */
     numberOfMonths?: number;
+    /**
+     * An optional string used as the ARIA label prefix for the remove button on each date range pill.
+     */
+    removePillAriaLabel?: string;
 };
 export type DateinputProps = {
     hint?: string;
     icon?: string;
 };
+export type RangeDateInputProps = {
+    hint?: string;
+    icon?: string;
+    separator?: string;
+    removePillAriaLabel?: string;
+    startDateAriaLabel?: string;
+    endDateAriaLabel?: string;
+};
 export type DatePickerProps = {
     hint?: string;
-    placeholder?: string;
     icon?: string;
     prevMonthIcon?: string;
     nextMonthIcon?: string;
@@ -228,10 +277,34 @@ export type DatePickerProps = {
     dayFormat?: 'numeric' | '2-digit';
     weekdayFormat?: 'short' | 'long' | 'narrow';
     monthFormat?: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow';
+    minDate?: string;
+    maxDate?: string;
+    disabledRanges?: DateRange[];
+    numberOfMonths?: number;
+};
+export type RangeDatePickerProps = {
+    hint?: string;
+    icon?: string;
+    separator?: string;
+    removePillAriaLabel?: string;
+    startDateAriaLabel?: string;
+    endDateAriaLabel?: string;
+    prevMonthIcon?: string;
+    nextMonthIcon?: string;
+    prevMonthAriaLabel?: string;
+    nextMonthAriaLabel?: string;
+    dayFormat?: 'numeric' | '2-digit';
+    weekdayFormat?: 'short' | 'long' | 'narrow';
+    monthFormat?: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow';
+    minDate?: string;
+    maxDate?: string;
+    disabledRanges?: DateRange[];
+    numberOfMonths?: number;
 };
 export type NumberinputProps = {
     placeholder?: string;
     hint?: string;
+    autocomplete?: Autocomplete;
     step?: number;
     minimum?: number;
     maximum?: number;
@@ -249,6 +322,9 @@ export type AlertProps = {
     text: string;
     level?: 'default' | 'info' | 'success' | 'warning' | 'error';
 };
+export type MarkdownTextProps = {
+    md: string;
+};
 /**
  * Non-serializable component props. Used to render the provided component.
  * @template ComponentType Framework-dependent type for the component. e.g. ReactNode, Type<any>
@@ -271,6 +347,9 @@ export type RepeaterProps<Template> = {
     removeLabel?: string;
     limit?: number;
     template: Template;
+    title?: string;
+    addButtonIcon?: string;
+    removeButtonIcon?: string;
 };
 export type OptionValue = string | number;
 export type Option = {
@@ -280,6 +359,7 @@ export type Option = {
 export type SelectProps = {
     hint?: string;
     icon?: string;
+    autocomplete?: Autocomplete;
     options: Option[];
     placeholder?: string;
     labelField?: string;
@@ -293,6 +373,7 @@ type ItemKeys<T> = T extends Record<string, any> ? keyof T : string;
 export type DropdownProps<T> = {
     placeholder?: string;
     hint?: string;
+    autocomplete?: Autocomplete;
     items: ListItem<T>[];
     /**
      * Property widget used to display in the input when an item option is selected
@@ -314,7 +395,8 @@ export type DropdownProps<T> = {
 export type ListProps<T> = {
     hint?: string;
     items: ListItem<T>[];
-    valueField?: string;
+    labelField?: ItemKeys<T>;
+    valueField?: ItemKeys<T>;
     height?: number;
     itemHeight?: number;
     /**
@@ -327,19 +409,29 @@ export type RadiogroupProps = {
     options: Option[];
     labelField?: string;
     valueField?: string;
+    direction?: 'row' | 'column';
 };
 export type OneOfProps = {
     labelField?: string;
     valueField?: string;
 };
 export type FlexProps = {
-    direction?: 'horizontal' | 'vertical';
-    align?: 'center' | 'start' | 'end' | 'space-between' | 'space-around';
+    direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+    justify?: 'center' | 'start' | 'end' | 'stretch';
+    align?: 'center' | 'start' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
     gap?: number;
 };
+export type GridProps = {
+    direction?: 'row' | 'column';
+    columnGap?: number;
+    rowGap?: number;
+    autoFit?: boolean;
+    align?: 'center' | 'start' | 'end' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch';
+    justify?: 'center' | 'start' | 'end' | 'stretch';
+};
 export type TabsProps = {
     defaultOpen?: string;
-    renderMode: 'all' | 'activeOnly';
+    renderMode?: 'all' | 'activeOnly';
     tabs: {
         label: string;
         uid: string;

package/lib/widgets.d.ts

@@ -1,10 +1,10 @@
-export declare const inputWidgets: readonly ["calendar", "checkbox", "currency", "dateInput", "datePicker", "dropdown", "list", "number", "password", "radiogroup", "rangeCalendar", "repeater", "select", "textarea", "textinput", "toggle"];
-export declare const layoutWidgets: readonly ["accordion", "flex", "tabs"];
-export declare const displayWidgets: readonly ["alert", "renderer"];
+export declare const inputWidgets: readonly ["calendar", "checkbox", "currency", "dateInput", "datePicker", "dropdown", "list", "markdown", "number", "password", "radiogroup", "rangeCalendar", "rangeDateInput", "rangeDatePicker", "repeater", "select", "textarea", "textinput", "toggle"];
+export declare const layoutWidgets: readonly ["accordion", "flex", "grid", "tabs"];
+export declare const displayWidgets: readonly ["alert", "markdownText", "renderer"];
 export declare const actionWidgets: readonly ["button"];
-export declare const vanillaWidgets: ("number" | "flex" | "repeater" | "accordion" | "alert" | "button" | "calendar" | "checkbox" | "currency" | "dateInput" | "datePicker" | "dropdown" | "list" | "password" | "radiogroup" | "rangeCalendar" | "select" | "tabs" | "textarea" | "textinput" | "toggle" | "renderer")[];
-export type VanillaInputWidget = (typeof inputWidgets)[number];
-export type VanillaLayoutWidget = (typeof layoutWidgets)[number];
-export type VanillaDisplayWidget = (typeof displayWidgets)[number];
-export type VanillaActionWidget = (typeof actionWidgets)[number];
-export type VanillaWidget = (typeof vanillaWidgets)[number];
+export declare const golemWidgets: ("number" | "flex" | "repeater" | "button" | "password" | "checkbox" | "dateInput" | "currency" | "rangeCalendar" | "select" | "radiogroup" | "tabs" | "list" | "datePicker" | "dropdown" | "markdown" | "rangeDateInput" | "rangeDatePicker" | "textarea" | "calendar" | "grid" | "toggle" | "textinput" | "renderer" | "alert" | "accordion" | "markdownText")[];
+export type GolemInputWidget = (typeof inputWidgets)[number];
+export type GolemLayoutWidget = (typeof layoutWidgets)[number];
+export type GolemDisplayWidget = (typeof displayWidgets)[number];
+export type GolemActionWidget = (typeof actionWidgets)[number];
+export type GolemWidget = (typeof golemWidgets)[number];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@golemui/gui-shared",
-  "version": "0.0.2",
+  "version": "0.12.1",
   "type": "module",
   "main": "./index.umd.cjs",
   "module": "./index.js",
@@ -20,7 +20,12 @@
     "*.md"
   ],
   "dependencies": {
-    "@golemui/core": "*",
-    "@golemui/gui-validators": "*"
+    "@golemui/core": "0.12.1",
+    "@golemui/gui-validators": "0.12.1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/golemui/golemui.git",
+    "directory": "libs/gui/shared"
   }
 }

package/lib/middleware/json-schema-vanilla.d.ts

@@ -1,2 +0,0 @@
-import * as Core from '@golemui/core';
-export declare const vanillaSchemaToFieldMap: <V>(validators: Core.JsonSchemaValidators<V>) => Core.SchemaToWidgetMap;