@wrnrlr/prelude 0.2.18 → 0.2.19

package/.github/workflows/ci.yml

@@ -15,7 +15,7 @@ jobs:
           deno-version: v2.x
       - run: deno install
       # - run: deno lint
-      - run: deno task test --no-check
+      - run: deno task test
 
       # Moving artifacts, website and docs into their own project...
       # - name: Setup Pages

package/deno.jsonc

@@ -1,6 +1,6 @@
 {
   "name": "@wrnrlr/prelude",
-  "version": "0.2.18",
+  "version": "0.2.19",
   "exports": {
       ".": "./src/mod.ts",
       "./style.css": "./src/style.css"

package/example/style.css

@@ -1,10 +1,8 @@
-@import('./reset.css')
+@import url("./reset.css");
 
 .select {}
 
 .option {
-  cursor: pointer;
-  background-color: var(--bg, white);
 }
 
 .multiselect {}

package/example/widget.html

@@ -95,12 +95,12 @@ import { h, signal, memo, render, Select } from "../src/mod.ts"
 function SelectCar() {
   const cars = { 'Audi': ['A1','A6'], 'BMW': ['B5', 'BX'] }
   const companies = Object.keys(cars)
-  const company = signal()
+  const company = signal('Audi')
   const model = signal('')
   const models = memo(() => cars[company()] || null)
   return [
-    '', h(Select, {options:companies, value:()=>company}),
-    '', h(Select, {options:models, value:()=>model})
+    h('label', ['Brand', h(Select, {options:companies, value:()=>company})]),
+    h('label', ['Model', h(Select, {options:models, value:()=>model})])
   ]
 }
 
@@ -109,4 +109,25 @@ render(SelectCar, document.getElementById('select_car'))
 
 <style>
 
+label {
+  display: inline flex;
+  flex-direction: row;
+}
+
+.select {
+  display: block;
+  position: relative;
+  & > button {
+    background-color: var(--neutral-200);
+  }
+  & > .options {
+    cursor: pointer;
+    position: absolute;
+    border: 1px solid black;
+    z-index: 10;
+    white-space: nowrap;
+    > * {}
+  }
+}
+
 </style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wrnrlr/prelude",
   "type": "module",
-  "version": "0.2.18",
+  "version": "0.2.19",
   "author": "Werner Laurensse",
   "description": "A signal based frontend library with fine-grained reactivity",
   "main": "./src/mod.ts",

package/src/form.js

@@ -57,7 +57,7 @@ export function Select(props) {
     h('button', {onClick:e=>show(s=>!s)}, h(Show, {when:()=>props.value, fallback}, ()=>props.value() || nbsp)),
     h(Show, {when: show}, h('.options', {style:'position:absolute'}, h(List, {each:()=>selected().options},
       (option) => h('.option', {
-        onClick: (_) => { props.value(option()); show(false) },
+        onClick: (e) => { e.preventDefault(); props.value(option()); show(false) },
         style: 'cursor: pointer'
       }, option)
     )))

package/example/vite.config.js

@@ -1,17 +0,0 @@
-import { defineConfig } from 'vite'
-import path from 'node:path'
-
-export default defineConfig({
-  root: path.resolve(__dirname),
-  plugins: [],
-  resolve: {
-    alias: {
-      '@src': path.resolve(__dirname, '../src')
-    },
-  },
-  server: {
-    fs: {
-      allow: ['..'] // Allow Vite to access parent directories
-    }
-  }
-})