scinote-web/app/views/design_elements/_modals.html.erb

<div>
  <h1>Modals</h1>
  <div id="modals" class="flex items-center gap-4 flex-wrap mb-6">
    <div ref="wizardModal">
      <button @click="showWizard = true" class="btn btn-primary">Show Wizard Modal</button>
      <wizard-modal
        v-if="showWizard"
        @close="showWizard = false"
        @alert="fireAlert"
        :params="wizardParams"
        :config="wizardConfig"
      />
    </div>

    <div ref="infoModalWrapper">
      <button @click="showInfo = true" class="btn btn-primary">Show Info Modal</button>
      <info-modal
        v-if="showInfo"
        @close="showInfo = false"
        ref="modal"
        :start-hidden="false"
        :info-params="infoParams"
        title="Some title"
        help-text="Help">
        <div>I am a component that gets consumed by the slot</div>
      </info-modal>
    </div>
  </div>


</div>


<%= javascript_include_tag 'vue_design_system_modals' %>