@lowdefy/blocks-antd 5.5.1 → 6.0.0

package/dist/TagPillRow.js

@@ -0,0 +1,88 @@
+/*
+  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 { cn } from '@lowdefy/block-utils';
+import Label from './blocks/Label/Label.js';
+import getTagColor from './getTagColor.js';
+import getContrastTextColor from './getContrastTextColor.js';
+import './tagSelectorStyle.css';
+// Shared body for TagSelector (single) and TagMultipleSelector (multi): the
+// input Label wrapping a row of toggleable tag pills. Value semantics differ
+// between the two blocks, so selection state and toggling are injected as
+// `isSelected` / `onToggle`; everything visual — stable per-value colors,
+// filled-selected / outlined-unselected pills, per-option and whole-block
+// disabling — lives here so both blocks render identically. Colors are stable
+// per option (see getTagColor); `properties.colored: false` gives single-accent
+// pills that use the primary color.
+function TagPillRow({ blockId, classNames = {}, components: { Icon }, events, isSelected, loading, methods, onToggle, options, properties, required, styles = {}, validation }) {
+    const colored = properties.colored !== false;
+    return /*#__PURE__*/ React.createElement(Label, {
+        blockId: blockId,
+        methods: methods,
+        classNames: classNames,
+        components: {
+            Icon
+        },
+        events: events,
+        properties: {
+            title: properties.title,
+            size: properties.size,
+            ...properties.label
+        },
+        required: required,
+        styles: styles,
+        validation: validation,
+        content: {
+            content: ()=>/*#__PURE__*/ React.createElement("div", {
+                    id: `${blockId}_input`,
+                    className: cn('lf-tag-selector', classNames.element),
+                    style: styles.element
+                }, options.map((opt)=>{
+                    const selected = isSelected(opt.value);
+                    const color = getTagColor({
+                        option: opt,
+                        colored
+                    });
+                    // Filled when selected: solid hue + black/white contrast text.
+                    // Outlined with a hue-tinted border when off.
+                    let colorStyle = {};
+                    if (color && selected) {
+                        colorStyle = {
+                            background: color,
+                            borderColor: color,
+                            color: getContrastTextColor(color) || '#fff'
+                        };
+                    } else if (color) {
+                        colorStyle = {
+                            borderColor: `color-mix(in srgb, ${color} 45%, var(--ant-color-border))`
+                        };
+                    }
+                    return /*#__PURE__*/ React.createElement("button", {
+                        key: `${opt.value}`,
+                        type: "button",
+                        disabled: opt.disabled || properties.disabled || loading,
+                        "aria-pressed": selected,
+                        className: cn('lf-tag-selector-tag', selected && 'lf-tag-selector-tag-selected', classNames.tag),
+                        style: {
+                            ...colorStyle,
+                            ...styles.tag
+                        },
+                        onClick: ()=>onToggle(opt)
+                    }, opt.label);
+                }))
+        }
+    });
+}
+export default TagPillRow;

package/dist/blocks/Affix/gallery.yaml

