@lowdefy/blocks-loaders 5.6.0 → 6.1.0

package/dist/blocks/SkeletonParagraph/gallery.yaml

@@ -0,0 +1,197 @@
+# 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 (Default 4 Lines)
+  blocks:
+    - id: basic_default
+      type: SkeletonParagraph
+
+- title: Row Count
+  blocks:
+    - id: rows_1
+      type: SkeletonParagraph
+      properties:
+        lines: 1
+    - id: rows_2
+      type: SkeletonParagraph
+      properties:
+        lines: 2
+    - id: rows_3
+      type: SkeletonParagraph
+      properties:
+        lines: 3
+    - id: rows_4
+      type: SkeletonParagraph
+      properties:
+        lines: 4
+    - id: rows_6
+      type: SkeletonParagraph
+      properties:
+        lines: 6
+    - id: rows_8
+      type: SkeletonParagraph
+      properties:
+        lines: 8
+
+- title: Width - Percentage
+  blocks:
+    - id: width_100
+      type: SkeletonParagraph
+      properties:
+        width: '100%'
+        lines: 3
+    - id: width_75
+      type: SkeletonParagraph
+      properties:
+        width: '75%'
+        lines: 3
+    - id: width_50
+      type: SkeletonParagraph
+      properties:
+        width: '50%'
+        lines: 3
+
+- title: Width - Pixel
+  blocks:
+    - id: width_px_400
+      type: SkeletonParagraph
+      properties:
+        width: 400
+        lines: 3
+    - id: width_px_300
+      type: SkeletonParagraph
+      properties:
+        width: 300
+        lines: 3
+    - id: width_px_200
+      type: SkeletonParagraph
+      properties:
+        width: 200
+        lines: 3
+
+- title: Active (Animated)
+  blocks:
+    - id: active_default
+      type: SkeletonParagraph
+      properties:
+        lines: 4
+    - id: active_short
+      type: SkeletonParagraph
+      properties:
+        lines: 2
+        width: '60%'
+
+- title: Single Line
+  blocks:
+    - id: single_full
+      type: SkeletonParagraph
+      properties:
+        lines: 1
+        width: '100%'
+    - id: single_half
+      type: SkeletonParagraph
+      properties:
+        lines: 1
+        width: '50%'
+
+- title: Article Skeleton Composition
+  blocks:
+    - id: article_skeleton
+      type: Box
+      layout:
+        gap: 16
+      blocks:
+        - id: article_title
+          type: Skeleton
+          properties:
+            width: '60%'
+            height: 24
+        - id: article_subtitle
+          type: Skeleton
+          properties:
+            width: '40%'
+            height: 16
+        - id: article_body
+          type: SkeletonParagraph
+          properties:
+            lines: 6
+        - id: article_body_2
+          type: SkeletonParagraph
+          properties:
+            lines: 4
+
+- title: Card with Paragraph Composition
+  blocks:
+    - id: card_with_para
+      type: Box
+      style:
+        padding: 16
+        border: 1px solid #f0f0f0
+        borderRadius: 8
+        maxWidth: 400
+      layout:
+        gap: 12
+      blocks:
+        - id: card_header_row
+          type: Box
+          layout:
+            gap: 12
+            align: center
+            direction: row
+          blocks:
+            - id: card_avatar
+              type: SkeletonAvatar
+              layout:
+                flex: 0 0 auto
+              properties:
+                size: large
+                shape: round
+            - id: card_header_lines
+              type: Box
+              layout:
+                gap: 6
+              blocks:
+                - id: card_name
+                  type: Skeleton
+                  properties:
+                    width: 140
+                    height: 14
+                - id: card_date
+                  type: Skeleton
+                  properties:
+                    width: 80
+                    height: 12
+        - id: card_body
+          type: SkeletonParagraph
+          properties:
+            lines: 3
+
+- title: Style Overrides
+  blocks:
+    - id: style_narrow
+      type: SkeletonParagraph
+      properties:
+        lines: 3
+      style:
+        .element:
+          maxWidth: 300
+    - id: style_padded
+      type: SkeletonParagraph
+      properties:
+        lines: 3
+      style:
+        .element:
+          padding: 16
+          border: 1px solid #f0f0f0
+          borderRadius: 8

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

