@lowdefy/blocks-antd 5.5.1 → 6.0.0

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

@@ -0,0 +1,173 @@
+# 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: tag
+type: Box
+
+blocks:
+  # ============================================
+  # BASIC RENDERING
+  # ============================================
+
+  - id: tag_basic
+    type: Tag
+    properties:
+      title: Basic Tag
+
+  - id: tag_no_title
+    type: Tag
+
+  # ============================================
+  # PROPERTY TESTS
+  # ============================================
+
+  - id: tag_color_preset
+    type: Tag
+    properties:
+      title: Success Tag
+      color: success
+
+  - id: tag_color_warning
+    type: Tag
+    properties:
+      title: Warning Tag
+      color: warning
+
+  - id: tag_color_error
+    type: Tag
+    properties:
+      title: Error Tag
+      color: error
+
+  - id: tag_color_processing
+    type: Tag
+    properties:
+      title: Processing Tag
+      color: processing
+
+  - id: tag_color_custom
+    type: Tag
+    properties:
+      title: Custom Color
+      color: '#ff5500'
+
+  - id: tag_closable
+    type: Tag
+    properties:
+      title: Closable Tag
+      closable: true
+
+  - id: tag_with_icon
+    type: Tag
+    properties:
+      title: With Icon
+      icon: AiOutlineUser
+
+  - id: tag_html_title
+    type: Tag
+    properties:
+      title: '<strong>Bold</strong> Tag'
+
+  # ============================================
+  # EVENT TESTS
+  # ============================================
+
+  - id: tag_onclick
+    type: Tag
+    properties:
+      title: Click Me
+    events:
+      onClick:
+        - id: set_onclick
+          type: SetState
+          params:
+            tag_onclick_fired: true
+
+  - id: onclick_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _eq:
+              - _state: tag_onclick_fired
+              - true
+          then: Tag clicked
+          else: ''
+
+  - id: tag_onclose
+    type: Tag
+    properties:
+      title: Close Me
+      closable: true
+    events:
+      onClose:
+        - id: set_onclose
+          type: SetState
+          params:
+            tag_onclose_fired: true
+
+  - id: onclose_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _eq:
+              - _state: tag_onclose_fired
+              - true
+          then: Tag closed
+          else: ''
+
+  - id: tag_shortcut
+    type: Tag
+    properties:
+      title: Filter
+    events:
+      onClick:
+        shortcut: mod+f
+        try:
+          - id: filter_action
+            type: SetState
+            params:
+              filter_toggled: true
+
+  # ============================================
+  # SHORTCUT KEYBOARD TESTS
+  # ============================================
+
+  - id: tag_shortcut_fires
+    type: Tag
+    properties:
+      title: Toggle
+    events:
+      onClick:
+        shortcut: mod+j
+        try:
+          - id: set_tag_shortcut_fired
+            type: SetState
+            params:
+              tag_shortcut_fired: true
+
+  - id: tag_shortcut_fired_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _not:
+              _not:
+                _state: tag_shortcut_fired
+          then: 'shortcut:fired'
+          else: ''

package/dist/blocks/Tag/tests.yaml

@@ -0,0 +1,51 @@
+# 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: Tag
+- id: title
+  type: Tag
+  properties:
+    title: The title
+- id: html
+  type: Tag
+  properties:
+    title: |
+      <span style="color: red;">Red</span>
+      <span style="color: green;">Blue</span>
+- id: reset_color
+  type: Tag
+  properties:
+    color: red
+- id: hex_color
+  type: Tag
+  properties:
+    color: '#040'
+- id: hex_light_color
+  type: Tag
+  properties:
+    color: '#afb'
+- id: style
+  type: Tag
+  properties:
+    style:
+      fontSize: 1.3em
+- id: closable
+  type: Tag
+  properties:
+    closable: true
+- id: icon
+  type: Tag
+  properties:
+    icon: AiOutlineSave

package/dist/blocks/TagMultipleSelector/TagMultipleSelector.js

@@ -0,0 +1,53 @@
+/*
+  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.
+*/ import React from 'react';
+import { withBlockDefaults } from '@lowdefy/block-utils';
+import { type } from '@lowdefy/helpers';
+import TagPillRow from '../../TagPillRow.js';
+import getTagSelectorOptions from '../../getTagSelectorOptions.js';
+// Multi-select tag input: `value` is the array of selected option values.
+// Clicking a pill toggles it in or out of the selection. Purely controlled —
+// the selection is read from props each render. See TagPillRow for the shared
+// rendering/color logic and TagSelector for the single-select variant whose
+// value is one option value.
+const TagMultipleSelector = (props)=>{
+    const { loading, methods, properties, value } = props;
+    const options = getTagSelectorOptions({
+        options: properties.options
+    });
+    const selected = type.isArray(value) ? value : [];
+    const isSelected = (optionValue)=>selected.includes(optionValue);
+    const onToggle = (option)=>{
+        if (option.disabled || properties.disabled || loading) return;
+        const next = selected.includes(option.value) ? selected.filter((v)=>v !== option.value) : [
+            ...selected,
+            option.value
+        ];
+        methods.setValue(next);
+        methods.triggerEvent({
+            name: 'onChange',
+            event: {
+                value: next
+            }
+        });
+    };
+    return /*#__PURE__*/ React.createElement(TagPillRow, {
+        ...props,
+        options: options,
+        isSelected: isSelected,
+        onToggle: onToggle
+    });
+};
+export default withBlockDefaults(TagMultipleSelector);

