### Full App Initialization Example

Source: https://framework7.io/docs/init-app.html

This example combines app initialization with custom parameters and the creation of the main view. It serves as a complete setup for a basic Framework7 application.

```javascript
var app = new Framework7({
  // App root element
  el: '#app',
  // App Name
  name: 'My App',
  // Enable swipe panel
  panel: {
    swipe: true,
  },
  // Add default routes
  routes: [
    {
      path: '/about/',
      url: 'about.html',
    },
  ],
  // ... other parameters
});

var mainView = app.views.create('.view-main');
```

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

### Install Framework7 Plugin

Source: https://framework7.io/docs/plugins-api.html

Demonstrates how to install a custom plugin into Framework7 using the `.use()` method. This must be done before initializing the Framework7 app.

```javascript
Framework7.use(myPlugin);
```

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

### Toggle Layout Examples

Source: https://framework7.io/docs/toggle.html

Examples of how to implement the Toggle component in different list structures.

```APIDOC
## Toggle Layout

### Simple List
```html
<div class="list simple-list">
  <ul>
    ...
    <li>
      <span>Text label</span>
      <label class="toggle">
        <input type="checkbox" />
        <span class="toggle-icon"></span>
      </label>
    </li>
  </ul>
</div>
```

### Usual List (preferable in `item-after`)
```html
<div class="list">
  <ul>
    ...
    <li class="item-content">
      <div class="item-inner">
        <div class="item-title">Text label</div>
        <div class="item-after">
          <label class="toggle">
            <input type="checkbox" />
            <span class="toggle-icon"></span>
          </label>
        </div>
      </div>
    </li>
  </ul>
</div>
```
```

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

### Install Project Dependencies

Source: https://framework7.io/docs/custom-build.html

Install all necessary dependencies for the Framework7 project. Navigate to the project's root directory in the terminal before running this command.

```bash
npm install
```

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

### Preloader Overlay Example

Source: https://framework7.io/docs/preloader.html

Example demonstrating how to use `app.preloader.show()` and `app.preloader.hide()` to manage a preloader during an asynchronous operation like a fetch request.

```APIDOC
## Example Usage
```javascript
var app = new Framework7();

// Show preloader before Ajax request
app.preloader.show();

// Perform Ajax request
fetch('someurl.html').then(() => {
  // Hide preloader when Ajax request completed
  app.preloader.hide();
});
```
```

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

### Install Framework7 via NPM

Source: https://framework7.io/docs/installation.html

Use this command to manually install Framework7 into your project using NPM. This method is suitable if you are not using the Framework7 CLI.

```bash
npm install framework7
```

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

### Framework7 Input Element Examples

Source: https://framework7.io/docs/inputs.html

Examples of different input elements that can be placed inside an item-input-wrap.

```html
<div class="item-input-wrap">
    <input type="text" />
  </div>
```

```html
<div class="item-input-wrap">
    <input type="email" />
  </div>
```

```html
<div class="item-input-wrap">
    <select>...</select">
  </div>
```

```html
<div class="item-input-wrap">
    <textarea></textarea>
  </div>
```

```html
<div class="item-input-wrap">
    <div class="range-slider">
      <input type="range" min="0" max="100" step="0.1" />
    </div>
  </div>
```

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

### Form Data Example

Source: https://framework7.io/docs/form.html

An example demonstrating how to use `convertToData` and `fillFromData` methods with a sample form.

```APIDOC
## Form Data Example

This example shows a form with various input types and buttons to trigger the `convertToData` and `fillFromData` methods.

### HTML Structure
```html
<form class="list list-strong inset list-dividers-ios" id="my-form">
  <ul>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-title item-label">Name</div>
          <div class="item-input-wrap">
            <input type="text" name="name" placeholder="Your name" />
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-title item-label">E-mail</div>
          <div class="item-input-wrap">
            <input type="email" name="email" placeholder="E-mail" />
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-title item-label">Gender</div>
          <div class="item-input-wrap">
            <select name="gender">
              <option value="male" selected="selected">Male</option>
              <option value="female">Female</option>
            </select>
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title">Toggle</div>
          <div class="item-after">
            <label class="toggle toggle-init">
              <input type="checkbox" name="toggle" value="yes" /><i class="toggle-icon"></i>
            </label>
          </div>
        </div>
      </div>
    </li>
  </ul>
</form>
<div class="block block-strong inset grid grid-cols-2 grid-gap">
  <a class="button button-fill button-round convert-form-to-data" href="#">Get Data</a>
  <a class="button button-fill button-round fill-form-from-data" href="#">Fill Form</a>
</div>
```

### JavaScript Logic
```javascript
// Assuming this is within a Framework7 page component's script section
// For example, using Vue.js with Framework7

