[tym-directive]

tym-directive は，angular の極小のディレクティブ(等)です。

動作イメージ (Demo screen)

[https://shinichi-tym.github.io/tym-ng-ws-demo/index.html#tym-directive]

インストール (Installation)

次のコマンド実行します。

npm install tym-directive

目次 (Table of contents)

1. エレメントのリサイズ処理
2. 簡易テーブル表示
3. スプリッター
4. 簡易イベント通知
5. 簡易ツリー表示
6. 簡易テーブル編集
7. please wait...

• ディレクティブを利用できるようにします。

  :
import { TymDirectiveModule } from "tym-directive";
  :
@NgModule({
  declarations: [ .. ],
  imports: [ TymDirectiveModule ],
  :

エレメントのリサイズ処理

任意の html エレメント に対してリサイズ時の処理を行えるようにします。

• 使い方:

<div tymResize="horizontal" [tymResizeCallback]="callback">
  :
</div>

• 表示イメージ

• コールバック関数を実装します。

  :
  @Output() callback(thisElm: HTMLElement, parentElm: HTMLElement) {
    parentElm.style.width = thisElm.style.width;
    parentElm.style.height = thisElm.style.height;
  }
  :

簡易テーブル表示

単純な二次元配列を，簡易にテーブル表示します。 カラムのリサイズが可能です。

• 使い方:

<tym-table-view
  [cols]="cols"
  [data]="data"
  [lastsp]="lastsp"
  [maxWidth]="maxWidth"
></tym-table-view>

• 表示するためのデータを用意します。

let cols: string[] = [ "単価", "販売数", "売上", "注意事項" ];
let data = [
  [ 980, 627, 614460, "" ],
  [ 1980, 1219, 2413620, "" ],
  [ 2980, 116, 345680, "※備考参照:ここには注意事項が表示されます" ],
  [ 3980, 616, 2451680, "" ]
];
let lastsp: boolean = true; // default true(スペースカラムを表示)
let maxWidth: number = 200; // default 200 px

• 必要に応じてスタイルシートを用意します。
• 注意：スタイルシートはグローバルに設定する必要があります。

tym-table-view>table {
  font-family: Consolas, monaco, monospace;
  font-size: 14px;
}
tym-table-view>table tbody tr:nth-child(even)>* {
  background-color: #eee;
}
tym-table-view>table tbody tr:nth-child(odd)>* {
  background-color: #fff;
}
tym-table-view>table thead tr th {
  width: 6em;
}
tym-table-view>table thead tr th:last-child {
  width: unset;
}
tym-table-view>table tbody tr td {
  text-align: right;
}

• 表示イメージ

スプリッター

コンテナ内の2つに分割された領域の分割サイズをリサイズできるようにします。

• 使い方:

<div class="wapper">
  <div style="border:solid 1px #aaa; height:100%; padding:8px; width:200px;">
    left
  </div>
  <div tym-splitter></div>
  <div style="border:solid 1px #aaa; height:100%; padding:8px;">
    <div style="height:100%; overflow: auto;">
      <tym-table-view [cols]="cols" [data]="data"></tym-table-view>
    </div>
  </div>
</div>

[tymSplitter]="['<background>','<border-color>']"
ex. <tym-table-view [tymSplitter]="['#eee', '#aaa']" ...

• 表示イメージ

簡易イベント通知

イベントIDとイベント関数を登録し，イベントがポストされると，同じイベントIDを持つイベント関数がすべて実行されます。

• 使い方1:

TymComm.add('id1', (id: string, data: any, elm: any) => console.log('ABC: ' + data));
TymComm.add('id1', (id: string, data: any, elm: any) => console.log('XYZ: ' + data));
↓
TymComm.post('id1', 'POST DATA!');
↓
>> ABC: POST DATA!
>> XYZ: POST DATA!

• 使い方2:

@Output() TymCommPost = TymComm.post;
doChange(event: any) {
  console.log('CustomEvent: ' + (event as CustomEvent).detail);
}

<span (click)="TymCommPost('id2', 'POST DATA!')">CLICK!</span>
<span tymCommId="id2" (change)="doChange($event)"></span>
↓(CLICK!)
>> CustomEvent: POST DATA!

• 使い方3:

@Output() TymCommPost = TymComm.post;
@Output() commListener: TYM_COMM_LISTENER = (id: string, data: any, elm: HTMLElement) => {
  elm.innerText = id + ":" + data;
}

<span (click)="TymCommPost('id3', 'POST DATA!')">CLICK!</span>
<span tymCommId="id3" [tymCommListener]="commListener"></span>
↓(CLICK!)
<span tymCommId="id3" [tymCommListener]="commListener">id3:POST DATA!</span>

• 使い方4:

TymComm.addListenerSet(listener: TYM_COMM_LISTENER_SET)
TymComm.add(id: string, lsn: Function)
TymComm.delElmLisrnerSet(id: string, lsn: Function)
TymComm.post(id: string, data: any)

簡易ツリー表示

単純な文字列ツリー構造データを，簡易にツリー表示します。
選択内容の通知が可能です。コンテキストメニューが可能です。

• 使い方:

<div style="width:300px;border:solid 1px #aaa;overflow-y:auto;">
  TREE
  <tym-tree-view
    [tree]="treeview"
    [leaf]="treeviewsele"
    [menu]="treeviewmenu"
  ></tym-tree-view>
</div>
<!-- 不要であれば leaf は省略できます -->

• 表示するためのデータを用意します。

let treeview = [
  'leaf-text1',
  'leaf-text2',
  'leaf-text2',   // <= ここの子データとして
  [               // <= ここのデータが表示されます
    'leaf-text3',
    'leaf-text4',
    [
      'leaf-text5',
      'leaf-text-long-long-data',
    ],
    'leaf-text6',
  ],
  'leaf-text7',
];

const treeviewsele = (texts: string[]) => console.log(texts.join('/'));
const treeviewmenu = (texts: string[], event: MouseEvent): boolean => {
  console.log(texts.join('/'), event);
  return false;
}

• 表示イメージ

簡易テーブル編集

任意の table に簡易な編集機能を追加します。

• 使い方:

<table border="1" style="width:90%;table-layout:fixed;">
  <thead><tr><th>-</th><th>-</th><th>-</th><th>-</th><th>-</th></tr></thead>
  <tbody tym-table-edit>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
  </tbody>
</table>
<!-- tbody タグに tym-table-edit を 付与します -->

キーボード操作

[表示モード]

• 上下左右のキーでフォーカス位置を移動できます。
• Tab, Shift+Tabキーでフォーカス位置を左右に移動できます。
• Enter, Shift+Enterキーでフォーカス位置を上下に移動できます。
• Home, Endキーでフォーカス位置を行頭行末に移動できます。
• Ctrl+Home, Ctrl+Endキーでフォーカス位置をテーブルの先頭末尾に移動できます。
• F2キーで 編集モード になります。
• Backspaceキーで文字を消去し 編集モード になります。
• Deleteキーでフォーカス位置の文字を消去します。
• その他のキーで 編集モード になり, 入力した文字に置き換えます。

[編集モード]

• Tab, Shift+Tabキーで 表示モード になります。
• Tab, Shift+Tabキーで, 入力文字を確定し, フォーカス位置を左右に移動できます。
• Enter, Shift+Enterキーで 表示モード になります。
• Enter, Shift+Enterキーで, 入力文字を確定し, フォーカス位置を上下に移動できます。
• Escapeキーで編集を中止し, 表示モード になります。

• 表示イメージ

comments

* supports angular 15, 16 and 17.

ライセンス (License)

The components in tym-ng-ws are released under the MIT license. Read license.

Copyrights belong to shinichi tayama (shinichi.tym).