chore: fix linting issues

chore: fix linting issues

<template>

      <q-item tag="label" dark class="q-my-sm bg-primary shadow-1" style="border-radius: 30px">
        <q-item-section>
          <q-item-label>Dark background</q-item-label>
        </q-item-section>

        <q-item-section side>
          <q-toggle v-model="dark" color="accent" :dark="dark" />
        </q-item-section>
      </q-item>

      <q-item tag="label" dark class="q-my-sm bg-secondary shadow-1" style="border-radius: 30px">
        <q-item-section>
          <q-item-label>Separator</q-item-label>
        </q-item-section>

        <q-item-section side>
          <q-toggle v-model="separator" color="accent" :dark="dark" />
        </q-item-section>
      </q-item>

      <q-list bordered padding class="q-my-md" :dark="dark" :separator="separator">
        <q-item clickable class="text-primary" @click="onClick">
          <q-item-section>Single line item</q-item-section>
        </q-item>

        <q-item clickable>
          <q-item-section>Single line item longer text</q-item-section>
        </q-item>

        <q-item clickable v-ripple @click="onClick">
          <q-item-section avatar>
            <q-icon color="primary" name="bluetooth" />
          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>

        <q-item clickable v-ripple>
          <q-item-section avatar>
            <q-icon color="primary" name="img:https://cdn.quasar-framework.org/logo/svg/quasar-logo.svg" />
          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>

        <q-item clickable v-ripple>
          <q-item-section avatar>
            <q-icon name="signal_wifi_off" />
          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>

        <q-item clickable inset>
          <q-item-section>Inset list item</q-item-section>
        </q-item>

        <q-item clickable>
          <q-item-section avatar>
            <q-avatar color="primary" text-color="white" icon="bluetooth" />
          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>

        <q-item clickable>
          <q-item-section avatar>
            <q-avatar color="primary" text-color="white" rounded icon="bluetooth" />
          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>

        <q-item clickable>
          <q-item-section avatar>
            <q-avatar>

            </q-avatar>
          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>

        <q-item clickable>
          <q-item-section avatar>
            <q-avatar square>

            </q-avatar>
          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>

        <q-item clickable>
          <q-item-section avatar>
            <q-avatar rounded>

            </q-avatar>
          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>

        <q-item clickable>
          <q-item-section avatar>
            <q-avatar rounded>

            </q-avatar>
          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>

        <q-item clickable>
          <q-item-section thumbnail>

          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>

        <q-item clickable v-ripple>
          <q-item-section>List item</q-item-section>
          <q-item-section thumbnail>

          </q-item-section>
        </q-item>
      </q-list>

        Links

      <q-list bordered class="q-my-md" :dark="dark">
        <q-item to="/" exact>
          <q-item-section avatar>
            <q-icon name="bluetooth" />
          </q-item-section>
          <q-item-section>Inactive link</q-item-section>
        </q-item>

        <q-item to="/" exact disable>
          <q-item-section avatar>
            <q-icon name="bluetooth" />
          </q-item-section>
          <q-item-section>Inactive link - Disabled</q-item-section>
        </q-item>

        <q-item :to="$route.path">
          <q-item-section avatar>
            <q-icon name="signal_wifi_off" />
          </q-item-section>
          <q-item-section>Active link</q-item-section>
        </q-item>

        <q-item to="/" exact>
          <q-item-section avatar>
            <q-icon name="bluetooth" />
          </q-item-section>
          <q-item-section>Inactive link</q-item-section>
        </q-item>

        <q-item :to="$route.path">
          <q-item-section avatar>
            <q-icon name="signal_wifi_off" />
          </q-item-section>
          <q-item-section>Active link</q-item-section>
        </q-item>

        <q-item to="/components/list-item" active-class="my-link">
          <q-item-section avatar>
            <q-icon name="signal_wifi_off" />
          </q-item-section>
          <q-item-section>Customized active link</q-item-section>
        </q-item>
      </q-list>

        Active

      <q-list padding bordered :dark="dark">
        <q-item clickable v-ripple>
          <q-item-section avatar>
            <q-icon name="signal_wifi_off" />
          </q-item-section>
          <q-item-section>Normal</q-item-section>
          <q-item-section side>
            Side
          </q-item-section>
        </q-item>
        <q-item clickable v-ripple active>
          <q-item-section avatar>
            <q-icon name="signal_wifi_off" />
          </q-item-section>
          <q-item-section>Active</q-item-section>
          <q-item-section side>
            Side
          </q-item-section>
        </q-item>
        <q-item clickable v-ripple active active-class="text-orange">
          <q-item-section avatar>
            <q-icon name="signal_wifi_off" />
          </q-item-section>
          <q-item-section>Active, Active Color</q-item-section>
          <q-item-section side>
            Side
          </q-item-section>
        </q-item>
      </q-list>

        Dense

      <q-list dense padding bordered class="q-my-md" :dark="dark">
        <q-item clickable class="text-primary">
          <q-item-section>Single line item</q-item-section>
        </q-item>

        <q-item clickable>
          <q-item-section>Single line item</q-item-section>
        </q-item>

        <q-item clickable>
          <q-item-section>Single line item longer text</q-item-section>
        </q-item>

        <q-item clickable v-ripple>
          <q-item-section avatar>
            <q-icon color="primary" name="bluetooth" />
          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>

        <q-separator spaced :dark="dark" />
        <q-item-label header>
          Dense
        </q-item-label>

        <q-item clickable>
          <q-item-section avatar>
            <q-avatar color="primary" text-color="white" icon="bluetooth" />
          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>

        <q-item clickable>
          <q-item-section avatar>
            <q-avatar color="primary" text-color="white" rounded icon="bluetooth" />
          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>

        <q-item clickable>
          <q-item-section avatar>
            <q-avatar>

            </q-avatar>
          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>

        <q-item clickable>
          <q-item-section avatar>
            <q-avatar square>

            </q-avatar>
          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>

        <q-item clickable>
          <q-item-section avatar>
            <q-avatar rounded>

            </q-avatar>
          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>

        <q-item clickable>
          <q-item-section thumbnail>

          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>
      </q-list>

      <q-list bordered padding class="q-my-md" :dark="dark">
        <q-item>
          <q-item-section>Single line item</q-item-section>
        </q-item>

        <q-item>
          <q-item-section>Single line item longer text</q-item-section>
        </q-item>

        <q-item>
          <q-item-section>List item</q-item-section>
          <q-item-section avatar>
            <q-icon color="primary" name="bluetooth" />
          </q-item-section>
        </q-item>

        <q-item>
          <q-item-section>List item</q-item-section>
          <q-item-section avatar>
            <q-avatar color="primary" text-color="white" icon="bluetooth" />
          </q-item-section>
        </q-item>

        <q-item>
          <q-item-section>List item</q-item-section>
          <q-item-section avatar>
            <q-avatar color="primary" text-color="white" rounded icon="bluetooth" />
          </q-item-section>
        </q-item>

        <q-item>
          <q-item-section>List item</q-item-section>
          <q-item-section avatar>
            <q-avatar>

            </q-avatar>
          </q-item-section>
        </q-item>

        <q-item>
          <q-item-section>List item</q-item-section>
          <q-item-section avatar>
            <q-avatar square>

            </q-avatar>
          </q-item-section>
        </q-item>

        <q-item>
          <q-item-section>List item</q-item-section>
          <q-item-section thumbnail>

          </q-item-section>
        </q-item>
      </q-list>

      <q-list bordered padding class="q-my-md" :dark="dark">
        <q-item>
          <q-item-section>
            <q-item-label overline>
              OVERLINE
            </q-item-label>
            <q-item-label>Single line item</q-item-label>
            <q-item-label caption>
              Secondary line text. Lorem ipsum dolor sit amet, consectetur adipiscit elit.
            </q-item-label>
          </q-item-section>
        </q-item>

        <q-separator spaced :dark="dark" />
        <q-item-label header>
          Section
        </q-item-label>

        <q-item>
          <q-item-section avatar>
            <q-icon color="primary" name="bluetooth" />
          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>

        <q-separator spaced :dark="dark" inset="item" />

        <q-item>
          <q-item-section top avatar>
            <q-avatar color="primary" text-color="white" icon="bluetooth" />
          </q-item-section>

          <q-item-section>
            <q-item-label>Single line item</q-item-label>
            <q-item-label caption>
              Secondary line text. Lorem ipsum dolor sit amet, consectetur adipiscit elit.
            </q-item-label>
          </q-item-section>
        </q-item>

        <q-separator spaced :dark="dark" inset="item" />

        <q-item>
          <q-item-section top avatar>
            <q-avatar color="primary" text-color="white" square icon="bluetooth" />
          </q-item-section>

          <q-item-section>
            <q-item-label>Single line item</q-item-label>
            <q-item-label caption>
              Secondary line text. Lorem ipsum dolor sit amet, consectetur adipiscit elit.
            </q-item-label>
          </q-item-section>
        </q-item>

        <q-separator spaced :dark="dark" inset="item" />

        <q-item>
          <q-item-section top avatar>
            <q-avatar>

            </q-avatar>
          </q-item-section>

          <q-item-section>
            <q-item-label>Single line item</q-item-label>
            <q-item-label caption>
              Secondary line text. Lorem ipsum dolor sit amet, consectetur adipiscit elit.
            </q-item-label>
          </q-item-section>
        </q-item>

        <q-separator spaced :dark="dark" inset="item" />

        <q-item>
          <q-item-section top avatar>
            <q-avatar square>

            </q-avatar>
          </q-item-section>

          <q-item-section>
            <q-item-label>Single line item</q-item-label>
            <q-item-label caption>
              Secondary line text. Lorem ipsum dolor sit amet, consectetur adipiscit elit.
            </q-item-label>
          </q-item-section>
        </q-item>

        <q-separator spaced :dark="dark" inset="item-thumbnail" />

        <q-item>
          <q-item-section thumbnail>

          </q-item-section>

          <q-item-section>
            <q-item-label>Single line item</q-item-label>
            <q-item-label caption>
              Secondary line text. Lorem ipsum dolor sit amet, consectetur adipiscit elit.
            </q-item-label>
          </q-item-section>
        </q-item>
      </q-list>

      <q-list bordered padding class="q-my-md" :dark="dark">
        <q-item>
          <q-item-section>
            <q-item-label overline>
              OVERLINE
            </q-item-label>
            <q-item-label>Single line item</q-item-label>
            <q-item-label caption>
              Secondary line text. Lorem ipsum dolor sit amet, consectetur adipiscit elit.
            </q-item-label>
          </q-item-section>

          <q-item-section side top>
            <q-item-label caption>
              5 min ago
            </q-item-label>
          </q-item-section>
        </q-item>

        <q-separator spaced :dark="dark" />
        <q-item-label header>
          Section
        </q-item-label>

        <q-item>
          <q-item-section avatar>
            <q-icon color="primary" name="bluetooth" />
          </q-item-section>
          <q-item-section>List item</q-item-section>
          <q-item-section side>
            <q-item-label caption>
              meta
            </q-item-label>
          </q-item-section>
        </q-item>

        <q-separator spaced :dark="dark" inset="item" />

        <q-item>
          <q-item-section top avatar>
            <q-avatar color="primary" text-color="white" icon="bluetooth" />
          </q-item-section>

          <q-item-section>
            <q-item-label>Single line item</q-item-label>
            <q-item-label caption lines="2">
              Secondary line text. Lorem ipsum dolor sit amet, consectetur adipiscit elit.
            </q-item-label>
          </q-item-section>

          <q-item-section side top>
            <q-item-label caption>
              5 min ago
            </q-item-label>
            <q-icon name="star" color="yellow" />
          </q-item-section>
        </q-item>

        <q-separator spaced :dark="dark" inset="item" />

        <q-item>
          <q-item-section top avatar>
            <q-avatar color="primary" text-color="white" square icon="bluetooth" />
          </q-item-section>

          <q-item-section>
            <q-item-label>Single line item</q-item-label>
            <q-item-label caption>
              Secondary line text. Lorem ipsum dolor sit amet, consectetur adipiscit elit.
            </q-item-label>
          </q-item-section>

          <q-item-section side top>
            <q-item-label caption>
              meta
            </q-item-label>
          </q-item-section>
        </q-item>

        <q-separator spaced :dark="dark" inset="item" />

        <q-item>
          <q-item-section top avatar>
            <q-avatar>

            </q-avatar>
          </q-item-section>

          <q-item-section>
            <q-item-label>Single line item</q-item-label>
            <q-item-label caption>
              Secondary line text. Lorem ipsum dolor sit amet, consectetur adipiscit elit.
            </q-item-label>
          </q-item-section>

          <q-item-section side top>
            <q-chip color="primary" text-color="white" dense square>
              10k
            </q-chip>
          </q-item-section>
        </q-item>

        <q-separator spaced :dark="dark" inset="item" />

        <q-item>
          <q-item-section top avatar>
            <q-avatar rounded>

            </q-avatar>
          </q-item-section>

          <q-item-section>
            <q-item-label>Single line item</q-item-label>
            <q-item-label caption>
              Secondary line text. Lorem ipsum dolor sit amet, consectetur adipiscit elit.
            </q-item-label>
          </q-item-section>

          <q-item-section side top>
            <q-item-label caption>
              meta
            </q-item-label>
          </q-item-section>
        </q-item>

        <q-separator spaced :dark="dark" />

        <q-item>
          <q-item-section top thumbnail class="q-ml-none">

          </q-item-section>

          <q-item-section>
            <q-item-label>Single line item</q-item-label>
            <q-item-label caption>
              Secondary line text. Lorem ipsum dolor sit amet, consectetur adipiscit elit.
            </q-item-label>
          </q-item-section>

          <q-item-section side top>
            <q-item-label caption>
              meta
            </q-item-label>
          </q-item-section>
        </q-item>
      </q-list>

      <q-list bordered padding :dark="dark">
        <q-item-label header>
          User Controls
        </q-item-label>

        <q-item>
          <q-item-section>
            <q-item-label>Content filtering</q-item-label>
            <q-item-label caption>
              Set the content filtering level to restrict
              apps that can be downloaded
            </q-item-label>
          </q-item-section>
        </q-item>

        <q-item>
          <q-item-section>
            <q-item-label>Password</q-item-label>
            <q-item-label caption>
              Require password for purchase or use
              password to restrict purchase
            </q-item-label>
          </q-item-section>
        </q-item>

        <q-separator spaced :dark="dark" />
        <q-item-label header>
          General
        </q-item-label>

        <q-item tag="label">
          <q-item-section side>
            <q-checkbox :dark="dark" v-model="check1" />
          </q-item-section>

          <q-item-section>
            <q-item-label>Notifications</q-item-label>
            <q-item-label caption>
              Notify me about updates to apps or games that I downloaded
            </q-item-label>
          </q-item-section>
        </q-item>

        <q-item tag="label">
          <q-item-section side>
            <q-checkbox :dark="dark" v-model="check2" />
          </q-item-section>

          <q-item-section>
            <q-item-label>Sound</q-item-label>
            <q-item-label caption>
              Auto-update apps at anytime. Data charges may apply
            </q-item-label>
          </q-item-section>
        </q-item>

        <q-item tag="label">
          <q-item-section side>
            <q-checkbox :dark="dark" v-model="check3" />
          </q-item-section>

          <q-item-section>
            <q-item-label>Auto-add widgets</q-item-label>
            <q-item-label caption>
              Automatically add home screen widgets
            </q-item-label>
          </q-item-section>
        </q-item>
      </q-list>

      <q-item-label header>
        Google Inbox style
      </q-item-label>
      <q-list class="shadow-1 q-pa-none">
        <q-item>
          <q-item-section avatar top>
            <q-icon name="fab fa-github" color="black" size="34px" />
          </q-item-section>

          <q-item-section top class="col-2 gt-sm">
            <q-item-label class="q-mt-sm">
              Github
            </q-item-label>
          </q-item-section>

          <q-item-section top>
            <q-item-label lines="1">
              [quasarframework/quasar]
               - Github repository
            </q-item-label>
            <q-item-label caption lines="1">
              @rstoenescu in #3: > Generic type parameter for props
            </q-item-label>

              Open in Github

          </q-item-section>

          <q-item-section top class="col-auto">

              <q-btn size="12px" flat dense round icon="delete" />
              <q-btn size="12px" flat dense round icon="done" />
              <q-btn size="12px" flat dense round icon="more_vert" />

          </q-item-section>
        </q-item>

        <q-separator />

        <q-item>
          <q-item-section avatar top>
            <q-icon name="fab fa-github" color="black" size="34px" />
          </q-item-section>

          <q-item-section top class="col-2 gt-sm">
            <q-item-label class="q-mt-sm">
              Github
            </q-item-label>
          </q-item-section>

          <q-item-section top>
            <q-item-label lines="1">
              [quasarframework/quasar-cli]
               - Github repository
            </q-item-label>
            <q-item-label caption lines="1">
              @rstoenescu in #1: > The build system
            </q-item-label>

              Open in Github

          </q-item-section>

          <q-item-section top class="col-auto">

              <q-btn size="12px" flat dense round icon="delete" />
              <q-btn size="12px" flat dense round icon="done" />
              <q-btn size="12px" flat dense round icon="more_vert" />

          </q-item-section>
        </q-item>
      </q-list>

      <q-list class="q-my-sm" bordered style="max-width: 100px">
        <q-item clickable v-ripple>
          <q-item-section avatar>
            <q-avatar color="primary" text-color="white">
              R
            </q-avatar>
          </q-item-section>

          <q-item-section>
            <q-item-label lines="2">
              Ruddy Jedrzej
            </q-item-label>
            <q-item-label caption lines="1">
              VERRRYY LOOONNNGGGGGG TEXTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT
            </q-item-label>
          </q-item-section>

          <q-item-section side>
            <q-item-label lines="1">
              Ruddy Jedrzej
            </q-item-label>
            <q-item-label caption lines="1">
              VERRRYY LOOONNNGGGGGG TEXTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT
            </q-item-label>
          </q-item-section>
        </q-item>
      </q-list>

