<commit_before><template>
  <AposInputWrapper
    :modifiers="modifiers" :field="field"
    :error="effectiveError" :uid="uid"
  >
    <template #body>
      <div class="apos-input-wrapper">
        <div class="apos-range">
          <input
            type="range"
            :min="field.min"
            :max="field.max"
            :step="field.step"
            class="apos-range__input"
            v-model="next"
            :id="uid"
          >
          <div class="apos-range__scale">
            <span>
              <span class="apos-sr-only">
                Min:
              </span>
              {{ minLabel }}
            </span>
            <span>
              <span class="apos-sr-only">
                Max:
              </span>
              {{ maxLabel }}
            </span>
          </div>
        </div>
        <div
          class="apos-range__value"
          aria-hidden="true"
          :class="{'is-unset': !isSet}"
        >
          {{ valueLabel }}
          <AposButton
            type="quiet" label="Clear"
            class="apos-range__clear"
            :modifiers="['no-motion']"
            @click="unset"
          />
        </div>
      </div>
    </template>
  </AposInputWrapper>
</template>

<script>
import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';

export default {
  name: 'AposInputRange',
  mixins: [ AposInputMixin ],
  data() {
    return {
      unit: this.field.unit || ''
    };
  },
  computed: {
    minLabel() {
      return this.field.min + this.unit;
    },
    maxLabel() {
      return this.field.max + this.unit;
    },
    valueLabel() {
      return this.next + this.unit;
    },
    isSet() {
      // Detect whether or not a range is currently unset
      // Use this flag to hide/show UI elements
      if (this.next >= this.field.min) {
        return true;
      } else {
        return false;
      }
    }
  },
  mounted() {
    // The range spec defaults to a value of midway between the min and max
    // Example: a range with an unset value and a min of 0 and max of 100 will become 50
    // This does not allow ranges to go unset :(
    if (!this.next) {
      this.unset();
    }
  },
  methods: {
    // Default to a value outside the range, to be used as a flag.
    // The value will be set to null later in validation
    unset() {
      this.next = this.field.min - 1;
    },
    validate(value) {
      if (this.field.required) {
        if (!value) {
          return 'required';
        }
      }
      return false;
    },
    convert(value) {
      return parseFloat(value);
    }
  }
};
</script>

