chore: setup default values

Author: sheepbox8646

packages/layout/src/align.ts

@@ -5,17 +5,20 @@ import { defineComponent } from 'sciux-laplace'
 export const AlignType = type(`'left' | 'center' | 'right' | 'top' | 'bottom' | 'horizontal' | 'start' | 'end'`)
 const T = type({
   type: AlignType,
-}).partial()
+})
 
 export default defineComponent<'align', typeof T.infer>(
   (attrs, _context) => {
     return {
       name: 'align',
       attrs: T,
+      defaults: {
+        type: 'start',
+      },
       setup: (children) => {
         const element = document.createElement('div')
         element.style.display = 'flex'
-        element.style.alignItems = toValue(attrs.type ?? 'start') as string
+        element.style.alignItems = toValue(attrs.type)
         element.append(...children())
         return element
       },

packages/layout/src/block.ts

@@ -16,24 +16,38 @@ export const BlockType = type({
   'padding-bottom': 'string | number',
   'padding-left': 'string | number',
   'align': AlignType,
-}).partial()
+})
 
 export default defineComponent<'block', typeof BlockType.infer>((attrs, _context) => {
   return {
     name: 'block',
     attrs: BlockType,
+    defaults: {
+      margin: '0',
+      marginTop: '0',
+      marginRight: '0',
+      marginBottom: '0',
+      marginLeft: '0',
+      padding: '0',
+      paddingTop: '0',
+      paddingRight: '0',
+      paddingBottom: '0',
+      paddingLeft: '0',
+      align: 'start',
+    },
     setup: (children) => {
       const element = document.createElement('div')
-      element.style.margin = size(toValue(attrs.margin ?? '0') as string)
-      element.style.marginTop = size(toValue(attrs.margin ?? '0') as string)
-      element.style.marginRight = size(toValue(attrs.margin ?? '0') as string)
-      element.style.marginBottom = size(toValue(attrs.margin ?? '0') as string)
-      element.style.marginLeft = size(toValue(attrs.margin ?? '0') as string)
-      element.style.padding = size(toValue(attrs.padding ?? '0') as string)
-      element.style.paddingTop = size(toValue(attrs.padding ?? '0') as string)
-      element.style.paddingRight = size(toValue(attrs.padding ?? '0') as string)
-      element.style.paddingBottom = size(toValue(attrs.padding ?? '0') as string)
-      element.style.paddingLeft = size(toValue(attrs.padding ?? '0') as string)
+      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.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.alignItems = toValue(attrs.align)
       element.append(...children())
       return element
     },

packages/layout/src/flexbox.ts

@@ -8,14 +8,14 @@ import { size } from './utils/size'
 const Position = type(`'start' | 'end' | 'center'`)
 export const FlexboxType = type({
   direction: `'row' | 'column'`,
-  justify: Position,
-  align: Position,
-  gap: `string | number`,
+  justify: Position.optional(),
+  align: Position.optional(),
+  gap: type(`string | number`).optional(),
   wrap: `'nowrap' | 'wrap' | 'wrap-reverse'`,
   grow: `number`,
   shrink: `number`,
-  basis: `string | number`,
-}).partial().and(BlockType)
+  basis: type(`string | number`).optional(),
+}).and(BlockType)
 
 export default defineComponent<'flexbox', typeof FlexboxType.infer, { direction: Ref<'row' | 'column'> }>((attrs, context) => {
   const extend = block(attrs, context)
@@ -25,6 +25,12 @@ export default defineComponent<'flexbox', typeof FlexboxType.infer, { direction:
   return {
     name: 'flexbox',
     attrs: FlexboxType,
+    defaults: {
+      direction: 'row',
+      wrap: 'nowrap',
+      grow: 1,
+      shrink: 0,
+    },
     setup: (children) => {
       const element = extend.setup!(children) as HTMLDivElement
 
@@ -34,15 +40,15 @@ export default defineComponent<'flexbox', typeof FlexboxType.infer, { direction:
         element.style.width = '100%'
       if (selfDirection === 'column')
         element.style.height = '100%'
-      element.style.flexDirection = toValue(attrs.direction ?? 'row') as string
-      direction.value = toValue(attrs.direction ?? 'row') as string
-      element.style.justifyContent = toValue(attrs.justify ?? 'auto') as string
-      element.style.alignItems = toValue(attrs.align ?? 'auto') as string
-      element.style.gap = size(toValue(attrs.gap ?? 'auto') as string)
-      element.style.flexWrap = toValue(attrs.wrap ?? 'nowrap') as string
+      element.style.flexDirection = toValue(attrs.direction)
+      direction.value = toValue(attrs.direction)
+      element.style.justifyContent = toValue(attrs.justify ?? 'auto')!
+      element.style.alignItems = toValue(attrs.align ?? 'auto')!
+      element.style.gap = size(toValue(attrs.gap) ?? 'auto')
+      element.style.flexWrap = toValue(attrs.wrap)
       element.style.flexGrow = (toValue(attrs.grow) ?? 1).toString()
       element.style.flexShrink = (toValue(attrs.shrink) ?? 0).toString()
-      element.style.flexBasis = size(toValue(attrs.basis ?? 'auto') as string)
+      element.style.flexBasis = size(toValue(attrs.basis) ?? 'auto')
       return element
     },
     provides: {

packages/layout/src/grid.ts

@@ -12,22 +12,31 @@ const T = type({
   'row-gutter': `string | number`,
   'align': AlignType,
   'inset': `string | number`,
-}).partial()
+})
 
 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',
+    },
     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 ?? '0') as string)
-      element.style.columnGap = size(toValue(attrs['column-gutter'] ?? '0') as string)
-      element.style.rowGap = size(toValue(attrs['row-gutter'] ?? '0') as string)
-      element.style.justifyContent = toValue(attrs.align ?? 'start') as string
-      element.style.inset = size(toValue(attrs.inset ?? '0') as string)
+      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.justifyContent = toValue(attrs.align) as string
+      element.style.inset = size(toValue(attrs.inset))
       element.append(...children())
       return element
     },

packages/model/src/button.ts

@@ -5,15 +5,18 @@ import { defineComponent } from 'sciux-laplace'
 
 const T = type({
   disabled: 'boolean',
-}).partial()
+})
 
 export default defineComponent<'button', typeof T.infer, Context>((attrs, _context) => {
   return {
     name: 'button',
     attrs: T,
+    defaults: {
+      disabled: false,
+    },
     setup: (children) => {
       const element = document.createElement('button')
-      element.disabled = toValue(attrs.disabled ?? false) as boolean
+      element.disabled = toValue(attrs.disabled)
       element.append(...children())
       return element
     },

packages/model/src/input.ts

@@ -9,7 +9,7 @@ const T = type({
   model: 'string',
   placeholder: 'string',
   disabled: 'boolean',
-}).partial()
+})
 
 export default defineComponent<'input', typeof T.infer, Context>((attrs, context) => {
   const input = document.createElement('input')
@@ -22,8 +22,8 @@ export default defineComponent<'input', typeof T.infer, Context>((attrs, context
     name: 'input',
     attrs: T,
     setup: () => {
-      input.placeholder = toValue(attrs.placeholder ?? '') as string
-      input.disabled = toValue(attrs.disabled ?? false) as boolean
+      input.placeholder = toValue(attrs.placeholder)
+      input.disabled = toValue(attrs.disabled)
       return input
     },
   }

packages/model/src/select.ts

@@ -1,11 +1,11 @@
-import { type } from "arktype"
+import { type } from 'arktype'
 
-const SelectType = type({
+export const SelectType = type({
   model: 'string',
-}).partial()
+})
 
-const SelectOptionType = type({
+export const SelectOptionType = type({
   value: 'string',
   selected: 'boolean',
   disabled: 'boolean',
-}).partial()
+})

packages/widget/src/link.ts

@@ -3,15 +3,18 @@ import { defineComponent, toValue } from 'sciux-laplace'
 
 const T = type({
   target: 'string',
-}).partial()
+})
 
 export default defineComponent<'link', typeof T.infer>((attrs, _context) => {
   return {
     name: 'link',
     attrs: T,
+    defaults: {
+      target: '_blank',
+    },
     setup(children) {
       const element = document.createElement('a')
-      element.href = toValue(attrs.target) ?? ''
+      element.href = toValue(attrs.target)
       element.append(...children())
       return element
     },