SVAR

https://docs.svar.dev/
Admin
SVAR is a collection of feature-rich UI component libraries for Svelte, React, and Vue that includes...
Tokens:3,263,954
Snippets:25,864
Trust Score:8
Update:1 day ago
Show doc for...
Tokens:
Raw
### Example dataset for getOptions

Source: https://docs.svar.dev/react/filter/api/helpers/getoptions-helper/

Sample dataset used in the examples. Contains objects with first_name, age, and start date fields.

```jsx
[
  { first_name: "Alex", age: 26,start: new Date(2025, 0, 3) },
  { first_name: "Alex", age: 45, start: new Date(2025, 2, 13) },
  { first_name: "Agata", age: 35, start: new Date(2024, 2, 8) },
]
```

--------------------------------

### MenuBar Initialization

Source: https://docs.svar.dev/vue/core/menu/menubar/api/

Example of initializing the MenuBar component with options in a Vue script setup.

```APIDOC
## MenuBar Initialization

### Description
Initializes the MenuBar component with a set of options.

### Code Example
```ts
<script setup>
  import { MenuBar } from "@svar-ui/vue-menu";

  import { getOptions } from "./data";

  const options = getOptions();
</script>

<template>
  <MenuBar :options="options"></MenuBar>
</template>
```
```

--------------------------------

### Example with mode switching and project dates

Source: https://docs.svar.dev/react/gantt/guides/scheduling/critical-path/

Example showing how to set the critical path mode and provide `projectStart` and `projectEnd` props, which influence strict calculations. The mode is set to "flexible" and project dates are provided.

```jsx
import { useState } from "react";
import { Gantt } from "@svar/react-gantt";
import { getData } from "./data";

const data = getData("critical");

function App() {
  const [api, setApi] = useState(null);
  const mode = "flexible";
  const projectStart = new Date(2024, 3, 2);
  const projectEnd = new Date(2024, 3, 12);

  return (
    <Gantt
      tasks={data.tasks}
      links={data.links}
      scales={data.scales}
      criticalPath={{ type: mode }}
      projectStart={projectStart}
      projectEnd={projectEnd}
    />
  );
}
```

--------------------------------

### Vue component example using getFile()

Source: https://docs.svar.dev/vue/filemanager/api/methods/getFile/

Vue 3 script setup example showing how to use the Filemanager component and call getFile() to get the name of the selected file.

```html
<script setup>
  import { Filemanager } from "@svar-ui/vue-filemanager";
  import { getData } from "./common/data";
  import { ref } from "vue";

  const api = ref(null);

  function logSelection() {
    const id = api.value.getState().selected[0]; // get selected id
    alert(api.value.getFile(id).name); // show the file name
  }
</script>

<template>
  <Filemanager
    ref="api"
    :onselect-file="logSelection" />
</template>
```

--------------------------------

### Example: Output DataStore to Console

Source: https://docs.svar.dev/vue/filemanager/api/methods/getStores/

An example showing how to use api.getStores() within the init callback of the Filemanager component to log the DataStore to the console.

```html
<script setup>
  import { Filemanager } from "@svar-ui/vue-filemanager";
  import { getData, getDrive } from "./common/data";

  function init(api){
    const stores = api.getStores();
    console.log("DataStore:", stores);
  }
</script>

<template>
  <Filemanager :data="getData()" :drive="getDrive()" :init="init" />
</template>
```

--------------------------------

### GET /tasks Response Example

Source: https://docs.svar.dev/react/gantt/api/rest-routes/get-tasks/

Example JSON response returned by the GET /tasks route. It contains an array of task objects with fields like id, text, start, end, duration, progress, parent, type, and lazy. The HTTP status code 200 indicates success, while 500 indicates failure.

