From 69d753931c098bc18cd23e96af18f736a772f416 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 22 Jun 2024 23:00:16 +0200 Subject: Update --- tpl/objects/button.pug | 5 ++++- tpl/objects/field-label.pug | 13 ++++++------ tpl/objects/text-field.pug | 6 +++++- tpl/views/badge.pug | 48 ++++++++++++++++++++++----------------------- tpl/views/button.pug | 33 +++++++++++++++++++++++++++++++ tpl/views/field-label.pug | 24 +++++++++++------------ 6 files changed, 85 insertions(+), 44 deletions(-) (limited to 'tpl') diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug index e99e5ab..61ba0b6 100644 --- a/tpl/objects/button.pug +++ b/tpl/objects/button.pug @@ -9,11 +9,14 @@ mixin a-button if (attributes.variant) { classes['o-button--' + attributes.variant] = true } + if (attributes.size) { + classes['o-button--' + attributes.size] = true + } let href = attributes.disabled ? null : '#'; a(class=classes href=href aria-disabled=attributes.disabled && String(attributes.disabled)) if attributes.icon - +icon(attributes.icon)(block=!block) + +icon(attributes.icon) = ' ' block diff --git a/tpl/objects/field-label.pug b/tpl/objects/field-label.pug index 151e084..fb96443 100644 --- a/tpl/objects/field-label.pug +++ b/tpl/objects/field-label.pug @@ -1,17 +1,18 @@ mixin field-label(label, hint=null) - let classes = { - 'o-field-label': true, - 'o-field-label--left': attributes.align === 'left', - 'o-field-label--right': attributes.align === 'right', - 'is-invalid': attributes.invalid, - 'is-disabled': attributes.disabled, + 'o-field-label': true, + 'is-invalid': attributes.invalid, + 'is-disabled': attributes.disabled, + } + if (attributes.align) { + classes['o-field-label--align-' + attributes.align] = true; } if (attributes.class) { classes[attributes.class] = true; } - let needsLabelWidth = attributes.align === 'left' || attributes.align === 'right'; + let needsLabelWidth = !!attributes.align; let labelStyle = needsLabelWidth ? 'width: ' + attributes.labelWidth : ''; diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug index 895770d..f8e5263 100644 --- a/tpl/objects/text-field.pug +++ b/tpl/objects/text-field.pug @@ -24,7 +24,11 @@ mixin text-field const attr = { placeholder: attributes.placeholder, - disabled: attributes.disabled + disabled: attributes.disabled, + readonly: attributes.readonly, + pattern: attributes.pattern, + required: attributes.required, + value: attributes.value, } div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled)) diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug index 1e1b88f..a55baca 100644 --- a/tpl/views/badge.pug +++ b/tpl/views/badge.pug @@ -1,75 +1,75 @@ mixin view-badge +view('badge', 'Badge') .c-box - +badge(size=50 href='#')= '50' + +badge(size='sm' href='#')= '50' = ' ' +badge= '100' = ' ' - +badge(size=200 href='#')= '200' + +badge(size='lg' href='#')= '200' = ' ' - +badge(size=300 href='#')= '300' + +badge(size='xl' href='#')= '300' .c-box - +badge(size=50 href='#' quiet=true)= '50' + +badge(size='sm' href='#' quiet=true)= '50' = ' ' +badge(quiet=true)= '100' = ' ' - +badge(size=200 href='#' quiet=true)= '200' + +badge(size='lg' href='#' quiet=true)= '200' = ' ' - +badge(size=300 href='#' quiet=true)= '300' + +badge(size='xl' href='#' quiet=true)= '300' each theme in ['accent', 'positive', 'negative', 'warning'] .c-box - +badge(theme)(size=50 href='#')= 'new' + +badge(theme)(size='sm' href='#')= 'new' = ' ' +badge(theme)= 'new' = ' ' - +badge(theme)(size=200 href='#')= 'new' + +badge(theme)(size='lg' href='#')= 'new' = ' ' - +badge(theme)(size=300 href='#')= 'new' + +badge(theme)(size='xl' href='#')= 'new' .c-box - +badge(theme)(size=50 href='#' quiet=true)= 'new' + +badge(theme)(size='sm' href='#' quiet=true)= 'new' = ' ' +badge(theme)(quiet=true)= 'new' = ' ' - +badge(theme)(size=200 href='#' quiet=true)= 'new' + +badge(theme)(size='lg' href='#' quiet=true)= 'new' = ' ' - +badge(theme)(size=300 href='#' quiet=true)= 'new' + +badge(theme)(size='xl' href='#' quiet=true)= 'new' .c-box - +badge(size=50, pill=true)= '50' + +badge(size='sm', pill=true)= '50' = ' ' +badge(pill=true)= '100' = ' ' - +badge(size=200 pill=true)= '200' + +badge(size='lg' pill=true)= '200' = ' ' - +badge(size=300 pill=true)= '300' + +badge(size='xl' pill=true)= '300' .c-box - +badge(size=50 pill=true quiet=true)= 'new' + +badge(size='sm' pill=true quiet=true)= 'new' = ' ' +badge(pill=true quiet=true)= 'new' = ' ' - +badge(size=200 pill=true quiet=true)= 'new' + +badge(size='lg' pill=true quiet=true)= 'new' = ' ' - +badge(size=300 pill=true quiet=true)= 'new' + +badge(size='xl' pill=true quiet=true)= 'new' each theme in ['accent', 'positive', 'negative', 'warning'] .c-box - +badge(theme)(size=50 pill=true href='#')= 'new' + +badge(theme)(size='sm' pill=true href='#')= 'new' = ' ' +badge(theme)(pill=true)= 'new' = ' ' - +badge(theme)(size=200 pill=true href='#')= 'new' + +badge(theme)(size='lg' pill=true href='#')= 'new' = ' ' - +badge(theme)(size=300 pill=true href='#')= 'new' + +badge(theme)(size='xl' pill=true href='#')= 'new' .c-box - +badge(theme)(size=50 pill=true href='#' quiet=true)= 'new' + +badge(theme)(size='sm' pill=true href='#' quiet=true)= 'new' = ' ' +badge(theme)(pill=true quiet=true)= 'new' = ' ' - +badge(theme)(size=200 pill=true href='#' quiet=true)= 'new' + +badge(theme)(size='lg' pill=true href='#' quiet=true)= 'new' = ' ' - +badge(theme)(size=300 pill=true href='#' quiet=true)= 'new' + +badge(theme)(size='xl' pill=true href='#' quiet=true)= 'new' diff --git a/tpl/views/button.pug b/tpl/views/button.pug index 7c96419..4b2281e 100644 --- a/tpl/views/button.pug +++ b/tpl/views/button.pug @@ -1,5 +1,38 @@ mixin view-button +view('button', 'Button') + .c-box + +a-button(size='sm')= 'Button' + = ' ' + +a-button= 'Button' + = ' ' + +a-button(size='lg')= 'Button' + = ' ' + +a-button(size='xl')= 'Button' + br + +a-button(size='sm' disabled=true)= 'Button' + = ' ' + +a-button(disabled=true)= 'Button' + = ' ' + +a-button(size='lg' disabled=true)= 'Button' + = ' ' + +a-button(size='xl' disabled=true)= 'Button' + br + +a-button(size='sm' outline=true)= 'Button' + = ' ' + +a-button(outline=true)= 'Button' + = ' ' + +a-button(size='lg' outline=true)= 'Button' + = ' ' + +a-button(size='xl' outline=true)= 'Button' + br + +a-button(size='sm' outline=true disabled=true)= 'Button' + = ' ' + +a-button(outline=true disabled=true)= 'Button' + = ' ' + +a-button(size='lg' outline=true disabled=true)= 'Button' + = ' ' + +a-button(size='xl' outline=true disabled=true)= 'Button' + .c-box .l-button-group +a-button= 'Button' diff --git a/tpl/views/field-label.pug b/tpl/views/field-label.pug index 37ffb1a..448370a 100644 --- a/tpl/views/field-label.pug +++ b/tpl/views/field-label.pug @@ -20,39 +20,39 @@ mixin view-field-label +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true) .c-box - +field-label('First name')(align='left' labelWidth='100px') + +field-label('First name')(align='start' labelWidth='100px') +text-field(placeholder='Placeholder') br - +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px') + +field-label('Password', 'At least 6 characters required')(align='start' labelWidth='100px') +text-field(placeholder='Placeholder' type='password') br - +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true) + +field-label('Password', 'At least 6 characters required')(align='start' labelWidth='100px' invalid=true) +text-field(placeholder='Placeholder' type='password' invalid=true) br - +field-label('First name')(align='left' labelWidth='100px' disabled=true) + +field-label('First name')(align='start' labelWidth='100px' disabled=true) +text-field(placeholder='Placeholder' disabled=true) br - +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' disabled=true) + +field-label('Password', 'At least 6 characters required')(align='start' labelWidth='100px' disabled=true) +text-field(placeholder='Placeholder' type='password' disabled=true) br - +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true disabled=true) + +field-label('Password', 'At least 6 characters required')(align='start' labelWidth='100px' invalid=true disabled=true) +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true) .c-box - +field-label('First name')(align='right' labelWidth='100px') + +field-label('First name')(align='end' labelWidth='100px') +text-field(placeholder='Placeholder') br - +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px') + +field-label('Password', 'At least 6 characters required')(align='end' labelWidth='100px') +text-field(placeholder='Placeholder' type='password') br - +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true) + +field-label('Password', 'At least 6 characters required')(align='end' labelWidth='100px' invalid=true) +text-field(placeholder='Placeholder' type='password' invalid=true) br - +field-label('First name')(align='right' labelWidth='100px' disabled=true) + +field-label('First name')(align='end' labelWidth='100px' disabled=true) +text-field(placeholder='Placeholder' disabled=true) br - +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' disabled=true) + +field-label('Password', 'At least 6 characters required')(align='end' labelWidth='100px' disabled=true) +text-field(placeholder='Placeholder' type='password' disabled=true) br - +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true disabled=true) + +field-label('Password', 'At least 6 characters required')(align='end' labelWidth='100px' invalid=true disabled=true) +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true) -- cgit v1.2.3-70-g09d2