@lowdefy/blocks-basic 0.0.0-experimental-20260928105334 → 0.0.0-experimental-20260929101721

package/dist/blocks/Icon/gallery.yaml

@@ -12,6 +12,65 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
+- title: Semantic icon names
+  blocks:
+    - id: semantic_add
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: add
+        size: 24
+    - id: semantic_edit
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: edit
+        size: 24
+    - id: semantic_delete
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: delete
+        size: 24
+    - id: semantic_search
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: search
+        size: 24
+    - id: semantic_settings
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: settings
+        size: 24
+    - id: semantic_warning
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: warning
+        size: 24
+    - id: semantic_info
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: info
+        size: 24
+    - id: semantic_success
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: success
+        size: 24
+
 - title: Common Icons
   blocks:
     - id: icon_home
@@ -19,84 +78,84 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineHome
+        name: home
         size: 24
     - id: icon_search
       type: Icon
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineSearch
+        name: search
         size: 24
     - id: icon_user
       type: Icon
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineUser
+        name: user
         size: 24
     - id: icon_setting
       type: Icon
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineSetting
+        name: settings
         size: 24
     - id: icon_bell
       type: Icon
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineBell
+        name: bell
         size: 24
     - id: icon_heart
       type: Icon
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineHeart
+        name: heart
         size: 24
     - id: icon_star
       type: Icon
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineStar
+        name: star
         size: 24
     - id: icon_check
       type: Icon
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineCheck
+        name: check
         size: 24
     - id: icon_close
       type: Icon
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineClose
+        name: close
         size: 24
     - id: icon_info
       type: Icon
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineInfoCircle
+        name: info
         size: 24
     - id: icon_warning
       type: Icon
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineWarning
+        name: warning
         size: 24
     - id: icon_mail
       type: Icon
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineMail
+        name: mail
         size: 24
 
 - title: Sizes
@@ -106,35 +165,35 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineRocket
+        name: Rocket
         size: 16
     - id: size_24
       type: Icon
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineRocket
+        name: Rocket
         size: 24
     - id: size_32
       type: Icon
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineRocket
+        name: Rocket
         size: 32
     - id: size_48
       type: Icon
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineRocket
+        name: Rocket
         size: 48
     - id: size_64
       type: Icon
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineRocket
+        name: Rocket
         size: 64
 
 - title: Named Colors
@@ -144,7 +203,7 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineHeart
+        name: heart
         size: 32
         color: red
     - id: color_blue
@@ -152,7 +211,7 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineHeart
+        name: heart
         size: 32
         color: blue
     - id: color_green
@@ -160,7 +219,7 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineHeart
+        name: heart
         size: 32
         color: green
     - id: color_orange
@@ -168,7 +227,7 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineHeart
+        name: heart
         size: 32
         color: orange
     - id: color_purple
@@ -176,7 +235,7 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineHeart
+        name: heart
         size: 32
         color: purple
     - id: color_tomato
@@ -184,7 +243,7 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineHeart
+        name: heart
         size: 32
         color: tomato
     - id: color_teal
@@ -192,7 +251,7 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineHeart
+        name: heart
         size: 32
         color: teal
     - id: color_coral
@@ -200,7 +259,7 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineHeart
+        name: heart
         size: 32
         color: coral
 
@@ -211,7 +270,7 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineThunderbolt
+        name: Zap
         size: 40
         color: '#1677ff'
     - id: hex_green
@@ -219,7 +278,7 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineThunderbolt
+        name: Zap
         size: 40
         color: '#52c41a'
     - id: hex_red
@@ -227,7 +286,7 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineThunderbolt
+        name: Zap
         size: 40
         color: '#f5222d'
     - id: hex_orange
@@ -235,7 +294,7 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineThunderbolt
+        name: Zap
         size: 40
         color: '#fa8c16'
     - id: hex_purple
@@ -243,7 +302,7 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineThunderbolt
+        name: Zap
         size: 40
         color: '#722ed1'
     - id: hex_cyan
@@ -251,7 +310,7 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineThunderbolt
+        name: Zap
         size: 40
         color: '#13c2c2'
     - id: hex_coral