```json
[
   {
      "id": 20,
      "text": "New Task",
      "start": "2024-06-21 00:00:00",
      "end": "2024-06-22 00:00:00",
      "duration": 1,
      "progress": 2,
      "parent": 0,
      "type": "task",
      "lazy": false
   },
   {
      "id": 47,
      "text": "[1] Master project",
      "start": "2024-06-10 00:00:00",
      "end": "2024-06-18 00:00:00",
      "duration": 8,
      "progress": 0,
      "parent": 0,
      "type": "summary",
      "lazy": true
   },
   {
      "id": 21,
      "text": "New Task",
      "start": "2024-06-13 00:00:00",
      "end": "2024-06-14 00:00:00",
      "duration": 1,
      "progress": 0,
      "parent": 20,
      "type": "task",
      "lazy": false
   }
]
```

--------------------------------

### Get current value with `v-model:value` and ref variable

Source: https://docs.svar.dev/vue/core/segmented/

Bind a ref variable to the `value` property using `v-model:value` to get the current selected segment. The variable can have an initial value. This example shows the setup script and the template separately.

```ts
<script setup>
  import { ref } from "vue";
  import { Segmented } from "@svar-ui/vue-core";

  const dataset = [
    { id: 1, label: "One"},
    { id: 2, label: "Two"},
    { id: 3, label: "Three"},
  ];

  const segment = ref(2);
</script>
```

```ts
<Segmented :options="dataset" v-model:value="segment" />
```

--------------------------------

### Handle open-file and download-file actions with backend data

Source: https://docs.svar.dev/svelte/filemanager/guides/open_download/

Complete example showing how to initialize the Filemanager, listen to 'download-file' and 'open-file' actions to open or download files, and handle 'request-data' to load file data from a backend server. Requires a backend endpoint that returns file data and supports direct download links.

```html
<script>
  import { Filemanager } from "@svar-ui/svelte-filemanager";

  const server = "https://some-backend-url";

  function getLink(id, download) {
    return server + "/direct?id=" + encodeURIComponent(id) + (download ? "&download=true" : "");
  }

  function loadData(id, api) {
    fetch(server + "/files/" + encodeURIComponent(id))
      .then((data) => data.json())
      .then((data) => {
        api.exec("provide-data", {
          id,
          data,
        });
      });
  }

  let rawData = $state([]);
  fetch(server + "/files")
    .then((data) => data.json())
    .then((data) => (rawData = data));

  const init = (api) => {
    api.on("download-file", (ev) => {
      window.open(getLink(ev.id, true), "_self");
    });

    api.on("open-file", (ev) => {
      window.open(getLink(ev.id), "_blank");
    });

    api.on("request-data", ({ id }) => loadData(id, api));
  }

</script>

<Filemanager {init} data={rawData} />
```

--------------------------------

### Initialization

Source: https://docs.svar.dev/react/core/menu/contextmenu/api/

Example of initializing the ContextMenu component with options.

```APIDOC
## Initialization

```tsx
import { useState } from "react";
import { ContextMenu } from "@svar-ui/react-menu";

import { getOptions } from "./data";

export default function Example() {
  const [options] = useState(() => getOptions());

  return <ContextMenu options={options} />;
}
```
```

--------------------------------

### Start from default CardShape and adjust

Source: https://docs.svar.dev/vue/kanban/core-features/cards/

Use `getCardShape()` to get the default shape (enables `priority`, `progress`, `description`, `deadline`, and `tags`) and spread it into a new object to add or override sections. This example adds `users` and `menu`.

```vue
<script setup>
  import { Kanban, getCardShape } from "@svar-ui/vue-kanban";

  const card = { ...getCardShape(), users: { data: users }, menu: true };
</script>

<template>
  <Kanban :cards="cards" :columns="columns" :card="card" />
</template>
```

--------------------------------

### Example: Output DataStore to console

Source: https://docs.svar.dev/svelte/filemanager/api/methods/getStores/

Example demonstrating how to use api.getStores() within an init function to log the DataStore to the console. Requires importing Filemanager from '@svar-ui/svelte-filemanager' and getData/getDrive from './common/data'.

