hyperapp-is 0.1.27 → 0.1.30

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
 ステートの任意の値までのパスを表す、文字配列の型エイリアス
 

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/core/navigator.d.ts

@@ -59,6 +59,13 @@ export declare const NavigatorFinder: <S>(props: {
     afterRender?: (state: S, localState: Record<string, any>, vnode: VNode<S>) => VNode<S>;
     [key: string]: any;
 }) => VNode<S>;
+export declare const icon_depth: VNode<any>;
+export declare const icon_name: VNode<any>;
+export declare const icon_directory: VNode<any>;
+export declare const icon_file: VNode<any>;
+export declare const icon_trashBox: VNode<any>;
+export declare const icon_filter: VNode<any>;
+export declare const icon_copy: VNode<any>;
 /**
  * 検索結果
  *

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

@@ -327,7 +327,7 @@ export const NavigatorFinder = function (props) {
 // svg icon
 // ---------- ---------- ---------- ---------- ----------
 // icon_depth
-const icon_depth = svg({
+export const icon_depth = svg({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -360,7 +360,7 @@ const icon_depth = svg({
     d: "M6 15v-4h12v4"
 }));
 // icon_name
-const icon_name = svg({
+export const icon_name = svg({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -371,7 +371,7 @@ const icon_name = svg({
     strokeLinejoin: "round"
 }, path({ d: "M4 18l2-8 2 8M5 14h2" }), path({ d: "M10 10h6l-6 8h6" }), path({ d: "M20 6v12" }), path({ d: "M17 15l3 3 3-3" }));
 // icon_directory
-const icon_directory = svg({
+export const icon_directory = svg({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -382,7 +382,7 @@ const icon_directory = svg({
     strokeLinejoin: "round"
 }, path({ d: "M3 7h6l2 2h10v8a2 2 0 0 1-2 2H3z" }));
 // icon_file
-const icon_file = svg({
+export const icon_file = svg({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -393,7 +393,7 @@ const icon_file = svg({
     strokeLinejoin: "round"
 }, path({ d: "M6 2h9l5 5v15a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z" }), path({ d: "M14 2v6h6" }));
 // icon_trashBox
-const icon_trashBox = svg({
+export const icon_trashBox = svg({
     viewBox: "0 0 24 24",
     width: 24,
     height: 24,
@@ -404,7 +404,7 @@ const icon_trashBox = svg({
     strokeLinejoin: "round"
 }, path({ d: "M3 6h18" }), path({ d: "M8 6V4h8v2" }), path({ d: "M6 6l1 14h10l1-14" }), path({ d: "M10 11v6" }), path({ d: "M14 11v6" }));
 // icon_filter
-const icon_filter = svg({
+export const icon_filter = svg({
     viewBox: "0 0 24 24",
     width: 24,
     height: 24,
@@ -415,7 +415,7 @@ const icon_filter = svg({
     strokeLinejoin: "round"
 }, path({ d: "M3 5h18" }), path({ d: "M6 12h12" }), path({ d: "M10 19h4" }));
 // icon_copy
-const icon_copy = svg({
+export const icon_copy = svg({
     viewBox: "0 0 24 24",
     width: 24,
     height: 24,

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

@@ -1,8 +1,8 @@
 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 { convertJsonToNavigatorItem, getParentItems, NavigatorFinder, NavigatorSearch } from "./core/navigator";
+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";
 export { RAFTask, subscription_RAFManager } from "./animation/raf";

package/dist/hyperapp-is/index.js

@@ -1,7 +1,7 @@
 // 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 { convertJsonToNavigatorItem, getParentItems, NavigatorFinder, NavigatorSearch } from "./core/navigator";
+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";
 export { createUnits, createRAFProperties, effect_RAFProperties } from "./animation/properties";

package/package.json

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