@oruga-ui/examples
Version:
Oruga component examples
766 lines (715 loc) • 2.72 MB
JavaScript
(function(lt,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@oruga-ui/oruga-next")):typeof define=="function"&&define.amd?define(["exports","vue","@oruga-ui/oruga-next"],e):(lt=typeof globalThis<"u"?globalThis:lt||self,e(lt["Oruga Examples"]={},lt.Vue,lt["@oruga-ui/oruga-next"]))})(this,function(lt,e,Ue){"use strict";const pf={class:"odocs-spaced"},ff=e.defineComponent({__name:"base",setup(a){const t=["Angular","Angular 2","Aurelia","Backbone","Ember","jQuery","Meteor","Node.js","Polymer","React","RxJS","Vue.js"],n=e.ref();return(o,r)=>{const i=e.resolveComponent("o-autocomplete"),l=e.resolveComponent("o-field");return e.openBlock(),e.createElementBlock("section",pf,[e.createVNode(l,{label:"Find a JS framework"},{default:e.withCtx(()=>[e.createVNode(i,{modelValue:n.value,"onUpdate:modelValue":r[0]||(r[0]=s=>n.value=s),options:t,rounded:"",expanded:"",placeholder:"e.g. jQuery",icon:"search",clearable:"","open-on-focus":""},null,8,["modelValue"]),e.createElementVNode("p",null,[r[1]||(r[1]=e.createElementVNode("b",null,"Selected:",-1)),e.createTextVNode(" "+e.toDisplayString(n.value),1)])]),_:1})])}}}),_f=`<script setup lang="ts">
import { ref } from "vue";
import type { OptionsProp } from "@oruga-ui/oruga-next";
const options: OptionsProp<string> = [
"Angular",
"Angular 2",
"Aurelia",
"Backbone",
"Ember",
"jQuery",
"Meteor",
"Node.js",
"Polymer",
"React",
"RxJS",
"Vue.js",
];
const selected = ref();
<\/script>
<template>
<section class="odocs-spaced">
<o-field label="Find a JS framework">
<o-autocomplete
v-model="selected"
:options="options"
rounded
expanded
placeholder="e.g. jQuery"
icon="search"
clearable
open-on-focus>
</o-autocomplete>
<p><b>Selected:</b> {{ selected }}</p>
</o-field>
</section>
</template>
`,gf=e.defineComponent({__name:"options",setup(a){const t=[{label:"Jesse Simmons",value:{id:1,user:{first_name:"Jesse",last_name:"Simmons"},date:"2016/10/15 13:43:27",gender:"Male"}},{label:"John Jacobs",value:{id:2,user:{first_name:"John",last_name:"Jacobs"},date:"2016/12/15 06:00:53",gender:"Male"}},{label:"Tina Gilbert",value:{id:3,user:{first_name:"Tina",last_name:"Gilbert"},date:"2016/04/26 06:26:28",gender:"Female"}},{label:"Clarence Flores",value:{id:4,user:{first_name:"Clarence",last_name:"Flores"},date:"2016/04/10 10:28:46",gender:"Male"}},{label:"Anne Lee",value:{id:5,user:{first_name:"Anne",last_name:"Lee"},date:"2016/12/06 14:38:38",gender:"Female"}},{label:"Sara Armstrong",value:{id:6,user:{first_name:"Sara",last_name:"Armstrong"},date:"2016/09/23 18:50:04",gender:"Female"}},{label:"Anthony Webb",value:{id:7,user:{first_name:"Anthony",last_name:"Webb"},date:"2016/08/30 23:49:38",gender:"Male"}},{label:"Andrew Greene",value:{id:8,user:{first_name:"Andrew",last_name:"Greene"},date:"2016/11/20 14:57:47",gender:"Male"}},{label:"Russell White",value:{id:9,user:{first_name:"Russell",last_name:"White"},date:"2016/07/13 09:29:49",gender:"Male"}},{label:"Lori Hunter",value:{id:10,user:{first_name:"Lori",last_name:"Hunter"},date:"2016/12/09 01:44:05",gender:"Female"}},{label:"Ronald Wood",value:{id:11,user:{first_name:"Ronald",last_name:"Wood"},date:"2016/12/04 02:23:48",gender:"Male"}},{label:"Michael Harper",value:{id:12,user:{first_name:"Michael",last_name:"Harper"},date:"2016/07/27 13:28:15",gender:"Male"}},{label:"George Dunn",value:{id:13,user:{first_name:"George",last_name:"Dunn"},date:"2017/03/07 12:26:52",gender:"Male"}},{label:"Eric Rogers",value:{id:14,user:{first_name:"Eric",last_name:"Rogers"},date:"2016/06/07 05:41:52",gender:"Male"}},{label:"Juan Meyer",value:{id:15,user:{first_name:"Juan",last_name:"Meyer"},date:"2017/02/01 04:56:34",gender:"Male"}},{label:"Silvia Rosa",value:{id:16,user:{first_name:"Silvia",last_name:"Rosa"},date:"2017/01/26 11:50:04",gender:"Female"}},{label:"Lori Cunningham",value:{id:17,user:{first_name:"Lori",last_name:"Cunningham"},date:"2016/05/01 10:00:56",gender:"Female"}},{label:"Charle Graham",value:{id:18,user:{first_name:"Charles",last_name:"Graham"},date:"2016/05/31 06:43:30",gender:"Male"}},{label:"Henry Morrison",value:{id:19,user:{first_name:"Henry",last_name:"Morrison"},date:"2016/09/27 16:15:44",gender:"Male"}},{label:"Albert Mendoza",value:{id:20,user:{first_name:"Albert",last_name:"Mendoza"},date:"2016/08/08 05:29:24",gender:"Male"}},{label:"Ruby Snyder",value:{id:21,user:{first_name:"Ruby",last_name:"Snyder"},date:"2017/04/01 12:04:39",gender:"Female"}}],n=e.ref();return(o,r)=>{const i=e.resolveComponent("o-autocomplete"),l=e.resolveComponent("o-field");return e.openBlock(),e.createElementBlock("section",null,[e.createVNode(l,{label:"Options List"},{default:e.withCtx(()=>[e.createVNode(i,{modelValue:n.value,"onUpdate:modelValue":r[0]||(r[0]=s=>n.value=s),options:t,placeholder:"Find a name...","open-on-focus":""},null,8,["modelValue"]),e.createElementVNode("p",null,[r[1]||(r[1]=e.createElementVNode("b",null,"Selected:",-1)),e.createTextVNode(" "+e.toDisplayString(n.value),1)])]),_:1})])}}}),bf=`<script setup lang="ts">
import { ref } from "vue";
import type { OptionsProp } from "@oruga-ui/oruga-next";
const options: OptionsProp = [
{
label: "Jesse Simmons",
value: {
id: 1,
user: { first_name: "Jesse", last_name: "Simmons" },
date: "2016/10/15 13:43:27",
gender: "Male",
},
},
{
label: "John Jacobs",
value: {
id: 2,
user: { first_name: "John", last_name: "Jacobs" },
date: "2016/12/15 06:00:53",
gender: "Male",
},
},
{
label: "Tina Gilbert",
value: {
id: 3,
user: { first_name: "Tina", last_name: "Gilbert" },
date: "2016/04/26 06:26:28",
gender: "Female",
},
},
{
label: "Clarence Flores",
value: {
id: 4,
user: { first_name: "Clarence", last_name: "Flores" },
date: "2016/04/10 10:28:46",
gender: "Male",
},
},
{
label: "Anne Lee",
value: {
id: 5,
user: { first_name: "Anne", last_name: "Lee" },
date: "2016/12/06 14:38:38",
gender: "Female",
},
},
{
label: "Sara Armstrong",
value: {
id: 6,
user: { first_name: "Sara", last_name: "Armstrong" },
date: "2016/09/23 18:50:04",
gender: "Female",
},
},
{
label: "Anthony Webb",
value: {
id: 7,
user: { first_name: "Anthony", last_name: "Webb" },
date: "2016/08/30 23:49:38",
gender: "Male",
},
},
{
label: "Andrew Greene",
value: {
id: 8,
user: { first_name: "Andrew", last_name: "Greene" },
date: "2016/11/20 14:57:47",
gender: "Male",
},
},
{
label: "Russell White",
value: {
id: 9,
user: { first_name: "Russell", last_name: "White" },
date: "2016/07/13 09:29:49",
gender: "Male",
},
},
{
label: "Lori Hunter",
value: {
id: 10,
user: { first_name: "Lori", last_name: "Hunter" },
date: "2016/12/09 01:44:05",
gender: "Female",
},
},
{
label: "Ronald Wood",
value: {
id: 11,
user: { first_name: "Ronald", last_name: "Wood" },
date: "2016/12/04 02:23:48",
gender: "Male",
},
},
{
label: "Michael Harper",
value: {
id: 12,
user: { first_name: "Michael", last_name: "Harper" },
date: "2016/07/27 13:28:15",
gender: "Male",
},
},
{
label: "George Dunn",
value: {
id: 13,
user: { first_name: "George", last_name: "Dunn" },
date: "2017/03/07 12:26:52",
gender: "Male",
},
},
{
label: "Eric Rogers",
value: {
id: 14,
user: { first_name: "Eric", last_name: "Rogers" },
date: "2016/06/07 05:41:52",
gender: "Male",
},
},
{
label: "Juan Meyer",
value: {
id: 15,
user: { first_name: "Juan", last_name: "Meyer" },
date: "2017/02/01 04:56:34",
gender: "Male",
},
},
{
label: "Silvia Rosa",
value: {
id: 16,
user: { first_name: "Silvia", last_name: "Rosa" },
date: "2017/01/26 11:50:04",
gender: "Female",
},
},
{
label: "Lori Cunningham",
value: {
id: 17,
user: { first_name: "Lori", last_name: "Cunningham" },
date: "2016/05/01 10:00:56",
gender: "Female",
},
},
{
label: "Charle Graham",
value: {
id: 18,
user: { first_name: "Charles", last_name: "Graham" },
date: "2016/05/31 06:43:30",
gender: "Male",
},
},
{
label: "Henry Morrison",
value: {
id: 19,
user: { first_name: "Henry", last_name: "Morrison" },
date: "2016/09/27 16:15:44",
gender: "Male",
},
},
{
label: "Albert Mendoza",
value: {
id: 20,
user: { first_name: "Albert", last_name: "Mendoza" },
date: "2016/08/08 05:29:24",
gender: "Male",
},
},
{
label: "Ruby Snyder",
value: {
id: 21,
user: { first_name: "Ruby", last_name: "Snyder" },
date: "2017/04/01 12:04:39",
gender: "Female",
},
},
];
const selected = ref();
<\/script>
<template>
<section>
<o-field label="Options List">
<o-autocomplete
v-model="selected"
:options="options"
placeholder="Find a name..."
open-on-focus>
</o-autocomplete>
<p><b>Selected:</b> {{ selected }}</p>
</o-field>
</section>
</template>
`,Ef=e.defineComponent({__name:"options-grouped",setup(a){const t=[{label:"Black Sails",attrs:{disabled:!0},options:[{label:"Flint",value:"flint"},{label:"Silver",value:"silver"},{label:"Vane",value:"vane"},{label:"Billy",value:"billy"},{label:"Jack",value:"silver",attrs:{disabled:!0}}]},{label:"Breaking Bad",attrs:{disabled:!0},options:{heisenberg:"Heisenberg",jesse:"Jesse",saul:"Saul",mike:"Mike"}},{label:"Game of Thrones",attrs:{disabled:!0},options:["Tyrion Lannister","Jamie Lannister","Daenerys Targaryen","Jon Snow"]}],n=e.ref();return(o,r)=>{const i=e.resolveComponent("o-autocomplete"),l=e.resolveComponent("o-field");return e.openBlock(),e.createElementBlock("section",null,[e.createVNode(l,{label:"Grouped Options"},{default:e.withCtx(()=>[e.createVNode(i,{modelValue:n.value,"onUpdate:modelValue":r[0]||(r[0]=s=>n.value=s),options:t,placeholder:"Find a name grouped by film...","open-on-focus":""},{header:e.withCtx(()=>[...r[1]||(r[1]=[e.createTextVNode("Film Character Groups",-1)])]),_:1},8,["modelValue"]),e.createElementVNode("p",null,[r[2]||(r[2]=e.createElementVNode("b",null,"Selected:",-1)),e.createTextVNode(" "+e.toDisplayString(n.value),1)])]),_:1})])}}}),Sf=`<script setup lang="ts">
import { ref } from "vue";
import type { OptionsPropWithGroups } from "@oruga-ui/oruga-next";
const groupOptions: OptionsPropWithGroups<string> = [
{
label: "Black Sails",
attrs: { disabled: true },
options: [
{ label: "Flint", value: "flint" },
{ label: "Silver", value: "silver" },
{ label: "Vane", value: "vane" },
{ label: "Billy", value: "billy" },
{ label: "Jack", value: "silver", attrs: { disabled: true } },
],
},
{
label: "Breaking Bad",
attrs: { disabled: true },
options: {
heisenberg: "Heisenberg",
jesse: "Jesse",
saul: "Saul",
mike: "Mike",
},
},
{
label: "Game of Thrones",
attrs: { disabled: true },
options: [
"Tyrion Lannister",
"Jamie Lannister",
"Daenerys Targaryen",
"Jon Snow",
],
},
];
const groupSelected = ref();
<\/script>
<template>
<section>
<o-field label="Grouped Options">
<o-autocomplete
v-model="groupSelected"
:options="groupOptions"
placeholder="Find a name grouped by film..."
open-on-focus>
<template #header>Film Character Groups</template>
</o-autocomplete>
<p><b>Selected:</b> {{ groupSelected }}</p>
</o-field>
</section>
</template>
`,M=(a,t)=>{const n=a.__vccOpts||a;for(const[o,r]of t)n[o]=r;return n},hf={},Nf={class:"odocs-spaced"};function Cf(a,t){const n=e.resolveComponent("o-autocomplete"),o=e.resolveComponent("o-field");return e.openBlock(),e.createElementBlock("section",Nf,[e.createVNode(o,{label:"Find a name"},{default:e.withCtx(()=>[e.createVNode(n,{options:[{label:"Jesse Simmons",value:{id:1,user:{first_name:"Jesse",last_name:"Simmons"},date:"2016/10/15 13:43:27",gender:"Male"}},{label:"John Jacobs",value:{id:2,user:{first_name:"John",last_name:"Jacobs"},date:"2016/12/15 06:00:53",gender:"Male"}}],"open-on-focus":"","keep-open":"","keep-first":"","selectable-header":"","selectable-footer":""},{empty:e.withCtx(()=>[...t[0]||(t[0]=[e.createTextVNode(" No results found ",-1)])]),header:e.withCtx(()=>[...t[1]||(t[1]=[e.createTextVNode(" Header ",-1)])]),footer:e.withCtx(()=>[...t[2]||(t[2]=[e.createTextVNode(" Footer ",-1)])]),_:1})]),_:1})])}const Tf=M(hf,[["render",Cf]]),yf=`<template>
<section class="odocs-spaced">
<o-field label="Find a name">
<o-autocomplete
:options="[
{
label: 'Jesse Simmons',
value: {
id: 1,
user: { first_name: 'Jesse', last_name: 'Simmons' },
date: '2016/10/15 13:43:27',
gender: 'Male',
},
},
{
label: 'John Jacobs',
value: {
id: 2,
user: { first_name: 'John', last_name: 'Jacobs' },
date: '2016/12/15 06:00:53',
gender: 'Male',
},
},
]"
open-on-focus
keep-open
keep-first
selectable-header
selectable-footer>
<template #empty> No results found </template>
<template #header> Header </template>
<template #footer> Footer </template>
</o-autocomplete>
</o-field>
</section>
</template>
`,xf={class:"odocs-spaced"},vf=e.defineComponent({__name:"selection",setup(a){const t=e.ref(!1),n=e.ref(!0),o=e.ref(!0),r=e.ref(!1),i=e.ref(!1),l=["Angular","Angular 2","Aurelia","Backbone","Ember","jQuery","Meteor","Node.js","Polymer","React","RxJS","Vue.js"],s=e.ref();function c(){s.value=l[0]}return(d,u)=>{const m=e.resolveComponent("o-switch"),p=e.resolveComponent("o-button"),_=e.resolveComponent("o-field"),f=e.resolveComponent("o-autocomplete");return e.openBlock(),e.createElementBlock("section",xf,[e.createVNode(_,{grouped:"",multiline:""},{default:e.withCtx(()=>[e.createVNode(m,{modelValue:t.value,"onUpdate:modelValue":u[0]||(u[0]=E=>t.value=E)},{default:e.withCtx(()=>[...u[6]||(u[6]=[e.createTextVNode("Keep first",-1)])]),_:1},8,["modelValue"]),e.createVNode(m,{modelValue:n.value,"onUpdate:modelValue":u[1]||(u[1]=E=>n.value=E)},{default:e.withCtx(()=>[...u[7]||(u[7]=[e.createTextVNode("Keep open",-1)])]),_:1},8,["modelValue"]),e.createVNode(m,{modelValue:o.value,"onUpdate:modelValue":u[2]||(u[2]=E=>o.value=E)},{default:e.withCtx(()=>[...u[8]||(u[8]=[e.createTextVNode("Open on focus",-1)])]),_:1},8,["modelValue"]),e.createVNode(m,{modelValue:r.value,"onUpdate:modelValue":u[3]||(u[3]=E=>r.value=E)},{default:e.withCtx(()=>[...u[9]||(u[9]=[e.createTextVNode("Select on close",-1)])]),_:1},8,["modelValue"]),e.createVNode(m,{modelValue:i.value,"onUpdate:modelValue":u[4]||(u[4]=E=>i.value=E)},{default:e.withCtx(()=>[...u[10]||(u[10]=[e.createTextVNode("Clear on Select",-1)])]),_:1},8,["modelValue"]),e.createVNode(p,{onClick:c},{default:e.withCtx(()=>[e.createTextVNode(" Set '"+e.toDisplayString(l[0])+"' selected ",1)]),_:1})]),_:1}),e.createVNode(_,{label:"Find a name"},{default:e.withCtx(()=>[e.createVNode(f,{modelValue:s.value,"onUpdate:modelValue":u[5]||(u[5]=E=>s.value=E),options:l,placeholder:"e.g. Vue",icon:"search","keep-first":t.value,"open-on-focus":o.value,"keep-open":n.value,"clear-on-select":i.value,"select-on-close":r.value},{empty:e.withCtx(()=>[...u[11]||(u[11]=[e.createTextVNode(" No results found ",-1)])]),_:1},8,["modelValue","keep-first","open-on-focus","keep-open","clear-on-select","select-on-close"]),e.createElementVNode("p",null,[u[12]||(u[12]=e.createElementVNode("b",null,"Selected:",-1)),e.createTextVNode(" "+e.toDisplayString(s.value),1)])]),_:1})])}}}),Rf=`<script setup lang="ts">
import { ref } from "vue";
import type { OptionsProp } from "@oruga-ui/oruga-next";
const keepFirst = ref(false);
const keepOpen = ref(true);
const openOnFocus = ref(true);
const selectOnClose = ref(false);
const clearOnSelect = ref(false);
const options: OptionsProp<string> = [
"Angular",
"Angular 2",
"Aurelia",
"Backbone",
"Ember",
"jQuery",
"Meteor",
"Node.js",
"Polymer",
"React",
"RxJS",
"Vue.js",
];
const selected = ref();
function changeselection(): void {
selected.value = options[0];
}
<\/script>
<template>
<section class="odocs-spaced">
<o-field grouped multiline>
<o-switch v-model="keepFirst">Keep first</o-switch>
<o-switch v-model="keepOpen">Keep open</o-switch>
<o-switch v-model="openOnFocus">Open on focus</o-switch>
<o-switch v-model="selectOnClose">Select on close</o-switch>
<o-switch v-model="clearOnSelect">Clear on Select</o-switch>
<o-button @click="changeselection">
Set '{{ options[0] }}' selected
</o-button>
</o-field>
<o-field label="Find a name">
<o-autocomplete
v-model="selected"
:options="options"
placeholder="e.g. Vue"
icon="search"
:keep-first="keepFirst"
:open-on-focus="openOnFocus"
:keep-open="keepOpen"
:clear-on-select="clearOnSelect"
:select-on-close="selectOnClose">
<template #empty> No results found </template>
</o-autocomplete>
<p><b>Selected:</b> {{ selected }}</p>
</o-field>
</section>
</template>
`,Mf={class:"odocs-spaced"},Af={class:"media"},Of={class:"media-left"},Lf=["src"],wf={class:"media-content"},If=M(e.defineComponent({__name:"scroll",setup(a){const t=e.ref(!1),n=e.ref(1),o=e.ref(1),r=e.ref([]),i=e.ref(),l=e.ref("");async function s(d){if(l.value!==d&&(l.value=d,r.value=[],n.value=1,o.value=1),!d.length){r.value=[],n.value=1,o.value=1;return}if(!(n.value>o.value)){t.value=!0;try{const u=await fetch(`https://api.themoviedb.org/3/search/movie?api_key=bb6f51bef07465653c3e553d6ab161a8&query=${d}&page=${n.value}`).then(p=>p.json()),m=u.results.map(p=>({value:p,label:p.title}));r.value=[...r.value,...m],n.value+=1,o.value=u.total_pages}catch(u){console.error(u)}finally{t.value=!1}}}function c(){s(l.value)}return(d,u)=>{const m=e.resolveComponent("o-autocomplete"),p=e.resolveComponent("o-field");return e.openBlock(),e.createElementBlock("section",Mf,[e.createVNode(p,{label:'Find a movie in the "The Movie Database (TMDB)"'},{default:e.withCtx(()=>[e.createVNode(m,{modelValue:i.value,"onUpdate:modelValue":u[0]||(u[0]=_=>i.value=_),options:r.value,placeholder:"e.g. Fight Club",expanded:"","check-scroll":"","backend-filtering":"",debounce:500,onInput:s,onScrollEnd:c},e.createSlots({default:e.withCtx(({value:_})=>[e.createElementVNode("div",Af,[e.createElementVNode("div",Of,[e.createElementVNode("img",{width:"32",src:`https://image.tmdb.org/t/p/w500/${_.poster_path}`},null,8,Lf)]),e.createElementVNode("div",wf,[e.createTextVNode(e.toDisplayString(_.title)+" ",1),u[1]||(u[1]=e.createElementVNode("br",null,null,-1)),e.createElementVNode("small",null,[e.createTextVNode(" Released at "+e.toDisplayString(_.release_date)+", rated ",1),e.createElementVNode("b",null,e.toDisplayString(_.vote_average),1)])])])]),_:2},[n.value>o.value||!r.value.length?{name:"footer",fn:e.withCtx(()=>[u[2]||(u[2]=e.createElementVNode("span",{class:"ex-text-grey"}," Thats it! No more movies found. ",-1))]),key:"0"}:void 0]),1032,["modelValue","options"]),e.createElementVNode("p",null,[u[3]||(u[3]=e.createElementVNode("b",null,"Selected:",-1)),e.createTextVNode(" "+e.toDisplayString(i.value?.title),1)])]),_:1})])}}}),[["__scopeId","data-v-9fe9a881"]]),Df=`<script setup lang="ts">
import { ref } from "vue";
import type { OptionsPropItem } from "@oruga-ui/oruga-next";
const isFetching = ref(false);
const page = ref(1);
const totalPages = ref(1);
const options = ref<OptionsPropItem<any>[]>([]);
const selected = ref<any>();
const value = ref("");
async function getAsyncData(_value: string): Promise<void> {
if (value.value !== _value) {
value.value = _value;
options.value = [];
page.value = 1;
totalPages.value = 1;
}
// String cleared
if (!_value.length) {
options.value = [];
page.value = 1;
totalPages.value = 1;
return;
}
// Reached last page
if (page.value > totalPages.value) {
return;
}
isFetching.value = true;
try {
const _data = await fetch(
\`https://api.themoviedb.org/3/search/movie?api_key=bb6f51bef07465653c3e553d6ab161a8&query=\${_value}&page=\${page.value}\`,
).then((response) => response.json());
const movies: OptionsPropItem[] = _data.results.map((v) => ({
value: v,
label: v.title,
}));
options.value = [...options.value, ...movies];
page.value += 1;
totalPages.value = _data.total_pages;
} catch (err) {
console.error(err);
} finally {
isFetching.value = false;
}
}
function getMoreAsyncData(): void {
getAsyncData(value.value);
}
<\/script>
<template>
<section class="odocs-spaced">
<o-field label='Find a movie in the "The Movie Database (TMDB)"'>
<o-autocomplete
v-model="selected"
:options="options"
placeholder="e.g. Fight Club"
expanded
check-scroll
backend-filtering
:debounce="500"
@input="getAsyncData"
@scroll-end="getMoreAsyncData">
<template #default="{ value }">
<div class="media">
<div class="media-left">
<img
width="32"
:src="\`https://image.tmdb.org/t/p/w500/\${value.poster_path}\`" />
</div>
<div class="media-content">
{{ value.title }}
<br />
<small>
Released at {{ value.release_date }}, rated
<b>{{ value.vote_average }}</b>
</small>
</div>
</div>
</template>
<template v-if="page > totalPages || !options.length" #footer>
<span class="ex-text-grey">
Thats it! No more movies found.
</span>
</template>
</o-autocomplete>
<p><b>Selected:</b> {{ selected?.title }}</p>
</o-field>
</section>
</template>
<style scoped>
.ex-text-grey {
color: grey;
}
</style>
`,kf=Object.freeze(Object.defineProperty({__proto__:null,default:e.defineComponent({__name:"index",setup(a){return(t,n)=>{const o=e.resolveComponent("ExampleViewer");return e.openBlock(),e.createElementBlock(e.Fragment,null,[n[0]||(n[0]=e.createElementVNode("h3",{id:"base"},"Base",-1)),e.createVNode(o,{component:ff,code:e.unref(_f)},null,8,["code"]),n[1]||(n[1]=e.createElementVNode("h3",{id:"selection"},"Selection",-1)),n[2]||(n[2]=e.createElementVNode("p",null,[e.createTextVNode(" The autocomplete input can only contain one item at a time. For the multiple selection version, see the "),e.createElementVNode("a",{href:"/components/taginput.html"},[e.createElementVNode("b",null,"Taginput")]),e.createTextVNode(" component. ")],-1)),e.createVNode(o,{component:vf,code:e.unref(Rf)},null,8,["code"]),n[3]||(n[3]=e.createStaticVNode('<h3 id="options">Options</h3><p> The <code>options</code> prop can accept several different formats of values: </p><ul><li>An array of primitives <code>['A', 'B', 'C']</code></li><li> An object literal with key-value pairs <code>{ a: 'A', b: 'B', c: 'C' }</code></li><li> An array of objects with <code>label</code> and <code>value</code> properties </li><li> Grouped options by adding additional <code>options</code> to the option object. </li></ul><div class="info custom-block"><p class="custom-block-title">Note</p><p> The <code>options</code> prop works the same as the <a href="/components/select.html"><b>Select</b></a> input component <code>options</code> prop. </p></div>',4)),e.createVNode(o,{component:gf,code:e.unref(bf)},null,8,["code"]),e.createVNode(o,{component:Ef,code:e.unref(Sf)},null,8,["code"]),n[4]||(n[4]=e.createElementVNode("h3",{id:"slots"},"Slots",-1)),n[5]||(n[5]=e.createElementVNode("p",null,[e.createTextVNode(" A header and a footer can be added to the options list by using the "),e.createElementVNode("code",null,"header"),e.createTextVNode(" and "),e.createElementVNode("code",null,"footer"),e.createTextVNode(" slots. The header and footer can be made clickable by adding the "),e.createElementVNode("code",null,"selectable-header"),e.createTextVNode(" and "),e.createElementVNode("code",null,"selectable-footer"),e.createTextVNode(" props. Clicking them will clear the input. ")],-1)),e.createVNode(o,{component:Tf,code:e.unref(yf)},null,8,["code"]),n[6]||(n[6]=e.createStaticVNode('<h3 id="scroll">Infinite Scroll & Async Data</h3><p> When <code>check-scroll</code> prop is set, the component will emits the <code>scroll-start</code> and <code>scroll-end</code> events. These events can be used to load more options as needed. Consider adding <code>backend-filtering</code> when manually updating options on input values changes. </p><div class="info custom-block"><p class="custom-block-title">Note</p><p> The autocomplete component does not have a default slot for defining options. The default slot is used to override the option element template. </p></div>',3)),e.createVNode(o,{component:If,code:e.unref(Df)},null,8,["code"])],64)}}})},Symbol.toStringTag,{value:"Module"})),zf={};function Pf(a,t){const n=e.resolveComponent("o-breadcrumb-item"),o=e.resolveComponent("o-breadcrumb");return e.openBlock(),e.createElementBlock("section",null,[e.createVNode(o,null,{default:e.withCtx(()=>[e.createVNode(n,{disabled:""},{default:e.withCtx(()=>[...t[0]||(t[0]=[e.createTextVNode(" Home ",-1)])]),_:1}),e.createVNode(n,{href:"/"},{default:e.withCtx(()=>[...t[1]||(t[1]=[e.createTextVNode(" Docs ",-1)])]),_:1}),e.createVNode(n,{href:"/components/Breadcrumb.html",active:""},{default:e.withCtx(()=>[...t[2]||(t[2]=[e.createTextVNode(" Breadcrumb ",-1)])]),_:1})]),_:1})])}const Vf=M(zf,[["render",Pf]]),Ff=`<template>
<section>
<o-breadcrumb>
<o-breadcrumb-item disabled> Home </o-breadcrumb-item>
<o-breadcrumb-item href="/"> Docs </o-breadcrumb-item>
<o-breadcrumb-item href="/components/Breadcrumb.html" active>
Breadcrumb
</o-breadcrumb-item>
</o-breadcrumb>
</section>
</template>
`,Bf={};function Uf(a,t){const n=e.resolveComponent("o-breadcrumb");return e.openBlock(),e.createElementBlock("section",null,[e.createVNode(n,{options:[{label:"Home",attrs:{href:"/",disabled:!0}},{label:"Docs"},{label:"Breadcrumb",attrs:{active:!0}}]})])}const Gf=M(Bf,[["render",Uf]]),Yf=`<template>
<section>
<o-breadcrumb
:options="[
{
label: 'Home',
attrs: { href: '/', disabled: true },
},
{
label: 'Docs',
},
{
label: 'Breadcrumb',
attrs: { active: true },
},
]" />
</section>
</template>
`,qf={};function Hf(a,t){const n=e.resolveComponent("o-breadcrumb-item"),o=e.resolveComponent("o-breadcrumb");return e.openBlock(),e.createElementBlock("section",null,[e.createVNode(o,{separator:"/"},{default:e.withCtx(()=>[e.createVNode(n,{label:"Home"}),e.createVNode(n,{label:"Docs",disabled:""}),e.createVNode(n,{label:"Breadcrumb",active:""})]),_:1}),e.createVNode(o,{separator:"•"},{default:e.withCtx(()=>[e.createVNode(n,{label:"Home"}),e.createVNode(n,{label:"Docs",disabled:""}),e.createVNode(n,{label:"Breadcrumb",active:""})]),_:1}),e.createVNode(o,{separator:"≻"},{default:e.withCtx(()=>[e.createVNode(n,{label:"Home"}),e.createVNode(n,{label:"Docs",disabled:""}),e.createVNode(n,{label:"Breadcrumb",active:""})]),_:1}),e.createVNode(o,{separator:"→"},{default:e.withCtx(()=>[e.createVNode(n,{label:"Home"}),e.createVNode(n,{label:"Docs",disabled:""}),e.createVNode(n,{label:"Breadcrumb",active:""})]),_:1})])}const $f=M(qf,[["render",Hf]]),Wf=`<template>
<section>
<!-- Separatoer slash -->
<o-breadcrumb separator="/">
<o-breadcrumb-item label="Home" />
<o-breadcrumb-item label="Docs" disabled />
<o-breadcrumb-item label="Breadcrumb" active />
</o-breadcrumb>
<!-- Separatoer dot -->
<o-breadcrumb separator="•">
<o-breadcrumb-item label="Home" />
<o-breadcrumb-item label="Docs" disabled />
<o-breadcrumb-item label="Breadcrumb" active />
</o-breadcrumb>
<!-- Separatoer chevron -->
<o-breadcrumb separator="≻">
<o-breadcrumb-item label="Home" />
<o-breadcrumb-item label="Docs" disabled />
<o-breadcrumb-item label="Breadcrumb" active />
</o-breadcrumb>
<!-- Separatoer arrow -->
<o-breadcrumb separator="→">
<o-breadcrumb-item label="Home" />
<o-breadcrumb-item label="Docs" disabled />
<o-breadcrumb-item label="Breadcrumb" active />
</o-breadcrumb>
</section>
</template>
`,Kf=e.defineComponent({__name:"icons",setup(a){const t=e.ref(""),n=e.ref("");return(o,r)=>{const i=e.resolveComponent("o-select"),l=e.resolveComponent("o-field"),s=e.resolveComponent("o-breadcrumb-item"),c=e.resolveComponent("o-breadcrumb");return e.openBlock(),e.createElementBlock("section",null,[e.createVNode(l,{grouped:""},{default:e.withCtx(()=>[e.createVNode(l,{label:"Icon Size"},{default:e.withCtx(()=>[e.createVNode(i,{modelValue:t.value,"onUpdate:modelValue":r[0]||(r[0]=d=>t.value=d)},{default:e.withCtx(()=>[...r[2]||(r[2]=[e.createElementVNode("option",{value:"small"},"Small",-1),e.createElementVNode("option",{value:""},"Default",-1),e.createElementVNode("option",{value:"medium"},"Medium",-1),e.createElementVNode("option",{value:"large"},"Large",-1)])]),_:1},8,["modelValue"])]),_:1}),e.createVNode(l,{label:"Text Size"},{default:e.withCtx(()=>[e.createVNode(i,{modelValue:n.value,"onUpdate:modelValue":r[1]||(r[1]=d=>n.value=d)},{default:e.withCtx(()=>[...r[3]||(r[3]=[e.createElementVNode("option",{value:"small"},"Small",-1),e.createElementVNode("option",{value:""},"Default",-1),e.createElementVNode("option",{value:"medium"},"Medium",-1),e.createElementVNode("option",{value:"large"},"Large",-1)])]),_:1},8,["modelValue"])]),_:1})]),_:1}),e.createVNode(c,{size:n.value},{default:e.withCtx(()=>[e.createVNode(s,{label:"Home","icon-left":"home","icon-size":t.value},null,8,["icon-size"]),e.createVNode(s,{label:"Docs","icon-left":"plus","icon-size":t.value},null,8,["icon-size"]),e.createVNode(s,{label:"Breadcrumb","icon-left":"location","icon-size":t.value,active:""},null,8,["icon-size"])]),_:1},8,["size"]),e.createVNode(c,{size:n.value},{default:e.withCtx(()=>[e.createVNode(s,{label:"Home","icon-right":"home","icon-size":t.value},null,8,["icon-size"]),e.createVNode(s,{label:"Docs","icon-right":"plus","icon-size":t.value},null,8,["icon-size"]),e.createVNode(s,{label:"Breadcrumb","icon-right":"location","icon-size":t.value,active:""},null,8,["icon-size"])]),_:1},8,["size"])])}}}),Qf=`<script setup lang="ts">
import { ref } from "vue";
const iconSize = ref<string>("");
const size = ref<string>("");
<\/script>
<template>
<section>
<o-field grouped>
<o-field label="Icon Size">
<o-select v-model="iconSize">
<option value="small">Small</option>
<option value="">Default</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</o-select>
</o-field>
<o-field label="Text Size">
<o-select v-model="size">
<option value="small">Small</option>
<option value="">Default</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</o-select>
</o-field>
</o-field>
<o-breadcrumb :size="size">
<o-breadcrumb-item
label="Home"
icon-left="home"
:icon-size="iconSize" />
<o-breadcrumb-item
label="Docs"
icon-left="plus"
:icon-size="iconSize" />
<o-breadcrumb-item
label="Breadcrumb"
icon-left="location"
:icon-size="iconSize"
active />
</o-breadcrumb>
<o-breadcrumb :size="size">
<o-breadcrumb-item
label="Home"
icon-right="home"
:icon-size="iconSize" />
<o-breadcrumb-item
label="Docs"
icon-right="plus"
:icon-size="iconSize" />
<o-breadcrumb-item
label="Breadcrumb"
icon-right="location"
:icon-size="iconSize"
active />
</o-breadcrumb>
</section>
</template>
`,Xf={};function Zf(a,t){const n=e.resolveComponent("o-breadcrumb-item"),o=e.resolveComponent("o-breadcrumb");return e.openBlock(),e.createElementBlock("section",null,[e.createVNode(o,{size:"small"},{default:e.withCtx(()=>[e.createVNode(n,{label:"Home",href:"/"}),e.createVNode(n,{label:"Docs",disabled:""}),e.createVNode(n,{label:"Breadcrumb",active:""})]),_:1}),e.createVNode(o,null,{default:e.withCtx(()=>[e.createVNode(n,{label:"Home",href:"/"}),e.createVNode(n,{label:"Docs",disabled:""}),e.createVNode(n,{label:"Breadcrumb",active:""})]),_:1}),e.createVNode(o,{size:"medium"},{default:e.withCtx(()=>[e.createVNode(n,{label:"Home",href:"/"}),e.createVNode(n,{label:"Docs",disabled:""}),e.createVNode(n,{label:"Breadcrumb",active:""})]),_:1}),e.createVNode(o,{size:"large"},{default:e.withCtx(()=>[e.createVNode(n,{label:"Home",href:"/"}),e.createVNode(n,{label:"Docs",disabled:""}),e.createVNode(n,{label:"Breadcrumb",active:""})]),_:1})])}const Jf=M(Xf,[["render",Zf]]),jf=`<template>
<section>
<!-- Size small -->
<o-breadcrumb size="small">
<o-breadcrumb-item label="Home" href="/" />
<o-breadcrumb-item label="Docs" disabled />
<o-breadcrumb-item label="Breadcrumb" active />
</o-breadcrumb>
<!-- Size default -->
<o-breadcrumb>
<o-breadcrumb-item label="Home" href="/" />
<o-breadcrumb-item label="Docs" disabled />
<o-breadcrumb-item label="Breadcrumb" active />
</o-breadcrumb>
<!-- Size medium -->
<o-breadcrumb size="medium">
<o-breadcrumb-item label="Home" href="/" />
<o-breadcrumb-item label="Docs" disabled />
<o-breadcrumb-item label="Breadcrumb" active />
</o-breadcrumb>
<!-- Size large -->
<o-breadcrumb size="large">
<o-breadcrumb-item label="Home" href="/" />
<o-breadcrumb-item label="Docs" disabled />
<o-breadcrumb-item label="Breadcrumb" active />
</o-breadcrumb>
</section>
</template>
`,e_={};function t_(a,t){const n=e.resolveComponent("o-breadcrumb-item"),o=e.resolveComponent("o-breadcrumb");return e.openBlock(),e.createElementBlock("section",null,[e.createVNode(o,{variant:"primary"},{default:e.withCtx(()=>[e.createVNode(n,{label:"Home",disabled:""}),e.createVNode(n,{label:"Docs",href:"/"}),e.createVNode(n,{label:"Breadcrumb",active:""})]),_:1}),e.createVNode(o,{variant:"secondary"},{default:e.withCtx(()=>[e.createVNode(n,{label:"Home",disabled:""}),e.createVNode(n,{label:"Docs",href:"/"}),e.createVNode(n,{label:"Breadcrumb",active:""})]),_:1}),e.createVNode(o,{variant:"success"},{default:e.withCtx(()=>[e.createVNode(n,{label:"Home",disabled:""}),e.createVNode(n,{label:"Docs",href:"/"}),e.createVNode(n,{label:"Breadcrumb",active:""})]),_:1}),e.createVNode(o,{variant:"info"},{default:e.withCtx(()=>[e.createVNode(n,{label:"Home",disabled:""}),e.createVNode(n,{label:"Docs",href:"/"}),e.createVNode(n,{label:"Breadcrumb",active:""})]),_:1}),e.createVNode(o,{variant:"warning"},{default:e.withCtx(()=>[e.createVNode(n,{label:"Home",disabled:""}),e.createVNode(n,{label:"Docs",href:"/"}),e.createVNode(n,{label:"Breadcrumb",active:""})]),_:1}),e.createVNode(o,{variant:"danger"},{default:e.withCtx(()=>[e.createVNode(n,{label:"Home",disabled:""}),e.createVNode(n,{label:"Docs",href:"/"}),e.createVNode(n,{label:"Breadcrumb",active:""})]),_:1})])}const n_=M(e_,[["render",t_]]),a_=`<template>
<section>
<!-- Variant primary -->
<o-breadcrumb variant="primary">
<o-breadcrumb-item label="Home" disabled />
<o-breadcrumb-item label="Docs" href="/" />
<o-breadcrumb-item label="Breadcrumb" active />
</o-breadcrumb>
<!-- Variant secondary -->
<o-breadcrumb variant="secondary">
<o-breadcrumb-item label="Home" disabled />
<o-breadcrumb-item label="Docs" href="/" />
<o-breadcrumb-item label="Breadcrumb" active />
</o-breadcrumb>
<!-- Variant success -->
<o-breadcrumb variant="success">
<o-breadcrumb-item label="Home" disabled />
<o-breadcrumb-item label="Docs" href="/" />
<o-breadcrumb-item label="Breadcrumb" active />
</o-breadcrumb>
<!-- Variant info -->
<o-breadcrumb variant="info">
<o-breadcrumb-item label="Home" disabled />
<o-breadcrumb-item label="Docs" href="/" />
<o-breadcrumb-item label="Breadcrumb" active />
</o-breadcrumb>
<!-- Variant warning -->
<o-breadcrumb variant="warning">
<o-breadcrumb-item label="Home" disabled />
<o-breadcrumb-item label="Docs" href="/" />
<o-breadcrumb-item label="Breadcrumb" active />
</o-breadcrumb>
<!-- Variant danger -->
<o-breadcrumb variant="danger">
<o-breadcrumb-item label="Home" disabled />
<o-breadcrumb-item label="Docs" href="/" />
<o-breadcrumb-item label="Breadcrumb" active />
</o-breadcrumb>
</section>
</template>
`,o_={};function r_(a,t){const n=e.resolveComponent("o-breadcrumb-item"),o=e.resolveComponent("o-breadcrumb");return e.openBlock(),e.createElementBlock("section",null,[e.createVNode(o,{position:"left"},{default:e.withCtx(()=>[e.createVNode(n,{label:"Home",disabled:""}),e.createVNode(n,{label:"Docs"}),e.createVNode(n,{label:"Breadcrumb",active:""})]),_:1}),e.createVNode(o,{position:"centered"},{default:e.withCtx(()=>[e.createVNode(n,{label:"Home",disabled:""}),e.createVNode(n,{label:"Docs"}),e.createVNode(n,{label:"Breadcrumb",active:""})]),_:1}),e.createVNode(o,{position:"right"},{default:e.withCtx(()=>[e.createVNode(n,{label:"Home",disabled:""}),e.createVNode(n,{label:"Docs"}),e.createVNode(n,{label:"Breadcrumb",active:""})]),_:1})])}const i_=M(o_,[["render",r_]]),l_=`<template>
<section>
<!-- Position left -->
<o-breadcrumb position="left">
<o-breadcrumb-item label="Home" disabled />
<o-breadcrumb-item label="Docs" />
<o-breadcrumb-item label="Breadcrumb" active />
</o-breadcrumb>
<!-- Position center -->
<o-breadcrumb position="centered">
<o-breadcrumb-item label="Home" disabled />
<o-breadcrumb-item label="Docs" />
<o-breadcrumb-item label="Breadcrumb" active />
</o-breadcrumb>
<!-- Position right -->
<o-breadcrumb position="right">
<o-breadcrumb-item label="Home" disabled />
<o-breadcrumb-item label="Docs" />
<o-breadcrumb-item label="Breadcrumb" active />
</o-breadcrumb>
</section>
</template>
`,s_={};function c_(a,t){const n=e.resolveComponent("o-breadcrumb-item"),o=e.resolveComponent("o-breadcrumb");return e.openBlock(),e.createElementBlock("section",null,[e.createVNode(o,{separator:"->"},{default:e.withCtx(()=>[e.createVNode(n,{label:"Home",tag:"a",href:"/",disabled:""}),e.createVNode(n,{label:"Docs",tag:"a",href:"/documentation/"}),e.createVNode(n,{label:"Breadcrumb",tag:"a",href:"/components/Breadcrumb.html",active:""})]),_:1}),e.createVNode(o,{separator:"/"},{default:e.withCtx(()=>[e.createVNode(n,{label:"Home",tag:"router-link",to:"/",disabled:""}),e.createVNode(n,{label:"Docs",tag:"router-link",to:"/documentation/"}),e.createVNode(n,{label:"Breadcrumb",tag:"router-link",to:"/components/Breadcrumb",active:""})]),_:1})])}const d_=M(s_,[["render",c_]]),u_=`<template>
<section>
<!-- remove links -->
<o-breadcrumb separator="->">
<o-breadcrumb-item label="Home" tag="a" href="/" disabled />
<o-breadcrumb-item label="Docs" tag="a" href="/documentation/" />
<o-breadcrumb-item
label="Breadcrumb"
tag="a"
href="/components/Breadcrumb.html"
active />
</o-breadcrumb>
<!-- need vue-router -->
<o-breadcrumb separator="/">
<o-breadcrumb-item label="Home" tag="router-link" to="/" disabled />
<o-breadcrumb-item
label="Docs"
tag="router-link"
to="/documentation/" />
<o-breadcrumb-item
label="Breadcrumb"
tag="router-link"
to="/components/Breadcrumb"
active />
</o-breadcrumb>
</section>
</template>
`,m_=Object.freeze(Object.defineProperty({__proto__:null,default:e.defineComponent({__name:"index",setup(a){return(t,n)=>{const o=e.resolveComponent("ExampleViewer");return e.openBlock(),e.createElementBlock(e.Fragment,null,[n[0]||(n[0]=e.createElementVNode("h3",{id:"base"},"Base",-1)),n[1]||(n[1]=e.createElementVNode("p",null,[e.createTextVNode(" Since breadcrumbs provide a navigation, it's a good idea to add a meaningful label such as "),e.createElementVNode("code",null,'aria-label="breadcrumb"'),e.createTextVNode(" to describe the type of navigation provided in the "),e.createElementVNode("code",null,"nav"),e.createTextVNode(" element. To determine the current page, set the "),e.createElementVNode("code",null,"active"),e.createTextVNode(" prop. This applies an "),e.createElementVNode("code",null,'aria-current="page"'),e.createTextVNode(" to the item to indicate that it represents the current page. Individual items can also be disabled using the "),e.createElementVNode("code",null,"disabled"),e.createTextVNode(" prop. ")],-1)),e.createVNode(o,{component:Vf,code:e.unref(Ff)},null,8,["code"]),n[2]||(n[2]=e.createElementVNode("h3",{id:"separators"},"Separators",-1)),n[3]||(n[3]=e.createElementVNode("p",null,[e.createTextVNode(" Dividers are automatically added in CSS by the theme. In addition, the component allows you to customise the seperator using the "),e.createElementVNode("code",null,"seperator"),e.createTextVNode(" prop. The "),e.createElementVNode("code",null,"seperator"),e.createTextVNode(" slot can be used if further customisation is needed. ")],-1)),e.createVNode(o,{component:$f,code:e.unref(Wf)},null,8,["code"]),n[4]||(n[4]=e.createStaticVNode('<h3 id="options">Options</h3><p> Instead of using the <code><o-breadcrumb-item></code> component directly inside the default slot, an <code>options</code> prop can be set, which allows the options to be set programmatically. It accepts several different formats of values: </p><ul><li>An array of primitives <code>['A', 'B', 'C']</code></li><li> An array of objects with <code>label</code> and <code>attrs</code> properties </li></ul>',3)),e.createVNode(o,{component:Gf,code:e.unref(Yf)},null,8,["code"]),n[5]||(n[5]=e.createElementVNode("h3",{id:"variants"},"Variants",-1)),n[6]||(n[6]=e.createElementVNode("p",null,[e.createTextVNode("Different styles can be achieved with the "),e.createElementVNode("code",null,"variant"),e.createTextVNode(" prop.")],-1)),e.createVNode(o,{component:n_,code:e.unref(a_)},null,8,["code"]),n[7]||(n[7]=e.createElementVNode("h3",{id:"sizes"},"Sizes",-1)),n[8]||(n[8]=e.createElementVNode("p",null,[e.createTextVNode(" The component can be displayed in different sizes using the "),e.createElementVNode("code",null,"size"),e.createTextVNode(" prop. ")],-1)),e.createVNode(o,{component:Jf,code:e.unref(jf)},null,8,["code"]),n[9]||(n[9]=e.createElementVNode("h3",{id:"positions"},"Positions",-1)),n[10]||(n[10]=e.createElementVNode("p",null,[e.createTextVNode(" For alternative alignments, the breadcrumb can be positioned by the "),e.createElementVNode("code",null,"position"),e.createTextVNode(" prop. ")],-1)),e.createVNode(o,{component:i_,code:e.unref(l_)},null,8,["code"]),n[11]||(n[11]=e.createElementVNode("h3",{id:"icons"},"Icons",-1)),n[12]||(n[12]=e.createElementVNode("p",null," You can add an icon to the item to explain its function more visually. ",-1)),e.createVNode(o,{component:Kf,code:e.unref(Qf)},null,8,["code"]),n[13]||(n[13]=e.createElementVNode("h3",{id:"tags"},"Tags",-1)),n[14]||(n[14]=e.createElementVNode("p",null,[e.createTextVNode(" By default the breadcrumb items are represented as HTML "),e.createElementVNode("code",null,"a"),e.createTextVNode(" tag elements. The HTML tag can be customised using the "),e.createElementVNode("code",null,"tag"),e.createTextVNode(" prop for an item, for example to define links using "),e.createElementVNode("a",{href:"https://router.vuejs.org/",target:"_blank"},"vue-router"),e.createTextVNode(" and "),e.createElementVNode("code",null,"router-link"),e.createTextVNode(" tag. ")],-1)),e.createVNode(o,{component:d_,code:e.unref(u_)},null,8,["code"])],64)}}})},Symbol.toStringTag,{value:"Module"})),p_=e.defineComponent({__name:"base",setup(a){const t=()=>{alert("Clicked!")},n=e.reactive({variant:"primary",size:"medium",rounded:!1,outlined:!1,inverted:!1,disabled:!1,loading:!1});return(o,r)=>{const i=e.resolveComponent("o-select"),l=e.resolveComponent("o-field"),s=e.resolveComponent("o-switch"),c=e.resolveComponent("o-button");return e.openBlock(),e.createElementBlock("section",null,[e.createVNode(l,{grouped:""},{default:e.withCtx(()=>[e.createVNode(l,{label:"Size"},{default:e.withCtx(()=>[e.createVNode(i,{modelValue:n.size,"onUpdate:modelValue":r[0]||(r[0]=d=>n.size=d)},{default:e.withCtx(()=>[...r[7]||(r[7]=[e.createElementVNode("option",{value:"small"},"small",-1),e.createElementVNode("option",{value:"default"},"default",-1),e.createElementVNode("option",{value:"medium"},"medium",-1),e.createElementVNode("option",{value:"large"},"large",-1)])]),_:1},8,["modelValue"])]),_:1}),e.createVNode(l,{label:"Variant"},{default:e.withCtx(()=>[e.createVNode(i,{modelValue:n.variant,"onUpdate:modelValue":r[1]||(r[1]=d=>n.variant=d)},{default:e.withCtx(()=>[...r[8]||(r[8]=[e.createElementVNode("option",{value:"default"},"default",-1),e.createElementVNode("option",{value:"primary"},"primary",-1),e.createElementVNode("option",{value:"secondary"},"secondary",-1),e.createElementVNode("option",{value:"success"},"success",-1),e.createElementVNode("option",{value:"info"},"info",-1),e.createElementVNode("option",{value:"warning"},"warning",-1),e.createElementVNode("option",{value:"danger"},"danger",-1)])]),_:1},8,["modelValue"])]),_:1}),e.createVNode(l,{label:"Inverted"},{d