```html
<script>
  import { Filemanager } from "@svar-ui/svelte-filemanager";
  import { getData, getDrive } from "./common/data";

  function init(api){
    const stores = api.getStores();
    console.log("DataStore:", stores);
  }
</script>

<Filemanager data={getData()} drive={getDrive()} {init} />
```

--------------------------------

### Get current state of TwoState button with v-model:value

Source: https://docs.svar.dev/vue/core/twostate/

Bind a ref variable to the value property of the TwoState control using v-model:value. The variable updates on each state change. The example shows the script setup and template parts.

```ts
<script setup>
  import { ref } from "vue";
  import { TwoState } from "@svar-ui/vue-core";

  const state = ref(true);
</script>
```

```html
<template>
  <TwoState v-model:value="state" />
</template>
```

--------------------------------

### JSX example using start property in Gantt

Source: https://docs.svar.dev/react/gantt/api/properties/start/

Shows how to import the Gantt component and data, then render a Gantt with the `start` property set to a new Date. The example uses `new Date(2023, 2, 1)` as the start date.

```jsx
import { getData } from "./common/data";
import { Gantt } from "@svar-ui/react-gantt";

const data = getData();

export default function App() {
  return (
    <Gantt
      tasks={data.tasks}
      start={new Date(2023, 2, 1)} />
  );
}
```

--------------------------------

### Toolbar configuration example

Source: https://docs.svar.dev/svelte/gantt/api/toolbar/

Example of configuring the Toolbar with custom items and passing the api object.

```svelte
<script>
  import { getData } from "../data";
  import { Gantt, Toolbar } from "@svar-ui/svelte-gantt";

  let api = $state();
  const data = getData();

  const items = [
   {
    id: "add-task",
    comp: "button",
    icon: "wxi-plus",
    text: "Add task",
    type: "primary",
   },
   {
    id: "edit-task",
    comp: "button",
    icon: "wxi-edit",
    text: "edit",
    type: "link",
   },
  ];
</script>

<Toolbar {api} {items} />

<Gantt bind:this={api} tasks={data.tasks} />
```

--------------------------------

### Object Form Example

Source: https://docs.svar.dev/react/kanban/api/properties/column-accessor/

Example using an object with get and set callbacks to derive column membership from the 'priority' field. The get callback returns the priority, and the set callback updates it.

```jsx
import { Kanban } from "@svar-ui/react-kanban";

const cards = [
  { id: 1, label: "Task A", priority: 1 },
  { id: 2, label: "Task B", priority: 3 },
];

const columns = [
  { id: 1, label: "Low" },
  { id: 2, label: "Medium" },
  { id: 3, label: "High" },
];

const columnAccessor = {
  get: (card) => card.priority,
  set: (card, value) => ({ ...card, priority: value }),
};

function App() {
  return <Kanban cards={cards} columns={columns} columnAccessor={columnAccessor} />;
}
```

--------------------------------

### Initialization

Source: https://docs.svar.dev/react/core/textarea/api/

Shows how to import and render the TextArea component with minimal configuration.

```APIDOC
## Initialization

### Description
Import the TextArea component from @svar-ui/react-core and render it with minimal configuration.

### Code Example
```tsx
import { TextArea } from "@svar-ui/react-core";

// minimal configuration for initialization
<TextArea />
```
```

--------------------------------

### Example Return Values for onchange

Source: https://docs.svar.dev/svelte/core/rangecalendar/api/events/change/

JavaScript comments showing example return values of the onchange handler. The first shows when only the start date is selected, the second when both start and end dates are selected.

```js
// when the end date of the range isn't selected:
{start: Tue Mar 08 2022 00:00:00 GMT+0300 , end: null}
// when both start and end dates of the range are selected:
{start: Tue Mar 08 2022 00:00:00 GMT+0300 , end: Thu Apr 07 2022 00:00:00 GMT+0300 }
```

--------------------------------

