<commit_before><!-- This Source Code Form is licensed MPL-2.0: http://mozilla.org/MPL/2.0 -->

<docs>
  # B-PRO-INPUT
  A property input element, usually for numbers, toggles or menus.
  ## Properties:
  *value*
  : Contains the input being edited.
  *readonly*
  : Make this component non editable for the user.
</docs>

<style lang="scss">
  @import 'mixins.scss';
  .b-pro-input        {
    display: flex; justify-content: flex-end;
    .b-pro-input-ldiv[class]:before { content: "\200b"; /* zero width character to force line height */ }
    .b-pro-input-knob { height: 4.5em; }
    .b-pro-input-span {
      pointer-events: none; user-select: none;
      max-width: 100%;
      white-space: nowrap;
      text-align: center;
      margin-right: -999em; /* avoid widening parent */
      overflow: hidden;
      z-index: 9;
    }
    &.b-pro-input:hover .b-pro-input-span { overflow: visible; }
  }
</style>

<template>
  <b-vflex class="b-pro-input tabular-nums" :data-bubble="blurb" >
    <b-knob class="b-pro-input-knob" v-if="type=='knob'" :value="get_num()" @input="set_num ($event)" />
    <span   class="b-pro-input-span" v-if="!!label">{{ label }}</span>
  </b-vflex>
</template>

<script>
function pro_input_data () {
  const data = {
    // ident:   { default: '', getter: async c => await this.prop.identifier(), },
    // group:   { default: '', getter: async c => await this.prop.group(), },
    is_numeric: { default:  0, getter: async c => await this.prop.is_numeric(), },
    label:      { default: '', getter: async c => await this.prop.label(), },
    nick:       { default: '', getter: async c => await this.prop.nick(), },<commit_msg>EBEAST: b/pro-input.vue: show property nicks and label as tooltip<commit_after><!-- This Source Code Form is licensed MPL-2.0: http://mozilla.org/MPL/2.0 -->

<docs>
  # B-PRO-INPUT
  A property input element, usually for numbers, toggles or menus.
  ## Properties:
  *value*
  : Contains the input being edited.
  *readonly*
  : Make this component non editable for the user.
</docs>

<style lang="scss">
  @import 'mixins.scss';
  .b-pro-input        {
    display: flex; justify-content: flex-end;
    .b-pro-input-ldiv[class]:before { content: "\200b"; /* zero width character to force line height */ }
    .b-pro-input-knob { height: 4.5em; }
    .b-pro-input-span {
      pointer-events: none; user-select: none;
      max-width: 100%;
      white-space: nowrap;
      text-align: center;
      margin-right: -999em; /* avoid widening parent */
      overflow: hidden;
      z-index: 9;
    }
    &.b-pro-input:hover .b-pro-input-span { overflow: visible; }
  }
</style>

<template>
  <b-vflex class="b-pro-input tabular-nums" :data-bubble="blurb || label" >
    <b-knob class="b-pro-input-knob" v-if="type=='knob'" :value="get_num()" @input="set_num ($event)" />
    <span   class="b-pro-input-span" v-if="!!nick">{{ nick }}</span>
  </b-vflex>
</template>

<script>
function pro_input_data () {
  const data = {
    // ident:   { default: '', getter: async c => await this.prop.identifier(), },
    // group:   { default: '', getter: async c => await this.prop.group(), },
    is_numeric: { default:  0, getter: async c => await this.prop.is_numeric(), },
    label:      { default: '', getter: async c => await this.prop.label(), },
    nick:       { default: '', getter: async c => await this.prop.nick(), },
{'fraction_non_alphanumeric': 0.1827065442700622, 'fraction_numerical': 0.010068107787977496, 'mean_word_length': 2.873853211009174, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 39, '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': '883168', 'n_tokens_mistral': 1207, 'n_tokens_neox': 1176, 'n_words': 297}