@@ -0,0 +1,25 @@
+# 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: skeletonparagraph
+type: Box
+
+blocks:
+  - id: skeletonparagraph_basic
+    type: SkeletonParagraph
+
+  - id: skeletonparagraph_lines
+    type: SkeletonParagraph
+    properties:
+      lines: 6

package/dist/blocks/SkeletonParagraph/tests.yaml

@@ -0,0 +1,35 @@
+# 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: SkeletonParagraph
+  description: Default
+- id: lines1
+  type: SkeletonParagraph
+  description: |
+    lines: 1
+  properties:
+    lines: 1
+- id: lines7
+  type: SkeletonParagraph
+  description: |
+    lines: 7
+  properties:
+    lines: 7
+- id: width200
+  type: SkeletonParagraph
+  description: |
+    width: 200
+  properties:
+    width: 200

package/dist/blocks/Spinner/gallery.yaml

@@ -0,0 +1,262 @@
+# 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: Default
+  blocks:
+    - id: spinner_default
+      type: Spinner
+
+- title: Named Sizes
+  blocks:
+    - id: spinner_named_small
+      type: Spinner
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: small
+    - id: spinner_named_medium
+      type: Spinner
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: medium
+    - id: spinner_named_large
+      type: Spinner
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: large
+
+- title: Custom Numeric Sizes
+  blocks:
+    - id: spinner_numeric_16
+      type: Spinner
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: 16
+    - id: spinner_numeric_32
+      type: Spinner
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: 32
+    - id: spinner_numeric_64
+      type: Spinner
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: 64
+
+- title: Styled Spinners (Tailwind CSS)
+  blocks:
+    - id: spinner_styled_blue
+      type: Spinner
+      layout:
+        flex: 0 0 auto
+      class:
+        element: text-blue-500
+      properties:
+        size: large
+    - id: spinner_styled_green
+      type: Spinner
+      layout:
+        flex: 0 0 auto
+      class:
+        element: text-green-500
+      properties:
+        size: large
+    - id: spinner_styled_red
+      type: Spinner
+      layout:
+        flex: 0 0 auto
+      class:
+        element: text-red-500
+      properties:
+        size: large
+    - id: spinner_styled_purple
+      type: Spinner
+      layout:
+        flex: 0 0 auto
+      class:
+        element: text-purple-600
+      properties:
+        size: large
+
+- title: CSS Key Styling
+  blocks:
+    - id: spinner_css_bg_pill
+      type: Spinner
+      layout:
+        flex: 0 0 auto
+      class:
+        element: bg-blue-50 p-4 rounded-full
+      properties:
+        size: large
+    - id: spinner_css_bordered
+      type: Spinner
+      layout:
+        flex: 0 0 auto
+      class:
+        element: border border-gray-200 p-3 rounded-lg bg-white shadow-sm
+      properties:
+        size: medium
+    - id: spinner_css_dark_bg
+      type: Spinner
+      layout:
+        flex: 0 0 auto
+      class:
+        element: bg-gray-800 text-white p-4 rounded-xl
+      properties:
+        size: large
+
+- title: Inline Style Overrides
+  blocks:
+    - id: spinner_style_custom_color
+      type: Spinner
+      layout:
+        flex: 0 0 auto
+      style:
+        .element:
+          color: '#fa8c16'
+      properties:
+        size: large
+    - id: spinner_style_padded
+      type: Spinner
+      layout:
+        flex: 0 0 auto
+      style:
+        .element:
+          padding: 16px
+          backgroundColor: '#f6ffed'
+          borderRadius: 12px
+      properties:
+        size: medium
+
+- title: Data Loading Overlay
+  blocks:
+    - id: spinner_loading_overlay_card
+      type: Card
+      properties:
+        title: Recent Orders
+      slots:
+        extra:
+          blocks:
+            - id: spinner_loading_overlay_btn
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Refresh
+                icon: AiOutlineReload
+                color: primary
+                variant: outlined
+                size: small
+              events:
+                onClick:
+                  - id: spinner_loading_overlay_msg
+                    type: DisplayMessage
+                    params:
+                      content: Fetching latest orders...
+                      duration: 2
+      blocks:
+        - id: spinner_loading_overlay_box
+          type: Box
+          layout:
+            direction: column
+            align: center
+            justify: center
+            gap: 12
+          style:
+            .element:
+              minHeight: 200px
+          blocks:
+            - id: spinner_loading_overlay_spinner
+              type: Spinner
+              layout:
+                flex: 0 0 auto
+              class:
+                element: text-blue-500
+              properties:
+                size: large
+            - id: spinner_loading_overlay_text
+              type: Paragraph
+              layout:
+                flex: 0 0 auto
+              class: text-gray-400
+              properties:
+                content: Loading orders...
+
+- title: Button with Loading State
+  blocks:
+    - id: spinner_btn_loading_card
+      type: Card
+      properties:
+        title: Submit Application
+      blocks:
+        - id: spinner_btn_loading_form_name
+          type: TextInput
+          properties:
+            label:
+              title: Full Name
+            placeholder: Enter your name
+        - id: spinner_btn_loading_form_email
+          type: TextInput
+          properties:
+            label:
+              title: Email Address
+            placeholder: you@example.com
+        - id: spinner_btn_loading_row
+          type: Box
+          layout:
+            gap: 12
+            align: center
+            justify: end
+          blocks:
+            - id: spinner_btn_loading_indicator
+              type: Spinner
+              layout:
+                flex: 0 0 auto
+              class:
+                element: text-blue-500
+              visible:
+                _if:
+                  test:
+                    _eq:
+                      - _state: submitting
+                      - true
+                  then: true
+                  else: false
+              properties:
+                size: small
+            - id: spinner_btn_loading_submit
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Submit
+                color: primary
+                variant: solid
+                icon: AiOutlineSend
+              events:
+                onClick:
+                  - id: spinner_btn_loading_set_state
+                    type: SetState
+                    params:
+                      submitting: true
+                  - id: spinner_btn_loading_msg
+                    type: DisplayMessage
+                    params:
+                      content: Application submitted successfully!
+                      duration: 3

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

