### Basic Example (React) Source: https://lemonadejs.com/docs/plugins/signature Example of integrating the LemonadeJS signature pad into a React application. ```APIDOC ```javascript import React, { useRef } from 'react'; import Signature from '@lemonadejs/signature/dist/react'; export default function App() { const signatureRef = useRef(); return (<> ); } ``` ``` -------------------------------- ### Basic Example (Vanilla JS) Source: https://lemonadejs.com/docs/plugins/signature A basic example demonstrating how to embed the LemonadeJS signature pad using Vanilla JavaScript. ```APIDOC ### Basic example Basic example to show how to embed the LemonadeJS signature pad on your components. ```html
``` ``` -------------------------------- ### Install LemonadeJS Top Menu Source: https://lemonadejs.com/docs/plugins/top-menu Use npm to install the package in your project. ```bash npm install @lemonadejs/topmenu ``` -------------------------------- ### Basic Example (Vue) Source: https://lemonadejs.com/docs/plugins/signature Example of using the LemonadeJS signature pad within a Vue.js application. ```APIDOC ```html ``` ``` -------------------------------- ### Installation Source: https://lemonadejs.com/docs/plugins/data-grid Install the LemonadeJS Data Grid using npm. ```APIDOC ## Installation ``` npm install @lemonadejs/data-grid ``` ``` -------------------------------- ### Basic Example (LemonadeJS Component) Source: https://lemonadejs.com/docs/plugins/signature Example of using the LemonadeJS signature pad within a LemonadeJS component. ```APIDOC ```javascript import lemonade from "lemonadejs"; import Signature from "@lemonadejs/signature"; export default function Component() { // Value this.value = []; // return render => render` `; } ``` ``` -------------------------------- ### Working Example: Basic State Usage Source: https://lemonadejs.com/docs/state A complete HTML example demonstrating the use of the `state` method to manage a boolean value and toggle it with a button. ```APIDOC ## Working Example: Basic State Usage ### Description This example shows a simple component using `state` to manage a boolean `status` and a button to toggle its value, updating the UI accordingly. ### Method Uses the `state` method to create a reactive boolean variable and updates it via a button click. ### Endpoint N/A (Client-side JavaScript) ### Request Example ```html
``` ### Response Example N/A (UI updates dynamically based on state changes) ``` -------------------------------- ### Basic Image Cropper Example Source: https://lemonadejs.com/docs/plugins/image-cropper Example demonstrating how to initialize and use the LemonadeJS Cropper component. ```APIDOC ## Examples ### Basic Image Cropper #### Photo Upload ```html
``` ``` -------------------------------- ### Installation Source: https://lemonadejs.com/docs/plugins/top-menu Install the LemonadeJS Top Menu component using npm. ```APIDOC ## Installation ``` npm install @lemonadejs/topmenu ``` ``` -------------------------------- ### Installation Source: https://lemonadejs.com/docs/plugins/dropdown Install the LemonadeJS Dropdown component using npm. ```APIDOC ## Installation ``` npm install @lemonadejs/dropdown ``` ``` -------------------------------- ### Installation Source: https://lemonadejs.com/docs/plugins/image-cropper Instructions for installing the LemonadeJS Cropper component via NPM or CDN. ```APIDOC ## Installation ### NPM Installation ``` npm install @lemonadejs/cropper ``` ### CDN Installation ```html ``` ``` -------------------------------- ### Implement Basic Tabs Source: https://lemonadejs.com/docs/plugins/tabs Examples of initializing the Tabs component across different environments. ```html
Content of the first tab
Content of the second tab
``` ```javascript import lemonade from 'lemonadejs' import Tabs from '@lemonadejs/tabs'; import '@lemonadejs/tabs/dist/style.css'; export default function App() { const self = this; return render => render`
Content of the first tab
Content of the second tab
` } ``` ```javascript import React, { useRef } from "react"; import Tabs from "@lemonadejs/tabs/dist/react"; import "@lemonadejs/tabs/dist/style.css"; export default function Component() { const component = useRef(); const data = [ { title: "Tab 1", content: `Content of the first tab` }, { title: "Tab 2", content: `Content of the second tab` } ]; return (
) } ``` ```html ``` -------------------------------- ### Install LemonadeJS via NPM Source: https://lemonadejs.com/docs/getting-started Use this command to install the LemonadeJS library if you are integrating it using NPM. Ensure you have Node.js and npm installed. ```bash npm install lemonadejs@5 ``` -------------------------------- ### Install LemonadeJS Signature Pad Source: https://lemonadejs.com/docs/plugins/signature Install the signature pad component using npm. This command is used for setting up the library in your project. ```bash npm install @lemonadejs/signature ``` -------------------------------- ### Installation Source: https://lemonadejs.com/docs/plugins/timeline Install the LemonadeJS Timeline component using npm. ```APIDOC ## Installation ``` npm install @lemonadejs/timeline ``` ``` -------------------------------- ### Import Color Component as Module Source: https://lemonadejs.com/docs/examples/color-picker Example showing how to import the color component and styles in a module-based environment. ```javascript import Color from '@lemonadejs/color'; import '@lemonadejs/color/dist/style.css'; export default function Color(children, { onload }) { let context = null; const decToHex = function(num) { let hex = num.toString(16); return hex.length === 1 ? "0" + hex : hex; } const rgbToHex = function(r, g, b) { return "#" + decToHex(r) + decToHex(g) + decToHex(b); } const draw = () => { let g = context.createLinearGradient(0, 0, this.canvas.width, 0); ``` -------------------------------- ### Example: Hello World Web Component Source: https://lemonadejs.com/docs/web-components This example demonstrates creating a 'Hello World' web component with two-way data binding and an update button. It requires including the LemonadeJS library. The component uses template literals for rendering and binds input values to component properties. ```html ``` -------------------------------- ### Example: Creating a Reactive 'Hello World' Component Source: https://lemonadejs.com/docs/web-components A practical example demonstrating how to create a simple reactive web component named 'test' using LemonadeJS, including a paragraph, an input field with two-way binding, and a button. ```APIDOC ## PUT /api/users/{id} ### Description Updates an existing user's information. ### Method PUT ### Endpoint /api/users/{id} ### Parameters #### Path Parameters - **id** (integer) - Required - The unique identifier of the user to update. #### Request Body - **name** (string) - Optional - The updated name of the user. - **email** (string) - Optional - The updated email address of the user. ### Request Example ```json { "name": "Jane Doe" } ``` ### Response #### Success Response (200) - **id** (integer) - The unique identifier for the updated user. - **name** (string) - The updated name of the user. - **email** (string) - The updated email address of the user. - **updatedAt** (string) - The timestamp when the user was last updated. #### Response Example ```json { "id": 123, "name": "Jane Doe", "email": "john.doe@example.com", "updatedAt": "2023-10-27T10:05:00Z" } ``` ``` -------------------------------- ### Install LemonadeJS Color Picker Source: https://lemonadejs.com/docs/plugins/color-picker Use npm to install the color picker package in your project. ```bash npm install @lemonadejs/color ``` -------------------------------- ### HTML/JavaScript Example for Topmenu with Submenus Source: https://lemonadejs.com/docs/plugins/top-menu This example demonstrates how to initialize the Topmenu component in plain HTML and JavaScript, showcasing nested submenus and icon integration. Ensure all necessary CDN links for LemonadeJS and its plugins are included. ```html
``` -------------------------------- ### LemonadeJS Examples and Extensions Source: https://lemonadejs.com/docs/quick-reference Lists available examples and extensions for LemonadeJS, including Pico extensions and other specialized components. ```APIDOC ### Examples **Basic Examples**: * Lamp * Counter * Color Generator **Advanced Examples**: * Hangman Game * Tic-Tac-Toe Game ### Pico Extensions Optimized components under 1.8 KB with zero dependencies: * List: Transforms arrays into searchable, paginated lists. * Rating: Implements a reactive star rating system. * Router: Provides lightweight SPA routing. * Signature: Offers an optimized signature pad. ### Extensions * Image Cropper: A LinkedIn-style photo uploader and cropper. ``` -------------------------------- ### Install LemonadeJS List Source: https://lemonadejs.com/docs/plugins/list Install the LemonadeJS List library using npm. This is the first step to using its features for creating dynamic lists. ```bash npm install @lemonadejs/list ``` -------------------------------- ### Examples Source: https://lemonadejs.com/docs/plugins/timeline Illustrates practical applications of the JavaScript timeline plugin, highlighting customization techniques. ```APIDOC ## Examples This section illustrates practical applications of the JavaScript timeline plugin, highlighting customization techniques for style and functionality to align with specific project objectives. See more examples on https://codesandbox.io/p/sandbox/frosty-babycat-cjcwrk ``` -------------------------------- ### Vanilla JavaScript Component Example for LemonadeJS Signature Pad Source: https://lemonadejs.com/docs/plugins/signature Shows how to integrate the LemonadeJS signature pad within a Vanilla JavaScript component. This example utilizes the `render` function for component rendering. ```javascript import lemonade from "lemonadejs"; import Signature from "@lemonadejs/signature"; export default function Component() { // Value this.value = []; // return render => render` `; } ``` -------------------------------- ### Install Tabs via NPM Source: https://lemonadejs.com/docs/plugins/tabs Use this command to add the Tabs package to your project. ```bash npm install @lemonadejs/tabs ``` -------------------------------- ### React Example for LemonadeJS Signature Pad Source: https://lemonadejs.com/docs/plugins/signature Integrates the LemonadeJS signature pad into a React application using a ref for accessing component methods. This example demonstrates basic usage within a functional component. ```javascript import React, { useRef } from 'react'; import Signature from '@lemonadejs/signature/dist/react'; export default function App() { const signatureRef = useRef(); return (<> ); } ``` -------------------------------- ### Install LemonadeJS Switch Source: https://lemonadejs.com/docs/plugins/switch Use npm to add the switch component to your project dependencies. ```bash npm install @lemonadejs/switch ``` -------------------------------- ### Include LemonadeJS via CDN Source: https://lemonadejs.com/docs/getting-started Add this script tag to your HTML files to include the LemonadeJS library directly from a CDN. This is a quick way to get started without a build process. ```html ``` -------------------------------- ### Vue List Component Integration Source: https://lemonadejs.com/docs/plugins/list Integrate the LemonadeJS List component into a Vue.js application. This example uses Vue's template syntax and script setup for component logic. Ensure the List component and its styles are imported. ```html
``` -------------------------------- ### Create a dynamic Lamp component in HTML Source: https://lemonadejs.com/docs/examples/lamp A complete HTML example demonstrating a component that updates its image source based on the internal value property. ```html
``` -------------------------------- ### Initialize Basic Image Cropper Source: https://lemonadejs.com/docs/plugins/image-cropper A minimal implementation showing how to mount the cropper to a DOM element. ```html
``` -------------------------------- ### Initialize Data Grid with Large Dataset (Vanilla JS) Source: https://lemonadejs.com/docs/plugins/data-grid This snippet shows how to initialize the Data Grid in vanilla JavaScript, configure columns, enable search and pagination, and fetch a large dataset from a remote API to populate the grid. ```html
``` -------------------------------- ### LemonadeJS Color Picker - Installation Source: https://lemonadejs.com/docs/plugins/color-picker Install the LemonadeJS Color Picker component using npm. ```APIDOC ## Installation ``` npm install @lemonadejs/color ``` ``` -------------------------------- ### Implement Grouped Dropdown with Multiple Selection Source: https://lemonadejs.com/docs/plugins/dropdown Examples demonstrating how to configure a dropdown with grouped data and multiple selection enabled across different frameworks. ```html
``` ```javascript import Dropdown from '@lemonadejs/dropdown'; import '@lemonadejs/dropdown/dist/style.css' import '@lemonadejs/modal/dist/style.css'; export default function App() { this.data = [ { "text": "Red", "value": 1, "group": "Warm" }, { "text": "Blue", "value": 2, "group": "Cool" }, { "text": "Green", "value": 3, "group": "Cool" }, { "text": "Yellow", "value": 4, "group": "Warm" }, { "text": "Purple", "value": 5, "group": "Cool" }, { "text": "Gray", "value": 6, "group": "Cool" } ] return render => render`
` } ``` ```javascript import React, { useRef } from 'react'; import Dropdown from '@lemonadejs/dropdown/dist/react'; import '@lemonadejs/dropdown/dist/style.css' import '@lemonadejs/modal/dist/style.css' const data = [ { "text": "Red", "value": 1, "group": "Warm" }, { "text": "Blue", "value": 2, "group": "Cool" }, { "text": "Green", "value": 3, "group": "Cool" }, { "text": "Yellow", "value": 4, "group": "Warm" }, { "text": "Purple", "value": 5, "group": "Cool" }, { "text": "Gray", "value": 6, "group": "Cool" } ] export default function App() { const myRef = useRef(); return (
); } ``` ```vue ``` -------------------------------- ### Install LemonadeJS Router Source: https://lemonadejs.com/docs/plugins/router Install the LemonadeJS Router using npm. This is the first step to integrate routing into your project. ```bash npm install @lemonadejs/router ``` -------------------------------- ### Install LemonadeJS Calendar Source: https://lemonadejs.com/docs/plugins/calendar Install the LemonadeJS Calendar component using npm. This package provides a reactive calendar component. ```bash npm install @lemonadejs/calendar ``` -------------------------------- ### Create a New LemonadeJS Project Source: https://lemonadejs.com/docs/getting-started Use the LemonadeJS CLI to quickly scaffold a new project. Navigate into the project directory and start the development server to begin building your application. ```bash # Create a new project npx @lemonadejs/create my-app # Navigate to project directory cd my-app # Start development server npm run dev ``` -------------------------------- ### Install LemonadeJS Dropdown Source: https://lemonadejs.com/docs/plugins/dropdown Use npm to install the LemonadeJS Dropdown package. This command is essential for integrating the component into your project. ```bash npm install @lemonadejs/dropdown ``` -------------------------------- ### Configure Advanced Cropper Settings Source: https://lemonadejs.com/docs/plugins/image-cropper Demonstrates setting initial configuration, programmatically updating the image, and retrieving cropped data. ```javascript const cropper = Cropper(document.getElementById('root'), { width: 500, // Crop area width height: 400, // Crop area height original: true, // Preserve original image name: 'profile_pic' // Form field name }); // Set an image programmatically cropper.setValue({ file: 'https://example.com/image.jpg' }); // Get cropped image data const imageData = cropper.getValue(); console.log(imageData); // Output: { file: 'blob:...', content: 'data:image/png;base64,...', extension: 'png' } ``` -------------------------------- ### LemonadeJS Color Picker - Usage Example (JavaScript Module) Source: https://lemonadejs.com/docs/plugins/color-picker Example of importing and using the LemonadeJS Color Picker as a JavaScript module. ```APIDOC ```javascript import lemonade from 'lemonadejs' import Color from '@lemonadejs/color'; import '@lemonadejs/color/dist/style.css'; import Tabs from '@lemonadejs/tabs'; import '@lemonadejs/tabs/dist/style.css'; export default function App() { return render => render``; } ``` ``` -------------------------------- ### Create Dropdown with 100000 Items (Vanilla JS) Source: https://lemonadejs.com/docs/plugins/dropdown This example shows how to create a dropdown with a large dataset (100,000 items) using vanilla JavaScript and the Faker library for generating product names. It measures and displays the time taken to create the dropdown. ```html
``` -------------------------------- ### LemonadeJS Color Picker - Usage Example (Vue) Source: https://lemonadejs.com/docs/plugins/color-picker Example of using the LemonadeJS Color Picker component within a Vue.js application. ```APIDOC ```html ``` ``` -------------------------------- ### Implement Switch Component Source: https://lemonadejs.com/docs/plugins/switch Examples of integrating the switch component across different environments including vanilla JS, React, and Vue. ```html
``` ```javascript import Switch from '@lemonadejs/switch'; import '@lemonadejs/switch/dist/style.css' export default function App() { this.value = false; return render => render`

Value: ${this.value}

` } ``` ```javascript import React, { useRef } from 'react'; import Switch from '@lemonadejs/switch/dist/react'; import '@lemonadejs/switch/dist/style.css' export default function App() { const myRef = useRef(); return (
); ``` ```html ``` -------------------------------- ### LemonadeJS Color Picker - Usage Example (React) Source: https://lemonadejs.com/docs/plugins/color-picker Example of using the LemonadeJS Color Picker component within a React application. ```APIDOC ```javascript import React, { useRef } from 'react'; import Color from '@lemonadejs/color/dist/react'; import '@lemonadejs/color/dist/style.css'; import Tabs from '@lemonadejs/tabs/dist/react'; import '@lemonadejs/tabs/dist/style.css'; export default function App() { const myRef = useRef(); return (<> ); } ``` ``` -------------------------------- ### Install LemonadeJS Data Grid Source: https://lemonadejs.com/docs/plugins/data-grid Install the LemonadeJS Data Grid using npm. This package provides a lightweight data grid component. ```bash npm install @lemonadejs/data-grid ``` -------------------------------- ### Implement a Color Picker with CDN Source: https://lemonadejs.com/docs/examples/color-picker A complete HTML example using LemonadeJS and the color component via CDN links. ```html
``` -------------------------------- ### Install LemonadeJS Star Rating Source: https://lemonadejs.com/docs/plugins/rating Install the LemonadeJS Star Rating plugin using npm. This is the first step to integrating the rating component into your project. ```bash 1 npm install @lemonadejs/rating ``` -------------------------------- ### Initialize Signature Component (Plain JavaScript) Source: https://lemonadejs.com/docs/plugins/signature Initializes the Signature component with specified dimensions and instructions. Use this for direct integration into HTML. ```javascript const root = document.getElementById("root") const resetCanvas = document.getElementById("resetCanvas") const getImage = document.getElementById("getImage") // Call signature with the root element and the options object, saving its reference in a variable const component = Signature(root, { width: 500, height: 100, instructions: "Please sign in the box above" }); resetCanvas.addEventListener("click", () => { component.value = []; }); getImage.addEventListener("click", () => { getImage.nextElementSibling.src = component.getImage(); }); ``` -------------------------------- ### Install LemonadeJS via NPM Source: https://lemonadejs.com/docs/contributions Use this command to install LemonadeJS for easy integration into your projects. This is the standard method for adding the library to your development environment. ```bash npm install lemonadejs ``` -------------------------------- ### Create Dropdown with 100000 Items (React) Source: https://lemonadejs.com/docs/plugins/dropdown This React example shows how to implement the Dropdown component with a large dataset. It uses the `useRef` hook and imports necessary CSS files. ```javascript import React, { useRef } from 'react'; import Dropdown from '@lemonadejs/dropdown/dist/react'; import { faker } from '@faker-js/faker'; import '@lemonadejs/dropdown/dist/style.css' import '@lemonadejs/modal/dist/style.css' let data = []; for (let i = 0; i < 100000; i++) { data.push({ value: i, text: faker.commerce.productName() }); } export default function App() { const myRef = useRef(); return (
); } ``` -------------------------------- ### Hangman Game Example in JavaScript Source: https://lemonadejs.com/docs/examples/hangman A minimal implementation of the Hangman game using LemonadeJS. This example demonstrates basic game logic and UI interaction. ```javascript const app = new LemonadeJS( 'app', { state: { name: 'Hangman', question: 'Guess the name of the fruit', answer: 'apple', guess: '', tries: 5, message: '' }, methods: { doGuess: function() { if (this.state.guess.toLowerCase() === this.state.answer.toLowerCase()) { this.state.message = 'You guessed it!'; } else { this.state.tries--; if (this.state.tries === 0) { this.state.message = 'You lost!'; } else { this.state.message = 'Try again!'; } } this.state.guess = ''; } } } ); ```