stalefish 7.3.0 → 7.4.1

package/components/sideDrawer.mjs

@@ -12,7 +12,7 @@ const styles = css`
         z-index: 20000;
         width: ${width}px;
         height: 100vh;
-        background-color: black;
+        background-color: rgba(0,0,0,0.9);
         color: white;
     }
 
@@ -34,7 +34,7 @@ const styles = css`
 
 export default ({ on, topPadding, closeIcon, closeAction, content }) => html`
     <div class="${styles.sideDrawer}"
-         style="opacity: ${on ? '0.9' : '0'};left: ${on ? '0px' : `calc(-1 * (${width}px + 10px))`};${topPadding ? `padding-top: ${topPadding}` : ''}">
+         style="opacity: ${on ? 1 : 0};left: ${on ? '0px' : `calc(-1 * (${width}px + 10px))`};${topPadding ? `padding-top: ${topPadding}` : ''}">
         <div style="width: 100%; position: relative;">
             <div class="${styles.closeButton}"
                  onclick=${e => closeAction && closeAction(e)}>${closeIcon}

package/components/textarea.mjs

@@ -65,7 +65,7 @@ class Textarea extends Component {
     this.onchange = args.onchange
     this.oninput = args.oninput
 
-    let { holdingPen, label, placeholder, property, required, pattern, onkeyup, autofocus, permanentTopPlaceholder = false, permanentTopLabel = false, disabled } = args
+    let { holdingPen, label, placeholder, property, required, pattern, onkeyup, autofocus, permanentTopPlaceholder = false, permanentTopLabel = false, disabled, darkBackground } = args
 
     let input = html`<textarea data-gramm="false" style="${this.height ? `height: ${this.height}` : ''}" class="${styles.textarea} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''}" onkeyup=${e => onkeyup && onkeyup(e)} ${required ? { required: 'required' } : ''} onchange=${e => { change({ e, holdingPen, property, label: styles.label }); this.onchange && this.onchange(e) }} oninput=${e => { this.height = window.getComputedStyle(this.element.querySelector('textarea')).height; change({ e, holdingPen, property, label: styles.label }); this.oninput && this.oninput(e) }} onblur=${formField(holdingPen, property)} placeholder="${placeholder || ''}${required ? ' *' : ''}" ${pattern ? { pattern } : ''}>${holdingPen[property] || ''}</textarea>`
 
@@ -74,7 +74,7 @@ class Textarea extends Component {
     }
 
     return html`
-       <label ${disabled ? { disabled } : ''} style="${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}width: 100%; text-align: left; display: inline-block;"><span class="${styles.label}" style="opacity: ${holdingPen[property] === 0 || holdingPen[property] || (permanentTopPlaceholder || permanentTopLabel) ? 1 : 0}; font-size: 16px; font-weight: normal; color: #999; margin-left: 5px; padding: 9px; background-color: rgba(255,255,255,0.8); ">${label}${required ? ' *' : ''}</span>${input}</label>
+       <label ${disabled ? { disabled } : ''} style="${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}width: 100%; text-align: left; display: inline-block;"><span class="${styles.label}" style="opacity: ${holdingPen[property] === 0 || holdingPen[property] || (permanentTopPlaceholder || permanentTopLabel) ? 1 : 0}; font-size: 16px; font-weight: normal; color: #999; margin-left: 5px; padding: 9px; background-color: rgba(255,255,255,${darkBackground ? 1 : 0.8}); ">${label}${required ? ' *' : ''}</span>${input}</label>
     `
   }
 

package/components/textfield.mjs

@@ -105,7 +105,7 @@ class Textfield extends Component {
     this.oninput = args.oninput
     this.onchange = args.onchange
 
-    let { highlightBorder = false, wrapperStyle = null, holdingPen, label, placeholder, property, required, pattern, type, autofocus, valueContext, permanentTopPlaceholder = false, permanentTopLabel = false, disabled, maxCharacters, maxNumber, minNumber } = args
+    let { highlightBorder = false, wrapperStyle = null, holdingPen, label, placeholder, property, required, pattern, type, autofocus, valueContext, permanentTopPlaceholder = false, permanentTopLabel = false, disabled, maxCharacters, maxNumber, minNumber, darkBackground } = args
 
     let input = html`<input data-gramm="false" ${disabled ? { disabled } : ''} ${maxNumber ? { max: maxNumber } : ''} ${minNumber ? { min: minNumber } : ''} ${maxCharacters ? { maxlength: maxCharacters } : ''} style="${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}" class="${styles.textfield} ${fieldIsTouched(holdingPen, property) === true ? styles.touched : ''} ${highlightBorder ? styles.highlight : ''}" value="${holdingPen[property] !== undefined && holdingPen[property] !== null ? holdingPen[property] : ''}" onkeyup=${e => this.onkeyup && this.onkeyup(e)} ${required ? { required: 'required' } : ''} onchange=${e => { change({ e, holdingPen, property, label: styles.label }); this.onchange && this.onchange(e) }} oninput=${e => { change({ e, holdingPen, property, label: styles.label }); this.oninput && this.oninput(e) }} onblur=${formField(holdingPen, property)} placeholder="${placeholder || ''}${required ? ' *' : ''}" type="${determineType(type)}" ${pattern ? { pattern } : ''} ${type.toLowerCase() === 'number' ? { step: determineStep(type) } : ''} />`
 
@@ -117,7 +117,7 @@ class Textfield extends Component {
         <div ${wrapperStyle ? { 'class': wrapperStyle } : ''} style="display: inline-block; width: calc(100% - 10px); margin: ${label ? '40' : '5'}px 5px 5px 5px;">
             <label style="width: 100%; text-align: left; position: relative; padding: 0;">
                 ${valueContext ? html`<div class="${styles.valueContext}">${valueContext}</div>` : ''}
-                ${label ? html`<span class="${styles.label}" style="opacity: ${holdingPen[property] === 0 || holdingPen[property] || (permanentTopPlaceholder || permanentTopLabel) ? 1 : 0}; font-size: 16px; font-weight: normal; color: #999; margin-left: 5px; padding: 9px; background-color: rgba(255,255,255,0.8); ">${label}${required ? ' *' : ''}</span>` : ''}
+                ${label ? html`<span class="${styles.label}" style="opacity: ${holdingPen[property] === 0 || holdingPen[property] || (permanentTopPlaceholder || permanentTopLabel) ? 1 : 0}; font-size: 16px; font-weight: normal; color: #999; margin-left: 5px; padding: 9px; background-color: rgba(255,255,255,${darkBackground ? 1 : 0.8}); ">${label}${required ? ' *' : ''}</span>` : ''}
                 ${input}
             </label>
         </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stalefish",
-  "version": "7.3.0",
+  "version": "7.4.1",
   "description": "Simple function based component library for halfcab tagged template literals",
   "main": "index.mjs",
   "module": "index.mjs",