@@ -0,0 +1,399 @@
+# 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 Affix (Top)
+  blocks:
+    - id: affix_basic_top
+      type: Affix
+      properties:
+        offsetTop: 10
+      blocks:
+        - id: affix_basic_top_btn
+          type: Button
+          properties:
+            title: Affix Top (10px)
+            color: primary
+            variant: solid
+
+- title: Offset Top
+  blocks:
+    - id: affix_offset_top_0
+      type: Affix
+      layout:
+        flex: 0 0 auto
+      properties:
+        offsetTop: 0
+      blocks:
+        - id: affix_offset_top_0_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Offset 0px
+            color: primary
+            variant: solid
+            size: small
+    - id: affix_offset_top_20
+      type: Affix
+      layout:
+        flex: 0 0 auto
+      properties:
+        offsetTop: 20
+      blocks:
+        - id: affix_offset_top_20_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Offset 20px
+            color: primary
+            variant: outlined
+            size: small
+    - id: affix_offset_top_80
+      type: Affix
+      layout:
+        flex: 0 0 auto
+      properties:
+        offsetTop: 80
+      blocks:
+        - id: affix_offset_top_80_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Offset 80px
+            color: primary
+            variant: dashed
+            size: small
+
+- title: Offset Bottom
+  blocks:
+    - id: affix_offset_bottom_0
+      type: Affix
+      layout:
+        flex: 0 0 auto
+      properties:
+        offsetBottom: 0
+      blocks:
+        - id: affix_offset_bottom_0_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Bottom 0px
+            color: primary
+            variant: solid
+            size: small
+    - id: affix_offset_bottom_30
+      type: Affix
+      layout:
+        flex: 0 0 auto
+      properties:
+        offsetBottom: 30
+      blocks:
+        - id: affix_offset_bottom_30_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Bottom 30px
+            color: primary
+            variant: outlined
+            size: small
+    - id: affix_offset_bottom_60
+      type: Affix
+      layout:
+        flex: 0 0 auto
+      properties:
+        offsetBottom: 60
+      blocks:
+        - id: affix_offset_bottom_60_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Bottom 60px
+            color: primary
+            variant: dashed
+            size: small
+
+- title: onChange Event
+  blocks:
+    - id: affix_on_change
+      type: Affix
+      properties:
+        offsetTop: 10
+      events:
+        onChange:
+          - id: affix_on_change_message
+            type: DisplayMessage
+            params:
+              content:
+                _if:
+                  test:
+                    _eq:
+                      - _event: affixed
+                      - true
+                  then: Affix is now fixed to the viewport.
+                  else: Affix returned to its original position.
+              duration: 3
+      blocks:
+        - id: affix_on_change_btn
+          type: Button
+          properties:
+            title: Scroll to trigger onChange
+            color: primary
+            variant: solid
+
+- title: Theme Token Overrides
+  blocks:
+    - id: affix_theme_default_z
+      type: Affix
+      layout:
+        flex: 0 0 auto
+      properties:
+        offsetTop: 10
+        theme:
+          zIndexPopup: 10
+      blocks:
+        - id: affix_theme_default_z_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Default z-index (10)
+            color: default
+            variant: outlined
+            size: small
+    - id: affix_theme_high_z
+      type: Affix
+      layout:
+        flex: 0 0 auto
+      properties:
+        offsetTop: 10
+        theme:
+          zIndexPopup: 100
+      blocks:
+        - id: affix_theme_high_z_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: High z-index (100)
+            color: primary
+            variant: solid
+            size: small
+    - id: affix_theme_low_z
+      type: Affix
+      layout:
+        flex: 0 0 auto
+      properties:
+        offsetTop: 10
+        theme:
+          zIndexPopup: 1
+      blocks:
+        - id: affix_theme_low_z_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Low z-index (1)
+            color: default
+            variant: dashed
+            size: small
+
+- title: Styled with CSS Key (element)
+  blocks:
+    - id: affix_css_shadow
+      type: Affix
+      layout:
+        flex: 0 0 auto
+      class:
+        element: shadow-lg rounded-lg
+      properties:
+        offsetTop: 10
+      blocks:
+        - id: affix_css_shadow_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Shadow + Rounded
+            color: primary
+            variant: solid
+            size: small
+    - id: affix_css_ring
+      type: Affix
+      layout:
+        flex: 0 0 auto
+      class:
+        element: ring-2 ring-green-400 rounded-lg
+      properties:
+        offsetTop: 10
+      blocks:
+        - id: affix_css_ring_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Ring Border
+            color: default
+            variant: outlined
+            size: small
+
+- title: Inline Style Overrides (element)
+  blocks:
+    - id: affix_style_zindex
+      type: Affix
+      properties:
+        offsetTop: 10
+      style:
+        .element:
+          zIndex: 200
+          boxShadow: 0 4px 12px rgba(0, 0, 0, 0.15)
+      blocks:
+        - id: affix_style_zindex_btn
+          type: Button
+          properties:
+            title: Custom z-index (200) + Shadow
+            color: primary
+            variant: solid
+
+- title: Sticky Form Toolbar
+  blocks:
+    - id: affix_form_toolbar
+      type: Affix
+      properties:
+        offsetTop: 0
+      blocks:
+        - id: affix_form_toolbar_card
+          type: Card
+          properties:
+            size: small
+            bordered: true
+          blocks:
+            - id: affix_form_toolbar_row
+              type: Box
+              layout:
+                gap: 8
+                justify: space-between
+                align: center
+              blocks:
+                - id: affix_form_toolbar_title
+                  type: Title
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    content: Edit Employee Record
+                    level: 5
+                - id: affix_form_toolbar_actions
+                  type: Box
+                  layout:
+                    flex: 0 0 auto
+                    gap: 8
+                  blocks:
+                    - id: affix_form_toolbar_discard
+                      type: Button
+                      layout:
+                        flex: 0 0 auto
+                      properties:
+                        title: Discard
+                        color: default
+                        variant: outlined
+                        size: small
+                      events:
+                        onClick:
+                          - id: affix_form_toolbar_discard_msg
+                            type: DisplayMessage
+                            params:
+                              content: Changes discarded.
+                              status: warning
+                    - id: affix_form_toolbar_save
+                      type: Button
+                      layout:
+                        flex: 0 0 auto
+                      properties:
+                        title: Save Changes
+                        icon: AiOutlineSave
+                        color: primary
+                        variant: solid
+                        size: small
+                      events:
+                        onClick:
+                          - id: affix_form_toolbar_save_msg
+                            type: DisplayMessage
+                            params:
+                              content: Employee record saved successfully.
+                              status: success
+
+- title: Fixed Bottom Action Bar
+  blocks:
+    - id: affix_bottom_bar
+      type: Affix
+      properties:
+        offsetBottom: 0
+      blocks:
+        - id: affix_bottom_bar_card
+          type: Card
+          class: shadow-lg
+          properties:
+            size: small
+          blocks:
+            - id: affix_bottom_bar_row
+              type: Box
+              layout:
+                gap: 12
+                justify: flex-end
+                align: center
+              blocks:
+                - id: affix_bottom_bar_status
+                  type: Paragraph
+                  layout:
+                    flex: 1 1 0
+                  properties:
+                    content: 3 items selected
+                - id: affix_bottom_bar_delete
+                  type: Button
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    title: Delete
+                    icon: AiOutlineDelete
+                    color: danger
+                    variant: outlined
+                    size: small
+                  events:
+                    onClick:
+                      - id: affix_bottom_bar_delete_msg
+                        type: DisplayMessage
+                        params:
+                          content: Items deleted.
+                          status: error
+                - id: affix_bottom_bar_export
+                  type: Button
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    title: Export
+                    icon: AiOutlineDownload
+                    color: primary
+                    variant: solid
+                    size: small
+                  events:
+                    onClick:
+                      - id: affix_bottom_bar_export_msg
+                        type: DisplayMessage
+                        params:
+                          content: Export started.
+                          status: success

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

