@axel669/zephyr 0.5.4 → 0.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axel669/zephyr",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "description": "",
   "main": "src/index.js",
   "type": "module",
@@ -13,8 +13,8 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@axel669/windstorm": "0.5.4",
-    "svelte": "^5.9.0"
+    "@axel669/windstorm": "0.5.5",
+    "svelte": "^5.30.1"
   },
   "devDependencies": {
     "@axel669/asuid": "^0.2.1",

package/src/composed/entry-button.svelte

@@ -2,27 +2,28 @@
     import Button from "../control/button.svelte"
     import Modal from "../layout/modal.svelte"
     import { handler$ } from "../handler$.js"
+    import { splitProps } from "../props.js"
 
     const {
-        component,
-        props,
-        this:Wrapper = Modal,
-        "w!props":wrapperProps = {},
         children,
+        modal,
         onentry,
+        onopen,
         ...rest
     } = $props()
 
+    const prop = splitProps(rest, "m!")
+
     let element = null
-    const open = handler$(
-        async (props) => {
-            const elemProps = (typeof props === "function") ? props() : props
-            const result = await element.show(elemProps)
-            onentry?.(result)
-        }
-    )
+    const open = async (props) => {
+        onopen?.()
+        const result = await element.show()
+        onentry?.(result)
+    }
 </script>
 
-<Button {...rest} onclick={open(props)} {children} />
+<Button {...prop.rest} onclick={open} {children} />
 
-<Wrapper bind:this={element} {...rest} {component} />
+<Modal bind:this={element} {...prop["m!"]}>
+    {@render modal()}
+</Modal>

package/src/dialogs/alert.svelte

@@ -4,15 +4,16 @@
     import Icon from "../info/icon.svelte"
     import Text from "../text.svelte"
     import Titlebar from "../info/titlebar.svelte"
+    import { modalContext } from "../layout/modal.svelte"
 
     const {
-        close,
-        color = "@primary",
+        color = "@default",
         icon,
         message,
         okText = "OK",
-        titleText = "Alert",
+        title: titleText = "Alert",
     } = $props()
+    const { close } = modalContext()
 </script>
 
 <Dialog card {color}>
@@ -33,7 +34,7 @@
     </Text>
 
     {#snippet footer()}
-    <Button onclick={close} {color} ground>
+    <Button onclick={() => close(true)} {color} ground>
         {okText}
     </Button>
     {/snippet}

package/src/dialogs/confirm.svelte

@@ -5,19 +5,20 @@
     import Icon from "../info/icon.svelte"
     import Text from "../text.svelte"
     import Titlebar from "../info/titlebar.svelte"
+    import { modalContext } from "../layout/modal.svelte"
 
     import { handler$ } from "../handler$.js"
 
     const {
-        close,
-        titleText = "Confirm",
+        title: titleText = "Confirm",
         icon,
         message,
         okText = "OK",
         cancelText = "Cancel",
-        color = "@primary",
+        color = "@default",
     } = $props()
 
+    const { close } = modalContext()
     const cls = handler$(close)
 </script>
 

package/src/dialogs/prompt.svelte

@@ -0,0 +1,67 @@
+<script>
+    import Button from "../control/button.svelte"
+    import Dialog from "../layout/dialog.svelte"
+    import Grid from "../layout/grid.svelte"
+    import Icon from "../info/icon.svelte"
+    import Input from "../control/input.svelte"
+    import Text from "../text.svelte"
+    import Titlebar from "../info/titlebar.svelte"
+    import { modalContext } from "../layout/modal.svelte"
+
+    import { handler$ } from "../handler$.js"
+    import { frameDelay } from "../internals.js"
+
+    let {
+        title: titleText = "Confirm",
+        icon,
+        message,
+        okText = "OK",
+        cancelText = "Cancel",
+        color = "@default",
+        value = $bindable(""),
+        initial = ""
+    } = $props()
+
+    const { close } = modalContext()
+    const cls = handler$(close)
+    let input = $state(null)
+
+    const done = (evt) => {
+        evt.preventDefault()
+        evt.stopPropagation()
+        close(true)
+    }
+
+    // the first 1-2 frames it's in the DOM it's not visible, focus didn't work
+    frameDelay(3, () => input.focus())
+    value = initial
+</script>
+
+<Dialog card {color}>
+    {#snippet header()}
+    <Titlebar {color}>
+        {#snippet title()}
+        <Text title>
+            <Icon name={icon}>
+                {titleText}
+            </Icon>
+        </Text>
+        {/snippet}
+    </Titlebar>
+    {/snippet}
+
+    <form onsubmit={done} ws-x="[grid]">
+        <Input bind:value {color} bind:this={input} label={message} />
+    </form>
+
+    {#snippet footer()}
+    <Grid cols="1fr 1fr" p="0px">
+        <Button onclick={cls(false)} color="@danger" ground>
+            {cancelText}
+        </Button>
+        <Button onclick={cls(true)} color="@secondary" ground>
+            {okText}
+        </Button>
+    </Grid>
+    {/snippet}
+</Dialog>

package/src/{hash.svelte.js → hash.js}

@@ -1,14 +1,5 @@
 import { readable } from "svelte/store"
 
-// export const hash = $state(location.hash.slice(1))
-// window.addEventListener(
-//     "popstate",
-//     () => hashValue = location.hash.slice(1)
-// )
-// $effect(
-//     () => location.hash = hash
-// )
-
 export const hash = readable(
     location.hash.slice(1),
     (set) => {

package/src/index.js

@@ -27,7 +27,7 @@ export { default as Dialog } from "./layout/dialog.svelte"
 export { default as Drawer } from "./layout/drawer.svelte"
 export { default as Flex } from "./layout/flex.svelte"
 export { default as Grid } from "./layout/grid.svelte"
-export { default as Modal } from "./layout/modal.svelte"
+export { default as Modal, modalAnimTime, modalContext } from "./layout/modal.svelte"
 export { default as Paper } from "./layout/paper.svelte"
 export { default as Screen } from "./layout/screen.svelte"
 
@@ -38,6 +38,7 @@ export { default as HexagonSpinner } from "./spinner/hexagon-spinner.svelte"
 
 export { default as Alert } from "./dialogs/alert.svelte"
 export { default as Confirm } from "./dialogs/confirm.svelte"
+export { default as Prompt } from "./dialogs/prompt.svelte"
 
 export { default as DataTable } from "./composed/data-table.svelte"
 // export { default as TH } from "./composed/data-table/th.svelte"
@@ -52,7 +53,7 @@ export { default as Title } from "./routing/title.svelte"
 
 export { default as wsx } from "./wsx.js"
 
-export { hash } from "./hash.svelte.js"
+export { hash } from "./hash.js"
 
 export {
     route,

package/src/internals.js

@@ -0,0 +1,12 @@
+export const frameDelay = (frames, action) => {
+    let frameCount = 0
+    const process = () => {
+        frameCount += 1
+        if (frameCount >= frames) {
+            action()
+            return
+        }
+        requestAnimationFrame(process)
+    }
+    requestAnimationFrame(process)
+}

package/src/layout/dialog.svelte

@@ -19,6 +19,7 @@
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+ <!-- svelte-ignore a11y_interactive_supports_focus -->
 <wind-wrapper transition:trick ws-x="@@dialog [grid]" {onclick} role="dialog">
     <Paper {...props} />
 </wind-wrapper>

package/src/layout/drawer.svelte

@@ -31,24 +31,18 @@
 </script>
 
 <script>
-    import { getContext } from "svelte"
-
     import wsx from "../wsx.js"
 
     import Paper from "./paper.svelte"
-    import { modalContext } from "./modal.svelte"
+    import { modalAnimTime } from "./modal.svelte"
 
     const {
         height,
         type = "menu",
-        children,
-        header,
-        footer,
-        content,
         ...rest
     } = $props()
 
-    const animTime = getContext(modalContext)
+    const animTime = modalAnimTime()
 
     // When Svelte removes things from the DOM they are removed immediately
     // unless Svelte has a transition running. Adding this prevents the drawer
@@ -72,5 +66,5 @@
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <wind-drawer-container use:wsx={container} {onclick} role="menubar"
 transition:trick>
-    <Paper r="0px" {...rest} {header} {footer} {content} {children} />
+    <Paper r="0px" {...rest} />
 </wind-drawer-container>

package/src/layout/modal.svelte

@@ -1,28 +1,34 @@
 <script module>
+    import { getContext } from "svelte"
+
     let topClose = null
-    export const modalContext = Symbol("modal context")
+    const modalAnimTimeSymbol = Symbol("modal animation time")
+    const modalContextSymbol = Symbol("modal context")
+
+    export const modalAnimTime = () => getContext(modalAnimTimeSymbol)
+    export const modalContext = () => getContext(modalContextSymbol)
 </script>
 
 <script>
-    import { tick, setContext } from "svelte"
+    import { setContext } from "svelte"
     import { writable } from "svelte/store"
 
     import wsx from "../wsx.js"
+    import { frameDelay } from "../internals.js"
 
     const {
-        component,
+        children,
+        cancelable = false,
         animTime = "200ms"
     } = $props()
 
-    let modalProps = $state(null)
     let resolver = $state(null)
-    let displayed = $state(null)
+    let shown = $state(false)
 
     const close = (value) => {
         resolver(value)
         resolver = null
-        modalProps = null
-        Component = null
+        shown = false
         if (topClose !== close) {
             return
         }
@@ -31,38 +37,35 @@
     const closeToTop = (value) => {
         topClose(value)
     }
-    const cancel = () => displayed.cancel?.()
+    const cancel = () => {
+        if (cancelable === false) {
+            return
+        }
+        close(null)
+    }
 
     export const show = (props) => new Promise(
-        async (resolve) => {
-            modalProps = props ?? {}
+        (resolve) => {
             topClose = topClose ?? close
-            Component = component
-            await tick()
-            setTimeout(
-                () => resolver = resolve,
-                0
-            )
+            resolver = resolve
+            frameDelay(1, () => shown = true)
         }
     )
 
     const animationTime = writable(animTime)
     const wind = $derived({
         "@anim-time": $animationTime,
-        $show: resolver !== null,
+        $show: shown === true,
     })
-    let Component = $state(null)
-    setContext(modalContext, animationTime)
+    setContext(modalAnimTimeSymbol, animationTime)
+    setContext(modalContextSymbol, { close, closeToTop })
 </script>
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<!-- svelte-ignore a11y_interactive_supports_focus -->
 <ws-modal onclick={cancel} role="dialog" use:wsx={wind}>
-    <Component
-    bind:this={displayed}
-    this={component}
-    {...modalProps}
-    {close}
-    {closeToTop}
-    />
+    {#if resolver !== null}
+        {@render children()}
+    {/if}
 </ws-modal>

package/src/routing/routing.svelte.js

@@ -1,7 +1,7 @@
 import { onMount, getContext } from "svelte"
 import { writable, derived } from "svelte/store"
 
-import { hash } from "../hash.svelte.js"
+import { hash } from "../hash.js"
 
 export const route = derived(
     hash,
@@ -15,12 +15,6 @@ export const route = derived(
 route.set = (path) => {
     hash.set(path)
 }
-// export const route = $derived(
-//     hash.startsWith("/") === false ? `/${hash}` : hash
-// )
-// $effect(
-//     () => hash = route
-// )
 
 export const ctx = {
     router: Symbol("Router Context"),