0.7.5 • Published 2 years ago

tym-wc-parts v0.7.5

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

私こと tym が作成した Web Component 群です。

動作イメージ (Demo screen)

https://shinichi-tym.github.io/tym-wc-parts-demo/

インストール (Installation)

npm i tym-wc-parts

※ CDN 利用の場合は不要

目次 (Table of contents)

  1. 使い方
  2. 簡易テーブル表示
  3. 簡易テーブル表示編集
  4. 簡易ツリー表示
  5. please wait...

使い方

(Usage:Angular)

//--- app.module.ts ---
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  :
@NgModule({
  :
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  :
})

//--- app.component.ts ---
import 'tym-wc-parts';
  :
@Output() textContent: string = [
  ['header','header','header','header'],
  ['aaa',123,'AAA',12345],
  ['bbb',456,'BBB',456789],
].join('\n');
  :
<tym-wc-table-view
 [textContent]="textContent"
 right-cols="2,4"
 last-sp="false"
></tym-wc-table-view>

(Usage:CDN)

<tym-wc-table-view right-cols="2,4" last-sp="false">
  header,header,header,header
  aaa,123,AAA,12345
  bbb,456,BBB,456789
</tym-wc-table-view>

<script type="module">
  //(例)
  import 'https://unpkg.com/tym-wc-parts/tym-wc-table-view.js';
  // import 'tym-wc-parts/';
</script>

  :

簡易テーブル表示 [tym-wc-table-view]

単純な csv 形式データを, 簡易にテーブル表示します。
行ヘッダーをマウスでリサイズできます(not firefox)。

表示サンプル (Display image)

表示サンプル

<tym-wc-table-view
  cols="単価,販売数,売上"
  right-cols="1,2,3"
  center-cols=""
  last-sp="false"
  max-width="200">
980,627,614460
1980,1219,2413620
2980,116,345680
3980,616,2451680
</tym-wc-table-view>
<!-- 各パラメタは javascript 等で更新しても反映されない-->

  • cols: csv

    • カラムヘッダーを csv 形式で指定する
    • 省略した場合は, textContent の先頭行をカラムヘッダーとして表示する

  • right-cols: csv

    • 右揃えカラムの番号を csv 形式で指定する

  • center-cols: csv

    • 中央揃えカラムの番号を csv 形式で指定する

  • last-sp: boolean

    • 最終カラムを追加するか否かを指定する
      • true : 追加する(デフォルト)
      • false : 追加しない

  • max-width: number

    • セル幅が大きい場合の最大セル幅を指定する (default 200)

  • textContent: string

    • 表示するデータを 改行区切りの csv 形式で指定する
    • textContent は, 一度だけ更新できる

Usage

<script type="module">
  import 'https://unpkg.com/tym-wc-parts/tym-wc-table-view.js';
</script>

<tym-wc-table-view
 right-cols="1,2,3"
 center-cols=""
 last-sp="false"
 max-width="200">
  単価,販売数,売上
  980,627,614460
  1980,1219,2413620
  2980,116,345680
  3980,616,2451680
</tym-wc-table-view>
<script type="module">
  import 'https://unpkg.com/tym-wc-parts/tym-wc-table-view.js';
</script>

<tym-wc-table-view id="tymWcTableView"
 cols="単価,販売数,売上"
 right-cols="1,2,3"
 center-cols=""
 last-sp="false"
 max-width="200"
></tym-wc-table-view>

<script type="javascript">
  document.getElementById("tymWcTableView")
    .textContent = [
      [980,627,614460],
      [1980,1219,2413620],
      [2980,116,345680],
      [3980,616,2451680]
    ].join("\n");
</script>

簡易テーブル表示編集 [tym-wc-table-edit]

単純な csv 形式データを, 簡易にテーブル表示し, 編集できます。
行ヘッダーをマウスでリサイズできます(not firefox)。

表示サンプル (Display image)

表示サンプル

Usage

<script type="module">
  import 'https://unpkg.com/tym-wc-parts/tym-wc-table-edit.js';
</script>

<tym-wc-table-edit
 right-cols="1,2,3"
 center-cols=""
 last-sp="false"
 max-width="200">
  単価,販売数,売上
  980,627,614460
  1980,1219,2413620
  2980,116,345680
  3980,616,2451680
</tym-wc-table-edit>
<script type="module">
  import 'https://unpkg.com/tym-wc-parts/tym-wc-table-edit.js';
</script>

<tym-wc-table-edit id="tymWcTableEdit"
 cols="単価,販売数,売上"
 right-cols="1,2,3"
 center-cols=""
 last-sp="false"
 max-width="200"
></tym-wc-table-edit>

<script type="javascript">
  document.getElementById("tymWcTableEdit")
    .textContent = [
      [980,627,614460],
      [1980,1219,2413620],
      [2980,116,345680],
      [3980,616,2451680]
    ].join("\n");
  function printcsv() {
    document.getElementById("tymWcTableEdit").shadowRoot.querySelectorAll('tbody tr')
      .forEach((tr,ix) => {
        console.log(ix + ':' + Array.from(tr.children).map(td=>td.innerHTML).join(','));
      });
  }
</script>

簡易ツリー表示 [tym-wc-tree-view]

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

表示サンプル (Display image)

表示サンプル

<tym-wc-tree-view></tym-wc-tree-view>
  • tree: TREE
    • 文字列ツリー構造データを指定する
      type TREE = TREE[] | string
const tree: TREE = [
  'leaf-text',
  'leaf-text',
  [
    'leaf-text',
    'leaf-text',
  ],
  'leaf-text',
]
  • leafclick: (event: MouseEvent, texts: string[]) => void
    • leaf クリック時の関数を指定する
      target.leafclick = (event, texts) => {
  console.log(event, texts);
}
  • leafmenu: (event: MouseEvent, texts: string[]) => void
    • leaf 右クリック時の関数を指定する
      target.leafmenu = (event, texts) => {
  console.log(event, texts);
  event.preventDefault();
  return false;
}

Usage

<script type="module">
  import 'https://unpkg.com/tym-wc-parts/tym-wc-tree-view.js';
</script>

<tym-wc-tree-view id="target"></tym-wc-tree-view>

<script>
  var target = document.getElementById('target');
  target.tree = [
    'leaf-text',
    'leaf-text',
    [
      'leaf-text',
      'leaf-text',
    ],
    'leaf-text',
  ];
  target.leafclick = (event, texts) => {
    console.log(event, texts);
  }
  target.leafmenu = (event, texts) => {
    console.log(event, texts);
    event.preventDefault();
    return false;
  }
</script>

Usage:Angular

<tym-wc-tree-view
  [tree]="treedata"
  [leafclick]="leafclick"
  [leafmenu]="leafmenu"
></tym-wc-tree-view>
@Output() treedata = [
  'leaf-text',
  'leaf-text',
  [
    'leaf-text',
    'leaf-text',
  ],
  'leaf-text',
];
@Output() leafclick = (event: MouseEvent, texts: string[]) => {
  console.log(event, texts);
}
@Output() leafmenu = (event: MouseEvent, texts: string[]) => {
  console.log(event, texts);
  event.preventDefault();
  return false;
}

ライセンス (License)

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

Copyrights belong to shinichi tayama (shinichi.tym).

front-endwebWebcomponentresizetableediteditorgridtreefolder
@infinitebrahmanuniverse/nolb-tym@everything-registry/sub-chunk-2992
0.7.5

2 years ago

0.7.4

2 years ago

0.7.3

2 years ago

0.7.2

2 years ago

0.7.1

2 years ago

0.0.0

2 years ago