@@ -259,7 +318,7 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineThunderbolt
+        name: Zap
         size: 40
         color: '#ff6b6b'
     - id: hex_indigo
@@ -267,7 +326,7 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineThunderbolt
+        name: Zap
         size: 40
         color: '#4c6ef5'
     - id: hex_pink
@@ -275,7 +334,7 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineThunderbolt
+        name: Zap
         size: 40
         color: '#e64980'
     - id: hex_amber
@@ -283,7 +342,7 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineThunderbolt
+        name: Zap
         size: 40
         color: '#fab005'
 
@@ -294,7 +353,7 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineLoading
+        name: loading
         size: 32
         spin: true
         color: '#1677ff'
@@ -303,7 +362,7 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineLoading3Quarters
+        name: loading
         size: 32
         spin: true
         color: '#52c41a'
@@ -312,7 +371,7 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineSync
+        name: RefreshCw
         size: 32
         spin: true
         color: '#fa8c16'
@@ -321,7 +380,7 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineSetting
+        name: settings
         size: 32
         spin: true
         color: '#722ed1'
@@ -330,7 +389,7 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineReload
+        name: refresh
         size: 32
         spin: true
         color: '#f5222d'
@@ -342,7 +401,7 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineArrowUp
+        name: arrow-up
         size: 32
         rotate: 0
         color: '#1677ff'
@@ -351,7 +410,7 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineArrowUp
+        name: arrow-up
         size: 32
         rotate: 45
         color: '#1677ff'
@@ -360,7 +419,7 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineArrowUp
+        name: arrow-up
         size: 32
         rotate: 90
         color: '#1677ff'
@@ -369,7 +428,7 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineArrowUp
+        name: arrow-up
         size: 32
         rotate: 135
         color: '#1677ff'
@@ -378,7 +437,7 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineArrowUp
+        name: arrow-up
         size: 32
         rotate: 180
         color: '#1677ff'
@@ -387,11 +446,46 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineArrowUp
+        name: arrow-up
         size: 32
         rotate: 270
         color: '#1677ff'
 
+- title: Stroke Width
+  blocks:
+    - id: stroke_width_1
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: heart
+        size: 32
+        strokeWidth: 1
+    - id: stroke_width_2
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: heart
+        size: 32
+        strokeWidth: 2
+    - id: stroke_width_3
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: heart
+        size: 32
+        strokeWidth: 3
+    - id: non_scaling_stroke
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: heart
+        size: 64
+        nonScalingStroke: true
+
 - title: Title (Hover Tooltip)
   blocks:
     - id: title_info
@@ -399,7 +493,7 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineInfoCircle
+        name: info
         size: 32
         color: '#1677ff'
         title: More information
@@ -408,7 +502,7 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineWarning
+        name: warning
         size: 32
         color: '#faad14'
         title: Warning - proceed with caution
@@ -417,7 +511,7 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineQuestionCircle
+        name: help
         size: 32
         color: '#722ed1'
         title: Click for help
@@ -442,7 +536,7 @@
           layout:
             flex: 0 0 auto
           properties:
-            name: AiOutlineCloud
+            name: Cloud
             size: 40
             color: '#69b1ff'
     - id: dark_bg_green
@@ -463,7 +557,7 @@
           layout:
             flex: 0 0 auto
           properties:
-            name: AiOutlineCheckCircle
+            name: check-circle
             size: 40
             color: '#95de64'
     - id: dark_bg_red
@@ -484,7 +578,7 @@
           layout:
             flex: 0 0 auto
           properties:
-            name: AiOutlineCloseCircle
+            name: close-circle
             size: 40
             color: '#ff7875'
     - id: dark_bg_purple
@@ -505,7 +599,7 @@
           layout:
             flex: 0 0 auto
           properties:
-            name: AiOutlineStar
+            name: star
             size: 40
             color: '#b37feb'
 
@@ -530,7 +624,7 @@
           layout:
             flex: 0 0 auto
           properties:
-            name: AiOutlineCheckCircle
+            name: check-circle
             size: 36
             color: '#52c41a'
     - id: colored_bg_warning