</template>

<template>

      <q-item tag="label" dark class="q-my-sm bg-primary shadow-1" style="border-radius: 30px">
        <q-item-section>
          <q-item-label>Dark background</q-item-label>
        </q-item-section>

        <q-item-section side>
          <q-toggle v-model="dark" color="accent" :dark="dark" />
        </q-item-section>
      </q-item>

      <q-item tag="label" dark class="q-my-sm bg-secondary shadow-1" style="border-radius: 30px">
        <q-item-section>
          <q-item-label>Separator</q-item-label>
        </q-item-section>

        <q-item-section side>
          <q-toggle v-model="separator" color="accent" :dark="dark" />
        </q-item-section>
      </q-item>

      <q-list bordered padding class="q-my-md" :dark="dark" :separator="separator">
        <q-item clickable class="text-primary" @click="onClick">
          <q-item-section>Single line item</q-item-section>
        </q-item>

        <q-item clickable>
          <q-item-section>Single line item longer text</q-item-section>
        </q-item>

        <q-item clickable v-ripple @click="onClick">
          <q-item-section avatar>
            <q-icon color="primary" name="bluetooth" />
          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>

        <q-item clickable v-ripple>
          <q-item-section avatar>
            <q-icon color="primary" name="img:https://cdn.quasar-framework.org/logo/svg/quasar-logo.svg" />
          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>

        <q-item clickable v-ripple>
          <q-item-section avatar>
            <q-icon name="signal_wifi_off" />
          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>

        <q-item clickable inset>
          <q-item-section>Inset list item</q-item-section>
        </q-item>

        <q-item clickable>
          <q-item-section avatar>
            <q-avatar color="primary" text-color="white" icon="bluetooth" />
          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>

        <q-item clickable>
          <q-item-section avatar>
            <q-avatar color="primary" text-color="white" rounded icon="bluetooth" />
          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>

        <q-item clickable>
          <q-item-section avatar>
            <q-avatar>

            </q-avatar>
          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>

        <q-item clickable>
          <q-item-section avatar>
            <q-avatar square>

            </q-avatar>
          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>

        <q-item clickable>
          <q-item-section avatar>
            <q-avatar rounded>

            </q-avatar>
          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>

        <q-item clickable>
          <q-item-section avatar>
            <q-avatar rounded>

            </q-avatar>
          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>

        <q-item clickable>
          <q-item-section thumbnail>

          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>

        <q-item clickable v-ripple>
          <q-item-section>List item</q-item-section>
          <q-item-section thumbnail>

          </q-item-section>
        </q-item>
      </q-list>

        Links

      <q-list bordered class="q-my-md" :dark="dark">
        <q-item to="/" exact>
          <q-item-section avatar>
            <q-icon name="bluetooth" />
          </q-item-section>
          <q-item-section>Inactive link</q-item-section>
        </q-item>

        <q-item to="/" exact disable>
          <q-item-section avatar>
            <q-icon name="bluetooth" />
          </q-item-section>
          <q-item-section>Inactive link - Disabled</q-item-section>
        </q-item>

        <q-item :to="$route.path">
          <q-item-section avatar>
            <q-icon name="signal_wifi_off" />
          </q-item-section>
          <q-item-section>Active link</q-item-section>
        </q-item>

        <q-item to="/" exact>
          <q-item-section avatar>
            <q-icon name="bluetooth" />
          </q-item-section>
          <q-item-section>Inactive link</q-item-section>
        </q-item>

        <q-item :to="$route.path">
          <q-item-section avatar>
            <q-icon name="signal_wifi_off" />
          </q-item-section>
          <q-item-section>Active link</q-item-section>
        </q-item>

        <q-item to="/components/list-item" active-class="my-link">
          <q-item-section avatar>
            <q-icon name="signal_wifi_off" />
          </q-item-section>
          <q-item-section>Customized active link</q-item-section>
        </q-item>
      </q-list>

        Active

      <q-list padding bordered :dark="dark">
        <q-item clickable v-ripple>
          <q-item-section avatar>
            <q-icon name="signal_wifi_off" />
          </q-item-section>
          <q-item-section>Normal</q-item-section>
          <q-item-section side>
            Side
          </q-item-section>
        </q-item>
        <q-item clickable v-ripple active>
          <q-item-section avatar>
            <q-icon name="signal_wifi_off" />
          </q-item-section>
          <q-item-section>Active</q-item-section>
          <q-item-section side>
            Side
          </q-item-section>
        </q-item>
        <q-item clickable v-ripple active active-class="text-orange">
          <q-item-section avatar>
            <q-icon name="signal_wifi_off" />
          </q-item-section>
          <q-item-section>Active, Active Color</q-item-section>
          <q-item-section side>
            Side
          </q-item-section>
        </q-item>
      </q-list>

        Dense

      <q-list dense padding bordered class="q-my-md" :dark="dark">
        <q-item clickable class="text-primary">
          <q-item-section>Single line item</q-item-section>
        </q-item>

        <q-item clickable>
          <q-item-section>Single line item</q-item-section>
        </q-item>

        <q-item clickable>
          <q-item-section>Single line item longer text</q-item-section>
        </q-item>

        <q-item clickable v-ripple>
          <q-item-section avatar>
            <q-icon color="primary" name="bluetooth" />
          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>

        <q-separator spaced :dark="dark" />
        <q-item-label header>
          Dense
        </q-item-label>

        <q-item clickable>
          <q-item-section avatar>
            <q-avatar color="primary" text-color="white" icon="bluetooth" />
          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>

        <q-item clickable>
          <q-item-section avatar>
            <q-avatar color="primary" text-color="white" rounded icon="bluetooth" />
          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>

        <q-item clickable>
          <q-item-section avatar>
            <q-avatar>

            </q-avatar>
          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>

        <q-item clickable>
          <q-item-section avatar>
            <q-avatar square>

            </q-avatar>
          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>

        <q-item clickable>
          <q-item-section avatar>
            <q-avatar rounded>

            </q-avatar>
          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>

        <q-item clickable>
          <q-item-section thumbnail>

          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>
      </q-list>

      <q-list bordered padding class="q-my-md" :dark="dark">
        <q-item>
          <q-item-section>Single line item</q-item-section>
        </q-item>

        <q-item>
          <q-item-section>Single line item longer text</q-item-section>
        </q-item>

        <q-item>
          <q-item-section>List item</q-item-section>
          <q-item-section avatar>
            <q-icon color="primary" name="bluetooth" />
          </q-item-section>
        </q-item>

        <q-item>
          <q-item-section>List item</q-item-section>
          <q-item-section avatar>
            <q-avatar color="primary" text-color="white" icon="bluetooth" />
          </q-item-section>
        </q-item>

        <q-item>
          <q-item-section>List item</q-item-section>
          <q-item-section avatar>
            <q-avatar color="primary" text-color="white" rounded icon="bluetooth" />
          </q-item-section>
        </q-item>

        <q-item>
          <q-item-section>List item</q-item-section>
          <q-item-section avatar>
            <q-avatar>

            </q-avatar>
          </q-item-section>
        </q-item>

        <q-item>
          <q-item-section>List item</q-item-section>
          <q-item-section avatar>
            <q-avatar square>

            </q-avatar>
          </q-item-section>
        </q-item>

        <q-item>
          <q-item-section>List item</q-item-section>
          <q-item-section thumbnail>

          </q-item-section>
        </q-item>
      </q-list>

      <q-list bordered padding class="q-my-md" :dark="dark">
        <q-item>
          <q-item-section>
            <q-item-label overline>
              OVERLINE
            </q-item-label>
            <q-item-label>Single line item</q-item-label>
            <q-item-label caption>
              Secondary line text. Lorem ipsum dolor sit amet, consectetur adipiscit elit.
            </q-item-label>
          </q-item-section>
        </q-item>

        <q-separator spaced :dark="dark" />
        <q-item-label header>
          Section
        </q-item-label>

        <q-item>
          <q-item-section avatar>
            <q-icon color="primary" name="bluetooth" />
          </q-item-section>
          <q-item-section>List item</q-item-section>
        </q-item>

        <q-separator spaced :dark="dark" inset="item" />

        <q-item>
          <q-item-section top avatar>
            <q-avatar color="primary" text-color="white" icon="bluetooth" />
          </q-item-section>

          <q-item-section>
            <q-item-label>Single line item</q-item-label>
            <q-item-label caption>
              Secondary line text. Lorem ipsum dolor sit amet, consectetur adipiscit elit.
            </q-item-label>
          </q-item-section>
        </q-item>

        <q-separator spaced :dark="dark" inset="item" />

        <q-item>
          <q-item-section top avatar>
            <q-avatar color="primary" text-color="white" square icon="bluetooth" />
          </q-item-section>

          <q-item-section>
            <q-item-label>Single line item</q-item-label>
            <q-item-label caption>
              Secondary line text. Lorem ipsum dolor sit amet, consectetur adipiscit elit.
            </q-item-label>
          </q-item-section>
        </q-item>

        <q-separator spaced :dark="dark" inset="item" />

        <q-item>
          <q-item-section top avatar>
            <q-avatar>

            </q-avatar>
          </q-item-section>

          <q-item-section>
            <q-item-label>Single line item</q-item-label>
            <q-item-label caption>
              Secondary line text. Lorem ipsum dolor sit amet, consectetur adipiscit elit.
            </q-item-label>
          </q-item-section>
        </q-item>

        <q-separator spaced :dark="dark" inset="item" />

        <q-item>
          <q-item-section top avatar>
            <q-avatar square>

            </q-avatar>
          </q-item-section>

          <q-item-section>
            <q-item-label>Single line item</q-item-label>
            <q-item-label caption>
              Secondary line text. Lorem ipsum dolor sit amet, consectetur adipiscit elit.
            </q-item-label>
          </q-item-section>
        </q-item>

        <q-separator spaced :dark="dark" inset="item-thumbnail" />

        <q-item>
          <q-item-section thumbnail>

          </q-item-section>

          <q-item-section>
            <q-item-label>Single line item</q-item-label>
            <q-item-label caption>
              Secondary line text. Lorem ipsum dolor sit amet, consectetur adipiscit elit.
            </q-item-label>
          </q-item-section>
        </q-item>
      </q-list>

      <q-list bordered padding class="q-my-md" :dark="dark">
        <q-item>
          <q-item-section>
            <q-item-label overline>
              OVERLINE
            </q-item-label>
            <q-item-label>Single line item</q-item-label>
            <q-item-label caption>
              Secondary line text. Lorem ipsum dolor sit amet, consectetur adipiscit elit.
            </q-item-label>
          </q-item-section>

          <q-item-section side top>
            <q-item-label caption>
              5 min ago
            </q-item-label>
          </q-item-section>
        </q-item>

        <q-separator spaced :dark="dark" />
        <q-item-label header>
          Section
        </q-item-label>

        <q-item>
          <q-item-section avatar>
            <q-icon color="primary" name="bluetooth" />
          </q-item-section>
          <q-item-section>List item</q-item-section>
          <q-item-section side>
            <q-item-label caption>
              meta
            </q-item-label>
          </q-item-section>
        </q-item>

        <q-separator spaced :dark="dark" inset="item" />

        <q-item>
          <q-item-section top avatar>
            <q-avatar color="primary" text-color="white" icon="bluetooth" />
          </q-item-section>

          <q-item-section>
            <q-item-label>Single line item</q-item-label>
            <q-item-label caption lines="2">
              Secondary line text. Lorem ipsum dolor sit amet, consectetur adipiscit elit.
            </q-item-label>
          </q-item-section>

          <q-item-section side top>
            <q-item-label caption>
              5 min ago
            </q-item-label>
            <q-icon name="star" color="yellow" />
          </q-item-section>
        </q-item>

        <q-separator spaced :dark="dark" inset="item" />

        <q-item>
          <q-item-section top avatar>
            <q-avatar color="primary" text-color="white" square icon="bluetooth" />
          </q-item-section>

          <q-item-section>
            <q-item-label>Single line item</q-item-label>
            <q-item-label caption>
              Secondary line text. Lorem ipsum dolor sit amet, consectetur adipiscit elit.
            </q-item-label>
          </q-item-section>

          <q-item-section side top>
            <q-item-label caption>
              meta
            </q-item-label>
          </q-item-section>
        </q-item>

        <q-separator spaced :dark="dark" inset="item" />

        <q-item>
          <q-item-section top avatar>
            <q-avatar>

            </q-avatar>
          </q-item-section>

          <q-item-section>
            <q-item-label>Single line item</q-item-label>
            <q-item-label caption>
              Secondary line text. Lorem ipsum dolor sit amet, consectetur adipiscit elit.
            </q-item-label>
          </q-item-section>

          <q-item-section side top>
            <q-chip color="primary" text-color="white" dense square>
              10k
            </q-chip>
          </q-item-section>
        </q-item>

        <q-separator spaced :dark="dark" inset="item" />

        <q-item>
          <q-item-section top avatar>
            <q-avatar rounded>

            </q-avatar>
          </q-item-section>

          <q-item-section>
            <q-item-label>Single line item</q-item-label>
            <q-item-label caption>
              Secondary line text. Lorem ipsum dolor sit amet, consectetur adipiscit elit.
            </q-item-label>
          </q-item-section>

          <q-item-section side top>
            <q-item-label caption>
              meta
            </q-item-label>
          </q-item-section>
        </q-item>

        <q-separator spaced :dark="dark" />

        <q-item>
          <q-item-section top thumbnail class="q-ml-none">

          </q-item-section>

          <q-item-section>
            <q-item-label>Single line item</q-item-label>
            <q-item-label caption>
              Secondary line text. Lorem ipsum dolor sit amet, consectetur adipiscit elit.
            </q-item-label>
          </q-item-section>

          <q-item-section side top>
            <q-item-label caption>
              meta
            </q-item-label>
          </q-item-section>
        </q-item>
      </q-list>

      <q-list bordered padding :dark="dark">
        <q-item-label header>
          User Controls
        </q-item-label>

        <q-item>
          <q-item-section>
            <q-item-label>Content filtering</q-item-label>
            <q-item-label caption>
              Set the content filtering level to restrict
              apps that can be downloaded
            </q-item-label>
          </q-item-section>
        </q-item>

        <q-item>
          <q-item-section>
            <q-item-label>Password</q-item-label>
            <q-item-label caption>
              Require password for purchase or use
              password to restrict purchase
            </q-item-label>
          </q-item-section>
        </q-item>

        <q-separator spaced :dark="dark" />
        <q-item-label header>
          General
        </q-item-label>

        <q-item tag="label">
          <q-item-section side>
            <q-checkbox :dark="dark" v-model="check1" />
          </q-item-section>

          <q-item-section>
            <q-item-label>Notifications</q-item-label>
            <q-item-label caption>
              Notify me about updates to apps or games that I downloaded
            </q-item-label>
          </q-item-section>
        </q-item>

        <q-item tag="label">
          <q-item-section side>
            <q-checkbox :dark="dark" v-model="check2" />
          </q-item-section>

          <q-item-section>
            <q-item-label>Sound</q-item-label>
            <q-item-label caption>
              Auto-update apps at anytime. Data charges may apply
            </q-item-label>
          </q-item-section>
        </q-item>

        <q-item tag="label">
          <q-item-section side>
            <q-checkbox :dark="dark" v-model="check3" />
          </q-item-section>

          <q-item-section>
            <q-item-label>Auto-add widgets</q-item-label>
            <q-item-label caption>
              Automatically add home screen widgets
            </q-item-label>
          </q-item-section>
        </q-item>
      </q-list>

      <q-item-label header>
        Google Inbox style
      </q-item-label>
      <q-list class="shadow-1 q-pa-none">
        <q-item>
          <q-item-section avatar top>
            <q-icon name="fab fa-github" color="black" size="34px" />
          </q-item-section>

          <q-item-section top class="col-2 gt-sm">
            <q-item-label class="q-mt-sm">
              Github
            </q-item-label>
          </q-item-section>

          <q-item-section top>
            <q-item-label lines="1">
              [quasarframework/quasar]
               - Github repository
            </q-item-label>
            <q-item-label caption lines="1">
              @rstoenescu in #3: > Generic type parameter for props
            </q-item-label>

              Open in Github

          </q-item-section>

          <q-item-section top class="col-auto">

              <q-btn size="12px" flat dense round icon="delete" />
              <q-btn size="12px" flat dense round icon="done" />
              <q-btn size="12px" flat dense round icon="more_vert" />

          </q-item-section>
        </q-item>

        <q-separator />

        <q-item>
          <q-item-section avatar top>
            <q-icon name="fab fa-github" color="black" size="34px" />
          </q-item-section>

          <q-item-section top class="col-2 gt-sm">
            <q-item-label class="q-mt-sm">
              Github
            </q-item-label>
          </q-item-section>

          <q-item-section top>
            <q-item-label lines="1">
              [quasarframework/quasar-cli]
               - Github repository
            </q-item-label>
            <q-item-label caption lines="1">
              @rstoenescu in #1: > The build system
            </q-item-label>

              Open in Github

          </q-item-section>

          <q-item-section top class="col-auto">

              <q-btn size="12px" flat dense round icon="delete" />
              <q-btn size="12px" flat dense round icon="done" />
              <q-btn size="12px" flat dense round icon="more_vert" />

          </q-item-section>
        </q-item>
      </q-list>

      <q-list class="q-my-sm" bordered style="max-width: 100px">
        <q-item clickable v-ripple>
          <q-item-section avatar>
            <q-avatar color="primary" text-color="white">
              R
            </q-avatar>
          </q-item-section>

          <q-item-section>
            <q-item-label lines="2">Ruddy Jedrzej</q-item-label>
            <q-item-label caption lines="1">VERRRYY LOOONNNGGGGGG TEXTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT</q-item-label>
          </q-item-section>

          <q-item-section side>
            <q-item-label lines="1">Ruddy Jedrzej</q-item-label>
            <q-item-label caption lines="1">VERRRYY LOOONNNGGGGGG TEXTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT</q-item-label>
          </q-item-section>
        </q-item>
      </q-list>

