Jantho1990

<template>
  <div id="app">
    <h1>Vue StarRating</h1>
    <div class="star-rating-container">
      <img class="logo" src="./assets/logo.png">
      <star-rating
        :rating="rating"
        :min-rating="minRating"
        :max-rating="maxRating"
        :star-ratio="starRatio"

Jantho1990

<style>
.rating-inputs {
  grid-area: input;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  text-align: left;
  margin: auto;
}

Jantho1990

<script>
import ratingIsValid from '../lib/validate'
// ...
export default {
  // ...
  beforeMount () {
    let {rating, minRating, maxRating, starRatio, limit} = this
    if (!ratingIsValid(rating, minRating, maxRating, starRatio, limit)) {
      throw new Error(
        `Illegal rating values detected. You should check your initial App state. (rating: ${rating}, minRating: ${minRating}, maxRating: ${maxRating}, starRatio: ${starRatio}, limit: ${limit})`

Jantho1990

<script>
import inputIsValid from '../lib/validate'

export default {
  // ...
  methods: {
    anyAreEmpty (...values) {
      return values.filter(value => value === '').length > 0
    },
    handleRating () {

Jantho1990

export let ratingIsValid = function (rating, minRating, maxRating) {
  if (rating >= minRating && rating <= maxRating) return true
  return false
}

export let valuesNotZeroOrLess = function (...values) {
  let filteredValues = values.filter(value => value > 0)

  return values.length === filteredValues.length
}

Jantho1990

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <star-rating
      :rating="rating"
      :min-rating="minRating"
      :max-rating="maxRating"
      :star-ratio="starRatio"
      :limit="limit"
    />

Jantho1990

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <star-rating
      :rating="rating"
    />
    <rating-inputs
      :rating="rating"
      @rating-update="handleRatingUpdate"
    />

Jantho1990

<template>
  <div class="rating-inputs">
    <label for="rating">Rating</label>
    <input
      name="rating"
      type="number"
      v-model="rating_"
      v-on:input="handleRating"
    />
  </div>

Jantho1990

<template>
  <div class="rating-inputs">
    <label for="rating">Rating</label>
    <input
      name="rating"
      type="number"
      v-model="rating_"
    />
  </div>
</template>

Jantho1990

<template>
  <div class="rating-inputs">
    <label for="rating">Rating</label>
    <input
      name="rating"
      type="number"
    />
  </div>
</template>