stalefish 8.0.1 → 8.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/components/button.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { html } from 'halfcab'
|
|
2
2
|
|
|
3
3
|
export default ({ width, minWidth, height, text, colour, disabled }) => html`
|
|
4
|
-
<button style="${disabled ? 'opacity: 0.3;' : ''}font-family: inherit; line-height: inherit; cursor: ${disabled ? 'not-allowed' : 'pointer'}; background-color: ${colour}; ${minWidth ? `min-width: ${minWidth};` : ''} border-radius: 3px; margin: 30px 10px; width: ${width}; height: ${height}; border: none; box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); font-size: 17px; color: white;"
|
|
4
|
+
<button style="${disabled ? 'opacity: 0.3;' : ''}font-family: inherit; line-height: inherit; cursor: ${disabled ? 'not-allowed' : 'pointer'}; background-color: ${colour}; ${minWidth ? `min-width: ${minWidth};` : ''} border-radius: 3px; margin: 30px 10px; width: ${width}; height: ${height}; border: none; box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); font-size: 17px; color: white;" ?disabled=${disabled} onclick=${e => this.action(e)}>${text}</button>
|
|
5
5
|
`
|
package/components/checkbox.mjs
CHANGED
|
@@ -30,15 +30,19 @@ let styles = css`
|
|
|
30
30
|
`
|
|
31
31
|
|
|
32
32
|
export default ({ wrapperStyle, holdingPen, label, property, required, indeterminate, disabled, darkBackground, onchange }) => {
|
|
33
|
-
let checkboxEl = html`<input data-gramm="false" ${disabled ? { disabled } : ''} style="${disabled ? 'cursor: not-allowed;' : ''}" class="${styles.checkbox} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''}" value="${holdingPen[property] === true ? 'true' : null}"
|
|
33
|
+
let checkboxEl = html`<input data-gramm="false" ${disabled ? { disabled } : ''} style="${disabled ? 'cursor: not-allowed;' : ''}" class="${styles.checkbox} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''}" value="${holdingPen[property] === true ? 'true' : null}" ?checked=${holdingPen[property] === true} onchange=${e => {
|
|
34
34
|
formField(holdingPen, property)(e)
|
|
35
|
-
|
|
35
|
+
onchange && onchange(e)
|
|
36
36
|
}} type="checkbox" ${required ? { required: 'required' } : ''} />`
|
|
37
37
|
|
|
38
38
|
checkboxEl.indeterminate = indeterminate || false
|
|
39
39
|
|
|
40
|
+
const wrapperClassName = wrapperStyle
|
|
41
|
+
? (typeof wrapperStyle === 'string' ? wrapperStyle : (wrapperStyle.toString ? wrapperStyle.toString() : ''))
|
|
42
|
+
: ''
|
|
43
|
+
|
|
40
44
|
return html`
|
|
41
|
-
<label style="${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}text-align: left; width: 100%; display: inline-block; vertical-align: bottom;" ${
|
|
45
|
+
<label style="${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}text-align: left; width: 100%; display: inline-block; vertical-align: bottom;" class="${wrapperClassName}">
|
|
42
46
|
<span class="${styles.label}" style="background-color: rgba(255,255,255,${darkBackground ? 1 : 0.8});">${label}${required ? ' *' : ''}${checkboxEl}</span>
|
|
43
47
|
</label>
|
|
44
48
|
`
|
|
@@ -117,7 +117,7 @@ export default ({ wrapperStyle = null, holdingPen, label, placeholder, property,
|
|
|
117
117
|
e.target.parentNode.parentNode._flatpickr.close()
|
|
118
118
|
return false
|
|
119
119
|
}}>clear</div>` : ''}
|
|
120
|
-
<input data-gramm="false"
|
|
120
|
+
<input data-gramm="false" ?disabled=${disabled} style="${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}" class="${styles.textfield} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''}" ${required ? { required: 'required' } : ''} onfocus=${e => {
|
|
121
121
|
e.target.parentNode.parentNode._flatpickr && e.target.parentNode.parentNode._flatpickr.set('onValueUpdate', (fpDate, dateString) => {
|
|
122
122
|
let fauxE = {
|
|
123
123
|
currentTarget: {
|
package/components/selectbox.mjs
CHANGED
|
@@ -76,7 +76,7 @@ export default ({ wrapperStyle = null, holdingPen, label, property, options, req
|
|
|
76
76
|
<div class="${styles.down}">${solidDown({ colour: '#ccc' })}</div>
|
|
77
77
|
<span class="${styles.label}">${label}${required ? ' *' : ''}</span>
|
|
78
78
|
<select ${disabled ? { disabled } : ''} style="${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}background-color: ${typeof currentOption === 'object' && currentOption.colour ? `#${currentOption.colour}` : 'white'}" class="${styles.selectBox} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''}" oninput=${e => { formField(holdingPen, property)(e); oninput && oninput(e) }} onchange=${e => { formField(holdingPen, property)(e); onchange && onchange(e) }} onblur=${formField(holdingPen, property)}>
|
|
79
|
-
<option value="${required ? 'Select an option' : ''}"
|
|
79
|
+
<option value="${required ? 'Select an option' : ''}" ?selected=${!holdingPen[property]} ?disabled=${required} : ''}>${required ? 'Select an option' : ''}</option>
|
|
80
80
|
${options.map(option => {
|
|
81
81
|
let optionValue
|
|
82
82
|
let optionName
|
|
@@ -86,7 +86,7 @@ export default ({ wrapperStyle = null, holdingPen, label, property, options, req
|
|
|
86
86
|
} else {
|
|
87
87
|
optionValue = option
|
|
88
88
|
}
|
|
89
|
-
return html`<option value="${optionValue}"
|
|
89
|
+
return html`<option value="${optionValue}" ?selected=${holdingPen[property] == optionValue}>${optionName || optionValue}</option>` // eslint-disable-line
|
|
90
90
|
})}
|
|
91
91
|
</select>
|
|
92
92
|
</label>
|