<commit_before><template>
  <q-page padding class="row justify-center">
    <div style="width: 500px; max-width: 90vw;">
      <p class="caption">Standard</p>
      <q-knob
        v-model="model"
        :min="min"
        :max="max"
      />
      <q-knob
        class="text-primary"
        v-model="model"
        :min="min"
        :max="max"
      />

      <p class="caption">With Step</p>
      <div class="group">
        <q-knob
          v-model="model"
          :min="min"
          :max="max"
          :step="10"
        />

        <p class="caption">Styling</p>
        <q-knob
          v-model="model"
          size="150px"
          color="red"
          line-width="2px"
          track-color="white"
          :min="min"
          :max="max"
        >
          $ {{ model }}
        </q-knob>

        <q-knob
          v-model="model"
          style="font-size: 3rem"
          color="amber-7"
          :min="min"
          :max="max"
          :step="5"
        />

        <q-knob
          v-model="model"
          size="120px"
          style="font-size: 1.5rem"
          color="secondary"
          track-color="yellow-3"
          line-width="5px"
          :min="min"
          :max="max"
          :step="5"
        >
          {{ model }} <q-icon class="q-ml-xs" name="euro_symbol" />
        </q-knob>
      </div>

      <p class="caption">Readonly state</p>
      <q-knob
        v-model="model"
        :min="min"
        :max="max"
        color="primary"
        readonly
      >
        <q-icon class="q-mr-xs" name="volume_up" /> {{ model }}
      </q-knob>

      <p class="caption">Disabled state</p>
      <q-knob
        v-model="model"
        :min="min"
        :max="max"
        disable
      >
        <q-icon class="q-mr-xs" name="volume_up" /> {{ model }}%
      </q-knob>

      <p class="caption">Inside Field</p>
      <q-field
        label="Amount to spend"
        helper="Touch to select an amount (USD)"
        icon="local_atm"
      >
        <q-knob
          v-model="model"
          :min="min"
          :max="max"
        />
      </q-field>
    </div>
  </q-page>
</template>

<script>
export default {
  data () {
    return {
      model: 30,
      min: 0,
      max: 50
    }
  }
}
</script><commit_msg>QKnob page<commit_after><template>
  <q-page padding class="docs-input row justify-center">
    <div style="width: 500px; max-width: 90vw;">
      <p class="caption">Standard</p>
      <q-knob
        v-model="model"
        :min="min"
        :max="max"
      />
      <q-knob
        color="secondary"
        v-model="model"
        :min="min"
        :max="max"
      />

      <p class="caption">With Step</p>
      <div class="group">
        <q-knob
          v-model="model"
          :min="min"
          :max="max"
          :step="10"
        />

        <p class="caption">Styling</p>
        <q-knob
          v-model="model"
          size="150px"
          color="red"
          line-width="2px"
          track-color="white"
          :min="min"
          :max="max"
        >
          $ {{ model }}
        </q-knob>

        <q-knob
          v-model="model"
          style="font-size: 3rem"
          color="amber-7"
          :min="min"
          :max="max"
          :step="5"
        />

        <q-knob
          v-model="model"
          size="120px"
          style="font-size: 1.5rem"
          color="secondary"
          track-color="yellow-3"
          line-width="5px"
          :min="min"
          :max="max"
          :step="5"
        >
          {{ model }} <q-icon class="q-ml-xs" name="euro_symbol" />
        </q-knob>
      </div>

      <p class="caption">Readonly state</p>
      <q-knob
        v-model="model"
        :min="min"
        :max="max"
        color="primary"
        readonly
      >
        <q-icon class="q-mr-xs" name="volume_up" /> {{ model }}
      </q-knob>

      <p class="caption">Disabled state</p>
      <q-knob
        v-model="model"
        :min="min"
        :max="max"
        disable
      >
        <q-icon class="q-mr-xs" name="volume_up" /> {{ model }}%
      </q-knob>

      <p class="caption">Inside Field</p>
      <q-field
        label="Amount to spend"
        helper="Touch to select an amount (USD)"
        icon="local_atm"
      >
        <q-knob
          v-model="model"
          :min="min"
          :max="max"
        />
      </q-field>

      <p class="caption">On a dark background</p>
      <div class="dark-example">
        <q-knob
          color="orange"
          track-color="grey-8"
          v-model="model"
          :min="min"
          :max="max"
          class="q-my-md"
        />
        <q-field
          dark
          icon="thumb_up"
          label="Rating"
          helper="How much do you rate this article?"
        >
          <q-knob
            color="orange"
            track-color="grey-8"
            v-model="model"
            :min="min"
            :max="max"
            class="q-my-md"
          />
        </q-field>
      </div>
    </div>
  </q-page>
</template>

<script>
import './docs-input.styl'

export default {
  data () {
    return {
      model: 30,
      min: 0,
      max: 50
    }
  }
}
</script>
{'fraction_non_alphanumeric': 0.17068503635667814, 'fraction_numerical': 0.010715652506697282, 'mean_word_length': 1.294556628621598, 'pattern_counts': {'":': 0, '<': 91, '<?xml version=': 0, '>': 91, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5543835', 'n_tokens_mistral': 1824, 'n_tokens_neox': 1759, 'n_words': 295}