├── .babelrc
├── logo.png
├── cypress.json
├── src
    ├── utils
    │   ├── enableClick.js
    │   ├── generateId.js
    │   └── hyphenToPascal.js
    ├── components
    │   ├── Fetch
    │   │   ├── index.js
    │   │   ├── src
    │   │   │   └── Fetch.vue
    │   │   └── README.md
    │   ├── Toggle
    │   │   ├── index.js
    │   │   ├── src
    │   │   │   └── Toggle.vue
    │   │   └── README.md
    │   ├── Storage
    │   │   ├── index.js
    │   │   ├── src
    │   │   │   └── Storage.vue
    │   │   └── README.md
    │   ├── SmartList
    │   │   ├── index.js
    │   │   ├── src
    │   │   │   └── SmartList.vue
    │   │   └── README.md
    │   ├── MediaQuery
    │   │   ├── index.js
    │   │   ├── src
    │   │   │   └── MediaQuery.vue
    │   │   └── README.md
    │   ├── SimpleList
    │   │   ├── index.js
    │   │   ├── src
    │   │   │   └── SimpleList.vue
    │   │   └── README.md
    │   ├── ErrorBoundary
    │   │   ├── index.js
    │   │   ├── src
    │   │   │   └── ErrorBoundary.vue
    │   │   └── README.md
    │   ├── Carousel
    │   │   ├── index.js
    │   │   ├── src
    │   │   │   ├── CarouselSlide.vue
    │   │   │   └── Carousel.vue
    │   │   └── README.md
    │   ├── Listbox
    │   │   ├── index.js
    │   │   ├── src
    │   │   │   ├── ListboxItem.vue
    │   │   │   └── Listbox.vue
    │   │   └── README.md
    │   ├── Tabs
    │   │   ├── src
    │   │   │   ├── TabPane.vue
    │   │   │   ├── TabPanes.vue
    │   │   │   ├── TabList.vue
    │   │   │   ├── Tabs.vue
    │   │   │   └── Tab.vue
    │   │   ├── index.js
    │   │   └── README.md
    │   ├── index.js
    │   └── Expandable
    │   │   ├── src
    │   │       ├── ExpandableItem.vue
    │   │       ├── ExpandableBody.vue
    │   │       ├── ExpandableTitle.vue
    │   │       └── Expandable.vue
    │   │   ├── index.js
    │   │   └── README.md
    └── index.js
├── .postcssrc.js
├── public
    ├── favicon.ico
    └── index.html
├── .eslintrc.js
├── tests
    ├── unit
    │   ├── .eslintrc.js
    │   └── SmartList.spec.js
    └── e2e
    │   ├── .eslintrc
    │   ├── specs
    │       └── test.js
    │   ├── plugins
    │       └── index.js
    │   └── support
    │       ├── index.js
    │       └── commands.js
├── .editorconfig
├── playground
    ├── App.vue
    └── main.js
├── .gitignore
├── jest.config.js
├── .github
    ├── FEATURE_REQUEST_TEMPLATE.md
    ├── ISSUE_TEMPLATE.md
    ├── CONTRIBUTING.md
    └── CODE_OF_CONDUCT.md
├── README.md
├── LICENSE
└── package.json


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     "@vue/app"
4 |   ]
5 | }


--------------------------------------------------------------------------------
/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/banshee-ui/banshee/HEAD/logo.png


--------------------------------------------------------------------------------
/cypress.json:
--------------------------------------------------------------------------------
1 | {
2 |   "pluginsFile": "tests/e2e/plugins/index.js"
3 | }
4 | 


--------------------------------------------------------------------------------
/src/utils/enableClick.js:
--------------------------------------------------------------------------------
1 | export default fn => Object.assign({}, { click: fn })
2 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | }


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/banshee-ui/banshee/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/utils/generateId.js:
--------------------------------------------------------------------------------
1 | export default () => `_${Math.random().toString(36).substr(2, 9)}`
2 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   root: true,
3 |   'extends': [
4 |     'plugin:vue/essential',
5 |     '@vue/standard'
6 |   ]
7 | }


--------------------------------------------------------------------------------
/tests/unit/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   env: {
3 |     jest: true
4 |   },
5 |   rules: {
6 |     'import/no-extraneous-dependencies': 'off'
7 |   }
8 | }


--------------------------------------------------------------------------------
/src/utils/hyphenToPascal.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | export default str =>
3 |   str.replace(/(\-|^)([a-z])/gi, (match, delimter, hyphenated) => hyphenated.toUpperCase())
4 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*{js, vue}]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/playground/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |   </div>
 4 | </template>
 5 | 
 6 | <script>
 7 | export default {
 8 |   name: 'app',
 9 |   data () {
10 |     return {}
11 |   }
12 | }
13 | </script>
14 | 


--------------------------------------------------------------------------------
/src/components/Fetch/index.js:
--------------------------------------------------------------------------------
1 | import BansheeFetch from './src/Fetch'
2 | 
3 | BansheeFetch.install = function (Vue) {
4 |   Vue.component(BansheeFetch.name, BansheeFetch)
5 | }
6 | 
7 | export default BansheeFetch
8 | 


--------------------------------------------------------------------------------
/tests/e2e/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "plugins": [
 3 |     "cypress"
 4 |   ],
 5 |   "env": {
 6 |     "mocha": true,
 7 |     "cypress/globals": true
 8 |   },
 9 |   "rules": {
10 |     "strict": "off"
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/components/Toggle/index.js:
--------------------------------------------------------------------------------
1 | import BansheeToggle from './src/Toggle'
2 | 
3 | BansheeToggle.install = function (Vue) {
4 |   Vue.component(BansheeToggle.name, BansheeToggle)
5 | }
6 | 
7 | export default BansheeToggle
8 | 


--------------------------------------------------------------------------------
/src/components/Storage/index.js:
--------------------------------------------------------------------------------
1 | import BansheeStorage from './src/Storage'
2 | 
3 | BansheeStorage.install = function (Vue) {
4 |   Vue.component(BansheeStorage.name, BansheeStorage)
5 | }
6 | 
7 | export default BansheeStorage
8 | 


--------------------------------------------------------------------------------
/src/components/SmartList/index.js:
--------------------------------------------------------------------------------
1 | import BansheeSmartList from './src/SmartList'
2 | 
3 | BansheeSmartList.install = function (Vue) {
4 |   Vue.component(BansheeSmartList.name, BansheeSmartList)
5 | }
6 | 
7 | export default BansheeSmartList
8 | 


--------------------------------------------------------------------------------
/src/components/MediaQuery/index.js:
--------------------------------------------------------------------------------
1 | import BansheeMediaQuery from './src/MediaQuery'
2 | 
3 | BansheeMediaQuery.install = function (Vue) {
4 |   Vue.component(BansheeMediaQuery.name, BansheeMediaQuery)
5 | }
6 | 
7 | export default BansheeMediaQuery
8 | 


--------------------------------------------------------------------------------
/src/components/SimpleList/index.js:
--------------------------------------------------------------------------------
1 | import BansheeSimpleList from './src/SimpleList'
2 | 
3 | BansheeSimpleList.install = function (Vue) {
4 |   Vue.component(BansheeSimpleList.name, BansheeSimpleList)
5 | }
6 | 
7 | export default BansheeSimpleList
8 | 


--------------------------------------------------------------------------------
/playground/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import Banshee from '../src/'
 4 | 
 5 | Vue.config.productionTip = false
 6 | 
 7 | Vue.use(Banshee)
 8 | 
 9 | new Vue({
10 |   render: h => h(App)
11 | }).$mount('#app')
12 | 


--------------------------------------------------------------------------------
/tests/e2e/specs/test.js:
--------------------------------------------------------------------------------
1 | // https://docs.cypress.io/api/introduction/api.html
2 | 
3 | describe('My First Test', () => {
4 |   it('Visits the app root url', () => {
5 |     cy.visit('/')
6 |     cy.contains('h1', 'Welcome to Your Vue.js App')
7 |   })
8 | })
9 | 


--------------------------------------------------------------------------------
/src/components/ErrorBoundary/index.js:
--------------------------------------------------------------------------------
1 | import BansheeErrorBoundary from './src/ErrorBoundary'
2 | 
3 | BansheeErrorBoundary.install = function (Vue) {
4 |   Vue.component(BansheeErrorBoundary.name, BansheeErrorBoundary)
5 | }
6 | 
7 | export default BansheeErrorBoundary
8 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import * as BansheeComponents from './components'
 2 | 
 3 | const Banshee = {
 4 |   install (Vue) {
 5 |     Object.values(BansheeComponents).forEach(component => {
 6 |       Vue.use(component)
 7 |     })
 8 |   }
 9 | }
10 | 
11 | if (typeof window !== 'undefined' && window.Vue) {
12 |   window.Vue.use(Banshee)
13 | }
14 | 
15 | export default Banshee
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | /tests/e2e/videos/
 6 | /tests/e2e/screenshots/
 7 | 
 8 | # local env files
 9 | .env.local
10 | .env.*.local
11 | 
12 | # Log files
13 | npm-debug.log*
14 | yarn-debug.log*
15 | yarn-error.log*
16 | 
17 | # Editor directories and files
18 | .idea
19 | .vscode
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw*
25 | 


--------------------------------------------------------------------------------
/src/components/Carousel/index.js:
--------------------------------------------------------------------------------
 1 | import Carousel from './src/Carousel'
 2 | import Slide from './src/CarouselSlide'
 3 | 
 4 | Carousel.install = function (Vue) {
 5 |   Vue.component(Carousel.name, Carousel)
 6 | }
 7 | 
 8 | Slide.install = function (Vue) {
 9 |   Vue.component(Slide.name, Slide)
10 | }
11 | 
12 | export const BansheeCarousel = Carousel
13 | export const BansheeCarouselSlide = Slide
14 | 


--------------------------------------------------------------------------------
/src/components/Listbox/index.js:
--------------------------------------------------------------------------------
 1 | import Listbox from './src/Listbox'
 2 | import ListboxItem from './src/ListboxItem'
 3 | 
 4 | Listbox.install = function (Vue) {
 5 |   Vue.component(Listbox.name, Listbox)
 6 | }
 7 | 
 8 | ListboxItem.install = function (Vue) {
 9 |   Vue.component(ListboxItem.name, ListboxItem)
10 | }
11 | 
12 | export const BansheeListbox = Listbox
13 | export const BansheeListboxItem = ListboxItem
14 | 


--------------------------------------------------------------------------------
/src/components/Tabs/src/TabPane.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import generateId from '@/utils/generateId'
 3 | 
 4 | export default {
 5 |   name: 'BansheeTabPane',
 6 |   props: {
 7 |     tag: {
 8 |       type: String,
 9 |       default: 'div'
10 |     }
11 |   },
12 |   inject: ['tabs'],
13 |   render (h) {
14 |     return h(this.tag, {
15 |       key: generateId()
16 |     }, this.$slots.default)
17 |   }
18 | }
19 | </script>
20 | 


--------------------------------------------------------------------------------
/tests/e2e/plugins/index.js:
--------------------------------------------------------------------------------
 1 | // https://docs.cypress.io/guides/guides/plugins-guide.html
 2 | 
 3 | module.exports = (on, config) => {
 4 |   return Object.assign({}, config, {
 5 |     fixturesFolder: 'tests/e2e/fixtures',
 6 |     integrationFolder: 'tests/e2e/specs',
 7 |     screenshotsFolder: 'tests/e2e/screenshots',
 8 |     videosFolder: 'tests/e2e/videos',
 9 |     supportFile: 'tests/e2e/support/index.js'
10 |   })
11 | }
12 | 


--------------------------------------------------------------------------------
/src/components/Carousel/src/CarouselSlide.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import generateId from '@/utils/generateId'
 3 | 
 4 | export default {
 5 |   name: 'BansheeCarouselSlide',
 6 |   props: {
 7 |     tag: {
 8 |       type: String,
 9 |       default: 'li'
10 |     }
11 |   },
12 |   render (h) {
13 |     return h(this.tag, {
14 |       key: generateId() // Need to key for transition to correctly work
15 |     }, this.$slots.default)
16 |   }
17 | }
18 | </script>
19 | 


--------------------------------------------------------------------------------
/src/components/SimpleList/src/SimpleList.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   name: 'BansheeSimpleList',
 4 |   functional: true,
 5 |   props: {
 6 |     items: {
 7 |       type: Array,
 8 |       required: true
 9 |     }
10 |   },
11 |   render (h, { props, data }) {
12 |     return props.items.map((item, index) => {
13 |       return data.scopedSlots.default({
14 |         item,
15 |         index
16 |       })
17 |     })
18 |   }
19 | }
20 | </script>
21 | 


--------------------------------------------------------------------------------
/src/components/Tabs/src/TabPanes.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   name: 'BansheeTabPanes',
 4 |   props: {
 5 |     tag: {
 6 |       type: [String, Object],
 7 |       default: 'div'
 8 |     }
 9 |   },
10 |   inject: ['tabs'],
11 |   render (h) {
12 |     return h(this.tag, {
13 |       attrs: {
14 |         role: 'tabpanel',
15 |         tabindex: 0
16 |       }
17 |     }, [
18 |       this.$slots.default[this.tabs.getActiveIndex]
19 |     ])
20 |   }
21 | }
22 | </script>
23 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   moduleFileExtensions: [
 3 |     'js',
 4 |     'jsx',
 5 |     'json',
 6 |     'vue'
 7 |   ],
 8 |   transform: {
 9 |     '^.+\\.vue$': 'vue-jest',
10 |     '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
11 |     '^.+\\.jsx?$': 'babel-jest'
12 |   },
13 |   moduleNameMapper: {
14 |     '^@/(.*)$': '<rootDir>/src/$1'
15 |   },
16 |   snapshotSerializers: [
17 |     'jest-serializer-vue'
18 |   ],
19 |   testMatch: [
20 |     '<rootDir>/(tests/unit/**/*.spec.(ts|tsx|js)|**/__tests__/*.(ts|tsx|js))'
21 |   ]
22 | }
23 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
 8 |     <title>banshee</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but banshee doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/tests/e2e/support/index.js:
--------------------------------------------------------------------------------
 1 | // ***********************************************************
 2 | // This example support/index.js is processed and
 3 | // loaded automatically before your test files.
 4 | //
 5 | // This is a great place to put global configuration and
 6 | // behavior that modifies Cypress.
 7 | //
 8 | // You can change the location of this file or turn off
 9 | // automatically serving support files with the
10 | // 'supportFile' configuration option.
11 | //
12 | // You can read more here:
13 | // https://on.cypress.io/configuration
14 | // ***********************************************************
15 | 
16 | // Import commands.js using ES2015 syntax:
17 | import './commands'
18 | 
19 | // Alternatively you can use CommonJS syntax:
20 | // require('./commands')
21 | 