</template>


add comment

add comment

<template>

  <transition name="fade">

      <div
        class="modal"
        ref="modal"
        :tabindex="0"
        role="dialog"
        aria-labelledby="modal-title"
        :class="{ mobile: windowSize.breakpoint <= 1 }"
        :style="{ width: width, height: height }"
      >

          {{ $tr('errorAlert') }}
          {{ title }}

        <slot></slot>

  </transition>

</template>


Toggling from search-by-kd back to search-by-activity overwrites activity value

<template>
    <div>
        <v-text-field type="number" :label="label" class="search-field right-aligned"
                      :rules="numericValidationRules" v-model="fieldValue" @input="onFieldValueChanged"
                      :step="step" :min="min" :max="max" suffix="%">
        </v-text-field>
        <activity-or-kd-toggle-button ref="dropdown"></activity-or-kd-toggle-button>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Watch } from 'vue-property-decorator';
import ActivityOrKdToggleButton from './activity-or-kd-toggle-button.vue';
import { SearchByKinaseSecondComponent } from '../rak';

@Component({ components: { ActivityOrKdToggleButton } })
export default class ActivityOrKdField extends Vue {

    get filters() {
        return this.$store.state.filters;
    }

    private label: string = 'Remaining activity';
    private fieldValue: string = '';

