@lowdefy/blocks-antd 5.6.0 → 6.0.0

package/dist/blocks/MultipleSelector/tests/MultipleSelector.e2e.yaml

@@ -0,0 +1,445 @@
+# 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.
+
+id: multiple_selector
+type: Box
+
+events:
+  onInit:
+    - id: set_defaults
+      type: SetState
+      params:
+        ms_with_value:
+          - Option 2
+          - Option 3
+        ms_no_allowclear:
+          - A
+        ms_onclear:
+          - Apple
+        ms_clearable:
+          - B
+        ms_object_value:
+          - _id: b2
+            name: Bob
+        ms_object_primarykey:
+          - _id: b2
+            name: Stale Name
+
+blocks:
+  # ============================================
+  # BASIC RENDERING
+  # ============================================
+
+  - id: ms_basic
+    type: MultipleSelector
+    properties:
+      options:
+        - Option 1
+        - Option 2
+        - Option 3
+
+  - id: ms_with_value
+    type: MultipleSelector
+    properties:
+      options:
+        - Option 1
+        - Option 2
+        - Option 3
+
+  # ============================================
+  # PROPERTY TESTS
+  # ============================================
+
+  - id: ms_placeholder
+    type: MultipleSelector
+    properties:
+      placeholder: Choose items
+      options:
+        - A
+        - B
+        - C
+
+  - id: ms_disabled
+    type: MultipleSelector
+    properties:
+      disabled: true
+      options:
+        - A
+        - B
+        - C
+
+  - id: ms_small
+    type: MultipleSelector
+    properties:
+      size: small
+      options:
+        - A
+        - B
+        - C
+
+  - id: ms_large
+    type: MultipleSelector
+    properties:
+      size: large
+      options:
+        - A
+        - B
+        - C
+
+  - id: ms_borderless
+    type: MultipleSelector
+    properties:
+      bordered: false
+      options:
+        - A
+        - B
+        - C
+
+  - id: ms_no_allowclear
+    type: MultipleSelector
+    properties:
+      allowClear: false
+      options:
+        - A
+        - B
+        - C
+
+  - id: ms_no_arrow
+    type: MultipleSelector
+    properties:
+      showArrow: false
+      options:
+        - A
+        - B
+        - C
+
+  - id: ms_max_tag_count
+    type: MultipleSelector
+    properties:
+      maxTagCount: 2
+      options:
+        - A
+        - B
+        - C
+        - D
+        - E
+
+  # ============================================
+  # OPTIONS TESTS
+  # ============================================
+
+  - id: ms_object_options
+    type: MultipleSelector
+    properties:
+      options:
+        - value: opt1
+          label: First Option
+        - value: opt2
+          label: Second Option
+        - value: opt3
+          label: Third Option
+
+  - id: ms_disabled_option
+    type: MultipleSelector
+    properties:
+      options:
+        - value: enabled1
+          label: Enabled Option
+        - value: disabled1
+          label: Disabled Option
+          disabled: true
+        - value: enabled2
+          label: Another Enabled
+
+  - id: ms_empty_options
+    type: MultipleSelector
+    properties:
+      options: []
+      notFoundContent: No items available
+
+  # ============================================
+  # EVENT TESTS
+  # ============================================
+
+  - id: ms_onchange
+    type: MultipleSelector
+    properties:
+      options:
+        - Apple
+        - Banana
+        - Cherry
+    events:
+      onChange:
+        - id: set_onchange
+          type: SetState
+          params:
+            ms_onchange_value:
+              _state: ms_onchange
+
+  - id: ms_onchange_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _ne:
+              - _state: ms_onchange_value
+              - null
+          then:
+            _string.concat:
+              - 'Selected: '
+              - _json.stringify:
+                  - _state: ms_onchange_value
+          else: ''
+
+  - id: ms_onclear
+    type: MultipleSelector
+    properties:
+      options:
+        - Apple
+        - Banana
+        - Cherry
+    events:
+      onClear:
+        - id: set_onclear
+          type: SetState
+          params:
+            ms_onclear_fired: true
+
+  - id: ms_onclear_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _eq:
+              - _state: ms_onclear_fired
+              - true
+          then: Clear fired
+          else: ''
+
+  - id: ms_onblur
+    type: MultipleSelector
+    properties:
+      options:
+        - A
+        - B
+        - C
+    events:
+      onBlur:
+        - id: set_onblur
+          type: SetState
+          params:
+            ms_onblur_fired: true
+
+  - id: ms_onblur_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _eq:
+              - _state: ms_onblur_fired
+              - true
+          then: Blur fired
+          else: ''
+
+  - id: ms_onfocus
+    type: MultipleSelector
+    properties:
+      options:
+        - A
+        - B
+        - C
+    events:
+      onFocus:
+        - id: set_onfocus
+          type: SetState
+          params:
+            ms_onfocus_fired: true
+
+  - id: ms_onfocus_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _eq:
+              - _state: ms_onfocus_fired
+              - true
+          then: Focus fired
+          else: ''
+
+  - id: ms_onsearch
+    type: MultipleSelector
+    properties:
+      options:
+        - Apple
+        - Apricot
+        - Banana
+        - Blueberry
+        - Cherry
+    events:
+      onSearch:
+        - id: set_onsearch
+          type: SetState
+          params:
+            ms_search_value:
+              _event: value
+
+  - id: ms_onsearch_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _ne:
+              - _state: ms_search_value
+              - null
+          then:
+            _string.concat:
+              - 'Search: '
+              - _state: ms_search_value
+          else: ''
+
+  # ============================================
+  # INTERACTION TESTS
+  # ============================================
+
+  - id: ms_clearable
+    type: MultipleSelector
+    properties:
+      allowClear: true
+      options:
+        - A
+        - B
+        - C
+
+  - id: ms_searchable
+    type: MultipleSelector
+    properties:
+      options:
+        - Apple
+        - Apricot
+        - Banana
+        - Blueberry
+        - Cherry
+        - Cranberry
+
+  # ============================================
+  # SELECTOR CSSKEY TESTS
+  # ============================================
+
+  - id: ms_selector_style
+    type: MultipleSelector
+    style:
+      .selector:
+        maxHeight: 96px
+        overflowY: auto
+    properties:
+      options:
+        - Apple
+        - Banana
+        - Cherry
+        - Dragonfruit
+        - Elderberry
+        - Fig
+        - Grape
+        - Honeydew
+        - Kiwi
+        - Lemon
+
+  - id: ms_selector_class
+    type: MultipleSelector
+    class:
+      .selector: ms-selector-tailwind
+    properties:
+      options:
+        - A
+        - B
+        - C
+
+  # ============================================
+  # OBJECT-VALUED OPTIONS
+  # (regression: object values must display their selected tag)
+  # ============================================
+
+  - id: ms_object_value
+    type: MultipleSelector
+    properties:
+      options:
+        - value:
+            _id: a1
+            name: Alice
+          label: Alice
+        - value:
+            _id: b2
+            name: Bob
+          label: Bob
+        - value:
+            _id: c3
+            name: Carol
+          label: Carol
+
+  - id: ms_object_select
+    type: MultipleSelector
+    properties:
+      options:
+        - value:
+            _id: a1
+            name: Alice
+          label: Alice
+        - value:
+            _id: b2
+            name: Bob
+          label: Bob
+    events:
+      onChange:
+        - id: set_ms_object_select
+          type: SetState
+          params:
+            ms_object_select_value:
+              _state: ms_object_select
+
+  - id: ms_object_select_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _ne:
+              - _state: ms_object_select_value
+              - null
+          then:
+            _string.concat:
+              - 'Selected: '
+              - _json.stringify:
+                  - _state: ms_object_select_value
+          else: ''
+
+  # primaryKey identity: stored value differs from the option value on every
+  # field except `_id`, so a correct match must project `_id` from both sides.
+  - id: ms_object_primarykey
+    type: MultipleSelector
+    properties:
+      primaryKey: _id
+      options:
+        - value:
+            _id: a1
+            name: Alice
+          label: Alice
+        - value:
+            _id: b2
+            name: Bob
+          label: Bob

