@lowdefy/blocks-loaders 5.6.0 → 6.1.0

package/dist/blocks/SkeletonAvatar/tests/SkeletonAvatar.e2e.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: skeletonavatar
+type: Box
+
+blocks:
+  - id: skeletonavatar_basic
+    type: SkeletonAvatar
+
+  - id: skeletonavatar_small
+    type: SkeletonAvatar
+    properties:
+      size: small
+
+  - id: skeletonavatar_large
+    type: SkeletonAvatar
+    properties:
+      size: large
+
+  - id: skeletonavatar_square
+    type: SkeletonAvatar
+    properties:
+      shape: square

package/dist/blocks/SkeletonAvatar/tests.yaml

@@ -0,0 +1,41 @@
+# 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: SkeletonAvatar
+  description: Default
+- id: sizedefault
+  type: SkeletonAvatar
+  description: |
+    size: default
+  properties:
+    size: default
+- id: sizesmall
+  type: SkeletonAvatar
+  description: |
+    size: small
+  properties:
+    size: small
+- id: sizelarge
+  type: SkeletonAvatar
+  description: |
+    size: large
+  properties:
+    size: large
+- id: shapesquare
+  type: SkeletonAvatar
+  description: |
+    shape: square
+  properties:
+    shape: square

package/dist/blocks/SkeletonButton/gallery.yaml

@@ -0,0 +1,241 @@
+# 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: Shapes
+  blocks:
+    - id: shape_default
+      type: SkeletonButton
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: medium
+        width: 120
+    - id: shape_round
+      type: SkeletonButton
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: medium
+        width: 120
+        shape: round
+
+- title: Sizes
+  blocks:
+    - id: size_small
+      type: SkeletonButton
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: small
+        width: 80
+    - id: size_medium
+      type: SkeletonButton
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: medium
+        width: 100
+    - id: size_large
+      type: SkeletonButton
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: large
+        width: 120
+
+- title: Sizes (Round)
+  blocks:
+    - id: size_small_round
+      type: SkeletonButton
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: small
+        width: 80
+        shape: round
+    - id: size_medium_round
+      type: SkeletonButton
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: medium
+        width: 100
+        shape: round
+    - id: size_large_round
+      type: SkeletonButton
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: large
+        width: 120
+        shape: round
+
+- title: Active (Animated)
+  blocks:
+    - id: active_small
+      type: SkeletonButton
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: small
+        width: 80
+    - id: active_medium
+      type: SkeletonButton
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: medium
+        width: 100
+    - id: active_large
+      type: SkeletonButton
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: large
+        width: 120
+    - id: active_round
+      type: SkeletonButton
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: medium
+        width: 120
+        shape: round
+
+- title: Block (Full Width)
+  blocks:
+    - id: block_small
+      type: SkeletonButton
+      properties:
+        size: small
+    - id: block_medium
+      type: SkeletonButton
+      properties:
+        size: medium
+    - id: block_large
+      type: SkeletonButton
+      properties:
+        size: large
+
+- title: Block (Full Width, Round)
+  blocks:
+    - id: block_small_round
+      type: SkeletonButton
+      properties:
+        size: small
+        shape: round
+    - id: block_medium_round
+      type: SkeletonButton
+      properties:
+        size: medium
+        shape: round
+    - id: block_large_round
+      type: SkeletonButton
+      properties:
+        size: large
+        shape: round
+
+- title: Custom Width
+  blocks:
+    - id: custom_px_80
+      type: SkeletonButton
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: medium
+        width: 80
+    - id: custom_px_160
+      type: SkeletonButton
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: medium
+        width: 160
+    - id: custom_px_240
+      type: SkeletonButton
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: medium
+        width: 240
+    - id: custom_pct_50
+      type: SkeletonButton
+      properties:
+        size: medium
+        width: '50%'
+
+- title: Button Group Composition
+  blocks:
+    - id: btn_group_row
+      type: Box
+      layout:
+        gap: 8
+      blocks:
+        - id: btn_group_1
+          type: SkeletonButton
+          layout:
+            flex: 0 0 auto
+          properties:
+            size: medium
+            width: 100
+            shape: round
+        - id: btn_group_2
+          type: SkeletonButton
+          layout:
+            flex: 0 0 auto
+          properties:
+            size: medium
+            width: 80
+            shape: round
+        - id: btn_group_3
+          type: SkeletonButton
+          layout:
+            flex: 0 0 auto
+          properties:
+            size: medium
+            width: 60
+            shape: round
+
+- title: Style Overrides
+  blocks:
+    - id: style_custom_radius
+      type: SkeletonButton
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: medium
+        width: 140
+      style:
+        .element:
+          borderRadius: 4
+    - id: style_no_radius
+      type: SkeletonButton
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: medium
+        width: 140
+      style:
+        .element:
+          borderRadius: 0
+    - id: style_circle
+      type: SkeletonButton
+      layout:
+        flex: 0 0 auto
+      properties:
+        size: large
+        width: 40
+      style:
+        .element:
+          borderRadius: 20

