@oruga-ui/examples
Version:
Oruga component examples
1,749 lines (1,700 loc) • 3.4 MB
JavaScript
import { defineComponent as w, ref as R, resolveComponent as g, createElementBlock as y, openBlock as L, createVNode as o, withCtx as d, createElementVNode as c, createTextVNode as _, toDisplayString as B, createSlots as sl, Fragment as Z, createStaticVNode as an, unref as O, reactive as n_, renderList as Ye, normalizeStyle as m4, createBlock as on, createCommentVNode as Ve, computed as ze, onBeforeMount as t_, onBeforeUnmount as a_, useTemplateRef as p4, withModifiers as je, h as pn, onMounted as d1, normalizeClass as n1, withDirectives as zn, vShow as Xt, mergeProps as o_, watch as i_, renderSlot as l_, nextTick as r_, resolveDynamicComponent as s_, vModelRadio as H1, markRaw as c_ } from "vue";
import { useOruga as hn } from "@oruga-ui/oruga-next";
const u_ = { class: "odocs-spaced" }, d_ = /* @__PURE__ */ w({
__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 l = g("o-autocomplete"), r = g("o-field");
return L(), y("section", u_, [
o(r, { label: "Find a JS framework" }, {
default: d(() => [
o(l, {
modelValue: n.value,
"onUpdate:modelValue": i[0] || (i[0] = (s) => n.value = s),
options: e,
rounded: "",
expanded: "",
placeholder: "e.g. jQuery",
icon: "search",
clearable: "",
"open-on-focus": ""
}, null, 8, ["modelValue"]),
c("p", null, [
i[1] || (i[1] = c("b", null, "Selected:", -1)),
_(" " + B(n.value), 1)
])
]),
_: 1
})
]);
};
}
}), m_ = `<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>
`, p_ = /* @__PURE__ */ w({
__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 l = g("o-autocomplete"), r = g("o-field");
return L(), y("section", null, [
o(r, { label: "Options List" }, {
default: d(() => [
o(l, {
modelValue: n.value,
"onUpdate:modelValue": i[0] || (i[0] = (s) => n.value = s),
options: e,
placeholder: "Find a name...",
"open-on-focus": ""
}, null, 8, ["modelValue"]),
c("p", null, [
i[1] || (i[1] = c("b", null, "Selected:", -1)),
_(" " + B(n.value), 1)
])
]),
_: 1
})
]);
};
}
}), __ = `<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>
`, f_ = /* @__PURE__ */ w({
__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 l = g("o-autocomplete"), r = g("o-field");
return L(), y("section", null, [
o(r, { label: "Grouped Options" }, {
default: d(() => [
o(l, {
modelValue: n.value,
"onUpdate:modelValue": i[0] || (i[0] = (s) => n.value = s),
options: e,
placeholder: "Find a name grouped by film...",
"open-on-focus": ""
}, {
header: d(() => i[1] || (i[1] = [
_("Film Character Groups")
])),
_: 1
}, 8, ["modelValue"]),
c("p", null, [
i[2] || (i[2] = c("b", null, "Selected:", -1)),
_(" " + B(n.value), 1)
])
]),
_: 1
})
]);
};
}
}), g_ = `<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>
`, F = (t, e) => {
const n = t.__vccOpts || t;
for (const [a, i] of e)
n[a] = i;
return n;
}, b_ = {}, E_ = { class: "odocs-spaced" };
function S_(t, e) {
const n = g("o-autocomplete"), a = g("o-field");
return L(), y("section", E_, [
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] = [
_(" No results found ")
])),
header: d(() => e[1] || (e[1] = [
_(" Header ")
])),
footer: d(() => e[2] || (e[2] = [
_(" Footer ")
])),
_: 1
})
]),
_: 1
})
]);
}
const C_ = /* @__PURE__ */ F(b_, [["render", S_]]), v_ = `<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>
`, h_ = { class: "odocs-spaced" }, T_ = /* @__PURE__ */ w({
__name: "selection",
setup(t) {
const e = R(!1), n = R(!0), a = R(!0), i = R(!1), l = R(!1), r = [
"Angular",
"Angular 2",
"Aurelia",
"Backbone",
"Ember",
"jQuery",
"Meteor",
"Node.js",
"Polymer",
"React",
"RxJS",
"Vue.js"
], s = R();
function u() {
s.value = r[0];
}
return (m, p) => {
const f = g("o-switch"), b = g("o-button"), E = g("o-field"), S = g("o-autocomplete");
return L(), y("section", h_, [
o(E, {
grouped: "",
multiline: ""
}, {
default: d(() => [
o(f, {
modelValue: e.value,
"onUpdate:modelValue": p[0] || (p[0] = (h) => e.value = h)
}, {
default: d(() => p[6] || (p[6] = [
_("Keep first")
])),
_: 1,
__: [6]
}, 8, ["modelValue"]),
o(f, {
modelValue: n.value,
"onUpdate:modelValue": p[1] || (p[1] = (h) => n.value = h)
}, {
default: d(() => p[7] || (p[7] = [
_("Keep open")
])),
_: 1,
__: [7]
}, 8, ["modelValue"]),
o(f, {
modelValue: a.value,
"onUpdate:modelValue": p[2] || (p[2] = (h) => a.value = h)
}, {
default: d(() => p[8] || (p[8] = [
_("Open on focus")
])),
_: 1,
__: [8]
}, 8, ["modelValue"]),
o(f, {
modelValue: i.value,
"onUpdate:modelValue": p[3] || (p[3] = (h) => i.value = h)
}, {
default: d(() => p[9] || (p[9] = [
_("Select on close")
])),
_: 1,
__: [9]
}, 8, ["modelValue"]),
o(f, {
modelValue: l.value,
"onUpdate:modelValue": p[4] || (p[4] = (h) => l.value = h)
}, {
default: d(() => p[10] || (p[10] = [
_("Clear on Select")
])),
_: 1,
__: [10]
}, 8, ["modelValue"]),
o(b, { onClick: u }, {
default: d(() => [
_(" Set '" + B(r[0]) + "' selected ", 1)
]),
_: 1
})
]),
_: 1
}),
o(E, { label: "Find a name" }, {
default: d(() => [
o(S, {
modelValue: s.value,
"onUpdate:modelValue": p[5] || (p[5] = (h) => s.value = h),
options: r,
placeholder: "e.g. Vue",
icon: "search",
"keep-first": e.value,
"open-on-focus": a.value,
"keep-open": n.value,
"clear-on-select": l.value,
"select-on-close": i.value
}, {
empty: d(() => p[11] || (p[11] = [
_(" No results found ")
])),
_: 1
}, 8, ["modelValue", "keep-first", "open-on-focus", "keep-open", "clear-on-select", "select-on-close"]),
c("p", null, [
p[12] || (p[12] = c("b", null, "Selected:", -1)),
_(" " + B(s.value), 1)
])
]),
_: 1
})
]);
};
}
}), N_ = `<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>
`, L_ = { class: "odocs-spaced" }, y_ = { class: "media" }, R_ = { class: "media-left" }, M_ = ["src"], A_ = { class: "media-content" }, O_ = /* @__PURE__ */ w({
__name: "scroll",
setup(t) {
const e = R(!1), n = R(1), a = R(1), i = R([]), l = R(), r = R("");
async function s(m) {
if (r.value !== m && (r.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()), f = p.results.map((b) => ({
value: b,
label: b.title
}));
i.value = [...i.value, ...f], n.value += 1, a.value = p.total_pages;
} catch (p) {
console.error(p);
} finally {
e.value = !1;
}
}
}
function u() {
s(r.value);
}
return (m, p) => {
const f = g("o-autocomplete"), b = g("o-field");
return L(), y("section", L_, [
o(b, { label: 'Find a movie in the "The Movie Database (TMDB)"' }, {
default: d(() => [
o(f, {
modelValue: l.value,
"onUpdate:modelValue": p[0] || (p[0] = (E) => l.value = E),
options: i.value,
placeholder: "e.g. Fight Club",
expanded: "",
"check-scroll": "",
"backend-filtering": "",
debounce: 500,
onInput: s,
onScrollEnd: u
}, sl({
default: d(({ value: E }) => [
c("div", y_, [
c("div", R_, [
c("img", {
width: "32",
src: `https://image.tmdb.org/t/p/w500/${E.poster_path}`
}, null, 8, M_)
]),
c("div", A_, [
_(B(E.title) + " ", 1),
p[1] || (p[1] = c("br", null, null, -1)),
c("small", null, [
_(" Released at " + B(E.release_date) + ", rated ", 1),
c("b", null, B(E.vote_average), 1)
])
])
])
]),
_: 2
}, [
n.value > a.value || !i.value.length ? {
name: "footer",
fn: d(() => [
p[2] || (p[2] = c("span", { class: "ex-text-grey" }, " Thats it! No more movies found. ", -1))
]),
key: "0"
} : void 0
]), 1032, ["modelValue", "options"]),
c("p", null, [
p[3] || (p[3] = c("b", null, "Selected:", -1)),
_(" " + B(l.value?.title), 1)
])
]),
_: 1
})
]);
};
}
}), x_ = /* @__PURE__ */ F(O_, [["__scopeId", "data-v-9fe9a881"]]), I_ = `<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>
`, D_ = /* @__PURE__ */ w({
__name: "index",
setup(t) {
return (e, n) => {
const a = g("ExampleViewer");
return L(), y(Z, null, [
n[0] || (n[0] = c("h3", { id: "base" }, "Base", -1)),
o(a, {
component: d_,
code: O(m_)
}, null, 8, ["code"]),
n[1] || (n[1] = c("h3", { id: "selection" }, "Selection", -1)),
n[2] || (n[2] = c("p", null, [
_(" The autocomplete input can only contain one item at a time. For the multiple selection version, see the "),
c("a", { href: "/components/taginput.html" }, [
c("b", null, "Taginput")
]),
_(" component. ")
], -1)),
o(a, {
component: T_,
code: O(N_)
}, null, 8, ["code"]),
n[3] || (n[3] = an('<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: p_,
code: O(__)
}, null, 8, ["code"]),
o(a, {
component: f_,
code: O(g_)
}, null, 8, ["code"]),
n[4] || (n[4] = c("h3", { id: "scroll" }, "Slots", -1)),
n[5] || (n[5] = c("p", null, [
_(" A header and a footer can be added to the options list by using the "),
c("code", null, "header"),
_(" and "),
c("code", null, "footer"),
_(" slots. The header and footer can be made clickable by adding the "),
c("code", null, "selectable-header"),
_(" and "),
c("code", null, "selectable-footer"),
_(" props. Clicking them will clear the input. ")
], -1)),
o(a, {
component: C_,
code: O(v_)
}, null, 8, ["code"]),
n[6] || (n[6] = an('<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: x_,
code: O(I_)
}, null, 8, ["code"])
], 64);
};
}
}), w_ = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: D_
}, Symbol.toStringTag, { value: "Module" })), k_ = {};
function z_(t, e) {
const n = g("o-breadcrumb-item"), a = g("o-breadcrumb");
return L(), y("section", null, [
o(a, null, {
default: d(() => [
o(n, { disabled: "" }, {
default: d(() => e[0] || (e[0] = [
_(" Home ")
])),
_: 1,
__: [0]
}),
o(n, { href: "/" }, {
default: d(() => e[1] || (e[1] = [
_(" Docs ")
])),
_: 1,
__: [1]
}),
o(n, {
href: "/components/Breadcrumb.html",
active: ""
}, {
default: d(() => e[2] || (e[2] = [
_(" Breadcrumb ")
])),
_: 1,
__: [2]
})
]),
_: 1
})
]);
}
const P_ = /* @__PURE__ */ F(k_, [["render", z_]]), F_ = `<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>
`, U_ = {};
function B_(t, e) {
const n = g("o-breadcrumb");
return L(), y("section", null, [
o(n, { options: [
{
label: "Home",
attrs: { href: "/", disabled: !0 }
},
{
label: "Docs"
},
{
label: "Breadcrumb",
attrs: { active: !0 }
}
] })
]);
}
const G_ = /* @__PURE__ */ F(U_, [["render", B_]]), V_ = `<template>
<section>
<o-breadcrumb
:options="[
{
label: 'Home',
attrs: { href: '/', disabled: true },
},
{
label: 'Docs',
},
{
label: 'Breadcrumb',
attrs: { active: true },
},
]" />
</section>
</template>
`, Y_ = {};
function q_(t, e) {
const n = g("o-breadcrumb-item"), a = g("o-breadcrumb");
return L(), y("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 H_ = /* @__PURE__ */ F(Y_, [["render", q_]]), $_ = `<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>
`, W_ = /* @__PURE__ */ w({
__name: "icons",
setup(t) {
const e = R(""), n = R("");
return (a, i) => {
const l = g("o-select"), r = g("o-field"), s = g("o-breadcrumb-item"), u = g("o-breadcrumb");
return L(), y("section", null, [
o(r, { grouped: "" }, {
default: d(() => [
o(r, { label: "Icon Size" }, {
default: d(() => [
o(l, {
modelValue: e.value,
"onUpdate:modelValue": i[0] || (i[0] = (m) => e.value = m)
}, {
default: d(() => i[2] || (i[2] = [
c("option", { value: "small" }, "Small", -1),
c("option", { value: "" }, "Default", -1),
c("option", { value: "medium" }, "Medium", -1),
c("option", { value: "large" }, "Large", -1)
])),
_: 1,
__: [2]
}, 8, ["modelValue"])
]),
_: 1
}),
o(r, { label: "Text Size" }, {
default: d(() => [
o(l, {
modelValue: n.value,
"onUpdate:modelValue": i[1] || (i[1] = (m) => n.value = m)
}, {
default: d(() => i[3] || (i[3] = [
c("option", { value: "small" }, "Small", -1),
c("option", { value: "" }, "Default", -1),
c("option", { value: "medium" }, "Medium", -1),
c("option", { value: "large" }, "Large", -1)
])),
_: 1,
__: [3]
}, 8, ["modelValue"])
]),
_: 1
})
]),
_: 1
}),
o(u, { size: n.value }, {
default: d(() => [
o(s, {
label: "Home",
"icon-left": "home",
"icon-size": e.value
}, null, 8, ["icon-size"]),
o(s, {
label: "Docs",
"icon-left": "plus",
"icon-size": e.value
}, null, 8, ["icon-size"]),
o(s, {
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(s, {
label: "Home",
"icon-right": "home",
"icon-size": e.value
}, null, 8, ["icon-size"]),
o(s, {
label: "Docs",
"icon-right": "plus",
"icon-size": e.value
}, null, 8, ["icon-size"]),
o(s, {
label: "Breadcrumb",
"icon-right": "location",
"icon-size": e.value,
active: ""
}, null, 8, ["icon-size"])
]),
_: 1
}, 8, ["size"])
]);
};
}
}), K_ = `<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>
`, Q_ = {};
function X_(t, e) {
const n = g("o-breadcrumb-item"), a = g("o-breadcrumb");
return L(), y("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 Z_ = /* @__PURE__ */ F(Q_, [["render", X_]]), J_ = `<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>
`, j_ = {};
function e9(t, e) {
const n = g("o-breadcrumb-item"), a = g("o-breadcrumb");
return L(), y("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 n9 = /* @__PURE__ */ F(j_, [["render", e9]]), t9 = `<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>
`, a9 = {};
function o9(t, e) {
const n = g("o-breadcrumb-item"), a = g("o-breadcrumb");
return L(), y("section", null, [
o(a, { position: "left" }, {
default: d(() => [
o(n, {