stalefish 8.1.14 → 8.1.16

package/components/panel.mjs

@@ -35,12 +35,12 @@ let styles = css`
 
 export default ({ chevronStyle = null, on = true, content, heading = '', collapsed = false, thinBorder = false, light = false, optionsMenu, tooltipHeading = false, headerAction, dragStartAction, dragOverAction, dragEndAction, dragLeaveAction, draggable, collapseToggleAction, closeAction }) => {
   return on ? html`<div ondragover=${e => {
-      if (dragOverAction) {
-          e.preventDefault()
-          e.dataTransfer.dropEffect = 'move'
-      }
+    if (dragOverAction) {
+      e.preventDefault()
+      e.dataTransfer.dropEffect = 'move'
+    }
   }} class="${styles.panel}" style='box-sizing: border-box; position: relative; top: 0; left: 0; text-align: left; 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); border: solid ${thinBorder ? '3px' : '5px'} ${light ? '#DDD' : '#4371AD'}; background-color: #FBFBFB;'>
-      <div title="${tooltipHeading && collapsed ? heading : ''}" style="position: relative;" ondragleave="${e => dragLeaveAction && dragLeaveAction(e)}" ondragend="${e => dragEndAction && dragEndAction(e)}" ondragover="${e => dragOverAction && dragOverAction(e)}" ondragstart="${e => dragStartAction && dragStartAction(e)}" draggable="${draggable ? 'true' : ''}" >
+      <div title="${tooltipHeading && collapsed ? heading : ''}" style="position: relative;" ondragleave=${e => dragLeaveAction && dragLeaveAction(e)} ondragend=${e => dragEndAction && dragEndAction(e)} ondragover=${e => dragOverAction && dragOverAction(e)} ondragstart=${e => dragStartAction && dragStartAction(e)} draggable="${draggable ? 'true' : ''}" >
           ${heading ? html`<div class="${styles.header}" onclick=${e => headerAction && headerAction(e)}>
               <h3 style="margin: 12px; max-width: calc(100% - ${optionsMenu ? '70' : '50'}px); color: ${light ? '#555;' : '#22487e'} ${collapsed ? 'text-overflow: ellipsis; white-space: nowrap; overflow: hidden;' : ''}">${heading}</h3>
 
@@ -49,13 +49,13 @@ export default ({ chevronStyle = null, on = true, content, heading = '', collaps
                       ${moreVertical({ colour: '#ccc' })}
                   </div>
                   ${dropdown({
-                      side: 'right',
-                      width: '200px',
-                      margin: '5px',
-                      visible: optionsMenu.on,
-                      menuItems: optionsMenu.menuItems,
-                      backgroundColour: 'white'
-                  })}
+    side: 'right',
+    width: '200px',
+    margin: '5px',
+    visible: optionsMenu.on,
+    menuItems: optionsMenu.menuItems,
+    backgroundColour: 'white'
+  })}
               </div>` : ''}
           </div>` : ''}
       </div>

package/components/uploader.mjs

@@ -2,7 +2,7 @@ import { html, css, fieldIsTouched } from 'halfcab'
 import uploadIcon from './icons/upload.mjs'
 
 // Known extension groups used to infer acceptance from MIME major types during dragover
-const IMAGE_EXTS = new Set(['.jpg', '.jpeg', '.gif', '.bmp', '.tif', '.tiff', '.png', '.svg'])
+const IMAGE_EXTS = new Set(['.jpg', '.jpeg', '.gif', '.bmp', '.tif', '.tiff', '.png', '.svg, .webp, .avif'])
 const VIDEO_EXTS = new Set(['.mxf', '.mkv', '.webm', '.mov', '.wmv', '.mp4', '.3gp', '.avi', '.mpg', '.mpeg', '.flv', '.asx', '.asf', '.divx', '.rm', '.m1v', '.m2v', '.m4v'])
 const PDF_EXTS = new Set(['.pdf'])
 

package/example/app.mjs

@@ -214,7 +214,7 @@ const Showcase = () => html`
     property: 'fileImage',
     label: 'Upload image',
     placeholder: 'Choose/drop an image',
-    accept: '.jpg, .jpeg, .gif, .bmp, .tif, .tiff, .png, .svg',
+    accept: '.jpg, .jpeg, .gif, .bmp, .tif, .tiff, .png, .svg, .webp, .avif',
     onchange: (e) => {
       const files = (e && e.files) || (e && e.target && (e.target.files || e.target._droppedFiles))
       const f = files && files[0]

package/example/server.mjs

@@ -22,6 +22,8 @@ const mime = (filePath) => {
     case '.png': return 'image/png'
     case '.jpg':
     case '.jpeg': return 'image/jpeg'
+    case '.webp': return 'image/webp'
+    case '.avif': return 'image/avif'
     case '.gif': return 'image/gif'
     default: return 'application/octet-stream'
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stalefish",
-  "version": "8.1.14",
+  "version": "8.1.16",
   "description": "Simple function based component library for halfcab tagged template literals",
   "main": "index.mjs",
   "module": "index.mjs",
@@ -31,7 +31,7 @@
   },
   "homepage": "https://github.com/lorengreenfield/stalefish#readme",
   "devDependencies": {
-    "halfcab": "^15.0.4",
+    "halfcab": "^15.0.6",
     "standard": "^12.0.1"
   },
   "dependencies": {