editorShape

Description

An array of objects containing settings for managing the appearance and functionality of the Editor dialog

Usage

editorShape?: [
    //common parameters for all types
    {
      key: string,
      label?: string,
    },
    
    // for the "text" and "textarea" types 
    {
      key: string,
      label?: string,
      type: "text" | "textarea",
      config?: {
        placeholder: string,
        focus: boolean
      }
    },
    
    // for the "combo", "select" and "multiselect" controls
    {
    key: string,
    label?: string,
    type: "combo" | "select" | "multiselect",
    options?: {
        id: any,
        label?: string
    }[],
    config?: {}
    },

   // for the "slider" type 
   {
    key: string,
    label?: string,
    type: "slider",
    config?: {
    width: number,
    min: number,
    max: number,
    disabled: boolean,
    step: number
            }
    },
   // for the "date" type 
   {
     key: string,
     label?: string,
     type: "date",
     time?: boolean,
     config?: {}
    },
    // for the "counter" type field
    { 
      key: string,
      label?: string,
      type: "counter",
      config?: {
            min: number,
            max: number,
       }
    },
    // for the "link" type 
    {
     key: string,
     label?: string,
     type: "links"
    }
]

Parameters

To configure the editor appearance and functionality, you can specify the following parameters (fields):

Common parameters for all types

• key - (required) the name of the data field (from the task object). The value should be unique for each editor control type and correspond to the field name of the task object in the tasks property.
• label - (optional) the label of the field control
• config - (optional) any configuration object for a control. It can have any property supported by related WX control (e.g. placeholder, focus, etc.)
• type - (required) the editor field type. Here you can specify the following types: select, text, textarea, counter, date, slider, link

Parameters for the "text" and "textarea" types

• type - (required) the editor field type: text or textarea

• key - (required) the name of the data field (from the task object): Text for the text control and Area for the textarea control

• label - (optional) the label of the field control

• config- (optional) any configuration object for a control. The control types that accept it: text, select, combo, textarea, slider. It can have any property supported by related WX control (e.g. placeholder, focus, etc.). Here you can specify the following parameters:

  • placeholder - (optional) a placeholder value
  • focus - (optional) enables/disables the focus
  • disabled - (optional) enables or disables the element

  Example:

<script>
 import { getData } from "./common/data";
 import { Gantt } from "wx-svelte-gantt";
 
 const data = getData();
 const editorShape = [
    {
        key: "Text",
        type: "text",
        label: "Name",
        config: {
            placeholder: "Task name",
            focus: true,
        },
    },      
];

</script>

<Gantt
  tasks={data.tasks}
  links={data.links}
  scales={data.scales}
  columns={data.columns}
  {editorShape} />

Parameters for the "combo", "select" and "multiselect" controls

• type - (required) the editor field type: "combo" | "select" | "multiselect",
• key - (required) the name of the data field (from the task object): Combo
• label - (optional) the label of the field control
• options - (optional) an array of objects with the next parameters for each option object: -id - (required) the option ID
  • label - (optional) the label for an option
• config - (optional) any configuration object for a control. It can have any property supported by related WX control (e.g. placeholder, focus, etc.)

Example:

<script>
  import { getData } from "./common/data";
  import { Gantt } from "wx-svelte-gantt";
  
  const data = getData();
  
  const editorShape = [
    {
        key: "Combo",
        type: "select",
        label: "Type",
    },      
];

</script>

<Gantt
  tasks={data.tasks}
  links={data.links}
  scales={data.scales}
  columns={data.columns}
  {editorShape} />

Parameters for the "slider" type

• type - (required) the editor field type: slider
• key - (required) the name of the data field (from the task object): Slider
• label - (optional) the label of the field control
• config- (optional) any configuration object for a control. The control types that accept it: text, select, combo, textarea, slider. It can have any property supported by related WX control (e.g. placeholder, focus, etc.). You can specify the following parameters:
  • width - (optional) slider width in pixels
  • min - (optional) min task progress in a percentage value
  • max - (optional) max task progress in a percentage value
  • disabled - (optional) enables or disables the slider; if false (default), the slider is enabled

Example:

<script>
  import { getData } from "./common/data";
  import { Gantt } from "wx-svelte-gantt";
  
  const data = getData();
  
  const editorShape = [
    {
        key: "Slider",
        type: "slider",
        label: "Progress",
    },      
];

</script>

<Gantt
  tasks={data.tasks}
  links={data.links}
  scales={data.scales}
  columns={data.columns}
  {editorShape} />

Parameters for the "date" type

• type - (required) the editor field type: date
• key- (required) the name of the data field (from the task object): DatePicker
  • start_date - (required) the start date key
  • end_date - (required) the end date key
• label - (optional) the label of the field control
• time - (optional) set to true to show time; if false, time value is not shown

Example:

<script>
  import { getData } from "./common/data";
  import { Gantt } from "wx-svelte-gantt";
  
  const data = getData();
  
  const editorShape = [
    {
        key: "DatePicker",
        type: "date",
        label: "Start date",
    },
        
    {
        key: "DatePicker",
        type: "date",
        label: "End date",
    },      
];

</script>

<Gantt
  tasks={data.tasks}
  links={data.links}
  scales={data.scales}
  columns={data.columns}
  {editorShape} />

Parameters for the "counter" type

• type - (required) the editor field type: counter

• key - (required) the name of the data field (from the task object): Counter

• label - (optional) the label of the field control

• config- (optional) any configuration object for a control. The control types that accept it: text, select, combo, textarea, slider. It can have any property supported by related WX control (e.g. placeholder, focus, etc.) Here you can specify the following parameters:

  • min - (optional) min task duration value in days
  • max - (optional) max task duration value in days

  Example:

<script>
  import { getData } from "./common/data";
  import { Gantt } from "wx-svelte-gantt";
  
  const data = getData();
  
  const editorShape = [
    {
        key: "Counter",
        type: "counter",
        label: "Duration",
        config: {
            min: 1,
            max: 100,
        }
    },      
    ];

</script>

<Gantt
  tasks={data.tasks}
  links={data.links}
  scales={data.scales}
  columns={data.columns}
  {editorShape} />

Parameters for the "link" type

• type - (required) the editor field type: link
• key - (required) the name of the data field (from the task object): links table

Default config

[
    {
        key: "text",
        type: "text",
        label: "Name",
        config: {
            placeholder: "Add task name",
            focus: true,
        },
    },
    {
        key: "details",
        type: "textarea",
        label: "Description",
        config: {
            placeholder: "Add description",
        },
    },
    {
        key: "type",
        type: "select",
        label: "Type",
    },
    {
        key: "start",
        type: "date",
        label: "Start date",
    },
    {
        key: "end",
        type: "date",
        label: "End date",
    },
    {
        key: "duration",
        type: "counter",
        label: "Duration",
        config: {
            min: 1,
            max: 100,
        },
    },
    {
        key: "progress",
        type: "slider",
        label: "Progress",
    },
    {
        key: "links",
        type: "links",
    },
];