// Inside the pageInit lifecycle hook or similar initialization context:

// Event listener for the 'Get Data' button
$(".convert-form-to-data").on("click", function () {
  var formData = $f7.form.convertToData("#my-form");
  alert(JSON.stringify(formData));
});

// Event listener for the 'Fill Form' button
$(".fill-form-from-data").on("click", function () {
  var formData = {
    'name': 'John',
    'email': 'john@doe.com',
    'gender': 'female',
    'toggle': ['yes'], // For checkboxes or multi-selects
  };
  $f7.form.fillFromData("#my-form", formData);
});
```
```

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

### Create Stepper Instance

Source: https://framework7.io/docs/stepper.html

Basic example of creating a Stepper instance with default parameters.

```javascript
var stepper = app.stepper.create({ /* parameters */ })
```

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

### .closest()

Source: https://framework7.io/docs/dom7.html

Get the first ancestor that matches a selector, starting from the element itself.

```APIDOC
## .closest(selector)

### Description
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

### Method
```javascript
.closest(selector)
```
```

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

### Form Data Conversion and Filling Example

Source: https://framework7.io/docs/form.html

This example demonstrates how to use Framework7's `convertToData` to get form values as a JSON object and `fillFromData` to populate a form from a JSON object. It includes input fields for name, email, gender, and a toggle switch.

```html
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Form To Data</div>
      </div>
    </div>
    <div class="page-content">
      <form class="list list-strong inset list-dividers-ios" id="my-form">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-title item-label">Name</div>
                <div class="item-input-wrap">
                  <input type="text" name="name" placeholder="Your name" />
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-title item-label">E-mail</div>
                <div class="item-input-wrap">
                  <input type="email" name="email" placeholder="E-mail" />
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-title item-label">Gender</div>
                <div class="item-input-wrap">
                  <select name="gender">
                    <option value="male" selected="selected">Male</option>
                    <option value="female">Female</option>
                  </select>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Toggle</div>
                <div class="item-after">
                  <label class="toggle toggle-init">
                    <input type="checkbox" name="toggle" value="yes" /><i class="toggle-icon"></i>
                  </label>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </form>
      <div class="block block-strong inset grid grid-cols-2 grid-gap">
        <a class="button button-fill button-round convert-form-to-data" href="#">Get Data</a>
        <a class="button button-fill button-round fill-form-from-data" href="#">Fill Form</a>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $, $on, $f7 }) => {
    $on('pageInit', () => {
      $('.convert-form-to-data').on('click', function () {
        var formData = $f7.form.convertToData('#my-form');
        alert(JSON.stringify(formData));
      });

      $('.fill-form-from-data').on('click', function () {
        var formData = {
          'name': 'John',
          'email': 'john@doe.com',
          'gender': 'female',
          'toggle': ['yes'],
        }
        $f7.form.fillFromData('#my-form', formData);
      });
    });

    return $render;
  }
</script>
```

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

### Initialize Framework7 App with Parameters

Source: https://framework7.io/docs/app.html

Use the `new Framework7` constructor to create a main app instance. Pass an object with main app parameters to configure features like swipe panels.

```javascript
var app = new Framework7({
  // Enable swipe panel
  panel: {
    swipe: true,
  },
  // ... other parameters
});
```

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

### Disable Dates from a Specific Date

Source: https://framework7.io/docs/calendar.html

Use an object with only the 'from' property to disable all dates starting from a specified date. This example disables all dates since December 1st, 2015.

```javascript
var calendar = app.calendar.create({
    ...
    //Disable everyting since December 2015
    disabled: {
        from: new Date(2015, 11, 1)
    },
    ...
});
```

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

### Import and Initialize Framework7 with Core Components

Source: https://framework7.io/docs/lazy-modules.html

Import core framework and specific components for initial page load. Then, install and initialize the app with the selected components.

```javascript
import Framework7 from 'framework7';

import Searchbar from 'framework7/components/searchbar';
import Accordion from 'framework7/components/accordion';

Framework7.use([Searchbar, Accordion]);

var app = new Framework7({
  // f7 params
});
```

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

### Panel Creation with Parameters

Source: https://framework7.io/docs/panel.html

Demonstrates how to manually create a panel instance using `app.panel.create` and configure it with various parameters.

