@lowdefy/blocks-antd 5.6.0 → 6.0.0

package/dist/blocks/SegmentedSelector/gallery.yaml

@@ -0,0 +1,725 @@
+# 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 String Options
+  blocks:
+    - id: basic_strings
+      type: SegmentedSelector
+      properties:
+        title: View
+        options:
+          - Daily
+          - Weekly
+          - Monthly
+    - id: basic_numbers
+      type: SegmentedSelector
+      properties:
+        title: Rating
+        options:
+          - '1'
+          - '2'
+          - '3'
+          - '4'
+          - '5'
+    - id: basic_two
+      type: SegmentedSelector
+      properties:
+        title: Toggle
+        options:
+          - 'Yes'
+          - 'No'
+
+- title: Label-Value Options
+  blocks:
+    - id: label_value_basic
+      type: SegmentedSelector
+      properties:
+        title: Status Filter
+        options:
+          - label: All
+            value: all
+          - label: Active
+            value: active
+          - label: Inactive
+            value: inactive
+          - label: Archived
+            value: archived
+    - id: label_value_roles
+      type: SegmentedSelector
+      properties:
+        title: User Role
+        options:
+          - label: Admin
+            value: admin
+          - label: Editor
+            value: editor
+          - label: Viewer
+            value: viewer
+    - id: label_value_many
+      type: SegmentedSelector
+      properties:
+        title: Time Range
+        options:
+          - label: 1H
+            value: 1h
+          - label: 6H
+            value: 6h
+          - label: 1D
+            value: 1d
+          - label: 1W
+            value: 1w
+          - label: 1M
+            value: 1m
+          - label: 1Y
+            value: 1y
+
+- title: Sizes
+  blocks:
+    - id: size_small
+      type: SegmentedSelector
+      properties:
+        title: Small
+        size: small
+        options:
+          - S
+          - M
+          - L
+          - XL
+    - id: size_default
+      type: SegmentedSelector
+      properties:
+        title: Default
+        options:
+          - S
+          - M
+          - L
+          - XL
+    - id: size_large
+      type: SegmentedSelector
+      properties:
+        title: Large
+        size: large
+        options:
+          - S
+          - M
+          - L
+          - XL
+
+- title: Size Comparison with Label-Value
+  blocks:
+    - id: size_small_lv
+      type: SegmentedSelector
+      properties:
+        title: Small Priority
+        size: small
+        options:
+          - label: Low
+            value: low
+          - label: Medium
+            value: medium
+          - label: High
+            value: high
+          - label: Critical
+            value: critical
+    - id: size_default_lv
+      type: SegmentedSelector
+      properties:
+        title: Default Priority
+        options:
+          - label: Low
+            value: low
+          - label: Medium
+            value: medium
+          - label: High
+            value: high
+          - label: Critical
+            value: critical
+    - id: size_large_lv
+      type: SegmentedSelector
+      properties:
+        title: Large Priority
+        size: large
+        options:
+          - label: Low
+            value: low
+          - label: Medium
+            value: medium
+          - label: High
+            value: high
+          - label: Critical
+            value: critical
+
+- title: Shape and Block Mode
+  blocks:
+    - id: shape_default
+      type: SegmentedSelector
+      properties:
+        title: Default Shape
+        shape: default
+        options:
+          - label: List
+            value: list
+          - label: Grid
+            value: grid
+          - label: Board
+            value: board
+    - id: shape_round
+      type: SegmentedSelector
+      properties:
+        title: Round Shape
+        shape: round
+        options:
+          - label: List
+            value: list
+          - label: Grid
+            value: grid
+          - label: Board
+            value: board
+    - id: block_segmented
+      type: SegmentedSelector
+      properties:
+        title: Full Width
+        block: true
+        options:
+          - label: List
+            value: list
+          - label: Grid
+            value: grid
+          - label: Board
+            value: board
+    - id: block_round
+      type: SegmentedSelector
+      properties:
+        title: Full Width Round
+        block: true
+        shape: round
+        options:
+          - label: Newest
+            value: newest
+          - label: Popular
+            value: popular
+          - label: Trending
+            value: trending
+    - id: block_round_large
+      type: SegmentedSelector
+      properties:
+        title: Full Width Round Large
+        block: true
+        shape: round
+        size: large
+        options:
+          - label: All
+            value: all
+          - label: Images
+            value: images
+          - label: Videos
+            value: videos
+          - label: Documents
+            value: documents
+
+- title: With Icons
+  blocks:
+    - id: icon_view_mode
+      type: SegmentedSelector
+      properties:
+        title: View Mode
+        options:
+          - label: List
+            value: list
+            icon: AiOutlineUnorderedList
+          - label: Grid
+            value: grid
+            icon: AiOutlineAppstore
+          - label: Calendar
+            value: calendar
+            icon: AiOutlineCalendar
+    - id: icon_small
+      type: SegmentedSelector
+      properties:
+        title: Small Icons
+        size: small
+        options:
+          - label: Map
+            value: map
+            icon: AiOutlineEnvironment
+          - label: Satellite
+            value: satellite
+            icon: AiOutlineGlobal
+          - label: Terrain
+            value: terrain
+            icon: AiOutlineBlock
+    - id: icon_block
+      type: SegmentedSelector
+      properties:
+        title: Full Width with Icons
+        block: true
+        options:
+          - label: Home
+            value: home
+            icon: AiOutlineHome
+          - label: Search
+            value: search
+            icon: AiOutlineSearch
+          - label: Favorites
+            value: favorites
+            icon: AiOutlineHeart
+          - label: Profile
+            value: profile
+            icon: AiOutlineUser
+    - id: icon_round
+      type: SegmentedSelector
+      properties:
+        title: Round with Icons
+        shape: round
+        options:
+          - label: Code
+            value: code
+            icon: AiOutlineCode
+          - label: Preview
+            value: preview
+            icon: AiOutlineEye
+          - label: Split
+            value: split
+            icon: AiOutlineColumnWidth
+
+- title: Vertical Layout
+  blocks:
+    - id: vertical_basic
+      type: SegmentedSelector
+      properties:
+        title: Vertical
+        vertical: true
+        options:
+          - label: Overview
+            value: overview
+          - label: Details
+            value: details
+          - label: History
+            value: history
+    - id: vertical_icons
+      type: SegmentedSelector
+      properties:
+        title: Vertical with Icons
+        vertical: true
+        options:
+          - label: Dashboard
+            value: dashboard
+            icon: AiOutlineDashboard
+          - label: Analytics
+            value: analytics
+            icon: AiOutlineBarChart
+          - label: Reports
+            value: reports
+            icon: AiOutlineFileText
+          - label: Settings
+            value: settings
+            icon: AiOutlineSetting
+    - id: vertical_large
+      type: SegmentedSelector
+      properties:
+        title: Large Vertical
+        vertical: true
+        size: large
+        options:
+          - Tab 1
+          - Tab 2
+          - Tab 3
+
+- title: Disabled
+  blocks:
+    - id: disabled_all
+      type: SegmentedSelector
+      properties:
+        title: Fully Disabled
+        disabled: true
+        options:
+          - Option A
+          - Option B
+          - Option C
+    - id: disabled_multiple
+      type: SegmentedSelector
+      properties:
+        title: Multiple Disabled Options
+        options:
+          - label: Free
+            value: free
+          - label: Basic
+            value: basic
+          - label: Pro (Coming Soon)
+            value: pro
+            disabled: true
+          - label: Enterprise (Coming Soon)
+            value: enterprise
+            disabled: true
+    - id: disabled_icons
+      type: SegmentedSelector
+      properties:
+        title: Disabled with Icons
+        disabled: true
+        options:
+          - label: Edit
+            value: edit
+            icon: AiOutlineEdit
+          - label: View
+            value: view
+            icon: AiOutlineEye
+          - label: Delete
+            value: delete
+            icon: AiOutlineDelete
+
+- title: Label Options
+  blocks:
+    - id: label_default
+      type: SegmentedSelector
+      properties:
+        title: Default Label
+        options:
+          - Alpha
+          - Beta
+          - Gamma
+    - id: label_extra
+      type: SegmentedSelector
+      properties:
+        title: With Extra Text
+        label:
+          extra: Select the deployment environment
+        options:
+          - label: Dev
+            value: dev
+          - label: Staging
+            value: staging
+          - label: Prod
+            value: prod
+    - id: label_inline
+      type: SegmentedSelector
+      properties:
+        title: Inline Label
+        label:
+          inline: true
+          span: 6
+        options:
+          - label: Light
+            value: light
+          - label: Dark
+            value: dark
+          - label: Auto
+            value: auto
+    - id: label_inline_right
+      type: SegmentedSelector
+      properties:
+        title: Inline Right
+        label:
+          inline: true
+          span: 6
+          align: right
+        options:
+          - label: Light
+            value: light
+          - label: Dark
+            value: dark
+          - label: Auto
+            value: auto
+    - id: no_label_segmented
+      type: SegmentedSelector
+      properties:
+        label:
+          disabled: true
+        options:
+          - label: Day
+            value: day
+          - label: Week
+            value: week
+          - label: Month
+            value: month
+          - label: Year
+            value: year
+
+- title: Style and Class Overrides
+  blocks:
+    - id: style_background
+      type: SegmentedSelector
+      properties:
+        title: Custom Background
+        options:
+          - label: Tab A
+            value: a
+          - label: Tab B
+            value: b
+          - label: Tab C
+            value: c
+      style:
+        .element:
+          borderRadius: 12
+    - id: style_border
+      type: SegmentedSelector
+      properties:
+        title: Custom Border
+        options:
+          - label: Left
+            value: left
+          - label: Center
+            value: center
+          - label: Right
+            value: right
+      style:
+        .element:
+          border: '2px solid #91caff'
+          borderRadius: 8
+    - id: class_shadow
+      type: SegmentedSelector
+      class: shadow-md
+      properties:
+        title: With Shadow
+        options:
+          - label: Recent
+            value: recent
+          - label: Popular
+            value: popular
+          - label: Featured
+            value: featured
+
+- title: Theme Token Overrides
+  blocks:
+    - id: theme_dark_track
+      type: SegmentedSelector
+      properties:
+        title: Dark Track
+        options:
+          - label: Overview
+            value: overview
+          - label: Details
+            value: details
+          - label: Logs
+            value: logs
+        theme:
+          trackBg: '#1f1f1f'
+          itemColor: '#ffffffa6'
+          itemSelectedBg: '#177ddc'
+          itemSelectedColor: '#ffffff'
+          itemHoverColor: '#ffffffd9'
+    - id: theme_green
+      type: SegmentedSelector
+      properties:
+        title: Green Theme
+        options:
+          - label: Approved
+            value: approved
+          - label: Pending
+            value: pending
+          - label: Rejected
+            value: rejected
+        theme:
+          itemSelectedBg: '#52c41a'
+          itemSelectedColor: '#ffffff'
+          itemHoverBg: '#b7eb8f80'
+    - id: theme_purple
+      type: SegmentedSelector
+      properties:
+        title: Purple Theme
+        options:
+          - label: Basic
+            value: basic
+          - label: Premium
+            value: premium
+          - label: Enterprise
+            value: enterprise
+        theme:
+          itemSelectedBg: '#722ed1'
+          itemSelectedColor: '#ffffff'
+    - id: theme_round_dark
+      type: SegmentedSelector
+      properties:
+        title: Round Dark Pill
+        shape: round
+        size: large
+        options:
+          - label: Light
+            value: light
+          - label: Dark
+            value: dark
+          - label: System
+            value: system
+        theme:
+          trackBg: '#262626'
+          itemColor: '#ffffffa6'
+          itemSelectedBg: '#434343'
+          itemSelectedColor: '#ffffff'
+          itemHoverColor: '#ffffffd9'
+          borderRadius: 40
+          borderRadiusLG: 40
+    - id: theme_block_gradient
+      type: SegmentedSelector
+      properties:
+        title: Full Width Themed
+        block: true
+        options:
+          - label: Dashboard
+            value: dashboard
+          - label: Projects
+            value: projects
+          - label: Tasks
+            value: tasks
+          - label: Calendar
+            value: calendar
+        theme:
+          itemSelectedBg: '#2f54eb'
+          itemSelectedColor: '#ffffff'
+          trackPadding: 4
+
+- title: SegmentedSelector in Dashboard View
+  blocks:
+    - id: applied2_dashboard_card
+      type: Card
+      properties:
+        title: Sales Dashboard
+      blocks:
+        - id: applied2_dashboard_view_toggle
+          type: SegmentedSelector
+          properties:
+            title: View
+            block: true
+            size: large
+            label:
+              disabled: true
+            options:
+              - label: Overview
+                value: overview
+                icon: AiOutlineDashboard
+              - label: Charts
+                value: charts
+                icon: AiOutlineBarChart
+              - label: Table
+                value: table
+                icon: AiOutlineTable
+          events:
+            onChange:
+              - id: view_changed_action
+                type: SetState
+                params:
+                  applied2_dashboard_view:
+                    _state: applied2_dashboard_view_toggle
+        - id: applied2_dashboard_date_range
+          type: DateRangeSelector
+          properties:
+            title: Date Range
+            placeholder:
+              - From
+              - To
+            format: DD MMM YYYY
+            label:
+              disabled: true
+        - id: applied2_dashboard_refresh_btn
+          type: Button
+          properties:
+            title: Refresh Data
+            icon: AiOutlineReload
+            type: primary
+          events:
+            onClick:
+              - id: refresh_action
+                type: DisplayMessage
+                params:
+                  content: Dashboard data refreshed.
+                  duration: 2
+
+- title: SegmentedSelector in Settings Page
+  blocks:
+    - id: applied3_settings_card
+      type: Card
+      properties:
+        title: Application Settings
+      blocks:
+        - id: applied3_theme_selector
+          type: SegmentedSelector
+          properties:
+            title: Theme
+            block: true
+            options:
+              - label: Light
+                value: light
+                icon: AiOutlineBulb
+              - label: Dark
+                value: dark
+                icon: AiOutlineEyeInvisible
+              - label: System
+                value: system
+                icon: AiOutlineLaptop
+          events:
+            onChange:
+              - id: theme_changed_action
+                type: SetState
+                params:
+                  applied3_theme:
+                    _state: applied3_theme_selector
+        - id: applied3_language_selector
+          type: SegmentedSelector
+          properties:
+            title: Language
+            options:
+              - label: English
+                value: en
+              - label: French
+                value: fr
+              - label: German
+                value: de
+          events:
+            onChange:
+              - id: language_changed_action
+                type: SetState
+                params:
+                  applied3_language:
+                    _state: applied3_language_selector
+        - id: applied3_notifications_toggle
+          type: SegmentedSelector
+          properties:
+            title: Notifications
+            options:
+              - label: All
+                value: all
+              - label: Important
+                value: important
+              - label: None
+                value: none
+          events:
+            onChange:
+              - id: notifications_changed_action
+                type: SetState
+                params:
+                  applied3_notifications:
+                    _state: applied3_notifications_toggle
+        - id: applied3_save_btn
+          type: Button
+          properties:
+            title: Save Settings
+            icon: AiOutlineSave
+            type: primary
+          events:
+            onClick:
+              - id: save_settings_action
+                type: DisplayMessage
+                params:
+                  content: Settings saved successfully.
+                  duration: 2
+- title: Data driven (valueKey)
+  blocks:
+    - id: data_segmented_selector
+      type: SegmentedSelector
+      properties:
+        title: Range
+        data:
+          - { id: 1, name: Day }
+          - { id: 2, name: Week }
+          - { id: 3, name: Month }
+        html: '{{ item.name }}'
+        valueKey: id