package/dist/blocks/MultipleSelector/tests.yaml

@@ -0,0 +1,201 @@
+# 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.
+
+- id: default
+  type: MultipleSelector
+- id: 'properties.options-string'
+  type: MultipleSelector
+  properties:
+    options:
+      - Option 1
+      - Option 2
+- id: 'properties.options-number'
+  type: MultipleSelector
+  properties:
+    options:
+      - 10
+      - 12
+- id: 'properties.options-object'
+  type: MultipleSelector
+  properties:
+    options:
+      - label: one
+        value: 1
+      - label: two
+        value: 2
+- id: 'properties.options-boolean'
+  type: MultipleSelector
+  properties:
+    options:
+      - true
+      - false
+- id: 'properties.title: My MultipleSelector Title'
+  type: MultipleSelector
+  properties:
+    label:
+      title: My MultipleSelector Title
+- id: 'property.bordered: false'
+  type: MultipleSelector
+  properties:
+    bordered: false
+    options:
+      - Option 1
+      - Option 2
+- id: 'properties.inputStyle: CSS style applied'
+  type: MultipleSelector
+  properties:
+    inputStyle:
+      border: 1px solid red
+- id: 'properties.optionsStyle: CSS style applied'
+  type: MultipleSelector
+  properties:
+    options:
+      - Option 1
+      - Option 2
+    optionsStyle:
+      color: blue
+- id: 'properties.allowClear: false'
+  type: MultipleSelector
+  properties:
+    allowClear: false
+    options:
+      - Option 1
+      - Option 2
+- id: 'properties.autoFocus: true'
+  type: MultipleSelector
+  properties:
+    autoFocus: true
+    options:
+      - Option 1
+      - Option 2
+- id: 'properties.clearIcon: ChromeFilled'
+  type: MultipleSelector
+  properties:
+    allowClear: true
+    clearIcon: ChromeFilled
+    options:
+      - Option 1
+      - Option 2
+- id: 'properties.clearIcon-object: ChromeFilled'
+  type: MultipleSelector
+  properties:
+    allowClear: true
+    clearIcon:
+      name: ChromeFilled
+      color: red
+    options:
+      - Option 1
+      - Option 2
+- id: 'properties.disabled: true'
+  type: MultipleSelector
+  properties:
+    disabled: true
+- id: 'properties.placeholder: Find item in list'
+  type: MultipleSelector
+  properties:
+    placeholder: Find item in list
+- id: 'properties.showArrow: false'
+  type: MultipleSelector
+  properties:
+    showArrow: false
+- id: 'properties.size: large'
+  type: MultipleSelector
+  properties:
+    size: large
+- id: 'properties.size: small'
+  type: MultipleSelector
+  properties:
+    size: small
+- id: 'properties.size: default'
+  type: MultipleSelector
+  properties:
+    size: default
+- id: 'properties.suffixIcon: AiOutlineDoubleLeft'
+  type: MultipleSelector
+  properties:
+    suffixIcon: AiOutlineDoubleLeft
+- id: 'properties.label span: 12'
+  type: MultipleSelector
+  properties:
+    label:
+      span: 12
+- id: 'properties.label align: right'
+  type: MultipleSelector
+  properties:
+    label:
+      align: right
+- id: 'properties.label align: left'
+  type: MultipleSelector
+  properties:
+    label:
+      align: left
+- id: 'properties.label inline: true'
+  type: MultipleSelector
+  properties:
+    label:
+      inline: true
+- id: 'properties.label disabled: true'
+  type: MultipleSelector
+  properties:
+    label:
+      disabled: true
+- id: 'properties.label colon: false'
+  type: MultipleSelector
+  properties:
+    label:
+      colon: false
+- id: 'properties.label extra: showing extra'
+  type: MultipleSelector
+  properties:
+    label:
+      extra: showing extra
+- id: 'properties.options: html'
+  type: MultipleSelector
+  properties:
+    options:
+      - '<div>Some main text</div><div style="font-size: 6px;">Some small subtext</div>'
+      - '<div style="color: green;">Option green</div>'
+      - Option 3
+- id: 'properties.options.label: html'
+  type: MultipleSelector
+  properties:
+    options:
+      - label: '<div>Some main text</div><div style="font-size: 6px;">Some small subtext</div>'
+        value: 1
+      - label: '<div style="color: green;">Option green</div>'
+        value: 2
+      - label: Option 3
+        value: 3
+- id: 'properties.options-style'
+  type: MultipleSelector
+  properties:
+    options:
+      - label: one
+        value: 1
+        style:
+          color: red
+      - label: two
+        value: 2
+- id: 'properties.options.label: html and properties.options.filterString'
+  type: MultipleSelector
+  properties:
+    options:
+      - label: '<div>Some main text</div><div style="font-size: 6px;">Some small subtext</div>'
+        filterString: 'Some main text'
+        value: 1
+      - label: '<div style="color: green;">Option green</div>'
+        filterString: 'Option green'
+        value: 2
+      - label: Option 3
+        value: 3