### ActionMenu Initialization

Source: https://docs.svar.dev/react/core/menu/actionmenu/api/

Example of importing and rendering the ActionMenu component with options.

```APIDOC
## ActionMenu Initialization

### Description
Import the ActionMenu component from @svar-ui/react-menu and render it with an options array.

### Code Example
```tsx
import { ActionMenu } from "@svar-ui/react-menu";
import { getOptions } from "./data";

const options = getOptions();

export default function App() {
  return <ActionMenu options={options} />;
}
```
```

--------------------------------

### Header menu example hiding start and duration columns

Source: https://docs.svar.dev/react/gantt/guides/grid/columns/

Shows a complete example of adding a header menu to the grid columns and making it possible to hide the "start" and "duration" columns. The columns prop on HeaderMenu is set to { start: true, duration: true }.

```jsx
import { useState } from "react";
import { getData } from "../data";
import { Gantt, HeaderMenu } from "@svar-ui/react-gantt";

function App() {
  const data = getData();
  const columns = { start: true, duration: true };
  const [api, setApi] = useState(null);

  return (
    <HeaderMenu api={api} columns={columns}>
      <Gantt
        ref={setApi}
        tasks={data.tasks}
        links={data.links}
        scales={data.scales}
      />
    </HeaderMenu>
  );
}
```

--------------------------------

### Example Dataset

Source: https://docs.svar.dev/svelte/filter/api/helpers/getoptions-helper/

A sample data array used in the examples below, containing objects with first_name, age, and start date fields.

```jsx
[
  { first_name: "Alex", age: 26, start: new Date(2025, 0, 3) },
  { first_name: "Alex", age: 45, start: new Date(2025, 2, 13) },
  { first_name: "Agata", age: 35, start: new Date(2024, 2, 8) },
]
```

--------------------------------

### Example: Output DataStore to console

Source: https://docs.svar.dev/react/filemanager/api/methods/getstores/

Example showing how to use api.getStores() within the init callback of the Filemanager component to log the DataStore to the console.

```jsx
import { Filemanager } from "@svar-ui/react-filemanager";
import { getData, getDrive } from "./common/data";

function App() {
  function init(api) {
    const stores = api.getStores();
    console.log("DataStore:", stores);
  }

  return <Filemanager data={getData()} drive={getDrive()} init={init} />;
}
```

--------------------------------

### Basic Filemanager recipe

Source: https://docs.svar.dev/skills/guides/svar-react-filemanager.md

Shows the minimal setup for the Filemanager component with sample data and drive usage. Wrap the component in a Willow provider for theming.

```jsx
import { Filemanager, Willow } from "@svar-ui/react-filemanager";

function BasicFm() {
	const data = [
		{ id: "/Code", type: "folder", date: new Date(2023, 11, 2, 17, 25) },
		{ id: "/Code/Button.js", type: "file", size: 1177, date: new Date() },
	];

	const drive = {
		used: 15200000000,
		total: 50000000000,
	};

	return (
		<Willow>
			<Filemanager data={data} drive={drive} />
		</Willow>
	);
}
```

--------------------------------

### Icon Initialization

Source: https://docs.svar.dev/react/core/icon/api/

Shows how to import and initialize the Icon component with minimal configuration.

```APIDOC
## Icon Initialization

### Description
Initializes the Icon component with minimal configuration.

### Import
```jsx
import { Icon } from "@svar-ui/react-core";
```

### Usage
```jsx
<Icon />
```

```

--------------------------------

### HeaderMenu example hiding start and duration columns

Source: https://docs.svar.dev/react/gantt/guides/grid/header-menu/

Complete example that adds a header menu to the grid columns and makes it possible to hide the 'start' and 'duration' columns. It uses useState to manage the api reference and defines a columns object with start and duration set to true. The Gantt component receives tasks, links, and scales from getData().