package/dist/blocks/SkeletonButton/tests/SkeletonButton.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: skeletonbutton
+type: Box
+
+blocks:
+  - id: skeletonbutton_basic
+    type: SkeletonButton
+
+  - id: skeletonbutton_small
+    type: SkeletonButton
+    properties:
+      size: small
+
+  - id: skeletonbutton_large
+    type: SkeletonButton
+    properties:
+      size: large

package/dist/blocks/SkeletonButton/tests.yaml

@@ -0,0 +1,41 @@
+# 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: SkeletonButton
+  description: Default
+- id: sizedefault
+  type: SkeletonButton
+  description: |
+    Size: default
+  properties:
+    size: default
+- id: sizesmall
+  type: SkeletonButton
+  description: |
+    Size: small
+  properties:
+    size: small
+- id: sizelarge
+  type: SkeletonButton
+  description: |
+    Size: large
+  properties:
+    size: large
+- id: shaperound
+  type: SkeletonButton
+  description: |
+    shape: round
+  properties:
+    shape: round

package/dist/blocks/SkeletonInput/gallery.yaml

@@ -0,0 +1,215 @@
+# 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: Sizes
+  blocks:
+    - id: size_small
+      type: SkeletonInput
+      properties:
+        size: small
+    - id: size_medium
+      type: SkeletonInput
+      properties:
+        size: medium
+    - id: size_large
+      type: SkeletonInput
+      properties:
+        size: large
+
+- title: Active (Animated)
+  blocks:
+    - id: active_small
+      type: SkeletonInput
+      properties:
+        size: small
+    - id: active_medium
+      type: SkeletonInput
+      properties:
+        size: medium
+    - id: active_large
+      type: SkeletonInput
+      properties:
+        size: large
+
+- title: Without Label
+  blocks:
+    - id: no_label_small
+      type: SkeletonInput
+      properties:
+        size: small
+        label: false
+    - id: no_label_medium
+      type: SkeletonInput
+      properties:
+        size: medium
+        label: false
+    - id: no_label_large
+      type: SkeletonInput
+      properties:
+        size: large
+        label: false
+
+- title: Custom Width
+  blocks:
+    - id: width_full
+      type: SkeletonInput
+      properties:
+        size: medium
+        width: '100%'
+    - id: width_half
+      type: SkeletonInput
+      properties:
+        size: medium
+        width: '50%'
+    - id: width_fixed
+      type: SkeletonInput
+      properties:
+        size: medium
+        width: 300
+
+- title: Custom Label Width
+  blocks:
+    - id: label_narrow
+      type: SkeletonInput
+      properties:
+        size: medium
+        labelWidth: '15%'
+    - id: label_wide
+      type: SkeletonInput
+      properties:
+        size: medium
+        labelWidth: '50%'
+    - id: label_fixed
+      type: SkeletonInput
+      properties:
+        size: medium
+        labelWidth: 120
+
+- title: Custom Label Height
+  blocks:
+    - id: label_height_small
+      type: SkeletonInput
+      properties:
+        size: medium
+        labelHeight: 12
+    - id: label_height_default
+      type: SkeletonInput
+      properties:
+        size: medium
+        labelHeight: 20
+    - id: label_height_tall
+      type: SkeletonInput
+      properties:
+        size: medium
+        labelHeight: 28
+
+- title: Custom Input Height
+  blocks:
+    - id: input_height_short
+      type: SkeletonInput
+      properties:
+        size: medium
+        inputHeight: 24
+    - id: input_height_default
+      type: SkeletonInput
+      properties:
+        size: medium
+    - id: input_height_tall
+      type: SkeletonInput
+      properties:
+        size: medium
+        inputHeight: 48
+
+- title: Combined Customizations
+  blocks:
+    - id: combined_compact
+      type: SkeletonInput
+      properties:
+        size: small
+        labelWidth: '20%'
+        labelHeight: 12
+        width: '60%'
+    - id: combined_full
+      type: SkeletonInput
+      properties:
+        size: large
+        labelWidth: '40%'
+        labelHeight: 24
+        inputHeight: 44
+        width: '100%'
+    - id: combined_no_label
+      type: SkeletonInput
+      properties:
+        size: medium
+        label: false
+        inputHeight: 40
+        width: '80%'
+
+- title: Form Skeleton Composition
+  blocks:
+    - id: form_skeleton
+      type: Box
+      layout:
+        gap: 16
+      blocks:
+        - id: form_row_1
+          type: Box
+          layout:
+            gap: 16
+            direction: row
+          blocks:
+            - id: form_first_name
+              type: SkeletonInput
+              properties:
+                size: medium
+                labelWidth: '40%'
+            - id: form_last_name
+              type: SkeletonInput
+              properties:
+                size: medium
+                labelWidth: '40%'
+        - id: form_email
+          type: SkeletonInput
+          properties:
+            size: medium
+            labelWidth: '20%'
+        - id: form_notes
+          type: SkeletonInput
+          properties:
+            size: medium
+            labelWidth: '15%'
+            inputHeight: 80
+        - id: form_submit
+          type: SkeletonButton
+          properties:
+            size: medium
+            width: 120
+
+- title: Style Overrides
+  blocks:
+    - id: style_rounded_input
+      type: SkeletonInput
+      properties:
+        size: medium
+      style:
+        .input:
+          borderRadius: 8
+    - id: style_custom_bg
+      type: SkeletonInput
+      properties:
+        size: medium
+        label: false
+      style:
+        .element:
+          maxWidth: 400