    private step: number = 0.1;
    private min: number = 0.1;
    private max: number = 100;
    private suffix: string = '%';

    private numericValidationRules: any[] = [

        (value: string) => {
            return ActivityOrKdField.isEmpty(value) || !isNaN(parseFloat(value)) || 'Must be a number';
        },

        (value: string) => {
            if (!parseFloat(value)) {
                return true; // Will be caught by the rule above
            }
            const max: number = this.filters.activityOrKd === 'percentControl' ? 100 : 10000;
            return +value >= 0 && +value <= max || `Must be between 0 and ${max}`;
        }
    ];

    private static isEmpty(text: string): boolean {
        // text might be a number
        return !text || !text.trim || !text.trim().length;
    }

    mounted() {

        // Hijack the suffix content and replace it with a custom widget
        const dropdown: Vue = this.$refs.dropdown as Vue;
        dropdown.$el.parentElement!.removeChild(dropdown.$el);

        const suffixDiv: HTMLElement = this.$el.querySelector('.input-group--text-field__suffix') as HTMLElement;
        suffixDiv.innerHTML = '';
        suffixDiv.appendChild(dropdown.$el);
    }

    onFieldValueChanged(newValue: string) {
        const storeCommitFunction: string =
            this.filters.activityOrKd === 'percentControl' ? 'setFilterByActivity' : 'setFilterByKd';
        this.$store.commit(storeCommitFunction, newValue);
    }

    @Watch('filters.kinase')
    onKinaseChanged(newValue: string) {
        // Populate with default value when the first kinase is selected
        if (!this.fieldValue.length) {
            this.updateBasedOnActivityOrKd();
        }
    }

    @Watch('filters.activityOrKd')
    onActivityOrKdChanged() {
        this.updateBasedOnActivityOrKd();
    }

    private updateBasedOnActivityOrKd() {
        if (this.filters.activityOrKd === 'percentControl') {
            this.label = 'Remaining activity';
            this.fieldValue = this.filters.activity;
            this.step = this.min = 0.1;
            this.max = 100;
        }
        else {
            this.label = 'Kd';
            this.fieldValue = this.filters.kd;
            this.step = this.min = 1;
            this.max = 500;
        }
    }
}
</script>

<style lang="less">
.search-field {
    width: 100%;

    &.right-aligned {
        input {
            text-align: right;
        }
    }
}
</style>

<template>
    <div>
        <v-text-field type="number" :label="label" class="search-field right-aligned"
                      :rules="numericValidationRules" v-model="fieldValue" @input="onFieldValueChanged"
                      step="0.1" min="0.1" max="100" suffix="%">
        </v-text-field>
        <activity-or-kd-toggle-button ref="dropdown"></activity-or-kd-toggle-button>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Watch } from 'vue-property-decorator';
import ActivityOrKdToggleButton from './activity-or-kd-toggle-button.vue';
import { SearchByKinaseSecondComponent } from '../rak';

@Component({ components: { ActivityOrKdToggleButton } })
export default class ActivityOrKdField extends Vue {

    get filters() {
        return this.$store.state.filters;
    }

    private label: string = 'Remaining activity';
    private fieldValue: string = '';

    private suffix: string = '%';

    private numericValidationRules: any[] = [

        (value: string) => {
            return ActivityOrKdField.isEmpty(value) || !isNaN(parseFloat(value)) || 'Must be a number';
        },

        (value: string) => {
            if (!parseFloat(value)) {
                return true; // Will be caught by the rule above
            }
            const max: number = this.filters.activityOrKd === 'percentControl' ? 100 : 10000;
            return +value >= 0 && +value <= max || `Must be between 0 and ${max}`;
        }
    ];

    private static isEmpty(text: string): boolean {
        // text might be a number
        return !text || !text.trim || !text.trim().length;
    }

    mounted() {

        // Hijack the suffix content and replace it with a custom widget
        const dropdown: Vue = this.$refs.dropdown as Vue;
        dropdown.$el.parentElement!.removeChild(dropdown.$el);

        const suffixDiv: HTMLElement = this.$el.querySelector('.input-group--text-field__suffix') as HTMLElement;
        suffixDiv.innerHTML = '';
        suffixDiv.appendChild(dropdown.$el);
    }

    onFieldValueChanged(newValue: string) {
        this.$store.commit('setFilterByActivity', newValue);
    }

    @Watch('filters.kinase')
    onKinaseChanged(newValue: string) {
        // Populate with default value when the first kinase is selected
        if (!this.fieldValue.length) {
            this.updateBasedOnActivityOrKd();
        }
    }

    @Watch('filters.activityOrKd')
    onActivityOrKdChanged() {
        this.updateBasedOnActivityOrKd();
    }

    private updateBasedOnActivityOrKd() {
        if (this.filters.activityOrKd === 'percentControl') {
            this.label = 'Remaining activity';
            this.fieldValue = this.filters.activity;
        }
        else {
            this.label = 'Kd';
            this.fieldValue = this.filters.kd;
        }
    }
}
</script>

<style lang="less">
.search-field {
    width: 100%;

    &.right-aligned {
        input {
            text-align: right;
        }
    }
}
</style>


Use better codemirror api for retreive height

