stalefish 8.0.1 → 8.0.3

package/adapters/flatpickr.mjs

@@ -0,0 +1,104 @@
+/**
+ * Flatpickr adapter for Stalefish (halfcab/lit-based)
+ *
+ * Goals:
+ * - Always initialize flatpickr on a real Element (not a DocumentFragment/TemplateResult)
+ * - Defer initialization until the node is connected, to be SSR/DOM-safe
+ * - Store the instance on the wrapper element (`wrapper._flatpickr`) consistently
+ * - Provide simple attach/detach helpers for reuse across components
+ *
+ * Usage:
+ *   import flatpickr from 'flatpickr'
+ *   import { attachFlatpickr, detachFlatpickr } from '../adapters/flatpickr.mjs'
+ *
+ *   const wrapper = el.firstElementChild // your component's outer <div>
+ *   const instance = attachFlatpickr(wrapper, flatpickr, { wrap: true, ...options })
+ *   // later on removal:
+ *   detachFlatpickr(wrapper)
+ */
+
+/**
+ * Resolves the actual wrapper Element to pass to flatpickr.
+ * Accepts either an Element, or a container whose firstElementChild is the wrapper.
+ * Falls back to querySelector for common markers if necessary.
+ * @param {any} node
+ * @returns {Element|null}
+ */
+function resolveWrapperElement (node) {
+  if (!node) return null
+  // If it's already an Element (HTMLElement/SVGElement), use it directly
+  if (typeof Element !== 'undefined' && node instanceof Element) return node
+  // If it's a container/fragment with a firstElementChild, use that
+  if (node.firstElementChild) return node.firstElementChild
+  // Last resort: try to find a likely wrapper inside
+  if (node.querySelector) {
+    return node.querySelector('[data-flatpickr-wrapper], [data-input]')
+  }
+  return null
+}
+
+/**
+ * Attaches or updates a flatpickr instance on the given wrapper/container.
+ * The instance is stored on `wrapperEl._flatpickr`.
+ *
+ * @param {Element|any} wrapperOrContainer - An Element or a container whose firstElementChild is the wrapper
+ * @param {Function} flatpickrLib - The flatpickr factory function (import flatpickr from 'flatpickr')
+ * @param {Object} config - Flatpickr configuration options
+ * @returns {Object|null} flatpickr instance, or null if deferred/not created
+ */
+export function attachFlatpickr (wrapperOrContainer, flatpickrLib, config = {}) {
+  if (typeof window === 'undefined') return null // SSR guard
+  if (!flatpickrLib) return null
+
+  const wrapperEl = resolveWrapperElement(wrapperOrContainer)
+  if (!wrapperEl) return null
+
+  // If instance already exists, try to update options where supported
+  if (wrapperEl._flatpickr) {
+    try {
+      // Not all options are dynamically settable, but this is a safe best-effort
+      wrapperEl._flatpickr.set(config)
+    } catch (e) {
+      try {
+        wrapperEl._flatpickr.destroy()
+      } catch (_) {}
+      wrapperEl._flatpickr = null
+    }
+  }
+
+  const init = () => {
+    // Ensure wrap:true is preserved if provided; caller decides
+    const instance = flatpickrLib(wrapperEl, config)
+    wrapperEl._flatpickr = instance
+    return instance
+  }
+
+  // If not connected yet, defer until the next frame when likely connected
+  if (!wrapperEl.isConnected) {
+    requestAnimationFrame(() => {
+      if (!wrapperEl._flatpickr && wrapperEl.isConnected) {
+        try { init() } catch (e) { /* swallow init errors in deferred path */ }
+      }
+    })
+    return null
+  }
+
+  return init()
+}
+
+/**
+ * Destroys and detaches a flatpickr instance from the wrapper element, if present.
+ * @param {Element|any} wrapperOrContainer
+ */
+export function detachFlatpickr (wrapperOrContainer) {
+  const wrapperEl = resolveWrapperElement(wrapperOrContainer)
+  if (wrapperEl && wrapperEl._flatpickr) {
+    try { wrapperEl._flatpickr.destroy() } catch (e) {}
+    try { delete wrapperEl._flatpickr } catch (e) { wrapperEl._flatpickr = null }
+  }
+}
+
+export default {
+  attachFlatpickr,
+  detachFlatpickr
+}

package/components/button.mjs

@@ -1,5 +1,5 @@
 import { html } from 'halfcab'
 
 export default ({ width, minWidth, height, text, colour, disabled }) => html`
-      <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> 
+      <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> 
   `

