Riot v4 でCSSフレームワークを使うなら Semantic UI Riot はいかが？

**Riot v4** がリリースされて随分経ってしまいましたが、ようやく **Semantic UI Riot** も `v4` に対応できました:rocket:
[Riot.js Advent Calendar 2019](https://qiita.com/advent-calendar/2019/riotjs)の1日目で恐縮ですが宣伝させてください！
<img width="128" alt="logo.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140892/965a33bf-0e9d-1fff-d577-b71d92d2e7e4.png">

# Semantic UI Riot って何？
CSSフレームワークの[Semantic UI](https://semantic-ui.com/)に特化したRiotのコンポーネントセットです。
Semantic UIのJavaScriptやjQueryに依存することなく、Modulesが使えるようになっています。[^1]
https://semantic-ui-riot.web.app

## Semantic UI Riot が依存する Riot と Semantic UI のバージョン

Riotのバージョンに合わせて、1.xと2.xのどちらかをお使いください。[^2]

|Semantic UI Riot |Riot     |Semantic UI |
|-----------------|---------|------------|
|1.x.x            | 3.0.0   | 2.3.0      |
|2.x.x            | 4.0.0   | 2.3.0      |

[^1]: Modulesを使いやすくするためのコンポーネントセットという位置付けなので、それ以外のElements, Collections, ViewsはSemantic UIを直接お使いください。

[^2]: Riot v4対応版をリリースするにあたって、 v3対応版だった`0.24.1`は`1.0.0`にバージョンアップしました。破壊的な変更はなく、単なる気持ちの整理で上げただけなので、Riot v3をお使いの場合は是非とも`1.x.x`をお使いください。

# 用意されているコンポーネントの一覧
## Modules
Semantic UIのModulesの中から個人的によく使うものをコンポーネント化してあります。

- Accordion
- Checkbox
- Dropdown
- Modal
- Popup
- Progress
- Rating
- Tab

## Addons
Semanti UIのModulesにはないもので、あったら便利そうなものを作りました。

- Alert
  - ブラウザ標準のalert()の代わりに使えます。
- Confirm
  - ブラウザ標準のconfirm()の代わりに使えます。
- Datepicker
- Pagination
- Radio
  - Semantic UIではCheckboxに含まれているものを独立させました。
- Table
  - 列でソートができます。
- Toast
  - 一定時間経過したら消えるメッセージです。
- Validation Error

# コンポーネントの簡単な紹介

## Checkbox
```html
<su-checkbox name="checkbox1">
  Make my profile visible
</su-checkbox>
```
値のやりとりは`checked`属性を使います。

```javascript
this.$("[name='checkbox1']").checked = true
```

## Dropdown
```html
<su-dropdown name="dropdown1" items="{ dropdownItems }"></su-dropdown>

<script>
  export default {
    dropdownItems: [
      {
        label: 'Gender',
        value: null,
        default: true
      },
      {
        label: 'Male',
        value: 1
      },
      {
        label: 'Female',
        value: 2
      },
    ]
  }
</script>
```
`items` 属性でドロップダウンの中に表示する項目を設定します。

値のやり取りは `value` 属性を使いますが、`value` 属性の場合は`getAttribute` , `setAttribute` じゃないとやり取りできないようです。

（Riot.jsで予約語として扱われているのが原因？と思っていますが、よくわからないので詳しい方教えてください。）

```javascript
this.$("[name='dropdown1']").getAttribute('value')
this.$("[name='dropdown1']").setAttribute('value', value)
 ```

## Modal
```html
<su-modal modal="{ modal }" show="{ state.show }" onhide="{ onHide }">
    <p>Modal Content</p>
</su-modal>
<button class="ui button" onclick="{ showModal }">Show modal</button>

<script>
  export default {
    state: {
      show: false
    },
    modal: {
      header: 'Select a Photo',
      buttons: [{
        text: 'Ok',
        type: 'primary',
        icon: 'checkmark'
      }, {
        text: 'Cancel'
      }]
    },

    showModal() {
      this.update({ show: true })
    },
    onHide() {
      this.update({ show: false })
    }
  }
</script>
```
モーダルのコンテンツは**タグのテキスト**に、それ以外のヘッダーやボタンの情報は `modal` 属性で設定して、 `show` 属性を `true` にするとモーダルが表示されます。

モーダルがクローズされると `onhide` コールバックが呼ばれるので、 `show` 属性の変数（ここでの`state.show`） を `false` にするのをお忘れなく。

## Other
他にも色々なコンポーネントを用意してあるので、興味があればのぞいてみてください。
https://semantic-ui-riot.web.app

# インストール

ここまで読んで試してみたくなった方は是非インストールしてみてください！

## お手軽に全部CDNから持ってくる方法
```html:index.html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" />
  <script src="https://unpkg.com/riot@4.6.6/riot+compiler.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/semantic-ui-riot@2.1.0/dist/semantic-ui-riot.js"></script>
</head>

<body>
  <sample></sample>

  <script type="riot" data-src="./sample.riot"></script>
  <script>
    riot.compile().then(() => {
      riot.mount("sample");
    });
  </script>
</body>
</html>
```
```html:sample.riot
<sample>
  <su-checkbox>Make my profile visible</su-checkbox>
</sample>
```

## Webpackを使う方法

```
npm i -S semantic-ui-riot
```
```js:index.js
import {component} from 'riot'
import 'semantic-ui-riot'
import Sample from './sample.riot'

component(Sample)(document.getElementById('app'))
```
```js:webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.riot$/,
        exclude: /node_modules/,
        use: [{
          loader: '@riotjs/webpack-loader'
        }]
      }
    ]
  }
};
```
```html:index.html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
</head>
<body>
  <div id="app"></div>
  <script src="main.js"></script>
</body>
</html>
```
```html:sample.riot
<sample>
  <su-checkbox>Make my profile visible</su-checkbox>
</sample>
```


# Thanks!
Semantic UI Riot のアイコンは Riotユーザーでデザイナーの @nibushibu さんに作って頂きました！
どうもありがとうございます！