hyperapp-is 0.1.50 → 0.2.0

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

@@ -1,615 +0,0 @@
-// hyperapp-is / core / navigator.ts
-import { getValue, setValue, getLocalState, setLocalState, createLocalKey, } from "./state";
-import { HistoryInput } from "./component";
-import { getScrollMargin } from "../dom/utils";
-import { el, deleteKeys, SelectButton } from "./component";
-// ---------- ---------- ---------- ---------- ----------
-// convertJsonToNavigatorItem
-// ---------- ---------- ---------- ---------- ----------
-export const convertJsonToNavigatorItem = function (props) {
-    const { parent, name, data, getEntries, isNode, depth = 0, extension } = props;
-    const result = {
-        parent,
-        name,
-        path: parent ? parent.path + "/" + name : "/" + name
-    };
-    if (extension) {
-        const ext = extension(result, data, depth);
-        if (ext)
-            result.extension = ext;
-    }
-    let properties = {};
-    let hasProperties = false;
-    const children = [];
-    getEntries(data, depth).forEach(entry => {
-        const isProperty = typeof entry.data !== "object" || Array.isArray(entry.data);
-        if (isProperty) {
-            properties[entry.name] = entry.data;
-            hasProperties = true;
-        }
-        else {
-            children.push(convertJsonToNavigatorItem({
-                parent: result,
-                name: entry.name,
-                data: entry.data,
-                getEntries,
-                isNode: entry.isNode,
-                depth: depth + 1,
-                extension
-            }));
-        }
-    });
-    if (hasProperties)
-        result.properties = properties;
-    if (isNode)
-        result.children = children;
-    return result;
-};
-// ---------- ---------- ---------- ---------- ----------
-// getParentItems
-// ---------- ---------- ---------- ---------- ----------
-export const getParentItems = (item) => {
-    if (!item)
-        return [];
-    const result = [];
-    let cd = item.parent;
-    while (cd) {
-        result.push(cd);
-        cd = cd.parent;
-    }
-    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 ul = el("ul");
-const li = el("li");
-const button = el("button");
-const input = el("input");
-const span = el("span");
-const svg = el("svg");
-const rect = el("rect");
-const path = el("path");
-// ---------- ---------- ---------- ---------- ----------
-// NavigatorFinder Component
-// ---------- ---------- ---------- ---------- ----------
-/**
- * ファインダー
- *
- * - 必須項目
- * state, id, currentKeys
- *
- * - 拡張項目
- * columns, plugIn, afterRender
- *
- * - columns
- * カラムの表示設定
- *
- * - plugIn
- * プラグインの追加
- *
- * - afterRender
- * レンダーフック
- */
-export const NavigatorFinder = function (props) {
-    var _a, _b;
-    const { state, id, currentKeys, plugIn, afterRender } = props;
-    // current
-    const current = getValue(state, currentKeys, undefined);
-    // localState
-    const localState = getLocalState(state, id, {
-        searchText: "", // 検索テキスト
-        selected: [], // 選択されているボタン名
-        sortType: undefined, // ソート用比較関数: (a: NavigatorItem, b: NavigatorItem) => number
-        reverse: false, // ソートを逆順にするか
-        sortKey: undefined // 使用されているソート名 (column.name)
-    });
-    // selected filter
-    const isFilter = localState.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,
-            compare: (a, b) => {
-                return a.name.localeCompare(b.name);
-            }
-        });
-        const children = directory.children;
-        if (children) {
-            const names = [];
-            // 子アイテムのプロパティをすべて抽出
-            children.forEach(child => {
-                if (child.properties) {
-                    Object.keys(child.properties).forEach(key => names.push(key));
-                }
-            });
-            // add NavigatorColumn
-            Array.from(new Set(names)).forEach(name => {
-                result.push({
-                    name,
-                    val: (item) => {
-                        var _a;
-                        const p = item.properties;
-                        return p
-                            ? (_a = p[name]) !== null && _a !== void 0 ? _a : ""
-                            : "";
-                    }
-                });
-            });
-        }
-        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 = localState.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 && localState.searchText !== ""
-            ? item.children.filter(child => {
-                return columns.some(col => hitTest(col.text ? col.text(child) : col.val(child)));
-            })
-            : item.children;
-        return result;
-    }; // end getItems
-    // items
-    const items = getItems(current);
-    // sort
-    if (localState.sortType) {
-        items.sort(localState.sortType);
-        if (localState.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.text ? col.text(item) : col.val(item)))).length;
-    // message
-    const message = `hit items = ${hitCount} / ${count}`;
-    // ---------- ---------- ----------
-    // action_parentClick
-    // ---------- ---------- ----------
-    const action_parentClick = (state, item) => {
-        return setLocalState(setValue(state, currentKeys, item), id, {
-            selected: []
-        });
-    };
-    // ---------- ---------- ----------
-    // action_itemClick
-    // ---------- ---------- ----------
-    const action_itemClick = (state, item) => {
-        // 子アイテムがすべてプロパティのときは移動しない
-        const children = item.children;
-        if (!children || children.length === 0)
-            return state;
-        // 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_sort
-    // ---------- ---------- ----------
-    const action_sort = (state, column) => {
-        if (column.compare === undefined)
-            return state;
-        return setLocalState(state, id, {
-            sortType: column.compare,
-            reverse: localState.sortKey === column.name ? !localState.reverse : false,
-            sortKey: column.name
-        });
-    }; // end action_sort
-    // ---------- ---------- ----------
-    // VNode
-    // ---------- ---------- ----------
-    // toolBarNode
-    const toolBarNode = div({
-        class: "toolBar"
-    }, HistoryInput({
-        state,
-        id: `${id}_searchText`,
-        keyNames: [createLocalKey(id), "searchText"],
-        placeholder: "search keys",
-        oninput: action_inputSearchText
-    }), button({
-        type: "button",
-        title: "delete keys",
-        onclick: (state) => {
-            return setLocalState(state, id, {
-                searchText: ""
-            });
-        }
-    }, icon_trashBox), SelectButton({
-        state: state,
-        id: `${createLocalKey(id)}_filter`,
-        keyNames: [createLocalKey(id), "selected"],
-        title: "filter"
-    }, icon_filter));
-    // parentItemsNode
-    const parentItemsNode = div({
-        class: "parentItems"
-    }, ol({}, parentItems.map(parent => li({
-        key: parent.path,
-        onclick: [action_parentClick, parent]
-    }, parent.name))));
-    // itemsNode
-    const itemsNode = div({
-        class: "items"
-    }, table({}, thead({}, tr({}, columns.map(col => th({
-        class: col.compare ? "sort" : "",
-        onclick: [action_sort, col]
-    }, col.name + (localState.sortKey === col.name
-        ? (localState.reverse ? " ▼" : " ▲")
-        : ""))))), tbody({}, items.map(item => tr({
-        key: item.path,
-        class: item.children === undefined
-            ? "file"
-            : "directory",
-        onclick: item.children === undefined
-            ? undefined
-            : [action_itemClick, item]
-    }, columns.map(col => {
-        const v = col.val(item);
-        const t = col.text ? col.text(item) : typeof v === "string" ? v : "";
-        return td({
-            title: t
-        }, span({
-            class: hitTest(t) ? "hit" : ""
-        }, v));
-    }))))));
-    // statusBarNode
-    const statusBarNode = div({ class: "statusBar" }, message);
-    // vnode
-    const vnode = div({
-        ...deleteKeys(props, "state", "currentKeys", "columns", "plugIn", "toolBarNode", "parentItemsNode", "statusBarNode", "afterRender")
-    }, div({
-        class: "rapper"
-    }, props.toolBarNode ? props.toolBarNode(state, localState, toolBarNode) : toolBarNode, props.parentItemsNode ? props.parentItemsNode(state, localState, parentItemsNode) : parentItemsNode, itemsNode, props.statusBarNode ? props.statuBarNode(state, localState, statusBarNode) : statusBarNode), 
-    // plugIn
-    plugIn
-        ? plugIn(state, localState)
-        : []);
-    // ---------- ---------- ----------
-    // afterRender
-    // ---------- ---------- ----------
-    return afterRender ? afterRender(state, localState, vnode) : vnode;
-};
-// ---------- ---------- ---------- ---------- ----------
-// svg icon
-// ---------- ---------- ---------- ---------- ----------
-// icon_depth
-export const icon_depth = svg({
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-}, rect({
-    x: 9,
-    y: 3,
-    width: 6,
-    height: 4,
-    rx: 1
-}), rect({
-    x: 3,
-    y: 15,
-    width: 6,
-    height: 4,
-    rx: 1
-}), rect({
-    x: 15,
-    y: 15,
-    width: 6,
-    height: 4,
-    rx: 1
-}), path({
-    d: "M12 7v4"
-}), path({
-    d: "M6 15v-4h12v4"
-}));
-// icon_name
-export const icon_name = svg({
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    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
-export const icon_directory = svg({
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-}, path({ d: "M3 7h6l2 2h10v8a2 2 0 0 1-2 2H3z" }));
-// icon_file
-export const icon_file = svg({
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    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
-export const icon_trashBox = svg({
-    viewBox: "0 0 24 24",
-    width: 24,
-    height: 24,
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    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
-export const icon_filter = svg({
-    viewBox: "0 0 24 24",
-    width: 24,
-    height: 24,
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-}, path({ d: "M3 5h18" }), path({ d: "M6 12h12" }), path({ d: "M10 19h4" }));
-// icon_copy
-export const icon_copy = svg({
-    viewBox: "0 0 24 24",
-    width: 24,
-    height: 24,
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-}, path({ d: "M9 9h11v11H9z" }), path({ d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" }));
-// ---------- ---------- ---------- ---------- ----------
-// NavigatorSearch Component (NavigatorFinder plugIn)
-// ---------- ---------- ---------- ---------- ----------
-/**
- * ファイルサーチ - NavigatorFinder プラグイン
- *
- * - 必須項目
- * state, id, currentKeys, searchResult, hitTest, maxItemsCount
- *
- * - searchResult
- * カードとして表示するVNode
- *
- * - hitTest
- * 抽出条件
- *
- * - maxItemsCount
- * 最初に表示させるカードの最大数
- *
- * - 拡張項目
- * afterRender
- *
- * - afterRender
- * レンダーフック
- */
-export const NavigatorSearch = function (props) {
-    const { state, id, currentKeys, searchResult, hitTest, afterRender } = props;
-    // localKey
-    const localKey = createLocalKey(id);
-    // localState
-    const localState = getLocalState(state, id, {
-        maxItemsCount: props.maxItemsCount, // カードの最大表示数
-        sortName: undefined, // ソート名
-        sortFn: undefined, // 比較関数
-        isDirectory: true, // ディレクトリを表示
-        isFile: true // ファイルを表示
-    });
-    // current
-    const current = getValue(state, currentKeys, undefined);
-    // ---------- ---------- ----------
-    // searchItems
-    // ---------- ---------- ----------
-    /**
-     * アイテムの検索
-     * 検索アイテムのフラット化をしていないので、速度によっては拡張を検討
-     */
-    const searchItems = (item, depth) => {
-        if (!item)
-            return [];
-        const result = [];
-        if (hitTest(item))
-            result.push({ item, depth });
-        if (item.children && item.children.length !== 0) {
-            item.children.forEach(child => {
-                const r = searchItems(child, depth + 1);
-                if (r.length !== 0)
-                    result.push(...r);
-            });
-        }
-        return result;
-    }; // end searchItems
-    // get items
-    const items = current
-        ? searchItems(current, 0)
-        : [];
-    // sort
-    if (localState.sortFn !== undefined)
-        items.sort(localState.sortFn);
-    // drawItems (filter, maxItemsCount の適用)
-    const drawItems = items.filter(item => {
-        return item.item.children
-            ? localState.isDirectory
-            : localState.isFile;
-    }).slice(0, localState.maxItemsCount);
-    // get parentItems
-    const parentItems = current
-        ? getParentItems(current).concat(current)
-        : [];
-    // message
-    const message = `hit ${items.length} items`;
-    // ---------- ---------- ----------
-    // action_itemsScroll
-    // ---------- ---------- ----------
-    /**
-     * items のスクロール状況で、maxItemsCount を追加
-     */
-    const action_itemsScroll = (state, e) => {
-        const margin = getScrollMargin(e);
-        return setLocalState(state, id, {
-            maxItemsCount: margin.bottom < 10
-                ? localState.maxItemsCount + 10 < items.length
-                    ? localState.maxItemsCount + 10
-                    : Math.max(10, items.length)
-                : localState.maxItemsCount
-        });
-    };
-    // ---------- ---------- ----------
-    // action_setSort
-    // ---------- ---------- ----------
-    /**
-     * 仕様するソート名をセット
-     * sortFn をステートに持つように変更する場合、ここも修正
-     */
-    const action_setSort = (state, newSortName) => {
-        const reverse = localState.sortName === newSortName;
-        const obj = {
-            "depth": (a, b) => a.depth - b.depth,
-            "name": (a, b) => {
-                if (a.item.name === b.item.name)
-                    return 0;
-                return a.item.name < b.item.name ? -1 : 1;
-            }
-        };
-        const fn = obj[newSortName] !== undefined
-            ? reverse
-                ? (a, b) => obj[newSortName](b, a)
-                : (a, b) => obj[newSortName](a, b)
-            : (a, b) => {
-                return a.depth === b.depth
-                    ? obj["name"](a, b)
-                    : obj["depth"](a, b);
-            };
-        return setLocalState(state, id, {
-            sortName: reverse ? `r_${newSortName}` : newSortName,
-            sortFn: fn
-        });
-    };
-    // ---------- ---------- ----------
-    // vnode
-    // ---------- ---------- ----------
-    const toolBarNode = div({
-        class: "toolBar"
-    }, 
-    // sort
-    button({
-        type: "button",
-        title: "sort depth",
-        onclick: [action_setSort, "depth"]
-    }, icon_depth), button({
-        type: "button",
-        title: "sort name",
-        onclick: [action_setSort, "name"]
-    }, icon_name), 
-    // filter
-    button({
-        type: "button",
-        class: localState.isDirectory ? "" : "ignore",
-        title: "directory",
-        onclick: (state) => setLocalState(state, id, {
-            isDirectory: !localState.isDirectory
-        })
-    }, icon_directory), button({
-        type: "button",
-        class: localState.isFile ? "" : "ignore",
-        title: "file",
-        onclick: (state) => setLocalState(state, id, {
-            isFile: !localState.isFile
-        })
-    }, icon_file));
-    // parentItemsNode
-    const parentItemsNode = div({
-        class: "parentItems"
-    }, ol({}, parentItems.map(item => li({
-        onclick: (state) => setValue(state, currentKeys, item)
-    }, item.name))));
-    // itemsNode
-    const itemsNode = div({
-        class: "items",
-        onscroll: action_itemsScroll
-    }, ul({}, drawItems.map(item => li({
-        class: "item",
-        key: item.item.path,
-        title: item.item.path
-    }, searchResult(item.item, item.depth)))));
-    // statusBarNode
-    const statusBarNode = div({
-        class: "statusBar"
-    }, message);
-    // vnode
-    const vnode = div({
-        ...deleteKeys(props, "state", "currentKeys", "searchResult", "hitTest", "maxItemsCount", "toolBarNode", "parentItemsNode", "statusBarNode", "afterRender")
-    }, props.toolBarNode ? props.toolBarNode(state, localState, toolBarNode) : toolBarNode, props.parentItemsNode ? props.parentItemsNode(state, localState, parentItemsNode) : parentItemsNode, itemsNode, props.statusBarNode ? props.statusBarNode(state, localState, statusBarNode) : statusBarNode);
-    // ---------- ---------- ----------
-    // afterRender
-    // ---------- ---------- ----------
-    return afterRender ? afterRender(state, localState, vnode) : vnode;
-};

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

@@ -1,27 +0,0 @@
-export type Keys = readonly string[];
-export type Keys_String = Keys;
-export type Keys_ArrayString = Keys;
-export type Keys_Number = Keys;
-export type Keys_ArrayNumber = Keys;
-export type Keys_ArrayRAFTask = Keys;
-export type Keys_NavigatorItem = Keys;
-/**
- * パスを辿って、ステートから値を取得する
- */
-export declare const getValue: <S, D>(state: S, keyNames: Keys, def: D) => D;
-/**
- * パスを辿って、ステートに値を設定して返す
- */
-export declare const setValue: <S>(state: S, keyNames: Keys, value: any) => S;
-/**
- * IDからユニーク文字列を作成する
- */
-export declare const createLocalKey: (id: string) => string;
-/**
- * ステートから、ローカルステートを取得する
- */
-export declare const getLocalState: <S, T>(state: S, id: string, def: T) => T;
-/**
- * ローカルステートを更新してステートを返す
- */
-export declare const setLocalState: <S, T>(state: S, id: string, value: T) => S;

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

@@ -1,37 +0,0 @@
-/**
- * スクロールの余白
- */
-export interface ScrollMargin {
-    top: number;
-    left: number;
-    right: number;
-    bottom: number;
-}
-/**
- * スクロールの余白を取得する
- */
-export declare const getScrollMargin: (e: Event) => ScrollMargin;
-/**
- * transform 情報
- */
-export interface MatrixState {
-    translate: {
-        x: number;
-        y: number;
-        z: number;
-    };
-    scale: {
-        x: number;
-        y: number;
-        z: number;
-    };
-    rotate: {
-        x: number;
-        y: number;
-        z: number;
-    };
-}
-/**
- * DOM から transfrom 情報を取得する
- */
-export declare const getMatrixState: (dom: HTMLElement) => MatrixState | null;