```APIDOC
## Panel Parameters

If we create Panel manually using `app.panel.create` method we need to pass object with panel parameters:

Parameter| Type| Default| Description  
---|---|---|---
`el`| HTMLElement  
string| | Panel element  
`resizable`| boolean| | Enables resizable panel. If not passed then will be determined based on `panel-resizable` class.  
`visibleBreakpoint`| number| | Minimal app width (in px) when left panel becomes always visible  
`collapsedBreakpoint`| number| | Minimal app width (in px) when left panel becomes partially visible (collapsed)  
`swipe`| boolean| false| Enable if you want to enable ability to open/close panel with swipe  
`swipeNoFollow`| boolean| false| Fallback option for potentially better performance on old/slow devices. If you enable it, then swipe panel will not follow your finger during touch move, it will be automatically opened/closed on swipe left/right.  
`swipeActiveArea`| number| 0| Width (in px) of invisible edge from the screen that triggers panel swipe  
`swipeOnlyClose`| boolean| false| This parameter allows to close (but not open) panel with swipes. (`swipe` should be also enabled)  
`swipeThreshold`| number| 0| Panel will not move with swipe if "touch distance" will be less than this value (in px).  
`backdrop`| boolean| true| Enables Panel backdrop (dark semi transparent layer behind)  
`backdropEl`| HTMLElement  
string| | HTML element or string CSS selector of custom backdrop element  
`closeByBackdropClick`| boolean| true| Enable/disable ability to close panel by clicking outside of panel  
`containerEl`| HTMLElement  
string| | Allows to mount the panel to custom element rather than app root element  
`on`| object| | Object with events handlers. For example:
```javascript
var panel = app.panel.create({
  el: '.panel-left',
  on: {
    opened: function () {
      console.log('Panel opened')
    }
  }
})
```

For example:
```javascript
var panel = app.panel.create({
  el: '.panel-left',
  resizable: true,
  visibleBreakpoint: 1024,
  collapsedBreakpoint: 768,
})
```

Note that all following parameters can be used in global app parameters under`panel` property to set defaults for all panels. For example:
```javascript
var app = new Framework7({
  panel: {
    swipe: true,
    visibleBreakpoint: 1024,
  }
});
```
```

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

### Create Toast Instance (Basic)

Source: https://framework7.io/docs/toast.html

A basic example of creating a toast instance using `app.toast.create` with placeholder parameters.

```javascript
var toast = app.toast.create({ /* parameters */ })
```

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

### Another Raised Card Example

Source: https://framework7.io/docs/cards.html

An additional example of a raised card for varied content presentation.

```html
<div class="card card-raised">
      <div class="card-content card-content-padding">Another card. Lorem ipsum dolor sit amet, consectetur adipiscing
        elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. </div>
    </div>
```

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

### Another Outline Card Example

Source: https://framework7.io/docs/cards.html

An additional example of an outline card for varied content presentation.

```html
<div class="card card-outline">
      <div class="card-content card-content-padding">Another card. Lorem ipsum dolor sit amet, consectetur adipiscing
        elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. </div>
    </div>
```

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

### Framework7 App Initialization with Input Parameters

Source: https://framework7.io/docs/inputs.html

Configure default input behavior for the entire app using global parameters. This example enables scrolling inputs into view and centers them during focus.

```javascript
var app = new Framework7({
  input: {
    scrollIntoViewOnFocus: true,
    scrollIntoViewCentered: true,
  }
});
```

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

### Initialize App with Debug Plugin

Source: https://framework7.io/docs/plugins-api.html

Installs the debug plugin and initializes the Framework7 app, enabling the debugger via the app's parameters. Includes a note on how to disable it later.

```javascript
/* myapp.js */

// install plugin first
Framework7.use(debugPlugin);

// init app
var app = new Framework7({
  //enable debugger
  debugger: true,
});

/*
  we can later disable it by calling
  app.debugger.disable();
*/
```

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

### Another Simple Card Example

Source: https://framework7.io/docs/cards.html

An additional example of a simple card for varied content presentation.

```html
<div class="card">
      <div class="card-content card-content-padding">Another card. Lorem ipsum dolor sit amet, consectetur adipiscing
        elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. </div>
    </div>
```

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

### Basic Smart Select Example

Source: https://framework7.io/docs/smart-select.html

Demonstrates a simple Smart Select for choosing a single fruit. Initialize with the 'smart-select-init' class.

