<commit_before><script lang="ts">
import { Ref, ref, reactive, watch } from "vue";

type State = {
  is_modified: boolean,
  is_searching: boolean,
};

export default {
  setup() {
    const delay = 2.5 * 1000;

    const state = reactive<State>({
      is_modified: false,
      is_searching: false,
    });

    function search() {
      state.is_searching = true;

      setTimeout(() => {
        state.is_searching = false;
      }, delay);
    }

    return {
      state,
      search,
    };
  }
};
</script>

<template>

<article class="layout__main">
  <header class="main__header">
    <h1 class="main__title">一覧</h1>
    <p class="main__breadcrumb">
      <a href="#menu">MAIN</a>
      <span class="main__breadcrumb__separator"><i class="lnir lnir-chevron-right"></i></span>
      <a href="/dist/list.html"><i class="lnir lnir-list"></i> 一覧</a>
    </p>
  </header>
  <section class="main__body">
    <form class="box box_fill">
      <section class="box__body">
        <button v-if="!state.is_searching" class="button button_search" :class="{ button_modified: state.is_modified }" @click.prevent="search"><i class="lnir lnir-reload"></i> 再読み込み</button>
        <button v-else class="button button_searching" @click.prevent="search"><i class="lnir lnir-spinner-11 lnir-is-spinning"></i> 読み込み中</button>
      </section>
    </form>
    <section class="content">
      <select class="pager">
        <option>1 / 10 ページ</option>
        <option>2 / 10 ページ</option>
        <option>3 / 10 ページ</option>
        <option>4 / 10 ページ</option>
        <option>5 / 10 ページ</option>
        <option>6 / 10 ページ</option>
        <option>7 / 10 ページ</option>
        <option>8 / 10 ページ</option>
        <option>9 / 10 ページ</option>
        <option>10 / 10 ページ</option>
      </select>
      <span>1 ～ 1000 件 / 全 5000 件中</span>
    </section>
    <section class="content content_overflow">
      <table class="table table_sticky">
        <thead class="table__header">
          <tr>
            <th class="cell_sticky cell_sticky_top cell_border_t cell_border_bb"><a href="#" class="table__sort">ID <i class="lnir lnir-chevron-down"></i></a></th>
            <th class="cell_sticky cell_sticky_top cell_border_t cell_border_bb cell_border_rr"><a href="#" class="table__sort">名前</a></th>
            <th class="cell_sticky cell_sticky_top cell_border_t cell_border_bb"><a href="#" class="table__sort">状態</a></th>
            <th class="cell_sticky cell_sticky_top cell_border_t cell_border_bb"><a href="#" class="table__sort">メールアドレス</a></th>
            <th class="cell_sticky cell_sticky_top cell_border_t cell_border_bb"><a href="#" class="table__sort">価格</a></th>
            <th class="cell_sticky cell_sticky_top cell_border_t cell_border_bb"><a href="#" class="table__sort">更新日時</a></th>
            <th class="cell_sticky cell_sticky_top cell_border_t cell_border_bb">メモ</th>
            <th class="cell_sticky cell_sticky_top cell_border_t cell_border_bb cell_border_l"></th>
          </tr>
        </thead>
        <tbody>
          <tr class="row row_hoverable">
            <td class="cell_border_b">1234</td>
            <td class="cell_border_b cell_border_rr">GETTO CSS</td>
            <td class="cell_border_b cell_center"><span class="label label_gray">仮</span></td>
            <td class="cell_border_b"><EMAIL></td>
            <td class="cell_border_b cell_nokern cell_right">1,200</td>
            <td class="cell_border_b cell_nokern"><small>2020/06/19 08:03</small></td>
            <td class="cell_border_b">simple admin theme</td>
            <td class="cell_border_b cell_border_l"><a href="#"><i class="lnir lnir-pencil-alt"></i> 編集</a></td>
          </tr>
          <tr class="row row_edit">
            <td class="cell_border_b">123</td>
            <td class="cell_border_b cell_border_rr">
              <section class="form form_error">
                <input type="text" value="GETTO CSS" id="work-name">
                <p class="form__help">識別のための作業名</p><commit_msg>fix: form message<commit_after><script lang="ts">
import { Ref, ref, reactive, watch } from "vue";

type State = {
  is_modified: boolean,
  is_searching: boolean,
};