<template>
  <div class="editor">
    <codemirror ref="myEditor"
                v-model="mdContent"
                :options="editorOptions"
                @change="onEditorCodeChange">
    </codemirror>
  </div>
</template>

<script>
import { codemirror } from 'vue-codemirror';
import elementUtils from 'src/helpers/elementUtils';
import 'codemirror/keymap/sublime';

let codeMirrorInstance = null;

export default {
  components: {
    codemirror
  },
  props: ['value', 'scrollPosition'],
  data() {
    return {
      isBeingLoaded: true,
      mdContent: this.value,
      editorOptions: {
        tabSize: 4,
        mode: 'text/x-markdown',
        theme: 'base16-dark',
        lineNumbers: true,
        lineWrapping: true,
        line: true,
        keyMap: 'sublime',
        foldGutter: true,
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
        styleSelectedText: true,
        highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
      },
      // Scroll related functions
      localScrollPosition: 1,
      canUserScroll: true,
      canOtherScroll: true,
      enableUserScrollListener: () => { this.canUserScroll = true; },
      disableUserScrollListener: () => { this.canUserScroll = false; },
      userScrollListeners: [],
      enableOtherScrolledListener: () => { this.canOtherScroll = true; },
      disableOtherScrolledListener: () => { this.canOtherScroll = false; },
      otherScrollListeners: [],
      /**
       * This function is called user is scrolling the component
       */
      broadcastNewScrollPosition: (cmInstance) => {
        // If it is being scrolled by other component,
        // no need to broadcast scroll position again
        if (!this.canUserScroll) return;

        // Prevent programatic updating by own component
        this.disableOtherScrolledListener();
        this.userScrollListeners.forEach(clearTimeout);

        // Retrieve scroll information for emitting
        const cmScrollTop = cmInstance.getScrollInfo().top;
        const newLinePosition = cmInstance.lineAtHeight(cmScrollTop, 'local') + 1;
        this.$emit('updateViewerScrollPosition', newLinePosition);

        // Welcome programatic updating by own component again after a while
        this.userScrollListeners.push(setTimeout(this.enableOtherScrolledListener, 1000));
      },
      /**
       * This function is called when the component receive scroll update signal
       * from other component
       */
      updateScrollPosition: (position) => {
        // If user is scrolling this component, disable scroll manipulation
        if (!this.canOtherScroll) return;
        if (this.localScrollPosition === position) return;

        // Prevent scroll position listener from manually adjusting the scroll height again
        this.disableUserScrollListener();
        this.userScrollListeners.forEach(clearTimeout);

        // Retrieve scroll information for setting height
        const destinationPosition = codeMirrorInstance.heightAtLine(position - 1, 'local');
        codeMirrorInstance.scrollTo(null, destinationPosition);

        // listener for scroll position from
        this.userScrollListeners.push(setTimeout(this.enableUserScrollListener, 1000));
      }
    };
  },
  methods: {
    onEditorCodeChange(newCode) {
      this.$emit('input', newCode);
    },
  },
  watch: {
    value(data) {
      if (this.isBeingLoaded) {
        this.mdContent = data;
        codeMirrorInstance.setCursor(data.length);
        this.isBeingLoaded = false;
      }
    },
    scrollPosition(position) {
      this.updateScrollPosition(position);
    }
  },
  mounted() {
    codeMirrorInstance = this.$refs.myEditor.editor;
    codeMirrorInstance.on('scroll', this.broadcastNewScrollPosition);
  }
};

</script>

<style scoped lang="scss">
@import 'src/assets/styles/variables.scss';

