CraydelDrawer

Installation

Get the latest version by NPM:

$ npm i @craydel/craydel-drawer

Register Plugin

If you use the plugin API, the component will be registered as a global component just like when including it with the script tag, but you won't need to re-register it through the components property in your own components.

Create the plugin file e.g craydel-components.js file.

// craydel-components.js
import Vue from 'vue'
import CraydelDrawer from '@craydel/craydel-drawer/src/CraydelDrawer.vue'

const Components = {
  CraydelDrawer,
};

Object.keys(Components).forEach(name => {
  Vue.component(name, Components[name]);
});

export default Components;

Next reference the plugin file in your nuxt.config.js

// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
  '~/plugins/craydel-components.js'
]

Props

| Name | Type | Default | Description | |--------------------------|---------|---------|-------------------------------------------------------| | show-drawer | boolean | false | Controls whether the component is visible or hidden. | | show-back | boolean | false | Control whether the back button is visible or hidden. | | hide-overlay | boolean | false | Hides the display of the overlay. | | hide-footer | boolean | false | Hides the display of the drawer's footer. | | hide-header | boolean | false | Hides the display of the drawer's header. | | permanent | boolean | false | The drawer remains visible regardless of screen size. | | disable-clicking-outside | boolean | false | Disables clicking outside the drawer to close it. | | no-shadow | boolean | false | Removes the shadow from the drawer. |

Events

| Name | Description | |------------|:-----------------------------------------| | hideDrawer | Emitted when the drawer is closed. | | goBack | Emitted when the back button is clicked. |

Slots

| Name | Description | |--------|:----------------------------------------------------------------------------------------| | header | A slot at the top of the drawer used to show the title of the drawer. | | footer | A slot at the bottom of the drawer used to show footer content such as a submit button. |

Usage

An example showing a drawer with a form.

<v-btn @click="show_drawer = true">Open drawer</v-btn>

<craydel-drawer
        :show-drawer="show_drawer"
        @hideDrawer="show_drawer = false">

  <template v-slot:header>
    User details
  </template>

  <div ref="drawer_top" class="drawer__content">
    <form>
      <div class="form-group">
        <label class="field-label" for="full_name">Full name</label>
        <craydel-text-field
                id="full_name"
        ></craydel-text-field>
      </div>
      <div class="form-group">
        <label class="field-label" for="age">Age</label>
        <craydel-text-field
                id="age"
        ></craydel-text-field>
      </div>
      <div class="form-group">
        <label class="field-label" for="email">Email</label>
        <craydel-text-field
                id="email"
                type="email"
        ></craydel-text-field>
      </div>
    </form>
  </div>

  <template v-slot:footer>
    <v-btn block class="btn btn-primary" @click="submitDetails">Submit</v-btn>
  </template>

</craydel-drawer>

data() {
  return {
    show_drawer: false
  }
}