@lowdefy/blocks-antd 5.6.0 → 6.0.0

package/dist/blocks/PageHeaderMenu/tests.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: default
+  type: PageHeaderMenu
+- id: 'properties.menu'
+  type: PageHeaderMenu
+  properties:
+    menu:
+      links:
+        - id: Introduction
+          type: MenuLink
+          pageId: introduction
+          properties:
+            icon: AiOutlineRocket
+            title: Introduction
+        - id: alert
+          type: MenuLink
+          pageId: Alert
+          properties:
+            icon: AiOutlineExclamationCircle
+            title: Alert
+- id: 'properties.logo.src'
+  type: PageHeaderMenu
+  properties:
+    logo:
+      src: 'https://lowdefy.com/logos/name_250.png'
+    menu:
+      links:
+        - id: Introduction
+          type: MenuLink
+          pageId: introduction
+          properties:
+            icon: AiOutlineRocket
+            title: Introduction
+        - id: alert
+          type: MenuLink
+          pageId: Alert
+          properties:
+            icon: AiOutlineExclamationCircle
+            title: Alert
+- id: 'properties.logo.alt'
+  type: PageHeaderMenu
+  properties:
+    logo:
+      alt: 'Header logo alt text'
+    menu:
+      links:
+        - id: Introduction
+          type: MenuLink
+          pageId: introduction
+          properties:
+            icon: AiOutlineRocket
+            title: Introduction
+        - id: alert
+          type: MenuLink
+          pageId: Alert
+          properties:
+            icon: AiOutlineExclamationCircle
+            title: Alert
+- id: 'properties.logo.style'
+  type: PageHeaderMenu
+  properties:
+    logo:
+      style:
+        border: 5px solid blue
+- id: 'properties.logo.srcSet'
+  type: PageHeaderMenu
+  properties:
+    logo:
+      srcSet: 'https://lowdefy.com/logos/name_250.png 250w, https://lowdefy.com/logos/name_450.png 450w'
+    menu:
+      links:
+        - id: Introduction
+          type: MenuLink
+          pageId: introduction
+          properties:
+            icon: AiOutlineRocket
+            title: Introduction
+        - id: alert
+          type: MenuLink
+          pageId: Alert
+          properties:
+            icon: AiOutlineExclamationCircle
+            title: Alert
+- id: 'properties.logo.size'
+  type: PageHeaderMenu
+  properties:
+    logo:
+      srcSet: '(max-width: 767px) 40px, 768px'
+    menu:
+      links:
+        - id: Introduction
+          type: MenuLink
+          pageId: introduction
+          properties:
+            icon: AiOutlineRocket
+            title: Introduction
+        - id: alert
+          type: MenuLink
+          pageId: Alert
+          properties:
+            icon: AiOutlineExclamationCircle
+            title: Alert
+- id: 'properties.header.theme: light'
+  type: PageHeaderMenu
+  properties:
+    header:
+      theme: light
+    menu:
+      links:
+        - id: Introduction
+          type: MenuLink
+          pageId: introduction
+          properties:
+            icon: AiOutlineRocket
+            title: Introduction
+        - id: alert
+          type: MenuLink
+          pageId: Alert
+          properties:
+            icon: AiOutlineExclamationCircle
+            title: Alert
+- id: 'properties.breadcrumb.list'
+  type: PageHeaderMenu
+  properties:
+    breadcrumb:
+      list:
+        - Link one
+        - Link two
+- id: 'properties.footer.style'
+  type: PageHeaderMenu
+  properties:
+    footer:
+      style:
+        border: 5px solid blue
+  areas:
+    footer:
+      blocks: []
+- id: 'properties.content.style'
+  type: PageHeaderMenu
+  properties:
+    content:
+      style:
+        border: 5px solid blue
+  areas:
+    content:
+      blocks: []
+- id: 'properties.header.style'
+  type: PageHeaderMenu
+  properties:
+    header:
+      style:
+        border: 5px solid blue
+  areas:
+    header:
+      blocks: []
+- id: 'properties.style'
+  type: PageHeaderMenu
+  properties:
+    style:
+      border: 5px solid blue

package/dist/blocks/PageSidebarLayout/PageSidebarLayout.js

@@ -419,7 +419,16 @@ const PageSidebarLayout = ({ basePath, blockId, classNames = {}, components: { I
                                                 },
                                                 properties.header?.contentStyle
                                             ])
