<commit_before><template>
  <div class="container">
    <div class="mb-3 row">
      <div class="col-12 mb-3">
        <p class="mb-1">
          Here you can interactively play and test components with a fresh vue instance. Please
          refer to the <router-link to="/docs">Docs</router-link> section for more info about
          available tags and usage.
        </p>
        <p class="mb-1">
          <strong>TIP:</strong> You can clone docs repo, to hack and develop components. changes
          will be reflected and hot-reloaded instantly.
        </p>
      </div>
      <div class="col-12">
        <div
          v-if="loading"
          class="alert alert-info show text-center"
        >
          <strong>Loading JavaScript Compiler...</strong>
        </div>
        <div
          v-else
          class="clearfix"
        >
          <form
            class="d-inline-block ml-2 mr-0 p-0 float-right"
            method="post"
            action="https://jsfiddle.net/api/post/library/pure/"
            target="_blank"
          >
            <input type="hidden" name="html" :value="fiddle_html">
            <input type="hidden" name="js" :value="fiddle_js">
            <input type="hidden" name="resources" :value="fiddle_dependencies">
            <input type="hidden" name="css" value="body { padding: 1rem; }">
            <input type="hidden" name="js_wrap" value="l">
            <b-btn size="sm" type="submit" :disabled="!isOk">Export to JSFiddle</b-btn>
          </form>
          <b-btn size="sm" variant="danger" :disabled="isDefault" @click="reset">
            Reset to default
          </b-btn>
        </div>
      </div>
    </div>

    <transition-group class="row" tag="div" name="flip">
      <div key="A" :class="full ? 'col-12' : 'col'">
        <transition-group class="row" tag="div" name="flip">
          <div key="A1" :class="`col-md-${vertical && !full ? 6 : 12} col-sm-12`">
            <!--Template-->
            <div class="card mt-2">
              <div class="card-header card-outline-info">
                <span>Template</span>
                <b-btn
                  size="sm"
                  variant="outline-info"
                  class="float-right d-none d-md-inline-block"
                  @click="toggleFull"
                >
                  <span>{{ full ? 'Split' : 'Full' }}</span>
                </b-btn>
              </div>
              <codemirror v-model="html" mode="htmlmixed" />
            </div>
          </div>
          <div key="A2" :class="`col-md-${vertical && !full ? 6 : 12} col-sm-12`">
            <!--JS-->
            <div class="card mt-2">
              <div class="card-header card-outline-warning">
                <span>JS</span>
                <b-btn
                  size="sm"
                  variant="outline-info"
                  class="float-right d-none d-md-inline-block"
                  @click="toggleFull"
                >
                  <span>{{ full ? 'Split' : 'Full' }}</span>
                </b-btn>
              </div>
              <codemirror v-model="js" mode="javascript" />
            </div>
          </div>
        </transition-group>
      </div>

      <div key="B" :class="`col-md-${vertical || full ? 12 : 6} col-sm-12`">
        <!--Result-->
        <div class="card mt-2">
          <div class="card-header card-outline-success">
            <span>Result</span>
            <b-btn
              v-if="!full"
              size="sm"
              variant="outline-info"
              class="float-right d-none d-md-inline-block"
              @click="toggleVertical"
            >
              <span>{{ vertical ? 'Horizontal' : 'Vertical' }}</span>
            </b-btn>
          </div>
          <div ref="result" class="card-body" />
        </div>

        <!--Console-->
        <div class="card mt-2">
          <div class="card-header card-outline-secondary">
            <span>Console</span>
            <b-btn
              v-if="messages.length"
              size="sm"
              variant="outline-danger"
              class="float-right"
              @click="clear"
            >
              <span>Clear</span>
            </b-btn>
          </div>
          <transition-group
            tag="ul"
            name="flip-list"
            class="list-group list-group-flush play-log"
          >
            <li
              v-if="!messages.length"
              key="empty-console"
              class="list-group-item"
            >
              &nbsp;
            </li>
            <li
              v-for="msg in messages"
              :key="`console-${msg[2]}`"
              class="list-group-item py-2 d-flex"
            >
              <b-badge :variant="msg[0]" class="mr-1" style="font-size:90%;">
                {{ msg[0] === 'danger' ? 'error' : msg[0] === 'warning' ? 'warn' : 'log' }}
              </b-badge>
              <div
                :class="[`text-${msg[0]}`, 'text-monospace', 'small']"
                style="white-space: pre-wrap;"
              >
                {{ msg[1] }}
              </div>
            </li>
          </transition-group>
        </div>
      </div>
    </transition-group>
  </div>
</template>

