hyperapp-is 0.1.50 → 0.2.0

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

@@ -1,242 +0,0 @@
-// hyperapp-is / core / component.ts
-// ---------- ---------- ---------- ---------- ----------
-// import
-// ---------- ---------- ---------- ---------- ----------
-import { h, text } from "hyperapp";
-import { getValue, setValue, getLocalState, setLocalState } from "./state";
-// ---------- ---------- ---------- ---------- ----------
-// el
-// ---------- ---------- ---------- ---------- ----------
-/**
- * h 関数のラッパー
- * hが競合する可能性があるので作成した
- */
-export const el = (tag) => (props, ...children) => h(tag, props !== null && props !== void 0 ? props : {}, children
-    .flat()
-    .filter(child => child !== null &&
-    child !== undefined)
-    .map((child) => typeof child === "object" ? child : text(`${child}`)));
-// ---------- ---------- ---------- ---------- ----------
-// concatAction
-// ---------- ---------- ---------- ---------- ----------
-/**
- * アクションを結合して結果を返す
- */
-export const concatAction = function (action, newState, e) {
-    if (!action)
-        return newState;
-    const effect = (dispatch) => {
-        requestAnimationFrame(() => {
-            dispatch((state) => action(state, e));
-        });
-    };
-    return [newState, effect];
-};
-// ---------- ---------- ---------- ---------- ----------
-// getClassList
-// ---------- ---------- ---------- ---------- ----------
-/**
- * props から classList を取得
- */
-export const getClassList = (props) => {
-    return props.class
-        ? props.class.trim().split(" ").filter(Boolean)
-        : [];
-};
-// ---------- ---------- ---------- ---------- ----------
-// deleteKeys
-// ---------- ---------- ---------- ---------- ----------
-/**
- * props から不要なキーを削除する
- */
-export const deleteKeys = (props, ...keys) => {
-    const result = { ...props };
-    keys.forEach(key => delete result[key]);
-    return result;
-};
-// ---------- ---------- ---------- ---------- ----------
-// Route Component
-// ---------- ---------- ---------- ---------- ----------
-/**
- * ステート内の文字とmatchした時、VNodeを返す
- */
-export const Route = function (props, children) {
-    const { state, keyNames, match } = props;
-    const selectedName = getValue(state, keyNames, "");
-    // nullの場合、VNodeは生成されない
-    return selectedName === match ? children : null;
-};
-// ---------- ---------- ---------- ---------- ----------
-// vnodes
-// ---------- ---------- ---------- ---------- ----------
-const button = el("button");
-const div = el("div");
-const input = el("input");
-const datalist = el("datalist");
-const option = el("option");
-// ---------- ---------- ---------- ---------- ----------
-// SelectButton Component
-// ---------- ---------- ---------- ---------- ----------
-const REVERSE_PREFIX = "r_";
-/**
- * クリックで、クラス名 select をトグルするボタン
- */
-export const SelectButton = function (props, children) {
-    const { state, keyNames, id, reverse = false } = props;
-    // classList
-    const classList = getClassList(props).filter(item => {
-        const name = item.toLowerCase();
-        return name !== "select" && name !== "reverse";
-    });
-    const selectedNames = getValue(state, keyNames, []);
-    if (selectedNames.includes(id))
-        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)
-            ? reverse
-                ? selectedNames.filter(item => item !== id).concat(`${REVERSE_PREFIX}${id}`)
-                : selectedNames.filter(item => item !== id)
-            : selectedNames.includes(`${REVERSE_PREFIX}${id}`)
-                ? selectedNames.filter(item => item !== `${REVERSE_PREFIX}${id}`)
-                : selectedNames.concat(id);
-        const newState = setValue(state, keyNames, newList);
-        return concatAction(props.onclick, newState, e);
-    };
-    // ---------- ---------- ----------
-    // VNode
-    // ---------- ---------- ----------
-    return button({
-        type: "button",
-        ...deleteKeys(props, "state", "keyNames", "reverse"),
-        class: classList.join(" "),
-        onclick: action
-    }, children);
-};
-// ---------- ---------- ---------- ---------- ----------
-// OptionButton Component
-// ---------- ---------- ---------- ---------- ----------
-/**
- * クリックで、クラス名 select を排他的に選択するボタン
- */
-export const OptionButton = function (props, children) {
-    const { state, keyNames, id, reverse = false } = props;
-    // classList
-    const classList = getClassList(props).filter(item => {
-        const name = item.toLowerCase();
-        return name !== "select" && name !== "reverse";
-    });
-    const selectedName = getValue(state, keyNames, "");
-    if (selectedName === id)
-        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
-            ? `${REVERSE_PREFIX}${id}`
-            : id;
-        const newState = setValue(state, keyNames, newValue);
-        return concatAction(props.onclick, newState, e);
-    };
-    // ---------- ---------- ----------
-    // VNode
-    // ---------- ---------- ----------
-    return button({
-        type: "button",
-        ...deleteKeys(props, "state", "keyNames", "reverse"),
-        class: classList.join(" "),
-        onclick: action
-    }, children);
-};
-// ---------- ---------- ---------- ---------- ----------
-// HistoryInput
-// ---------- ---------- ---------- ---------- ----------
-/**
- * 履歴付きインプット
- * localState: { histories: string[] }
- *
- * @returns {VNode<S>[]} - [HTMLInputElement, HTMLDataListElement]
- */
-export const HistoryInput = function (props) {
-    const { state, id, keyNames, historyLimit = 10, afterRender } = 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);
-    };
-    // ---------- ---------- ----------
-    // action_clear
-    // ---------- ---------- ----------
-    const action_clear = (state) => {
-        return setValue(setLocalState(state, id, {
-            histories: []
-        }), keyNames, "");
-    };
-    // ---------- ---------- ----------
-    // VNode
-    // ---------- ---------- ----------
-    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
-        }))),
-        button({
-            type: "button",
-            onclick: action_clear
-        }, "クリア")
-    ];
-    return afterRender
-        ? afterRender(state, localState, vnode)
-        : vnode;
-};

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