```jsx
import { useState } from "react";
import { getData } from "../data";
import { Gantt, HeaderMenu } from "@svar-ui/react-gantt";

const data = getData();
const columns = { start: true, duration: true };

function App() {
  const [api, setApi] = useState(null);

  return (
    <HeaderMenu api={api} columns={columns}>
      <Gantt
        ref={setApi}
        tasks={data.tasks}
        links={data.links}
        scales={data.scales}
      />
    </HeaderMenu>
  );
}
```

--------------------------------

### ContextMenu example with button type menu items

Source: https://docs.svar.dev/react/grid/helpers/components/contextmenu/

Full example showing how to wrap a Grid with ContextMenu, define menu options with 'button' type and subtext, and attach the Grid instance via a ref.

```jsx
import { useRef } from "react";
import { getData } from "../data";
import { Grid, ContextMenu } from "@svar-ui/react-grid";

const data = getData();

const options = [
  {
    id: "add:before",
    subtext: "Add before",
    icon: "wxi-table-row-plus-before",
    type: "button",
  },
  {
    id: "add:after",
    subtext: "Add after",
    icon: "wxi-table-row-plus-after",
    type: "button",
  },
  { type: "separator" },
  { id: "copy", subtext: "Copy", type: "button", icon: "wxi-content-copy" },
  { type: "separator" },
  { id: "delete", type: "button", subtext: "Delete", icon: "wxi-delete-outline" },
];

export default function Example() {
  // `tableRef` will be attached to the Grid instance. Pass the instance (or ref) as `api`.
  const tableRef = useRef(null);

  // `columns` should be defined elsewhere in your code
  const columns = [/* ... */];

  return (
    <ContextMenu api={tableRef.current} options={options}>
      <Grid data={data} columns={columns} ref={tableRef} />
    </ContextMenu>
  );
}
```

--------------------------------

### Combo dropdown example

Source: https://docs.svar.dev/svelte/core/combo/api/props/dropdown/

Example usage of the dropdown prop in a Combo component, setting position to bottom, align to start, and trackScroll to true.

```ts
<Combo
  options={users}
  textField="label"
  dropdown={{ 
    position: "bottom",
    align: "start",
    trackScroll: true
   }}
/>
```

--------------------------------

### init(api) - API setup

Source: https://docs.svar.dev/skills/guides/svar-react-filemanager.md

Called once after initial store setup for first-time API setup. The api object exposes public methods for interacting with the filemanager.

```APIDOC
## init(api)

### Description
Called once after initial store setup for first-time API setup. The `api` object exposes public methods for interacting with the filemanager.

### Parameters
- **api** (object) - Required - The API object with methods: `exec`, `on`, `intercept`, `detach`, `setNext`, `getState`, `getReactiveState`, `getStores`, `getFile`, and `serialize`.

### Usage
```js
init(api);
```
```

--------------------------------

### Button with icon prop example

Source: https://docs.svar.dev/svelte/core/button/api/props/icon/

Example usage of the `icon` prop on a Button component. The icon name must start with the `wxi-` prefix.

```Svelte
<Button type={"primary"} icon="wxi-alert"></Button>
```

--------------------------------

### MenuBar Initialization

Source: https://docs.svar.dev/react/core/menu/menubar/api/

Shows how to import and render the MenuBar component with options.

```APIDOC
## MenuBar Initialization

### Description
Initializes the MenuBar component with a set of options.

### Code Example
```tsx
import { MenuBar } from "@svar-ui/react-menu";
import { getOptions } from "./data";

const options = getOptions();

<MenuBar options={options} />
```

```

--------------------------------

### FilterEditor with predicate example

Source: https://docs.svar.dev/react/filter/api/filter/properties/filtereditor-predicate/

Example usage of FilterEditor with the `predicate` property set to 'month', extracting the month part of the 'start' date field.