@@ -0,0 +1,30 @@
+# 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: spinner
+type: Box
+
+blocks:
+  - id: spinner_basic
+    type: Spinner
+
+  - id: spinner_small
+    type: Spinner
+    properties:
+      size: small
+
+  - id: spinner_large
+    type: Spinner
+    properties:
+      size: large

package/dist/blocks/Spinner/tests.yaml

@@ -0,0 +1,28 @@
+# 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: Spinner
+- id: sizedefault
+  type: Spinner
+  properties:
+    size: default
+- id: sizesmall
+  type: Spinner
+  properties:
+    size: small
+- id: sizelarge
+  type: Spinner
+  properties:
+    size: large

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lowdefy/blocks-loaders",
-  "version": "5.6.0",
+  "version": "6.1.0",
   "license": "Apache-2.0",
   "description": "Lowdefy loader blocks.",
   "homepage": "https://lowdefy.com",
@@ -42,19 +42,19 @@
     "dist/*"
   ],
   "dependencies": {
-    "@lowdefy/block-utils": "5.6.0",
-    "@lowdefy/helpers": "5.6.0"
+    "@lowdefy/block-utils": "6.1.0",
+    "@lowdefy/helpers": "6.1.0"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@lowdefy/block-dev-e2e": "5.6.0",
-    "@lowdefy/e2e-utils": "5.6.0",
-    "@playwright/test": "1.50.1",
-    "@swc/cli": "0.8.0",
-    "@swc/core": "1.15.18",
+    "@lowdefy/block-dev-e2e": "6.1.0",
+    "@lowdefy/e2e-utils": "6.1.0",
+    "@playwright/test": "1.59.1",
+    "@swc/cli": "0.8.1",
+    "@swc/core": "1.15.32",
     "copyfiles": "2.4.1"
   },
   "publishConfig": {
@@ -63,7 +63,7 @@
   "scripts": {
     "build": "swc src --out-dir dist --config-file ../../../../.swcrc --cli-config-file ../../../../.swc-cli.json && pnpm copyfiles",
     "clean": "rm -rf dist",
-    "copyfiles": "copyfiles -u 1 \"./src/**/*\" dist -e \"./src/**/*.js\" -e \"./src/**/*.yaml\" -e \"./src/**/*.snap\"",
+    "copyfiles": "copyfiles -u 1 \"./src/**/*\" dist -e \"./src/**/*.js\" -e \"./src/**/*.snap\"",
     "e2e": "playwright test --config e2e/playwright.config.js",
     "e2e:ui": "playwright test --config e2e/playwright.config.js --ui"
   }