.editor {
  box-shadow: 4px 0 12px 0px rgba(0, 0, 0, 0.3);
  height: calc(100vh - #{$content-navbar-height});
}
</style>

<style lang="scss">
.editor {
  .CodeMirror {
    height: 100%;
    line-height: 140%;
    font-size: 16px;
  }
}
</style>

<template>
  <div class="editor">
    <codemirror ref="myEditor"
                v-model="mdContent"
                :options="editorOptions"
                @change="onEditorCodeChange">
    </codemirror>
  </div>
</template>

<script>
import { codemirror } from 'vue-codemirror';
import 'codemirror/keymap/sublime';

let codeMirrorInstance = null;

export default {
  components: {
    codemirror
  },
  props: ['value', 'scrollPosition'],
  data() {
    return {
      isBeingLoaded: true,
      mdContent: this.value,
      editorOptions: {
        tabSize: 4,
        mode: 'text/x-markdown',
        theme: 'base16-dark',
        lineNumbers: true,
        lineWrapping: true,
        line: true,
        keyMap: 'sublime',
        foldGutter: true,
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
        styleSelectedText: true,
        highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
      },
      // Scroll related functions
      localScrollPosition: 1,
      canUserScroll: true,
      canOtherScroll: true,
      enableUserScrollListener: () => { this.canUserScroll = true; },
      disableUserScrollListener: () => { this.canUserScroll = false; },
      userScrollListeners: [],
      enableOtherScrolledListener: () => { this.canOtherScroll = true; },
      disableOtherScrolledListener: () => { this.canOtherScroll = false; },
      otherScrollListeners: [],
      /**
       * This function is called user is scrolling the component
       */
      broadcastNewScrollPosition: (cmInstance) => {
        // If it is being scrolled by other component,
        // no need to broadcast scroll position again
        if (!this.canUserScroll) return;

        // Prevent programatic updating by own component
        this.disableOtherScrolledListener();
        this.userScrollListeners.forEach(clearTimeout);

        // Retrieve scroll information for emitting
        const cmScrollTop = cmInstance.getScrollInfo().top;
        const newLinePosition = cmInstance.lineAtHeight(cmScrollTop, 'local') + 1;
        this.$emit('updateViewerScrollPosition', newLinePosition);

        // Welcome programatic updating by own component again after a while
        this.userScrollListeners.push(setTimeout(this.enableOtherScrolledListener, 1000));
      },
      /**
       * This function is called when the component receive scroll update signal
       * from other component
       */
      updateScrollPosition: (position) => {
        // If user is scrolling this component, disable scroll manipulation
        if (!this.canOtherScroll) return;
        if (this.localScrollPosition === position) return;

        // Prevent scroll position listener from manually adjusting the scroll height again
        this.disableUserScrollListener();
        this.userScrollListeners.forEach(clearTimeout);

        // Retrieve scroll information for setting height
        const destinationOffSetHeight = codeMirrorInstance.heightAtLine(position) - 82;
        const destinationPosition = destinationOffSetHeight + codeMirrorInstance.getScrollInfo().top;
        codeMirrorInstance.scrollTo(0, destinationPosition);

        // listener for scroll position from
        this.userScrollListeners.push(setTimeout(this.enableUserScrollListener, 1000));
      }
    };
  },
  methods: {
    onEditorCodeChange(newCode) {
      this.$emit('input', newCode);
    },
  },
  watch: {
    value(data) {
      if (this.isBeingLoaded) {
        this.mdContent = data;
        codeMirrorInstance.setCursor(data.length);
        this.isBeingLoaded = false;
      }
    },
    scrollPosition(position) {
      this.updateScrollPosition(position);
    }
  },
  mounted() {
    codeMirrorInstance = this.$refs.myEditor.editor;
    codeMirrorInstance.on('scroll', this.broadcastNewScrollPosition);
  }
};

</script>

<style scoped lang="scss">
@import 'src/assets/styles/variables.scss';

.editor {
  box-shadow: 4px 0 12px 0px rgba(0, 0, 0, 0.3);
  height: calc(100vh - #{$content-navbar-height});
}
</style>

<style lang="scss">
.editor {
  .CodeMirror {
    height: 100%;
    line-height: 140%;
    font-size: 16px;
  }
}
</style>


fix: do not show the footer on the last step of delegate registration and second passphrase (#410)

<template>
  <ModalWindow
    :title="title || typeName"
    container-classes="TransactionModal"
    @close="emitCancel"
  >
    <keep-alive>
      <TransactionForm
        v-if="!transaction"
        v-bind="$attrs"
        :type="type"
        @built="onBuilt"
      />
    </keep-alive>

    <TransactionConfirm
      v-if="transaction"
      :transaction="transaction"
      @back="onBack"
      @confirm="onConfirm"
    />

    <portal-target
      v-if="step === 0"
      slot="footer"
      name="transaction-footer"
    />
  </ModalWindow>

</template>

<script>
import { ModalWindow } from '@/components/Modal'
import { TRANSACTION_TYPES } from '@config'
import { includes, findKey } from 'lodash'
import TransactionForm from './TransactionForm'
import TransactionConfirm from './TransactionConfirm'

export default {
  name: 'TransactionModal',

  components: {
    ModalWindow,
    TransactionForm,
    TransactionConfirm
  },

  props: {
    type: {
      type: Number,
      required: true,
      validator: value => includes(TRANSACTION_TYPES, value)
    },
    title: {
      type: String,
      required: false,
      default: null
    }
  },

  data: () => ({
    step: 0,
    transaction: null
  }),

  computed: {
    transactionKey () {
      return findKey(TRANSACTION_TYPES, type => this.type === type)
    },
    typeName () {
      return this.$t(`TRANSACTION.TYPE.${this.transactionKey}`)
    }
  },

  methods: {
    onBuilt (transaction) {
      this.step = 1
      this.transaction = transaction
    },

    onBack () {
      this.step = 0
      this.transaction = null
    },

    async onConfirm () {
      const response = await this.$client.broadcastTransaction(this.transaction)

      this.successfulResponse(response)
        ? this.$success(this.$t(`TRANSACTION.SUCCESS.${this.transactionKey}`))
        : this.$error(this.$t(`TRANSACTION.ERROR.${this.transactionKey}`))

      this.emitSent(response)
    },

    emitSent (response) {
      this.$emit('sent', response)
    },

    emitCancel () {
      this.$emit('cancel')
    },

    successfulResponse (response) {
      if (response.status !== 200) {
        this.$logger.error(response)
        return false
      }

      if (this.$client.version === 1) {
        return response.data.success
      } else {
        return response.data.data && response.data.data.invalid.length === 0
      }
    }
  }
}
</script>

<style>
.TransactionModal {
  max-width: 45rem
}
</style>

<template>
  <ModalWindow
    :title="title || typeName"
    container-classes="TransactionModal"
    @close="emitCancel"
  >
    <keep-alive>
      <TransactionForm
        v-if="!transaction"
        v-bind="$attrs"
        :type="type"
        @built="onBuilt"
      />
    </keep-alive>

    <TransactionConfirm
      v-if="transaction"
      :transaction="transaction"
      @back="onBack"
      @confirm="onConfirm"
    />

    <portal-target
      slot="footer"
      name="transaction-footer"
    />
  </ModalWindow>

</template>

<script>
import { ModalWindow } from '@/components/Modal'
import { TRANSACTION_TYPES } from '@config'
import { includes, findKey } from 'lodash'
import TransactionForm from './TransactionForm'
import TransactionConfirm from './TransactionConfirm'

export default {
  name: 'TransactionModal',

  components: {
    ModalWindow,
    TransactionForm,
    TransactionConfirm
  },

  props: {
    type: {
      type: Number,
      required: true,
      validator: value => includes(TRANSACTION_TYPES, value)
    },
    title: {
      type: String,
      required: false,
      default: null
    }
  },

  data: () => ({
    transaction: null
  }),

  computed: {
    transactionKey () {
      return findKey(TRANSACTION_TYPES, type => this.type === type)
    },
    typeName () {
      return this.$t(`TRANSACTION.TYPE.${this.transactionKey}`)
    }
  },

  methods: {
    onBuilt (transaction) {
      this.transaction = transaction
    },

    onBack () {
      this.transaction = null
    },

    async onConfirm () {
      const response = await this.$client.broadcastTransaction(this.transaction)

      this.successfulResponse(response)
        ? this.$success(this.$t(`TRANSACTION.SUCCESS.${this.transactionKey}`))
        : this.$error(this.$t(`TRANSACTION.ERROR.${this.transactionKey}`))

      this.emitSent(response)
    },

    emitSent (response) {
      this.$emit('sent', response)
    },

    emitCancel () {
      this.$emit('cancel')
    },

    successfulResponse (response) {
      if (response.status !== 200) {
        this.$logger.error(response)
        return false
      }

      if (this.$client.version === 1) {
        return response.data.success
      } else {
        return response.data.data && response.data.data.invalid.length === 0
      }
    }
  }
}
</script>

<style>
.TransactionModal {
  max-width: 45rem
}
</style>


去掉注释的代码

去掉注释的代码

<template>

注册有礼

您已是恒大金服用户

无需重复注册

</template>


Debug logs cleaning

Debug logs cleaning

<template lang="html">
  <div class="elevation-1">
    <v-card class="panel">

      <v-toolbar
        id="toolbar"
        dense
      >
        <v-toolbar-title class="toolBarTitle">
          Properties
        </v-toolbar-title>
        <v-spacer/>
      </v-toolbar>

      <v-list id="list" >

        <!-- Number of selected items -->
        <v-list-tile>

          <v-list-tile-content>
            <v-list-tile-title class="faIcons">
              No. selected items:
            </v-list-tile-title>
          </v-list-tile-content>

          <v-list-tile-action>
            {{ numItems }}
          </v-list-tile-action>
        </v-list-tile>

        <!-- Fill color -->
        <v-list-tile>
          <v-list-tile-content>
            <v-list-tile-title class="faIcons">
              Fill colour:
            </v-list-tile-title>
          </v-list-tile-content>

          <v-list-tile-action>
            <v-btn
              icon
              class="action pointers-no">
              <colour-picker
                :color="groupFillColor"
                :type="'fill'"
                class="pointers-please"/>
            </v-btn>
          </v-list-tile-action>
        </v-list-tile>

        <!-- Stroke color -->
        <v-list-tile>
          <v-list-tile-content>
            <v-list-tile-title class="faIcons">
              Stroke colour:
            </v-list-tile-title>
          </v-list-tile-content>

          <v-list-tile-action>
            <v-btn
              icon
              class="action pointers-no">
              <colour-picker
                :color="groupStrokeColor"
                :type="'stroke'"
                class="pointers-please"/>
            </v-btn>
          </v-list-tile-action>
        </v-list-tile>

        <!-- Class
        <v-list-tile>
          <v-list-tile-content>
            <v-list-tile-title class="faIcons">
              Class:
            </v-list-tile-title>
          </v-list-tile-content>

          <v-list-tile-action>
            <v-text-field
              :value="groupClass"
              name="input-3-4"
              single-line
            />
          </v-list-tile-action>
        </v-list-tile> -->

      </v-list>
    </v-card>
  </div>
</template>

<script>
import { eventBus } from '../../../../main'
import ColorPicker from './ColorPicker.vue'

export default {
  components: {
    'colour-picker': ColorPicker
  },
  data () {
    return {
      numItems: 0,
      groupClass: '',
      groupFillColor: {
        style: 'transparent',
        obj: {
          h: 0,
          s: 0,
          l: 0,
          a: 0
        }
      },
      groupStrokeWidth: '',
      groupStrokeColor: {
        style: 'transparent',
        obj: {
          h: 0,
          s: 0,
          l: 0,
          a: 0
        }
      },
      color: 'blue'
    }
  },

  created () {
    // Listen for an event indicating the selection has changed and
    // update the component data appropriately.
    eventBus.$on('selectionChanged', selection => {
      if (selection.length >= 1) {
        this.numItems = 0
        selection.forEach(item => {
          if (item.className === 'Group') {
            if (item.data.class) {
              this.groupClass = item.data.class
            }

            if (item.fillColor) {
              let hue = item.fillColor.hue
              let sat = item.fillColor.saturation * 100 + '%'
              let light = item.fillColor.lightness * 100 + '%'
              let alpha = item.fillColor.alpha

              this.groupFillColor.style =
                'hsla(' + hue + ', ' + sat + ', ' + light + ', ' + alpha + ')'
              this.groupFillColor.obj = {
                h: hue,
                s: sat,
                l: light,
                a: alpha
              }
            } else {
              this.groupFillColor.style = 'transparent'
              this.groupFillColor.obj = {
                h: 0,
                s: 0,
                l: 0,
                a: 0
              }
            }

            if (item.strokeColor) {
              let hue = item.strokeColor.hue
              let sat = item.strokeColor.saturation * 100 + '%'
              let light = item.strokeColor.lightness * 100 + '%'
              let alpha = item.strokeColor.alpha

              this.groupStrokeColor.style =
                'hsla(' + hue + ', ' + sat + ', ' + light + ', ' + alpha + ')'
              this.groupStrokeColor.obj = {
                h: hue,
                s: sat,
                l: light,
                a: alpha
              }
            } else {
              this.groupStrokeColor.style = 'transparent'
              this.groupStrokeColor.obj = {
                h: 0,
                s: 0,
                l: 0,
                a: 0
              }
            }
          } else {
            this.numItems++
          }
        })
      } else {
        // Reset class
        this.groupClass = ''

        // Reset property data
        this.numItems = 0
        this.groupFillColor = {
          style: 'transparent',
          obj: {
            h: 0,
            s: 0,
            l: 0,
            a: 0
          }
        }
        this.groupStrokeWidth = ''
        this.groupStrokeColor = {
          style: 'transparent',
          obj: {
            h: 0,
            s: 0,
            l: 0,
            a: 0
          }
        }
      }
    })
  }
}
</script>

<style lang='css' scoped>
.panel {
  margin-top: 7px;
  background-color: #eeeeee;
  width: 240px;
}

.toolBarTitle {
  color: #424242;
}

#toolbar {
  background-color: #e0e0e0;
}

.action {
  margin-right: 8px;
  height: 30px;
  margin-bottom: 0px;
}

.input-group {
  padding: 7px 20px 7px 10px;
}

#list {
  background-color: #eeeeee;
}
</style>

<template lang="html">
  <div class="elevation-1">
    <v-card class="panel">

      <v-toolbar
        id="toolbar"
        dense
      >
        <v-toolbar-title class="toolBarTitle">
          Properties
        </v-toolbar-title>
        <v-spacer/>
      </v-toolbar>

      <v-list id="list" >

        <!-- Number of selected items -->
        <v-list-tile>

          <v-list-tile-content>
            <v-list-tile-title class="faIcons">
              No. selected items:
            </v-list-tile-title>
          </v-list-tile-content>

          <v-list-tile-action>
            {{ numItems }}
          </v-list-tile-action>
        </v-list-tile>

        <!-- Fill color -->
        <v-list-tile>
          <v-list-tile-content>
            <v-list-tile-title class="faIcons">
              Fill colour:
            </v-list-tile-title>
          </v-list-tile-content>

          <v-list-tile-action>
            <v-btn
              icon
              class="action pointers-no">
              <colour-picker
                :color="groupFillColor"
                :type="'fill'"
                class="pointers-please"/>
            </v-btn>
          </v-list-tile-action>
        </v-list-tile>

        <!-- Stroke color -->
        <v-list-tile>
          <v-list-tile-content>
            <v-list-tile-title class="faIcons">
              Stroke colour:
            </v-list-tile-title>
          </v-list-tile-content>

          <v-list-tile-action>
            <v-btn
              icon
              class="action pointers-no">
              <colour-picker
                :color="groupStrokeColor"
                :type="'stroke'"
                class="pointers-please"/>
            </v-btn>
          </v-list-tile-action>
        </v-list-tile>

        <!-- Class
        <v-list-tile>
          <v-list-tile-content>
            <v-list-tile-title class="faIcons">
              Class:
            </v-list-tile-title>
          </v-list-tile-content>

          <v-list-tile-action>
            <v-text-field
              :value="groupClass"
              name="input-3-4"
              single-line
            />
          </v-list-tile-action>
        </v-list-tile> -->

      </v-list>
    </v-card>
  </div>
</template>

<script>
import { eventBus } from '../../../../main'
import ColorPicker from './ColorPicker.vue'

export default {
  components: {
    'colour-picker': ColorPicker
  },
  data () {
    return {
      numItems: 0,
      groupClass: '',
      groupFillColor: {
        style: 'transparent',
        obj: {
          h: 0,
          s: 0,
          l: 0,
          a: 0
        }
      },
      groupStrokeWidth: '',
      groupStrokeColor: {
        style: 'transparent',
        obj: {
          h: 0,
          s: 0,
          l: 0,
          a: 0
        }
      },
      color: 'blue'
    }
  },

  created () {
    // Listen for an event indicating the selection has changed and
    // update the component data appropriately.
    eventBus.$on('selectionChanged', selection => {
      if (selection.length >= 1) {
        this.numItems = 0
        selection.forEach(item => {
          if (item.className === 'Group') {
            console.log(item)
            if (item.data.class) {
              this.groupClass = item.data.class
              console.log(item.data.class)
            }

            if (item.fillColor) {
              let hue = item.fillColor.hue
              let sat = item.fillColor.saturation * 100 + '%'
              let light = item.fillColor.lightness * 100 + '%'
              let alpha = item.fillColor.alpha

              this.groupFillColor.style =
                'hsla(' + hue + ', ' + sat + ', ' + light + ', ' + alpha + ')'
              this.groupFillColor.obj = {
                h: hue,
                s: sat,
                l: light,
                a: alpha
              }
            } else {
              this.groupFillColor.style = 'transparent'
              this.groupFillColor.obj = {
                h: 0,
                s: 0,
                l: 0,
                a: 0
              }
            }

            if (item.strokeColor) {
              let hue = item.strokeColor.hue
              let sat = item.strokeColor.saturation * 100 + '%'
              let light = item.strokeColor.lightness * 100 + '%'
              let alpha = item.strokeColor.alpha

              this.groupStrokeColor.style =
                'hsla(' + hue + ', ' + sat + ', ' + light + ', ' + alpha + ')'
              this.groupStrokeColor.obj = {
                h: hue,
                s: sat,
                l: light,
                a: alpha
              }
            } else {
              this.groupStrokeColor.style = 'transparent'
              this.groupStrokeColor.obj = {
                h: 0,
                s: 0,
                l: 0,
                a: 0
              }
            }
          } else {
            this.numItems++
          }
        })
      } else {
        // Reset class
        this.groupClass = ''

        // Reset property data
        this.numItems = 0
        this.groupFillColor = {
          style: 'transparent',
          obj: {
            h: 0,
            s: 0,
            l: 0,
            a: 0
          }
        }
        this.groupStrokeWidth = ''
        this.groupStrokeColor = {
          style: 'transparent',
          obj: {
            h: 0,
            s: 0,
            l: 0,
            a: 0
          }
        }
      }
    })
  }
}
</script>

<style lang='css' scoped>
.panel {
  margin-top: 7px;
  background-color: #eeeeee;
  width: 240px;
}

.toolBarTitle {
  color: #424242;
}

#toolbar {
  background-color: #e0e0e0;
}

