Add scoped property 'loading' to 'input-start' and 'input-end' scope

[janvanhelvoort]

[codecov[bot]]

Codecov Report

Merging #241 into master will not change coverage. The diff coverage is n/a.

@@          Coverage Diff           @@
##           master    #241   +/-   ##
======================================
  Coverage    84.3%   84.3%           
======================================
  Files           9       9           
  Lines         293     293           
  Branches       84      86    +2     
======================================
  Hits          247     247           
  Misses         41      41           
  Partials        5       5

Impacted Files	Coverage Δ
src/component.vue	86.04% <ø> (ø)	:arrow_up:

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update c4ce7b6...5903634. Read the comment docs.

[iliyaZelenko]

Hi, thanks for the contribution, that's cool. But I'm not sure that this makes sense: what is the problem of getting loading value if you pass it as prop :loading="myLoadingVal"? Just use myLoadingVal. See how it's done in this example.

[janvanhelvoort]

We have build a wrapper component around cool-select and I want to pass through all properties from the wrapper component to cool-select without defining every prop that cool-select supports on our own component. And because i'm not define the loading prop on our component, I don't have access to the loading prop inside our wrapper components render template.

[janvanhelvoort]

Now we need to do:

<cool-select :items="items" v-model="selected" v-bind="$attrs" v-on="$listeners" :disable-search="disableSearch" item-value="value" item-text="text">
  <template slot="input-start" v-if="!disableSearch">
    <div class="c-base-select__input-start"><font-awesome-icon :icon="['fal', 'search']"/></div>
  </template>
  <template slot="item" slot-scope="{ item }">
    <span :class="[{'is-disabled': item.disabled}]" @click="onClick($event, item)">{{ item.text }}</span>
  </template>
  <template slot="input-end" >
    <base-loading :is-active="$attrs.loading || false" />
  </template>
</cool-select>

Instead of: (see the last template block)

<cool-select :items="items" v-model="selected" v-bind="$attrs" v-on="$listeners" :disable-search="disableSearch" item-value="value" item-text="text">
  <template slot="input-start" v-if="!disableSearch">
    <div class="c-base-select__input-start"><font-awesome-icon :icon="['fal', 'search']"/></div>
  </template>
  <template slot="item" slot-scope="{ item }">
    <span :class="[{'is-disabled': item.disabled}]" @click="onClick($event, item)">{{ item.text }}</span>
  </template>
  <template slot="input-end" slot-scope="{ loading }" >
    <base-loading :is-active="$loading " />
  </template>
</cool-select>

[iliyaZelenko]

I’ll look and think about it a bit later, I want to choose the best solution in this situation. Thanks for the description of the problem.

[janvanhelvoort]

One more thing, in the first example, i'm using $attrs.loading instead of the scoped property. But because the variable is not a property from the component, but a property from $attrs, the value could be undefined if the property is not set on the wrapper component.

When we could use the scoped property, the value will always have a value because you have defined it in props.js