```html
<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="left">
        <a class="link back">
          <i class="icon icon-back"></i>

        </a>
      </div>
      <div class="title">Smart Select</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block block-strong inset">
      Framework7 allows you to easily convert your usual form selects to dynamic pages with radios:
    </div>
    <div class="list list-strong inset list-dividers-ios">
      <ul>
        <li>
          <a class="item-link smart-select smart-select-init">
            <select name="fruits">
              <option value="apple" selected>Apple</option>
              <option value="pineapple">Pineapple</option>
              <option value="pear">Pear</option>
              <option value="orange">Orange</option>
              <option value="melon">Melon</option>
              <option value="peach">Peach</option>
              <option value="banana">Banana</option>
            </select>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Fruit</div>
              </div>
            </div>
          </a>
        </li>
        <li>
          <a class="item-link smart-select smart-select-init" data-open-in="popup" data-searchbar="true"
            data-searchbar-placeholder="Search car">
            <select name="car" multiple>
              <optgroup label="Japanese">
                <option value="honda" selected>Honda</option>
                <option value="lexus">Lexus</option>
                <option value="mazda">Mazda</option>
                <option value="nissan">Nissan</option>
                <option value="toyota">Toyota</option>
              </optgroup>
              <optgroup label="German">
                <option value="audi" selected>Audi</option>
                <option value="bmw">BMW</option>
                <option value="mercedes">Mercedes</option>
                <option value="vw">Volkswagen</option>
                <option value="volvo">Volvo</option>
              </optgroup>
              <optgroup label="American">
                <option value="cadillac">Cadillac</option>
                <option value="chrysler">Chrysler</option>
                <option value="dodge">Dodge</option>
                <option value="ford" selected>Ford</option>
              </optgroup>
            </select>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Car</div>
              </div>
            </div>
          </a>
        </li>
        <li>
          <a class="item-link smart-select smart-select-init" data-open-in="sheet">
            <select name="mac-windows">
              <option value="mac" selected>Mac</option>
              <option value="windows">Windows</option>
            </select>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Mac or Windows</div>
              </div>
            </div>
          </a>
        </li>
        <li>
          <a class="item-link smart-select smart-select-init" data-open-in="popover">
            <select name="superhero" multiple>
              <option value="Batman" selected>Batman</option>
              <option value="Superman">Superman</option>
              <option value="Hulk">Hulk</option>
              <option value="Spiderman">Spiderman</option>
              <option value="Ironman">Ironman</option>
              <option value="Thor">Thor</option>
              <option value="Wonder Woman">Wonder Woman</option>
            </select>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Super Hero</div>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>
```

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

### Comprehensive Route Configuration Example

Source: https://framework7.io/docs/routes.html

Demonstrates a wide range of route properties including Ajax loading, dynamic content, page name, element, component, component URL, and asynchronous operations.

```javascript
routes: [
  // Load via Ajax
  {
    path: '/about/',
    url: './pages/about.html',
  },
  // Dynamic page from content
  {
    path: '/news/',
    content: `
      <div class="page">
        <div class="page-content">
          <div class="block">
            <p>This page created dynamically</p>
          </div>
        </div>
      </div>
    `,
  },
  // By page name (data-name="services") presented in DOM
  {
    path: '/services/',
    pageName: 'services',
  },
  // By page HTMLElement
  {
    path: '/contacts/',
    el: document.querySelector('.page[data-name="contacts"]'),
  },
  // By component
  {
    path: '/posts/',
    component: {
      // look below
    },
  },
  // By component url
  {
    path: '/post/:id/',
    componentUrl: './pages/component.html',
  },
  // Async
  {
    path: '/something/',
    async: function ({ app, to, resolve }) {
      // Requested route
      console.log(to);
      // Get external data and return page content
      fetch('http://some-endpoint/')
        .then((res) => res.json())
        .then(function (data) {
          resolve(

```

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

### Radio with Icon Start

Source: https://framework7.io/docs/radio.html

Radio button with an icon positioned at the start. This is useful for visual cues in lists.

```html
<label class="item-radio item-radio-icon-start item-content">
  <input type="radio" name="demo-media-radio" value="2" />
  <i class="icon icon-radio"></i>
  <div class="item-inner">
    <div class="item-title-row">
      <div class="item-title">John Doe (via Twitter)</div>
      <div class="item-after">17:11</div>
    </div>
    <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut
      turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit
      amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In
      vel dui laoreet, commodo augue id, pulvinar lacus.</div>
  </div>
</label>
```

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

### Passive Touch Start Event

Source: https://framework7.io/docs/app.html

Fired on touch start (mousedown) with a passive listener, preventing default behavior.

```APIDOC
## Passive Touch Start Event

### Description
Event will be fired on touch start (mousedown) event added as passive listener (impossible to prevent default).

### Event Name
`touchstart:passive`

### Arguments
- `event` (Event) - The touch start event object.
```

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

### Install Gulp Globally

Source: https://framework7.io/docs/custom-build.html

Install Gulp globally on your system to manage build processes. This command is executed in the terminal.

```bash
npm install --global gulp
```

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

### Create Panel with Configuration Parameters

Source: https://framework7.io/docs/panel.html

This snippet shows how to create a panel instance with various configuration parameters like `resizable`, `visibleBreakpoint`, and `collapsedBreakpoint`.