<style scoped>
.flip-move {
  transition: all 0.3s;
}
.play-log .list-group-item {
  transition: all 0.3s;
}
.flip-list-enter,
.flip-list-leave-to {<commit_msg>chore(playground): remove excess whitespace from playground log (#2613)<commit_after><template>
  <div class="container">
    <div class="mb-3 row">
      <div class="col-12 mb-3">
        <p class="mb-1">
          Here you can interactively play and test components with a fresh vue instance. Please
          refer to the <router-link to="/docs">Docs</router-link> section for more info about
          available tags and usage.
        </p>
        <p class="mb-1">
          <strong>TIP:</strong> You can clone docs repo, to hack and develop components. changes
          will be reflected and hot-reloaded instantly.
        </p>
      </div>
      <div class="col-12">
        <div
          v-if="loading"
          class="alert alert-info show text-center"
        >
          <strong>Loading JavaScript Compiler...</strong>
        </div>
        <div
          v-else
          class="clearfix"
        >
          <form
            class="d-inline-block ml-2 mr-0 p-0 float-right"
            method="post"
            action="https://jsfiddle.net/api/post/library/pure/"
            target="_blank"
          >
            <input type="hidden" name="html" :value="fiddle_html">
            <input type="hidden" name="js" :value="fiddle_js">
            <input type="hidden" name="resources" :value="fiddle_dependencies">
            <input type="hidden" name="css" value="body { padding: 1rem; }">
            <input type="hidden" name="js_wrap" value="l">
            <b-btn size="sm" type="submit" :disabled="!isOk">Export to JSFiddle</b-btn>
          </form>
          <b-btn size="sm" variant="danger" :disabled="isDefault" @click="reset">
            Reset to default
          </b-btn>
        </div>
      </div>
    </div>

    <transition-group class="row" tag="div" name="flip">
      <div key="A" :class="full ? 'col-12' : 'col'">
        <transition-group class="row" tag="div" name="flip">
          <div key="A1" :class="`col-md-${vertical && !full ? 6 : 12} col-sm-12`">
            <!--Template-->
            <div class="card mt-2">
              <div class="card-header card-outline-info">
                <span>Template</span>
                <b-btn
                  size="sm"
                  variant="outline-info"
                  class="float-right d-none d-md-inline-block"
                  @click="toggleFull"
                >
                  <span>{{ full ? 'Split' : 'Full' }}</span>
                </b-btn>
              </div>
              <codemirror v-model="html" mode="htmlmixed" />
            </div>
          </div>
          <div key="A2" :class="`col-md-${vertical && !full ? 6 : 12} col-sm-12`">
            <!--JS-->
            <div class="card mt-2">
              <div class="card-header card-outline-warning">
                <span>JS</span>
                <b-btn
                  size="sm"
                  variant="outline-info"
                  class="float-right d-none d-md-inline-block"
                  @click="toggleFull"
                >
                  <span>{{ full ? 'Split' : 'Full' }}</span>
                </b-btn>
              </div>
              <codemirror v-model="js" mode="javascript" />
            </div>
          </div>
        </transition-group>
      </div>

      <div key="B" :class="`col-md-${vertical || full ? 12 : 6} col-sm-12`">
        <!--Result-->
        <div class="card mt-2">
          <div class="card-header card-outline-success">
            <span>Result</span>
            <b-btn
              v-if="!full"
              size="sm"
              variant="outline-info"
              class="float-right d-none d-md-inline-block"
              @click="toggleVertical"
            >
              <span>{{ vertical ? 'Horizontal' : 'Vertical' }}</span>
            </b-btn>
          </div>
          <div ref="result" class="card-body" />
        </div>

        <!--Console-->
        <div class="card mt-2">
          <div class="card-header card-outline-secondary">
            <span>Console</span>
            <b-btn
              v-if="messages.length"
              size="sm"
              variant="outline-danger"
              class="float-right"
              @click="clear"
            >
              <span>Clear</span>
            </b-btn>
          </div>
          <transition-group
            tag="ul"
            name="flip-list"
            class="list-group list-group-flush play-log"
          >
            <li
              v-if="!messages.length"
              key="empty-console"
              class="list-group-item"
            >
              &nbsp;
            </li>
            <li
              v-for="msg in messages"
              :key="`console-${msg[2]}`"
              class="list-group-item py-2 d-flex"
            >
              <b-badge
                :variant="msg[0]"
                class="mr-1"
                style="font-size:90%;"
              >
                {{ msg[0] === 'danger' ? 'error' : msg[0] === 'warning' ? 'warn' : 'log' }}
              </b-badge>
              <!-- prettier-ignore-start -->
              <div
                :class="[`text-${msg[0]}`, 'text-monospace', 'small']"
                style="white-space: pre-wrap;"
              >{{ msg[1] }}</div>
              <!-- prettier-ignore-end -->
            </li>
          </transition-group>
        </div>
      </div>
    </transition-group>
  </div>
</template>

<style scoped>
.flip-move {
  transition: all 0.3s;
}
.play-log .list-group-item {
  transition: all 0.3s;
}
.flip-list-enter,
.flip-list-leave-to {
{'fraction_non_alphanumeric': 0.16388051520964647, 'fraction_numerical': 0.009317621266100301, 'mean_word_length': 1.3661119515885023, 'pattern_counts': {'":': 0, '<': 215, '<?xml version=': 0, '>': 215, 'https://': 2, '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': '5131129', 'n_tokens_mistral': 3342, 'n_tokens_neox': 3201, 'n_words': 651}