-                                        }, content.header())
+                                        }, content.header(mergeObjects([
+                                            {
+                                                display: 'flex',
+                                                flex: '1 1 auto',
+                                                width: '100%',
+                                                minWidth: 0,
+                                                alignItems: 'center'
+                                            },
+                                            styles.headerContent
+                                        ])))
                                 }
                             }), /*#__PURE__*/ React.createElement(Content, {
                                 blockId: `${blockId}_content`,

package/dist/blocks/PageSidebarLayout/gallery.yaml

@@ -0,0 +1,302 @@
+# 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 PageSidebarLayout
+  fullWidth: true
+  blocks:
+    - id: psl_basic
+      type: PageSidebarLayout
+      properties:
+        siderStorageKey: psl_basic
+        sider:
+          initialCollapsed: false
+          width: 220
+        menu:
+          links:
+            - id: psl_basic_dash
+              type: MenuLink
+              properties:
+                title: Dashboard
+                icon: AiOutlineDashboard
+            - id: psl_basic_users
+              type: MenuLink
+              properties:
+                title: Users
+                icon: AiOutlineUser
+            - id: psl_basic_settings
+              type: MenuLink
+              properties:
+                title: Settings
+                icon: AiOutlineSetting
+      blocks:
+        - id: psl_basic_content
+          type: Paragraph
+          properties:
+            content: PageSidebarLayout provides a full-page layout with a full-height sidebar. The sider spans the entire viewport height with the logo at the bottom. On mobile screens, a hamburger menu with a full-width drawer replaces the sider.
+
+- title: Initially Collapsed
+  fullWidth: true
+  blocks:
+    - id: psl_collapsed
+      type: PageSidebarLayout
+      properties:
+        siderStorageKey: psl_collapsed
+        sider:
+          initialCollapsed: true
+        menu:
+          links:
+            - id: psl_collapsed_dash
+              type: MenuLink
+              properties:
+                title: Dashboard
+                icon: AiOutlineDashboard
+            - id: psl_collapsed_users
+              type: MenuLink
+              properties:
+                title: Users
+                icon: AiOutlineUser
+      blocks:
+        - id: psl_collapsed_content
+          type: Paragraph
+          properties:
+            content: Sider starts collapsed. Click the toggle button to expand. The collapsed state is persisted in localStorage.
+
+- title: With Desktop Header
+  fullWidth: true
+  blocks:
+    - id: psl_header
+      type: PageSidebarLayout
+      properties:
+        siderStorageKey: psl_header
+        sider:
+          width: 220
+        header:
+          contentStyle:
+            justifyContent: flex-end
+        menu:
+          links:
+            - id: psl_header_dash
+              type: MenuLink
+              properties:
+                title: Dashboard
+                icon: AiOutlineDashboard
+            - id: psl_header_settings
+              type: MenuLink
+              properties:
+                title: Settings
+                icon: AiOutlineSetting
+      slots:
+        header:
+          blocks:
+            - id: psl_header_search_btn
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Search
+                icon: AiOutlineSearch
+                color: default
+                variant: outlined
+                size: small
+      blocks:
+        - id: psl_header_content
+          type: Paragraph
+          properties:
+            content: Optional desktop header with custom content. The header sits inside the content area, not above the sider.
+
+- title: Logo Configuration
+  fullWidth: true
+  blocks:
+    - id: psl_logo
+      type: PageSidebarLayout
+      properties:
+        siderStorageKey: psl_logo
+        logo:
+          src: /logo_example.png
+          srcMobile: /logo_example.png
+          alt: Custom Logo
+          style:
+            width: 80
+        menu:
+          links:
+            - id: psl_logo_dash
+              type: MenuLink
+              properties:
+                title: Dashboard
+                icon: AiOutlineDashboard
+      blocks:
+        - id: psl_logo_content
+          type: Paragraph
+          properties:
+            content: Custom logo with style overrides. The full logo (src) shows when the sider is expanded, and the square logo (srcMobile) shows when collapsed.
+
+- title: Admin Dashboard
+  fullWidth: true
+  blocks:
+    - id: psl_admin
+      type: PageSidebarLayout
+      properties:
+        siderStorageKey: psl_admin
+        darkModeToggle: true
+        notifications:
+          count: 3
+        profile:
+          avatar:
+            content: AU
+            color: '#1677ff'
+          links:
+            - id: psl_admin_prof_profile
+              type: MenuLink
+              properties:
+                title: My Profile
+                icon: AiOutlineUser
+            - id: psl_admin_prof_settings
+              type: MenuLink
+              properties:
+                title: Settings
+                icon: AiOutlineSetting
+            - id: psl_admin_prof_divider
+              type: MenuDivider
+            - id: psl_admin_prof_logout
+              type: MenuLink
+              properties:
+                title: Sign Out
+                icon: AiOutlineLogout
+                danger: true
+        sider:
+          width: 240
+        breadcrumb:
+          list:
+            - Admin
+            - Dashboard
+        menu:
+          defaultOpenKeys:
+            - psl_admin_users_group
+          links:
+            - id: psl_admin_dash
+              type: MenuLink
+              properties:
+                title: Dashboard
+                icon: AiOutlineDashboard
+            - id: psl_admin_users_group
+              type: MenuGroup
+              properties:
+                title: User Management
+                icon: AiOutlineTeam
+              links:
+                - id: psl_admin_all_users
+                  type: MenuLink
+                  properties:
+                    title: All Users
+                - id: psl_admin_user_roles
+                  type: MenuLink
+                  properties:
+                    title: Roles & Permissions
+            - id: psl_admin_analytics
+              type: MenuLink
+              properties:
+                title: Analytics
+                icon: AiOutlineBarChart
+            - id: psl_admin_settings
+              type: MenuLink
+              properties:
+                title: Settings
+                icon: AiOutlineSetting
+      slots:
+        siderOpen:
+          blocks:
+            - id: psl_admin_sider_open
+              type: Box
+              style:
+                padding: 8px 12px
+              blocks:
+                - id: psl_admin_env_tag
+                  type: Tag
+                  properties:
+                    title: Production
+                    color: green
+                    icon: AiOutlineCloudServer
+        siderClosed:
+          blocks:
+            - id: psl_admin_sider_closed
+              type: Box
+              style:
+                padding: 8px
+                textAlign: center
+              blocks:
+                - id: psl_admin_env_tag_sm
+                  type: Tag
+                  properties:
+                    title: Prod
+                    color: green
+        footer:
+          blocks:
+            - id: psl_admin_footer_text
+              type: Paragraph
+              properties:
+                content: Admin Panel v2.4.1
+                style:
+                  textAlign: center
+                  margin: 0
+                  color: '#999'
+                  fontSize: 12
+      blocks:
+        - id: psl_admin_title
+          type: Title
+          properties:
+            content: Dashboard Overview
+            level: 3
+        - id: psl_admin_stats_row
+          type: Box
+          layout:
+            gap: 16
+          blocks:
+            - id: psl_admin_stat_users
+              type: Card
+              layout:
+                flex: 1 1 0
+              properties:
+                size: small
+              blocks:
+                - id: psl_admin_stat_users_val
+                  type: Statistic
+                  properties:
+                    title: Total Users
+                    value: 2847
+                    prefixIcon: AiOutlineUser
+            - id: psl_admin_stat_revenue
+              type: Card
+              layout:
+                flex: 1 1 0
+              properties:
+                size: small
+              blocks:
+                - id: psl_admin_stat_revenue_val
+                  type: Statistic
+                  properties:
+                    title: Revenue
+                    value: 58420
+                    prefix: $
+            - id: psl_admin_stat_orders
+              type: Card
+              layout:
+                flex: 1 1 0
+              properties:
+                size: small
+              blocks:
+                - id: psl_admin_stat_orders_val
+                  type: Statistic
+                  properties:
+                    title: Orders
+                    value: 384

package/dist/blocks/PageSidebarLayout/meta.js

@@ -47,6 +47,7 @@ export default {
         mobileMenu: 'The PageSidebarLayout mobile menu.',
         header: 'The PageSidebarLayout header.',
         headerActions: 'The header actions container (notifications, profile, dark mode toggle).',
+        headerContent: 'The PageSidebarLayout header content area (the header slot row).',
         logo: 'The PageSidebarLayout logo.',
         notifications: 'The notification bell button.',
         notificationsBadge: 'The notification badge wrapper.',

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

@@ -0,0 +1,216 @@
+# 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: pagesidebarlayout
+type: PageSidebarLayout
+properties:
+  siderStorageKey: psl_e2e
+  sider:
+    initialCollapsed: false
+    collapsible: true
+  logo:
+    src: logo-light-theme.png
+    srcMobile: logo-square-light-theme.png
+    alt: Test Logo
+  menu:
+    links:
+      - id: psl_link1
+        type: MenuLink
+        properties:
+          title: Dashboard
+          icon: AiOutlineDashboard
+      - id: psl_link2
+        type: MenuLink
+        properties:
+          title: Users
+          icon: AiOutlineUser
+      - id: psl_group
+        type: MenuGroup
+        properties:
+          title: Settings
+          icon: AiOutlineSetting
+        links:
+          - id: psl_sub1
+            type: MenuLink
+            properties:
+              title: General
+          - id: psl_sub2
+            type: MenuLink
+            properties:
+              title: Security
+  breadcrumb:
+    list:
+      - Home
+      - Dashboard
+
+slots:
+  header:
+    blocks:
+      - id: header_content
+        type: Span
+        properties:
+          content: Header Content Area
+  siderOpen:
+    blocks:
+      - id: sider_open_content
+        type: Span
+        properties:
+          content: Sider Open Content
+  siderClosed:
+    blocks:
+      - id: sider_closed_content
+        type: Span
+        properties:
+          content: Sider Closed Content
+  mobileExtra:
+    blocks:
+      - id: mobile_extra_content
+        type: Span
+        properties:
+          content: Mobile Extra
+  mobileDrawerContent:
+    blocks:
+      - id: mobile_drawer_content
+        type: Span
+        properties:
+          content: Mobile Drawer Content
+  mobileDrawerFooter:
+    blocks:
+      - id: mobile_drawer_footer
+        type: Span
+        properties:
+          content: Mobile Drawer Footer
+  content:
+    blocks:
+      - id: main_content
+        type: Title
+        properties:
+          content: Main Content Area
+          level: 3
+
+      # ============================================
+      # METHOD TESTS
+      # ============================================
+
+      - id: toggle_sider_btn
+        type: Button
+        properties:
+          title: Toggle Sider
+        events:
+          onClick:
+            - id: toggle_sider
+              type: CallMethod
+              params:
+                blockId: pagesidebarlayout
+                method: toggleSiderOpen
+
+      - id: open_sider_btn
+        type: Button
+        properties:
+          title: Open Sider
+        events:
+          onClick:
+            - id: open_sider
+              type: CallMethod
+              params:
+                blockId: pagesidebarlayout
+                method: setSiderOpen
+                args:
+                  - open: true
+
+      - id: close_sider_btn
+        type: Button
+        properties:
+          title: Close Sider
+        events:
+          onClick:
+            - id: close_sider
+              type: CallMethod
+              params:
+                blockId: pagesidebarlayout
+                method: setSiderOpen
+                args:
+                  - open: false
+
+      # ============================================
+      # EVENT DISPLAYS
+      # ============================================
+
+      - id: breadcrumb_display
+        type: Span
+        properties:
+          content:
+            _if:
+              test:
+                _ne:
+                  - _state: psl_breadcrumb_clicked
+                  - null
+              then:
+                _string.concat:
+                  - 'Breadcrumb: '
+                  - _state: psl_breadcrumb_clicked
+              else: ''
+
+      - id: menuitem_display
+        type: Span
+        properties:
+          content:
+            _if:
+              test:
+                _ne:
+                  - _state: psl_menuitem_clicked
+                  - null
+              then:
+                _string.concat:
+                  - 'Menu clicked: '
+                  - _state: psl_menuitem_clicked
+              else: ''
+
+      - id: toggle_sider_display
+        type: Span
+        properties:
+          content:
+            _if:
+              test:
+                _eq:
+                  - _state: psl_toggle_sider_fired
+                  - true
+              then: Toggle sider fired
+              else: ''
+
+  footer:
+    blocks:
+      - id: footer_content
+        type: Span
+        properties:
+          content: Footer Content Area
+
+events:
+  onBreadcrumbClick:
+    - id: set_breadcrumb_clicked
+      type: SetState
+      params:
+        psl_breadcrumb_clicked:
+          _event: link
+  onMenuItemClick:
+    - id: set_menu_clicked
+      type: SetState
+      params:
+        psl_menuitem_clicked:
+          _event: key
+  onToggleSider:
+    - id: set_toggle_sider_fired
+      type: SetState
+      params:
+        psl_toggle_sider_fired: true