slim-select 1.27.0 → 2.0.0

package/docs/assets/selects.js

@@ -0,0 +1,55 @@
+import{d as c,S as p,_ as v,o as a,c as s,a as e,F as n,r as i,f as l,t as r}from"./index.js";const b=c({name:"Selects",data(){return{states:[{abv:"AL",state:"Alabama"},{abv:"AK",state:"Alaska"},{abv:"AZ",state:"Arizona"},{abv:"AR",state:"Arkansas"},{abv:"CA",state:"California"},{abv:"CO",state:"Colorado"},{abv:"CT",state:"Connecticut"},{abv:"DE",state:"Delaware"},{abv:"FL",state:"Florida"},{abv:"GA",state:"Georgia"},{abv:"HI",state:"Hawaii"},{abv:"ID",state:"Idaho"},{abv:"IL",state:"Illinois"},{abv:"IN",state:"Indiana"},{abv:"IA",state:"Iowa"},{abv:"KS",state:"Kansas"},{abv:"KY",state:"Kentucky"},{abv:"LA",state:"Louisiana"},{abv:"ME",state:"Maine"},{abv:"MD",state:"Maryland"},{abv:"MA",state:"Massachusetts"},{abv:"MI",state:"Michigan"},{abv:"MN",state:"Minnesota"},{abv:"MS",state:"Mississippi"},{abv:"MO",state:"Missouri"},{abv:"MT",state:"Montana"},{abv:"NE",state:"Nebraska"},{abv:"NV",state:"Nevada"},{abv:"NH",state:"New Hampshire"},{abv:"NJ",state:"New Jersey"},{abv:"NM",state:"New Mexico"},{abv:"NY",state:"New York"},{abv:"NC",state:"North Carolina"},{abv:"ND",state:"North Dakota"},{abv:"OH",state:"Ohio"},{abv:"OK",state:"Oklahoma"},{abv:"OR",state:"Oregon"},{abv:"PA",state:"Pennsylvania"},{abv:"RI",state:"Rhode Island"},{abv:"SC",state:"South Carolina"},{abv:"SD",state:"South Dakota"},{abv:"TN",state:"Tennessee",selected:!0},{abv:"TX",state:"Texas"},{abv:"UT",state:"Utah"},{abv:"VT",state:"Vermont"},{abv:"VA",state:"Virginia"},{abv:"WA",state:"Washington"},{abv:"WV",state:"West Virginia"},{abv:"WI",state:"Wisconsin"},{abv:"WY",state:"Wyoming"}],foods:[{label:"Dairy",options:["Milk","Cheese","Butter","Ice Cream"]},{label:"Meat",options:["Beef","Ham","Pork","Sausage","Chicken","Turkey"]},{label:"Fruits",options:["Apple","Banana","Grape","Orange","Strawberry","Blueberry","Raspberry"]},{label:"Vegetables",options:["Carrot","Tomato","Broccoli","Celery","Corn","Pumpkin","Kale","Spinach"]}]}},mounted(){new p({select:this.$refs.single}),new p({select:this.$refs.singleOptgroup}),new p({select:this.$refs.multiple}),new p({select:this.$refs.multipleOptgroup}).setSelected(["Cheese","Apple","Corn"])}}),d={id:"selects",class:"contents"},h={id:"single",class:"content"},_=e("h2",{class:"header"},"Single",-1),g=e("p",null," Basic single select usage with Slim Select is extremely easy. Just set the select value to your select element. ",-1),m={class:"row"},V=e("h4",null,"Options",-1),y={ref:"single"},k=["value","selected"],M=e("h4",null,"Optgroups",-1),S={ref:"singleOptgroup"},N=["label"],O=["value"],f=e("pre",null,[l("        "),e("code",{class:"language-javascript"},`
+          new SlimSelect({
+            select: '#single'
+          })
+        `),l(`
+      `)],-1),C=e("pre",null,[l("        "),e("code",{class:"language-html"},`
+          <!-- Options -->
+          <select id="single">
+            <option value="value 1">Value 1</option>
+            <option value="value 2">Value 2</option>
+            <option value="value 3">Value 3</option>
+          </select>
+
+          <!-- Optgroups -->
+          <select id="single-optgroups">
+            <optgroup label="Label 1">
+              <option value="value 1">Value 1</option>
+              <option value="value 2">Value 2</option>
+              <option value="value 3">Value 3</option>
+            </optgroup>
+            <optgroup label="Label 2">
+              <option value="value 21">Value 1</option>
+              <option value="value 22">Value 2</option>
+              <option value="value 23">Value 3</option>
+            </optgroup>
+          </select>
+        `),l(`
+      `)],-1),w={id:"multiple",class:"content"},A=e("h2",{class:"header"},"Multiple",-1),I=e("p",null," Multi selects work just the same as a single select. The only difference is setting the multiple attribute on your select. ",-1),T={class:"row"},D=e("h4",null,"Options",-1),L={ref:"multiple",multiple:""},B=["value","selected"],W=e("h4",null,"Optgroups",-1),$={ref:"multipleOptgroup",multiple:""},K=["label"],H=["value"],F=e("pre",null,[l("        "),e("code",{class:"language-javascript"},`
+          new SlimSelect({
+            select: '#multiple'
+          })
+        `),l(`
+      `)],-1),G=e("pre",null,[l("        "),e("code",{class:"language-html"},`
+          <!-- Options -->
+          <select id="multiple" multiple>
+            <option value="value 1">Value 1</option>
+            <option value="value 2">Value 2</option>
+            <option value="value 3">Value 3</option>
+          </select>
+
+          <!-- Optgroups -->
+          <select id="multiple-optgroups" multiple>
+            <optgroup label="Label 1">
+              <option value="value 1">Value 1</option>
+              <option value="value 2">Value 2</option>
+              <option value="value 3">Value 3</option>
+            </optgroup>
+            <optgroup label="Label 2">
+              <option value="value 21">Value 1</option>
+              <option value="value 22">Value 2</option>
+              <option value="value 23">Value 3</option>
+            </optgroup>
+          </select>
+        `),l(`
+      `)],-1);function R(u,E,P,Y,j,x){return a(),s("div",d,[e("div",h,[_,g,e("div",m,[e("div",null,[V,e("select",y,[(a(!0),s(n,null,i(u.states,t=>(a(),s("option",{key:t.abv,value:t.abv,selected:t.selected},r(t.state),9,k))),128))],512)]),e("div",null,[M,e("select",S,[(a(!0),s(n,null,i(u.foods,t=>(a(),s("optgroup",{key:t.label,label:t.label},[(a(!0),s(n,null,i(t.options,o=>(a(),s("option",{key:o,value:o},r(o),9,O))),128))],8,N))),128))],512)])]),f,C]),e("div",w,[A,I,e("div",T,[e("div",null,[D,e("select",L,[(a(!0),s(n,null,i(u.states,t=>(a(),s("option",{value:t.abv,key:t.abv,selected:t.selected},r(t.state),9,B))),128))],512)]),e("div",null,[W,e("select",$,[(a(!0),s(n,null,i(u.foods,t=>(a(),s("optgroup",{key:t.label,label:t.label},[(a(!0),s(n,null,i(t.options,o=>(a(),s("option",{key:o,value:o},r(o),9,H))),128))],8,K))),128))],512)])]),F,G])])}const U=v(b,[["render",R]]);export{U as default};