package/dist/blocks/TagMultipleSelector/e2e.js

@@ -0,0 +1,36 @@
+/*
+  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.
+*/ import { createBlockHelper, escapeId } from '@lowdefy/e2e-utils';
+import { expect } from '@playwright/test';
+const locator = (page, blockId)=>page.locator(`#${escapeId(blockId)}_input`);
+export default createBlockHelper({
+    locator,
+    do: {
+        select: (page, blockId, text)=>locator(page, blockId).locator('.lf-tag-selector-tag').filter({
+                hasText: text
+            }).click()
+    },
+    expect: {
+        value: (page, blockId, text)=>expect(locator(page, blockId).locator('.lf-tag-selector-tag-selected').filter({
+                hasText: text
+            })).toBeVisible(),
+        disabled: (page, blockId, text)=>expect(locator(page, blockId).locator('.lf-tag-selector-tag').filter({
+                hasText: text
+            })).toBeDisabled(),
+        enabled: (page, blockId, text)=>expect(locator(page, blockId).locator('.lf-tag-selector-tag').filter({
+                hasText: text
+            })).toBeEnabled()
+    }
+});

package/dist/blocks/TagMultipleSelector/gallery.yaml

@@ -0,0 +1,70 @@
+# 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: TagMultipleSelector
+      properties:
+        title: Domains
+        options:
+          - Ethics
+          - Environment
+          - Governance
+          - Social
+          - Data Privacy
+
+- title: Label-Value Options
+  blocks:
+    - id: label_value
+      type: TagMultipleSelector
+      properties:
+        title: Status Filter
+        options:
+          - label: Draft
+            value: draft
+          - label: In Review
+            value: in_review
+          - label: Published
+            value: published
+          - label: Archived
+            value: archived
+            disabled: true
+
+- title: Explicit Colors and Single Accent
+  blocks:
+    - id: explicit_colors
+      type: TagMultipleSelector
+      properties:
+        title: Priorities
+        options:
+          - label: Low
+            value: low
+            color: '#59A14F'
+          - label: Medium
+            value: medium
+            color: '#EDC948'
+          - label: High
+            value: high
+            color: '#E15759'
+    - id: single_accent
+      type: TagMultipleSelector
+      properties:
+        title: Interests
+        colored: false
+        options:
+          - Design
+          - Engineering
+          - Product
+          - Research

package/dist/blocks/TagMultipleSelector/meta.js

@@ -0,0 +1,91 @@
+/*
+  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.
+*/ import LabelMeta from '../Label/meta.js';
+import label from '../../schemas/label.js';
+import { disabled, inputTitle, sizeSmallDefaultLarge } from '../../schemas/inputProperties.js';
+export default {
+    category: 'input',
+    valueType: 'array',
+    icons: [
+        ...LabelMeta.icons
+    ],
+    cssKeys: {
+        element: 'The TagMultipleSelector tag row.',
+        tag: 'Each tag pill.',
+        label: 'The TagMultipleSelector label.',
+        extra: 'The TagMultipleSelector extra content.',
+        feedback: 'The TagMultipleSelector validation feedback.'
+    },
+    events: {
+        onChange: {
+            description: 'Trigger actions when the selection is changed.',
+            event: {
+                value: 'The array of selected values.'
+            }
+        },
+        onTooltipClick: 'Trigger actions when the tooltip icon is clicked.'
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            options: {
+                type: 'array',
+                description: 'Options to select from. Primitives, or { label, value, color, disabled } - an explicit color overrides the stable palette color.',
+                items: {
+                    type: [
+                        'string',
+                        'number',
+                        'boolean',
+                        'object'
+                    ],
+                    properties: {
+                        label: {
+                            type: 'string',
+                            description: 'Tag label. Defaults to the value.'
+                        },
+                        value: {
+                            description: 'Option value written into the selection array.',
+                            docs: {
+                                displayType: 'yaml'
+                            }
+                        },
+                        color: {
+                            type: 'string',
+                            description: 'Explicit tag color (hex or CSS color). Overrides the stable palette color.',
+                            docs: {
+                                displayType: 'color'
+                            }
+                        },
+                        disabled: {
+                            type: 'boolean',
+                            default: false,
+                            description: 'Disable this tag.'
+                        }
+                    }
+                }
+            },
+            colored: {
+                type: 'boolean',
+                default: true,
+                description: 'Give each option a stable color (hash of its value over a fixed palette). false = single primary accent.'
+            },
+            disabled,
+            size: sizeSmallDefaultLarge,
+            label,
+            title: inputTitle
+        }
+    }
+};

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

