@lowdefy/blocks-antd 5.5.1 → 6.0.0

package/dist/blocks/AutoComplete/gallery.yaml

@@ -0,0 +1,713 @@
+# Copyright 2020-2026 Lowdefy, Inc
+
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+
+#     http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+- title: Basic
+  blocks:
+    - id: basic
+      type: AutoComplete
+      properties:
+        title: Fruit
+        placeholder: Type a fruit name
+        options:
+          - Apple
+          - Apricot
+          - Avocado
+          - Banana
+          - Blueberry
+          - Cherry
+          - Grape
+          - Mango
+          - Orange
+          - Peach
+    - id: basic_countries
+      type: AutoComplete
+      properties:
+        title: Country
+        placeholder: Search countries
+        options:
+          - Australia
+          - Austria
+          - Belgium
+          - Brazil
+          - Canada
+          - Denmark
+          - France
+          - Germany
+          - Japan
+          - United Kingdom
+          - United States
+
+- title: Sizes
+  blocks:
+    - id: size_small
+      type: AutoComplete
+      properties:
+        title: Small
+        size: small
+        placeholder: Type to search
+        options:
+          - Apple
+          - Banana
+          - Cherry
+    - id: size_default
+      type: AutoComplete
+      properties:
+        title: Default
+        placeholder: Type to search
+        options:
+          - Apple
+          - Banana
+          - Cherry
+    - id: size_large
+      type: AutoComplete
+      properties:
+        title: Large
+        size: large
+        placeholder: Type to search
+        options:
+          - Apple
+          - Banana
+          - Cherry
+
+- title: Allow Clear
+  blocks:
+    - id: allow_clear_true
+      type: AutoComplete
+      properties:
+        title: With Clear Button (default)
+        allowClear: true
+        placeholder: Select and clear
+        options:
+          - Option A
+          - Option B
+          - Option C
+    - id: allow_clear_false
+      type: AutoComplete
+      properties:
+        title: Without Clear Button
+        allowClear: false
+        placeholder: No clear button
+        options:
+          - Option A
+          - Option B
+          - Option C
+
+- title: Backfill Mode
+  blocks:
+    - id: backfill_enabled
+      type: AutoComplete
+      properties:
+        title: Backfill Enabled
+        backfill: true
+        placeholder: Use arrow keys to backfill
+        options:
+          - JavaScript
+          - TypeScript
+          - Python
+          - Ruby
+          - Go
+          - Rust
+    - id: backfill_disabled
+      type: AutoComplete
+      properties:
+        title: Backfill Disabled (default)
+        backfill: false
+        placeholder: Arrow keys highlight only
+        options:
+          - JavaScript
+          - TypeScript
+          - Python
+          - Ruby
+          - Go
+          - Rust
+
+- title: Default Open
+  blocks:
+    - id: default_open_true
+      type: AutoComplete
+      properties:
+        title: Dropdown Open on Render
+        defaultOpen: true
+        placeholder: Dropdown visible immediately
+        options:
+          - Red
+          - Green
+          - Blue
+          - Yellow
+          - Purple
+
+- title: Placeholder Variations
+  blocks:
+    - id: placeholder_custom
+      type: AutoComplete
+      properties:
+        title: Custom Placeholder
+        placeholder: Start typing to search languages...
+        options:
+          - JavaScript
+          - TypeScript
+          - Python
+          - Ruby
+          - Java
+          - C++
+    - id: placeholder_default
+      type: AutoComplete
+      properties:
+        title: Default Placeholder
+        options:
+          - Alpha
+          - Beta
+          - Gamma
+          - Delta
+
+- title: Variants
+  blocks:
+    - id: variant_outlined
+      type: AutoComplete
+      properties:
+        title: Outlined (default)
+        variant: outlined
+        placeholder: Standard border
+        options:
+          - Option A
+          - Option B
+          - Option C
+    - id: variant_filled
+      type: AutoComplete
+      properties:
+        title: Filled
+        variant: filled
+        placeholder: Filled background
+        options:
+          - Option A
+          - Option B
+          - Option C
+    - id: variant_borderless
+      type: AutoComplete
+      properties:
+        title: Borderless
+        variant: borderless
+        placeholder: No border style
+        options:
+          - Option A
+          - Option B
+          - Option C
+
+- title: Disabled
+  blocks:
+    - id: disabled_true
+      type: AutoComplete
+      properties:
+        title: Disabled
+        disabled: true
+        placeholder: Cannot interact
+        options:
+          - Option A
+          - Option B
+          - Option C
+    - id: disabled_false
+      type: AutoComplete
+      properties:
+        title: Enabled (default)
+        disabled: false
+        placeholder: Can interact
+        options:
+          - Option A
+          - Option B
+          - Option C
+
+- title: AutoFocus
+  blocks:
+    - id: autofocus_true
+      type: AutoComplete
+      properties:
+        title: AutoFocus Enabled
+        autoFocus: true
+        placeholder: Focused on page load
+        options:
+          - Mercury
+          - Venus
+          - Earth
+          - Mars
+          - Jupiter
+          - Saturn
+
+- title: Many Options
+  blocks:
+    - id: many_options
+      type: AutoComplete
+      properties:
+        title: Programming Languages
+        placeholder: Type to filter languages
+        options:
+          - Assembly
+          - Bash
+          - C
+          - C++
+          - C#
+          - Clojure
+          - COBOL
+          - Dart
+          - Elixir
+          - Erlang
+          - F#
+          - Fortran
+          - Go
+          - Groovy
+          - Haskell
+          - Java
+          - JavaScript
+          - Julia
+          - Kotlin
+          - Lisp
+          - Lua
+          - MATLAB
+          - Objective-C
+          - OCaml
+          - Pascal
+          - Perl
+          - PHP
+          - PowerShell
+          - Python
+          - R
+          - Ruby
+          - Rust
+          - Scala
+          - Shell
+          - SQL
+          - Swift
+          - TypeScript
+          - VBA
+          - Zig
+
+- title: Label Options
+  blocks:
+    - id: label_title
+      type: AutoComplete
+      properties:
+        title: Custom Label Title
+        label:
+          title: Choose a color
+        placeholder: Type a color
+        options:
+          - Red
+          - Green
+          - Blue
+          - Yellow
+    - id: label_extra
+      type: AutoComplete
+      properties:
+        title: Label with Extra
+        label:
+          title: City
+          extra: Select the city you live in
+        placeholder: Type a city name
+        options:
+          - New York
+          - London
+          - Tokyo
+          - Paris
+          - Berlin
+          - Sydney
+    - id: label_no_colon
+      type: AutoComplete
+      properties:
+        title: Label without Colon
+        label:
+          title: Animal
+          colon: false
+        placeholder: Type an animal
+        options:
+          - Cat
+          - Dog
+          - Elephant
+          - Giraffe
+          - Lion
+    - id: label_inline
+      type: AutoComplete
+      properties:
+        title: Inline Label
+        label:
+          title: Framework
+          inline: true
+          span: 8
+        placeholder: Type to search
+        options:
+          - React
+          - Vue
+          - Angular
+          - Svelte
+          - Solid
+    - id: label_inline_right
+      type: AutoComplete
+      properties:
+        title: Inline Label Right Aligned
+        label:
+          title: Database
+          inline: true
+          span: 8
+          align: right
+        placeholder: Type to search
+        options:
+          - PostgreSQL
+          - MySQL
+          - MongoDB
+          - Redis
+          - SQLite
+
+- title: Hidden Label
+  blocks:
+    - id: label_hidden
+      type: AutoComplete
+      properties:
+        label:
+          disabled: true
+        placeholder: No label displayed
+        options:
+          - Option A
+          - Option B
+          - Option C
+    - id: label_hidden_large
+      type: AutoComplete
+      properties:
+        label:
+          disabled: true
+        size: large
+        placeholder: Large with no label
+        options:
+          - First
+          - Second
+          - Third
+
+- title: Style Overrides
+  blocks:
+    - id: style_element
+      type: AutoComplete
+      style:
+        .element:
+          borderColor: '#722ed1'
+      properties:
+        title: Custom Border Color
+        placeholder: Purple border
+        options:
+          - Option A
+          - Option B
+          - Option C
+    - id: style_background
+      type: AutoComplete
+      style:
+        .element:
+      properties:
+        title: Custom Background
+        placeholder: Light green background
+        options:
+          - Option A
+          - Option B
+          - Option C
+    - id: style_label
+      type: AutoComplete
+      style:
+        .label:
+          fontWeight: bold
+          color: '#1677ff'
+      properties:
+        title: Styled Label
+        placeholder: Blue bold label
+        options:
+          - Option A
+          - Option B
+          - Option C
+
+- title: Class Overrides
+  blocks:
+    - id: class_element
+      type: AutoComplete
+      class:
+        element: rounded-lg shadow-sm
+      properties:
+        title: Custom Class
+        placeholder: Tailwind classes applied
+        options:
+          - JavaScript
+          - TypeScript
+          - Python
+
+- title: Theme Token Overrides
+  blocks:
+    - id: theme_border_radius
+      type: AutoComplete
+      properties:
+        title: Large Border Radius
+        placeholder: Rounded corners
+        options:
+          - Option A
+          - Option B
+          - Option C
+        theme:
+          borderRadius: 16
+    - id: theme_font_size
+      type: AutoComplete
+      properties:
+        title: Large Font Size
+        placeholder: Bigger text
+        options:
+          - Option A
+          - Option B
+          - Option C
+        theme:
+          fontSize: 18
+    - id: theme_custom_colors
+      type: AutoComplete
+      properties:
+        title: Custom Colors
+        placeholder: Styled with theme tokens
+        options:
+          - Red
+          - Green
+          - Blue
+        theme:
+          colorPrimary: '#722ed1'
+          colorPrimaryHover: '#9254de'
+    - id: theme_option_selected
+      type: AutoComplete
+      properties:
+        title: Custom Selected Option Style
+        placeholder: Custom option highlight
+        options:
+          - Apple
+          - Banana
+          - Cherry
+          - Dragonfruit
+        theme:
+          optionSelectedColor: '#531dab'
+          optionSelectedFontWeight: 700
+    - id: theme_option_height
+      type: AutoComplete
+      properties:
+        title: Taller Options
+        placeholder: Taller dropdown items
+        options:
+          - First Item
+          - Second Item
+          - Third Item
+        theme:
+          optionHeight: 44
+          optionFontSize: 16
+    - id: theme_control_height
+      type: AutoComplete
+      properties:
+        title: Custom Control Height
+        placeholder: Taller input
+        options:
+          - Option A
+          - Option B
+          - Option C
+        theme:
+          controlHeight: 44
+          controlHeightLG: 52
+    - id: theme_combined
+      type: AutoComplete
+      properties:
+        title: Combined Token Overrides
+        placeholder: Multiple tokens combined
+        options:
+          - React
+          - Vue
+          - Angular
+          - Svelte
+        theme:
+          borderRadius: 12
+          colorPrimary: '#52c41a'
+          colorPrimaryHover: '#73d13d'
+          fontSize: 15
+          controlHeight: 40
+
+- title: Sizes with Disabled
+  blocks:
+    - id: disabled_small
+      type: AutoComplete
+      properties:
+        title: Disabled Small
+        size: small
+        disabled: true
+        placeholder: Disabled small
+        options:
+          - Alpha
+          - Beta
+    - id: disabled_default
+      type: AutoComplete
+      properties:
+        title: Disabled Default
+        disabled: true
+        placeholder: Disabled default
+        options:
+          - Alpha
+          - Beta
+    - id: disabled_large
+      type: AutoComplete
+      properties:
+        title: Disabled Large
+        size: large
+        disabled: true
+        placeholder: Disabled large
+        options:
+          - Alpha
+          - Beta
+
+- title: Sizes with Variants
+  blocks:
+    - id: filled_small
+      type: AutoComplete
+      properties:
+        title: Filled Small
+        size: small
+        variant: filled
+        placeholder: Filled small
+        options:
+          - One
+          - Two
+          - Three
+    - id: filled_default
+      type: AutoComplete
+      properties:
+        title: Filled Default
+        variant: filled
+        placeholder: Filled default
+        options:
+          - One
+          - Two
+          - Three
+    - id: filled_large
+      type: AutoComplete
+      properties:
+        title: Filled Large
+        size: large
+        variant: filled
+        placeholder: Filled large
+        options:
+          - One
+          - Two
+          - Three
+
+- title: AutoComplete in Search Form
+  blocks:
+    - id: applied_search_form
+      type: Card
+      properties:
+        title: Product Search
+      blocks:
+        - id: applied_search_input
+          type: AutoComplete
+          properties:
+            title: Search Products
+            placeholder: Start typing a product name...
+            size: large
+            options:
+              - MacBook Pro 16"
+              - MacBook Air M3
+              - iPad Pro 13"
+              - iPhone 16 Pro
+              - Apple Watch Ultra
+              - AirPods Pro
+          events:
+            onChange:
+              - id: search_message
+                type: DisplayMessage
+                params:
+                  content:
+                    _string.concat:
+                      - 'Searching for: '
+                      - _state: applied_search_input
+                  duration: 1
+        - id: applied_search_button
+          type: Button
+          properties:
+            title: Search
+            icon: AiOutlineSearch
+            type: primary
+            size: large
+          events:
+            onClick:
+              - id: search_action
+                type: DisplayMessage
+                params:
+                  content:
+                    _if:
+                      test:
+                        _ne:
+                          - _state: applied_search_input
+                          - null
+                      then:
+                        _string.concat:
+                          - 'Searching for: '
+                          - _state: applied_search_input
+                      else: Please enter a search term
+
+- title: AutoComplete in User Profile Form
+  blocks:
+    - id: applied_profile_card
+      type: Card
+      properties:
+        title: Profile Settings
+      blocks:
+        - id: applied_profile_name
+          type: TextInput
+          properties:
+            title: Full Name
+            placeholder: Enter your full name
+        - id: applied_profile_role
+          type: AutoComplete
+          properties:
+            title: Job Title
+            label:
+              extra: Select a common title or type your own
+            placeholder: e.g. Software Engineer
+            options:
+              - Software Engineer
+              - Senior Software Engineer
+              - Staff Engineer
+              - Engineering Manager
+              - Product Manager
+              - Designer
+              - Data Scientist
+              - DevOps Engineer
+              - QA Engineer
+              - Technical Lead
+        - id: applied_profile_department
+          type: AutoComplete
+          properties:
+            title: Department
+            placeholder: Select or type department
+            options:
+              - Engineering
+              - Product
+              - Design
+              - Marketing
+              - Sales
+              - Operations
+              - Finance
+              - Human Resources
+        - id: applied_profile_save
+          type: Button
+          properties:
+            title: Save Profile
+            type: primary
+            icon: AiOutlineSave
+          events:
+            onClick:
+              - id: save_action
+                type: DisplayMessage
+                params:
+                  content: Profile saved successfully
+                  status: success