@functionalcms/svelte-components 4.36.9 → 5.0.0-beta1

package/dist/components/form/form.d.ts

@@ -1,8 +1,17 @@
 export declare enum FieldType {
     Input = "input",
+    NumberInput = "number-input",
+    FloatInput = "float-input",
+    PhoneInput = "phone",
     Textarea = "textarea",
     Radio = "radio",
-    Checkbox = "checkbox"
+    Checkbox = "checkbox",
+    Range = "range",
+    Select = "select",
+    MultiSelect = "multi-select",
+    TimePicker = "time-picker",
+    Toggle = "toggle",
+    File = "file"
 }
 export declare enum InputType {
     Text = "text",
@@ -20,26 +29,87 @@ export declare enum InputType {
     Color = "color",
     Textarea = "textarea"
 }
-export declare enum LabelSize {
-    Small = "small",
-    Large = "large",
-    None = ""
-}
-export interface Field {
-    name: string;
-    label?: string;
-    type: FieldType;
-    subType?: InputType;
-    isRequired?: boolean;
+export type FieldDef = {
+    id: string;
+    label: string;
+    class?: string;
+    labelClass?: string;
+    typeOfField: "input" | "textarea" | "select" | "collection" | "phoneInput" | "file" | "timepicker";
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    clearable?: boolean;
+    value: any;
+};
+export type InputField = FieldDef & {
+    size: "md" | "sm" | "lg";
+    icon?: string;
+    addon?: boolean;
     placeholder?: string;
-    options?: Array<{
-        label: string;
-        value: string;
-        checked?: boolean;
+    type: InputType;
+    isFloat?: boolean;
+    floatVariant: "filled" | "outlined" | "standard";
+    typeOfField: "input";
+};
+export type TextareaField = FieldDef & {
+    rows: number;
+    cols: number;
+    placeholder?: string;
+    typeOfField: "textarea";
+};
+export type FilePickerField = FieldDef & {
+    typeOfField: "file";
+    size: "md" | "sm" | "lg";
+};
+export type CollectionField = FieldDef & {
+    items: Array<{
+        name: string;
+        checked: boolean;
     }>;
+    groupName: string;
+    type: "checkbox" | "radio" | "toggle";
+    typeOfField: "collection";
     checked?: boolean;
-}
+};
+export type SelectField = FieldDef & {
+    options: Array<{
+        value: string;
+        label: string;
+    }>;
+    type: "single" | "multiple";
+    typeOfField: "select";
+};
+export type TimePickerField = FieldDef & {
+    typeOfField: "timepicker";
+    size: "md" | "sm" | "lg";
+};
+export type PhoneInputField = FieldDef & {
+    typeOfField: "phoneInput";
+    size: "md" | "sm" | "lg";
+    placeholder?: string;
+};
+export type Field = InputField | TextareaField | CollectionField | SelectField | FilePickerField | TimePickerField | PhoneInputField;
 export declare enum SubmitResult {
     Success = "success",
     Error = "error"
 }
+export declare function createInputField(id: string, label: string, type?: InputType, value?: any, options?: Partial<Omit<InputField, "id" | "label" | "typeOfField" | "type">>): InputField;
+export declare function createTextareaField(id: string, label: string, value?: any, rows?: number, cols?: number, options?: Partial<Omit<TextareaField, "id" | "label" | "typeOfField" | "rows" | "cols">>): TextareaField;
+export declare function createFilePickerField(id: string, label: string, value?: any, options?: Partial<Omit<FilePickerField, "id" | "label" | "typeOfField">>): FilePickerField;
+export declare function createCollectionField(id: string, label: string, items: Array<{
+    name: string;
+    checked: boolean;
+}>, groupName: string, type?: "checkbox" | "radio" | "toggle", value?: any, options?: Partial<Omit<CollectionField, "id" | "label" | "typeOfField" | "items" | "groupName" | "type">>): CollectionField;
+export declare function createSelectField(id: string, label: string, selectOptions: Array<{
+    value: string;
+    label: string;
+}>, type?: "single" | "multiple", value?: any, options?: Partial<Omit<SelectField, "id" | "label" | "typeOfField" | "options" | "type">>): SelectField;
+export declare function createTimePickerField(id: string, label: string, value?: any, options?: Partial<Omit<TimePickerField, "id" | "label" | "typeOfField">>): TimePickerField;
+export declare function createPhoneInputField(id: string, label: string, value?: any, options?: Partial<Omit<PhoneInputField, "id" | "label" | "typeOfField">>): PhoneInputField;
+export type ButtonConfig = {
+    label: string;
+    type: "submit" | "reset" | "button";
+    color?: "primary" | "dark" | "alternative" | "light" | "secondary" | "gray" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "purple" | "pink" | "rose";
+    class?: string;
+    action?: (event: Event) => Promise<void>;
+};

package/dist/components/form/form.js

@@ -1,9 +1,18 @@
 export var FieldType;
 (function (FieldType) {
     FieldType["Input"] = "input";
+    FieldType["NumberInput"] = "number-input";
+    FieldType["FloatInput"] = "float-input";
+    FieldType["PhoneInput"] = "phone";
     FieldType["Textarea"] = "textarea";
     FieldType["Radio"] = "radio";
     FieldType["Checkbox"] = "checkbox";
+    FieldType["Range"] = "range";
+    FieldType["Select"] = "select";
+    FieldType["MultiSelect"] = "multi-select";
+    FieldType["TimePicker"] = "time-picker";
+    FieldType["Toggle"] = "toggle";
+    FieldType["File"] = "file";
 })(FieldType || (FieldType = {}));
 export var InputType;
 (function (InputType) {
@@ -22,14 +31,85 @@ export var InputType;
     InputType["Color"] = "color";
     InputType["Textarea"] = "textarea";
 })(InputType || (InputType = {}));
-export var LabelSize;
-(function (LabelSize) {
-    LabelSize["Small"] = "small";
-    LabelSize["Large"] = "large";
-    LabelSize["None"] = "";
-})(LabelSize || (LabelSize = {}));
 export var SubmitResult;
 (function (SubmitResult) {
     SubmitResult["Success"] = "success";
     SubmitResult["Error"] = "error";
 })(SubmitResult || (SubmitResult = {}));
+// Field initializer functions
+export function createInputField(id, label, type = InputType.Text, value = "", options = {}) {
+    return {
+        id,
+        label,
+        type,
+        value,
+        typeOfField: "input",
+        size: options.size || "md",
+        floatVariant: options.floatVariant || "outlined",
+        ...options
+    };
+}
+export function createTextareaField(id, label, value = "", rows = 3, cols = 30, options = {}) {
+    return {
+        id,
+        label,
+        value,
+        rows,
+        cols,
+        typeOfField: "textarea",
+        ...options
+    };
+}
+export function createFilePickerField(id, label, value = null, options = {}) {
+    return {
+        id,
+        label,
+        value,
+        typeOfField: "file",
+        size: options.size || "md",
+        ...options
+    };
+}
+export function createCollectionField(id, label, items, groupName, type = "checkbox", value = [], options = {}) {
+    return {
+        id,
+        label,
+        value,
+        items,
+        groupName,
+        type,
+        typeOfField: "collection",
+        ...options
+    };
+}
+export function createSelectField(id, label, selectOptions, type = "single", value = type === "single" ? "" : [], options = {}) {
+    return {
+        id,
+        label,
+        value,
+        options: selectOptions,
+        type,
+        typeOfField: "select",
+        ...options
+    };
+}
+export function createTimePickerField(id, label, value = "", options = {}) {
+    return {
+        id,
+        label,
+        value,
+        typeOfField: "timepicker",
+        size: options.size || "md",
+        ...options
+    };
+}
+export function createPhoneInputField(id, label, value = "", options = {}) {
+    return {
+        id,
+        label,
+        value,
+        typeOfField: "phone",
+        size: options.size || "md",
+        ...options
+    };
+}