```jsx
import { getData } from "../data";
import { Field } from "@svar-ui/react-core";
import { FilterEditor, getOptions } from "@svar-ui/react-filter";

export default function PredicateExample() {
  const { data } = getData();

  return (
    `<Field label="Filter with 'month' predicate">`
      `<FilterEditor
        field="start"
        options={getOptions(data, "start", { predicate: "month" })}
        type="number"
        filter="less"
        value="10"
        predicate="month"
      />`
    </Field>
  );
}
```

--------------------------------

### MenuBar Initialization

Source: https://docs.svar.dev/svelte/core/menu/menubar/api/

Shows how to import and initialize the MenuBar component with options.

```APIDOC
## MenuBar Initialization

### Description
Initializes the MenuBar component with a set of options.

### Code Example
```ts
<script>
  import { MenuBar } from "@svar-ui/svelte-menu";
  
  import { getOptions } from "./data";
  
  const options = getOptions();
</script>
  
<MenuBar {options}></MenuBar>
```
```

--------------------------------

### start prop

Source: https://docs.svar.dev/vue/core/rangecalendar/api/props/start/

Optional. Sets the start date of a range in RangeCalendar. The prop is of type `Date` and is used in a Vue template as shown in the example.

```APIDOC
## start

### Description
Optional. Sets the start date of a range in RangeCalendar.

### Usage
```ts
start?: Date;
```

### Example
```vue
<template>
  <RangeCalendar
    :start="new Date(2022, 1, 18)"
    :end="new Date(2022, 11, 22)" />
</template>
```

```

--------------------------------

### Example: loading extra info from server

Source: https://docs.svar.dev/svelte/filemanager/api/properties/extraInfo/

Shows how to use the extraInfo property to fetch additional information from a server for folders and JPG files, formatting the size for folders.

```html
<script>
  import { Filemanager } from "@svar-ui/svelte-filemanager";
  import { formatSize } from "@svar-ui/svelte-filemanager";

  const server = "https://some-backend-url";


  let rawData = $state([]);
  fetch(server + "/files")
      .then((data) => data.json())
      .then((data) => (rawData = data));

  function requestInfo(file) {
    if (file.type == "folder" || file.ext == "jpg") {
      return fetch(server + "/info/" + encodeURIComponent(file.id)).then((data) => {
        if (data.ok) {
          return data.json().then((d) => {
            if (file.type == "folder") d.Size = formatSize(d.Size);
            return d;
          });
        }
      });
    }
  }

</script>

<Filemanager data={rawData} extraInfo={requestInfo} />
```

--------------------------------

### Svelte example: FilterEditor with date range value

Source: https://docs.svar.dev/svelte/filter/api/filter/properties/filtereditor-value/

Example of using the FilterEditor component with a `value` property set to a date range object. It imports `getData` and `FilterEditor`, and sets the field to 'start', type to 'date', filter to 'between', and provides start and end dates.

```svelte
<script>
  import { getData } from "./common/data";
  import { FilterEditor } from "@svar-ui/svelte-filter";

  const { options, value } = getData();
</script>

<FilterEditor
  {options}
  field="start"
  type="date"
  filter="between"
  value={{
    start:new Date(2023, 0, 1), 
    end:new Date(2023, 11, 31)
  }}
/>
```

--------------------------------

### FilterEditor with predicate example

Source: https://docs.svar.dev/vue/filter/api/filter/properties/filtereditor-predicate/

Vue component example showing FilterEditor with `predicate="month"` to filter by the month part of the `start` field.

```vue
<script setup>
  import { getData } from "../data";
  import { Field } from "@svar-ui/vue-core";
  import { FilterEditor, getOptions } from "@svar-ui/vue-filter";

  const { data } = getData();
</script>

<template>
  <Field label="Filter with 'month' predicate">
    <FilterEditor
      field="start"
      :options="getOptions(data, 'start', { predicate: 'month' })"
      type="number"
      filter="less"
      value="10"
      predicate="month"
    />
  </Field>
</template>
```

--------------------------------

### HeaderMenu example with Grid

Source: https://docs.svar.dev/react/grid/helpers/components/headermenu/

