hyperapp-is 0.1.45 → 0.1.47

package/README.md

@@ -516,18 +516,20 @@ export const OptionButton = function <S> (
 ---
 
 ### HistoryInput
-履歴付きインプットボックス
+履歴付きインプットボックス  
+localState: { histories: string[] }
 
 ```ts
 export const HistoryInput = function <S> (
 	props: {
-		state        : S
-		id           : string
-		keyNames     : Keys_String
-		historyLimit?: number
-		[key: string]: any
+		state         : S
+		id            : string
+		keyNames      : Keys_String
+		historyLimit ?: number
+		afterRender  ?: (state: S, localState: Record<string, any>, vnode: VNode<S>[]) => VNode<S>[]
+		[key: string] : any
 	}
-): VNode<S>
+): VNode<S>[]
 ```
 
 - props         : props
@@ -535,6 +537,8 @@ export const HistoryInput = function <S> (
 - props.id      : ユニークID
 - props.keyNames: ステート内の文字までのパス
 - props.historyLimit: 保持する履歴の最大数 (default = 10)
+- props.afterRender : 全体のレンダーフック
+- returns           : [HTMLInputElement, HTMLDataListElement]
 
 履歴は `[props.id].histories` に保存されます  
 履歴を動的にクリアしたい場合 `setLocalState(state, id, { histories: [] })` などとして下さい

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

@@ -51,15 +51,15 @@ export declare const OptionButton: <S>(props: {
 }, children: any) => VNode<S>;
 /**
  * 履歴付きインプット
+ * localState: { histories: string[] }
  *
- * div
- *  ├ input
- *  └ datalist
+ * @returns {VNode<S>[]} - [HTMLInputElement, HTMLDataListElement]
  */
 export declare const HistoryInput: <S>(props: {
     state: S;
     id: string;
     keyNames: Keys_String;
     historyLimit?: number;
+    afterRender?: (state: S, localState: Record<string, any>, vnode: VNode<S>[]) => VNode<S>[];
     [key: string]: any;
-}) => VNode<S>;
+}) => VNode<S>[];

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

@@ -162,13 +162,12 @@ export const OptionButton = function (props, children) {
 // ---------- ---------- ---------- ---------- ----------
 /**
  * 履歴付きインプット
+ * localState: { histories: string[] }
  *
- * div
- *  ├ input
- *  └ datalist
+ * @returns {VNode<S>[]} - [HTMLInputElement, HTMLDataListElement]
  */
 export const HistoryInput = function (props) {
-    const { state, id, keyNames, historyLimit = 10 } = props;
+    const { state, id, keyNames, historyLimit = 10, afterRender } = props;
     const value = getValue(state, keyNames, "");
     const localState = getLocalState(state, id, {
         histories: []
@@ -210,16 +209,22 @@ export const HistoryInput = function (props) {
     // ---------- ---------- ----------
     // 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
-    }))));
+    const vnode = [
+        input({
+            type: "text",
+            ...deleteKeys(props, "state", "keyNames", "historyLimit", "afterRender"),
+            list: `${id}-history`,
+            value,
+            oninput,
+            onkeydown,
+        }),
+        datalist({
+            id: `${id}-history`
+        }, histories.map(item => option({
+            value: item
+        })))
+    ];
+    return afterRender
+        ? afterRender(state, localState, vnode)
+        : vnode;
 };

package/package.json

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