package/dist/blocks/SkeletonInput/tests/SkeletonInput.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: skeletoninput
+type: Box
+
+blocks:
+  - id: skeletoninput_basic
+    type: SkeletonInput
+
+  - id: skeletoninput_no_label
+    type: SkeletonInput
+    properties:
+      label: false
+
+  - id: skeletoninput_small
+    type: SkeletonInput
+    properties:
+      size: small

package/dist/blocks/SkeletonInput/tests.yaml

@@ -0,0 +1,59 @@
+# 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: SkeletonInput
+  description: Default
+- id: sizedefault
+  type: SkeletonInput
+  description: |
+    Size: default
+  properties:
+    size: default
+- id: sizesmall
+  type: SkeletonInput
+  description: |
+    Size: small
+  properties:
+    size: small
+- id: sizelarge
+  type: SkeletonInput
+  description: |
+    Size: large
+  properties:
+    size: large
+- id: labelfalse
+  type: SkeletonInput
+  description: |
+    label: false
+  properties:
+    label: false
+- id: labelHeight40
+  type: SkeletonInput
+  description: |
+    labelHeight: 40
+  properties:
+    labelHeight: 40
+- id: inputHeight80
+  type: SkeletonInput
+  description: |
+    inputHeight: 80
+  properties:
+    inputHeight: 80
+- id: labelWidth80
+  type: SkeletonInput
+  description: |
+    labelWidth: 80
+  properties:
+    labelWidth: 80