Full example showing how to use HeaderMenu with a Grid, passing an api ref and specifying columns to show the menu for.

```jsx
import { useRef } from "react";
import { getData } from "./common/data";
import { Grid, HeaderMenu } from "@svar-ui/react-grid";

export default function Example() {
  const { data, columns } = getData();

  // create api gateway ref and pass it to both HeaderMenu and Grid
  const api = useRef(null);

  return (
    <HeaderMenu api={api} columns={{ city: true, firstName: true, id: true }}>
      <Grid data={data} columns={columns} ref={api} />
    </HeaderMenu>
  );
}
```

--------------------------------

### ColorPicker dropdown usage example

Source: https://docs.svar.dev/svelte/core/colorpicker/api/props/dropdown/

Example of using the dropdown prop in a ColorPicker component, setting position to 'bottom', align to 'start', and enabling trackScroll.

```Svelte
<ColorPicker 
    colors={['#65D3B3', '#FFC975', '#58C3FE']}
    dropdown={{ 
        position: "bottom",
        align: "start",
        trackScroll: true
    }}
/>
```

--------------------------------

### Initial Mode, Path, Selection, And Preview Recipe

Source: https://docs.svar.dev/skills/guides/svar-vue-filemanager.md

Shows how to set initial panels, active panel, and enable preview. The panels array defines paths and selected items for each panel.

```vue
<script setup>
import { Filemanager } from "@svar-ui/vue-filemanager";

const panels = [
	{ path: "/Code", selected: ["/Code/Button.js"] },
	{ path: "/", selected: ["/Music"] },
];
</script>

<template>
  <Filemanager
    :data="data"
    :drive="drive"
    mode="panels"
    :panels="panels"
    :activePanel="0"
    preview
  />
</template>
```

--------------------------------

### Wrap App with Globals

Source: https://docs.svar.dev/skills/guides/svar-react-core.md

JSX example showing how to wrap an App component with Globals to install the context helpers.

```jsx
<Globals>
	<App />
</Globals>
```

--------------------------------

### React Gantt example with autoScale

Source: https://docs.svar.dev/react/gantt/api/properties/autoscale/

JSX example demonstrating the autoScale property set to 'true' in a Gantt component, with start and end dates specified.

```jsx
import { getData } from "../data";
import { Gantt } from "@svar-ui/react-gantt";

const data = getData();

function App() {
  return (
    <Gantt
      tasks={data.tasks}
      start={new Date(2023, 2, 1)}
      end={new Date(2024, 3, 12)}
      autoScale="true"
    />
  );
}

export default App;
```

--------------------------------

### Example: getting the current mode

Source: https://docs.svar.dev/react/filemanager/api/methods/getstate/

Example usage of api.getState() within the Filemanager component's init callback to retrieve and log the current mode.

```jsx
import { Filemanager } from "@svar-ui/react-filemanager";
import { getData, getDrive } from "./common/data";

function init(api) {
  const { mode } = api.getState();
  console.log(mode);
}

<Filemanager 
  init={init}
  data={getData()}
  drive={getDrive()}
/>
```

--------------------------------

### Initial mode, path, selection, and preview recipe

Source: https://docs.svar.dev/skills/guides/svar-react-filemanager.md

Configures the Filemanager to start in panels mode with two panels, an active panel, and preview enabled. The data and drive props are assumed to be defined elsewhere.

```jsx
import { Filemanager } from "@svar-ui/react-filemanager";

function InitialFm() {
	const panels = [
		{ path: "/Code", selected: ["/Code/Button.js"] },
		{ path: "/", selected: ["/Music"] },
	];

	return (
		<Filemanager
			data={data}
			drive={drive}
			mode="panels"
			panels={panels}
			activePanel={0}
			preview
		/>
	);
}
```

--------------------------------

### ButtonList Usage Example with Toolbar

Source: https://docs.svar.dev/react/core/toolbar/api/helpers/buttonlist/