<style lang="scss" scoped>
  .apos-input-wrapper {
    @include type-base;
    display: flex;
    justify-content: space-between;
    align-content: flex-start;
  }

  .apos-range__value {
    padding-top: 7px;
    min-width: 100px;
    &.is-unset {
      opacity: 0;
      pointer-events: none;
    }
    .apos-range__clear {
      margin-left: 5px;
    }
  }

  .apos-range {
    flex-grow: 1;
    margin-right: 20px;
  }

  .apos-range__scale {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
  }

  .apos-range__scale {
    @include type-small;
    color: var(--a-base-4);
    transition: color 0.5s ease;
  }

  // adapted from http://danielstern.ca/range.css/#/
  .apos-range__input {
    width: 100%;
    margin: 5px 0;
    background-color: transparent;
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -webkit-appearance: none;
    transition: all 0.3s ease;
    &:focus {
      outline: none;
      & + .apos-range__scale {
        color: var(--a-text-primary);
      }
    }
  }

  .apos-range__input::-webkit-slider-runnable-track {
    width: 100%;
    height: 5px;
    border: 1px solid var(--a-base-4);
    background: var(--a-base-7);
    border-radius: 25px;
    cursor: pointer;
  }

  .apos-range__input::-webkit-progress-value {
    background: var(--a-primary);
  }

  .apos-range__input::-webkit-slider-thumb {
    margin-top: -6px;
    width: 15px;
    height: 15px;
    border: 1px solid var(--a-primary-button-active);
    border-radius: 50%;
    background: var(--a-primary);
    cursor: pointer;
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -webkit-appearance: none;
  }

  .apos-range__input:focus::-webkit-slider-runnable-track {<commit_msg>disable range<commit_after><template>
  <AposInputWrapper
    :modifiers="modifiers" :field="field"
    :error="effectiveError" :uid="uid"
  >
    <template #body>
      <div class="apos-input-wrapper">
        <div class="apos-range" v-tooltip="tooltip">
          <input
            type="range"
            :min="field.min"
            :max="field.max"
            :step="field.step"
            class="apos-range__input"
            v-model="next"
            :id="uid"
            :disabled="field.disabled"
          >
          <div class="apos-range__scale">
            <span>
              <span class="apos-sr-only">
                Min:
              </span>
              {{ minLabel }}
            </span>
            <span>
              <span class="apos-sr-only">
                Max:
              </span>
              {{ maxLabel }}
            </span>
          </div>
        </div>
        <div
          class="apos-range__value"
          aria-hidden="true"
          :class="{'is-unset': !isSet}"
        >
          {{ valueLabel }}
          <AposButton
            type="quiet" label="Clear"
            class="apos-range__clear"
            :modifiers="['no-motion']"
            @click="unset"
          />
        </div>
      </div>
    </template>
  </AposInputWrapper>
</template>

<script>
import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';

export default {
  name: 'AposInputRange',
  mixins: [ AposInputMixin ],
  data() {
    return {
      unit: this.field.unit || ''
    };
  },
  computed: {
    tooltip() {
      let msg = false;
      if (this.field.disabled) {
        msg = 'This field is disabled';
      }
      return msg;
    },
    minLabel() {
      return this.field.min + this.unit;
    },
    maxLabel() {
      return this.field.max + this.unit;
    },
    valueLabel() {
      return this.next + this.unit;
    },
    isSet() {
      // Detect whether or not a range is currently unset
      // Use this flag to hide/show UI elements
      if (this.next >= this.field.min) {
        return true;
      } else {
        return false;
      }
    }
  },
  mounted() {
    // The range spec defaults to a value of midway between the min and max
    // Example: a range with an unset value and a min of 0 and max of 100 will become 50
    // This does not allow ranges to go unset :(
    if (!this.next) {
      this.unset();
    }
  },
  methods: {
    // Default to a value outside the range, to be used as a flag.
    // The value will be set to null later in validation
    unset() {
      this.next = this.field.min - 1;
    },
    validate(value) {
      if (this.field.required) {
        if (!value) {
          return 'required';
        }
      }
      return false;
    },
    convert(value) {
      return parseFloat(value);
    }
  }
};
</script>

<style lang="scss" scoped>
  .apos-input-wrapper {
    @include type-base;
    display: flex;
    justify-content: space-between;
    align-content: flex-start;
  }

  .apos-range__value {
    padding-top: 7px;
    min-width: 100px;
    &.is-unset {
      opacity: 0;
      pointer-events: none;
    }
    .apos-range__clear {
      margin-left: 5px;
    }
  }

  .apos-range {
    flex-grow: 1;
    margin-right: 20px;
  }

  .apos-range__scale {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
  }

  .apos-range__scale {
    @include type-small;
    color: var(--a-base-4);
    transition: color 0.5s ease;
  }

  // adapted from http://danielstern.ca/range.css/#/
  .apos-range__input {
    width: 100%;
    margin: 5px 0;
    background-color: transparent;
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -webkit-appearance: none;
    transition: all 0.3s ease;
    &:focus {
      outline: none;
      & + .apos-range__scale {
        color: var(--a-text-primary);
      }
    }
  }

  .apos-range__input[disabled] {
    cursor: not-allowed;
  }

  .apos-range__input::-webkit-slider-runnable-track {
    width: 100%;
    height: 5px;
    border: 1px solid var(--a-base-4);
    background: var(--a-base-7);
    border-radius: 25px;
    cursor: pointer;
  }

  .apos-range__input::-webkit-progress-value {
    background: var(--a-primary);
  }

  .apos-range__input[disabled]::-webkit-progress-value {
    background: var(--a-primary-button-disabled);
  }

  .apos-range__input::-webkit-slider-thumb {
    margin-top: -6px;
    width: 15px;
    height: 15px;
    border: 1px solid var(--a-primary-button-active);
    border-radius: 50%;
    background: var(--a-primary);
    cursor: pointer;
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -webkit-appearance: none;
  }
  .apos-range__input[disabled]::-webkit-slider-thumb {
    background: var(--a-primary-button-disabled);
  }

  .apos-range__input:focus::-webkit-slider-runnable-track {
{'fraction_non_alphanumeric': 0.14260944950151713, 'fraction_numerical': 0.00953619419159081, 'mean_word_length': 1.8094368340943683, 'pattern_counts': {'":': 0, '<': 57, '<?xml version=': 0, '>': 59, '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': '5396437', 'n_tokens_mistral': 3119, 'n_tokens_neox': 3048, 'n_words': 635}