@oruga-ui/examples
Version:
Oruga component examples
1,742 lines (1,694 loc) • 3.43 MB
JavaScript
import { defineComponent as I, ref as R, resolveComponent as g, createElementBlock as N, openBlock as T, createVNode as o, withCtx as d, createElementVNode as s, createTextVNode as f, toDisplayString as F, createSlots as fr, Fragment as Z, createStaticVNode as Fe, unref as O, reactive as Uf, renderList as We, normalizeStyle as L3, createBlock as cn, withKeys as Qa, createCommentVNode as $e, withModifiers as qe, computed as Pe, h as tn, onBeforeMount as Bf, onBeforeUnmount as Gf, useTemplateRef as x3, onMounted as _a, normalizeClass as aa, withDirectives as Pn, vShow as Jt, mergeProps as Vf, watch as Yf, renderSlot as qf, nextTick as Hf, resolveDynamicComponent as $f, vModelRadio as Xa, markRaw as Wf } from "vue";
import { useOruga as un } from "@oruga-ui/oruga-next";
const Kf = { class: "odocs-spaced" }, Qf = /* @__PURE__ */ I({
__name: "base",
setup(t) {
const e = [
"Angular",
"Angular 2",
"Aurelia",
"Backbone",
"Ember",
"jQuery",
"Meteor",
"Node.js",
"Polymer",
"React",
"RxJS",
"Vue.js"
], n = R();
return (a, i) => {
const r = g("o-autocomplete"), l = g("o-field");
return T(), N("section", Kf, [
o(l, { label: "Find a JS framework" }, {
default: d(() => [
o(r, {
modelValue: n.value,
"onUpdate:modelValue": i[0] || (i[0] = (c) => n.value = c),
options: e,
rounded: "",
expanded: "",
placeholder: "e.g. jQuery",
icon: "search",
clearable: "",
"open-on-focus": ""
}, null, 8, ["modelValue"]),
s("p", null, [
i[1] || (i[1] = s("b", null, "Selected:", -1)),
f(" " + F(n.value), 1)
])
]),
_: 1
})
]);
};
}
}), Xf = `<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>
`, Zf = /* @__PURE__ */ I({
__name: "options",
setup(t) {
const e = [
{
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 = R();
return (a, i) => {
const r = g("o-autocomplete"), l = g("o-field");
return T(), N("section", null, [
o(l, { label: "Options List" }, {
default: d(() => [
o(r, {
modelValue: n.value,
"onUpdate:modelValue": i[0] || (i[0] = (c) => n.value = c),
options: e,
placeholder: "Find a name...",
"open-on-focus": ""
}, null, 8, ["modelValue"]),
s("p", null, [
i[1] || (i[1] = s("b", null, "Selected:", -1)),
f(" " + F(n.value), 1)
])
]),
_: 1
})
]);
};
}
}), Jf = `<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>
`, jf = /* @__PURE__ */ I({
__name: "options-grouped",
setup(t) {
const e = [
{
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 = R();
return (a, i) => {
const r = g("o-autocomplete"), l = g("o-field");
return T(), N("section", null, [
o(l, { label: "Grouped Options" }, {
default: d(() => [
o(r, {
modelValue: n.value,
"onUpdate:modelValue": i[0] || (i[0] = (c) => n.value = c),
options: e,
placeholder: "Find a name grouped by film...",
"open-on-focus": ""
}, {
header: d(() => [...i[1] || (i[1] = [
f("Film Character Groups", -1)
])]),
_: 1
}, 8, ["modelValue"]),
s("p", null, [
i[2] || (i[2] = s("b", null, "Selected:", -1)),
f(" " + F(n.value), 1)
])
]),
_: 1
})
]);
};
}
}), e_ = `<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>
`, P = (t, e) => {
const n = t.__vccOpts || t;
for (const [a, i] of e)
n[a] = i;
return n;
}, n_ = {}, t_ = { class: "odocs-spaced" };
function a_(t, e) {
const n = g("o-autocomplete"), a = g("o-field");
return T(), N("section", t_, [
o(a, { label: "Find a name" }, {
default: d(() => [
o(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: d(() => [...e[0] || (e[0] = [
f(" No results found ", -1)
])]),
header: d(() => [...e[1] || (e[1] = [
f(" Header ", -1)
])]),
footer: d(() => [...e[2] || (e[2] = [
f(" Footer ", -1)
])]),
_: 1
})
]),
_: 1
})
]);
}
const o_ = /* @__PURE__ */ P(n_, [["render", a_]]), i_ = `<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>
`, r_ = { class: "odocs-spaced" }, l_ = /* @__PURE__ */ I({
__name: "selection",
setup(t) {
const e = R(!1), n = R(!0), a = R(!0), i = R(!1), r = R(!1), l = [
"Angular",
"Angular 2",
"Aurelia",
"Backbone",
"Ember",
"jQuery",
"Meteor",
"Node.js",
"Polymer",
"React",
"RxJS",
"Vue.js"
], c = R();
function u() {
c.value = l[0];
}
return (m, p) => {
const _ = g("o-switch"), b = g("o-button"), E = g("o-field"), S = g("o-autocomplete");
return T(), N("section", r_, [
o(E, {
grouped: "",
multiline: ""
}, {
default: d(() => [
o(_, {
modelValue: e.value,
"onUpdate:modelValue": p[0] || (p[0] = (C) => e.value = C)
}, {
default: d(() => [...p[6] || (p[6] = [
f("Keep first", -1)
])]),
_: 1
}, 8, ["modelValue"]),
o(_, {
modelValue: n.value,
"onUpdate:modelValue": p[1] || (p[1] = (C) => n.value = C)
}, {
default: d(() => [...p[7] || (p[7] = [
f("Keep open", -1)
])]),
_: 1
}, 8, ["modelValue"]),
o(_, {
modelValue: a.value,
"onUpdate:modelValue": p[2] || (p[2] = (C) => a.value = C)
}, {
default: d(() => [...p[8] || (p[8] = [
f("Open on focus", -1)
])]),
_: 1
}, 8, ["modelValue"]),
o(_, {
modelValue: i.value,
"onUpdate:modelValue": p[3] || (p[3] = (C) => i.value = C)
}, {
default: d(() => [...p[9] || (p[9] = [
f("Select on close", -1)
])]),
_: 1
}, 8, ["modelValue"]),
o(_, {
modelValue: r.value,
"onUpdate:modelValue": p[4] || (p[4] = (C) => r.value = C)
}, {
default: d(() => [...p[10] || (p[10] = [
f("Clear on Select", -1)
])]),
_: 1
}, 8, ["modelValue"]),
o(b, { onClick: u }, {
default: d(() => [
f(" Set '" + F(l[0]) + "' selected ", 1)
]),
_: 1
})
]),
_: 1
}),
o(E, { label: "Find a name" }, {
default: d(() => [
o(S, {
modelValue: c.value,
"onUpdate:modelValue": p[5] || (p[5] = (C) => c.value = C),
options: l,
placeholder: "e.g. Vue",
icon: "search",
"keep-first": e.value,
"open-on-focus": a.value,
"keep-open": n.value,
"clear-on-select": r.value,
"select-on-close": i.value
}, {
empty: d(() => [...p[11] || (p[11] = [
f(" No results found ", -1)
])]),
_: 1
}, 8, ["modelValue", "keep-first", "open-on-focus", "keep-open", "clear-on-select", "select-on-close"]),
s("p", null, [
p[12] || (p[12] = s("b", null, "Selected:", -1)),
f(" " + F(c.value), 1)
])
]),
_: 1
})
]);
};
}
}), s_ = `<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>
`, c_ = { class: "odocs-spaced" }, u_ = { class: "media" }, d_ = { class: "media-left" }, m_ = ["src"], p_ = { class: "media-content" }, f_ = /* @__PURE__ */ I({
__name: "scroll",
setup(t) {
const e = R(!1), n = R(1), a = R(1), i = R([]), r = R(), l = R("");
async function c(m) {
if (l.value !== m && (l.value = m, i.value = [], n.value = 1, a.value = 1), !m.length) {
i.value = [], n.value = 1, a.value = 1;
return;
}
if (!(n.value > a.value)) {
e.value = !0;
try {
const p = await fetch(
`https://api.themoviedb.org/3/search/movie?api_key=bb6f51bef07465653c3e553d6ab161a8&query=${m}&page=${n.value}`
).then((b) => b.json()), _ = p.results.map((b) => ({
value: b,
label: b.title
}));
i.value = [...i.value, ..._], n.value += 1, a.value = p.total_pages;
} catch (p) {
console.error(p);
} finally {
e.value = !1;
}
}
}
function u() {
c(l.value);
}
return (m, p) => {
const _ = g("o-autocomplete"), b = g("o-field");
return T(), N("section", c_, [
o(b, { label: 'Find a movie in the "The Movie Database (TMDB)"' }, {
default: d(() => [
o(_, {
modelValue: r.value,
"onUpdate:modelValue": p[0] || (p[0] = (E) => r.value = E),
options: i.value,
placeholder: "e.g. Fight Club",
expanded: "",
"check-scroll": "",
"backend-filtering": "",
debounce: 500,
onInput: c,
onScrollEnd: u
}, fr({
default: d(({ value: E }) => [
s("div", u_, [
s("div", d_, [
s("img", {
width: "32",
src: `https://image.tmdb.org/t/p/w500/${E.poster_path}`
}, null, 8, m_)
]),
s("div", p_, [
f(F(E.title) + " ", 1),
p[1] || (p[1] = s("br", null, null, -1)),
s("small", null, [
f(" Released at " + F(E.release_date) + ", rated ", 1),
s("b", null, F(E.vote_average), 1)
])
])
])
]),
_: 2
}, [
n.value > a.value || !i.value.length ? {
name: "footer",
fn: d(() => [
p[2] || (p[2] = s("span", { class: "ex-text-grey" }, " Thats it! No more movies found. ", -1))
]),
key: "0"
} : void 0
]), 1032, ["modelValue", "options"]),
s("p", null, [
p[3] || (p[3] = s("b", null, "Selected:", -1)),
f(" " + F(r.value?.title), 1)
])
]),
_: 1
})
]);
};
}
}), __ = /* @__PURE__ */ P(f_, [["__scopeId", "data-v-9fe9a881"]]), g_ = `<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>
`, b_ = /* @__PURE__ */ I({
__name: "index",
setup(t) {
return (e, n) => {
const a = g("ExampleViewer");
return T(), N(Z, null, [
n[0] || (n[0] = s("h3", { id: "base" }, "Base", -1)),
o(a, {
component: Qf,
code: O(Xf)
}, null, 8, ["code"]),
n[1] || (n[1] = s("h3", { id: "selection" }, "Selection", -1)),
n[2] || (n[2] = s("p", null, [
f(" The autocomplete input can only contain one item at a time. For the multiple selection version, see the "),
s("a", { href: "/components/taginput.html" }, [
s("b", null, "Taginput")
]),
f(" component. ")
], -1)),
o(a, {
component: l_,
code: O(s_)
}, null, 8, ["code"]),
n[3] || (n[3] = Fe('<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)),
o(a, {
component: Zf,
code: O(Jf)
}, null, 8, ["code"]),
o(a, {
component: jf,
code: O(e_)
}, null, 8, ["code"]),
n[4] || (n[4] = s("h3", { id: "slots" }, "Slots", -1)),
n[5] || (n[5] = s("p", null, [
f(" A header and a footer can be added to the options list by using the "),
s("code", null, "header"),
f(" and "),
s("code", null, "footer"),
f(" slots. The header and footer can be made clickable by adding the "),
s("code", null, "selectable-header"),
f(" and "),
s("code", null, "selectable-footer"),
f(" props. Clicking them will clear the input. ")
], -1)),
o(a, {
component: o_,
code: O(i_)
}, null, 8, ["code"]),
n[6] || (n[6] = Fe('<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)),
o(a, {
component: __,
code: O(g_)
}, null, 8, ["code"])
], 64);
};
}
}), S_ = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: b_
}, Symbol.toStringTag, { value: "Module" })), E_ = {};
function v_(t, e) {
const n = g("o-breadcrumb-item"), a = g("o-breadcrumb");
return T(), N("section", null, [
o(a, null, {
default: d(() => [
o(n, { disabled: "" }, {
default: d(() => [...e[0] || (e[0] = [
f(" Home ", -1)
])]),
_: 1
}),
o(n, { href: "/" }, {
default: d(() => [...e[1] || (e[1] = [
f(" Docs ", -1)
])]),
_: 1
}),
o(n, {
href: "/components/Breadcrumb.html",
active: ""
}, {
default: d(() => [...e[2] || (e[2] = [
f(" Breadcrumb ", -1)
])]),
_: 1
})
]),
_: 1
})
]);
}
const h_ = /* @__PURE__ */ P(E_, [["render", v_]]), C_ = `<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>
`, T_ = {};
function N_(t, e) {
const n = g("o-breadcrumb");
return T(), N("section", null, [
o(n, { options: [
{
label: "Home",
attrs: { href: "/", disabled: !0 }
},
{
label: "Docs"
},
{
label: "Breadcrumb",
attrs: { active: !0 }
}
] })
]);
}
const y_ = /* @__PURE__ */ P(T_, [["render", N_]]), R_ = `<template>
<section>
<o-breadcrumb
:options="[
{
label: 'Home',
attrs: { href: '/', disabled: true },
},
{
label: 'Docs',
},
{
label: 'Breadcrumb',
attrs: { active: true },
},
]" />
</section>
</template>
`, M_ = {};
function A_(t, e) {
const n = g("o-breadcrumb-item"), a = g("o-breadcrumb");
return T(), N("section", null, [
o(a, { separator: "/" }, {
default: d(() => [
o(n, { label: "Home" }),
o(n, {
label: "Docs",
disabled: ""
}),
o(n, {
label: "Breadcrumb",
active: ""
})
]),
_: 1
}),
o(a, { separator: "•" }, {
default: d(() => [
o(n, { label: "Home" }),
o(n, {
label: "Docs",
disabled: ""
}),
o(n, {
label: "Breadcrumb",
active: ""
})
]),
_: 1
}),
o(a, { separator: "≻" }, {
default: d(() => [
o(n, { label: "Home" }),
o(n, {
label: "Docs",
disabled: ""
}),
o(n, {
label: "Breadcrumb",
active: ""
})
]),
_: 1
}),
o(a, { separator: "→" }, {
default: d(() => [
o(n, { label: "Home" }),
o(n, {
label: "Docs",
disabled: ""
}),
o(n, {
label: "Breadcrumb",
active: ""
})
]),
_: 1
})
]);
}
const O_ = /* @__PURE__ */ P(M_, [["render", A_]]), L_ = `<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>
`, x_ = /* @__PURE__ */ I({
__name: "icons",
setup(t) {
const e = R(""), n = R("");
return (a, i) => {
const r = g("o-select"), l = g("o-field"), c = g("o-breadcrumb-item"), u = g("o-breadcrumb");
return T(), N("section", null, [
o(l, { grouped: "" }, {
default: d(() => [
o(l, { label: "Icon Size" }, {
default: d(() => [
o(r, {
modelValue: e.value,
"onUpdate:modelValue": i[0] || (i[0] = (m) => e.value = m)
}, {
default: d(() => [...i[2] || (i[2] = [
s("option", { value: "small" }, "Small", -1),
s("option", { value: "" }, "Default", -1),
s("option", { value: "medium" }, "Medium", -1),
s("option", { value: "large" }, "Large", -1)
])]),
_: 1
}, 8, ["modelValue"])
]),
_: 1
}),
o(l, { label: "Text Size" }, {
default: d(() => [
o(r, {
modelValue: n.value,
"onUpdate:modelValue": i[1] || (i[1] = (m) => n.value = m)
}, {
default: d(() => [...i[3] || (i[3] = [
s("option", { value: "small" }, "Small", -1),
s("option", { value: "" }, "Default", -1),
s("option", { value: "medium" }, "Medium", -1),
s("option", { value: "large" }, "Large", -1)
])]),
_: 1
}, 8, ["modelValue"])
]),
_: 1
})
]),
_: 1
}),
o(u, { size: n.value }, {
default: d(() => [
o(c, {
label: "Home",
"icon-left": "home",
"icon-size": e.value
}, null, 8, ["icon-size"]),
o(c, {
label: "Docs",
"icon-left": "plus",
"icon-size": e.value
}, null, 8, ["icon-size"]),
o(c, {
label: "Breadcrumb",
"icon-left": "location",
"icon-size": e.value,
active: ""
}, null, 8, ["icon-size"])
]),
_: 1
}, 8, ["size"]),
o(u, { size: n.value }, {
default: d(() => [
o(c, {
label: "Home",
"icon-right": "home",
"icon-size": e.value
}, null, 8, ["icon-size"]),
o(c, {
label: "Docs",
"icon-right": "plus",
"icon-size": e.value
}, null, 8, ["icon-size"]),
o(c, {
label: "Breadcrumb",
"icon-right": "location",
"icon-size": e.value,
active: ""
}, null, 8, ["icon-size"])
]),
_: 1
}, 8, ["size"])
]);
};
}
}), I_ = `<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>
`, D_ = {};
function w_(t, e) {
const n = g("o-breadcrumb-item"), a = g("o-breadcrumb");
return T(), N("section", null, [
o(a, { size: "small" }, {
default: d(() => [
o(n, {
label: "Home",
href: "/"
}),
o(n, {
label: "Docs",
disabled: ""
}),
o(n, {
label: "Breadcrumb",
active: ""
})
]),
_: 1
}),
o(a, null, {
default: d(() => [
o(n, {
label: "Home",
href: "/"
}),
o(n, {
label: "Docs",
disabled: ""
}),
o(n, {
label: "Breadcrumb",
active: ""
})
]),
_: 1
}),
o(a, { size: "medium" }, {
default: d(() => [
o(n, {
label: "Home",
href: "/"
}),
o(n, {
label: "Docs",
disabled: ""
}),
o(n, {
label: "Breadcrumb",
active: ""
})
]),
_: 1
}),
o(a, { size: "large" }, {
default: d(() => [
o(n, {
label: "Home",
href: "/"
}),
o(n, {
label: "Docs",
disabled: ""
}),
o(n, {
label: "Breadcrumb",
active: ""
})
]),
_: 1
})
]);
}
const k_ = /* @__PURE__ */ P(D_, [["render", w_]]), z_ = `<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>
`, P_ = {};
function F_(t, e) {
const n = g("o-breadcrumb-item"), a = g("o-breadcrumb");
return T(), N("section", null, [
o(a, { variant: "primary" }, {
default: d(() => [
o(n, {
label: "Home",
disabled: ""
}),
o(n, {
label: "Docs",
href: "/"
}),
o(n, {
label: "Breadcrumb",
active: ""
})
]),
_: 1
}),
o(a, { variant: "secondary" }, {
default: d(() => [
o(n, {
label: "Home",
disabled: ""
}),
o(n, {
label: "Docs",
href: "/"
}),
o(n, {
label: "Breadcrumb",
active: ""
})
]),
_: 1
}),
o(a, { variant: "success" }, {
default: d(() => [
o(n, {
label: "Home",
disabled: ""
}),
o(n, {
label: "Docs",
href: "/"
}),
o(n, {
label: "Breadcrumb",
active: ""
})
]),
_: 1
}),
o(a, { variant: "info" }, {
default: d(() => [
o(n, {
label: "Home",
disabled: ""
}),
o(n, {
label: "Docs",
href: "/"
}),
o(n, {
label: "Breadcrumb",
active: ""
})
]),
_: 1
}),
o(a, { variant: "warning" }, {
default: d(() => [
o(n, {
label: "Home",
disabled: ""
}),
o(n, {
label: "Docs",
href: "/"
}),
o(n, {
label: "Breadcrumb",
active: ""
})
]),
_: 1
}),
o(a, { variant: "danger" }, {
default: d(() => [
o(n, {
label: "Home",
disabled: ""
}),
o(n, {
label: "Docs",
href: "/"
}),
o(n, {
label: "Breadcrumb",
active: ""
})
]),
_: 1
})
]);
}
const U_ = /* @__PURE__ */ P(P_, [["render", F_]]), B_ = `<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>
`, G_ = {};
function V_(t, e) {
const n = g("o-breadcrumb-item"), a = g("o-breadcrumb");
return T(), N("section", null, [
o(a, { position: "left" }, {
default: d(() => [
o(n, {
label: "Home",
disabled: ""
}),
o(n, { label: "Docs" }),