@lowdefy/blocks-antd 5.6.0 → 6.1.0

package/dist/blocks/PageHeaderMenu/gallery.yaml

@@ -0,0 +1,480 @@
+# 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 PageHeaderMenu
+  fullWidth: true
+  blocks:
+    - id: phm_basic
+      type: PageHeaderMenu
+      properties:
+        menu:
+          links:
+            - id: phm_basic_home
+              type: MenuLink
+              properties:
+                title: Home
+                icon: AiOutlineHome
+            - id: phm_basic_products
+              type: MenuLink
+              properties:
+                title: Products
+                icon: AiOutlineAppstore
+            - id: phm_basic_pricing
+              type: MenuLink
+              properties:
+                title: Pricing
+            - id: phm_basic_contact
+              type: MenuLink
+              properties:
+                title: Contact
+      blocks:
+        - id: phm_basic_title
+          type: Title
+          properties:
+            content: Welcome
+            level: 2
+        - id: phm_basic_cards
+          type: Box
+          layout:
+            gap: 16
+          blocks:
+            - id: phm_basic_card_1
+              type: Card
+              layout:
+                flex: 1 1 0
+              properties:
+                title: Getting Started
+              blocks:
+                - id: phm_basic_card_1_text
+                  type: Paragraph
+                  properties:
+                    content: Follow the quick start guide to set up your first project in minutes.
+            - id: phm_basic_card_2
+              type: Card
+              layout:
+                flex: 1 1 0
+              properties:
+                title: Documentation
+              blocks:
+                - id: phm_basic_card_2_text
+                  type: Paragraph
+                  properties:
+                    content: Browse the full API reference and configuration guides.
+
+- title: Menu Groups & Breadcrumb
+  fullWidth: true
+  blocks:
+    - id: phm_grouped
+      type: PageHeaderMenu
+      properties:
+        darkModeToggle: true
+        breadcrumb:
+          separator: /
+          list:
+            - label: Home
+              icon: AiOutlineHome
+            - label: Analytics
+            - label: Overview
+        menu:
+          links:
+            - id: phm_g_dash
+              type: MenuLink
+              properties:
+                title: Dashboard
+                icon: AiOutlineDashboard
+            - id: phm_g_analytics
+              type: MenuGroup
+              properties:
+                title: Analytics
+                icon: AiOutlineBarChart
+              links:
+                - id: phm_g_overview
+                  type: MenuLink
+                  properties:
+                    title: Overview
+                - id: phm_g_realtime
+                  type: MenuLink
+                  properties:
+                    title: Real-time
+                - id: phm_g_funnel
+                  type: MenuLink
+                  properties:
+                    title: Funnels
+            - id: phm_g_settings
+              type: MenuLink
+              properties:
+                title: Settings
+                icon: AiOutlineSetting
+      blocks:
+        - id: phm_g_title
+          type: Title
+          properties:
+            content: Analytics Overview
+            level: 3
+        - id: phm_g_cards
+          type: Box
+          layout:
+            gap: 16
+          blocks:
+            - id: phm_g_card_visits
+              type: Card
+              layout:
+                flex: 1 1 200px
+              properties:
+                size: small
+              blocks:
+                - id: phm_g_stat_visits
+                  type: Statistic
+                  properties:
+                    title: Page Views
+                    value: 12847
+            - id: phm_g_card_users
+              type: Card
+              layout:
+                flex: 1 1 200px
+              properties:
+                size: small
+              blocks:
+                - id: phm_g_stat_users
+                  type: Statistic
+                  properties:
+                    title: Active Users
+                    value: 1024
+            - id: phm_g_card_rate
+              type: Card
+              layout:
+                flex: 1 1 200px
+              properties:
+                size: small
+              blocks:
+                - id: phm_g_stat_rate
+                  type: Statistic
+                  properties:
+                    title: Bounce Rate
+                    value: 23.4
+                    suffix: '%'
+
+- title: Profile & Notifications
+  fullWidth: true
+  blocks:
+    - id: phm_profile
+      type: PageHeaderMenu
+      properties:
+        darkModeToggle: true
+        notifications:
+          count: 3
+        profile:
+          avatar:
+            content: JD
+            color: '#1677ff'
+          links:
+            - id: phm_prof_my_profile
+              type: MenuLink
+              properties:
+                title: My Profile
+                icon: AiOutlineUser
+            - id: phm_prof_settings
+              type: MenuLink
+              properties:
+                title: Settings
+                icon: AiOutlineSetting
+            - id: phm_prof_divider
+              type: MenuDivider
+            - id: phm_prof_logout
+              type: MenuLink
+              properties:
+                title: Logout
+                icon: AiOutlineLogout
+                danger: true
+        menu:
+          links:
+            - id: phm_prof_home
+              type: MenuLink
+              properties:
+                title: Home
+                icon: AiOutlineHome
+            - id: phm_prof_projects
+              type: MenuLink
+              properties:
+                title: Projects
+                icon: AiOutlineProject
+            - id: phm_prof_reports
+              type: MenuLink
+              properties:
+                title: Reports
+                icon: AiOutlineBarChart
+      blocks:
+        - id: phm_prof_title
+          type: Title
+          properties:
+            content: Dashboard
+            level: 3
+        - id: phm_prof_cards
+          type: Box
+          layout:
+            gap: 16
+          blocks:
+            - id: phm_prof_card_1
+              type: Card
+              layout:
+                flex: 1 1 0
+              properties:
+                size: small
+              blocks:
+                - id: phm_prof_stat_1
+                  type: Statistic
+                  properties:
+                    title: Active Projects
+                    value: 12
+            - id: phm_prof_card_2
+              type: Card
+              layout:
+                flex: 1 1 0
+              properties:
+                size: small
+              blocks:
+                - id: phm_prof_stat_2
+                  type: Statistic
+                  properties:
+                    title: Pending Tasks
+                    value: 8
+
+- title: Full Layout with All Slots
+  fullWidth: true
+  blocks:
+    - id: phm_full
+      type: PageHeaderMenu
+      properties:
+        darkModeToggle: true
+        logo:
+          alt: Acme Corp
+        notifications:
+          dot: true
+        profile:
+          avatar:
+            icon: AiOutlineUser
+        breadcrumb:
+          list:
+            - Intranet
+            - Team Directory
+        menu:
+          links:
+            - id: phm_full_home
+              type: MenuLink
+              properties:
+                title: Home
+                icon: AiOutlineHome
+            - id: phm_full_directory
+              type: MenuLink
+              properties:
+                title: Directory
+                icon: AiOutlineTeam
+            - id: phm_full_resources
+              type: MenuGroup
+              properties:
+                title: Resources
+                icon: AiOutlineBook
+              links:
+                - id: phm_full_policies
+                  type: MenuLink
+                  properties:
+                    title: Company Policies
+                - id: phm_full_benefits
+                  type: MenuLink
+                  properties:
+                    title: Benefits Guide
+            - id: phm_full_help
+              type: MenuLink
+              properties:
+                title: IT Support
+                icon: AiOutlineQuestionCircle
+      slots:
+        footer:
+          blocks:
+            - id: phm_full_footer_text
+              type: Paragraph
+              properties:
+                content: Acme Corp Intranet - Internal Use Only
+                style:
+                  margin: 0
+                  color: '#888'
+                  textAlign: center
+      blocks:
+        - id: phm_full_welcome
+          type: Title
+          properties:
+            content: Welcome back, Jane
+            level: 3
+        - id: phm_full_cards
+          type: Box
+          layout:
+            gap: 16
+          blocks:
+            - id: phm_full_card_announce
+              type: Card
+              layout:
+                flex: 1 1 300px
+              properties:
+                title: Announcements
+              blocks:
+                - id: phm_full_announce_1
+                  type: Paragraph
+                  properties:
+                    content: 'Office hours updated: Building opens at 7:00 AM starting next Monday.'
+                - id: phm_full_announce_2
+                  type: Paragraph
+                  properties:
+                    content: 'Q1 All-Hands meeting scheduled for March 28 at 2:00 PM.'
+            - id: phm_full_card_links
+              type: Card
+              layout:
+                flex: 1 1 300px
+              properties:
+                title: Quick Links
+              blocks:
+                - id: phm_full_link_1
+                  type: Paragraph
+                  properties:
+                    content: Submit a Time-Off Request
+                - id: phm_full_link_2
+                  type: Paragraph
+                  properties:
+                    content: View Expense Reports
+
+- title: Dark Mode Toggle with Breadcrumb
+  fullWidth: true
+  blocks:
+    - id: phm_light
+      type: PageHeaderMenu
+      properties:
+        darkModeToggle: true
+        menu:
+          links:
+            - id: phm_light_guide
+              type: MenuLink
+              properties:
+                title: Guide
+                icon: AiOutlineBook
+            - id: phm_light_api
+              type: MenuLink
+              properties:
+                title: API Reference
+                icon: AiOutlineApi
+            - id: phm_light_examples
+              type: MenuLink
+              properties:
+                title: Examples
+                icon: AiOutlineCode
+            - id: phm_light_community
+              type: MenuLink
+              properties:
+                title: Community
+                icon: AiOutlineGlobal
+        breadcrumb:
+          separator: /
+          list:
+            - Docs
+            - Getting Started
+            - Installation
+      slots:
+        header:
+          blocks:
+            - id: phm_light_search_btn
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Search
+                icon: AiOutlineSearch
+                color: default
+                variant: outlined
+                size: small
+      blocks:
+        - id: phm_light_title
+          type: Title
+          properties:
+            content: Installation
+            level: 2
+        - id: phm_light_intro
+          type: Paragraph
+          properties:
+            content: Get started by installing the framework via npm or yarn. Follow the steps below to set up your development environment.
+        - id: phm_light_alert
+          type: Alert
+          properties:
+            message: Prerequisites
+            description: Make sure you have Node.js version 18 or higher installed before proceeding.
+            type: info
+            showIcon: true
+        - id: phm_light_steps
+          type: Card
+          properties:
+            title: Setup Steps
+            size: small
+          blocks:
+            - id: phm_light_step_1
+              type: Paragraph
+              properties:
+                content: '1. Initialize a new project directory and run the setup command.'
+            - id: phm_light_step_2
+              type: Paragraph
+              properties:
+                content: '2. Configure your lowdefy.yaml file with pages and connections.'
+            - id: phm_light_step_3
+              type: Paragraph
+              properties:
+                content: '3. Start the development server to preview your application.'
+
+- title: Profile Links from _menu Operator
+  description: Use the _menu operator to populate profile dropdown links from a menu defined in lowdefy.yaml. This keeps profile menus consistent with navigation menus and supports access-controlled filtering.
+  fullWidth: true
+  blocks:
+    - id: phm_menu_op
+      type: PageHeaderMenu
+      properties:
+        darkModeToggle: true
+        notifications:
+          count: 2
+          link:
+            pageId: home
+        profile:
+          avatar:
+            content: JD
+            color: '#6366f1'
+          links:
+            _menu: default
+        menu:
+          links:
+            - id: phm_mo_home
+              type: MenuLink
+              properties:
+                title: Home
+                icon: AiOutlineHome
+            - id: phm_mo_settings
+              type: MenuLink
+              properties:
+                title: Settings
+                icon: AiOutlineSetting
+      blocks:
+        - id: phm_mo_title
+          type: Title
+          properties:
+            content: Profile from _menu
+            level: 3
+        - id: phm_mo_info
+          type: Alert
+          properties:
+            message: The profile dropdown links are populated using _menu operator, pulling from the menus defined in lowdefy.yaml. Click the avatar to see the dropdown.
+            type: info
+            showIcon: true

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

