chore: change snake-case to camel-case

Author: sheepbox8646

packages/layout/src/block.ts

@@ -5,17 +5,17 @@ import { AlignType } from './align'
 import { size } from './utils/size'
 
 export const BlockType = type({
-  'margin': 'string | number',
-  'margin-top': 'string | number',
-  'margin-right': 'string | number',
-  'margin-bottom': 'string | number',
-  'margin-left': 'string | number',
-  'padding': 'string | number',
-  'padding-top': 'string | number',
-  'padding-right': 'string | number',
-  'padding-bottom': 'string | number',
-  'padding-left': 'string | number',
-  'align': AlignType,
+  margin: 'string | number',
+  marginTop: 'string | number',
+  marginRight: 'string | number',
+  marginBottom: 'string | number',
+  marginLeft: 'string | number',
+  padding: 'string | number',
+  paddingTop: 'string | number',
+  paddingRight: 'string | number',
+  paddingBottom: 'string | number',
+  paddingLeft: 'string | number',
+  align: AlignType,
 })
 
 export default defineComponent<'block', typeof BlockType.infer>((attrs, _context) => {
@@ -38,15 +38,15 @@ export default defineComponent<'block', typeof BlockType.infer>((attrs, _context
     setup: (children) => {
       const element = document.createElement('div')
       element.style.margin = size(toValue(attrs.margin))
-      element.style.marginTop = size(toValue(attrs['margin-top']))
-      element.style.marginRight = size(toValue(attrs['margin-right']))
-      element.style.marginBottom = size(toValue(attrs['margin-bottom']))
-      element.style.marginLeft = size(toValue(attrs['margin-left']))
+      element.style.marginTop = size(toValue(attrs.marginTop))
+      element.style.marginRight = size(toValue(attrs.marginRight))
+      element.style.marginBottom = size(toValue(attrs.marginBottom))
+      element.style.marginLeft = size(toValue(attrs.marginLeft))
       element.style.padding = size(toValue(attrs.padding))
-      element.style.paddingTop = size(toValue(attrs['padding-top']))
-      element.style.paddingRight = size(toValue(attrs['padding-right']))
-      element.style.paddingBottom = size(toValue(attrs['padding-bottom']))
-      element.style.paddingLeft = size(toValue(attrs['padding-left']))
+      element.style.paddingTop = size(toValue(attrs.paddingTop))
+      element.style.paddingRight = size(toValue(attrs.paddingRight))
+      element.style.paddingBottom = size(toValue(attrs.paddingBottom))
+      element.style.paddingLeft = size(toValue(attrs.paddingLeft))
       element.style.alignItems = toValue(attrs.align)
       element.append(...children())
       return element

packages/layout/src/grid.ts

@@ -5,36 +5,36 @@ import { AlignType } from './align'
 import { size } from './utils/size'
 
 const T = type({
-  'columns': `string | number | Array`,
-  'rows': `string | number | Array`,
-  'gutter': `string | number`,
-  'column-gutter': `string | number`,
-  'row-gutter': `string | number`,
-  'align': AlignType,
-  'inset': `string | number`,
+  columns: `string | number | Array`,
+  rows: `string | number | Array`,
+  gutter: `string | number`,
+  columnGutter: `string | number`,
+  rowGutter: `string | number`,
+  align: AlignType,
+  inset: `string | number`,
 })
 
 export default defineComponent<'grid', typeof T.infer>((attrs, _context) => {
   return {
     name: 'grid',
     attrs: T,
     defaults: {
-      'columns': '1fr',
-      'rows': '1fr',
-      'gutter': '0',
-      'column-gutter': '0',
-      'row-gutter': '0',
-      'align': 'start',
-      'inset': '0',
+      columns: '1fr',
+      rows: '1fr',
+      gutter: '0',
+      columnGutter: '0',
+      rowGutter: '0',
+      align: 'start',
+      inset: '0',
     },
     setup: (children) => {
       const element = document.createElement('div')
       element.style.display = 'grid'
       element.style.gridTemplateColumns = toValue(attrs.columns) as string
       element.style.gridTemplateRows = toValue(attrs.rows) as string
       element.style.gap = size(toValue(attrs.gutter))
-      element.style.columnGap = size(toValue(attrs['column-gutter']))
-      element.style.rowGap = size(toValue(attrs['row-gutter']))
+      element.style.columnGap = size(toValue(attrs.columnGutter))
+      element.style.rowGap = size(toValue(attrs.rowGutter))
       element.style.justifyContent = toValue(attrs.align) as string
       element.style.inset = size(toValue(attrs.inset))
       element.append(...children())

test/src/example.sciux

@@ -1,12 +1,12 @@
-<columns>
+<columns padding-bottom="10px">
   <let :value="2" />
   <let :checked="false" />
   <flexbox>1</flexbox>
   <flexbox>{{ value }}</flexbox>
   <flexbox>{{ checked }}</flexbox>
   <rows>
     <flexbox>
-      <code language="js">
+      <code language="js">xxx</code>
     </flexbox>
     <flexbox>1</flexbox>
     <flexbox>