Accessories

npm licensenpm downloadGitHub top languageGitHub issuesnpm version

Accessories

This package contains a suite of reusable components that can be used exclusively within the Enso ecosystem.

For live examples and demos, you may visit laravel-enso.com

Installation

Install the package:

yarn add @enso-ui/accessories

Import the desired component(s):

import {
    Accessories, Addresses, Comments, Discussions, Documents,
} from '@enso-ui/accessories/bulma';

Usage

Accessories.vue

The bulma styled container for the various components that acts in a similar fashion to the Tabs.

Example:

import { Accessories, Addresses, Comments } from '@enso-ui/accessories/bulma';
import { Tab } from `@enso-ui/tabs/bulma`;

<accessories>
    <template slot-scope="{ count }">
        <tab keep-alive
            id="Addresses">
            <addresses :id="myCompanyId"
                type="LaravelEnso\Companies\app\Models\Company"
                @update="$set(count, 'Addresses', $refs.addresses.count)"
                ref="addresses"/>
            <comments :id="myCompanyId"
                type="LaravelEnso\Companies\app\Models\Company"
                @update="$set(count, 'Comments', $refs.comments.count)"
                ref="comments"/>
        </tab>
    </template>
</accessories>

The exposed count object is used to display a counter badge on each tab and it's up to each tab content to manage this count.

The accessory components can be attached to any model so that you could have, for instance, addresses for companies and addresses for people. They all work with a corresponding backend package that is built around a Model that has polymorphic relations to the attached models.

Note

Being built around a polymorphic relation all the accessory components have two required props:

  • id - number, required, the id of the morphable model
  • type - string, required, default null, the type of the morphable model

Tip

The components can be used within the Accesories or independently.

Addresses

Bulma styled address manager components

Should be used with their backend sibling

Addresses.vue

Example:
<addresses :id="myCompanyId"
   type="LaravelEnso\Companies\app\Models\Company"/>
Extra Properties:
  • query - string, optional, default '', addresses filtering search query string
Customization

If you need to customize the address card, you may also pass a different template using the 'address' slot, provided for this purpose.

Also, when declaring custom fields in the address form template, respective slots will be be generated in the AddressForm component, so you may also add further form customizations.

As an example of such customization, you may take a look at the RoAddresses package and the RoAddress.vue component.

AddressesCard.vue

Addresses in a Card with some additional options

Example:
<addresses-card collapsed
   title="Company Addresses"
   :id="myCompanyId"
   type="LaravelEnso\Companies\app\Models\Company"/>
Extra Properties:
  • icon - string|array|object, optional - default 'faMapSigns', the icon for the card title
  • collapsed - boolean, optional, default false - determines the collapsed stated of the card on initial render
  • title - string, optional - title for the card

Comments

Bulma styled comments manager components.

Should be used with their backend sibling

Comments.vue

Example:
<comments :id="myCompanyId"
   type="LaravelEnso\Companies\app\Models\Company"/>
Extra Properties:
  • query - string, optional - used for filtering the comments

CommentsCard.vue

Comments in a Card with some additional options

Example:
<comments-card collapsed
   title="Posted Comments"
   :id="myCompanyId"
   type="LaravelEnso\Companies\app\Models\Company"/>
Extra Properties:
  • icon - string|array|object, optional, default faComments, the icon for the card
  • collapsed - boolean, optional, default false, if true, the card is collapsed
  • title - string, optional, default '', the title for the card

Discussions

Bulma discussion manager components.

Should be used with their backend sibling

Discussions.vue

Example:
<discussions :id="myCompanyId"
   type="LaravelEnso\Companies\app\Models\Company"/>

Documents

Bulma styled document manager components.

Should be used with their backend sibling

Documents.vue

Example:
<documents :id="myCompanyId"
   type="LaravelEnso\Companies\app\Models\Company"/>
Extra Properties:
  • query - string, optional - used for filtering documents
  • compact - boolean, optional, default false - if true a compact display mode is used

DocumentsCard.vue

Example:
<documents-card collapsed
   title="Uploaded Documents"
   :id="myCompanyId"
   type="LaravelEnso\Companies\app\Models\Company"/>
Extra Properties:
  • collapsed - boolean, optional, default false - controls the card initial render state
  • title - string, optional - the title for the card

Depends on

Discussions are currently built with vue-quill-editor & quill but in the near future we will migrate it on our own wysiywg

Contributions

are welcome. Pull requests are great, but issues are good too.

Thank you to all the people who already contributed to Enso!

License

ISC

Last Updated: 3/15/2019, 11:13:23 AM