tabbed-macos-modal

Tabbed MacOS-Like Modal

Tabbed MacOS-Like Modal is a Vue 3 plugin for creating modals like MacOS Settings App

Mobile version

Installation

Use the npm to install

npm i tabbed-macos-modal

Register globally

import TabbedModal from 'tabbed-macos-modal'
import 'tabbed-macos-modal/dist/style.css'

const app = createApp(...)

app.use(TabbedModal)

Or register locally

import { TabbedModal, TabbedModalItem } from 'tabbed-macos-modal'
import 'tabbed-macos-modal/dist/style.css'

Usage

<TabbedModal 
  ref="modal" 
  title="Settings" 
  sidebar-search
  v-if="showModal" 
  @close="showModal = false"
>
  <!-- <template #title>
    custom title 🌍
  </template> -->
  <!-- <template #sidebar>
    <span class="my-custom-tab" @click="modal.goto('main', true)">To Main tab 😱</span>
    <span class="my-custom-tab" @click="modal.goto('modifications', true)">To Modifications</span>
    <span class="my-custom-tab" @click="modal.goto('childModificationsDeep2')">To childModificationsDeep1 👽</span>
  </template> -->
  <!-- <template #closeIcon>
      close button here 👀
  </template> -->

  content here...
  
  <TabbedModalItem name="main" title="Main tab">
    <a href="#" @click="modal.goto('childModificationsDeep2')">-> childModificationsDeep2 tab</a>
    content here...
    <template #footer>
      ITEMFOOTER
    </template>
  </TabbedModalItem> 

  <TabbedModalItem name="products" title="Products">
    <template #header>
      <span class="custom-header">
        my custom header 👽👽👽
      </span>
    </template>

    content here...

    <template #footer>
      ITEMFOOTER
    </template>
  </TabbedModalItem>

  <TabbedModalItem name="modifications" head-title="modifications head title 👋">
    gogi
    <a href="#" @click="modal.goto('childModifications')">-> childModifications</a>

    <TabbedModalItem name="childModifications" title="Modification Items" @goback="console.log('go back!')">
      I'M childModifications

      <!-- example of dynamic height calculation feature, check in mobile mode! -->
      <button class="button" @click="displayImage = !displayImage">click me</button>

      <img src="https://raw.githubusercontent.com/tinkomob/tabbed-macos-modal/HEAD/defend.jpg">

      <a href="#" @click="modal.goto('childModificationsDeep1')">-> childModificationsDeep1</a>
      <a href="#" @click="modal.goto('childModificationsDeep2')">-> childModificationsDeep2</a>

      <div class="test" v-if="displayImage">
        dynamic content...
      </div>

      <div class="beautiful-block" v-if="!displayImage" style="width: 50px; height: 50px; background-color: red;"></div>

      <TabbedModalItem name="childModificationsDeep1" ref="childModificationsDeep1Ref" @goback="console.log('childModificationsDeep1')">
        I'M childModificationsDeep1
        <template #footer>
          <button @click="childModificationsDeep1Ref.goBack()">save and go back</button>
          <button @click="modal.goto('products', true)">go to products</button>
        </template>
      </TabbedModalItem>

      <TabbedModalItem name="childModificationsDeep2">
        I'M childModificationsDeep1
      </TabbedModalItem>
    </TabbedModalItem>

  </TabbedModalItem>
  <TabbedModalItem name="composition" title="Composition" head-title="test head title">
    content here
    <template #footer>
      composition footer
    </template>
  </TabbedModalItem>

  <template #mainFooter>
    MAIN FOOTER
  </template>
</TabbedModal>

TabbedModal Props (See example in src/App.vue)

TabbedModalItem Props (See example in src/App.vue)

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.