hyperapp-is 0.1.8 → 0.1.10

package/README.md

@@ -549,13 +549,17 @@ NavigatorFinder に渡すヘッダーと値
 
 ```ts
 export interface NavigatorColumn {
-	name: string
-	val : (item: NavigatorItem) => any
+	name    : string
+	val     : (item: NavigatorItem) => any
+	compare?: (a: NavigatorItem, b: NavigatorItem) => number
 }
 ```
 
 - name: 名前
 - val : 値を返す関数
+- compare: 比較関数
+
+`compare` を設置したカラムだけ、ソート対象となります
 
 ---
 
@@ -606,6 +610,7 @@ export const getParentItems = (
 export const NavigatorFinder = function <S> (
 	props: {
 		state         : S
+		id            : string
 		currentKeys   : Keys_NavigatorItem
 		columns      ?: (directory: NavigatorItem | undefined) => NavigatorColumn[]
 		maxItemsCount?: number
@@ -622,6 +627,7 @@ export const NavigatorFinder = function <S> (
 ```
 
 - state        : ステート
+- id           : ユニークID (DOM ID)
 - currentKeys  : カレント NavigatorItem までのパス
 - columns      : NavigatorColumn の配列を返す関数
 - maxItemsCount: 最大表示するアイテム数
@@ -629,6 +635,8 @@ export const NavigatorFinder = function <S> (
 - afterRender  : レンダーフック
 - extension    : レンダーフックに渡す拡張情報
 
+`maxItemsCount` は、そのうち表示数コントロールを作成するかも
+
 ---
 
 ## hyperapp-is/animation

package/dist/hyperapp-is/animation/properties.d.ts

@@ -2,10 +2,6 @@ import { Dispatch } from "hyperapp";
 import { InternalEffect, RAFTask } from "./raf";
 /**
  * アニメーション進捗 (0〜1) を受け取り CSS 値を返す関数
- *
- * @type {Object.<string, Object.<string, (progress: number) => string>>} CSSProperty
- * @property {Object.<string, (progress: number) => string>} [selector]
- * @param {number} progress
  */
 export interface CSSProperty {
     [selector: string]: {
@@ -14,9 +10,6 @@ export interface CSSProperty {
 }
 /**
  * CSSProperty[] から、doms と styles のセットに変換
- *
- * @param   {CSSProperty[]} properties - プロパティ配列
- * @returns {doms: HTMLElement[], styles:{ [name: string]: (progress: number) => string}}
  */
 export declare const createUnits: (properties: CSSProperty[]) => {
     doms: HTMLElement[];
@@ -27,8 +20,6 @@ export declare const createUnits: (properties: CSSProperty[]) => {
 /**
  * subscription_RAFManager をベースにした CSS アニメーション RAFTask を作成する
  * props は基本的に RAFTask の値
- *
- * @param {CSSProperty[]} props.properties - セレクタとスタイル設定のセット配列
  */
 export declare const createRAFProperties: <S>(props: {
     id: string;
@@ -43,9 +34,6 @@ export declare const createRAFProperties: <S>(props: {
 /**
  * subscription_RAFManager をベースにした CSS アニメーションエフェクト
  * props は基本的に RAFTask の値
- *
- * @param {CSSProperty[]} props.properties - セレクタとスタイル設定のセット配列
- * @param {string[]}      props.keyNames   - RAFTask 配列までのパス
  */
 export declare const effect_RAFProperties: <S>(props: {
     id: string;

package/dist/hyperapp-is/animation/properties.js

@@ -6,9 +6,6 @@ import { RAFTask } from "./raf";
 // ---------- ---------- ---------- ---------- ----------
 /**
  * CSSProperty[] から、doms と styles のセットに変換
- *
- * @param   {CSSProperty[]} properties - プロパティ配列
- * @returns {doms: HTMLElement[], styles:{ [name: string]: (progress: number) => string}}
  */
 export const createUnits = function (properties) {
     return properties.map(p => {
@@ -25,12 +22,12 @@ export const createUnits = function (properties) {
 /**
  * subscription_RAFManager をベースにした CSS アニメーション RAFTask を作成する
  * props は基本的に RAFTask の値
- *
- * @param {CSSProperty[]} props.properties - セレクタとスタイル設定のセット配列
  */
 export const createRAFProperties = function (props) {
     const { id, groupID, duration, delay, priority, extension, properties } = props;
+    // ---------- ---------- ----------
     // action
+    // ---------- ---------- ----------
     const action = (state, rafTask) => {
         var _a;
         const progress = (_a = rafTask.progress) !== null && _a !== void 0 ? _a : 0;
@@ -42,8 +39,10 @@ export const createRAFProperties = function (props) {
             }
         });
         return state;
-    };
+    }; // end action
+    // ---------- ---------- ----------
     // finish
+    // ---------- ---------- ----------
     const finish = (state, rafTask) => {
         const units = createUnits(properties);
         // release gpu layer
@@ -59,7 +58,7 @@ export const createRAFProperties = function (props) {
                 }
             }
         ];
-    };
+    }; // end finish
     return new RAFTask({
         id, groupID, duration, delay,
         action, finish,
@@ -77,9 +76,6 @@ const GPU_LAYER = new Set(["transform", "opacity"]);
 /**
  * subscription_RAFManager をベースにした CSS アニメーションエフェクト
  * props は基本的に RAFTask の値
- *
- * @param {CSSProperty[]} props.properties - セレクタとスタイル設定のセット配列
- * @param {string[]}      props.keyNames   - RAFTask 配列までのパス
  */
 export const effect_RAFProperties = function (props) {
     const { id, groupID, duration, delay, finish, priority, extension, properties, keyNames } = props;

package/dist/hyperapp-is/animation/raf.d.ts

@@ -44,9 +44,6 @@ export declare class RAFTask<S> {
      * アクションを開始して良いか判定する
      * 現在時間等のアップデートも同時に行われる
      * subscription_RAFManager でのみ使用される
-     *
-     * @param   {number} now - requestAnimatinFrame が返す絶対時間
-     * @returns {boolan}     - アクションを実行して良いか判定
      */
     private [_isStart];
     /**
@@ -55,12 +52,7 @@ export declare class RAFTask<S> {
     clone(): RAFTask<S>;
 }
 /**
- * RAFTask 配列をフレームごとに実行するサブスクリプション
- *
- * @template S
- * @param   {S}                 state    - ステート
- * @param   {Keys_ArrayRAFTask} keyNames - RAFTask 配列までのパス
- * @returns {Subscription<S>}
+ * RAFTask 配列の実行を管理するサブスクリプション
  */
 export declare const subscription_RAFManager: <S>(state: S, keyNames: Keys_ArrayRAFTask) => Subscription<S>;
 export {};

package/dist/hyperapp-is/animation/raf.js

@@ -20,10 +20,14 @@ import { getValue, setValue } from "../core/state";
 // Symbol を知らない限り、モジュールの外からは呼べない
 const _isStart = Symbol("RAFTask.isStart");
 export class RAFTask {
+    // ---------- ---------- ----------
     // constructor
+    // ---------- ---------- ----------
     constructor(props) {
         var _a, _b, _c;
+        // ---------- ---------- ----------
         // field
+        // ---------- ---------- ----------
         _RAFTask_id.set(this, void 0);
         _RAFTask_groupID.set(this, void 0);
         _RAFTask_duration.set(this, void 0);
@@ -49,7 +53,9 @@ export class RAFTask {
         __classPrivateFieldSet(this, _RAFTask_isDone, false, "f");
         __classPrivateFieldSet(this, _RAFTask_paused, false, "f");
     }
+    // ---------- ---------- ----------
     // getter
+    // ---------- ---------- ----------
     get id() { return __classPrivateFieldGet(this, _RAFTask_id, "f"); }
     get groupID() { return __classPrivateFieldGet(this, _RAFTask_groupID, "f"); }
     get duration() { return __classPrivateFieldGet(this, _RAFTask_duration, "f"); }
@@ -73,20 +79,21 @@ export class RAFTask {
         return this.progress === 1;
     }
     get paused() { return __classPrivateFieldGet(this, _RAFTask_paused, "f"); }
+    // ---------- ---------- ----------
     // setter
+    // ---------- ---------- ----------
     set groupID(val) { __classPrivateFieldSet(this, _RAFTask_groupID, val, "f"); }
     set priority(val) { __classPrivateFieldSet(this, _RAFTask_priority, val, "f"); }
     set extension(val) { __classPrivateFieldSet(this, _RAFTask_extension, val, "f"); }
     set isDone(val) { __classPrivateFieldSet(this, _RAFTask_isDone, val, "f"); }
     set paused(val) { __classPrivateFieldSet(this, _RAFTask_paused, val, "f"); }
+    // ---------- ---------- ----------
     // private method: _isStart
+    // ---------- ---------- ----------
     /**
      * アクションを開始して良いか判定する
      * 現在時間等のアップデートも同時に行われる
      * subscription_RAFManager でのみ使用される
-     *
-     * @param   {number} now - requestAnimatinFrame が返す絶対時間
-     * @returns {boolan}     - アクションを実行して良いか判定
      */
     [(_RAFTask_id = new WeakMap(), _RAFTask_groupID = new WeakMap(), _RAFTask_duration = new WeakMap(), _RAFTask_delay = new WeakMap(), _RAFTask_action = new WeakMap(), _RAFTask_finish = new WeakMap(), _RAFTask_priority = new WeakMap(), _RAFTask_extension = new WeakMap(), _RAFTask_startTime = new WeakMap(), _RAFTask_currentTime = new WeakMap(), _RAFTask_pausedTime = new WeakMap(), _RAFTask_paused = new WeakMap(), _RAFTask_deltaTime = new WeakMap(), _RAFTask_isDone = new WeakMap(), _isStart)](now) {
         var _a;
@@ -119,7 +126,9 @@ export class RAFTask {
         __classPrivateFieldSet(this, _RAFTask_isDone, this.progress === 1, "f");
         return !__classPrivateFieldGet(this, _RAFTask_isDone, "f");
     }
+    // ---------- ---------- ----------
     // method: clone
+    // ---------- ---------- ----------
     /**
      * 時間を初期化したクローンを作成して返す
      */
@@ -140,12 +149,7 @@ export class RAFTask {
 // subscription_RAFManager
 // ---------- ---------- ---------- ---------- ----------
 /**
- * RAFTask 配列をフレームごとに実行するサブスクリプション
- *
- * @template S
- * @param   {S}                 state    - ステート
- * @param   {Keys_ArrayRAFTask} keyNames - RAFTask 配列までのパス
- * @returns {Subscription<S>}
+ * RAFTask 配列の実行を管理するサブスクリプション
  */
 export const subscription_RAFManager = function (state, keyNames) {
     let rID = 0; // rAF timerID
@@ -157,10 +161,13 @@ export const subscription_RAFManager = function (state, keyNames) {
                     if (rID !== 0)
                         cancelAnimationFrame(rID);
                 };
+            // ---------- ---------- ----------
             // rAF callback
+            // ---------- ---------- ----------
             const loop = (now) => {
                 dispatch((state) => {
                     const tasks = getValue(state, keyNames, []);
+                    // newTasks
                     const newTasks = tasks.map(task => {
                         if (task.isDone)
                             return null;

package/dist/hyperapp-is/animationView/carousel.d.ts

@@ -3,34 +3,11 @@ import { Keys_Number, Keys_ArrayRAFTask } from "../core/state";
 import { RAFEvent, RAFTask } from "../animation/raf";
 /**
  * Carousel コンポーネント情報
- * RAFTask.extension に保存する
+ * RAFTask.extension に格納される
  *
  * 実行後に id を変更しても、反映されません
  * 実行後に step, duration, delay を変更した場合、次のタスクに反映されます
  * groupID, priority は未実装であり、値を設定しても動作に反映されません
- *
- * @template S
- * @typedef {Object} CarouselState
- *
- * @property {string}  id   - ユニークID
- * @property {number}  step - 移動するページ数。負で逆順。0で停止
- *
- * option
- * @property {string} [groupID]  - 任意のグループナンバー (未実装)
- * @property {number} [duration] - 1回あたりの実行時間 (ms)
- * @property {number} [delay]    - 待機時間 (ms)
- * @property {number} [priority] - 処理優先巡視 (未実装)
- * @property {Record<string, any>} [extension] - 拡張用プロパティ
- *
- * event
- * @property {RAFEvent<S>} [action] - 毎フレーム発生するイベント
- * @property {RAFEvent<S>} [finish] - ページ切替後に発生するイベント
- *
- * animation
- * @property {(t: number) => number} easing - easing 関数
- *
- * report
- * @property {Keys_Number} [reportPageIndex] - 現在表示中インデックスの出力パス
  */
 export interface CarouselState<S> {
     id: string;
@@ -47,16 +24,7 @@ export interface CarouselState<S> {
 }
 /**
  * 外部から Carousel コンポーネントを操作するためのクラス
- * RAFTask.extension に保存する
- *
- * @template S
- * @typedef {Object} CarouselController
- *
- * - ページ移動を行う (移動中の場合は割り込む)
- * @property {(rafTask: RAFTask<S>, delta: number, skipSpeedRate?: number) => Promise<RAFTask<S>>} step
- *
- * @property {(rafTask: RAFTask<S>, index: number, skipSpeedRate?: number) => Pronise<RAFTask<S>>} moveTo
- * - 指定インデックス番号に移動する (移動中の場合は割り込む)
+ * RAFTask.extension に格納される
  */
 export interface CarouselController<S> {
     step: (rafTask: RAFTask<S>, delta: number, skipSpeedRate?: number) => Promise<RAFTask<S>>;
@@ -64,16 +32,6 @@ export interface CarouselController<S> {
 }
 /**
  * Carousel Component
- *
- * @template S
- * @param {Object}            props                - props
- * @param {S}                 props.state          - ステート
- * @param {string}            props.id             - ユニークID (DOM id)
- * @param {Keys_ArrayRAFTask} props.keyNames       - RAFTask 配列までのパス
- * @param {boolean}          [props.controlButton] - ページ切り替えボタンを表示する (未実装)
- * @param {boolean}          [props.controlBar]    - 現在位置を示すステータスバーを表示する
- * @param {number}           [skipSpeedRate]       - skip 時に duration に乗じる値
- * @param {any}               children             - 表示するページ (HTMLLIElement の子になる)
  */
 export declare const Carousel: <S>(props: {
     state: S;
@@ -86,9 +44,5 @@ export declare const Carousel: <S>(props: {
 }, children: any) => VNode<S>;
 /**
  * カルーセルを初期化し起動するエフェクト
- *
- * @param {Keys_ArrayRAFTask} keyNames      - RAFTask 配列までのパス
- * @param {CarouselState}     carouselState - カルーセル情報
- * @returns {(dispatch: Dispatch<S>) => void}
  */
 export declare const effect_InitCarousel: <S>(keyNames: Keys_ArrayRAFTask, carouselState: CarouselState<S>) => (dispatch: Dispatch<S>) => void;

package/dist/hyperapp-is/animationView/carousel.js

@@ -3,25 +3,17 @@ import { getValue, setValue, createLocalKey } from "../core/state";
 import { el, deleteKeys } from "../core/component";
 import { RAFTask } from "../animation/raf";
 // ---------- ---------- ---------- ---------- ----------
-// Carousel Component
+// vnodes
 // ---------- ---------- ---------- ---------- ----------
-// element
 const div = el("div");
 const ul = el("ul");
 const li = el("li");
 const button = el("button");
+// ---------- ---------- ---------- ---------- ----------
+// Carousel Component
+// ---------- ---------- ---------- ---------- ----------
 /**
  * Carousel Component
- *
- * @template S
- * @param {Object}            props                - props
- * @param {S}                 props.state          - ステート
- * @param {string}            props.id             - ユニークID (DOM id)
- * @param {Keys_ArrayRAFTask} props.keyNames       - RAFTask 配列までのパス
- * @param {boolean}          [props.controlButton] - ページ切り替えボタンを表示する (未実装)
- * @param {boolean}          [props.controlBar]    - 現在位置を示すステータスバーを表示する
- * @param {number}           [skipSpeedRate]       - skip 時に duration に乗じる値
- * @param {any}               children             - 表示するページ (HTMLLIElement の子になる)
  */
 export const Carousel = function (props, children) {
     var _a;
@@ -124,12 +116,11 @@ export const Carousel = function (props, children) {
         ? button({ onclick: action_nextPage }, ">")
         : null) : null);
 };
+// ---------- ---------- ---------- ---------- ----------
+// effect_InitCarousel
+// ---------- ---------- ---------- ---------- ----------
 /**
  * カルーセルを初期化し起動するエフェクト
- *
- * @param {Keys_ArrayRAFTask} keyNames      - RAFTask 配列までのパス
- * @param {CarouselState}     carouselState - カルーセル情報
- * @returns {(dispatch: Dispatch<S>) => void}
  */
 export const effect_InitCarousel = function (keyNames, carouselState) {
     return (dispatch) => {

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

@@ -2,54 +2,27 @@ import { VNode, Effect } from "hyperapp";
 import { Keys_String, Keys_ArrayString } from "./state";
 /**
  * h 関数のラッパー
- * 他でjsxを使用した場合、hが競合する可能性があるので作成した
- *
- * @template S
- * @param   {string} tag - タグ名
- * @returns {(props:{ [key: string] any }, ...children:any[]) => VNode<S>}
+ * hが競合する可能性があるので作成した
  */
 export declare const el: (tag: string) => <S>(props?: {
     [key: string]: any;
 }, ...children: any[]) => VNode<S>;
 /**
  * アクションを結合して結果を返す
- *
- * @template S
- * @template E
- * @param   {undefined | (state: S, e: E) => S | [S, Effect<S>]} action   - 結合するアクション
- * @param   {S}                                                  newState - 結合するステート
- * @param   {E}                                                  e        - イベント (任意のイベント型)
- * @returns {S | [S, Effect<S>]}
  */
 export declare const concatAction: <S, E>(action: undefined | ((state: S, e: E) => S | [S, Effect<S>]), newState: S, e: E) => S | [S, Effect<S>];
 /**
  * props から classList を取得
- *
- * @param   {Record<string, any>} props - props
- * @returns {string[]}
  */
 export declare const getClassList: (props: {
     [key: string]: any;
 }) => string[];
 /**
  * props から不要なキーを削除する
- *
- * @template T
- * @param   {T}            props - props
- * @param   {(keyof T)[])} keys  - 削除するキー
- * @returns {Omit<T, (typeof keys)[number]>}
  */
 export declare const deleteKeys: <T extends Record<string, any>>(props: T, ...keys: (keyof T)[]) => Omit<T, (typeof keys)[number]>;
 /**
  * ステート内の文字とmatchした時、VNodeを返す
- *
- * @template S
- * @param   {Record<string, any>} props          - props
- * @param   {S}                   props.state    - ステート
- * @param   {Keys_String}         props.keyNames - ステート内の文字までのパス
- * @param   {string}              props.match    - 一致判定する文字
- * @param   {any}                 children       - 出力する内容 (VNode / 配列 / 文字など)
- * @returns {VNode<S> | null}
  */
 export declare const Route: <S>(props: {
     state: S;
@@ -57,16 +30,7 @@ export declare const Route: <S>(props: {
     match: string;
 }, children: any) => VNode<S> | null;
 /**
- * クリックで、クラス名のselectをトグルするボタン
- *
- * @template S
- * @param   {Record<string, any>} props          - props
- * @param   {S}                   props.state    - ステート
- * @param   {Keys_ArrayString}    props.keyNames - ステート内の文字配列までのパス
- * @param   {string}              props.id       - ユニークID
- * @param   {boolean}            [props.reverse] - 反転選択するか
- * @param   {any}                 children       - 子要素 (VNode / string / 配列など)
- * @returns {VNode<S>}
+ * クリックで、クラス名 select をトグルするボタン
  */
 export declare const SelectButton: <S>(props: {
     state: S;
@@ -76,16 +40,7 @@ export declare const SelectButton: <S>(props: {
     [key: string]: any;
 }, children: any) => VNode<S>;
 /**
- * クリックで、クラス名のselectを排他的に選択するボタン
- *
- * @template S
- * @param   {Record<string, any>} props          - props
- * @param   {S}                   props.state    - ステート
- * @param   {Keys_String}         props.keyNames - ステート内の文字までのパス
- * @param   {string}              props.id       - ユニークID
- * @param   {boolean}            [props.reverse] - 反転選択するか
- * @param   {any}                 children       - 子要素 (VNode / string / 配列など)
- * @returns {VNode<S>}
+ * クリックで、クラス名 select を排他的に選択するボタン
  */
 export declare const OptionButton: <S>(props: {
     state: S;

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

@@ -1,44 +1,29 @@
 // hyperapp-is / core / component.ts
+// ---------- ---------- ---------- ---------- ----------
+// import
+// ---------- ---------- ---------- ---------- ----------
 import { h, text } from "hyperapp";
 import { getValue, setValue } from "./state";
-// ========== ========== ========== ========== ==========
-// 補助関数
-// ========== ========== ========== ========== ==========
 // ---------- ---------- ---------- ---------- ----------
 // el
 // ---------- ---------- ---------- ---------- ----------
 /**
  * h 関数のラッパー
- * 他でjsxを使用した場合、hが競合する可能性があるので作成した
- *
- * @template S
- * @param   {string} tag - タグ名
- * @returns {(props:{ [key: string] any }, ...children:any[]) => VNode<S>}
+ * hが競合する可能性があるので作成した
  */
 export const el = (tag) => (props, ...children) => h(tag, props !== null && props !== void 0 ? props : {}, children
     .flat()
     .map((child) => typeof child === "object" ? child : text(child)));
-/* element */
-const button = el("button");
 // ---------- ---------- ---------- ---------- ----------
 // concatAction
 // ---------- ---------- ---------- ---------- ----------
 /**
  * アクションを結合して結果を返す
- *
- * @template S
- * @template E
- * @param   {undefined | (state: S, e: E) => S | [S, Effect<S>]} action   - 結合するアクション
- * @param   {S}                                                  newState - 結合するステート
- * @param   {E}                                                  e        - イベント (任意のイベント型)
- * @returns {S | [S, Effect<S>]}
  */
 export const concatAction = function (action, newState, e) {
     if (!action)
         return newState;
     const effect = (dispatch) => {
-        // 次の描画を待たないと、newStateと同時にdispatchが走ってしまい、DOMが存在しない可能性がある
-        // effect_initializeNodesを機能させるため、dispatch を描画後まで保留する
         requestAnimationFrame(() => {
             dispatch((state) => action(state, e));
         });
@@ -50,9 +35,6 @@ export const concatAction = function (action, newState, e) {
 // ---------- ---------- ---------- ---------- ----------
 /**
  * props から classList を取得
- *
- * @param   {Record<string, any>} props - props
- * @returns {string[]}
  */
 export const getClassList = (props) => {
     return props.class
@@ -64,33 +46,17 @@ export const getClassList = (props) => {
 // ---------- ---------- ---------- ---------- ----------
 /**
  * props から不要なキーを削除する
- *
- * @template T
- * @param   {T}            props - props
- * @param   {(keyof T)[])} keys  - 削除するキー
- * @returns {Omit<T, (typeof keys)[number]>}
  */
 export const deleteKeys = (props, ...keys) => {
     const result = { ...props };
     keys.forEach(key => delete result[key]);
     return result;
 };
-// ========== ========== ========== ========== ==========
-// コンポーネント
-// ========== ========== ========== ========== ==========
 // ---------- ---------- ---------- ---------- ----------
-// Route
+// Route Component
 // ---------- ---------- ---------- ---------- ----------
 /**
  * ステート内の文字とmatchした時、VNodeを返す
- *
- * @template S
- * @param   {Record<string, any>} props          - props
- * @param   {S}                   props.state    - ステート
- * @param   {Keys_String}         props.keyNames - ステート内の文字までのパス
- * @param   {string}              props.match    - 一致判定する文字
- * @param   {any}                 children       - 出力する内容 (VNode / 配列 / 文字など)
- * @returns {VNode<S> | null}
  */
 export const Route = function (props, children) {
     const { state, keyNames, match } = props;
@@ -99,20 +65,15 @@ export const Route = function (props, children) {
     return selectedName === match ? children : null;
 };
 // ---------- ---------- ---------- ---------- ----------
-// SelectButton
+// vnodes
+// ---------- ---------- ---------- ---------- ----------
+const button = el("button");
+// ---------- ---------- ---------- ---------- ----------
+// SelectButton Component
 // ---------- ---------- ---------- ---------- ----------
 const REVERSE_PREFIX = "r_";
 /**
- * クリックで、クラス名のselectをトグルするボタン
- *
- * @template S
- * @param   {Record<string, any>} props          - props
- * @param   {S}                   props.state    - ステート
- * @param   {Keys_ArrayString}    props.keyNames - ステート内の文字配列までのパス
- * @param   {string}              props.id       - ユニークID
- * @param   {boolean}            [props.reverse] - 反転選択するか
- * @param   {any}                 children       - 子要素 (VNode / string / 配列など)
- * @returns {VNode<S>}
+ * クリックで、クラス名 select をトグルするボタン
  */
 export const SelectButton = function (props, children) {
     const { state, keyNames, id, reverse = false } = props;
@@ -126,7 +87,9 @@ export const SelectButton = function (props, children) {
         classList.push("select");
     if (selectedNames.includes(`${REVERSE_PREFIX}${id}`))
         classList.push("reverse");
+    // ---------- ---------- ----------
     // action
+    // ---------- ---------- ----------
     const action = (state, e) => {
         const selectedNames = getValue(state, keyNames, []);
         const newList = selectedNames.includes(id)
@@ -139,7 +102,9 @@ export const SelectButton = function (props, children) {
         const newState = setValue(state, keyNames, newList);
         return concatAction(props.onclick, newState, e);
     };
+    // ---------- ---------- ----------
     // VNode
+    // ---------- ---------- ----------
     return button({
         type: "button",
         ...deleteKeys(props, "state", "keyNames", "reverse"),
@@ -148,19 +113,10 @@ export const SelectButton = function (props, children) {
     }, children);
 };
 // ---------- ---------- ---------- ---------- ----------
-// OptionButton
+// OptionButton Component
 // ---------- ---------- ---------- ---------- ----------
 /**
- * クリックで、クラス名のselectを排他的に選択するボタン
- *
- * @template S
- * @param   {Record<string, any>} props          - props
- * @param   {S}                   props.state    - ステート
- * @param   {Keys_String}         props.keyNames - ステート内の文字までのパス
- * @param   {string}              props.id       - ユニークID
- * @param   {boolean}            [props.reverse] - 反転選択するか
- * @param   {any}                 children       - 子要素 (VNode / string / 配列など)
- * @returns {VNode<S>}
+ * クリックで、クラス名 select を排他的に選択するボタン
  */
 export const OptionButton = function (props, children) {
     const { state, keyNames, id, reverse = false } = props;
@@ -174,7 +130,9 @@ export const OptionButton = function (props, children) {
         classList.push("select");
     if (selectedName === `${REVERSE_PREFIX}${id}`)
         classList.push("reverse");
+    // ---------- ---------- ----------
     // action
+    // ---------- ---------- ----------
     const action = (state, e) => {
         const selectedName = getValue(state, keyNames, "");
         const newValue = selectedName === id && reverse
@@ -183,7 +141,9 @@ export const OptionButton = function (props, children) {
         const newState = setValue(state, keyNames, newValue);
         return concatAction(props.onclick, newState, e);
     };
+    // ---------- ---------- ----------
     // VNode
+    // ---------- ---------- ----------
     return button({
         type: "button",
         ...deleteKeys(props, "state", "keyNames", "reverse"),

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

@@ -1,47 +1,23 @@
 import { VNode, Effect } from "hyperapp";
 import { Keys_NavigatorItem } from "./state";
-/**
- * ツリー構造となるナビゲーションオブジェクト
- *
- * parent     - 親アイテム
- * name       - 名前
- * properties - プロパティオブジェクト
- * children   - 子アイテムリスト (undefinedのときはファイル)
- * path       - パス
- * extension  - 拡張情報
- */
 export interface NavigatorItem {
     parent: NavigatorItem | null;
     name: string;
+    path: string;
     properties?: Record<string, any>;
     children?: NavigatorItem[];
-    path: string;
     extension?: Record<string, any>;
 }
-/**
- * getEntriesで返すオブジェクト
- *
- * name       - 名前
- * data       - データ
- * isNode     - ディレクトリか
- */
 export interface JsonEntry<D> {
     name: string;
     data: D;
     isNode: boolean;
 }
-/**
- * ヘッダー名と値
- */
 export interface NavigatorColumn {
     name: string;
     val: (item: NavigatorItem) => any;
+    compare?: (a: NavigatorItem, b: NavigatorItem) => number;
 }
-/**
- * Json から NavigatorItem に変換
- * getEntries の採用により、JSON の形を問わない
- * extension により、任意情報を保存できる
- */
 export declare const convertJsonToNavigatorItem: <D>(props: {
     parent: NavigatorItem | null;
     name: string;
@@ -51,15 +27,31 @@ export declare const convertJsonToNavigatorItem: <D>(props: {
     depth?: number;
     extension?: (item: NavigatorItem, data: D, depth: number) => Record<string, any> | undefined;
 }) => NavigatorItem;
-/**
- * NavigatorItem の親をリストで取得する
- */
 export declare const getParentItems: (item: NavigatorItem | undefined) => NavigatorItem[];
 /**
- * ナビゲーションファインダーコンポーネント
+ * ファインダー
+ *
+ * - 必須項目
+ * state, id, currentKeys
+ *
+ * - columns
+ * カラムの表示設定
+ *
+ * - maxItemsCount
+ * 最大表示させるアイテム数
+ *
+ * - itemClick
+ * 非ノードをクリックした際のアクション
+ *
+ * - afterRender
+ * レンダーフック
+ *
+ * - extension
+ * レンダーフックで参照できる拡張情報
  */
 export declare const NavigatorFinder: <S>(props: {
     state: S;
+    id: string;
     currentKeys: Keys_NavigatorItem;
     columns?: (directory: NavigatorItem | undefined) => NavigatorColumn[];
     maxItemsCount?: number;

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

@@ -1,28 +1,9 @@
 // hyperapp-is / core / navigator.ts
-import { getValue, setValue } from "./state";
-import { el, deleteKeys } from "./component";
-/* element */
-const div = el("div");
-const table = el("table");
-const thead = el("thead");
-const tbody = el("tbody");
-const tr = el("tr");
-const th = el("th");
-const td = el("td");
-const ul = el("ul");
-const ol = el("ol");
-const li = el("li");
-const button = el("button");
-const input = el("input");
-const span = el("span");
+import { getValue, setValue, getLocalState, setLocalState, createLocalKey } from "./state";
+import { el, deleteKeys, SelectButton } from "./component";
 // ---------- ---------- ---------- ---------- ----------
 // convertJsonToNavigatorItem
 // ---------- ---------- ---------- ---------- ----------
-/**
- * Json から NavigatorItem に変換
- * getEntries の採用により、JSON の形を問わない
- * extension により、任意情報を保存できる
- */
 export const convertJsonToNavigatorItem = function (props) {
     const { parent, name, data, getEntries, isNode, depth = 0, extension } = props;
     const result = {
@@ -30,7 +11,6 @@ export const convertJsonToNavigatorItem = function (props) {
         name,
         path: parent ? parent.path + "/" + name : "/" + name
     };
-    // 拡張情報
     if (extension) {
         const ext = extension(result, data, depth);
         if (ext)
@@ -41,11 +21,9 @@ export const convertJsonToNavigatorItem = function (props) {
     const children = [];
     getEntries(data, depth).forEach(entry => {
         const isProperty = typeof entry.data !== "object" || Array.isArray(entry.data);
-        // プロパティ
         if (isProperty) {
             properties[entry.name] = entry.data;
             hasProperty = true;
-            // 子アイテム
         }
         else {
             children.push(convertJsonToNavigatorItem({
@@ -62,15 +40,12 @@ export const convertJsonToNavigatorItem = function (props) {
     if (hasProperty)
         result.properties = properties;
     if (isNode)
-        result.children = children; // ファイルのときは undefined
+        result.children = children;
     return result;
 };
 // ---------- ---------- ---------- ---------- ----------
 // getParentItems
 // ---------- ---------- ---------- ---------- ----------
-/**
- * NavigatorItem の親をリストで取得する
- */
 export const getParentItems = (item) => {
     if (!item)
         return [];
@@ -83,31 +58,76 @@ export const getParentItems = (item) => {
     return result.reverse();
 };
 // ---------- ---------- ---------- ---------- ----------
+// vnodes
+// ---------- ---------- ---------- ---------- ----------
+const div = el("div");
+const table = el("table");
+const thead = el("thead");
+const tbody = el("tbody");
+const tr = el("tr");
+const th = el("th");
+const td = el("td");
+const ol = el("ol");
+const li = el("li");
+const button = el("button");
+const input = el("input");
+const span = el("span");
+// ---------- ---------- ---------- ---------- ----------
 // NavigatorFinder Component
 // ---------- ---------- ---------- ---------- ----------
 /**
- * ナビゲーションファインダーコンポーネント
+ * ファインダー
+ *
+ * - 必須項目
+ * state, id, currentKeys
+ *
+ * - columns
+ * カラムの表示設定
+ *
+ * - maxItemsCount
+ * 最大表示させるアイテム数
+ *
+ * - itemClick
+ * 非ノードをクリックした際のアクション
+ *
+ * - afterRender
+ * レンダーフック
+ *
+ * - extension
+ * レンダーフックで参照できる拡張情報
  */
 export const NavigatorFinder = function (props) {
     var _a, _b;
-    const { state, currentKeys, maxItemsCount = 0, itemClick, afterRender, extension } = props;
+    const { state, id, currentKeys, maxItemsCount = 0, itemClick, afterRender, extension } = props;
     const current = getValue(state, currentKeys, undefined);
+    // localState
+    const { searchText, selected, sortType, reverse, sortKey } = getLocalState(state, id, {
+        searchText: "", // 検索テキスト
+        selected: [], // 選択されているボタン名
+        sortType: undefined, // ソート用比較関数
+        reverse: false, // ソートを逆順にするか
+        sortKey: undefined // 使用されているソート名 (column.name)
+    });
+    // selected filter
+    const isFilter = selected.includes(`${createLocalKey(id)}_filter`);
+    // ---------- ---------- ----------
     // createColumns
+    // ---------- ---------- ----------
     const createColumns = (_a = props.columns) !== null && _a !== void 0 ? _a : ((directory) => {
         const result = [];
         if (!directory)
             return result;
         result.push({
             name: "name",
-            val: (item) => item.name
+            val: (item) => item.name,
+            compare: (a, b) => {
+                return a.name.localeCompare(b.name);
+            }
         });
-        // get properties
         const children = directory.children;
         if (children) {
-            // get names
             const names = [];
-            // get properties
-            // 子アイテムのプロパティをすべて確認して抽出しています
+            // 子アイテムのプロパティをすべて抽出
             children.forEach(child => {
                 if (child.properties) {
                     Object.keys(child.properties).forEach(key => names.push(key));
@@ -129,65 +149,166 @@ export const NavigatorFinder = function (props) {
         }
         return result;
     }); // end createColumns
+    // columns
     const columns = createColumns(current);
     // parentItems
     const parentItems = getParentItems(current);
     if (current)
         parentItems.push(current);
+    // ---------- ---------- ----------
+    // hitTest
+    // ---------- ---------- ----------
+    const hitTest = (text) => {
+        if (typeof text !== "string")
+            return false;
+        const S = searchText.trim().toLowerCase();
+        if (S === "")
+            return false;
+        const keys = S.replace(/[ 　]+/g, " ").split(" ").filter(Boolean);
+        if (keys.length === 0)
+            return false;
+        const sText = text.toLowerCase();
+        return keys.every(key => sText.includes(key));
+    }; // end hitTest
+    // ---------- ---------- ----------
     // getItems
+    // ---------- ---------- ----------
     const getItems = (item) => {
         if (!item || item.children === undefined)
             return [];
+        // filter
+        const result = isFilter && searchText !== ""
+            ? item.children.filter(child => {
+                return columns.some(col => hitTest(col.val(child)));
+            })
+            : item.children;
+        // maxCount
         const count = maxItemsCount === 0
-            ? item.children.length
-            : Math.min(maxItemsCount, item.children.length);
-        return item.children.slice(0, count);
+            ? result.length
+            : Math.min(maxItemsCount, result.length);
+        return result.slice(0, count);
     }; // end getItems
     // items
     const items = getItems(current);
+    // sort
+    if (sortType) {
+        items.sort(sortType);
+        if (reverse)
+            items.reverse();
+    }
+    // items count
     const count = current
         ? (_b = current.children) === null || _b === void 0 ? void 0 : _b.length
         : 0;
+    // items hitCount
+    const hitCount = isFilter
+        ? items.length
+        : items.filter(item => columns.some(col => hitTest(col.val(item)))).length;
+    // ---------- ---------- ----------
     // action_parentClick
+    // ---------- ---------- ----------
     const action_parentClick = (state, item) => {
-        return setValue(state, currentKeys, item);
+        return setLocalState(setValue(state, currentKeys, item), id, {
+            selected: []
+        });
     };
+    // ---------- ---------- ----------
     // action_itemClick
+    // ---------- ---------- ----------
     const action_itemClick = (state, item) => {
         // 子アイテムがすべてプロパティのときは移動しない
         const children = item.children;
-        if (!children)
+        if (!children || children.length === 0)
             return state;
-        if (!children.some(child => typeof child === "object" && !Array.isArray(child)))
-            return state;
-        return setValue(state, currentKeys, item);
+        // filterは解除
+        return setLocalState(setValue(state, currentKeys, item), id, {
+            selected: []
+        });
     };
+    // ---------- ---------- ----------
+    // action_inputSearchText
+    // ---------- ---------- ----------
+    const action_inputSearchText = (state, e) => {
+        const input = e.currentTarget;
+        if (!input)
+            return state;
+        return setLocalState(state, id, {
+            searchText: input.value
+        });
+    }; // end action_inputSearchText
+    // ---------- ---------- ----------
+    // action_copyFolderPath
+    // ---------- ---------- ----------
+    const action_copyFolderPath = (state) => {
+        if (!current)
+            return state;
+        navigator.clipboard.writeText(current.path);
+        return state;
+    }; // end action_copyFolderPath
+    // ---------- ---------- ----------
+    // action_sort
+    // ---------- ---------- ----------
+    const action_sort = (state, column) => {
+        if (column.compare === undefined)
+            return state;
+        return setLocalState(state, id, {
+            sortType: column.compare,
+            reverse: sortKey === column.name ? !reverse : false,
+            sortKey: column.name
+        });
+    }; // end action_sort
+    // ---------- ---------- ----------
     // VNode
+    // ---------- ---------- ----------
     const vnode = div({
         ...deleteKeys(props, "state", "currentKeys", "columns", "itemClick", "afterRender", "extension")
     }, 
     // toolBar
     div({
         class: "toolBar"
-    }, "toolBar (未実装)"), 
+    }, input({
+        type: "text",
+        placeholder: "search keys",
+        value: searchText,
+        oninput: action_inputSearchText
+    }), SelectButton({
+        state: state,
+        id: `${createLocalKey(id)}_filter`,
+        keyNames: [createLocalKey(id), "selected"]
+    }, "FILTER"), button({
+        type: "button",
+        title: "現在のフォルダパスを、クリップボードにコピー",
+        onclick: action_copyFolderPath
+    }, "COPY")), 
     // parentItems
     ol({}, parentItems.map(parent => li({
         key: parent.path,
         onclick: [action_parentClick, parent]
     }, parent.name))), 
     // items
-    table({}, thead({}, tr({}, columns.map(col => th({}, col.name)))), tbody({}, items.map(item => tr({
+    table({}, thead({}, tr({}, columns.map(col => th({
+        onclick: [action_sort, col]
+    }, col.name + (sortKey === col.name
+        ? (reverse ? " ▼" : " ▲")
+        : ""))))), tbody({}, items.map(item => tr({
         key: item.path,
         onclick: item.children === undefined
             ? itemClick ? [itemClick, item] : undefined
             : [action_itemClick, item]
-    }, columns.map(col => td({
-        title: col.val(item)
-    }, col.val(item))))))), 
+    }, columns.map(col => {
+        const v = col.val(item);
+        return td({
+            title: String(v)
+        }, span({
+            class: typeof v === "string" && hitTest(v) ? "hit" : ""
+        }, v));
+    }))))), 
     // statusBar
     div({
         class: "statusBar"
-    }, `items ${items.length} / ${count}`));
+    }, `items ${items.length} / ${count}` + (searchText !== "" ? ` (${hitCount} hit)` : "")));
+    // ---------- ---------- ----------
     // afterRender
+    // ---------- ---------- ----------
     return afterRender ? afterRender({ state, current, extension }, vnode) : vnode;
 };

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

@@ -1,7 +1,3 @@
-/**
- * ステートへのパス
- * 参照する値の型がわかりやすいよう、複数パターンをここで集約
- */
 export type Keys = readonly string[];
 export type Keys_String = Keys;
 export type Keys_ArrayString = Keys;
@@ -11,49 +7,21 @@ export type Keys_ArrayRAFTask = Keys;
 export type Keys_NavigatorItem = Keys;
 /**
  * パスを辿って、ステートから値を取得する
- *
- * @template S
- * @template D
- * @param   {S}    state    - ステート
- * @param   {Keys} keyNames - 値までのパス
- * @param   {D}    def      - デフォルト値
- * @returns {D}             - 型保証は呼び出し側の責任
  */
 export declare const getValue: <S, D>(state: S, keyNames: Keys, def: D) => D;
 /**
  * パスを辿って、ステートに値を設定して返す
- *
- * @template S
- * @param   {S}    state    - ステート
- * @param   {Keys} keyNames - 値までのパス
- * @param   {any}  value    - 設定する値
- * @returns {S}
  */
 export declare const setValue: <S>(state: S, keyNames: Keys, value: any) => S;
 /**
  * IDからユニーク文字列を作成する
- *
- * @param   {string} id - ユニークID
- * @returns {string}
  */
 export declare const createLocalKey: (id: string) => string;
 /**
  * ステートから、ローカルステートを取得する
- *
- * @template S
- * @param   {S}                   state - ステート
- * @param   {string}              id    - ユニークID
- * @param   {Record<string, any>} def   - 初期値
- * @returns {Record<string, any>}
  */
 export declare const getLocalState: <S>(state: S, id: string, def: Record<string, any>) => Record<string, any>;
 /**
  * ローカルステートを更新してステートを返す
- *
- * @template S
- * @param   {S}                   state - ステート
- * @param   {string}              id    - ユニークID
- * @param   {Record<string, any>} value - 設定するローカルステート
- * @returns {S}
  */
 export declare const setLocalState: <S>(state: S, id: string, value: Record<string, any>) => S;

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

@@ -4,13 +4,6 @@
 // ---------- ---------- ---------- ---------- ----------
 /**
  * パスを辿って、ステートから値を取得する
- *
- * @template S
- * @template D
- * @param   {S}    state    - ステート
- * @param   {Keys} keyNames - 値までのパス
- * @param   {D}    def      - デフォルト値
- * @returns {D}             - 型保証は呼び出し側の責任
  */
 export const getValue = function (state, keyNames, def) {
     let result = state;
@@ -32,12 +25,6 @@ export const getValue = function (state, keyNames, def) {
 // ---------- ---------- ---------- ---------- ----------
 /**
  * パスを辿って、ステートに値を設定して返す
- *
- * @template S
- * @param   {S}    state    - ステート
- * @param   {Keys} keyNames - 値までのパス
- * @param   {any}  value    - 設定する値
- * @returns {S}
  */
 export const setValue = function (state, keyNames, value) {
     let result = { ...state };
@@ -64,9 +51,6 @@ export const setValue = function (state, keyNames, value) {
 // ---------- ---------- ---------- ---------- ----------
 /**
  * IDからユニーク文字列を作成する
- *
- * @param   {string} id - ユニークID
- * @returns {string}
  */
 export const createLocalKey = (id) => `local_key_${id}`;
 // ---------- ---------- ---------- ---------- ----------
@@ -74,12 +58,6 @@ export const createLocalKey = (id) => `local_key_${id}`;
 // ---------- ---------- ---------- ---------- ----------
 /**
  * ステートから、ローカルステートを取得する
- *
- * @template S
- * @param   {S}                   state - ステート
- * @param   {string}              id    - ユニークID
- * @param   {Record<string, any>} def   - 初期値
- * @returns {Record<string, any>}
  */
 export const getLocalState = function (state, id, def) {
     const localKey = createLocalKey(id);
@@ -96,12 +74,6 @@ export const getLocalState = function (state, id, def) {
 // ---------- ---------- ---------- ---------- ----------
 /**
  * ローカルステートを更新してステートを返す
- *
- * @template S
- * @param   {S}                   state - ステート
- * @param   {string}              id    - ユニークID
- * @param   {Record<string, any>} value - 設定するローカルステート
- * @returns {S}
  */
 export const setLocalState = function (state, id, value) {
     const localKey = createLocalKey(id);

package/dist/hyperapp-is/dom/utils.d.ts

@@ -1,11 +1,5 @@
 /**
  * スクロールの余白
- *
- * @type {Object} ScrollMargin
- * @property {number} top    - 上までの余白
- * @property {number} left   - 左までの余白
- * @property {number} right  - 右までの余白
- * @property {number} bottom - 下までの余白
  */
 export interface ScrollMargin {
     top: number;
@@ -15,9 +9,6 @@ export interface ScrollMargin {
 }
 /**
  * スクロールの余白を取得する
- *
- * @param   {Event} e - イベント
- * @returns {ScrollMargin}
  */
 export declare const getScrollMargin: (e: Event) => ScrollMargin;
 /**
@@ -42,8 +33,5 @@ export interface MatrixState {
 }
 /**
  * DOM から transfrom 情報を取得する
- *
- * @param {HTMLElement} dom - 情報を取得する DOM
- * @returns {MatrixState}
  */
 export declare const getMatrixState: (dom: HTMLElement) => MatrixState | null;

package/dist/hyperapp-is/dom/utils.js

@@ -4,9 +4,6 @@
 // ---------- ---------- ---------- ---------- ----------
 /**
  * スクロールの余白を取得する
- *
- * @param   {Event} e - イベント
- * @returns {ScrollMargin}
  */
 export const getScrollMargin = function (e) {
     const el = e.currentTarget;
@@ -24,9 +21,6 @@ export const getScrollMargin = function (e) {
 // ---------- ---------- ---------- ---------- ----------
 /**
  * DOM から transfrom 情報を取得する
- *
- * @param {HTMLElement} dom - 情報を取得する DOM
- * @returns {MatrixState}
  */
 export const getMatrixState = (dom) => {
     const style = getComputedStyle(dom);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperapp-is",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "UI foundation library for Hyperapp by is4416",
   "license": "MIT",
   "type": "module",
@@ -37,8 +37,5 @@
   "devDependencies": {
     "typescript": "^5.0.0",
     "vite": "^7.3.0"
-  },
-  "dependencies": {
-    "marked": "^17.0.4"
   }
 }