package/docs/index.html

@@ -1,5 +1,18 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Slim Select</title><link rel="shortcut icon" href="favicon.ico"><meta name="description" content="Slim vanilla javascript select dropdown"><meta property="og:type" content="article"><meta property="og:title" content="Slim Select"><meta property="og:description" content="Slim vanilla javascript select dropdown"><link href="/css/home.57020178.css" rel="prefetch"><link href="/css/install.baa5d3fb.css" rel="prefetch"><link href="/css/methods.728c742a.css" rel="prefetch"><link href="/css/options.b28a32ef.css" rel="prefetch"><link href="/css/selects.1a7e1e6a.css" rel="prefetch"><link href="/js/home.8bcb44fd.js" rel="prefetch"><link href="/js/install.02f31028.js" rel="prefetch"><link href="/js/methods.1b31e988.js" rel="prefetch"><link href="/js/options.39fe1005.js" rel="prefetch"><link href="/js/selects.f4d0b859.js" rel="prefetch"><link href="/css/app.d5840d21.css" rel="preload" as="style"><link href="/css/chunk-vendors.4db6930d.css" rel="preload" as="style"><link href="/js/app.db13c724.js" rel="preload" as="script"><link href="/js/chunk-vendors.cc40aa28.js" rel="preload" as="script"><link href="/css/chunk-vendors.4db6930d.css" rel="stylesheet"><link href="/css/app.d5840d21.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but slim select doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script async src="https://www.googletagmanager.com/gtag/js?id=UA-96955238-1"></script><script>window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-
-      gtag('config', 'UA-96955238-1');</script><script src="/js/chunk-vendors.cc40aa28.js"></script><script src="/js/app.db13c724.js"></script></body></html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Slim Select</title>
+    <script type="module" crossorigin src="/assets/index.js"></script>
+    <link rel="stylesheet" href="/assets/index.css">
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but this site doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    
+  </body>
+</html>