@@ -0,0 +1,72 @@
+# 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: affix
+type: Box
+properties:
+  style:
+    height: 2000px
+    paddingTop: 200px
+
+blocks:
+  # ============================================
+  # BASIC RENDERING
+  # ============================================
+
+  - id: affix_basic
+    type: Affix
+    properties:
+      offsetTop: 10
+    slots:
+      content:
+        blocks:
+          - id: affix_basic_button
+            type: Button
+            properties:
+              title: Affix Button
+
+  # ============================================
+  # OFFSET TOP
+  # ============================================
+
+  - id: affix_offset_top
+    type: Affix
+    properties:
+      offsetTop: 50
+    slots:
+      content:
+        blocks:
+          - id: affix_offset_top_content
+            type: Span
+            properties:
+              content: Offset Top 50px
+
+  # ============================================
+  # CUSTOM STYLE
+  # ============================================
+
+  - id: affix_styled
+    type: Affix
+    properties:
+      offsetTop: 100
+      style:
+        zIndex: 100
+    slots:
+      content:
+        blocks:
+          - id: affix_styled_content
+            type: Alert
+            properties:
+              message: Styled Affix Alert
+              type: info

package/dist/blocks/Affix/tests.yaml

@@ -0,0 +1,29 @@
+# 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: Affix
+- id: 'properties.offsetTop'
+  type: Affix
+  properties:
+    offsetTop: 15
+- id: 'properties.offsetBottom'
+  type: Affix
+  properties:
+    offsetBottom: 15
+- id: 'properties.style'
+  type: Affix
+  properties:
+    style:
+      border: 5px solid blue