@lowdefy/blocks-antd 5.5.1 → 6.0.0

package/dist/blocks/TextInput/gallery.yaml

@@ -0,0 +1,560 @@
+# 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_default
+      type: TextInput
+      properties:
+        title: Default TextInput
+        placeholder: Enter text here
+    - id: basic_with_value
+      type: TextInput
+      properties:
+        title: With Default Value
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              basic_with_value: Hello World
+    - id: basic_placeholder_only
+      type: TextInput
+      properties:
+        placeholder: No label, just a placeholder
+        label:
+          disabled: true
+
+- title: Sizes
+  blocks:
+    - id: size_small
+      type: TextInput
+      properties:
+        title: Small
+        size: small
+        placeholder: Small input
+    - id: size_middle
+      type: TextInput
+      properties:
+        title: Middle (Default)
+        size: middle
+        placeholder: Middle input
+    - id: size_large
+      type: TextInput
+      properties:
+        title: Large
+        size: large
+        placeholder: Large input
+
+- title: Variants
+  blocks:
+    - id: variant_outlined
+      type: TextInput
+      properties:
+        title: Outlined (Default)
+        placeholder: Outlined variant
+    - id: variant_filled
+      type: TextInput
+      properties:
+        title: Filled
+        variant: filled
+        placeholder: Filled variant
+    - id: variant_borderless
+      type: TextInput
+      properties:
+        title: Borderless
+        variant: borderless
+        placeholder: Borderless variant
+
+- title: Input Types
+  blocks:
+    - id: type_text
+      type: TextInput
+      properties:
+        title: Text (Default)
+        type: text
+        placeholder: Regular text
+    - id: type_email
+      type: TextInput
+      properties:
+        title: Email
+        type: email
+        prefixIcon: AiOutlineMail
+        placeholder: user@example.com
+    - id: type_password
+      type: TextInput
+      properties:
+        title: Password
+        type: password
+        prefixIcon: AiOutlineLock
+        placeholder: Enter password
+    - id: type_tel
+      type: TextInput
+      properties:
+        title: Telephone
+        type: tel
+        prefixIcon: AiOutlinePhone
+        placeholder: +1 (555) 123-4567
+    - id: type_url
+      type: TextInput
+      properties:
+        title: URL
+        type: url
+        prefixIcon: AiOutlineGlobal
+        placeholder: https://example.com
+
+- title: Prefix & Suffix
+  blocks:
+    - id: adorn_prefix_text
+      type: TextInput
+      properties:
+        title: Prefix Text
+        prefix: https://
+        placeholder: mysite.com
+    - id: adorn_suffix_text
+      type: TextInput
+      properties:
+        title: Suffix Text
+        suffix: '@gmail.com'
+        placeholder: username
+    - id: adorn_both
+      type: TextInput
+      properties:
+        title: Prefix & Suffix
+        prefix: https://
+        suffix: .com
+        placeholder: example
+    - id: adorn_prefix_icon
+      type: TextInput
+      properties:
+        title: Prefix Icon
+        prefixIcon: AiOutlineUser
+        placeholder: Enter username
+    - id: adorn_suffix_icon
+      type: TextInput
+      properties:
+        title: Suffix Icon
+        suffixIcon: AiOutlineInfoCircle
+        placeholder: Enter value
+
+- title: Custom Icon Properties
+  blocks:
+    - id: icon_custom_color
+      type: TextInput
+      properties:
+        title: Custom Color Icon
+        prefixIcon:
+          name: AiOutlineUser
+          color: '#1677ff'
+        placeholder: Blue user icon
+    - id: icon_both_custom
+      type: TextInput
+      properties:
+        title: Both Icons
+        prefixIcon: AiOutlineLink
+        suffixIcon: AiOutlineArrowRight
+        placeholder: Enter link
+    - id: icon_mixed
+      type: TextInput
+      properties:
+        title: Icon Prefix + Text Suffix
+        prefixIcon: AiOutlineGlobal
+        suffix: .com
+        placeholder: domain
+
+- title: Allow Clear
+  blocks:
+    - id: clear_basic
+      type: TextInput
+      properties:
+        title: Allow Clear
+        allowClear: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              clear_basic: Clearable text
+    - id: clear_with_icon
+      type: TextInput
+      properties:
+        title: Allow Clear + Prefix Icon
+        allowClear: true
+        prefixIcon: AiOutlineUser
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              clear_with_icon: Clear with icon
+    - id: clear_disabled
+      type: TextInput
+      properties:
+        title: Allow Clear (Not Set)
+        allowClear: false
+        placeholder: Cannot clear
+
+- title: Character Count & Max Length
+  blocks:
+    - id: count_with_max
+      type: TextInput
+      properties:
+        title: Max 50 Characters
+        showCount: true
+        maxLength: 50
+        placeholder: Up to 50 characters
+    - id: count_no_max
+      type: TextInput
+      properties:
+        title: Count Without Limit
+        showCount: true
+        placeholder: Unlimited characters
+    - id: max_no_count
+      type: TextInput
+      properties:
+        title: Max Length Without Count
+        maxLength: 20
+        placeholder: Max 20 (no counter shown)
+
+- title: Replace Input (Sanitization)
+  blocks:
+    - id: replace_numbers_only
+      type: TextInput
+      properties:
+        title: Numbers Only
+        placeholder: Only digits allowed
+        replaceInput:
+          pattern: '[^0-9]'
+          flags: g
+          replacement: ''
+    - id: replace_alpha_only
+      type: TextInput
+      properties:
+        title: Letters Only
+        placeholder: Only letters allowed
+        replaceInput:
+          pattern: '[^a-zA-Z]'
+          flags: g
+          replacement: ''
+    - id: replace_no_spaces
+      type: TextInput
+      properties:
+        title: No Spaces
+        placeholder: Spaces removed automatically
+        replaceInput:
+          pattern: \s
+          flags: g
+          replacement: ''
+
+- title: Labels
+  blocks:
+    - id: label_title_html
+      type: TextInput
+      properties:
+        title: <b>Bold</b> Title
+        placeholder: HTML in title
+    - id: label_extra
+      type: TextInput
+      properties:
+        title: With Extra Text
+        placeholder: Enter value
+        label:
+          extra: Helper text provides guidance.
+    - id: label_inline
+      type: TextInput
+      properties:
+        title: Inline Label
+        placeholder: Label inline, aligned right
+        label:
+          inline: true
+          align: right
+          span: 8
+    - id: label_no_colon
+      type: TextInput
+      properties:
+        title: Without Colon
+        placeholder: No colon after label
+        label:
+          colon: false
+    - id: label_hidden
+      type: TextInput
+      properties:
+        title: Label Hidden
+        placeholder: Label hidden (label.disabled true)
+        label:
+          disabled: true
+
+- title: Disabled State
+  blocks:
+    - id: disabled_empty
+      type: TextInput
+      properties:
+        title: Disabled (Empty)
+        disabled: true
+        placeholder: Cannot edit
+    - id: disabled_with_value
+      type: TextInput
+      properties:
+        title: Disabled (With Value)
+        disabled: true
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              disabled_with_value: Existing value
+    - id: disabled_with_prefix
+      type: TextInput
+      properties:
+        title: Disabled (With Prefix)
+        disabled: true
+        prefixIcon: AiOutlineUser
+      events:
+        onMount:
+          - id: set_default
+            type: SetState
+            params:
+              disabled_with_prefix: john_doe
+
+- title: Style and CSS
+  blocks:
+    - id: css_shadow
+      type: TextInput
+      class: shadow-md
+      properties:
+        title: Shadow
+        placeholder: Using Tailwind shadow class
+    - id: css_rounded
+      type: TextInput
+      class: rounded-lg
+      properties:
+        title: Rounded
+        placeholder: Using Tailwind rounded class
+    - id: css_custom_bg
+      type: TextInput
+      style:
+        .element:
+          borderColor: '#adc6ff'
+      properties:
+        title: Custom Background
+        placeholder: Light blue background
+    - id: css_full_custom
+      type: TextInput
+      style:
+        .element:
+          borderColor: '#ffa940'
+          borderRadius: 12
+          color: '#d46b08'
+      properties:
+        title: Fully Customized
+        placeholder: Orange theme via style
+        prefixIcon:
+          name: AiOutlineStar
+          color: '#fa8c16'
+
+- title: Theme Token Overrides
+  blocks:
+    - id: theme_pill
+      type: TextInput
+      properties:
+        title: Pill Shape
+        placeholder: borderRadius 40
+        theme:
+          borderRadius: 40
+    - id: theme_green
+      type: TextInput
+      properties:
+        title: Green Theme
+        placeholder: Custom green colors
+        prefixIcon: AiOutlineCheck
+        theme:
+          colorPrimary: '#52c41a'
+          colorBorder: '#b7eb8f'
+          borderRadius: 8
+          hoverBorderColor: '#73d13d'
+          activeBorderColor: '#389e0d'
+          activeShadow: 0 0 0 2px rgba(82, 196, 26, 0.15)
+    - id: theme_purple
+      type: TextInput
+      properties:
+        title: Purple Theme
+        placeholder: Custom purple colors
+        prefixIcon: AiOutlineStar
+        theme:
+          colorPrimary: '#722ed1'
+          colorBorder: '#d3adf7'
+          borderRadius: 12
+          hoverBorderColor: '#b37feb'
+          activeBorderColor: '#531dab'
+          activeShadow: 0 0 0 2px rgba(114, 46, 209, 0.15)
+    - id: theme_filled_warm
+      type: TextInput
+      properties:
+        title: Warm Filled
+        variant: filled
+        placeholder: Custom filled variant
+        theme:
+          colorFillTertiary: '#fff7e6'
+          hoverBorderColor: '#fa8c16'
+          borderRadius: 8
+
+- title: TextInput in Registration Form
+  blocks:
+    - id: reg_name
+      type: TextInput
+      required: true
+      properties:
+        title: Full Name
+        prefixIcon: AiOutlineUser
+        placeholder: John Doe
+        label:
+          colon: false
+    - id: reg_email
+      type: TextInput
+      required: true
+      properties:
+        title: Email Address
+        type: email
+        prefixIcon: AiOutlineMail
+        placeholder: john@example.com
+        label:
+          colon: false
+          extra: We will never share your email.
+    - id: reg_password
+      type: TextInput
+      required: true
+      properties:
+        title: Password
+        type: password
+        prefixIcon: AiOutlineLock
+        placeholder: At least 8 characters
+        showCount: true
+        maxLength: 64
+        label:
+          colon: false
+    - id: reg_username
+      type: TextInput
+      required: true
+      properties:
+        title: Username
+        prefix: '@'
+        placeholder: username
+        allowClear: true
+        replaceInput:
+          pattern: '[^a-z0-9_]'
+          flags: g
+          replacement: ''
+        label:
+          colon: false
+          extra: Lowercase letters, numbers, and underscores only.
+    - id: reg_actions
+      type: Box
+      layout:
+        gap: 8
+        justify: flex-end
+      blocks:
+        - id: reg_cancel
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Cancel
+            color: default
+            variant: outlined
+          events:
+            onClick:
+              - id: cancel_reset
+                type: ResetValidation
+              - id: cancel_msg
+                type: DisplayMessage
+                params:
+                  content: Form cleared
+                  status: info
+        - id: reg_submit
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Create Account
+            color: primary
+            variant: solid
+            icon: AiOutlineArrowRight
+          events:
+            onClick:
+              - id: submit_validate
+                type: Validate
+                params:
+                  - reg_name
+                  - reg_email
+                  - reg_password
+                  - reg_username
+              - id: submit_msg
+                type: DisplayMessage
+                params:
+                  content: Account created successfully!
+                  status: success
+
+- title: TextInput in Search Page
+  blocks:
+    - id: search_bar
+      type: TextInput
+      properties:
+        prefixIcon: AiOutlineSearch
+        allowClear: true
+        placeholder: Search products, categories, or brands...
+        size: large
+        label:
+          disabled: true
+        theme:
+          borderRadius: 20
+      events:
+        onPressEnter:
+          - id: search_msg
+            type: DisplayMessage
+            params:
+              content:
+                _string.concat:
+                  - 'Searching for: '
+                  - _state: search_bar
+              status: info
+    - id: search_coupon
+      type: TextInput
+      properties:
+        title: Coupon Code
+        placeholder: Enter code
+        showCount: true
+        maxLength: 16
+        size: small
+        replaceInput:
+          pattern: '[^A-Z0-9]'
+          flags: g
+          replacement: ''
+        label:
+          extra: Letters and numbers only.
+    - id: search_apply
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Apply Coupon
+        color: primary
+        variant: solid
+        size: small
+      events:
+        onClick:
+          - id: apply_msg
+            type: DisplayMessage
+            params:
+              content: Coupon applied!
+              status: success