Skip to content

Commit

Permalink
docs: add demo page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Scrum
Scrum committed Jun 20, 2019
1 parent 5d36e13 commit 20ad120
Show file tree
Hide file tree
Showing 2 changed files with 355 additions and 0 deletions.
169 changes: 169 additions & 0 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,169 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue breadcrumbs</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.min.js"></script>
<script src="vue-breadcrumbs.min.js"></script>
</head>
<body>
<div id="app">
<ul class="nav">
<li class="nav-item dropdown">
<router-link to="/feeds" class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Feeds</router-link>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<router-link to="/feeds/foo" class="dropdown-item">Foo</router-link>
<router-link to="/feeds/bar" class="dropdown-item">Bar</router-link>
<router-link to="/feeds/baz" class="dropdown-item">Baz</router-link>
<router-link to="/feeds/1" class="dropdown-item">Other Feed 1</router-link>
<router-link to="/feeds/2" class="dropdown-item">Other Feed 2</router-link>
<router-link to="/feeds/3" class="dropdown-item">Other Feed 3</router-link>
<router-link :to="{ name: 'settings'}" class="dropdown-item">Settings</router-link>
</div>
</li>
</ul>
<breadcrumbs></breadcrumbs>
<router-view ></router-view>

</div>
<script>
const Feeds = { template: '<div><router-view/></div>' };
const Feed = { template: '<div><h2>Feed</h2></div>' };
const Biz = { template: '<div><h2>Feeds</h2></div>' };

const Bar = { template: '<div><h2>Bar</h2></div>' };
const Baz = { template: '<div><h2>Baz</h2></div>' };
const Home = {
template: `
<router-view name="sidebar"></router-view>
<router-view name="content"></router-view>
`
}
const Foo = {
template: '<div>Foo</div>'
}
const Menu = {
template: `
<div>
<router-link :to="{name:'entities', params: {entityName:'entity1'}}">entities 1</router-link> </br>
<router-link :to="{name:'entities', params: {entityName:'entity2'}}">entities 2</router-link> </br>
<router-link :to="{name:'entities', params: {entityName:'entity3'}}">entities 3</router-link>
</div>
`
}
const View = {
template: `
<div>
<pre>{{ $route.params }}</pre>
</div>
`
}

const routes = [
{
path: '/',
component: Home,
meta: {
breadcrumb: 'home'
},
children: [{
path: 'settings',
name: 'settings',
components: {
content: { template: `<router-view/>` },
sidebar: Menu
},
meta: {
breadcrumb: 'Settings'
},
children: [{
path: 'entities/:entityName',
name: 'entities',
component: { template: `<router-view :key="$route.fullPath"/>` },
redirect: {
name: 'entityView'
},
meta: {
breadcrumb: routeParams => `${routeParams.entityName}`
},
children: [{
path: 'view',
name: 'entityView',
component: View,
props: true,
meta: {
breadcrumb: 'View'
},
}
]
}
]
}
]
},

{
path: '/feeds',
component: Feeds,
meta: {
breadcrumb: 'Feeds'
},
children: [
{
path: '',
component: Biz
},
{
path: 'foo',
component: Foo,
meta: {
breadcrumb: () => `foo ${1 + 1}`
}
},
{
path: 'bar',
component: Bar,
meta: {
breadcrumb: 'bar'
}
},
{
name: 'baz',
path: 'baz',
component: Baz,
meta: {
breadcrumb: function () {
const { name } = this.$route;
return `name "${name}" of context route`;
}
}
},
{
path: ':id',
component: Feed,
meta: {
breadcrumb: params => `Other Feed ${params.id}`
}
}
]
}
]

Vue.use(VueBreadcrumbs.VueBreadcrumbsPlugin);

const router = new VueRouter({
routes
})

new Vue({
router,
el: '#app'
})
</script>
</body>
</html>
186 changes: 186 additions & 0 deletions docs/vue-breadcrumbs.min.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,186 @@
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(global = global || self, factory(global.VueBreadcrumbs = {}));
}(this, function (exports) { 'use strict';

function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}

return obj;
}

function _objectSpread(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
var ownKeys = Object.keys(source);

if (typeof Object.getOwnPropertySymbols === 'function') {
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
}));
}

ownKeys.forEach(function (key) {
_defineProperty(target, key, source[key]);
});
}

return target;
}

var script = {
name: "breadcrumbs",
methods: {
getBreadcrumb: function getBreadcrumb(bc) {
return typeof bc === 'function' ? bc.call(this, this.$route.params) : bc;
}
},
template: "\n <ol\n class=\"breadcrumb\"\n v-if=\"$breadcrumbs.length\"\n >\n <li\n class=\"breadcrumb-item\"\n v-if=\"crumb.meta.breadcrumb\"\n v-for=\"(crumb, i) in $breadcrumbs\"\n :key=\"crumb\"\n >\n <router-link\n active-class=\"active\"\n :to=\"{ path: crumb.path }\"\n :tag=\"i != $breadcrumbs.length - 1 ? 'a' : 'span'\"\n >\n {{ getBreadcrumb(crumb.meta.breadcrumb) }}\n </router-link>\n </li>\n </ol>"
};

function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
/* server only */
, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
} // Vue.extend constructor export interop.


var options = typeof script === 'function' ? script.options : script; // render functions

if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true; // functional template

if (isFunctionalTemplate) {
options.functional = true;
}
} // scopedId


if (scopeId) {
options._scopeId = scopeId;
}

var hook;

if (moduleIdentifier) {
// server build
hook = function hook(context) {
// 2.3 injection
context = context || // cached call
this.$vnode && this.$vnode.ssrContext || // stateful
this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
// 2.2 with runInNewContext: true

if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
} // inject component styles


if (style) {
style.call(this, createInjectorSSR(context));
} // register component module identifier for async chunk inference


if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier);
}
}; // used by ssr in case component is cached and beforeCreate
// never gets called


options._ssrRegister = hook;
} else if (style) {
hook = shadowMode ? function () {
style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
} : function (context) {
style.call(this, createInjector(context));
};
}

if (hook) {
if (options.functional) {
// register for functional component in vue file
var originalRender = options.render;

options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
} else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}

return script;
}

var normalizeComponent_1 = normalizeComponent;

/* script */
const __vue_script__ = script;

/* template */

/* style */
const __vue_inject_styles__ = undefined;
/* scoped */
const __vue_scope_id__ = undefined;
/* module identifier */
const __vue_module_identifier__ = undefined;
/* functional template */
const __vue_is_functional_template__ = undefined;
/* style inject */

/* style inject SSR */



var breadcrumbs = normalizeComponent_1(
{},
__vue_inject_styles__,
__vue_script__,
__vue_scope_id__,
__vue_is_functional_template__,
__vue_module_identifier__,
undefined,
undefined
);

var plugin = (function (Vue, options) {
Object.defineProperties(Vue.prototype, {
$breadcrumbs: {
get: function get() {
return this.$route.matched.map(function (route) {
return _objectSpread({}, route, {
path: route.path.length > 0 ? route.path : '/'
});
});
}
}
});
Vue.component(breadcrumbs.name, _objectSpread({}, breadcrumbs, options));
});

exports.VueBreadcrumbsPlugin = plugin;
exports.default = plugin;

Object.defineProperty(exports, '__esModule', { value: true });

}));

0 comments on commit 20ad120

Please sign in to comment.