.action {
  margin-right: 8px;
  height: 30px;
  margin-bottom: 0px;
}

.input-group {
  padding: 7px 20px 7px 10px;
}

#list {
  background-color: #eeeeee;
}
</style>


Fix bug

Fix bug

<template>

	<x-header class="header" v-if="navbar == 'top'" v-show="!zenMode" ref="header"/>
	<x-sidebar class="sidebar" v-if="navbar != 'top'" v-show="!zenMode" ref="sidebar"/>

		<slot></slot>

	<mk-stream-indicator v-if="$store.getters.isSignedIn"/>

</template>

<template>

	<x-header class="header" v-if="navbar == 'top'" v-show="!zenMode" ref="header"/>
	<x-sidebar class="sidebar" v-if="navbar != 'top'" ref="sidebar"/>

		<slot></slot>

	<mk-stream-indicator v-if="$store.getters.isSignedIn"/>

</template>


:art:

:art:

<template>

	<button @click="dark">
		<template v-if="$store.state.device.darkmode">%fa:moon%</template>
		<template v-else>%fa:R moon%</template>
	</button>

	<mk-forkit class="forkit"/>

{{ name }}

					{{ host }} -

						%fa:user% {{ stats.originalUsersCount | number }}
						%fa:pencil-alt% {{ stats.originalNotesCount | number }}

					%i18n:@signup%
					|
					%i18n:@signin%

			%fa:broadcast-tower% %i18n:@announcements%

 0">

			%fa:images% %i18n:@photos%

				<div v-for="photo in photos" :style="`background-image: url(${photo.thumbnailUrl})`">

				<mk-nav class="nav"/>

					<mk-trends/>

				%fa:comment-alt R% %i18n:@timeline%

					<mk-welcome-timeline class="tl" :max="20"/>

	<modal name="signup" :class="$store.state.device.darkmode ? 'modal-dark' : 'modal-light'" width="450px" height="auto" scrollable>
		%i18n:@signup%
		<mk-signup class="form"/>
	</modal>

	<modal name="signin" :class="$store.state.device.darkmode ? 'modal-dark' : 'modal-light'" width="450px" height="auto" scrollable>
		%i18n:@signin%
		<mk-signin class="form"/>
	</modal>

</template>


Replace number with BigNumber conversion

<template>

          <full-width-dropdown
            ref="gasDropdown"
            title="Transaction Speed"
            class="tx-speed"
          >

                    <input
                      :id="key"
                      :value="key"
                      :checked="selectedGasType === key"
                      name="speedRadioInputs"
                      type="radio"
                      @change="selectGasType(key)"
                    />

                      {{ key | capitalize }} ({{
                        gasPriceInputs[key].gwei
                      }}
                      Gwei)

                    {{ gasPriceInputs[key].eth }} ETH

                      ($ {{ convert(gasPriceInputs[key].eth) | concatAddr }})

                    <input
                      id="ccc"
                      type="radio"
                      name="speedRadioInputs"
                      value="other"
                      @change="selectGasType('other')"
                    />
                    <input v-model="customGas" type="number" />

Gwei

                    {{ customGasEth }} ETH
                    ($ {{ convert(customGasEth) | concatAddr }})

              <standard-button
                :options="buttonSave"
                @click.native="saveGasChanges"
              />

          </full-width-dropdown>

          <full-width-dropdown
            title="Import Configurations"
            class="import-config"
          >
            Imported file successfully!

              Please click the button below to open and import you configuration
              file from your local computer.

              <standard-input :options="inputFileName" />
              <input
                ref="uploadInput"
                type="file"
                name="file"
                style="display: none"
                @change="receiveUploadedFile"
              />
              <standard-button
                :options="buttonUploadFile"
                @click.native="uploadFile"
              />

              <standard-button
                :options="buttonImport"
                @click.native="setDataFromImportedFile"
              />

          </full-width-dropdown>

          <full-width-dropdown
            title="Export Configurations"
            class="export-config"
          >

              Please click the button below to download your configuration file
              into your local computer.

              Export

          </full-width-dropdown>

</template>


Stop multiple discussion requests

Stop multiple discussion requests

With multiple discussion requests we loose the reactivity of the
previously stored discussions state.
This means that certain features, toggling line discussions for example,
are no longer reactive.

<script>
import { mapGetters, mapActions } from 'vuex';
import { getLocationHash } from '../../lib/utils/url_utility';
import Flash from '../../flash';
import * as constants from '../constants';
import eventHub from '../event_hub';
import noteableNote from './noteable_note.vue';
import noteableDiscussion from './noteable_discussion.vue';
import systemNote from '../../vue_shared/components/notes/system_note.vue';
import commentForm from './comment_form.vue';
import placeholderNote from '../../vue_shared/components/notes/placeholder_note.vue';
import placeholderSystemNote from '../../vue_shared/components/notes/placeholder_system_note.vue';
import skeletonLoadingContainer from '../../vue_shared/components/notes/skeleton_note.vue';
import highlightCurrentUser from '~/behaviors/markdown/highlight_current_user';

export default {
  name: 'NotesApp',
  components: {
    noteableNote,
    noteableDiscussion,
    systemNote,
    commentForm,
    placeholderNote,
    placeholderSystemNote,
  },
  props: {
    noteableData: {
      type: Object,
      required: true,
    },
    notesData: {
      type: Object,
      required: true,
    },
    userData: {
      type: Object,
      required: false,
      default: () => ({}),
    },
    shouldShow: {
      type: Boolean,
      required: false,
      default: true,
    },
    markdownVersion: {
      type: Number,
      required: false,
      default: 0,
    },
  },
  data() {
    return {
      isFetching: false,
      currentFilter: null,
    };
  },
  computed: {
    ...mapGetters([
      'isNotesFetched',
      'discussions',
      'getNotesDataByProp',
      'discussionCount',
      'isLoading',
      'commentsDisabled',
    ]),
    noteableType() {
      return this.noteableData.noteableType;
    },
    allDiscussions() {
      if (this.isLoading) {
        const totalNotes = parseInt(this.notesData.totalNotes, 10) || 0;

        return new Array(totalNotes).fill({
          isSkeletonNote: true,
        });
      }

      return this.discussions;
    },
  },
  watch: {
    shouldShow() {
      if (!this.isNotesFetched) {
        this.fetchNotes();
      }
    },
  },
  created() {
    this.setNotesData(this.notesData);
    this.setNoteableData(this.noteableData);
    this.setUserData(this.userData);
    this.setTargetNoteHash(getLocationHash());
    eventHub.$once('fetchNotesData', this.fetchNotes);
  },
  mounted() {
    if (this.shouldShow) {
      this.fetchNotes();
    }

    const { parentElement } = this.$el;
    if (parentElement && parentElement.classList.contains('js-vue-notes-event')) {
      parentElement.addEventListener('toggleAward', event => {
        const { awardName, noteId } = event.detail;
        this.actionToggleAward({ awardName, noteId });
      });
    }
  },
  updated() {
    this.$nextTick(() => highlightCurrentUser(this.$el.querySelectorAll('.gfm-project_member')));
  },
  methods: {
    ...mapActions({
      setLoadingState: 'setLoadingState',
      fetchDiscussions: 'fetchDiscussions',
      poll: 'poll',
      actionToggleAward: 'toggleAward',
      scrollToNoteIfNeeded: 'scrollToNoteIfNeeded',
      setNotesData: 'setNotesData',
      setNoteableData: 'setNoteableData',
      setUserData: 'setUserData',
      setLastFetchedAt: 'setLastFetchedAt',
      setTargetNoteHash: 'setTargetNoteHash',
      toggleDiscussion: 'toggleDiscussion',
      setNotesFetchedState: 'setNotesFetchedState',
    }),
    getComponentName(discussion) {
      if (discussion.isSkeletonNote) {
        return skeletonLoadingContainer;
      }
      if (discussion.isPlaceholderNote) {
        if (discussion.placeholderType === constants.SYSTEM_NOTE) {
          return placeholderSystemNote;
        }
        return placeholderNote;
      } else if (discussion.individual_note) {
        return discussion.notes[0].system ? systemNote : noteableNote;
      }

      return noteableDiscussion;
    },
    getComponentData(discussion) {
      return discussion.individual_note ? { note: discussion.notes[0] } : { discussion };
    },
    fetchNotes() {
      if (this.isFetching) return null;

      this.isFetching = true;

      return this.fetchDiscussions({ path: this.getNotesDataByProp('discussionsPath') })
        .then(() => {
          this.initPolling();
        })
        .then(() => {
          this.setLoadingState(false);
          this.setNotesFetchedState(true);
          eventHub.$emit('fetchedNotesData');
          this.isFetching = false;
        })
        .then(() => this.$nextTick())
        .then(() => this.checkLocationHash())
        .catch(() => {
          this.setLoadingState(false);
          this.setNotesFetchedState(true);
          Flash('Something went wrong while fetching comments. Please try again.');
        });
    },
    initPolling() {
      if (this.isPollingInitialized) {
        return;
      }

      this.setLastFetchedAt(this.getNotesDataByProp('lastFetchedAt'));

      this.poll();
      this.isPollingInitialized = true;
    },
    checkLocationHash() {
      const hash = getLocationHash();
      const noteId = hash && hash.replace(/^note_/, '');

      if (noteId) {
        this.discussions.forEach(discussion => {
          if (discussion.notes) {
            discussion.notes.forEach(note => {
              if (`${note.id}` === `${noteId}`) {
                // FIXME: this modifies the store state without using a mutation/action
                Object.assign(discussion, { expanded: true });
              }
            });
          }
        });
      }
    },
  },
};
</script>