export default {
  setup() {
    const delay = 2.5 * 1000;

    const state = reactive<State>({
      is_modified: false,
      is_searching: false,
    });

    function search() {
      state.is_searching = true;

      setTimeout(() => {
        state.is_searching = false;
      }, delay);
    }

    return {
      state,
      search,
    };
  }
};
</script>

<template>

<article class="layout__main">
  <header class="main__header">
    <h1 class="main__title">一覧</h1>
    <p class="main__breadcrumb">
      <a href="#menu">MAIN</a>
      <span class="main__breadcrumb__separator"><i class="lnir lnir-chevron-right"></i></span>
      <a href="/dist/list.html"><i class="lnir lnir-list"></i> 一覧</a>
    </p>
  </header>
  <section class="main__body">
    <form class="box box_fill">
      <section class="box__body">
        <button v-if="!state.is_searching" class="button button_search" :class="{ button_modified: state.is_modified }" @click.prevent="search"><i class="lnir lnir-reload"></i> 再読み込み</button>
        <button v-else class="button button_searching" @click.prevent="search"><i class="lnir lnir-spinner-11 lnir-is-spinning"></i> 読み込み中</button>
      </section>
    </form>
    <section class="content">
      <select class="pager">
        <option>1 / 10 ページ</option>
        <option>2 / 10 ページ</option>
        <option>3 / 10 ページ</option>
        <option>4 / 10 ページ</option>
        <option>5 / 10 ページ</option>
        <option>6 / 10 ページ</option>
        <option>7 / 10 ページ</option>
        <option>8 / 10 ページ</option>
        <option>9 / 10 ページ</option>
        <option>10 / 10 ページ</option>
      </select>
      <span>1 ～ 1000 件 / 全 5000 件中</span>
    </section>
    <section class="content content_overflow">
      <table class="table table_sticky">
        <thead class="table__header">
          <tr>
            <th class="cell_sticky cell_sticky_top cell_border_t cell_border_bb"><a href="#" class="table__sort">ID <i class="lnir lnir-chevron-down"></i></a></th>
            <th class="cell_sticky cell_sticky_top cell_border_t cell_border_bb cell_border_rr"><a href="#" class="table__sort">名前</a></th>
            <th class="cell_sticky cell_sticky_top cell_border_t cell_border_bb"><a href="#" class="table__sort">状態</a></th>
            <th class="cell_sticky cell_sticky_top cell_border_t cell_border_bb"><a href="#" class="table__sort">メールアドレス</a></th>
            <th class="cell_sticky cell_sticky_top cell_border_t cell_border_bb"><a href="#" class="table__sort">価格</a></th>
            <th class="cell_sticky cell_sticky_top cell_border_t cell_border_bb"><a href="#" class="table__sort">更新日時</a></th>
            <th class="cell_sticky cell_sticky_top cell_border_t cell_border_bb">メモ</th>
            <th class="cell_sticky cell_sticky_top cell_border_t cell_border_bb cell_border_l"></th>
          </tr>
        </thead>
        <tbody>
          <tr class="row row_hoverable">
            <td class="cell_border_b">1234</td>
            <td class="cell_border_b cell_border_rr">GETTO CSS</td>
            <td class="cell_border_b cell_center"><span class="label label_gray">仮</span></td>
            <td class="cell_border_b"><EMAIL></td>
            <td class="cell_border_b cell_nokern cell_right">1,200</td>
            <td class="cell_border_b cell_nokern"><small>2020/06/19 08:03</small></td>
            <td class="cell_border_b">simple admin theme</td>
            <td class="cell_border_b cell_border_l"><a href="#"><i class="lnir lnir-pencil-alt"></i> 編集</a></td>
          </tr>
          <tr class="row row_edit">
            <td class="cell_border_b">123</td>
            <td class="cell_border_b cell_border_rr">
              <section class="form form_error">
                <input type="text" value="" id="work-name">
                <p class="form__message">作業名は必須です</p>
                <p class="form__help">識別のための作業名</p>
{'fraction_non_alphanumeric': 0.1609295389586181, 'fraction_numerical': 0.018143407481048836, 'mean_word_length': 2.9547911547911547, 'pattern_counts': {'":': 0, '<': 269, '<?xml version=': 0, '>': 271, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1719424', 'n_tokens_mistral': 2959, 'n_tokens_neox': 2827, 'n_words': 516}