rv-named-slot.vue

<docs>
- share-success-root-wrapper
 -- This class is to hide custom blur overflow from overlay-scrollbars modal
</docs>

// want to go over
 // 1 - use of overlay-scrollbars
 // 2 - use of `named slot`
 // 3 - dynamic classname
 // 4 - native SVG components

<template>
  <div
    :class="{ 'share-success-root-wrapper': componentType === 'share-success' }"
  >
    <!-- FullScroll (fully scrollable) modal -->
    <overlay-scrollbars
      :id="componentType === 'gls-download-content' && 'glsDownloadContentContainer'"
      :class="`${componentType} gls-container`"
    >
      <text-header
        :block-name="componentType"
        :comment-message="commentMessage"
        :header-text="headerText"
      />
      <slot name="info" />
      <div
        v-if="hasValidListItems"
        :class="`${componentType}-collapse`"
      >
        <button
          :class="[
            `${componentType}-collapse__btn`,
            {'gls-download-content-collapse__btn--list-closed':
              componentType === 'gls-download-content' && !listOpen}]"
          @click="toggleEvent"
        >
          <span class="toggler-span">
            {{ toggleTitle }}
          </span>
          <chevron-down-icon v-if="!listOpen" />
          <chevron-up-icon v-else />
        </button>

        <div
          v-if="listOpen && componentType === 'gls-download-content'"
          class="dark-light-gradient gls-gradient"
        />
        <slot name="list" />
        <div
          v-if="listOpen"
          class="light-dark-gradient gls-gradient"
        />
      </div>
      <slot name="footer" />
    </overlay-scrollbars>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { FILE_EXPIRATION } from '@/constants/file.constants';
import ChevronUpIcon from '@/assets/icons/ChevronUpIcon.vue';
import ChevronDownIcon from '@/assets/icons/ChevronDownIcon.vue';
import TextHeader from '@/components/Shared/TextHeader.vue';

export default Vue.extend({
  name: 'FullScrollModal',
  components: {
    ChevronUpIcon,
    ChevronDownIcon,
    TextHeader,
  },
  props: {
    componentType: {
      type: String,
      required: false,
      default: '',
      validator: type => ['share-success', 'gls-download-content'].includes(type),
    },
    userList: {
      type: Array,
      required: false,
      default: () => [],
    },
    // ...
  },
});
</script>


// usage
<template>
  <full-scroll-modal
    component-type="share-success"
    :expiration-days="expirationDays"
    :expiration-date-string="expirationDateString"
    :has-valid-list-items="hasValidRecipients"
    :list-open="listOpen"
    :is-public="isPublic"
    :send-email-checked="sendEmailChecked"
    :toggle-title="toggleTitle"
    @updateToggleState="listOpen = !listOpen"
  >
    <template #info>
      <file-share-link
        component-type="share-success"
        :is-public="isPublic"
        :uniq-dir="uniqDir"
      />
      <hr
        v-if="hasValidRecipients"
        class="share-success__hr"
      >
    </template>

    <template #list>
      <simple-list
        v-if="listOpen"
        type="user"
        :list="validRecipients"
        :num-columns="1"
        :does-need-separate-component="true"
      />
    </template>

    <template #footer>
      <help-support
        class="share-success__help-text thin-font"
        :class="{'share-success__help-text--no-list': !hasValidRecipients}"
      >
        Need help? Contact us at&nbsp;
      </help-support>
    </template>
  </full-scroll-modal>
</template>

<script lang="ts">