package/docs.go

@@ -1,10 +1,12 @@
 package main
 
 import (
+	"fmt"
 	"net/http"
 )
 
 func main() {
+	fmt.Println("Running on port 8080")
 	http.Handle("/", http.FileServer(http.Dir("./docs")))
-	http.ListenAndServe(":3000", nil)
+	http.ListenAndServe(":8080", nil)
 }

package/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Slim Select</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but this site doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <script type="module" src="/src/docs/main.ts"></script>
+  </body>
+</html>

package/jest.config.js

@@ -0,0 +1,7 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  testMatch: ['**/*.test.ts'],
+  roots: ['./src/slim-select'],
+}

package/package.json

@@ -1,24 +1,20 @@
 {
   "name": "slim-select",
   "description": "Slim advanced select dropdown",
-  "version": "1.27.0",
+  "version": "2.0.0",
   "author": "Brian Voelker <brian@webiswhatido.com> (http://webiswhatido.com)",
   "homepage": "https://slimselectjs.com",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/brianvoe/slim-select/issues"
   },
-  "engines": {
-    "node": ">=8"
-  },
-  "main": "dist/slimselect.min.js",
-  "exports": {
-    "require": "./dist/slimselect.min.js",
-    "import": "./dist/slimselect.min.mjs"
-  },
-  "style": "dist/slimselect.min.css",
-  "sass": "src/slim-select/slimselect.scss",
+  "main": "dist/slimselect.js",
+  "module": "dist/slimselect.es.js",
+  "unpkg": "dist/slimselect.js",
   "types": "dist/index.d.ts",