@@ -0,0 +1,93 @@
+# 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: tag_multiple_selector
+type: Box
+
+blocks:
+  # ============================================
+  # BASIC RENDERING
+  # ============================================
+
+  - id: tms_basic
+    type: TagMultipleSelector
+    properties:
+      label:
+        disabled: true
+      options:
+        - Ethics
+        - Environment
+        - Governance
+
+  # ============================================
+  # EVENT / SELECTION TESTS
+  # ============================================
+
+  - id: tms_change
+    type: TagMultipleSelector
+    properties:
+      label:
+        disabled: true
+      options:
+        - label: Option A
+          value: a
+        - label: Option B
+          value: b
+    events:
+      onChange:
+        - id: set_tms_result
+          type: SetState
+          params:
+            tms_result:
+              _event: value
+
+  - id: tms_change_display
+    type: Paragraph
+    properties:
+      content:
+        _if:
+          test:
+            _ne:
+              - _state: tms_result
+              - null
+          then:
+            _json.stringify:
+              - _state: tms_result
+          else: ''
+
+  # ============================================
+  # DISABLED TESTS
+  # ============================================
+
+  - id: tms_disabled
+    type: TagMultipleSelector
+    properties:
+      label:
+        disabled: true
+      disabled: true
+      options:
+        - X
+        - Y
+
+  - id: tms_disabled_option
+    type: TagMultipleSelector
+    properties:
+      label:
+        disabled: true
+      options:
+        - label: Enabled
+          value: enabled
+        - label: Locked
+          value: locked
+          disabled: true

package/dist/blocks/TagSelector/TagSelector.js

@@ -0,0 +1,49 @@
+/*
+  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.
+*/ import React from 'react';
+import { withBlockDefaults } from '@lowdefy/block-utils';
+import { type } from '@lowdefy/helpers';
+import TagPillRow from '../../TagPillRow.js';
+import getTagSelectorOptions from '../../getTagSelectorOptions.js';
+// Single-select tag input: `value` is one option value (or null). Clicking a
+// pill selects it; clicking the already-selected pill clears the value. Purely
+// controlled — the value is read from props each render. See TagPillRow for the
+// shared rendering/color logic and TagMultipleSelector for the multi-select
+// variant whose value is the array of selected values.
+const TagSelector = (props)=>{
+    const { loading, methods, properties, value } = props;
+    const options = getTagSelectorOptions({
+        options: properties.options
+    });
+    const isSelected = (optionValue)=>!type.isNone(value) && value === optionValue;
+    const onToggle = (option)=>{
+        if (option.disabled || properties.disabled || loading) return;
+        const next = value === option.value ? null : option.value;
+        methods.setValue(next);
+        methods.triggerEvent({
+            name: 'onChange',
+            event: {
+                value: next
+            }
+        });
+    };
+    return /*#__PURE__*/ React.createElement(TagPillRow, {
+        ...props,
+        options: options,
+        isSelected: isSelected,
+        onToggle: onToggle
+    });
+};
+export default withBlockDefaults(TagSelector);

package/dist/blocks/TagSelector/e2e.js

@@ -0,0 +1,36 @@
+/*
+  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.
+*/ import { createBlockHelper, escapeId } from '@lowdefy/e2e-utils';
+import { expect } from '@playwright/test';
+const locator = (page, blockId)=>page.locator(`#${escapeId(blockId)}_input`);
+export default createBlockHelper({
+    locator,
+    do: {
+        select: (page, blockId, text)=>locator(page, blockId).locator('.lf-tag-selector-tag').filter({
+                hasText: text
+            }).click()
+    },
+    expect: {
+        value: (page, blockId, text)=>expect(locator(page, blockId).locator('.lf-tag-selector-tag-selected').filter({
+                hasText: text
+            })).toBeVisible(),
+        disabled: (page, blockId, text)=>expect(locator(page, blockId).locator('.lf-tag-selector-tag').filter({
+                hasText: text
+            })).toBeDisabled(),
+        enabled: (page, blockId, text)=>expect(locator(page, blockId).locator('.lf-tag-selector-tag').filter({
+                hasText: text
+            })).toBeEnabled()
+    }
+});