```javascript
var panel = app.panel.create({
  el: '.panel-left',
  resizable: true,
  visibleBreakpoint: 1024,
  collapsedBreakpoint: 768,
})
```

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

### Initialize Framework7 with Main App Component URL

Source: https://framework7.io/docs/router-component.html

Alternatively, load the main app component via XHR by providing its URL to the `componentUrl` option during Framework7 initialization.

```javascript
var app = new Framework7({
  // load main app component
  componentUrl: './path/to/app.f7',
})
```

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

### Pie Chart Event Handler Example

Source: https://framework7.io/docs/pie-chart.html

Example of how to attach an event handler, specifically 'beforeDestroy', during Pie Chart creation.

```javascript
var pieChart = app.pieChart.create({
  el: '.pie-chart',
  on: {
    beforeDestroy: function () {
      console.log('Pie Chart will be destroyed')
    }
  }
})
```

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

### Virtual List Initialization

Source: https://framework7.io/docs/virtual-list.html

How to create a new Virtual List instance.

```APIDOC
## Create Virtual List

### Description
Initializes a new Virtual List instance with specified parameters.

### Method
`app.virtualList.create(parameters)`

### Parameters
- `parameters` (object) - Required - Object with Virtual List initialization parameters.

### Request Example
```javascript
var virtualList = app.virtualList.create({
  // parameters here
});
```
```

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

### Active Touch Start Event

Source: https://framework7.io/docs/app.html

Fired on touch start (mousedown) with an active listener, allowing default behavior prevention.

```APIDOC
## Active Touch Start Event

### Description
Event will be fired on touch start (mousedown) event added as active listener (possible to prevent default).

### Event Name
`touchstart:active`

### Arguments
- `event` (Event) - The touch start event object.
```

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

### Smart Select Event Handler Example

Source: https://framework7.io/docs/smart-select.html

Example of how to define an event handler for the 'opened' event when creating a Smart Select instance.

```javascript
var smartSelect = app.smartSelect.create({
  ...
  on: {
    opened: function () {
      console.log('Smart select opened')
    }
  }
})
```

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

### Initialize Messagebar with Event Handler

Source: https://framework7.io/docs/messagebar.html

Example of initializing a Framework7 Messagebar instance using `app.messagebar.create` and defining a 'change' event handler.

```javascript
var messagebar = app.messagebar.create({
  el: '.messagebar',
  on: {
    change: function () {
      console.log('Textarea value changed')
    }
  }
})
```

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

### Example Usage of App Events

Source: https://framework7.io/docs/app.html

Demonstrates how to use the `app.on()` method to listen for specific app events and execute callback functions.

```APIDOC
## Example Usage of App Events

### Listening for Panel Open Event
```javascript
app.on('panelOpen', function (panel) {
  console.log('Panel ' + panel.side + ' opened');
});
```

### Listening for Connection Change Event
```javascript
app.on('connection', function (isOnline) {
  if (isOnline) {
    console.log('app is online now')
  } else {
    console.log('app is offline now')
  }
});
```

### Listening for Dark Mode Change Event
```javascript
app.on('darkModeChange', function (isDark) {
  if (isDark) {
    console.log('color scheme changed to Dark')
  } else {
    console.log('color scheme changed to Light')
  }
});
```
```

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

### app.searchbar.create(parameters)

Source: https://framework7.io/docs/searchbar.html

Initializes a Searchbar instance with the provided parameters.

```APIDOC
## app.searchbar.create(parameters)

### Description
Initializes a Searchbar with parameters.

### Parameters
#### Parameters
- **parameters** (object) - object with Searchbar parameters

### Returns
- Method returns initialized Searchbar instance
```

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

### Computed Getters Example

Source: https://framework7.io/docs/store.html

Define getters to compute derived state. This example shows a `registeredUsers` getter that filters users based on their registration status.

```javascript
const store = createStore({
  state: {
    users: [
      { id: 1, name: '...', registered: true },
      { id: 2, name: '...', registered: false }
    ]
  },
  getters: {
    registeredUsers: ({ state }) => {
      return state.users.filter((user) => user.registered);
    }
  }
})
```

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

### Initialize Framework7 App with Custom Parameters

Source: https://framework7.io/docs/init-app.html

Initialize a Framework7 app with custom parameters for elements, name, panels, and routes. Refer to the App / Core section for a full list of parameters.

```javascript
var app = new Framework7({
  // App root element
  el: '#app',
  // App Name
  name: 'My App',
  // Enable swipe panel
  panel: {
    swipe: true,
  },
  // Add default routes
  routes: [
    {
      path: '/about/',
      url: 'about.html',
    },
  ],
  // ... other parameters
});
```

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