+  "typings": "dist/index.d.ts",
+  "style": "dist/slimselect.css",
+  "sass": "src/slim-select/slimselect.scss",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/brianvoe/slim-select.git"
@@ -31,35 +27,39 @@
     "multiselect"
   ],
   "scripts": {
-    "dev": "vue-cli-service serve",
-    "library": "rm -r dist && cd src/slim-select && webpack && cd ../../ && npm run cleanDist && npm run renameDist && npm run mjs",
-    "cleanDist": "rm dist/slimselectcss.min.js && rm dist/slimselectcss.js",
-    "renameDist": "mv 'dist/slimselectcss.css' 'dist/slimselect.css' && mv 'dist/slimselectcss.min.css' 'dist/slimselect.min.css'",
-    "docs": "vue-cli-service build",
-    "build": "npm run docs && npm run library",
-    "mjs": "(printf 'var exports = {};'; cat dist/slimselect.min.js; printf 'export default exports.SlimSelect') > dist/slimselect.min.mjs",
-    "lint": "vue-cli-service lint"
+    "jestinit": "ts-jest config:init",
+    "dev": "vite --port=1111",
+    "format": "prettier --write --cache --parser typescript \"src/**/*.ts\"",
+    "build": "npm run build:clean && npm run build:docs && npm run build:library",
+    "build:clean": "rimraf ./dist/*",
+    "build:docs": "vite build",
+    "build:library": "npm run build:library:js && npm run build:library:css",
+    "build:library:js": "cd src/slim-select && rollup --config ./rollup.config.mjs && cd ../../",
+    "build:library:css": "cd src/slim-select && sass ./slimselect.scss ../../dist/slimselect.css --style=compressed && cd ../../",
+    "test": "jest"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.10",
-    "@vue/cli-plugin-typescript": "^4.5.10",
-    "@vue/cli-service": "^4.5.10",
-    "ajv": "^6.12.6",
-    "chance": "^1.1.7",
-    "clipboard": "^2.0.4",
-    "node-sass": "^5.0.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.4",
-    "prismjs": "^1.23.0",
-    "sass-loader": "^10.1.0",
-    "typescript": "^3.7.4",
-    "uglifyjs-webpack-plugin": "^2.2.0",
-    "vue": "^2.6.12",
-    "vue-router": "^3.4.9",
-    "vue-template-compiler": "^2.6.12",
-    "vuex": "^3.6.0",
-    "webpack-cli": "^4.3.1"
-  },
-  "dependencies": {
-    "npm-check": "^5.9.2"
+    "@jest/globals": "^29.3.1",
+    "@rollup/plugin-typescript": "^9.0.2",
+    "@types/downloadjs": "^1.4.3",
+    "@vitejs/plugin-vue": "^3.2.0",
+    "clipboard": "^2.0.11",
+    "downloadjs": "^1.4.7",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
+    "prettier": "^2.7.1",
+    "prismjs": "^1.29.0",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.79.1",
+    "rollup-plugin-terser": "^7.0.2",
+    "sass": "^1.56.1",
+    "ts-jest": "^29.0.3",
+    "tslib": "^2.4.1",
+    "typescript": "^4.9.3",
+    "vite": "^3.2.4",
+    "vue": "^3.2.45",
+    "vue-router": "^4.1.6",
+    "vue-tsc": "^1.0.9",
+    "vuex": "^4.0.2"
   }
 }

package/src/docs/app.vue

