Allow override of empty templates

CSalih commented 3 years ago

Hello iNeoO,

i want to remove the button-previous and button-next button from the ui, but with the current approach (slot with if) it does not work.

For example:

  <vue-meeting-selector :date="currentDate" :meetings-days="meetingsDays">
    <template #button-previous/>
    <template #button-next />
  </vue-meeting-selector>

Current Output:

<div class="tab__pagination" :class="cssClass.tabPaginationNext">
    <button type="button" class="tab__pagination__button tab__pagination__button--right" :disabled="loading"
        :class="cssClass.tabPaginationNextButton" @click="nextDate">
        <arrow-icon direction="right" />
    </button>
</div>

Expected Output:

<div class="tab__pagination" :class="cssClass.tabPaginationNext">
</div>

Putting the button into the slot tag would solve this problem, but i did not check if something else would get broken. What is the reason to use <slot if.../> <button v-else /> instead of <slot> <button/> </slot>?

iNeoO commented 3 years ago

HI empty slot aren't detected by vuejs, maybe set an empty span inside ?

  <vue-meeting-selector :date="currentDate" :meetings-days="meetingsDays">
      <template #button-previous><span></span></template>
      <template #button-next><span></span></template>
  </vue-meeting-selector>

for slot if, I did not know at the time I created the component that we could do this way, I will make a mr

CSalih commented 3 years ago

Hallo iNeoO,

thank you for the quick solution, i appreciate that :smile:

v-if="$slots['button-previous']" with an empty template should be either undefined or null i guess and the condition is therefor false. Empty span would may work didn't try it.

Regards

iNeoO / vue-meeting-selector

Allow override of empty templates #17