### Create Panel Instance

Source: https://framework7.io/docs/panel.html

Use `app.panel.create()` to initialize a new panel instance. Pass an object with panel parameters.

```javascript
var panel = app.panel.create(parameters);
```

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

### Color Picker Event Handler Example

Source: https://framework7.io/docs/color-picker.html

Example of how to define event handlers for the Color Picker, specifically the 'opened' event. This allows for custom actions when the picker is opened.

```javascript
var colorPicker = app.colorPicker.create({
  ...
  on: {
    opened: function () {
      console.log('Color Picker opened')
    }
  }
})
```

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

### Create Toggle Instance

Source: https://framework7.io/docs/toggle.html

Basic example of how to initialize a toggle component instance using the `app.toggle.create` method with parameters.

```javascript
var toggle = app.toggle.create({ /* parameters */ })
```

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

### Picker Event Handler Example

Source: https://framework7.io/docs/picker.html

This example demonstrates how to attach an event handler to the Picker instance. The `opened` event is triggered when the picker is opened, allowing you to execute custom logic.

```javascript
var picker = app.picker.create({
  ...
  on: {
    opened: function () {
      console.log('Picker opened')
    }
  }
})
```

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

### Create a new store instance

Source: https://framework7.io/docs/store.html

Defines a new store with initial state, actions, and getters. Import `createStore` from the 'store' module.

```javascript
import { createStore } from 'store';

const store = createStore({
  state: {
    loading: false,
    users: [],
  },
  actions: {
    getUsers({ state }) {
      state.loading = true;
      setTimeout(() => {
        state.users = ['User 1', 'User 2', 'User 3', 'User 4', 'User 5'];
        state.loading = false;
      }, 3000);
    },
  },
  getters: {
    loading({ state }) {
      return state.loading;
    },
    users({ state }) {
      return state.users;
    },
  },
});

export default store;
```

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

### Pull to Refresh from Bottom Example

Source: https://framework7.io/docs/pull-to-refresh.html

Implement pull-to-refresh functionality at the bottom of the page to load more content. This example uses the `ptr-bottom` class and the `@ptr:refresh` event to trigger the `loadMore` function.

```html
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Pull To Refresh Bottom</div>
      </div>
    </div>
    <div class="page-content ptr-content ptr-bottom" @ptr:refresh=${loadMore}>
      <div class="ptr-preloader">
        <div class="preloader"></div>
        <div class="ptr-arrow"></div>
      </div>
      <div class="list media-list inset list-strong list-dividers-ios">
        <ul>
          ${items.map((item) => $h`
          <li class="item-content">
            <div class="item-media"><img src=${item.picURL} width="44" /></div>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">${item.song}</div>
              </div>
              <div class="item-subtitle">${item.author}</div>
            </div>
          </li>
          `)}
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $update }) => {
    // Dummy Content
    const songs = ['Yellow Submarine', 'Don\'t Stop Me Now', 'Billie Jean', 'Californication'];
    const authors = ['Beatles', 'Queen', 'Michael Jackson', 'Red Hot Chili Peppers'];
    let items = [
      {
        picURL: 'https://cdn.framework7.io/placeholder/abstract-88x88-1.jpg',
        song: 'Yellow Submarine',
        author: 'Beatles',
      },
      {
        picURL: 'https://cdn.framework7.io/placeholder/abstract-88x88-2.jpg',
        song: 'Don\'t Stop Me Now',
        author: 'Queen',
      },
      {
        picURL: 'https://cdn.framework7.io/placeholder/abstract-88x88-3.jpg',
        song: 'Billie Jean',
        author: 'Michael Jackson',
      },
    ]

    const loadMore = (e, done) => {
      // Emulate 2s loading
      setTimeout(() => {
        const picURL = 'https://cdn.framework7.io/placeholder/abstract-88x88-' + (Math.floor(Math.random() * 10) + 1) + '.jpg';
        const song = songs[Math.floor(Math.random() * songs.length)];
        const author = authors[Math.floor(Math.random() * authors.length)];
        // Add new item
        items.push({
          picURL,
          song,
          author,
        });

        // Update state to rerender
        $update();

        // When loading done, we need to reset it
        done();
      }, 2000);
    }

    return $render;
  }
</script>
```

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

### Initialize Basic Framework7 App

Source: https://framework7.io/docs/init-app.html

This is the simplest way to initialize a Framework7 app. Use the 'app' variable to store the initialized instance for easy access.

```javascript
var app = new Framework7();
```

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

### Get Preloader Content HTML

Source: https://framework7.io/docs/utils.html