@@ -1,115 +0,0 @@
-import { VNode } from "hyperapp";
-import { Keys_NavigatorItem } from "./state";
-export interface NavigatorItem {
-    parent: NavigatorItem | null;
-    name: string;
-    path: string;
-    properties?: Record<string, any>;
-    children?: NavigatorItem[];
-    extension?: Record<string, any>;
-}
-export interface JsonEntry<D> {
-    name: string;
-    data: D;
-    isNode: boolean;
-}
-export interface NavigatorColumn {
-    name: string;
-    val: (item: NavigatorItem) => any;
-    text?: (item: NavigatorItem) => string;
-    compare?: (a: NavigatorItem, b: NavigatorItem) => number;
-}
-export declare const convertJsonToNavigatorItem: <D>(props: {
-    parent: NavigatorItem | null;
-    name: string;
-    data: D;
-    getEntries: (data: D, depth: number) => JsonEntry<D>[];
-    isNode: boolean;
-    depth?: number;
-    extension?: (item: NavigatorItem, data: D, depth: number) => Record<string, any> | undefined;
-}) => NavigatorItem;
-export declare const getParentItems: (item: NavigatorItem | undefined) => NavigatorItem[];
-/**
- * ファインダー
- *
- * - 必須項目
- * state, id, currentKeys
- *
- * - 拡張項目
- * columns, plugIn, afterRender
- *
- * - columns
- * カラムの表示設定
- *
- * - plugIn
- * プラグインの追加
- *
- * - afterRender
- * レンダーフック
- */
-export declare const NavigatorFinder: <S>(props: {
-    state: S;
-    id: string;
-    currentKeys: Keys_NavigatorItem;
-    columns?: (directory: NavigatorItem | undefined) => NavigatorColumn[];
-    plugIn?: (state: S, localState: Record<string, any>) => VNode<S>[];
-    toolBarNode?: (state: S, localState: Record<string, any>, vnode: VNode<S>) => VNode<S>;
-    parentItemsNode?: (state: S, localState: Record<string, any>, vnode: VNode<S>) => VNode<S>;
-    statusBarNode?: (state: S, localState: Record<string, any>, vnode: VNode<S>) => VNode<S>;
-    afterRender?: (state: S, localState: Record<string, any>, vnode: VNode<S>) => VNode<S>;
-    [key: string]: any;
-}) => VNode<S>;
-export declare const icon_depth: VNode<S>;
-export declare const icon_name: VNode<S>;
-export declare const icon_directory: VNode<S>;
-export declare const icon_file: VNode<S>;
-export declare const icon_trashBox: VNode<S>;
-export declare const icon_filter: VNode<S>;
-export declare const icon_copy: VNode<S>;
-/**
- * 検索結果
- *
- * - item
- * ヒットしたアイテム
- *
- * - depth
- * current からの深度
- */
-export interface SearchResult {
-    item: NavigatorItem;
-    depth: number;
-}
-/**
- * ファイルサーチ - NavigatorFinder プラグイン
- *
- * - 必須項目
- * state, id, currentKeys, searchResult, hitTest, maxItemsCount
- *
- * - searchResult
- * カードとして表示するVNode
- *
- * - hitTest
- * 抽出条件
- *
- * - maxItemsCount
- * 最初に表示させるカードの最大数
- *
- * - 拡張項目
- * afterRender
- *
- * - afterRender
- * レンダーフック
- */
-export declare const NavigatorSearch: <S>(props: {
-    state: S;
-    id: string;
-    currentKeys: Keys_NavigatorItem;
-    searchResult: (item: NavigatorItem, depth: number) => VNode<S> | VNode<S>[];
-    hitTest: (item: NavigatorItem) => boolean;
-    maxItemsCount: number;
-    toolBarNode?: (state: S, localState: Record<string, any>, vnode: VNode<S>) => VNode<S>;
-    parentItemsNode?: (state: S, localState: Record<string, any>, vnode: VNode<S>) => VNode<S>;
-    statusBarNode?: (state: S, localState: Record<string, any>, vnode: VNode<S>) => VNode<S>;
-    afterRender?: (state: S, localState: Record<string, any>, vnode: VNode<S>) => VNode<S>;
-    [key: string]: any;
-}) => VNode<S>;