package/components/checkbox.mjs

@@ -30,15 +30,19 @@ let styles = css`
 `
 
 export default ({ wrapperStyle, holdingPen, label, property, required, indeterminate, disabled, darkBackground, onchange }) => {
-  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}" ${holdingPen[property] === true ? { checked: 'checked' } : ''} onchange=${e => {
+  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 => {
     formField(holdingPen, property)(e)
-    this.onchange && this.onchange(e)
+    onchange && onchange(e)
   }} type="checkbox" ${required ? { required: 'required' } : ''} />`
 
   checkboxEl.indeterminate = indeterminate || false
 
+  const wrapperClassName = wrapperStyle
+    ? (typeof wrapperStyle === 'string' ? wrapperStyle : (wrapperStyle.toString ? wrapperStyle.toString() : ''))
+    : ''
+
   return html`
-      <label style="${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}text-align: left; width: 100%; display: inline-block; vertical-align: bottom;" ${wrapperStyle ? { 'class': wrapperStyle } : ''}>
+      <label style="${disabled ? 'cursor: not-allowed; opacity: 0.3;' : ''}text-align: left; width: 100%; display: inline-block; vertical-align: bottom;" class="${wrapperClassName}">
           <span class="${styles.label}" style="background-color: rgba(255,255,255,${darkBackground ? 1 : 0.8});">${label}${required ? ' *' : ''}${checkboxEl}</span>
       </label>
   `

package/components/dateTimePicker.mjs

@@ -1,5 +1,6 @@
 import { html, css, formField, fieldIsTouched } from 'halfcab'
 import flatpickr from 'flatpickr'
+import { attachFlatpickr } from '../adapters/flatpickr.mjs'
 import calendarIcon from './icons/calendarIcon.mjs'
 import timeIcon from './icons/timeIcon.mjs'
 
@@ -117,7 +118,7 @@ export default ({ wrapperStyle = null, holdingPen, label, placeholder, property,
     e.target.parentNode.parentNode._flatpickr.close()
     return false
   }}>clear</div>` : ''}
-       <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 => {
+       <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 => {
   e.target.parentNode.parentNode._flatpickr && e.target.parentNode.parentNode._flatpickr.set('onValueUpdate', (fpDate, dateString) => {
     let fauxE = {
       currentTarget: {
@@ -135,7 +136,11 @@ export default ({ wrapperStyle = null, holdingPen, label, placeholder, property,
     </div>
     `
 
-  this.flatpickr = flatpickr(el, Object.assign(flatpickrConfig, {
+  // Attach flatpickr instance to the OUTER WRAPPER element (not the fragment) so
+  // internal clear/close handlers can access it consistently via parent wrappers.
+  // Using `this` or the fragment caused errors after migrating to halfcab/lit.
+  const wrapper = el.firstElementChild || el
+  attachFlatpickr(wrapper, flatpickr, Object.assign({}, flatpickrConfig, {
     wrap: true,
     onValueUpdate: (fpDate, dateString) => {
       let fauxE = {

package/components/selectbox.mjs

@@ -76,7 +76,7 @@ export default ({ wrapperStyle = null, holdingPen, label, property, options, req
       <div class="${styles.down}">${solidDown({ colour: '#ccc' })}</div>
       <span class="${styles.label}">${label}${required ? ' *' : ''}</span>
       <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)}>
-        <option value="${required ? 'Select an option' : ''}" ${!holdingPen[property] ? { selected: 'true' } : ''} ${required ? { disabled: 'disabled' } : ''}>${required ? 'Select an option' : ''}</option>
+        <option value="${required ? 'Select an option' : ''}" ?selected=${!holdingPen[property]} ?disabled=${required} : ''}>${required ? 'Select an option' : ''}</option>
         ${options.map(option => {
     let optionValue
     let optionName
@@ -86,7 +86,7 @@ export default ({ wrapperStyle = null, holdingPen, label, property, options, req
     } else {
       optionValue = option
     }
-    return html`<option value="${optionValue}" ${holdingPen[property] == optionValue ? { selected: 'true' } : ''}>${optionName || optionValue}</option>` // eslint-disable-line
+    return html`<option value="${optionValue}" ?selected=${holdingPen[property] == optionValue}>${optionName || optionValue}</option>` // eslint-disable-line
   })}
       </select>
     </label>

package/package.json

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