--------------------------------------------------------------------------------
/.github/FEATURE_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | # Feature Request
 2 | 
 3 | Adapted from [Vue's feature request template](https://new-issue.vuejs.org/?repo=vuejs/vue).
 4 | 
 5 | Have a cool idea to make Banshee better? Awesome! Thank you so much for thinking of ways to improve the library. Please fill out the template below in an issue to get started!
 6 | 
 7 | ## Template
 8 | 
 9 | **Title**: [FEATURE] {{ YOUR_TITLE_HERE }}
10 | 
11 | **What problem does this feature solve?**:
12 | Explain your use case, context, and rationale behind this feature request. More importantly, what is the **end user experience** you are trying to build that led to the need for this feature?
13 | 
14 | **What does the proposed API look like?**:
15 | Provide code samples of how this API would work and what it would look like to use.


--------------------------------------------------------------------------------
/src/components/index.js:
--------------------------------------------------------------------------------
 1 | export { BansheeCarousel, BansheeCarouselSlide } from './Carousel'
 2 | export { default as BansheeErrorBoundary } from './ErrorBoundary'
 3 | export { BansheeExpandable, BansheeExpandableItem, BansheeExpandableTitle, BansheeExpandableBody } from './Expandable'
 4 | export { default as BansheeFetch } from './Fetch'
 5 | export { BansheeListbox, BansheeListboxItem } from './Listbox'
 6 | export { default as BansheeMediaQuery } from './MediaQuery'
 7 | export { default as BansheeSimpleList } from './SimpleList'
 8 | export { default as BansheeSmartList } from './SmartList'
 9 | export { default as BansheeStorage } from './Storage'
10 | export { BansheeTabs, BansheeTabList, BansheeTab, BansheeTabPanes, BansheeTabPane } from './Tabs'
11 | export { default as BansheeToggle } from './Toggle'
12 | 


--------------------------------------------------------------------------------
/src/components/Expandable/src/ExpandableItem.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   name: 'BansheeExpandableItem',
 4 |   props: {
 5 |     index: {
 6 |       type: Number
 7 |     },
 8 |     tag: {
 9 |       type: String,
10 |       default: 'div'
11 |     }
12 |   },
13 |   inject: ['expandable'],
14 |   provide () {
15 |     return {
16 |       itemIndex: this.index
17 |     }
18 |   },
19 |   computed: {
20 |     isActive () {
21 |       return this.expandable.internalActive.includes(this.index)
22 |     },
23 |     isScoped () {
24 |       return this.$scopedSlots.default
25 |     }
26 |   },
27 |   render (h) {
28 |     const children = this.isScoped
29 |       ? this.$scopedSlots.default({ isActive: this.isActive })
30 |       : this.$slots.default
31 | 
32 |     return h(this.tag, children)
33 |   }
34 | }
35 | </script>
36 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | # Banshee Issue Template
 2 | 
 3 | Adapted from [Vue's issue template](https://new-issue.vuejs.org/?repo=vuejs/vue).
 4 | 
 5 | If you find an issue with Banshee please fill copy this format for your bug to get resolved as quickly as possible. Otherwise we may not respond to an issue or ask you to fill this out.
 6 | 
 7 | Thank you for wanting to help improve Banshee. We appreciate it!
 8 | 
 9 | ## Template
10 | 
11 | **Title**: [ISSUE] {{ YOUR_TITLE_HERE }}
12 | 
13 | **Version**:
14 | 
15 | **Link to reproduction** (provide Codesandbox, Codepen, etc.):
16 | 
17 | **Steps to reproduce**:
18 | How do we reproduce this bug? The more detailed the better and the quicker we can resolve your issue!
19 | 
20 | **What is expected?**:
21 | 
22 | **What is actually happening?**:
23 | 
24 | **Additional comments?** (optional):
25 | 


--------------------------------------------------------------------------------
/src/components/Tabs/index.js:
--------------------------------------------------------------------------------
 1 | import Tabs from './src/Tabs'
 2 | import TabList from './src/TabList'
 3 | import Tab from './src/Tab'
 4 | import TabPanes from './src/TabPanes'
 5 | import TabPane from './src/TabPane'
 6 | 
 7 | Tabs.install = function (Vue) {
 8 |   Vue.component(Tabs.name, Tabs)
 9 | }
10 | 
11 | TabList.install = function (Vue) {
12 |   Vue.component(TabList.name, TabList)
13 | }
14 | 
15 | Tab.install = function (Vue) {
16 |   Vue.component(Tab.name, Tab)
17 | }
18 | 
19 | TabPanes.install = function (Vue) {
20 |   Vue.component(TabPanes.name, TabPanes)
21 | }
22 | 
23 | TabPane.install = function (Vue) {
24 |   Vue.component(TabPane.name, TabPane)
25 | }
26 | 
27 | export const BansheeTabs = Tabs
28 | export const BansheeTabList = TabList
29 | export const BansheeTab = Tab
30 | export const BansheeTabPanes = TabPanes
31 | export const BansheeTabPane = TabPane
32 | 


--------------------------------------------------------------------------------
/src/components/Expandable/src/ExpandableBody.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import generateId from '@/utils/generateId'
 3 | 
 4 | export default {
 5 |   name: 'BansheeExpandableBody',
 6 |   props: {
 7 |     labelBy: {
 8 |       type: String,
 9 |       default: null
10 |     },
11 |     tag: {
12 |       type: String,
13 |       default: 'dd'
14 |     }
15 |   },
16 |   inject: ['expandable', 'itemIndex'],
17 |   computed: {
18 |     isActive () {
19 |       return this.expandable.internalActive.includes(this.itemIndex)
20 |     }
21 |   },
22 |   render (h) {
23 |     return h(this.tag, {
24 |       style: {
25 |         display: this.isActive ? 'block' : 'none'
26 |       },
27 |       attrs: {
28 |         'aria-hidden': String(this.isActive),
29 |         'aria-labelledby': this.labelBy,
30 |         role: 'tabpanel'
31 |       },
32 |       key: generateId()
33 |     }, this.$slots.default)
34 |   }
35 | }
36 | </script>
37 | 


--------------------------------------------------------------------------------
/src/components/Expandable/index.js:
--------------------------------------------------------------------------------
 1 | import Expandable from './src/Expandable'
 2 | import ExpandableItem from './src/ExpandableItem'
 3 | import ExpandableTitle from './src/ExpandableTitle'
 4 | import ExpandableBody from './src/ExpandableBody'
 5 | 
 6 | Expandable.install = function (Vue) {
 7 |   Vue.component(Expandable.name, Expandable)
 8 | }
 9 | 
10 | ExpandableItem.install = function (Vue) {
11 |   Vue.component(ExpandableItem.name, ExpandableItem)
12 | }
13 | 
14 | ExpandableTitle.install = function (Vue) {
15 |   Vue.component(ExpandableTitle.name, ExpandableTitle)
16 | }
17 | 
18 | ExpandableBody.install = function (Vue) {
19 |   Vue.component(ExpandableBody.name, ExpandableBody)
20 | }
21 | 
22 | export const BansheeExpandable = Expandable
23 | export const BansheeExpandableItem = ExpandableItem
24 | export const BansheeExpandableTitle = ExpandableTitle
25 | export const BansheeExpandableBody = ExpandableBody
26 | 


--------------------------------------------------------------------------------
/tests/e2e/support/commands.js:
--------------------------------------------------------------------------------
 1 | // ***********************************************
 2 | // This example commands.js shows you how to
 3 | // create various custom commands and overwrite
 4 | // existing commands.
 5 | //
 6 | // For more comprehensive examples of custom
 7 | // commands please read more here:
 8 | // https://on.cypress.io/custom-commands
 9 | // ***********************************************
10 | //
11 | //
12 | // -- This is a parent command --
13 | // Cypress.Commands.add("login", (email, password) => { ... })
14 | //
15 | //
16 | // -- This is a child command --
17 | // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
18 | //
19 | //
20 | // -- This is a dual command --
21 | // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
22 | //
23 | //
24 | // -- This is will overwrite an existing command --
25 | // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
26 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 |   <img width="350" height="350" src="logo.png">
 3 | </p>
 4 | 
 5 | <h1 align="center">Banshee</h1>
 6 | 
 7 | <p align="center">
 8 |   A mostly renderless Vue UI component and utility library.
 9 | </p>
10 | 
11 | ## Introduction
12 | 
13 | Banshee is a component library for Vue which seeks to only provide the JavaScript functionality and leaves the HTML markup and styling to you.  It ships with no CSS and minimal to no HTML in all components.
14 | 
15 | Banshee allows you to focus on building custom applications the way you want them to look without having to conform to another library's design specs.  Gain complete control on how you build Vue applications.
16 | 
17 | **NOTE: Banshee is under active development and should not be used in a production environment. Expect API changes before Beta release.**
18 | 
19 | ## Installation
20 | 
21 | ```bash
22 | npm install --save banshee-ui
23 | ```
24 | 
25 | ## Documentation
26 | 
27 | You can find the official documentation for Banshee [here](https://banshee-ui.github.io/docs/).
28 | 
29 | 


--------------------------------------------------------------------------------
/src/components/ErrorBoundary/src/ErrorBoundary.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   name: 'BansheeErrorBoundary',
 4 |   props: {
 5 |     onError: {
 6 |       type: Function,
 7 |       default: null
 8 |     },
 9 |     stopPropagation: {
10 |       type: Boolean,
11 |       default: false
12 |     }
13 |   },
14 |   data () {
15 |     return {
16 |       error: null,
17 |       err: null,
18 |       vm: null,
19 |       info: ''
20 |     }
21 |   },
22 |   errorCaptured (err, vm, info = '') {
23 |     this.error = true
24 |     this.err = err
25 |     this.vm = vm
26 |     this.info = info
27 | 
28 |     this.$emit('onErrorCaptured', { err, vm, info })
29 |     if (this.onError) this.onError(err, vm, info)
30 |     if (this.stopPropagation) return false
31 |   },
32 |   render (h) {
33 |     if (!this.$slots.default.length) {
34 |       console.warn('ErrorBoundary component must have child components.')
35 |       return null
36 |     }
37 |     return this.error ? this.$scopedSlots.default({
38 |       err: this.err,
39 |       info: this.info
40 |     }) : this.$slots.default[0]
41 |   }
42 | }
43 | </script>
44 | 


--------------------------------------------------------------------------------
/src/components/Tabs/src/TabList.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import BansheeTab from './Tab'
 3 | import toPascal from '@/utils/hyphenToPascal'
 4 | 
 5 | export default {
 6 |   name: 'BansheeTabList',
 7 |   props: {
 8 |     tag: {
 9 |       type: [String, Object],
10 |       default: 'div'
11 |     }
12 |   },
13 |   inject: ['updateIndex'],
14 |   render (h) {
15 |     const children = this.$slots.default.map((child, index) => {
16 |       const options = child.componentOptions
17 |       if (options && toPascal(options.tag) === 'BansheeTab') {
18 |         const props = {
19 |           index,
20 |           vertical: this.vertical,
21 |           updateIndex: () => {
22 |             this.updateIndex(index)
23 |           },
24 |           ...options.propsData
25 |         }
26 | 
27 |         return h(BansheeTab, {
28 |           ...child.data,
29 |           props: {
30 |             ...props
31 |           }
32 |         }, options.children)
33 |       }
34 | 
35 |       return child
36 |     })
37 | 
38 |     return h(this.tag, {
39 |       attrs: {
40 |         role: 'tablist'
41 |       }
42 |     }, children)
43 |   }
44 | }
45 | </script>
46 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Dillon Chanis
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/components/Listbox/src/ListboxItem.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   name: 'BansheeListboxItem',
 4 |   props: {
 5 |     focus: {
 6 |       type: Function,
 7 |       required: true
 8 |     },
 9 |     focused: {
10 |       type: Number,
11 |       required: true
12 |     },
13 |     index: {
14 |       type: Number,
15 |       required: true
16 |     },
17 |     item: {
18 |       type: [String, Number, Object],
19 |       required: true
20 |     },
21 |     selected: {
22 |       type: Array,
23 |       required: true
24 |     },
25 |     selectItem: {
26 |       type: Function,
27 |       required: true
28 |     },
29 |     tag: {
30 |       type: String,
31 |       default: 'div'
32 |     }
33 |   },
34 |   render (h) {
35 |     return h(this.tag, {
36 |       attrs: {
37 |         role: 'option',
38 |         'aria-selected': this.focused === this.index
39 |       },
40 |       on: {
41 |         click: () => {
42 |           this.focus(this.index)
43 |         }
44 |       }
45 |     }, this.$scopedSlots.default({
46 |       active: this.focused === this.index,
47 |       item: this.item,
48 |       index: this.index,
49 |       selected: this.selected.includes(this.item)
50 |     }))
51 |   }
52 | }
53 | </script>
54 | 


--------------------------------------------------------------------------------
/src/components/Expandable/src/ExpandableTitle.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   name: 'BansheeExpandableTitle',
 4 |   props: {
 5 |     controls: {
 6 |       type: String,
 7 |       default: null
 8 |     },
 9 |     tag: {
10 |       type: String,
11 |       default: 'dt'
12 |     }
13 |   },
14 |   inject: [
15 |     'expandable',
16 |     'itemIndex',
17 |     'updateIndex'
18 |   ],
19 |   data: () => ({
20 |     focused: false
21 |   }),
22 |   computed: {
23 |     isActive () {
24 |       return String(this.expandable.internalActive.includes(this.itemIndex))
25 |     },
26 |     isFocused () {
27 |       return String(this.focused)
28 |     }
29 |   },
30 |   methods: {
31 |     addFocus () {
32 |       this.focused = true
33 |     },
34 |     update () {
35 |       this.updateIndex(this.itemIndex)
36 |     },
37 |     removeFocus () {
38 |       this.focused = false
39 |     }
40 |   },
41 |   render (h) {
42 |     return h(this.tag, {
43 |       attrs: {
44 |         'aria-expanded': this.isActive,
45 |         'aria-selected': this.isFocused,
46 |         'aria-controls': this.controls,
47 |         role: 'tab'
48 |       },
49 |       on: {
50 |         blur: this.removeFocus,
51 |         click: this.update,
52 |         focus: this.addFocus
53 |       }
54 |     }, this.$slots.default)
55 |   }
56 | }
57 | </script>
58 | 


--------------------------------------------------------------------------------
/src/components/Tabs/src/Tabs.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   name: 'BansheeTabs',
 4 |   props: {
 5 |     active: {
 6 |       type: Number
 7 |     },
 8 |     defaultActive: {
 9 |       type: Number,
10 |       default: 0
11 |     },
12 |     tag: {
13 |       type: [String, Object],
14 |       default: 'div'
15 |     }
16 |   },
17 |   provide () {
18 |     return {
19 |       tabs: this,
20 |       updateIndex: this.updateActiveIndex
21 |     }
22 |   },
23 |   data: () => ({
24 |     internalActive: 0
25 |   }),
26 |   computed: {
27 |     getActiveIndex () {
28 |       return this.active >= 0 ? this.active : this.internalActive
29 |     }
30 |   },
31 |   mounted () {
32 |     this.internalActive = this.defaultActive
33 |   },
34 |   methods: {
35 |     updateActiveIndex (index) {
36 |       const previous = this.internalActive
37 |       this.internalActive = index
38 |       this.$emit('onTabChange', { index, previous })
39 |     }
40 |   },
41 |   render (h) {
42 |     let children
43 |     const isScoped = this.$scopedSlots.default
44 | 
45 |     if (isScoped) {
46 |       children = this.$scopedSlots.default({
47 |         active: this.getActiveIndex,
48 |         updateActiveIndex: this.updateActiveIndex
49 |       })
50 |     } else {
51 |       children = this.$slots.default
52 |     }
53 | 
54 |     return h(this.tag, children)
55 |   }
56 | }
57 | </script>
58 | 


--------------------------------------------------------------------------------
/src/components/Tabs/src/Tab.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   name: 'BansheeTab',
 4 |   props: {
 5 |     disabled: {
 6 |       type: Boolean,
 7 |       default: false
 8 |     },
 9 |     index: {
10 |       type: Number
11 |     },
12 |     noAria: {
13 |       type: Boolean,
14 |       default: false
15 |     },
16 |     tag: {
17 |       type: [String, Object],
18 |       default: 'button'
19 |     },
20 |     updateIndex: {
21 |       type: Function
22 |     }
23 |   },
24 |   inject: ['tabs'],
25 |   computed: {
26 |     getAria () {
27 |       const isActive = this.index === this.tabs.getActiveIndex
28 | 
29 |       return {
30 |         attrs: {
31 |           role: 'tab',
32 |           tabindex: isActive ? 0 : -1,
33 |           'aria-selected': String(isActive)
34 |         }
35 |       }
36 |     }
37 |   },
38 |   render (h) {
39 |     let children
40 |     const isScoped = this.$scopedSlots.default
41 | 
42 |     if (isScoped) {
43 |       children = this.$scopedSlots.default({
44 |         aria: this.noAria ? { ...this.getAria.attrs } : null,
45 |         index: this.index,
46 |         updateActiveIndex: this.updateIndex
47 |       })
48 |     } else {
49 |       children = this.$slots.default
50 |     }
51 | 
52 |     return h(this.tag, {
53 |       attrs: !this.noAria ? { ...this.getAria.attrs } : null,
54 |       on: {
55 |         click: () => {
56 |           if (!this.disabled) {
57 |             this.updateIndex()
58 |           }
59 |         }
60 |       }
61 |     }, children)
62 |   }
63 | }
64 | </script>
65 | 