@@ -0,0 +1,110 @@
+# 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: pageheadermenu
+type: PageHeaderMenu
+properties:
+  header:
+    theme: dark
+  menu:
+    links:
+      - id: phm_link1
+        type: MenuLink
+        properties:
+          title: Dashboard
+      - id: phm_link2
+        type: MenuLink
+        properties:
+          title: Settings
+      - id: phm_link3
+        type: MenuLink
+        properties:
+          title: Help
+  breadcrumb:
+    list:
+      - Home
+      - Dashboard
+  logo:
+    alt: Test Logo
+
+slots:
+  header:
+    blocks:
+      - id: header_content
+        type: Span
+        properties:
+          content: Header Content
+  content:
+    blocks:
+      # ============================================
+      # BASIC RENDERING
+      # ============================================
+
+      - id: basic_content
+        type: Title
+        properties:
+          content: Page Content
+          level: 3
+
+      # ============================================
+      # EVENT TESTS
+      # ============================================
+
+      - id: onclick_display
+        type: Span
+        properties:
+          content:
+            _if:
+              test:
+                _ne:
+                  - _state: phm_breadcrumb_clicked
+                  - null
+              then:
+                _string.concat:
+                  - 'Breadcrumb clicked: '
+                  - _state: phm_breadcrumb_clicked
+              else: ''
+
+      # ============================================
+      # MENU ITEM TARGETING DISPLAY
+      # ============================================
+
+      - id: menu_click_display
+        type: Span
+        properties:
+          content:
+            _if:
+              test:
+                _ne:
+                  - _state: phm_menu_clicked
+                  - null
+              then:
+                _string.concat:
+                  - 'Menu clicked: '
+                  - _state: phm_menu_clicked
+              else: ''
+
+events:
+  onBreadcrumbClick:
+    - id: set_breadcrumb_clicked
+      type: SetState
+      params:
+        phm_breadcrumb_clicked:
+          _event: link
+  onMenuItemClick:
+    - id: set_menu_clicked
+      type: SetState
+      params:
+        phm_menu_clicked:
+          _event: key