hyperapp-is 0.1.28 → 0.1.31

package/README.md

@@ -144,6 +144,7 @@ npm で非公開の関数 (実験用)は、解説に記載します
 - [Route](#route)
 - [SelectButton](#selectbutton)
 - [OptionButton](#optionbutton)
+- [HistoryInput](#historyinput)
 
 **core / navigator.ts**
 - [Keys_NavigatorItem](#keys_navigatoritem)
@@ -502,6 +503,32 @@ export const OptionButton = function <S> (
 
 ---
 
+### HistoryInput
+履歴付きインプットボックス
+
+```ts
+export const HistoryInput = function <S> (
+	props: {
+		state        : S
+		id           : string
+		keyNames     : Keys_String
+		historyLimit?: number
+		[key: string]: any
+	}
+): VNode<S>
+```
+
+- props         : props
+- props.state   : ステート
+- props.id      : ユニークID
+- props.keyNames: ステート内の文字までのパス
+- props.historyLimit: 保持する履歴の最大数 (default = 10)
+
+履歴は `[props.id].histories` に保存されます  
+履歴を動的にクリアしたい場合 `setLocalState(state, id, { histories: [] })` などとして下さい
+
+---
+
 ### Keys_NavigatorItem
 ステートの任意の値までのパスを表す、文字配列の型エイリアス
 
@@ -650,6 +677,10 @@ vnode
 <div id={id}>
 	<div class="rapper">
 		<div class="toolBar">
+			<div>
+				<input type="text" id={id}_searchText list={id}_searchText-history/>
+				<datalist id={id}_searchText-history />
+			</div>
 			<input type="text" />
 			<button type="button">FILTER</button>
 		</div>

package/dist/hyperapp-is/core/component.d.ts

@@ -49,3 +49,17 @@ export declare const OptionButton: <S>(props: {
     reverse?: boolean;
     [key: string]: any;
 }, children: any) => VNode<S>;
+/**
+ * 履歴付きインプット
+ *
+ * div
+ *  ├ input
+ *  └ datalist
+ */
+export declare const HistoryInput: <S>(props: {
+    state: S;
+    id: string;
+    keyNames: Keys_String;
+    historyLimit?: number;
+    [key: string]: any;
+}) => VNode<S>;

package/dist/hyperapp-is/core/component.js

@@ -3,7 +3,7 @@
 // import
 // ---------- ---------- ---------- ---------- ----------
 import { h, text } from "hyperapp";
-import { getValue, setValue } from "./state";
+import { getValue, setValue, getLocalState, setLocalState } from "./state";
 // ---------- ---------- ---------- ---------- ----------
 // el
 // ---------- ---------- ---------- ---------- ----------
@@ -13,7 +13,9 @@ import { getValue, setValue } from "./state";
  */
 export const el = (tag) => (props, ...children) => h(tag, props !== null && props !== void 0 ? props : {}, children
     .flat()
-    .map((child) => typeof child === "object" ? child : text(child)));
+    .filter(child => child !== null &&
+    child !== undefined)
+    .map((child) => typeof child === "object" ? child : text(`${child}`)));
 // ---------- ---------- ---------- ---------- ----------
 // concatAction
 // ---------- ---------- ---------- ---------- ----------
@@ -68,6 +70,10 @@ export const Route = function (props, children) {
 // vnodes
 // ---------- ---------- ---------- ---------- ----------
 const button = el("button");
+const div = el("div");
+const input = el("input");
+const datalist = el("datalist");
+const option = el("option");
 // ---------- ---------- ---------- ---------- ----------
 // SelectButton Component
 // ---------- ---------- ---------- ---------- ----------
@@ -151,3 +157,69 @@ export const OptionButton = function (props, children) {
         onclick: action
     }, children);
 };
+// ---------- ---------- ---------- ---------- ----------
+// HistoryInput
+// ---------- ---------- ---------- ---------- ----------
+/**
+ * 履歴付きインプット
+ *
+ * div
+ *  ├ input
+ *  └ datalist
+ */
+export const HistoryInput = function (props) {
+    const { state, id, keyNames, historyLimit = 10 } = props;
+    const value = getValue(state, keyNames, "");
+    const localState = getLocalState(state, id, {
+        histories: []
+    });
+    const histories = localState.histories
+        .filter(item => item.toLowerCase().includes(value.toLowerCase()));
+    // ---------- ---------- ----------
+    // oninput
+    // ---------- ---------- ----------
+    const oninput = (state, e) => {
+        const element = e.target;
+        if (!element)
+            return state;
+        return concatAction(props.oninput, setValue(state, keyNames, element.value), e);
+    };
+    // ---------- ---------- ----------
+    // onkeydown
+    // ---------- ---------- ----------
+    const onkeydown = (state, e) => {
+        if (e.key !== "Enter")
+            return state;
+        const element = e.target;
+        if (!element)
+            return state;
+        const val = element.value.trim();
+        if (!val)
+            return state;
+        const items = getLocalState(state, id, {
+            histories: []
+        }).histories;
+        const newHistories = items
+            .filter(item => item !== val)
+            .concat(val)
+            .slice(-historyLimit);
+        return concatAction(props.onkeydown, setLocalState(state, id, {
+            histories: newHistories
+        }), e);
+    };
+    // ---------- ---------- ----------
+    // VNode
+    // ---------- ---------- ----------
+    return div({}, input({
+        type: "text",
+        ...deleteKeys(props, "state", "keyNames", "historyLimit"),
+        list: `${id}-history`,
+        value,
+        oninput,
+        onkeydown,
+    }), datalist({
+        id: `${id}-history`
+    }, histories.map(item => option({
+        value: item
+    }))));
+};

package/dist/hyperapp-is/index.d.ts

@@ -1,7 +1,7 @@
 export type { Keys, Keys_String, Keys_ArrayString, Keys_Number, Keys_ArrayNumber, Keys_ArrayRAFTask, Keys_NavigatorItem, } from "./core/state";
 export type { NavigatorItem, JsonEntry, NavigatorColumn, SearchResult } from "./core/navigator";
 export { getValue, setValue, getLocalState, setLocalState, createLocalKey } from "./core/state";
-export { el, concatAction, getClassList, deleteKeys, Route, SelectButton, OptionButton } from "./core/component";
+export { el, concatAction, getClassList, deleteKeys, Route, SelectButton, OptionButton, HistoryInput } from "./core/component";
 export { convertJsonToNavigatorItem, getParentItems, NavigatorFinder, NavigatorSearch, icon_depth, icon_name, icon_directory, icon_file, icon_trashBox, icon_filter, icon_copy } from "./core/navigator";
 export type { InternalEffect, RAFEvent } from "./animation/raf";
 export type { CSSProperty } from "./animation/properties";

package/dist/hyperapp-is/index.js

@@ -1,6 +1,6 @@
 // hyperapp-is / index.ts
 export { getValue, setValue, getLocalState, setLocalState, createLocalKey } from "./core/state";
-export { el, concatAction, getClassList, deleteKeys, Route, SelectButton, OptionButton } from "./core/component";
+export { el, concatAction, getClassList, deleteKeys, Route, SelectButton, OptionButton, HistoryInput } from "./core/component";
 export { convertJsonToNavigatorItem, getParentItems, NavigatorFinder, NavigatorSearch, icon_depth, icon_name, icon_directory, icon_file, icon_trashBox, icon_filter, icon_copy } from "./core/navigator";
 export { RAFTask, subscription_RAFManager } from "./animation/raf";
 export { progress_easing } from "./animation/easing";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperapp-is",
-  "version": "0.1.28",
+  "version": "0.1.31",
   "description": "UI foundation library for Hyperapp by is4416",
   "license": "MIT",
   "type": "module",