--------------------------------------------------------------------------------
/src/components/MediaQuery/src/MediaQuery.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   name: 'BansheeMediaQuery',
 4 |   props: {
 5 |     at: {
 6 |       type: [String, Number],
 7 |       required: true
 8 |     },
 9 |     display: {
10 |       type: String,
11 |       default: 'visible',
12 |       validator: value => ['visible', 'hidden'].includes(value)
13 |     },
14 |     maxWidth: {
15 |       type: Boolean,
16 |       default: false
17 |     },
18 |     minWidth: {
19 |       type: Boolean,
20 |       default: false
21 |     },
22 |     unit: {
23 |       type: String,
24 |       default: 'px',
25 |       validator: value => ['px', 'em'].includes(value)
26 |     }
27 |   },
28 |   data () {
29 |     return {
30 |       width: null
31 |     }
32 |   },
33 |   mounted () {
34 |     window.addEventListener('resize', this.onResize)
35 |     this.onResize()
36 |   },
37 |   beforeDestroy () {
38 |     window.removeEventListener('resize', this.onResize)
39 |   },
40 |   methods: {
41 |     onResize () {
42 |       this.width = this.unit === 'px'
43 |         ? window.innerWidth
44 |         : window.innerWidth / 16
45 |     }
46 |   },
47 |   render () {
48 |     let toRender = false
49 | 
50 |     if (!this.maxWidth && !this.minWidth) {
51 |       console.warn(`You must set one of the props, 'max-width' or 'min-width' to true.`)
52 |       return
53 |     }
54 | 
55 |     if (this.maxWidth && this.minWidth) {
56 |       console.warn(`The props 'max-width' and 'min-width' are active when only one is allowed.`)
57 |       return
58 |     }
59 | 
60 |     if ((this.maxWidth && this.display === 'hidden') || (this.minWidth && this.display === 'visible')) {
61 |       toRender = this.width <= this.at
62 |     } else {
63 |       toRender = this.width >= this.at
64 |     }
65 | 
66 |     return toRender ? this.$slots.default[0] : null
67 |   }
68 | }
69 | </script>
70 | 


--------------------------------------------------------------------------------
/src/components/Toggle/src/Toggle.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import enableClick from '@/utils/enableClick'
 3 | 
 4 | export default {
 5 |   name: 'BansheeToggle',
 6 |   props: {
 7 |     defaultOn: {
 8 |       type: Boolean,
 9 |       default: false
10 |     },
11 |     on: {
12 |       type: Boolean,
13 |       default: undefined
14 |     },
15 |     onToggle: {
16 |       type: Function,
17 |       default: () => ({})
18 |     }
19 |   },
20 |   data: () => ({
21 |     internalOn: false
22 |   }),
23 |   computed: {
24 |     attrs () {
25 |       return {
26 |         tabIndex: 0,
27 |         'aria-expanded': String(Boolean(this.getOn))
28 |       }
29 |     },
30 |     getOn () {
31 |       return this.isControlled ? this.on : this.internalOn
32 |     },
33 |     inputActions () {
34 |       return {
35 |         ...this.toggler,
36 |         keyup: e => {
37 |           if (e.key === 'Enter') {
38 |             this.toggle()
39 |           }
40 |         }
41 |       }
42 |     },
43 |     isControlled () {
44 |       return this.on !== undefined
45 |     },
46 |     toggler () {
47 |       return { click: this.toggle }
48 |     }
49 |   },
50 |   created () {
51 |     this.internalOn = this.defaultOn
52 |   },
53 |   methods: {
54 |     setOn () {
55 |       this.internalOn = true
56 |       this.onToggle(this.getOn)
57 |       this.$emit('onSetOn', this.getOn)
58 |     },
59 |     setOff () {
60 |       this.internalOn = false
61 |       this.onToggle(this.getOn)
62 |       this.$emit('onSetOff', this.getOn)
63 |     },
64 |     toggle () {
65 |       this.internalOn = !this.internalOn
66 |       this.onToggle(this.getOn)
67 |       this.$emit('onToggle', this.getOn)
68 |     }
69 |   },
70 |   render (h) {
71 |     return this.$scopedSlots.default({
72 |       attrs: { ...this.attrs },
73 |       on: this.getOn,
74 |       setOn: enableClick(this.setOn),
75 |       setOff: enableClick(this.setOff),
76 |       toggle: this.toggler,
77 |       inputToggle: { ...this.inputActions }
78 |     })
79 |   }
80 | }
81 | </script>
82 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "banshee-ui",
 3 |   "description": "A mostly renderless Vue UI component and utility library.",
 4 |   "version": "0.0.2",
 5 |   "license": "MIT",
 6 |   "author": {
 7 |     "name": "Dillon Chanis",
 8 |     "email": "dillonchanis92@gmail.com"
 9 |   },
10 |   "repository": "banshee-ui/banshee",
11 |   "main": "dist/BansheeUI.umd.js",
12 |   "module": "dist/BansheeUI.common.js",
13 |   "unpkg": "dist/BansheeUI.umd.min.js",
14 |   "scripts": {
15 |     "serve": "vue-cli-service serve playground/main.js",
16 |     "build": "vue-cli-service build",
17 |     "test": "vue-cli-service test:unit",
18 |     "e2e": "vue-cli-service e2e",
19 |     "lint": "vue-cli-service lint",
20 |     "e2e:open": "vue-cli-service e2e:open",
21 |     "package": "vue-cli-service build --target lib --name BansheeUI src/index.js"
22 |   },
23 |   "dependencies": {
24 |     "vue": "^2.5.16"
25 |   },
26 |   "devDependencies": {
27 |     "@cypress/webpack-preprocessor": "^3.0.0",
28 |     "@vue/cli-plugin-babel": "^3.0.4",
29 |     "@vue/cli-plugin-e2e-cypress": "^3.0.4",
30 |     "@vue/cli-plugin-eslint": "^3.0.4",
31 |     "@vue/cli-plugin-unit-jest": "^3.0.4",
32 |     "@vue/cli-service": "^3.0.4",
33 |     "@vue/eslint-config-standard": "^3.0.5",
34 |     "@vue/test-utils": "^1.0.0-beta.20",
35 |     "babel-core": "7.0.0-bridge.0",
36 |     "babel-jest": "^23.0.1",
37 |     "vue-template-compiler": "^2.5.17",
38 |     "lint-staged": "^6.0.0"
39 |   },
40 |   "browserslist": [
41 |     "> 1%",
42 |     "last 2 versions",
43 |     "not ie <= 8"
44 |   ],
45 |   "gitHooks": {
46 |     "pre-commit": "lint-staged"
47 |   },
48 |   "lint-staged": {
49 |     "*.js": [
50 |       "vue-cli-service lint",
51 |       "git add"
52 |     ],
53 |     "*.vue": [
54 |       "vue-cli-service lint",
55 |       "git add"
56 |     ]
57 |   },
58 |   "keywords": [
59 |     "vue",
60 |     "vuejs",
61 |     "banshee",
62 |     "banshee-ui",
63 |     "component",
64 |     "components",
65 |     "vue-components",
66 |     "renderless",
67 |     "javascript"
68 |   ]
69 | }
70 | 


--------------------------------------------------------------------------------
/tests/unit/SmartList.spec.js:
--------------------------------------------------------------------------------
 1 | import { shallowMount } from '@vue/test-utils'
 2 | import BansheeSmartList from '@/components/SmartList/src/SmartList.vue'
 3 | 
 4 | describe('SmartList.vue', () => {
 5 |   it('renders props.items when passed', () => {
 6 |     const items = ['One', 'Two', 'Three']
 7 | 
 8 |     const wrapper = shallowMount(BansheeSmartList, {
 9 |       propsData: { items },
10 |       scopedSlots: {
11 |         default: `
12 |           <ul slot-scope="{ items }">
13 |             <li v-for="item in items" :key="item">
14 |               {{ item }}
15 |             </li>
16 |           </ul>
17 |         `
18 |       }
19 |     })
20 | 
21 |     // Number of <li> should match the array length
22 |     expect(wrapper.findAll('li').length).toBe(items.length)
23 |   })
24 | 
25 |   it('renders with default sorting', () => {
26 |     const items = ['c', 'd', 'a', 'b']
27 |     const sortedItems = items.sort()
28 | 
29 |     const wrapper = shallowMount(BansheeSmartList, {
30 |       propsData: {
31 |         items,
32 |         'default-sort': 'asc'
33 |       },
34 |       scopedSlots: {
35 |         default: `
36 |           <ul slot-scope="{ items }">
37 |             <li v-for="item in items" :key="item">
38 |               {{ item }}
39 |             </li>
40 |           </ul>
41 |         `
42 |       }
43 |     })
44 | 
45 |     // First element should be 'a'
46 |     expect(wrapper.findAll('li').at(0).text()).toBe(sortedItems[0])
47 |   })
48 | 
49 |   it('renders only the items matching the search query', () => {
50 |     const items = ['Alleria', 'Sylvanas', 'Vereesa']
51 |     const query = 'Syl'
52 | 
53 |     const wrapper = shallowMount(BansheeSmartList, {
54 |       propsData: { items, query },
55 |       scopedSlots: {
56 |         default: `
57 |           <ul slot-scope="{ items }">
58 |             <li v-for="item in items" :key="item">
59 |               {{ item }}
60 |             </li>
61 |           </ul>
62 |         `
63 |       }
64 |     })
65 | 
66 |     expect(wrapper.find('li').text()).toBe('Sylvanas')
67 |   })
68 | })
69 | 


--------------------------------------------------------------------------------
/src/components/Expandable/src/Expandable.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import BansheeExpandableItem from './ExpandableItem'
 3 | import toPascal from '@/utils/hyphenToPascal'
 4 | 
 5 | export default {
 6 |   name: 'BansheeExpandable',
 7 |   props: {
 8 |     accordion: {
 9 |       type: Boolean,
10 |       default: false
11 |     },
12 |     active: {
13 |       type: [Array, Number]
14 |     },
15 |     tag: {
16 |       type: String,
17 |       default: 'dl'
18 |     }
19 |   },
20 |   provide () {
21 |     return {
22 |       expandable: this.$data,
23 |       updateIndex: this.updateActiveIndex
24 |     }
25 |   },
26 |   data: () => ({
27 |     internalActive: []
28 |   }),
29 |   methods: {
30 |     updateAccordionIndex (index) {
31 |       if (this.internalActive.includes(index)) {
32 |         this.internalActive = this.internalActive.filter(i => i !== index)
33 |       } else {
34 |         this.internalActive = []
35 |         this.internalActive.push(index)
36 |       }
37 | 
38 |       this.$emit('onOpen', this.internalActive)
39 |     },
40 |     updateActiveIndex (index) {
41 |       if (this.accordion) {
42 |         this.updateAccordionIndex(index)
43 |         return
44 |       }
45 | 
46 |       if (this.internalActive.includes(index)) {
47 |         this.internalActive = this.internalActive.filter(i => i !== index)
48 |       } else {
49 |         this.internalActive.push(index)
50 |       }
51 | 
52 |       this.$emit('onOpen', this.internalActive)
53 |     }
54 |   },
55 |   render (h) {
56 |     const scoped = this.$scopedSlots.default
57 |       ? this.$scopedSlots.default({
58 |         active: this.internalActive,
59 |         update: this.updateActiveIndex
60 |       })
61 |       : null
62 | 
63 |     const children = this.$slots.default.map((child, index) => {
64 |       const options = child.componentOptions
65 | 
66 |       if (options && toPascal(options.tag) === BansheeExpandableItem.name) {
67 |         return h(BansheeExpandableItem, {
68 |           ...child.data,
69 |           props: {
70 |             active: this.internalActive,
71 |             index,
72 |             ...options.propsData
73 |           }
74 |         }, options.children)
75 |       }
76 | 
77 |       return child
78 |     })
79 | 
80 |     return h(this.tag, {
81 |       attrs: {
82 |         role: 'presentation'
83 |       }
84 |     }, [
85 |       children,
86 |       scoped
87 |     ])
88 |   }
89 | }
90 | </script>
91 | 