Access `iosPreloaderContent` or `mdPreloaderContent` to get the HTML string for preloader elements specific to iOS or Material Design themes. This is useful for dynamically creating preloaders.

```javascript
// call method dynamically based on current app theme
var preloaderContent = app.utils[app.theme + 'PreloaderContent'];

// create required preloader content
var myPreloader = '<div class="preloader">' + preloaderContent + '</div>';

// add it somewhere
$('.something').append(myPreloader);
```

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

### Photo Browser Event Handler Example

Source: https://framework7.io/docs/photo-browser.html

Example of how to define an event handler for the 'opened' event when creating a Photo Browser instance. This allows custom logic to be executed when the Photo Browser is opened.

```javascript
var photoBrowser = app.photoBrowser.create({
  ... 
  on: {
    opened: function () {
      console.log('photo browser opened')
    }
  }
})
```

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

### app.init()

Source: https://framework7.io/docs/app.html

Initializes the Framework7 app. This is typically used if auto-initialization was disabled during app creation.

```APIDOC
## app.init()

### Description
Initializes the app. Use this if you disabled auto-initialization with the `init: false` parameter.

### Method
app.init
```

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

### FAB Morphing Example

Source: https://framework7.io/docs/floating-action-button.html

This example demonstrates how a FAB can morph into a target element, such as a bottom toolbar. Ensure the target element has the `fab-morph-target` class and the FAB has the `data-morph-to` attribute specifying the target's selector.

```html
<div class="page">
  <div class="navbar">...</div>

  <!-- Toolbar has additional required "fab-morph-target" class -->
  <div class="toolbar toolbar-bottom fab-morph-target">
    ...
  </div>

  <!-- FAB will morph to toolbar -->
  <div class="fab fab-morph" data-morph-to=".toolbar">
    <i class="icon f7-icons">plus</i>
  </div>

  <div class="page-content">
    ...
  </div>
</div>
```

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

### Create a Login Screen Instance

Source: https://framework7.io/docs/login-screen.html

Use this method to create a new Login Screen instance. Pass an object with parameters to configure its behavior.

```javascript
var loginScreen = app.loginScreen.create({ /* parameters */ })
```

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

### Dom7 Usage Example

Source: https://framework7.io/docs/dom7.html

Demonstrates common DOM manipulation tasks using Dom7, including event handling, class addition, attribute setting, and element insertion. This example showcases jQuery-like chaining.

```javascript
$$('.something').on('click', function (e) {
    $$(this).addClass('hello').attr('title', 'world').insertAfter('.something-else');
});
```

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

### Initialize Framework7 with Main App Component (Vite)

Source: https://framework7.io/docs/router-component.html

When initializing Framework7 with a main app component, specify the component using the `component` option.

```javascript
// import main app component
import App from './path/to/app.f7';

var app = new Framework7({
  // specify main app component
  component: App,
})
```

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

### Custom Toolbar Picker Example

Source: https://framework7.io/docs/picker.html

This example shows a picker with a custom rendered toolbar. It includes a 'Randomize' button that updates the picker's values dynamically. The `renderToolbar` function defines the toolbar's HTML structure.

```javascript
pickerCustomToolbar = $f7.picker.create({
            inputEl: '#demo-picker-custom-toolbar',
            rotateEffect: true,
            renderToolbar: function () {
              return '<div class="toolbar">' + 
                '<div class="toolbar-inner">' + 
                  '<div class="left">' + 
                    '<a  class="link toolbar-randomize-link">Randomize</a>' + 
                  '</div>' + 
                  '<div class="right">' + 
                    '<a  class="link sheet-close popover-close">That\'s me</a>' + 
                  '</div>' + 
                '</div>' + 
              '</div>';
            },
            cols: [
              {
                values: ['Mr', 'Ms'],
              },
              {
                textAlign: 'left',
                values: ('Super Amazing Bat Iron Rocket Lex Beautiful Wonderful Raining Happy Funny Cool Hot').split(' ')
              },
              {
                values: ('Man Luthor Woman Boy Girl Person Cutie Babe Raccoon').split(' ')
              },
            ],
            on: {
              open: function (picker) {
                picker.$el.find('.toolbar-randomize-link').on('click', function () {
                  var col0Values = picker.cols[0].values;
                  var col0Random = col0Values[Math.floor(Math.random() * col0Values.length)];

                  var col1Values = picker.cols[1].values;
                  var col1Random = col1Values[Math.floor(Math.random() * col1Values.length)];

                  var col2Values = picker.cols[2].values;
                  var col2Random = col2Values[Math.floor(Math.random() * col2Values.length)];

                  picker.setValue([col0Random, col1Random, col2Random]);
                });
              },
            }
          });
```

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

### .find()