Example showing how to import ButtonList, register it for menu mode, and use it in a Toolbar with options and a click handler.

```ts
<script>
  import { Toolbar, ButtonList, registerToolbarItem } from "@svar-ui/react-toolbar";
  import { Segmented } from "@svar-ui/react-core";

  // register component for the `toolbar` mode
  registerToolbarItem("segmented", Segmented);
  // register a separate component for the `menu` mode
  registerToolbarItem("segmented", ButtonList, { menu: true });

  function onClick(item) {
    setMessage("Button '" + item.id + "' clicked");
  }

  const items = [
    // ... more toolbar items
    {
      id: "mode",
      comp: "segmented",
      value: "1",
      options: [
        { id: "1", label: "All" },
        { id: "2", label: "Active" },
      ],
      handler: onClick,
    },
  ];
</script>

<Toolbar items={items} />
```

--------------------------------

### MultiCombo dropdown prop example

Source: https://docs.svar.dev/react/core/multicombo/api/props/dropdown/

Example usage of the dropdown prop on a MultiCombo component, setting position to 'bottom', align to 'start', and trackScroll to true.

```tsx
<MultiCombo
    dropdown={{
        position: "bottom",
        align: "start",
        trackScroll: true
    }}
/>
```

--------------------------------

### dropdown prop example usage

Source: https://docs.svar.dev/react/core/daterangepicker/api/props/dropdown/

Example of using the dropdown prop in a DateRangePicker component, setting position to bottom, align to start, and trackScroll to true.

```ts
<DateRangePicker
    dropdown={{
        position: "bottom",
        align: "start",
        trackScroll: true
    }}
/>
```

--------------------------------

### Menu Initialization

Source: https://docs.svar.dev/react/core/menu/basicmenu/api/

Example of initializing the Menu component with options.

```APIDOC
## Menu Initialization

### Description
Initializes the Menu component with a set of options.

### Usage
```tsx
import { Menu } from "@svar-ui/react-menu";
import { getOptions } from "./data";

export default function App() {
  const options = getOptions();

  return <Menu options={options} />;
}
```

### Properties
- **options** (Array) - Optional. A set of menu options.

```

--------------------------------

### DatePicker dropdown usage example

Source: https://docs.svar.dev/react/core/datepicker/api/props/dropdown/

Example of using the dropdown prop on a DatePicker component, setting position to bottom, alignment to start, and enabling trackScroll.

```TSX
<DatePicker
    dropdown={{
        position: "bottom",
        align: "start",
        trackScroll: true
    }}
/>
```

--------------------------------

### Combo dropdown prop example

Source: https://docs.svar.dev/react/core/combo/api/props/dropdown/

Example usage of the dropdown prop in a Combo component, setting position to bottom, align to start, and trackScroll to true.

```tsx
<Combo
  options={users}
  textField="label"
  dropdown={{
    position: "bottom",
    align: "start",
    trackScroll: true
   }}
/>
```

--------------------------------

### Toolbar Configuration Example

Source: https://docs.svar.dev/vue/gantt/api/toolbar/

Complete example showing how to configure the toolbar by importing the Toolbar component, defining an items array with buttons, and passing the api object to Toolbar. The Gantt component is used with a ref to provide the api.

```vue
<script setup>
  import { getData } from "../data";
  import { Gantt, Toolbar } from "@svar-ui/vue-gantt";
  import { ref } from "vue";

  const api = ref();
  const data = getData();

  const items = [
   {
    id: "add-task",
    comp: "button",
    icon: "wxi-plus",
    text: "Add task",
    type: "primary",
   },
   {
    id: "edit-task",
    comp: "button",
    icon: "wxi-edit",
    text: "edit",
    type: "link",
   },
  ];
</script>

<template>
  <Toolbar :api="api" :items="items" />

  <Gantt ref="api" :tasks="data.tasks" />
</template>
```
Tokens:
Raw