@@ -552,7 +646,7 @@
           layout:
             flex: 0 0 auto
           properties:
-            name: AiOutlineExclamationCircle
+            name: CircleAlert
             size: 36
             color: '#faad14'
     - id: colored_bg_error
@@ -574,7 +668,7 @@
           layout:
             flex: 0 0 auto
           properties:
-            name: AiOutlineCloseCircle
+            name: close-circle
             size: 36
             color: '#ff4d4f'
     - id: colored_bg_info
@@ -596,7 +690,7 @@
           layout:
             flex: 0 0 auto
           properties:
-            name: AiOutlineInfoCircle
+            name: info
             size: 36
             color: '#1677ff'
 
@@ -612,7 +706,7 @@
           padding: 12
           borderRadius: 50%
       properties:
-        name: AiOutlineUser
+        name: user
         size: 32
         color: '#1677ff'
     - id: style_bordered
@@ -625,7 +719,7 @@
           padding: 10
           borderRadius: 8
       properties:
-        name: AiOutlineSetting
+        name: settings
         size: 28
         color: '#595959'
     - id: style_shadow
@@ -639,7 +733,7 @@
           borderRadius: 12
           boxShadow: 0 2px 8px rgba(0, 0, 0, 0.15)
       properties:
-        name: AiOutlineBell
+        name: bell
         size: 30
         color: '#fa8c16'
     - id: style_gradient_bg
@@ -652,7 +746,7 @@
           padding: 14
           borderRadius: 12
       properties:
-        name: AiOutlineThunderbolt
+        name: Zap
         size: 30
         color: '#ffffff'
     - id: style_circle_bg
@@ -668,7 +762,7 @@
           alignItems: center
           justifyContent: center
       properties:
-        name: AiOutlineHeart
+        name: heart
         size: 24
         color: '#ffffff'
 
@@ -683,7 +777,7 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineEdit
+        name: edit
         size: 32
         color: '#1677ff'
         disableLoadingIcon: false
@@ -696,7 +790,7 @@
       layout:
         flex: 0 0 auto
       properties:
-        name: AiOutlineEdit
+        name: edit
         size: 32
         color: '#1677ff'
         disableLoadingIcon: true

package/dist/blocks/Icon/meta.js

@@ -15,14 +15,14 @@
 */ export default {
     category: 'display',
     icons: [
-        'AiOutlineCloseCircle'
+        'loading'
     ],
     valueType: null,
     cssKeys: {
         element: 'The Icon element.'
     },
     events: {
-        onClick: 'Trigger actions when icon is clicked.'
+        onClick: 'Trigger actions when icon is clicked. The icon then takes keyboard focus, and Enter or Space trigger it too.'
     },
     properties: {
         type: 'object',
@@ -37,8 +37,11 @@
             },
             name: {
                 type: 'string',
-                default: 'AiOutlineCloseCircle',
-                description: 'Name of icon to be displayed.'
+                description: 'Icon name: a semantic name like `edit`, a Lucide icon name like `Pencil`, or a set-qualified name like `tabler:Pencil`. Add your own semantic names with `theme.icons.aliases`.'
+            },
+            nonScalingStroke: {
+                type: 'boolean',
+                description: 'Keep the stroke width constant at any icon size. Defaults to `theme.icons.nonScalingStroke`.'
             },
             rotate: {
                 type: 'number',
@@ -54,6 +57,10 @@
                     displayType: 'number'
                 }
             },
+            strokeWidth: {
+                type: 'number',
+                description: 'Stroke width of the icon lines, in pixels of the 24px icon grid. Defaults to `theme.icons.strokeWidth` (2).'
+            },
             spin: {
                 type: 'boolean',
                 default: false,

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

@@ -22,7 +22,7 @@ blocks:
   - id: icon_custom
     type: Icon
     properties:
-      name: AiOutlineHome
+      name: home
 
   - id: icon_clickable
     type: Icon
@@ -33,8 +33,8 @@ blocks:
             _eq:
               - _state: icon_clicked
               - true
-          then: AiOutlineCheck
-          else: AiOutlineClose
+          then: check
+          else: close
     events:
       onClick:
         - id: set_clicked