--------------------------------------------------------------------------------
/.github/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Banshee Contributing Guide
 2 | 
 3 | Thank you for being interested in contributing to Banshee! Before contributing please read through this document to make this process as painless as possible for both parties.
 4 | 
 5 | ## Reporting Issues and Feature Requests
 6 | 
 7 | If you find an issue or have an idea to improve Banshee, please open an issue [here](https://github.com/banshee-ui/banshee/issues). Please find and fill the templates for your respective request before submitting.
 8 | 
 9 | ## Contributing to an Issue/Feature Request:
10 | 
11 | If you find an issue/feature that you want to tackle please say so in a comment. If you find that someone has already commented please assume they are actively working on it. If some time has passed, you can ask them to make sure. We do not want two separate parties working on the same thing (but you can collaborate!).
12 | 
13 | ## PR Guidelines
14 | 
15 | - Do not submit PRs against the `master` branch.
16 | - Create a branch based on issue type
17 |   - ie: `feature/{{ branch_name }}`, `bugfix/{{ branch_name }}`
18 | - Multiple commits are fine as they will be squashed
19 | - Do not work in the `dist/` folder and do not commit it
20 | - Do not commit work done in the `playground/` directory
21 | 
22 | ## Development Setup
23 | 
24 | Clone the repository and run:
25 | 
26 | ```bash
27 | $ npm install # or yarn
28 | ```
29 | 
30 | To get running the development server running use:
31 | 
32 | ```bash
33 | $ npm run serve
34 | ```
35 | 
36 | Make sure all work is done within the `src/` directory.
37 | 
38 | To physically test components as you develop you can use the `playground/` directory. All modules of Banshee are automatically imported from the `src/` folder for you. You should not have to touch `main.js`.
39 | 
40 | ## Project Structure
41 | 
42 | - **playground**: imports all Banshee modules and mounts a Vue instance to play around with components while developing.
43 |   - `playground/main.js`: imports Vue and Banshee and mounts App.vue to a Vue instance
44 |   - `playground/App.vue`: Root Vue component to do your testing within
45 | 
46 | - **public**: holds `index.html` file, shouldn't needed to be touched ever
47 | 
48 | - **src**: contains all the source code to each Banshee component and their utilities
49 |   - `src/components/`: the component source code for each Banshee component
50 |   - `utils/`: utility functions for use within Banshee component files, you can add more if you see fit for whatever issue/feature you're working on
51 |   - `index.js`: exports all Banshee component files, shouldn't need to be touched unless you are creating more components
52 | 
53 | ## Credits
54 | 
55 | Your name here!


--------------------------------------------------------------------------------
/src/components/SmartList/src/SmartList.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | export default {
  3 |   name: 'BansheeSmartList',
  4 |   props: {
  5 |     defaultSort: {
  6 |       type: String,
  7 |       default: null,
  8 |       validator (value) {
  9 |         return ['asc', 'desc'].includes(value)
 10 |       }
 11 |     },
 12 |     filterMethod: {
 13 |       type: Function,
 14 |       default: null
 15 |     },
 16 |     items: {
 17 |       type: Array,
 18 |       required: true
 19 |     },
 20 |     sortMethod: {
 21 |       type: Function,
 22 |       default: null
 23 |     },
 24 |     sortKey: {
 25 |       type: String,
 26 |       default: ''
 27 |     },
 28 |     query: {
 29 |       type: String,
 30 |       default: ''
 31 |     }
 32 |   },
 33 |   data () {
 34 |     return {
 35 |       sort: {
 36 |         by: this.sortKey,
 37 |         order: 1
 38 |       }
 39 |     }
 40 |   },
 41 |   computed: {
 42 |     filteredItems () {
 43 |       let data = this.items
 44 | 
 45 |       if (this.query) {
 46 |         data = !this.filterMethod
 47 |           ? this.searchedItems
 48 |           : this.filterMethod(this.query, this.items)
 49 |       }
 50 | 
 51 |       if (this.sort.by || this.defaultSort) {
 52 |         data = !this.sortMethod
 53 |           ? this.sortedItems
 54 |           : this.sortMethod(this.sort, this.searchedItems)
 55 |       }
 56 | 
 57 |       return data
 58 |     },
 59 |     searchedItems () {
 60 |       return this.items.filter(row => {
 61 |         if (typeof row === 'object') {
 62 |           return Object.keys(row).some(key => {
 63 |             return String(row[key]).toLowerCase().includes(this.query.toLowerCase())
 64 |           })
 65 |         }
 66 | 
 67 |         return String(row).toLowerCase().includes(this.query.toLowerCase())
 68 |       })
 69 |     },
 70 |     sortedItems () {
 71 |       return this.searchedItems.slice().sort((a, b) => {
 72 |         if (typeof a === 'object' && typeof b === 'object') {
 73 |           a = a[this.sort.by]
 74 |           b = b[this.sort.by]
 75 |         }
 76 |         return (a === b ? 0 : a > b ? 1 : -1) * this.sort.order
 77 |       })
 78 |     }
 79 |   },
 80 |   created () {
 81 |     if (this.defaultSort) {
 82 |       this.sort.order = this.defaultSort === 'asc'
 83 |         ? this.sort.order
 84 |         : this.sort.order * -1
 85 |     }
 86 |   },
 87 |   methods: {
 88 |     sortBy (by) {
 89 |       this.sort.by = by
 90 |       this.sort.order = this.sort.order * -1
 91 |     }
 92 |   },
 93 |   render () {
 94 |     return this.$scopedSlots.default({
 95 |       items: this.filteredItems,
 96 |       sort: this.sortBy
 97 |     })
 98 |   }
 99 | }
100 | </script>
101 | 


--------------------------------------------------------------------------------
/src/components/ErrorBoundary/README.md:
--------------------------------------------------------------------------------
 1 | # Error Boundary
 2 | 
 3 | A reusable error boundary component for catching JavaScript errors and displaying fallback UIs.
 4 | 
 5 | The ErrorBoundary component is based on [React's example component](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html) featuring a new component hook in React 16 called `componentDidCatch`.
 6 | 
 7 | ## Basic Usage
 8 | 
 9 | To use this component simply wrap any other component which may throw an Error.
10 | 
11 | ```html
12 | <banshee-error-boundary>
13 |   <error-prone-component />
14 | </banshee-error-boundary>
15 | ```
16 | 
17 | Errors thrown in child components will automatically bubble up to the `BansheeErrorBoundary` component.
18 | 
19 | ## Error Boundary
20 | 
21 | ### Attributes & Props
22 | 
23 | | Name | Required | Type | Default | Description |
24 | | ---  | ---      | ---  | ---     | ---         |
25 | | on-error | `false` | Function | `null` | callback function to execute in case an error is captured |
26 | | stop-propagation | `false` | Boolean | `false` | boolean to stop propagation of the error up the component tree |
27 | 
28 | ### Events
29 | 
30 | | Event | Parameters | Description |
31 | | ---   | ---        | ---         |
32 | | onErrorCaptured | (error) | object returning  |
33 | 
34 | ### Scoped Slots
35 | 
36 | | Property | Description |
37 | | ---      | ---         |
38 | | err      | the error that triggered the boundary |
39 | | info     | string containing information about the error |
40 | 
41 | Furthermore, we can directly access the contents of the `BansheeErrorBoundary` component's `errorCaptured` hook either throw a callback or Vue's emit.
42 | 
43 | ### Callbacks via on-error
44 | 
45 | The `BansheeErrorBoundary` can receive a callback function through the `on-error` prop.
46 | 
47 | ```html
48 | <template>
49 |   <banshee-error-boundary :on-error="handleError">...</banshee-error-boundary>
50 | <template>
51 | 
52 | <script>
53 | // ...
54 | methods: {
55 |   handleError (err, vm, info) {
56 |     // do something
57 |   }
58 | }
59 | // ...
60 | </script>
61 | ```
62 | 
63 | ### @errorCaptured event
64 | 
65 | The callback function will receive the same parameters as the `errorCaptured` method.
66 | 
67 | We can also listen to a Vue event via an `errorCaptured` event.  This will send the same parameters as above as the event payload.
68 | 
69 | ```html
70 | <banshee-error-boundary @errorCaptured="...">
71 | ```
72 | 
73 | ### Stop Propagation
74 | 
75 | The `errorCaptured` hook will continue to propagate errors up the component tree unless it returns `false`.  Doing so will stop any additional `errorCaptured` hooks to execute **and** the global `errorHandler` from being invoked for the error.  To do this we can use the `stop-propagation` prop.
76 | 
77 | ```html
78 | <banshee-error-boundary stop-propagation>
79 |   ...
80 | </banshee-error-boundary>
81 | ```


--------------------------------------------------------------------------------
/src/components/SimpleList/README.md:
--------------------------------------------------------------------------------
 1 | # Simple List
 2 | 
 3 | A functional component list iterator.  Useful for displaying large lists of data and static lists like menus or navigation.
 4 | 
 5 | ## Basic Usage
 6 | 
 7 | ```html
 8 | <banshee-simple-list :items="people">
 9 |   <template slot-scope="{ index, item }">
10 |     {{ index }} -- {{ item }}
11 |   </template>
12 | </banshee-simple-list>
13 | 
14 | <script>
15 | // ...
16 | data: () => ({
17 |   people: ['Sylvanas', 'Nathanos', 'Putress', 'Barov', 'Voss']
18 | })
19 | </script>
20 | ```
21 | 
22 | The `<banshee-simple-list>` is a very simple iterator for arrays of data.  If you are looking for more robust list solution with methods like sorting, grouping, and filtering of data you may want to look into the `<banshee-smart-list>` component.
23 | 
24 | ## Simple List
25 | 
26 | ### Scoped Slots
27 | 
28 | | Property | Description |
29 | | ---      | ---         |
30 | | index    | the index of the item within the array |
31 | | item     | each element in the array |
32 | 
33 | ## More Examples
34 | 
35 | ### Bootstrap 4
36 | 
37 | [![Edit Banshee - Bootstrap 4 SimpleList](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/2p885zpw70?module=%2Fsrc%2FApp.vue)
38 | 
39 | ```html
40 | <ul class="list-group">
41 |   <banshee-simple-list :items="people">
42 |     <template slot-scope="{ item }">
43 |       <li class="list-group-item">{{ item }}</li>
44 |     </template>
45 |   </banshee-simple-list>
46 | </ul>
47 | ```
48 | 
49 | ### Foundation
50 | 
51 | [![Edit Banshee - SimpleList Foundation](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/ly1porr8lq?module=%2Fsrc%2FApp.vue)
52 | 
53 | ```html
54 | <ul class="menu">
55 |   <banshee-simple-list :items="links">
56 |     <template slot-scope="{ item }">
57 |       <li><a href="">{{ item }}</a></li>
58 |     </template>
59 |   </banshee-simple-list>
60 | </ul>
61 | ```
62 | 
63 | ### Semantic UI
64 | 
65 | [![Edit Banshee - SimpleList SemanticUI](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/ovr2r86jxy?module=%2Fsrc%2FApp.vue)
66 | 
67 | ```html
68 | <ul class="ui list">
69 |   <banshee-simple-list :items="characters">
70 |     <template slot-scope="{ item }">
71 |       <li class="item">{{ item }}</li>
72 |     </template>
73 |   </banshee-simple-list>
74 | </ul>
75 | ```
76 | 
77 | ### Bulma
78 | 
79 | [![Edit Banshee - SimpleList Bulma](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/6znlyyqnn?module=%2Fsrc%2FApp.vue)
80 | 
81 | ```html
82 | <aside class="menu">
83 |   <ul class="menu-list">
84 |     <banshee-simple-list :items="characters">
85 |       <template slot-scope="{ index, item }">
86 |         <li class="item">
87 |           <a href="item.href"
88 |               :class="{ 'is-active': index === activeLink }">
89 |             {{ item }}
90 |           </a>
91 |         </li>
92 |       </template>
93 |     </banshee-simple-list>
94 |   </ul>
95 | </aside>
96 | ```


--------------------------------------------------------------------------------
/src/components/Fetch/src/Fetch.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | export default {
  3 |   name: 'BansheeFetch',
  4 |   props: {
  5 |     body: {
  6 |       type: Object,
  7 |       default: () => ({})
  8 |     },
  9 |     cache: {
 10 |       type: String,
 11 |       default: 'default',
 12 |       validator (value) {
 13 |         return ['default', 'no-cache', 'reload', 'force-cache', 'only-if-cached'].includes(value.toLowerCase())
 14 |       }
 15 |     },
 16 |     credentials: {
 17 |       type: String,
 18 |       default: 'omit',
 19 |       validator (value) {
 20 |         return ['include', 'same-origin', 'omit']
 21 |       }
 22 |     },
 23 |     headers: {
 24 |       type: Object,
 25 |       default: () => ({})
 26 |     },
 27 |     lazy: {
 28 |       type: Boolean,
 29 |       default: false
 30 |     },
 31 |     method: {
 32 |       type: String,
 33 |       default: 'GET',
 34 |       validator (value) {
 35 |         return ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS', 'HEAD'].includes(value.toUpperCase())
 36 |       }
 37 |     },
 38 |     mode: {
 39 |       type: String,
 40 |       default: 'same-origin',
 41 |       validator (value) {
 42 |         return ['no-cors', 'cors', 'same-origin'].includes(value.toLowerCase())
 43 |       }
 44 |     },
 45 |     redirect: {
 46 |       type: String,
 47 |       default: 'follow',
 48 |       validator (value) {
 49 |         return ['manual', 'follow', 'error'].includes(value.toLowerCase())
 50 |       }
 51 |     },
 52 |     referrer: {
 53 |       type: String,
 54 |       default: 'client',
 55 |       validator (value) {
 56 |         return ['client', 'no-referrer'].includes(value.toLowerCase())
 57 |       }
 58 |     },
 59 |     url: {
 60 |       type: String,
 61 |       required: true
 62 |     }
 63 |   },
 64 |   data: () => ({
 65 |     error: null,
 66 |     loading: false,
 67 |     response: null
 68 |   }),
 69 |   created () {
 70 |     if (!this.lazy) {
 71 |       this.fetch()
 72 |     }
 73 |   },
 74 |   methods: {
 75 |     fetch () {
 76 |       const { body, cache, credentials, headers, method, mode, redirect, referrer } = this
 77 |       this.loading = true
 78 | 
 79 |       fetch(this.url, {
 80 |         body: !['GET', 'HEAD'].includes(method.toUpperCase()) ? JSON.stringify(body) : null,
 81 |         cache,
 82 |         credentials,
 83 |         headers,
 84 |         method,
 85 |         mode,
 86 |         redirect,
 87 |         referrer
 88 |       })
 89 |         .then(res => res.json())
 90 |         .then(data => {
 91 |           this.loading = false
 92 |           this.response = data
 93 |           this.$emit('onDataReceived', data)
 94 |         })
 95 |         .catch(error => {
 96 |           this.error = error
 97 |           this.$emit('onError', error)
 98 |         })
 99 |     }
100 |   },
101 |   render () {
102 |     return this.$scopedSlots.default({
103 |       error: this.error,
104 |       loading: this.loading,
105 |       response: this.response,
106 |       fetch: this.lazy ? this.fetch : null
107 |     })
108 |   }
109 | }
110 | </script>
111 | 


--------------------------------------------------------------------------------
/src/components/Fetch/README.md:
--------------------------------------------------------------------------------
 1 | # Banshee Fetch
 2 | 
 3 | Banshee component for handling APIs.
 4 | 
 5 | ## Basic Usage
 6 | 
 7 | ```html
 8 | <template>
 9 |   <div id="app">
10 |     <banshee-fetch url="https://jsonplaceholder.typicode.com/posts/1" mode="cors">
11 |       <div slot-scope="{ loading, response }">
12 |         <div v-if="loading">Loading...</div>
13 |         <div v-if="response && !loading">
14 |           <h2>{{ response.title }}</h2>
15 |           <p>{{ response.body }}</p>
16 |         </div>
17 |       </div>
18 |     </banshee-fetch>
19 |   </div>
20 | </template>
21 | ```
22 | 
23 | The `<banshee-fetch>` component is an abstraction over the browser's own `fetch` API. Instead of using methods, mixins, and lifecycle hooks to manage API data you can create services via the `<banshee-fetch>` component.
24 | 
25 | ## Banshee Fetch
26 | 
27 | ### Attributes & Props
28 | 
29 | The `banshee-fetch` component takes much of the same options that the Browser [fetch](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch) does since it's built directly on top of it.
30 | 
31 | | Name | Required | Type | Default | Description |
32 | | ---  | ---      | ---  | ---     | ---         |
33 | | body   | false     | Object | `{}` | Any body that you want to add to your request. |
34 | | cache | false  | String | `'default'` | The cache mode you want to use for the request: `default`, `no-store`, `reload`, `no-cache`, `force-cache`, or `only-if-cached`.  |
35 | | credentials | false | String | `'omit'` | The request credentials you want to use for the request: `omit`, `same-origin`, or `include`. |
36 | | headers | false | Object | `{}` | Any headers you want to add to your request, contained within a `Headers` object. |
37 | | lazy | false | Boolean | `false` | Whether the component should immediately fetch the data or not. |
38 | | method | false | String | `'GET'` | The request method. |
39 | | mode   | false | String | `'same-origin'` | The mode you want to use for the request, e.g., `cors`, `no-cors`, or `same-origin`. |
40 | | redirect | false | String | `'follow'` | The redirect mode to use: `follow` (automatically follow redirects), `error` (abort with an error if a redirect occurs), or `manual` (handle redirects manually). |
41 | | referrer | false | String | `'client'` | A `USVString` specifying `no-referrer`, `client`, or a URL. |
42 | | url | true | String | N/A | The API url. |
43 | 
44 | ### Events
45 | 
46 | | Event | Parameters | Description |
47 | | ---   | ---        | ---         |
48 | | onDataReceived | (data) | occurs on successful ajax call, returns response data from ajax call |
49 | | onError | (error) | occurs when ajax call results in error, returns ajax response error |
50 | 
51 | ### Scoped Slots
52 | 
53 | | Property | Description |
54 | | ---      | ---         |
55 | | error    | error object if the ajax call caught an error |
56 | | loading  | boolean, whether or not we are still waiting for response from server |
57 | | response | response data from server from successful fetch |
58 | | fetch    | method, if `lazy` prop is present utilize this to trigger fetch |
59 | 


--------------------------------------------------------------------------------
/src/components/Toggle/README.md:
--------------------------------------------------------------------------------
 1 | # Toggle
 2 | 
 3 | Banshee toggle component.
 4 | 
 5 | ## Basic Usage
 6 | 
 7 | [![Edit Banshee - Toggle Basic](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/llp8976357?module=%2Fsrc%2FApp.vue)
 8 | 
 9 | ```html
10 | <template>
11 |   <div id="app">
12 |     <banshee-toggle>
13 |       <div slot-scope="{ toggle, on }">
14 |         <button v-on="toggle">Toggle Me</button> {{ on }}
15 |       </div>
16 |     </banshee-toggle>
17 |   </div>
18 | </template>
19 | ```
20 | 
21 | ## Toggle
22 | 
23 | ### Attributes & Props
24 | 
25 | | Name | Required | Type | Default | Description |
26 | | ---  | ---      | ---  | ---     | ---         |
27 | | default-on | `false` | Boolean | `false` | the initial `on` state |
28 | | on | `false` | Boolean | `undefined` | makes toggle state controlled by you rather internally, aka makes it a "controlled component" |
29 | | on-toggle | `false` | Function | `() => ({})` | function to execute every time the toggle component is toggled |
30 | 
31 | ### Events
32 | 
33 | | Event | Parameters | Description |
34 | | ---   | ---        | ---         |
35 | | onSetOn | (on) | occurs when the toggle is set to "on" state, aka `true`, provides current on state as parameter |
36 | | onSetOff | (on) | occurs when the toggle is set to "off" state, aka `false`, provides current on state as parameter |
37 | | onToggle | (on) | occurs when the toggle is toggled, provides current on state as parameter |
38 | 
39 | ### Scoped Slots
40 | 
41 | | Property | Description |
42 | | ---      | ---         |
43 | | attrs    | aria helpers for accessiblity, use `v-bind="attrs"` to attach to an element |
44 | | on       | current state of the toggle component's `on` state |
45 | | setOn    | set the toggle component's `on` state to `true` |
46 | | setOff   | set the toggle component's `on` state to `false` |
47 | | toggle   | toggle the current state of the component's `on` state |
48 | | inputToggle | handlers for attaching internal click/keyup actions to the element, use `v-on="inputActions"` |
49 | 
50 | ## More Examples
51 | 
52 | ### Accessibility
53 | 
54 | We can use `v-bind` object syntax to receive the `attrs` parameter from the render prop. The `attrs` object contains a `tabIndex` and `aria-expanded` property to give your toggle element better accessibility. It is recommended you always set this.
55 | 
56 | ```html
57 | <template>
58 |   <div id="app">
59 |     <banshee-toggle>
60 |       <div slot-scope="{ attrs, toggle, on }">
61 |         <button v-bind="attrs" v-on="toggle">Toggle Me</button>
62 |         <br/>
63 |         {{ on }}
64 |       </div>
65 |     </banshee-toggle>
66 |   </div>
67 | </template>
68 | ```
69 | 
70 | ### Controlled Toggle Component
71 | 
72 | ```html
73 | <template>
74 |   <div id="app">
75 |     <banshee-toggle :on-toggle="toggle" :on="on">
76 |       <div slot-scope="{ toggle, on }">
77 |         <button v-on="toggle">Toggle Me</button>
78 |         <br/>
79 |         {{ on }}
80 |       </div>
81 |     </banshee-toggle>
82 |   </div>
83 | </template>
84 | 
85 | <script>
86 | export default {
87 |   name: 'app',
88 |   data: () => ({
89 |     on: false
90 |   }),
91 |   methods: {
92 |     toggle () {
93 |       this.on = !this.on
94 |     }
95 |   }
96 | }
97 | </script>
98 | ```


--------------------------------------------------------------------------------
/src/components/MediaQuery/README.md:
--------------------------------------------------------------------------------
 1 | # Media Query
 2 | 
 3 | CSS Media Query for your Vue templates to conditionally render components based on screen width.
 4 | 
 5 | ## Usage
 6 | 
 7 | [![Edit Banshee - MediaQuery Basic](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/n21841m64?module=%2Fsrc%2FApp.vue)
 8 | 
 9 | ```html
10 | <!-- Hide 'hello' text at 600+ pixels  -->
11 | <banshee-media-query min-width at="600" display="hidden">
12 |   hello
13 | </banshee-media-query>
14 | ```
15 | 
16 | The `<banshee-media-query>` component will only return the first child it wraps. For example, if two elements reside within the media query component as siblings, only the first one will be returned.
17 | 
18 | ```html
19 | <banshee-media-query min-width at="600" display="hidden">
20 |   <header>Title</header>
21 |   <div>Some content...</div> <!-- this div will not be displayed -->
22 | </banshee-media-query>
23 | ```
24 | 
25 | To return multiple elements, just wrap them within a root node like so:
26 | 
27 | ```html
28 | <banshee-media-query min-width at="600" display="hidden">
29 |   <section>
30 |     <header>Title</header>
31 |     <div>Some content...</div>
32 |   </section>
33 | </banshee-media-query>
34 | ```
35 | 
36 | ## Media Query
37 | 
38 | ### Attributes & Props
39 | 
40 | | Name | Required | Type | Default | Description |
41 | | ---  | ---      | ---  | ---     | ---         |
42 | | at   | `true`     | String, Number | N/A | width at which you want the breakpoint to be set. |
43 | | display | `true`  | String | `'visible'` | takes two possible values: `'visible'` or `'hidden'`. Tells the component whether to show or hide contents at specified breakpoint. |
44 | | maxWidth | `[true]` | Boolean | `false` | render based on `display` prop at or below the `at` prop. Note either `maxWidth` or `minWidth` must be set. |
45 | | minWidth | `[true]` | Boolean | `false` | render based on `display` prop at or above the `at` prop. Note either `maxWidth` or `minWidth` must be set. |
46 | | unit | false | String | `'px'` | unit to measure `at` prop with. Accepts `'px'` or '`em`'. |
47 | 
48 | ## More Examples
49 | 
50 | ### Table (Desktop) to Card (Mobile)
51 | 
52 | [![Edit Banshee - MediaQuery Table/Card Views](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/pw404x1rpj?module=%2Fsrc%2FApp.vue)
53 | 
54 | ```html
55 | <banshee-media-query display="hidden" min-width at="787">
56 |   <table>
57 |     <thead>
58 |       <tr>
59 |         <th>Name</th>
60 |         <th>Faction</th>
61 |         <th>Gold</th>
62 |         <th>Lumber</th>
63 |         <th>Food</th>
64 |       </tr>
65 |     </thead>
66 |     <tbody>
67 |       <tr v-for="unit in units" :key="unit.id">
68 |         <td>{{ unit.name }}</td>
69 |         <td>{{ unit.faction }}</td>
70 |         <td>{{ unit.gold }}</td>
71 |         <td>{{ unit.lumber }}</td>
72 |         <td>{{ unit.food }}</td>
73 |       </tr>
74 |     </tbody>
75 |   </table>
76 | </banshee-media-query>
77 | <banshee-media-query min-width at="787">
78 |   <div>
79 |     <div v-for="unit in units" :key="unit.id">
80 |       <ul>
81 |         <li>Name: {{ unit.name }}</li>
82 |         <li>Faction: {{ unit.faction }}</li>
83 |         <li>Gold: {{ unit.gold }}</li>
84 |         <li>Lumber: {{ unit.lumber }}</li>
85 |         <li>Food: {{ unit.food }}</li>
86 |       </ul>
87 |     </div>
88 |   </div>
89 | </banshee-media-query>
90 | ```
91 | 


--------------------------------------------------------------------------------
/.github/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Contributor Code of Conduct
 2 | 
 3 | ## Our Pledge
 4 | 
 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.
 6 | 
 7 | ## Our Standards
 8 | 
 9 | Examples of behavior that contributes to creating a positive environment include:
10 | 
11 | - Using welcoming and inclusive language
12 | - Being respectful of differing viewpoints and experiences
13 | - Gracefully accepting constructive criticism
14 | - Focusing on what is best for the community
15 | - Showing empathy towards other community members
16 | 
17 | Examples of unacceptable behavior by participants include:
18 | 
19 | - The use of sexualized language or imagery and unwelcome sexual attention or advances
20 | - Trolling, insulting/derogatory comments, and personal or political attacks
21 | - Public or private harassment
22 | - Publishing others’ private information, such as a physical or electronic address, without explicit permission
23 | - Other conduct which could reasonably be considered inappropriate in a professional setting
24 | 
25 | ## Our Responsibilities
26 | 
27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
28 | 
29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
30 | 
31 | ## Scope
32 | 
33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
34 | 
35 | ## Enforcement
36 | 
37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at banshee.ui@gmail.com. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
38 | 
39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project’s leadership.
40 | 
41 | ## Attribution
42 | 
43 | This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org/), version 1.4, available at [https://www.contributor-covenant.org/version/1/4/code-of-conduct.html](https://www.contributor-covenant.org/version/1/4/code-of-conduct.html)
44 | 
45 | 
46 | 
47 | 


--------------------------------------------------------------------------------
/src/components/Storage/src/Storage.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | export default {
  3 |   name: 'BansheeStorage',
  4 |   props: {
  5 |     get: {
  6 |       type: [Array, String],
  7 |       default: null
  8 |     },
  9 |     set: {
 10 |       type: [Array, Object],
 11 |       default: null
 12 |     },
 13 |     type: {
 14 |       type: String,
 15 |       default: 'local',
 16 |       validator (value) {
 17 |         return ['local', 'session']
 18 |       }
 19 |     }
 20 |   },
 21 |   data: () => ({
 22 |     result: {}
 23 |   }),
 24 |   mounted () {
 25 |     if (this.get) {
 26 |       this._handleInitialGet()
 27 |     }
 28 | 
 29 |     if (this.set) {
 30 |       this._handleInitialSet()
 31 |     }
 32 |   },
 33 |   computed: {
 34 |     length () {
 35 |       return this.storage.length
 36 |     },
 37 |     storage () {
 38 |       return this.type === 'local'
 39 |         ? window.localStorage
 40 |         : window.sessionStorage
 41 |     }
 42 |   },
 43 |   methods: {
 44 |     _getEach () {
 45 |       this.get.forEach(key => this.getItem(key))
 46 |     },
 47 |     _setEach () {
 48 |       this.set.forEach(item => {
 49 |         for (let prop in item) {
 50 |           this.setItem(prop, item[prop])
 51 |         }
 52 |       })
 53 |     },
 54 |     _handleInitialGet () {
 55 |       if (Array.isArray(this.get)) {
 56 |         this._getEach()
 57 |         return
 58 |       }
 59 | 
 60 |       this.getItem(this.get)
 61 |     },
 62 |     _handleInitialSet () {
 63 |       if (Array.isArray(this.set)) {
 64 |         this._setEach()
 65 |         return
 66 |       }
 67 | 
 68 |       for (let prop in this.set) {
 69 |         this.setItem(prop, this.set[prop])
 70 |       }
 71 |     },
 72 |     clear () {
 73 |       this.storage.clear()
 74 |       this.result = {}
 75 | 
 76 |       this.$emit('onClear')
 77 |     },
 78 |     getItem (key) {
 79 |       if (!key) {
 80 |         console.warn('You must provide a key when attempting to get data from storage.')
 81 |         return
 82 |       }
 83 | 
 84 |       const item = this.storage.getItem(key)
 85 |       this.$set(this.result, key, item)
 86 | 
 87 |       this.$emit('onGetItem', {
 88 |         item,
 89 |         result: this.result,
 90 |         store: this.storage
 91 |       })
 92 |     },
 93 |     key (property, index) {
 94 |       this.$set(this.result, property, this.storage.key(index))
 95 | 
 96 |       this.$emit('onKeyed', {
 97 |         key: this.storage.key(index),
 98 |         result: this.result,
 99 |         store: this.storage
100 |       })
101 |     },
102 |     removeItem (key) {
103 |       this.storage.removeItem(key)
104 | 
105 |       this.$emit('onRemoveItem', {
106 |         result: this.result,
107 |         store: this.storage
108 |       })
109 |     },
110 |     removeItems (keys) {
111 |       this.keys.forEach(key => {
112 |         this.storage.removeItem(key)
113 |       })
114 | 
115 |       this.$emit('onRemoveItem', {
116 |         result: this.result,
117 |         store: this.storage
118 |       })
119 |     },
120 |     setItem (key, value) {
121 |       if (!key || !value) {
122 |         console.warn('A key or value must be present in order to save data to storage.')
123 |         return
124 |       }
125 | 
126 |       this.storage.setItem(key, value)
127 |       this.$set(this.result, key, value)
128 | 
129 |       this.$emit('onSetItem', {
130 |         result: this.result,
131 |         store: this.storage
132 |       })
133 |     }
134 |   },
135 |   render (h) {
136 |     return this.$scopedSlots.default({
137 |       clear: this.clear,
138 |       getItem: this.getItem,
139 |       key: this.key,
140 |       length: this.length,
141 |       removeItem: this.removeItem,
142 |       removeItems: this.removeItems,
143 |       result: this.result,
144 |       setItem: this.setItem,
145 |       storage: this.storage
146 |     })
147 |   }
148 | }
149 | </script>
150 | 


--------------------------------------------------------------------------------
/src/components/Carousel/src/Carousel.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import BansheeCarouselSlide from './CarouselSlide'
  3 | import toPascal from '@/utils/hyphenToPascal'
  4 | 
  5 | export default {
  6 |   name: 'BansheeCarousel',
  7 |   props: {
  8 |     autoplay: {
  9 |       type: Boolean,
 10 |       default: false
 11 |     },
 12 |     id: {
 13 |       type: String,
 14 |       default: null
 15 |     },
 16 |     pauseOnHover: {
 17 |       type: Boolean,
 18 |       default: false
 19 |     },
 20 |     speed: {
 21 |       type: [String, Number],
 22 |       default: 5000
 23 |     },
 24 |     startSlide: {
 25 |       type: [String, Number],
 26 |       default: 0,
 27 |       validator: value => value >= 0
 28 |     },
 29 |     tag: {
 30 |       type: String,
 31 |       default: 'ul'
 32 |     },
 33 |     transitionAppear: {
 34 |       type: Boolean,
 35 |       default: false
 36 |     },
 37 |     transitionName: {
 38 |       type: String
 39 |     },
 40 |     transitionMode: {
 41 |       type: String
 42 |     }
 43 |   },
 44 |   data: () => ({
 45 |     autoplayTime: null,
 46 |     currentIndex: 0
 47 |   }),
 48 |   mounted () {
 49 |     this.currentIndex = this.startSlide
 50 | 
 51 |     if (this.autoplay) {
 52 |       this.play()
 53 |     }
 54 | 
 55 |     if (this.pauseOnHover) {
 56 |       this.$el.addEventListener('mouseenter', this.pause)
 57 |       this.$el.addEventListener('mouseleave', this.play)
 58 |     }
 59 |   },
 60 |   computed: {
 61 |     activeSlide () {
 62 |       return this.carouselSlides[this.currentIndex]
 63 |     },
 64 |     carouselSlides () {
 65 |       return this.$slots.default.filter(child => {
 66 |         const options = child.componentOptions
 67 |         if (options && toPascal(BansheeCarouselSlide.name)) {
 68 |           return child
 69 |         }
 70 |       })
 71 |     },
 72 |     length () {
 73 |       return this.carouselSlides.length
 74 |     },
 75 |     otherCarouselContent () {
 76 |       return this.$slots.default.filter(child => !child.componentOptions ? child : null)
 77 |     }
 78 |   },
 79 |   methods: {
 80 |     nextSlide () {
 81 |       this.currentIndex += 1
 82 | 
 83 |       if (this.currentIndex > this.length - 1) {
 84 |         this.currentIndex = 0
 85 |       }
 86 | 
 87 |       if (this.autoplay) {
 88 |         this.resetTime()
 89 |       }
 90 | 
 91 |       this.$emit('onChange', this.currentIndex)
 92 |     },
 93 |     pause () {
 94 |       this.autoplayTime = clearInterval(this.autoplayTime)
 95 |       this.$emit('onChange', this.currentIndex)
 96 |     },
 97 |     play () {
 98 |       this.autoplayTime = setInterval(this.nextSlide, this.speed)
 99 |       this.$emit('onChange', this.currentIndex)
100 |     },
101 |     previousSlide () {
102 |       this.currentIndex -= 1
103 | 
104 |       if (this.currentIndex < 0) {
105 |         this.currentIndex = this.length - 1
106 |       }
107 | 
108 |       if (this.autoplay) {
109 |         this.resetTime()
110 |       }
111 | 
112 |       this.$emit('onChange', this.currentIndex)
113 |     },
114 |     resetTime () {
115 |       this.autoplayTime = clearInterval(this.autoplayTime)
116 |       this.autoplayTime = setInterval(this.nextSlide, this.speed)
117 |     }
118 |   },
119 |   render (h) {
120 |     const scopedSlots = this.$scopedSlots.default
121 |       ? this.$scopedSlots.default({
122 |         activeIndex: this.currentIndex,
123 |         btnAttrs: {
124 |           buttons: {
125 |             'aria-label': 'Carousel Buttons',
126 |             'aria-controls': this.id
127 |           },
128 |           next: {
129 |             'aria-label': 'next'
130 |           },
131 |           pause: {
132 |             'aria-label': 'pause'
133 |           },
134 |           play: {
135 |             'aria-label': 'play'
136 |           },
137 |           previous: {
138 |             'aria-label': 'previous'
139 |           }
140 |         },
141 |         length: this.length,
142 |         next: this.nextSlide,
143 |         pause: this.pause,
144 |         play: this.play,
145 |         previous: this.previousSlide
146 |       })
147 |       : null
148 | 
149 |     const slide = h('transition', {
150 |       props: {
151 |         name: this.transitionName,
152 |         mode: this.transitionMode
153 |       }
154 |     }, [this.activeSlide])
155 | 
156 |     return h(this.tag, {
157 |       attrs: {
158 |         'aria-live': 'polite',
159 |         id: this.id,
160 |         tabindex: 0
161 |       }
162 |     }, [slide, this.otherCarouselContent, scopedSlots])
163 |   }
164 | }
165 | </script>
166 | 


--------------------------------------------------------------------------------
/src/components/Storage/README.md:
--------------------------------------------------------------------------------
 1 | # Banshee Storage
 2 | 
 3 | [Local](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) and [session](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) storage component.
 4 | 
 5 | ## Usage
 6 | 
 7 | To use this component simply wrap other components you want to expose to the storage methods.
 8 | 
 9 | For example, if I had an array of monsters saved in localStorage under the key `monsters`, I can preload our storage using the `get` prop.
10 | 
11 | ```html
12 | <banshee-storage get="monsters">
13 |   <ul slot-scope="{ result }">
14 |     <banshee-simple-list v-if="result.monsters"
15 |                          :items="result.monsters">
16 |       <template slot-scope="{ item }">
17 |         <li>{{ item }}</li>
18 |       </template>
19 |     </banshee-simple-list>
20 |   </ul>
21 | </banshee-storage>
22 | ```
23 | 
24 | The `result` variable exposed via the `slot-scope` is an object containg all the key/value pairs of data you have set/get from storage during the lifecycle of your component.
25 | 
26 | ## Storage
27 | 
28 | ### Attributes & Props
29 | 
30 | | Name | Required | Type | Default | Description |
31 | | ---  | ---      | ---  | ---     | ---         |
32 | | get  | `false`  | [Array, String] | `null` | key(s) to get from data saved in local or session storage on component mount |
33 | | set  | `false`  | [Array, Object] | `null` | object or array of objects containing key/value pairs to save to local or session storage on component mount |
34 | | type | `false`  | String | `'local'` | type of storage you want to operate on, choices are `'local'` or `'session'` |
35 | 
36 | ### Events
37 | 
38 | | Event | Parameters | Description |
39 | | ---   | ---        | ---         |
40 | | onClear | n/a | occurs when storage is cleared |
41 | | onGetItem | ({ item, result, store }) | occurs when a value is retrieved from storage, emits an object containing the item retrieved, the entire result object, and the storage object |
42 | | onKeyed   | ({ key, result, store })  | occurs when storage has the `key` operation performed on it, emits an object containing the key result, the result object, and the storage object |
43 | | onRemoveItem | ({ result, store }) | occurs when an item is removed from storage, emits an object containing the result object and the storage object |
44 | | onSetItem | ({ result, store }) | occurs when an item is set in storage, emits an object containing the result object and the storage object |
45 | 
46 | **The `result` object in depth**    
47 | The `result` property is an object containing all the values obtained as a result of all the storage manipulation you have done over the component's lifecycle.
48 | 
49 | ### Scoped Slots
50 | 
51 | | Property | Description |
52 | | ---      | ---         |
53 | | clear    | clears out your storage completely |
54 | | getItem  | retrieves an item from storage, takes a `key` parameter to obtain the item from storage |
55 | | key      | returns the nth key in the storage, takes a number `n` of the number key to retrieve |
56 | | length   | the length of the storage object |
57 | | removeItem | removes an item from storage, takes a `key` parameter of the item to remove |
58 | | removeItems | removes multiple items from storage, takes an array of `key` to remove |
59 | | result   | the result object |
60 | | setItem  | saves an item to storage, takes a `key` as the first parameter and the `value` as the second parameter |
61 | | storage  | the storage object |
62 | 
63 | ## More Examples
64 | 
65 | ### Setting to sessionStorage
66 | 
67 | By default, the `banshee-storage` component uses localStorage.  If you want to set it to sessionStorage you can utilize the `type` prop which will accept one of two possible values: `'local'` or `'session'`.
68 | 
69 | ```html
70 | <banshee-storage type="session">...</banshee-storage>
71 | ```
72 | 
73 | ### Pre-set data to storage
74 | 
75 | In the first example we saw we could preload data from storage using the `get` prop.  We can also save data on component mount using the set prop.
76 | 
77 | ```html
78 | <template>
79 |   <banshee-storage :set="myMonsters">
80 |     <pre slot-scope="{ result }">
81 |       {{ result.monsters }}
82 |     </pre>
83 |   </banshee-storage>
84 | </template>
85 | 
86 | <script>
87 | // ...
88 | data: () => ({
89 |   myMonsters: {
90 |     monsters: ['Undead', 'Sludge Belcher', 'Bat']
91 |   }
92 | })
93 | </script>
94 | ```
95 | 
96 | The `set` prop expects either a single object or any array of objects where the object's key becomes the key in storage and it's value also becomes the value in storage.  Notice above our `myMonsters` object has a key of `monsters`.  We then use the `monsters` property on our `result` object to access that data.
97 | 


--------------------------------------------------------------------------------
/src/components/Listbox/README.md:
--------------------------------------------------------------------------------
  1 | # Listbox
  2 | 
  3 | The listbox displays a list of items/options that are selectable to the user.
  4 | 
  5 | ## Basic Usage
  6 | 
  7 | [![Edit Banshee - Listbox Basic](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/237lz66rj?module=%2Fsrc%2FApp.vue)
  8 | 
  9 | ```html
 10 | <banshee-listbox :items="forsaken">
 11 |   <banshee-listbox-item>
 12 |     <template slot-scope="{ active, item }">
 13 |       <span :class="{ active }">{{ item }}</span>
 14 |     </template>
 15 |   </banshee-listbox-item>
 16 | </banshee-listbox>
 17 | 
 18 | <script>
 19 |   //...
 20 |   data: () => ({
 21 |     forsaken: ['Sylvanas', 'Nathanos', 'Belmont', 'Mortuus', 'Voss']
 22 |   })
 23 | </script>
 24 | ```
 25 | 
 26 | The listbox is composed of two tags:
 27 | 
 28 | - `<banshee-listbox>` - parent tag, designates area to be a listbox and initializes internal state + keyboard interactions
 29 | - `<banshee-listbox-item>` - direct child of `<banshee-listbox>`, exposes scoped slot for content rendering helpers
 30 | 
 31 | ## Listbox
 32 | 
 33 | ### Attributes & Props
 34 | 
 35 | | Name | Required | Type | Default | Description |
 36 | | ---  | ---      | ---  | ---     | ---         |
 37 | | default-focus | `false` | [String, Number] | `0` | Default index of item to focus on mounted |
 38 | | default-selected | `false` | [String, Number, Array] | `null` | Default index(es) of item(s) to be selected on mounted |
 39 | | items | `true` | Array | `null` | Items to be presented within listbox |
 40 | | item-key | `false` | String | `'id'` | If each element in items is an object, what to key each `listbox-item` by |
 41 | | tag | `false` | String | `div` | HTML tag for listbox |
 42 | 
 43 | ### Events
 44 | 
 45 | | Event | Parameters | Description |
 46 | | ---   | ---        | ---         |
 47 | | onFocus | (index, item)  | triggers when you focus an item within the listbox, provides the index of that item and the item itself |
 48 | | onSelectItem | (item, selected) | triggers when you select an item from the listbox, provides the current item and all the selected items |
 49 | | onRemoveItem | (removed, selected) | triggers when you remove an item from the selected items, provides the removed item and all the selected items |
 50 | | onTransfer | (selected) | triggers when you transfer items between listboxes, provides the selected items |
 51 | 
 52 | ### Scoped Slots
 53 | 
 54 | | Property | Description |
 55 | | ---      | ---         |
 56 | | items    | the items in the listbox |
 57 | | focus    | method for focusing an item, expects an index |
 58 | | focused  | the currently focused index |
 59 | | selectItem | method for selecting an item |
 60 | | selectedItems | the array of currently selected items |
 61 | | total | the length of the items array |
 62 | | totalSelected | the length of the selected array |
 63 | | transfer | method to setup new focus and reset internal state on item transfers |
 64 | 
 65 | ## Listbox Item
 66 | 
 67 | ### Attributes & Props
 68 | 
 69 | | Name | Required | Type | Default | Description |
 70 | | ---  | ---      | ---  | ---     | ---         |
 71 | | tag | `false` | String | `div` | HTML tag for listbox-item |
 72 | 
 73 | ### Scoped Slots
 74 | 
 75 | | Property | Description |
 76 | | ---      | ---         |
 77 | | active   | boolean whether the current item is actively being focused or not |
 78 | | item     | each individual element in the items array |
 79 | | index    | the item's index |
 80 | | selected | boolean whether the current item is selected | 
 81 | 
 82 | ## Example: List Transfer
 83 | 
 84 | ```html
 85 | <template>
 86 |   <div id="app">
 87 |     <banshee-listbox @onTransfer="transfer" :items="characters">
 88 |       <banshee-listbox-item>
 89 |         <template slot-scope="{ active, item, selected }">
 90 |           <template v-if="selected">&#10004;</template> <span :class="{ active }">{{ item }}</span>
 91 |         </template>
 92 |       </banshee-listbox-item>
 93 | 
 94 |       <template slot-scope="{ transfer }">
 95 |         <button @click="transfer">Transfer</button>
 96 |       </template>
 97 |     </banshee-listbox>
 98 | 
 99 |     <banshee-listbox :items="favoriteCharacters">
100 |       <p>My favorite:</p>
101 |       <banshee-listbox-item>
102 |         <template slot-scope="{ item }">
103 |           {{ item }}
104 |         </template>
105 |       </banshee-listbox-item>
106 |     </banshee-listbox>
107 |   </div>
108 | </template>
109 | 
110 | <script>
111 | export default {
112 |   name: 'app',
113 |   data () {
114 |     return {
115 |       characters: [
116 |         'Varian', 'Sylvanas', 'Thrall', 'Saurfang',
117 |         'Malfurion', 'Tyrande', 'Greymane', 'Nathanos',
118 |         'Anduin', 'Illidan', 'Khadgar', 'Vol\'jin',
119 |         'Chen', 'Garrosh', 'Velen', 'Bolvar',
120 |         'Arthas', 'Jaina', 'Muradin', 'Mograine'
121 |       ],
122 |       favoriteCharacters: []
123 |     }
124 |   },
125 |   methods: {
126 |     transfer ({ selected }) {
127 |       this.characters = this.characters.filter(x => !selected.includes(x))
128 |       this.favoriteCharacters.push(...selected)
129 |     }
130 |   }
131 | }
132 | </script>
133 | ```


--------------------------------------------------------------------------------
/src/components/SmartList/README.md:
--------------------------------------------------------------------------------
  1 | # Smart List
  2 | 
  3 | A component for managing collections of data.  It provides helpers for searching and sorting arrays of data.
  4 | 
  5 | ## Basic Usage
  6 | 
  7 | [![Edit Banshee - Basic SmartList ](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/mz2zjl4n28)
  8 | 
  9 | ```html
 10 | <banshee-smart-list :items="minions">
 11 |   <div slot-scope="{ items }">
 12 |     <template v-for="minion in items">
 13 |       <div :key="minion">
 14 |         {{ minion }}
 15 |       </div>
 16 |     </template>
 17 |   </div>
 18 | </banshee-smart-list>
 19 | 
 20 | <script>
 21 | // ...
 22 | data: () => ({
 23 |   minions: ['Dark Rangers', 'Abominations', 'Val\'kyr', 'Deathstalkers']
 24 | })
 25 | </script>
 26 | ```
 27 | 
 28 | In its most simple form, the `<banshee-smart-list>` component receives an `items` prop, which must be an array. The scoped slot exposes an `items` array which is your original array of items with any computations, like sorting, already done to it.
 29 | 
 30 | ## Smart List
 31 | 
 32 | ### Attributes & Props
 33 | 
 34 | | Name | Required | Type | Default | Description |
 35 | | ---  | ---      | ---  | ---     | ---         |
 36 | | default-sort | `false` | String | `null` | sort the items on component creation either via `'asc'` or `'desc'` values |
 37 | | filter-method | `false` | Function | `null` | custom function to filter items by |
 38 | | items | `true` | Array | n/a | the collection you want to manipulate |
 39 | | sort-method | `false` | Function | `null` | custom function to sort items by |
 40 | | sort-key | `false` | String | `''` | object key to sort by with | 
 41 | | query | `false` | String | `''` | query string to search/filter your items by |
 42 | 
 43 | #### Custom Filter & Sort
 44 | 
 45 | By default, the `bashee-smart-list` component provides basic filtering and sorting methods. You can provide your own filter and sorting methods for the component to use via the `filter-method` and `sort-method` props.
 46 | 
 47 | #### Filtering    
 48 | The function you provide for filtering will get two arguments:
 49 | 
 50 | - `query` - the current query string used to filter through the data
 51 | - `data` - the entire array of items provided via the `items` prop
 52 | 
 53 | #### Sorting   
 54 | The function you provide for the sorting will get two arguments:
 55 | 
 56 | - `sort` - the sorting object used internally by the component
 57 | - `data` - the list of items provided via the `items` prop, if a `query` prop exists the `data` will be an array of the currently filtered items
 58 | 
 59 | **The `sort` object in-depth**    
 60 | The internal `sort` object used by the component looks like:
 61 | 
 62 | ```javascript
 63 | sort: {
 64 |   by: this.sortKey,
 65 |   order: 1
 66 | }
 67 | ```
 68 | 
 69 | - `sort.by` - if your array of items are objects, this is the key you want to sort with
 70 | - `sort.order` - ascending (a positive number) or descending order (a negative number)
 71 | 
 72 | ### More Examples
 73 | 
 74 | #### Bootstrap 4 - Data Table
 75 | 
 76 | [![Edit Banshee - Bootstrap 4 Data Table with SmartList ](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/1yv76p0mrj?module=%2Fsrc%2FApp.vue)
 77 | 
 78 | ```html
 79 | <template>
 80 |   <div class="card">
 81 |     <div class="p-2">
 82 |       <div class="input-group mb-3">
 83 |         <div class="input-group-prepend">
 84 |           <span class="input-group-text" id="filter-table">Filter</span>
 85 |         </div>
 86 |         <input type="text" class="form-control" 
 87 |               aria-label="Filter" aria-describedby="filter-table"
 88 |               v-model="query">
 89 |       </div>
 90 |     </div>
 91 | 
 92 |     <banshee-smart-list :items="units" :query="query">
 93 |       <table class="table" slot-scope="{ items, sort }">
 94 |         <thead>
 95 |           <tr>
 96 |             <th @click="sort('name')">Name</th>
 97 |             <th @click="sort('faction')">Faction</th>
 98 |             <th @click="sort('gold')">Gold</th>
 99 |             <th @click="sort('lumber')">Lumber</th>
100 |             <th @click="sort('food')">Food</th>
101 |           </tr>
102 |         </thead>
103 |         <tbody>
104 |           <tr v-for="unit in items" :key="unit.id">
105 |             <td>{{ unit.name }}</td>
106 |             <td>{{ unit.faction }}</td>
107 |             <td>{{ unit.gold }}</td>
108 |             <td>{{ unit.lumber }}</td>
109 |             <td>{{ unit.food }}</td>
110 |           </tr>
111 |         </tbody>
112 |       </table>
113 |     </banshee-smart-list>
114 |   </div>
115 | </template>
116 | 
117 | <script>
118 | //...
119 | data: () => ({
120 |   units: [
121 |     { id: 1, name: 'Abomination', faction: 'Undead', gold: 240, lumber: 40, food: 4 },
122 |     { id: 2, name: 'Gryphon Rider', faction: 'Human', gold: 280, lumber: 70, food: 4 },
123 |     { id: 3, name: 'Black Citadel', faction: 'Undead', gold: 325, lumber: 230, food: 10 },
124 |     { id: 4, name: 'Keeper of the Grove', faction: 'Night Elf', gold: 425, lumber: 100, food: 5 },
125 |     { id: 5, name: 'Blademaster', faction: 'Orc', gold: 425, lumber: 100, food: 5 },
126 |     { id: 6, name: 'Gargoyle', faction: 'Undead', gold: 185, lumber: 30, food: 2 },
127 |     { id: 7, name: 'Town Hall', faction: 'Human', gold: 385, lumber: 205, food: 12 },
128 |     { id: 8, name: 'Boneyard', faction: 'Undead', gold: 175, lumber: 200, food: 0 },
129 |     { id: 9, name: 'Crypt Fiend', faction: 'Undead', gold: 215, lumber: 40, food: 3 },
130 |     { id: 10, name: 'Ancient of Lore', faction: 'Night Elf', gold: 155, lumber: 145, food: 0 },
131 |   ]
132 | })
133 | </script>
134 | ```


--------------------------------------------------------------------------------
/src/components/Listbox/src/Listbox.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import BansheeListboxItem from './ListboxItem'
  3 | import toPascal from '@/utils/hyphenToPascal'
  4 | 
  5 | export default {
  6 |   name: 'BansheeListbox',
  7 |   props: {
  8 |     defaultFocus: {
  9 |       type: [String, Number],
 10 |       default: 0
 11 |     },
 12 |     defaultSelected: {
 13 |       type: [Array, String, Number],
 14 |       default: null
 15 |     },
 16 |     items: {
 17 |       type: Array,
 18 |       required: true,
 19 |       default: null
 20 |     },
 21 |     itemKey: {
 22 |       type: String,
 23 |       default: 'id'
 24 |     },
 25 |     tag: {
 26 |       type: String,
 27 |       default: 'div'
 28 |     }
 29 |   },
 30 |   data: () => ({
 31 |     focusedIndex: 0,
 32 |     selected: []
 33 |   }),
 34 |   computed: {
 35 |     currentItem () {
 36 |       return this.items[this.focusedIndex]
 37 |     },
 38 |     currentItemDOM () {
 39 |       return this.$el.querySelectorAll('[role="option"]')[this.focusedIndex]
 40 |     }
 41 |   },
 42 |   mounted () {
 43 |     if (this.defaultFocus) {
 44 |       this.focusedIndex = parseInt(this.defaultFocus)
 45 |     }
 46 | 
 47 |     this._handleDefaultSelected()
 48 |   },
 49 |   methods: {
 50 |     _handleDefaultSelected () {
 51 |       if (!Array.isArray(this.defaultSelected)) {
 52 |         const index = parseInt(this.defaultSelected)
 53 |         const item = this.items[index]
 54 | 
 55 |         if (item) this.selected.push(item)
 56 |       } else {
 57 |         this.selected = this.defaultSelected.map(i => this.items[i])
 58 |       }
 59 |     },
 60 |     _removeFromSelected () {
 61 |       const index = this.selected.indexOf(this.currentItem)
 62 |       this.selected = this.selected.filter((x, i) => i !== index)
 63 | 
 64 |       this.$emit('onRemoveItem', {
 65 |         removed: this.currentItem,
 66 |         selected: this.selected
 67 |       })
 68 |     },
 69 |     handleEvent ({ keyCode }) {
 70 |       switch (keyCode) {
 71 |         case 13: /** Enter key */
 72 |           return this.selectItem()
 73 |         case 35: /** End key */
 74 |           return this.scrollBottom()
 75 |         case 36: /** Home key */
 76 |           return this.scrollTop()
 77 |         case 38: /** Up arrow */
 78 |           return this.up()
 79 |         case 40: /** Down arrow */
 80 |           return this.down()
 81 |       }
 82 |     },
 83 |     down () {
 84 |       this.focusItem(this.focusedIndex + 1)
 85 | 
 86 |       if (this.focusedIndex > this.items.length - 1) {
 87 |         this.focusItem(0)
 88 |       }
 89 | 
 90 |       this.scrollIntoView()
 91 |     },
 92 |     focusItem (index) {
 93 |       this.focusedIndex = index
 94 |       this.$emit('onFocus', {
 95 |         index,
 96 |         item: this.items[index]
 97 |       })
 98 |     },
 99 |     selectItem () {
100 |       if (this.currentItem && !this.selected.includes(this.currentItem)) {
101 |         this.selected.push(this.currentItem)
102 | 
103 |         this.$emit('onSelectItem', {
104 |           item: this.currentItem,
105 |           selected: this.selected
106 |         })
107 |       } else {
108 |         this._removeFromSelected()
109 |       }
110 |     },
111 |     scrollBottom () {
112 |       this.focusItem(this.items.length - 1)
113 |       this.scrollIntoView()
114 |     },
115 |     scrollIntoView () {
116 |       this.$nextTick(() => {
117 |         this.currentItemDOM.scrollIntoView()
118 |       })
119 |     },
120 |     scrollTop () {
121 |       this.focusItem(0)
122 |       this.scrollIntoView()
123 |     },
124 |     transfer () {
125 |       this.$emit('onTransfer', {
126 |         selected: this.selected
127 |       })
128 | 
129 |       this.$el.focus()
130 |       this.selected = []
131 |     },
132 |     up () {
133 |       this.focusItem(this.focusedIndex - 1)
134 | 
135 |       if (this.focusedIndex < 0) {
136 |         this.focusItem(this.items.length - 1)
137 |       }
138 | 
139 |       this.scrollIntoView()
140 |     }
141 |   },
142 |   render (h) {
143 |     const children = this.$slots.default.map(child => {
144 |       const options = child.componentOptions
145 | 
146 |       if (options && toPascal(options.tag) === BansheeListboxItem.name) {
147 |         return this.items.map((item, index) => {
148 |           let key
149 | 
150 |           // If item is not an object
151 |           if (item[this.itemKey]) {
152 |             key = item[this.itemKey]
153 |           } else {
154 |             key = `${item}-${index}`
155 |           }
156 | 
157 |           return h(BansheeListboxItem, {
158 |             props: {
159 |               item,
160 |               index,
161 |               focus: this.focusItem,
162 |               focused: this.focusedIndex,
163 |               selected: this.selected,
164 |               selectItem: this.selectItem,
165 |               ...options.propsData
166 |             },
167 |             key,
168 |             ...child.data
169 |           })
170 |         })
171 |       }
172 | 
173 |       return child
174 |     })
175 | 
176 |     const scopedSlot = this.$scopedSlots.default
177 |       ? this.$scopedSlots.default({
178 |         items: this.items,
179 |         focus: this.focusItem,
180 |         focused: this.focusedIndex,
181 |         selectItem: this.selectItem,
182 |         selectedItems: this.selected,
183 |         total: this.items.length,
184 |         totalSelected: this.selected.length,
185 |         transfer: this.transfer
186 |       })
187 |       : null
188 | 
189 |     return h(this.tag, {
190 |       attrs: {
191 |         role: 'listbox',
192 |         tabindex: 0
193 |       },
194 |       on: {
195 |         dblclick: this.selectItem,
196 |         keydown: this.handleEvent
197 |       }
198 |     }, [children, scopedSlot])
199 |   }
200 | }
201 | </script>
202 | 


--------------------------------------------------------------------------------
/src/components/Carousel/README.md:
--------------------------------------------------------------------------------
  1 | # Carousel
  2 | 
  3 | A basic carousel component for looping through slides of images or text.
  4 | 
  5 | ## Basic Usage
  6 | 
  7 | ```html
  8 | <banshee-carousel>
  9 |   <banshee-carousel-slide>
 10 |     content 1
 11 |   </banshee-carousel-slide>
 12 |   <banshee-carousel-slide>
 13 |     content 2
 14 |   </banshee-carousel-slide>
 15 |   <banshee-carousel-slide>
 16 |     content 3
 17 |   </banshee-carousel-slide>
 18 | </banshee-carousel>
 19 | ```
 20 | 
 21 | The carousel requires two tags:
 22 | 
 23 | - `<banshee-carousel>`
 24 | - `<banshee-carousel-slide>`
 25 | 
 26 | The `<banshee-carousel>` tag marks an area as a Banshee carousel and provides the functionality for any child `<banshee-carousel-slide>` components to properly function.  The `<banshee-carousel-slide>` must be a direct child of the `<banshee-carousel>` to be part of the "sliding" content.
 27 | 
 28 | As with everything Banshee, no CSS is being applied and no default transitions.  You will have to provide your own.
 29 | 
 30 | With a custom transition:
 31 | 
 32 | ```html
 33 | <banshee-carousel transition-name="fade" 
 34 |                   transition-mode="out-in">
 35 |   <banshee-carousel-slide v-for="slide in slides" :key="slide.id">
 36 |     <img :src="slide.src">
 37 |   </banshee-carousel-slide>
 38 | </banshee-carousel>
 39 | 
 40 | <script>
 41 | // ...
 42 | slides: [
 43 |   { id: 1, src: 'https://picsum.photos/200?image=1074' },
 44 |   { id: 2, src: 'https://picsum.photos/200?image=876' },
 45 |   { id: 3, src: 'https://picsum.photos/200?image=1080' },
 46 |   { id: 4, src: 'https://picsum.photos/200?image=1011' },
 47 |   { id: 5, src: 'https://picsum.photos/200?image=995' }
 48 | ]
 49 | </script>
 50 | 
 51 | <style>
 52 | .fade-enter-active, .fade-leave-active {
 53 |   transition: opacity .5s;
 54 | }
 55 | .fade-enter, .fade-leave-to {
 56 |   opacity: 0;
 57 | }
 58 | </style>
 59 | ```
 60 | 
 61 | [![Edit Banshee - Carousel](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/o7zpp38815)
 62 | 
 63 | ## Carousel
 64 | 
 65 | ### Attributes & Props
 66 | 
 67 | | Name | Required | Type | Default | Description |
 68 | | ---  | ---      | ---  | ---     | ---         |
 69 | | autoplay | `false` | Boolean | `false` | automatically loop through each slide |
 70 | | id | `false` | String | `null` | HTML `id` attribute to set on the carousel |
 71 | | pause-on-over | `false` | Boolean | `false` | whether to pause the carousel on mouse hover |
 72 | | speed | `false` | [String, Number] | `5000` | time in ms for duration of each slide to display |
 73 | | start-slide | `false` | [String, Number] | `0` | which slide to start on |
 74 | | tag | `false` | String | `ul` | HTML tag for carousel |
 75 | | transition-appear | `false` | Boolean | `false` | appear property on Vue transition tag |
 76 | | transition-name | `false` | String | n/a | name for your Vue transition |
 77 | | transition-mode | `false` | String | n/a | mode for your Vue transition |
 78 | 
 79 | ### Events
 80 | 
 81 | | Event | Parameters | Description |
 82 | | ---   | ---        | ---         |
 83 | | onChange | the current index of the carousel | triggers when the carousel plays, pauses, or changes slides |
 84 | 
 85 | ### Scoped Slots
 86 | 
 87 | | Property | Description |
 88 | | ---      | ---         |
 89 | | activeIndex | the current active slide index |
 90 | | btnAttrs.buttons | aria labels for group of buttons that control slideshow |
 91 | | btnAttrs.next | aria labels for 'next' button |
 92 | | btnAttrs.pause | aria labels for 'pause' button |
 93 | | btnAttrs.play | aria labels for 'play' button | 
 94 | | btnAttrs.previous | aria labels for 'previous' button |
 95 | | length | total number of slides in carousel |
 96 | | next | method to make the next slide active | 
 97 | | pause | method to pause the carousel if autoplaying |
 98 | | play | method to play the carousel if paused |
 99 | | previous | method to make the previous slide active
100 | 
101 | ## Carousel Slide
102 | 
103 | ### Attributes & Props
104 | 
105 | | Name | Required | Type | Default | Description |
106 | | ---  | ---      | ---  | ---     | ---         |
107 | | tag  | `false`  | String | `li`  | HTML tag for carousel slide |
108 | 
109 | ## More Examples
110 | 
111 | ### Carousel with Buttons
112 | 
113 | ```html
114 | <banshee-carousel autoplay transition-name="fade" transition-mode="out-in">
115 |   <banshee-carousel-slide>
116 |     ...
117 |   </banshee-carousel-slide>
118 | 
119 |   <banshee-carousel-slide>
120 |     ...
121 |   </banshee-carousel-slide>
122 | 
123 |   <banshee-carousel-slide>
124 |     ...
125 |   </banshee-carousel-slide>
126 | 
127 |   <template slot-scope="{ next, pause, play, previous, btnAttrs }">
128 |     <button @click="previous" v-bind="btnAttrs.previous">Previous</button>
129 |     <button @click="play" v-bind="btnAttrs.play">Play</button>
130 |     <button @click="pause" v-bind="btnAttrs.pause">Pause</button>
131 |     <button @click="next" v-bind="btnAttrs.next">Next</button>
132 |   </template>
133 | </banshee-carousel>
134 | ```
135 | 
136 | ### Bootstrap 4
137 | 
138 | [![Edit Banshee - Bootstrap 4 Carousel](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/38mokl6k4m?module=%2Fsrc%2FApp.vue)
139 | 
140 | ```html
141 | <banshee-carousel autoplay transition-name="fade" transition-mode="out-in" tag="div" class="carousel slide">  
142 |   <banshee-carousel-slide v-for="slide in slides" :key="slide.id" tag="div" class="carousel-inner">
143 |     <div class="carousel-item active">
144 |       <img class="d-block w-100" :src="slide.src">
145 |     </div>
146 |   </banshee-carousel-slide>
147 | 
148 |   <template slot-scope="{ next, pause, play, previous, btnAttrs }">
149 |     <a class="carousel-control-prev" role="button"
150 |         @click="previous" v-bind="btnAttrs.previous">
151 |       <span class="carousel-control-prev-icon" aria-hidden="true"></span>
152 |       <span class="sr-only">Previous</span>
153 |     </a>
154 | 
155 |     <a class="carousel-control-next" role="button"
156 |         @click="next" v-bind="btnAttrs.next">
157 |       <span class="carousel-control-next-icon" aria-hidden="true"></span>
158 |       <span class="sr-only">Next</span>
159 |     </a>
160 |   </template>
161 | </banshee-carousel>   
162 | ```
163 | 


--------------------------------------------------------------------------------
/src/components/Expandable/README.md:
--------------------------------------------------------------------------------
  1 | # Expandable
  2 | 
  3 | Toggle the visibility of content within Banshee expandables.
  4 | 
  5 | ## Basic Usage
  6 | 
  7 | [![Edit Banshee - Expandable Basic](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/kkq0mmznm7)
  8 | 
  9 | ```html
 10 | <banshee-expandable>
 11 |   <banshee-expandable-item>
 12 |     <banshee-expandable-title>Content One</banshee-expandable-title>
 13 |     <banshee-expandable-body>
 14 |       Mollit eiusmod ut tempor amet Lorem cillum sint irure qui adipisicing. Anim fugiat aute ex aliquip ut minim dolore culpa.
 15 |     </banshee-expandable-body>
 16 |   </banshee-expandable-item>
 17 | 
 18 |   <banshee-expandable-item>
 19 |     <banshee-expandable-title>Content Two</banshee-expandable-title>
 20 |     <banshee-expandable-body>
 21 |       Adipisicing est non id laboris cupidatat veniam minim consequat enim.
 22 |     </banshee-expandable-body>
 23 |   </banshee-expandable-item>
 24 | </banshee-expandable>
 25 | ```
 26 | 
 27 | To create some expandable content within your application you utilize a few tags:
 28 | 
 29 | - `<banshee-expandable>` - designates area of app that will hold expandable content
 30 | - `<banshee-expandable-item>` - each individual expandable area
 31 | - `<banshee-expandable-title>` - the title of the content area and the portion of the expandable that is always showing
 32 | - `<banshee-expandable-body>` - the hidden content of the expandable that is shown once an item has been expanded
 33 | 
 34 | **The only requirement is that a `<banshee-expandable-item>` is a direct child of `<banshee-expandable>`.**
 35 | 
 36 | It is fair game to wrap other HTML/Components on our `<banshee-expandable-body>` as shown below.
 37 | 
 38 | ```html
 39 | <banshee-expandable>
 40 |   <banshee-expandable-item>
 41 |     <banshee-expandable-title>expandable 1</banshee-expandable-title>
 42 |     <transition name="fade">
 43 |       <banshee-expandable-body>
 44 |         <h2>This is the first expandable</h2>
 45 |         <p>some text Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, repudiandae ratione debitis blanditiis magni voluptates ex dolor nemo, ad quo odit quibusdam dicta inventore sunt necessitatibus impedit incidunt aliquam eligendi.</p>
 46 |       </banshee-expandable-body>
 47 |     </transition>
 48 |   </banshee-expandable-item>
 49 | 
 50 |   <banshee-expandable-item>
 51 |     <banshee-expandable-title>expandable 2</banshee-expandable-title>
 52 |     <transition name="fade">
 53 |       <banshee-expandable-body>
 54 |         <h2>This is the second expandable</h2>
 55 |         <ol>
 56 |           <li>One</li>
 57 |           <li>Two</li>
 58 |         </ol>
 59 |       </banshee-expandable-body>
 60 |     </transition>
 61 |   </banshee-expandable-item>
 62 | </banshee-expandable>
 63 | ```
 64 | 
 65 | ## Expandable
 66 | 
 67 | Designates area of app that will hold expandable content.
 68 | 
 69 | ### Attributes & Props
 70 | 
 71 | | Name | Required | Type | Default | Description |
 72 | | ---  | ---      | ---  | ---     | ---         |
 73 | | accordion | `false` | Boolean | `false` | designates the expandables as accordions, allowing only one to be open at a time |
 74 | | active | `false` | [Array, Number] | N/A | control prop, control which expandable-items are open |
 75 | | tag | `false` | String | `'div'` | HTML tag for wrapping expandable element |
 76 | 
 77 | ### Events
 78 | 
 79 | | Event | Parameters | Description |
 80 | | ---   | ---        | ---         |
 81 | | onOpen | (activeIndexes: Array) | the currently active indexes |
 82 | 
 83 | ### Scoped Slots
 84 | 
 85 | | Property | Description |
 86 | | ---      | ---         |
 87 | | active   | the active index(es) |
 88 | | update   | method which takes an index or array of indexes to update the current set of active indexes |  
 89 | 
 90 | ## Expandable Item
 91 | 
 92 | Designates an area as an expandable section. Must be a direct child of the `<banshee-expandable>` component.
 93 | 
 94 | ### Attributes & Props
 95 | 
 96 | | Name | Required | Type | Default | Description |
 97 | | ---  | ---      | ---  | ---     | ---         |
 98 | | tag | `false` | String | `'div'` | HTML tag for wrapping expandable title and content body |
 99 | 
100 | ### Scoped Slots
101 | 
102 | | Property | Description |
103 | | ---      | ---         |
104 | | isActive | boolean indicating whether the expandable item is currently active or not |
105 | 
106 | ## Expandable Title
107 | 
108 | The always visible section of the expandable item. This is the clickable portion to toggle the visibility of the content area.
109 | 
110 | ### Attributes & Props
111 | 
112 | | Name | Required | Type | Default | Description |
113 | | ---  | ---      | ---  | ---     | ---         |
114 | | tag | `false` | String | `'dt'` | HTML tag for the expandable title |
115 | 
116 | ## Expandable Body
117 | 
118 | The expandable's content area that is toggled between being shown or hidden.
119 | 
120 | ### Attributes & Props
121 | 
122 | | Name | Required | Type | Default | Description |
123 | | ---  | ---      | ---  | ---     | ---         |
124 | | label-by | `false` | String | `null` | The `id` of the element triggering the panel to open/close |
125 | | tag | `false` | String | `'dd'` | HTML tag for the expandable's content body |
126 | 
127 | ## More Examples
128 | 
129 | ### Bootstrap 4
130 | 
131 | [![Edit Banshee - Bootstrap 4 Expandable](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/w77xlxqv58?module=%2Fsrc%2FApp.vue)
132 | 
133 | ```html
134 | <banshee-expandable tag="div">
135 |   <banshee-expandable-item>
136 |     <p>
137 |       <banshee-expandable-title tag="button" class="btn btn-primary" controls="example1">
138 |         Button
139 |       </banshee-expandable-title>
140 |     </p>
141 |     <transition name="fade">
142 |       <banshee-expandable-body id="example1" tag="div" class="collapse show">
143 |         <div class="card card-body">
144 |           Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
145 |         </div>
146 |       </banshee-expandable-body>
147 |     </transition>
148 |   </banshee-expandable-item>
149 | </banshee-expandable>
150 | ```
151 | 
152 | ### Foundation
153 | 
154 | [![Edit Banshee - Foundation Expandable](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/ly5p4o6ko9?module=%2Fsrc%2FApp.vue)
155 | 
156 | ```html
157 | <banshee-expandable class="accordion">
158 |   <banshee-expandable-item class="accordion-item">
159 |     <banshee-expandable-title tag="a" class="accordion-title" controls="example1">
160 |       Button
161 |     </banshee-expandable-title>
162 |     <transition name="fade">
163 |       <banshee-expandable-body id="example1" tag="div" class="accordion-content">
164 |         <p>Panel 1. Lorem ipsum dolor.</p>
165 |       </banshee-expandable-body>
166 |     </transition>
167 |   </banshee-expandable-item>
168 | </banshee-expandable>
169 | ```
170 | 
171 | ### Semantic UI
172 | 
173 | [![Edit Banshee - SemanticUI Expandable](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/0q6w2jv6ln?module=%2Fsrc%2FApp.vue)
174 | 
175 | ```html
176 | <banshee-expandable class="ui accordion">
177 |   <banshee-expandable-item>
178 |     <template slot-scope="{ isActive }">
179 |       <banshee-expandable-title tag="span" class="title" :class="{ active: isActive }" controls="example1">
180 |         <i class="dropdown icon" aria-hidden="true"></i>
181 |         Button
182 |       </banshee-expandable-title>
183 |       
184 |       <transition name="fade">
185 |         <banshee-expandable-body id="example1" tag="div" class="content">
186 |           <p>Panel 1. Lorem ipsum dolor.</p>
187 |         </banshee-expandable-body>
188 |       </transition>
189 |     </template>
190 |   </banshee-expandable-item>
191 | </banshee-expandable>
192 | ```


--------------------------------------------------------------------------------
/src/components/Tabs/README.md:
--------------------------------------------------------------------------------
  1 | # Tabs
  2 | 
  3 | Banshee tabs are grouped sections of content that display one panel of content at a time.
  4 | 
  5 | ## Basic Usage
  6 | 
  7 | [![Edit Banshee - Tabs Basic](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/lx366kwxl7?module=%2Fsrc%2FApp.vue)
  8 | 
  9 | ```html
 10 | <banshee-tabs>
 11 |   <banshee-tab-list>
 12 |     <banshee-tab>Ghosts</banshee-tab>
 13 |     <banshee-tab>Goblins</banshee-tab>
 14 |     <banshee-tab>Ghouls</banshee-tab>
 15 |   </banshee-tab-list>
 16 |   <banshee-tab-panes>
 17 |     <banshee-tab-pane>Ghosts can be scary.</banshee-tab-pane>
 18 |     <banshee-tab-pane>Goblins are sneaky.</banshee-tab-pane>
 19 |     <banshee-tab-pane>Ghouls are dangerous!</banshee-tab-pane>
 20 |   </banshee-tab-panes>
 21 | </banshee-tabs>
 22 | ```
 23 | 
 24 | The tabs are composed of the following components:
 25 | 
 26 | - `<banshee-tabs>` - the wrapper component, designates the content will be tabs
 27 | - `<banshee-tab-list>` - a set of tab elements, these are the elements that are clicked to activate their associated pane
 28 | - `<banshee-tab>` - the tab element itself
 29 | - `<banshee-tab-panes>` - a set of tab panes or panels, these hold the content that will be displayed
 30 | - `<banshee-tab-pane>` - a single content pane that is associated with a tab
 31 | 
 32 | Tabs are associated with their panes via index, so order defined matters. For example, the tab `<banshee-tab>Ghosts</banshee-tab>` is associated with `<banshee-tab-pane>Ghosts can be scary.</banshee-tab-pane>` because they are the same index within their respective parent component.
 33 | 
 34 | ## Tabs
 35 | 
 36 | Wrapper component that controls and initalizes the tab's state.
 37 | 
 38 | ### Attributes & Props
 39 | 
 40 | | Name | Required | Type | Default | Description |
 41 | | ---  | ---      | ---  | ---     | ---         |
 42 | | active | `false` | Number | `undefined` | controlled component prop, the active index of the tab |
 43 | | default-active | `false` | Number | `0` | the default active tab index |
 44 | | tag | `false` | String | `'div'` | HTML tag for wrapping element of tabs and tab panes |
 45 | 
 46 | ### Events
 47 | 
 48 | | Event | Parameters | Description |
 49 | | ---   | ---        | ---         |
 50 | | onTabChange | (currentIndex, previousIndex) | triggers when active tab is changed |
 51 | 
 52 | ### Scoped Slots
 53 | 
 54 | | Property | Description |
 55 | | ---      | ---         |
 56 | | active   | current active index |
 57 | | updateActiveIndex | method to update the active index, takes an index as a parameter |
 58 | 
 59 | ## Tab List
 60 | 
 61 | Component that controls each individual tab.
 62 | 
 63 | ### Attributes & Props
 64 | 
 65 | | Name | Required | Type | Default | Description |
 66 | | ---  | ---      | ---  | ---     | ---         |
 67 | | tag | `false` | String | `'div'` | HTML tag for wrapping element of tabs |
 68 | 
 69 | ## Tab Panes
 70 | 
 71 | Component that controls each individual tab content pane.
 72 | 
 73 | ### Attributes & Props
 74 | 
 75 | | Name | Required | Type | Default | Description |
 76 | | ---  | ---      | ---  | ---     | ---         |
 77 | | tag | `false` | String | `'div'` | HTML tag for wrapping element of tab panes |
 78 | 
 79 | ## Tab
 80 | 
 81 | Each clickable tab. Activates associated tab pane. *Must be a direct child of `<banshee-tab-list>`*.
 82 | 
 83 | ### Attributes & Props
 84 | 
 85 | | Name | Required | Type | Default | Description |
 86 | | ---  | ---      | ---  | ---     | ---         |
 87 | | no-aria | `false` | Boolean | `false` | removes automatically applied aria attributes on the tab element, useful for when you'd rather apply it to children of the tab element |
 88 | | tag | `false` | String | `'button'` | HTML tag for the tab |
 89 | 
 90 | ### Scoped Slots
 91 | 
 92 | | Property | Description |
 93 | | ---      | ---         |
 94 | | aria     | object containing aria attributes (`v-bind="aria"`), only available if `no-aria` prop is present |
 95 | | index    | the tab's index |
 96 | | updateActiveIndex | method to update the active index, takes an index as a parameter |
 97 | 
 98 | ## Tab Pane
 99 | 
100 | Content for the associated tab.
101 | 
102 | ### Attributes & Props
103 | 
104 | | Name | Required | Type | Default | Description |
105 | | ---  | ---      | ---  | ---     | ---         |
106 | | tag | `false` | String | `'div'` | HTML tag for the tab content area |
107 | 
108 | ---
109 | 
110 | ## More Examples
111 | 
112 | ### Bootstrap 4 
113 | 
114 | [![Edit Banshee - Tabs Bootstrap 4](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/p59112l0rj?module=%2Fsrc%2FApp.vue)
115 | 
116 | ```html
117 | <banshee-tabs>
118 |   <template slot-scope="{ active }">
119 |     <banshee-tab-list class="nav nav-tabs" tag="ul">
120 |       <banshee-tab tag="li" class="nav-item">
121 |         <template slot-scope="{ index }">
122 |           <a class="nav-link" :class="{ active: active === index }">Ghosts</a>
123 |         </template>
124 |       </banshee-tab>
125 |       <banshee-tab tag="li" class="nav-item">
126 |         <template slot-scope="{ index }">
127 |           <a class="nav-link" :class="{ active: active === index }">Goblins</a> 
128 |         </template>
129 |       </banshee-tab>
130 |       <banshee-tab tag="li" class="nav-item">
131 |         <template slot-scope="{ index }">
132 |           <a class="nav-link" :class="{ active: active === index }">Ghouls</a>
133 |         </template>
134 |       </banshee-tab>
135 |     </banshee-tab-list>
136 |     <banshee-tab-panes>
137 |       <transition name="fade" mode="out-in">
138 |         <banshee-tab-pane>Ghosts can be scary.</banshee-tab-pane>
139 |       </transition>
140 |       <transition name="fade" mode="out-in">
141 |         <banshee-tab-pane>Goblins are sneaky.</banshee-tab-pane>
142 |       </transition>
143 |       <transition name="fade" mode="out-in">
144 |         <banshee-tab-pane>Ghouls are dangerous!</banshee-tab-pane>
145 |       </transition>
146 |     </banshee-tab-panes>
147 |   </template>
148 | </banshee-tabs>
149 | ```
150 | 
151 | ### Foundation
152 | 
153 | [![Edit Banshee - Tabs Bootstrap 4](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/520v43wnml?module=%2Fsrc%2FApp.vue)
154 | 
155 | ```html
156 | <banshee-tabs>
157 |   <template slot-scope="{ active }">
158 |     <banshee-tab-list class="tabs" tag="ul">
159 |       <banshee-tab tag="li" no-aria 
160 |                     class="tabs-title is-active" 
161 |                     :class="{ 'is-active': active === 0 }">
162 |         <template slot-scope="{ aria, index }">
163 |           <a v-bind="aria">Ghosts</a>
164 |         </template>
165 |       </banshee-tab>
166 |       <banshee-tab tag="li" no-aria 
167 |                     class="tabs-title" :class="{ 'is-active': active === 1 }">
168 |         <template slot-scope="{ aria, index }">
169 |           <a v-bind="aria">Goblins</a> 
170 |         </template>
171 |       </banshee-tab>
172 |       <banshee-tab tag="li" no-aria 
173 |                     class="tabs-title" :class="{ 'is-active': active === 2 }">
174 |         <template slot-scope="{ aria, index }">
175 |           <a v-bind="aria">Ghouls</a>
176 |         </template>
177 |       </banshee-tab>
178 |     </banshee-tab-list>
179 |     <banshee-tab-panes class="tabs-content">
180 |       <banshee-tab-pane class="tabs-panel" :class="{ 'is-active': active === 0 }">
181 |         Ghosts can be scary.
182 |       </banshee-tab-pane>
183 |       <banshee-tab-pane class="tabs-panel" :class="{ 'is-active': active === 1 }">
184 |         Goblins are sneaky.
185 |       </banshee-tab-pane>
186 |       <banshee-tab-pane class="tabs-panel" :class="{ 'is-active': active === 2 }">
187 |         Ghouls are dangerous!
188 |       </banshee-tab-pane>
189 |     </banshee-tab-panes>
190 |   </template>
191 | </banshee-tabs>
192 | ```
193 | 
194 | ### Bulma 
195 | 
196 | [![Edit Banshee - Tabs Bulma](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/0vp6r796zw?module=%2Fsrc%2FApp.vue)
197 | 
198 | ```html
199 | <banshee-tabs>
200 |   <template slot-scope="{ active }">
201 |     <div class="tabs">
202 |       <banshee-tab-list tag="ul">
203 |         <banshee-tab tag="li" :class="{ 'is-active': active === 0 }">
204 |             <a>Ghosts</a>
205 |         </banshee-tab>
206 |         <banshee-tab tag="li" :class="{ 'is-active': active === 1 }">
207 |             <a>Goblins</a>
208 |         </banshee-tab>
209 |         <banshee-tab tag="li" :class="{ 'is-active': active === 2 }">
210 |             <a>Ghouls</a>
211 |         </banshee-tab>
212 |       </banshee-tab-list>
213 |     </div>
214 |     <banshee-tab-panes>
215 |         <banshee-tab-pane>Ghosts can be scary.</banshee-tab-pane>
216 |         <banshee-tab-pane>Goblins are sneaky.</banshee-tab-pane>
217 |         <banshee-tab-pane>Ghouls are dangerous!</banshee-tab-pane>
218 |     </banshee-tab-panes>
219 |   </template>
220 | </banshee-tabs>
221 | ```
222 | 
223 | ### Semantic UI
224 | 
225 | [![Edit Banshee - Tabs Semantic UI](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/6nv8qp1n7z?module=%2Fsrc%2FApp.vue)
226 | 
227 | ```html
228 | <banshee-tabs>
229 |   <template slot-scope="{ active }">
230 |     <banshee-tab-list class="ui top attached tabular menu">
231 |       <banshee-tab tag="a"
232 |                     class="item"
233 |                     :class="{ 'active': active === 0 }">
234 |           Ghosts
235 |       </banshee-tab>
236 |       <banshee-tab tag="a"
237 |                     class="item" :class="{ 'active': active === 1 }">
238 |           Goblins
239 |       </banshee-tab>
240 |       <banshee-tab tag="a"
241 |                     class="item" :class="{ 'active': active === 2 }">
242 |           Ghouls
243 |       </banshee-tab>
244 |     </banshee-tab-list>
245 |     <banshee-tab-panes class="ui bottom attached tab segment active">
246 |         <banshee-tab-pane>Ghosts can be scary.</banshee-tab-pane>
247 |         <banshee-tab-pane>Goblins are sneaky.</banshee-tab-pane>
248 |         <banshee-tab-pane>Ghouls are dangerous!</banshee-tab-pane>
249 |     </banshee-tab-panes>
250 |   </template>
251 | </banshee-tabs>
252 | ```


--------------------------------------------------------------------------------