i-drawer-vue

Vue Drawer Package by Ilham Gurbanly.

Drawer Package for Vue 3.

Installation

$ npm install i-drawer-vue

Usage

main.ts: If you wish use it as plugin, import and use it in main.ts file. And do not forget to import css file. This is global import.

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import IDrawer from "i-drawer-vue";
import "i-drawer-vue/dist/style.css";

createApp(App).use(IDrawer).mount('#app');

Local import as package in components:

<script setup lang="ts">
    import { reactive, ref } from "vue";
    import { IDrawer, type IDrawerOptions } from "i-drawer-vue";
    import "i-drawer-vue/dist/style.css";
</script>

App.vue:

<script setup lang="ts">

import { reactive, ref } from 'vue';
import { IDrawer, type IDrawerOptions } from 'i-drawer-vue';
import "i-drawer-vue/dist/style.css";

const show = ref<boolean>(false);

const options = reactive<IDrawerOptions>({
  closeableMask: true,
  mask: true,
  contentColor: 'white',
  placement: 'top',
  renderOnShow: false,
  maskColor: 'rgba(0, 0, 0, .5)',
  hideOnDesktop: false,
  resizable: true, 
  closeOnEsc: true, 
  padding: 20
})

</script>

<template>


  <IDrawer 
    :show="show" 
    :options="options" 
    @on-close="show = false"
    @on-resize="(data) => { console.log('new-size', data) }"
    @on-resize-start="() => { console.log('resizing_started'); }" 
    @on-resize-end="() => { console.log('resizing_ended'); }"
  >

    <template #header>

      
      <h2 class="profile-name">Emily Smith</h2>
      <p class="profile-desc">Front-End Developer</p>

    </template>

    <template #body>
      <p class="profile-txt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
        been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the
        librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy
        text for Letraset's Body Type sheets. It has survived not only many decades, but also the leap into electronic
        typesetting, remaining essentially unchanged. It was popularised thanks to these sheets and more recently with
        desktop publishing software like Aldus PageMaker and Microsoft Word including versions of Lorem Ipsum.</p>
    </template>

    <template #footer>
      <div class="profile-footer">
        <button class="btn btn-primary">Follow</button>
        <button class="btn btn-primary">Share Profile</button>
      </div>
    </template>

  </IDrawer>

</template>

Props and named slots