Source: https://framework7.io/docs/dom7.html

Get the descendants of an element that match a selector.

```APIDOC
## .find(selector)

### Description
Get the descendants of each element in the current set of matched elements, filtered by a selector.

### Method
```javascript
.find(selector)
```
```

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

### Run Framework7 Core Kitchen Sink

Source: https://framework7.io/docs/kitchen-sink.html

Execute this command to launch the Framework7 Core Kitchen Sink application locally.

```bash
npm run core
```

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

### .text()

Source: https://framework7.io/docs/dom7.html

Get or set the text contents of elements.

```APIDOC
## .text()

### Description
Get the text contents of the first element in the set of matched elements.

### Method
```javascript
.text()
```

## .text(newTextContent)

### Description
Set the text contents of every matched element.

### Method
```javascript
.text(newTextContent)
```
```

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

### Using Helper Function to Load Modules

Source: https://framework7.io/docs/lazy-modules.html

Demonstrates how to use the `loadF7Modules` helper function to load multiple components and then utilize their APIs.

```javascript
loadF7Modules(['gauge', 'calendar']).then(() => {
  app.gauge.create(/* ... */)
  app.calendar.create(/* ... */)
});
```

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

### Photo Browser Initialization

Source: https://framework7.io/docs/photo-browser.html

Demonstrates how to initialize the Photo Browser with different types of photo and video data.

```APIDOC
## Photo Browser Initialization

### Description
Initialize the Photo Browser by providing an array of photos or videos in the `photos` parameter. The array can contain simple URLs, objects with URLs and captions, or HTML elements for videos.

### Usage

**1. Photos only:**
```javascript
var photos = [
    'image1.jpg',
    'image2.jpg',
    'image3.jpg',
    'image4.jpg',
];
```

**2. Photos with captions:**
```javascript
var photos = [
    {
        url: 'image1.jpg',
        caption: 'Caption 1'
    },
    {
        url: 'image2.jpg',
        caption: 'Second Caption'
    },
    {
        url: 'image3.jpg'
    },
    'image4.jpg'
];
```

**3. Photos and videos:**
```javascript
var photos = [
    {
        url: 'image1.jpg',
        caption: 'Caption 1'
    },
    {
        html: '<video src="video1.mp4"></video>',
        caption: 'Video Caption'
    },
    {
        html: '<iframe src="..."></iframe>'
    },
    '<video src="video2.mp4"></video>'
];
```
```

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

### .html()

Source: https://framework7.io/docs/dom7.html

Get or set the HTML contents of elements.

```APIDOC
## .html()

### Description
Get the HTML contents of the first element in the set of matched elements.

### Method
```javascript
.html()
```

## .html(newInnerHTML)

### Description
Set the HTML contents of every matched element.

### Method
```javascript
.html(newInnerHTML)
```
```

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

### Get Stepper Value

Source: https://framework7.io/docs/stepper.html

Retrieves the current value of a Stepper.

```APIDOC
## app.stepper.getValue(el)

### Description
Gets the current value of the Stepper.

### Parameters
* el (HTMLElement or string) - Stepper element.

### Returns
* number - Stepper value
```

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

### Create Login Screen with Event Handler

Source: https://framework7.io/docs/login-screen.html

Example of creating a new Login Screen instance dynamically using the `app.loginScreen.create` method. This snippet demonstrates how to attach an event handler for the 'opened' event.

```javascript
var loginScreen = app.loginScreen.create({
  content: '<div class="login-screen">...</div>',
  on: {
    opened: function () {
      console.log('Login Screen opened')
    }
  }
})
```

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

### app.range.getValue(el)

Source: https://framework7.io/docs/range-slider.html

Gets the current value of a Range Slider.

```APIDOC
## app.range.getValue(el)

### Description
Retrieves the current value of the Range Slider.

### Parameters
*   **el** (HTMLElement | string) - Range Slider element or CSS selector.

### Returns
*   The current range slider value (number for single range, array for dual range).
```

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

### Create Login Screen

Source: https://framework7.io/docs/login-screen.html

Initializes a new Login Screen instance with specified parameters.

```APIDOC
## Create Login Screen

To create a Login Screen, use the `app.loginScreen.create()` method with an object of parameters.

### Method
```javascript
var loginScreen = app.loginScreen.create({ /* parameters */ })
```

### Parameters
* `parameters` (object) - Configuration options for the Login Screen.
```

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

### .children()

Source: https://framework7.io/docs/dom7.html

Get the children of an element, optionally filtered by a selector.

```APIDOC
## .children(selector)

### Description
Get the children of each element in the set of matched elements, optionally filtered by a selector.

### Method
```javascript
.children(selector)
```
```