@@ -1,98 +1,207 @@
-<script>
-  import SlimSelect from '@/slim-select'
-
-  export default {
-    data() {
-      const path = this.$route.path
-      return {
-        year: new Date().getFullYear(),
-        navData: [
-          {text: 'Home', value: '/', selected: (path === '/')},
-          {text: 'Installation', value: 'install', selected: (path === '/install')},
-          {text: 'Select Types', value: 'selects', selected: (path === '/selects')},
-          {text: 'Options', value: 'options', selected: (path === '/options')},
-          {text: 'Methods', value: 'methods', selected: (path === '/methods')}
-        ]
-      }
-    },
-    mounted() {
-      // Lets redirect to path
-      if (this.$route.query.p) {
-        this.$router.push({ path: this.$route.query.p })
-      }
+<script lang="ts">
+import { defineComponent } from 'vue'
 
-      const slim = new SlimSelect({
-        select: '#select-nav',
-        showSearch: false,
-        onChange: (info) => {
-          if (!this.$route.path.includes(info.value)) {
-            this.$router.push({ path: info.value })
-          }
-        }
-      })
-      slim.setData(this.navData)
+import SlimSelect, { debounce, Settings } from '../slim-select'
 
-      this.$router.onReady(() => {
-        const urlPathValue = this.$route.path.replace('/', '')
-        if (urlPathValue !== '') {
-          slim.setSelected(urlPathValue)
-        }
-      })
+export default defineComponent({
+  name: 'App',
+  data() {
+    return {
+      nav: null as SlimSelect | null,
+      navDebounce: debounce(() => {
+        this.setDemensions()
+      }, 100),
+      year: new Date().getFullYear(),
+      width: 0,
+      height: 0,
+
+      navData: [
+        { text: 'Home', value: '/', class: 'label' },
+
+        // Install
+        { text: 'Install', value: 'install', class: 'label' },
+        { text: 'npm', value: 'install#npm', class: 'mar-l-l' },
+        { text: 'cdn', value: 'install#cdn', class: 'mar-l-l' },
+        { text: 'download', value: 'install#download', class: 'mar-l-l' },
+
+        // Select
+        { text: 'Selects', value: 'selects', class: 'label' },
+        { text: 'single', value: 'selects#single', class: 'mar-l-l' },
+        { text: 'multiple', value: 'selects#multiple', class: 'mar-l-l' },
+
+        // Data
+        { text: 'Data', value: 'data', class: 'label' },
+        { text: 'types', value: 'data#types', class: 'mar-l-l' },
+        { text: 'field', value: 'data#field', class: 'mar-l-l' },
+
+        // Settings
+        { text: 'Settings', value: 'settings', class: 'label' },
+        { text: 'select', value: 'settings#select', class: 'mar-l-l' },
+        { text: 'alwaysOpen', value: 'settings#alwaysOpen', class: 'mar-l-l' },
+        { text: 'contentLocation', value: 'settings#contentLocation', class: 'mar-l-l' },
+        { text: 'contentPosition', value: 'settings#contentPosition', class: 'mar-l-l' },
+        { text: 'openPosition', value: 'settings#openPosition', class: 'mar-l-l' },
+        { text: 'placeholder', value: 'settings#placeholder', class: 'mar-l-l' },
+        { text: 'allowDeselect', value: 'settings#allowDeselect', class: 'mar-l-l' },
+        { text: 'display', value: 'settings#display', class: 'mar-l-l' },
+        { text: 'mandatory', value: 'settings#mandatory', class: 'mar-l-l' },
+        { text: 'minmax', value: 'settings#minmax', class: 'mar-l-l' },
+        { text: 'dataAttributes', value: 'settings#dataAttributes', class: 'mar-l-l' },
+        { text: 'cssClass', value: 'settings#cssClass', class: 'mar-l-l' },
+        { text: 'inlineStyles', value: 'settings#inlineStyles', class: 'mar-l-l' },
+        { text: 'html', value: 'settings#html', class: 'mar-l-l' },
+        { text: 'search', value: 'settings#search', class: 'mar-l-l' },
+        { text: 'closeOnSelect', value: 'settings#closeOnSelect', class: 'mar-l-l' },
+        { text: 'showOptionTooltips', value: 'settings#showOptionTooltips', class: 'mar-l-l' },
+        { text: 'selectByGroup', value: 'settings#selectByGroup', class: 'mar-l-l' },
+        { text: 'hideSelected', value: 'settings#hideSelected', class: 'mar-l-l' },
+
+        // Events
+        { text: 'Events', value: 'events', class: 'label' },
+        { text: 'error', value: 'events#error', class: 'mar-l-l' },
+        { text: 'beforeChange', value: 'events#beforeChange', class: 'mar-l-l' },
+        { text: 'afterChange', value: 'events#afterChange', class: 'mar-l-l' },
+        { text: 'open', value: 'events#open', class: 'mar-l-l' },
+        { text: 'search', value: 'events#search', class: 'mar-l-l' },
+        { text: 'searchFilter', value: 'events#searchFilter', class: 'mar-l-l' },
+        { text: 'addable', value: 'events#addable', class: 'mar-l-l' },
+
+        // Methods
+        { text: 'Methods', value: 'methods', class: 'label' },
+        { text: 'getSelected', value: 'methods#getSelected', class: 'mar-l-l' },
+        { text: 'setSelected', value: 'methods#setSelected', class: 'mar-l-l' },
+        { text: 'getData', value: 'methods#getData', class: 'mar-l-l' },
+        { text: 'setData', value: 'methods#setData', class: 'mar-l-l' },
+        { text: 'enableDisable', value: 'methods#enableDisable', class: 'mar-l-l' },
+        { text: 'search', value: 'methods#search', class: 'mar-l-l' },
+        { text: 'destroy', value: 'methods#destroy', class: 'mar-l-l' },
+      ],
     }
-  }
-</script>
+  },
+  mounted() {
+    this.runNav()
 
-<style lang="scss">
-  #app {
-    .select-nav {
-      .ss-single-selected {
-        position: relative;
-        z-index: 2000;
+    this.$router.isReady().then(() => {
+      if (this.nav) {
+        this.nav.setSelected(this.$router.currentRoute.value.fullPath.replace('/', ''))
+      }
+    })
 
-        .placeholder {
-          font-weight: bold;
+    this.$router.afterEach(() => {
+      // After route change get the hash and scroll to element in main
+      setTimeout(() => {
+        const hash = this.$route.hash
+        if (hash === '') {
+          window.scroll({
+            top: 0,
+            behavior: 'smooth',
+          })
         }
-      }
 
-      .ss-content {
-        box-shadow: 0px 5px 10px 5px rgba(0, 0, 0, 0.2);
+        // If hash is not empty scroll to element
+        if (hash) {
+          const el = document.querySelector(hash) as HTMLElement
+          if (el) {
+            // get header height
+            const header = document.querySelector('header') as HTMLElement
+            const nav = document.querySelector('nav') as HTMLElement
+            const headerHeight = header ? header.clientHeight + (window.innerWidth < 700 ? nav.clientHeight : 0) + 8 : 0
 
-        .ss-option {
-          font-weight: bold;
+            window.scroll({
+              top: el.offsetTop - headerHeight, // header height + padding
+              behavior: 'smooth',
+            })
+          }
         }
+      }, 100)
+    })
+
+    this.setDemensions()
+    window.addEventListener('resize', this.navDebounce)
+  },
+  unmounted() {
+    window.removeEventListener('resize', this.navDebounce)
+  },
+  watch: {
+    width() {
+      this.runNav()
+    },
+  },
+  methods: {
+    setDemensions(): void {
+      this.width = document.documentElement.clientWidth
+      this.height = document.documentElement.clientHeight
+    },
+    runNav() {
+      if (this.nav) {
+        this.nav.destroy()
+        this.nav = null
       }
-    }
-  }
-</style>
+
+      let settings = {
+        searchHighlight: true,
+        openContent: 'below',
+      } as Partial<Settings>
+
+      if (this.width > 700) {
+        settings.alwaysOpen = true
+        settings.contentPosition = 'relative'
+        settings.contentLocation = this.$refs.navContent as HTMLDivElement
+      }
+
+      this.nav = new SlimSelect({
+        select: this.$refs.nav as HTMLSelectElement,
+        data: this.navData,
+        settings: settings,
+        events: {
+          afterChange: (newVal) => {
+            const value = newVal[0].value
+            const split = value.split('#')
+            const val = split[0]
+            const hash = split[1] ? '#' + split[1] : undefined
+            this.$router.push({ path: val, hash: hash })
+          },
+        },
+      })
+    },
+  },
+})
+</script>
 
 <template>
-  <div id="app">
-    <div class="header">
+  <header>
+    <div class="top">
       <div class="text">
-        <div class="logo">
-          Slim Select
-        </div>
-        <div class="tagline">
-          Slim advanced select dropdown
-        </div>
+        <h1 class="logo">Slim Select</h1>
       </div>
-      <div class="select-nav">
+      <div class="socials">
         <a href="https://github.com/brianvoe/slim-select" target="_blank">
-          <img src="images/github.png" />
+          <img src="./images/github.png" />
         </a>
         <a href="https://www.npmjs.com/package/slim-select" target="_blank">
-          <img src="images/npm.png" />
+          <img src="./images/npm.png" />
         </a>
-        <select id="select-nav"></select>
       </div>
     </div>
-    <div class="main">
-      <transition name="fade" mode="out-in" appear>
-        <router-view></router-view>
-      </transition>
-    </div>
-    <div class="footer">
-      © {{year}} <a href="http://webiswhatido.com" style="color: #ffffff;" target="_blank">Brian Voelker</a>. Slim Select is under the MIT license.
+    <div class="bar">
+      <div class="tagline">Advanced select dropdown</div>
+      <div class="drop">
+        <svg viewBox="0 0 100 100">
+          <path d="M10,30 L50,70 L90,30" />
+        </svg>
+      </div>
     </div>
-  </div>
+  </header>
+  <nav>
+    <select ref="nav"></select>
+    <div class="nav-content" ref="navContent"></div>
+  </nav>
+  <main>
+    <router-view />
+    <footer>
+      © {{ year }} <a href="http://webiswhatido.com" style="color: #ffffff" target="_blank">Brian Voelker</a>.
+      <br />
+      Slim Select is under the MIT license.
+    </footer>
+  </main>
 </template>

package/src/docs/assets/scss/_variables.scss

@@ -1,10 +1,26 @@
-$primary-color: #5897fb;
-$secondary-color: #666666;
-$border-color: #dcdee2;
-$font-color: #666666;
-$white: #ffffff;
-$max-width: 800px;
-$min-width: 360px;
-$spacing: 20px;
-$spacing-half: $spacing/2;
-$spacing-quarter: $spacing/4;
+:root {
+  // Colors
+  --color-primary: #5897fb;
+  --color-secondary: #666666;
+  --color-header-bg: #ffffff;
+  --color-border: #dcdee2;
+  --color-font: #66666;
+  --color-white: #ffffff;
+  --color-alert-info: #cfe2ff;
+  --color-alert-info-border: #b6d4fe;
+
+  // Sizes
+  --width-max: 1200px;
+  --height-header: 90px;
+  --width-nav: 200px;
+  --height-nav: 30px;
+
+  // Misc
+  --border-radius: 4px;
+  --font-size: 14px;
+
+  // Spacings
+  --spacing: 16px;
+  --spacing-half: 8px;
+  --spacing-quarter: 4px;
+}

package/src/docs/assets/scss/alert.scss

@@ -0,0 +1,12 @@
+.alert {
+  position: relative;
+  color: var(--color-font);
+  padding: var(--spacing-half) var(--spacing);
+  margin: 0 0 var(--spacing-half) 0;
+  border-radius: var(--border-radius);
+
+  &.info {
+    background-color: var(--color-alert-info);
+    border-color: var(--color-alert-info-border);
+  }
+}

package/src/docs/assets/scss/animations.scss

@@ -1,6 +1,8 @@
-.fade-enter-active, .fade-leave-active {
-  transition: opacity .3s ease-in-out;
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease-in-out;
 }
-.fade-enter, .fade-leave-to {
+.fade-enter,
+.fade-leave-to {
   opacity: 0;
 }

package/src/docs/assets/scss/button.scss

@@ -0,0 +1,21 @@
+button,
+.btn {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-white);
+  height: 30px;
+  width: auto;
+  max-width: 100%;
+  min-width: auto;
+  padding: 0 var(--spacing-half) 0 var(--spacing-half);
+  cursor: pointer;
+  background-color: var(--color-primary);
+  text-align: center;
+  line-height: 18px;
+  user-select: none;
+  white-space: nowrap;
+  border-radius: var(--border-radius);
+  vertical-align: middle;
+  box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+  box-sizing: content-box;
+}

package/src/docs/assets/scss/index.scss

@@ -1,6 +1,8 @@
-@import "_variables";
-@import "layout";
-@import "prism";
-@import "misc";
-@import "animations";
-@import "input";
+@import '_variables';
+@import 'layout';
+@import 'prism';
+@import 'misc';
+@import 'animations';
+@import 'button';
+@import 'input';
+@import 'alert';

package/src/docs/assets/scss/input.scss

@@ -1,3 +1,3 @@
 input {
-  color: $font-color;
-}
+  color: var(--color-font);
+}