<template>
  <div
    v-show="shouldShow"
    id="notes"
  >
    <ul
      id="notes-list"
      class="notes main-notes-list timeline"
    >
      <component
        :is="getComponentName(discussion)"
        v-for="discussion in allDiscussions"
        :key="discussion.id"
        v-bind="getComponentData(discussion)"
      />
    </ul>

    <comment-form
      v-if="!commentsDisabled"
      :noteable-type="noteableType"
      :markdown-version="markdownVersion"
    />
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import { getLocationHash } from '../../lib/utils/url_utility';
import Flash from '../../flash';
import * as constants from '../constants';
import eventHub from '../event_hub';
import noteableNote from './noteable_note.vue';
import noteableDiscussion from './noteable_discussion.vue';
import systemNote from '../../vue_shared/components/notes/system_note.vue';
import commentForm from './comment_form.vue';
import placeholderNote from '../../vue_shared/components/notes/placeholder_note.vue';
import placeholderSystemNote from '../../vue_shared/components/notes/placeholder_system_note.vue';
import skeletonLoadingContainer from '../../vue_shared/components/notes/skeleton_note.vue';
import highlightCurrentUser from '~/behaviors/markdown/highlight_current_user';

export default {
  name: 'NotesApp',
  components: {
    noteableNote,
    noteableDiscussion,
    systemNote,
    commentForm,
    placeholderNote,
    placeholderSystemNote,
  },
  props: {
    noteableData: {
      type: Object,
      required: true,
    },
    notesData: {
      type: Object,
      required: true,
    },
    userData: {
      type: Object,
      required: false,
      default: () => ({}),
    },
    shouldShow: {
      type: Boolean,
      required: false,
      default: true,
    },
    markdownVersion: {
      type: Number,
      required: false,
      default: 0,
    },
  },
  data() {
    return {
      currentFilter: null,
    };
  },
  computed: {
    ...mapGetters([
      'isNotesFetched',
      'discussions',
      'getNotesDataByProp',
      'discussionCount',
      'isLoading',
      'commentsDisabled',
    ]),
    noteableType() {
      return this.noteableData.noteableType;
    },
    allDiscussions() {
      if (this.isLoading) {
        const totalNotes = parseInt(this.notesData.totalNotes, 10) || 0;

        return new Array(totalNotes).fill({
          isSkeletonNote: true,
        });
      }

      return this.discussions;
    },
  },
  watch: {
    shouldShow() {
      if (!this.isNotesFetched) {
        this.fetchNotes();
      }
    },
  },
  created() {
    this.setNotesData(this.notesData);
    this.setNoteableData(this.noteableData);
    this.setUserData(this.userData);
    this.setTargetNoteHash(getLocationHash());
    eventHub.$once('fetchNotesData', this.fetchNotes);
  },
  mounted() {
    if (this.shouldShow) {
      this.fetchNotes();
    }

    const { parentElement } = this.$el;
    if (parentElement && parentElement.classList.contains('js-vue-notes-event')) {
      parentElement.addEventListener('toggleAward', event => {
        const { awardName, noteId } = event.detail;
        this.actionToggleAward({ awardName, noteId });
      });
    }
  },
  updated() {
    this.$nextTick(() => highlightCurrentUser(this.$el.querySelectorAll('.gfm-project_member')));
  },
  methods: {
    ...mapActions({
      setLoadingState: 'setLoadingState',
      fetchDiscussions: 'fetchDiscussions',
      poll: 'poll',
      actionToggleAward: 'toggleAward',
      scrollToNoteIfNeeded: 'scrollToNoteIfNeeded',
      setNotesData: 'setNotesData',
      setNoteableData: 'setNoteableData',
      setUserData: 'setUserData',
      setLastFetchedAt: 'setLastFetchedAt',
      setTargetNoteHash: 'setTargetNoteHash',
      toggleDiscussion: 'toggleDiscussion',
      setNotesFetchedState: 'setNotesFetchedState',
    }),
    getComponentName(discussion) {
      if (discussion.isSkeletonNote) {
        return skeletonLoadingContainer;
      }
      if (discussion.isPlaceholderNote) {
        if (discussion.placeholderType === constants.SYSTEM_NOTE) {
          return placeholderSystemNote;
        }
        return placeholderNote;
      } else if (discussion.individual_note) {
        return discussion.notes[0].system ? systemNote : noteableNote;
      }

      return noteableDiscussion;
    },
    getComponentData(discussion) {
      return discussion.individual_note ? { note: discussion.notes[0] } : { discussion };
    },
    fetchNotes() {
      return this.fetchDiscussions({ path: this.getNotesDataByProp('discussionsPath') })
        .then(() => {
          this.initPolling();
        })
        .then(() => {
          this.setLoadingState(false);
          this.setNotesFetchedState(true);
          eventHub.$emit('fetchedNotesData');
        })
        .then(() => this.$nextTick())
        .then(() => this.checkLocationHash())
        .catch(() => {
          this.setLoadingState(false);
          this.setNotesFetchedState(true);
          Flash('Something went wrong while fetching comments. Please try again.');
        });
    },
    initPolling() {
      if (this.isPollingInitialized) {
        return;
      }

      this.setLastFetchedAt(this.getNotesDataByProp('lastFetchedAt'));

      this.poll();
      this.isPollingInitialized = true;
    },
    checkLocationHash() {
      const hash = getLocationHash();
      const noteId = hash && hash.replace(/^note_/, '');

      if (noteId) {
        this.discussions.forEach(discussion => {
          if (discussion.notes) {
            discussion.notes.forEach(note => {
              if (`${note.id}` === `${noteId}`) {
                // FIXME: this modifies the store state without using a mutation/action
                Object.assign(discussion, { expanded: true });
              }
            });
          }
        });
      }
    },
  },
};
</script>

<template>
  <div
    v-show="shouldShow"
    id="notes"
  >
    <ul
      id="notes-list"
      class="notes main-notes-list timeline"
    >
      <component
        :is="getComponentName(discussion)"
        v-for="discussion in allDiscussions"
        :key="discussion.id"
        v-bind="getComponentData(discussion)"
      />
    </ul>

    <comment-form
      v-if="!commentsDisabled"
      :noteable-type="noteableType"
      :markdown-version="markdownVersion"
    />
  </div>
</template>


JGCMS-45 Create new default theme

JGCMS-45 Create new default theme

Fixed small issue in designer tabs

<template>

      <template v-for="item in items">
        <a :class="{'is--selected': item.name === selectedItem}" :key="`${item.name}-${item.type}`"
           @click="select(item)"
           class="jinya-tab__link">
          {{item.title}}

      </template>

      <slot/>

</template>

<template>

      <template v-for="item in items">
        <a class="jinya-tab__link" @click="select(item)" :class="{'is--selected': item.name === selectedItem}"
           :key="`${item.name}-${item.type}`">
          {{item.title}}

      </template>

      <slot/>

</template>


Improve dapp sumbit promotion language

Improve dapp sumbit promotion language

<template>

{{ name | truncate(25) }}Your ÐApp

by  0">{{ authors[0] }}the founder 1"> +{{ authors.length - 1 }}

{{ teaser | truncate(75) }}Teaser description

{{ status | formatDappStatus }}

        <input class="checkbox-input" type="checkbox" id="promotion-interest" v-model="promotionInterest">
        I'm interested in promoting this ÐApp to attract more users

        <input class="checkbox-input" type="checkbox" id="subscribe-newsletter-checkbox" v-model="subscribeNewsletter">
        Email me (very occasional) updates

        <input class="checkbox-input" type="checkbox" id="accepted-terms-checkbox" v-model="acceptedTerms">
        I accept the <nuxt-link @click.native="$mixpanel.track('New DApp - Terms of Service')" to="/terms">Terms of Service</nuxt-link> (required)

    <input type="text" class="yumyum" v-model="honeypot">
    <input v-if="errorFields.length == 1" @click.prevent="$mixpanel.track('New DApp - Submit', { disabled: true, errorFields })" class="submit" type="submit" :value="'1 field needs your attention'">
    <input v-else-if="errorFields.length > 0 && errorFields.length !== 1" @click.prevent="$mixpanel.track('New DApp - Submit', { disabled: true, errorFields })" class="submit" type="submit" :value="errorFields.length + ' fields need your attention'">
    <input v-else-if="sending" @click.prevent="$mixpanel.track('New DApp - Submit', { disabled: true })" class="submit" type="submit" :value="'Please wait'">
    <input v-else-if="errorFields.length == 0" class="submit --is-ready" type="submit" :value="'Submit'" @click.prevent="submit">

</template>

<template>

{{ name | truncate(25) }}Your ÐApp

by  0">{{ authors[0] }}the founder 1"> +{{ authors.length - 1 }}

{{ teaser | truncate(75) }}Teaser description

{{ status | formatDappStatus }}

        <input class="checkbox-input" type="checkbox" id="promotion-interest" v-model="promotionInterest">
        I'm interested in promoting this ÐApp

        <input class="checkbox-input" type="checkbox" id="subscribe-newsletter-checkbox" v-model="subscribeNewsletter">
        Email me (very occasional) updates

        <input class="checkbox-input" type="checkbox" id="accepted-terms-checkbox" v-model="acceptedTerms">
        I accept the <nuxt-link @click.native="$mixpanel.track('New DApp - Terms of Service')" to="/terms">Terms of Service</nuxt-link> (required)

    <input type="text" class="yumyum" v-model="honeypot">
    <input v-if="errorFields.length == 1" @click.prevent="$mixpanel.track('New DApp - Submit', { disabled: true, errorFields })" class="submit" type="submit" :value="'1 field needs your attention'">
    <input v-else-if="errorFields.length > 0 && errorFields.length !== 1" @click.prevent="$mixpanel.track('New DApp - Submit', { disabled: true, errorFields })" class="submit" type="submit" :value="errorFields.length + ' fields need your attention'">
    <input v-else-if="sending" @click.prevent="$mixpanel.track('New DApp - Submit', { disabled: true })" class="submit" type="submit" :value="'Please wait'">
    <input v-else-if="errorFields.length == 0" class="submit --is-ready" type="submit" :value="'Submit'" @click.prevent="submit">

</template>