@ownclouders/design-system
Version:
ownCloud Design System is based on VueDesign Systems and is used to design ownCloud UI components
1,821 lines (1,820 loc) • 191 kB
JavaScript
import { g as U, u as N, A as be, a as De, b as Go, r as Xo, s as Qo, h as ne, c as pe, E as Ie, d as Me, e as Pe, f as Be, i as Ae, j as Ve, k as Ee, l as Jo } from "./uniqueId-D3QDPpSy.mjs";
import { defineComponent as b, resolveComponent as f, createBlock as h, openBlock as s, resolveDynamicComponent as X, normalizeClass as O, withCtx as y, createVNode as C, normalizeStyle as oe, computed as M, unref as $, createElementBlock as c, toDisplayString as w, createElementVNode as m, createCommentVNode as g, resolveDirective as Y, withDirectives as z, Fragment as A, renderList as R, mergeProps as E, toHandlers as ce, renderSlot as T, useTemplateRef as Yo, ref as P, onMounted as Ft, onBeforeUnmount as Ht, watch as J, nextTick as te, withModifiers as Q, withKeys as de, vModelCheckbox as Zo, createTextVNode as K, useAttrs as xo, normalizeProps as j, guardReactiveProps as G, vShow as ie, Transition as es, createSlots as ts, vModelRadio as os, useSlots as ss, useCssVars as as, customRef as ns } from "vue";
import Nt from "vue-inline-svg";
import { useGettext as se } from "vue3-gettext";
import jt, { hideAll as rs } from "tippy.js";
import { detectOverflow as is } from "@popperjs/core";
import ls from "deepmerge";
import { isEqual as cs } from "lodash-es";
import { FocusTrap as Rt } from "focus-trap-vue";
import { DateTime as ze } from "luxon";
import ds from "fuse.js";
import { u as us } from "./index-B-hUyoop.mjs";
Nt.name = "inline-svg";
const Kt = b({
name: "OcIcon",
status: "ready",
release: "1.0.0",
components: {
InlineSvg: Nt
},
inheritAttrs: !0,
props: {
/**
* The name of the icon to display.
*/
name: {
type: String,
default: "info"
},
/**
* The fill type of the icon, fill or line
*/
fillType: {
type: String,
required: !1,
default: "fill",
validator: (e) => ["fill", "line", "none"].includes(e)
},
/**
* Descriptive text to be read to screenreaders.
*/
accessibleLabel: {
type: String,
default: ""
},
/**
* The html element name used for the icon.
*/
type: {
type: String,
default: "span"
},
/**
* The size of the icon. Defaults to small.
* `xsmall, small, medium, large, xlarge, xxlarge`
*/
size: {
type: String,
default: "medium",
validator: (e) => be.some((t) => t === e)
},
/**
* Style variation to give additional meaning.
* Defaults to `passive`.
* Can be `passive, primary, danger, success, warning, brand or inherit`.
* `inherit` will not set any color but instead rely on a container element already
* setting the icon fill.
*/
variation: {
type: String,
default: "passive",
validator: (e) => ["passive", "primary", "danger", "success", "warning", "brand", "inherit"].includes(
e
)
},
/**
* Overwrite the color of the icon.
*/
color: {
type: String,
required: !1,
default: ""
}
},
emits: ["loaded"],
computed: {
svgTitleId() {
return N("oc-icon-title-");
},
nameWithFillType() {
const e = "icons/", t = this.fillType.toLowerCase();
return t === "none" ? `${e}${this.name}.svg` : `${e}${this.name}-${t}.svg`;
}
},
methods: {
sizeClass(e) {
return this.prefix(U(e));
},
variationClass(e) {
return this.prefix(e);
},
prefix(e) {
if (e !== null)
return `oc-icon-${e}`;
},
transformSvgElement(e) {
if (this.accessibleLabel !== "") {
const t = document.createElement("title");
t.setAttribute("id", this.svgTitleId), t.appendChild(document.createTextNode(this.accessibleLabel)), e.insertBefore(t, e.firstChild);
}
return e;
}
}
}), Fe = {}, v = (e, t) => {
const o = e.__vccOpts || e;
for (const [a, i] of t)
o[a] = i;
return o;
};
function ps(e, t, o, a, i, n) {
const r = f("inline-svg");
return s(), h(X(e.type), {
class: O([
{ "oc-button-reset": e.type === "button" },
"oc-icon",
e.sizeClass(e.size),
e.variationClass(e.variation)
])
}, {
default: y(() => [
C(r, {
src: e.nameWithFillType,
"transform-source": e.transformSvgElement,
"aria-hidden": e.accessibleLabel === "" ? "true" : null,
"aria-labelledby": e.accessibleLabel === "" ? null : e.svgTitleId,
focusable: e.accessibleLabel === "" ? "false" : null,
style: oe(e.color !== "" ? { fill: e.color } : {}),
onLoaded: t[0] || (t[0] = (l) => e.$emit("loaded"))
}, null, 8, ["src", "transform-source", "aria-hidden", "aria-labelledby", "focusable", "style"])
]),
_: 1
}, 8, ["class"]);
}
typeof Fe == "function" && Fe(Kt);
const V = /* @__PURE__ */ v(Kt, [["render", ps]]), Ut = b({
name: "OcApplicationIcon",
components: { OcIcon: V },
status: "ready",
release: "15.0.0",
props: {
icon: {
type: String,
required: !0
},
colorPrimary: {
type: String,
required: !1,
default: ""
},
colorSecondary: {
type: String,
required: !1,
default: ""
}
},
setup(e) {
const t = M(() => "rgba(255,255,255,0.7)"), o = (d, D) => `linear-gradient(90deg, ${d} 0%, ${D} 100%)`, a = M(() => De(e.colorPrimary)), i = M(() => De(e.colorSecondary)), n = M(() => !!e.colorPrimary), r = M(() => !!e.colorSecondary), l = M(() => {
const d = Go(e.icon);
return Xo(Qo(ne(d), ne("#ffffff"), 4));
}), p = M(() => {
const d = $(n) ? $(a) : $(l), D = $(r) ? $(i) : pe(ne(d), 40), k = pe(ne(d), -25), I = pe(ne(d), 45);
return {
background: o(d, D),
boxShadow: `inset ${I} 0px 0px 1px 0px,${k} 0px 0px 1px 0px`
};
});
return {
iconColor: t,
iconStyle: p
};
}
}), He = {};
function fs(e, t, o, a, i, n) {
const r = f("oc-icon");
return s(), c("div", {
class: "oc-application-icon oc-flex-inline oc-flex-middle oc-flex-center",
style: oe(e.iconStyle)
}, [
C(r, {
name: e.icon,
color: e.iconColor,
size: "medium"
}, null, 8, ["name", "color"])
], 4);
}
typeof He == "function" && He(Ut);
const hs = /* @__PURE__ */ v(Ut, [["render", fs]]), Wt = b({
name: "OcImg",
status: "ready",
release: "1.0.0",
props: {
/**
* Image source, path to image
*
**/
src: {
required: !0,
type: String,
default: null
},
/**
* The alt-attribute of the image.
*/
alt: {
type: String,
required: !1,
default: ""
},
/**
* The title of the image. Displayed when hover.
*/
title: {
type: String,
required: !1,
default: null
},
/**
* Defines whether the image gets loaded immediately or once it comes near the user's viewport
*/
loadingType: {
type: String,
required: !1,
default: "eager",
validator: (e) => ["eager", "lazy"].includes(e)
}
},
computed: {
ariaHidden() {
return this.alt.length === 0;
}
}
}), Ne = {}, ms = ["src", "alt", "aria-hidden", "title", "loading"];
function gs(e, t, o, a, i, n) {
return s(), c("img", {
src: e.src,
alt: e.alt,
"aria-hidden": `${e.ariaHidden}`,
title: e.title,
loading: e.loadingType
}, null, 8, ms);
}
typeof Ne == "function" && Ne(Wt);
const $e = /* @__PURE__ */ v(Wt, [["render", gs]]), ys = (e) => e.split(/[ -]/).map((t) => t.replace(/[^\p{L}\p{Nd}]/giu, "")).filter(Boolean).map((t) => t.charAt(0)).slice(0, 3).join("").toUpperCase(), Gt = b({
name: "OcAvatar",
status: "ready",
release: "1.0.0",
components: { OcImg: $e },
props: {
/**
* Source of the avatar img. If none is provided, the avatar's initials get rendered on a colorful background
*/
src: {
type: String,
default: ""
},
/**
* User name to display initials if src is not set
*/
userName: {
type: String,
default: ""
},
/**
* Accessibility label used as alt. Use only in case the avatar is used alone.
* In case the avatar is used next to username or display name leave empty.
* If not specified, avatar will get `aria-hidden="true"`.
**/
accessibleLabel: {
type: String,
required: !1,
default: ""
},
/**
* The size of the avatar in pixels
*/
width: {
type: Number,
required: !1,
default: 50
}
},
data() {
return {
backgroundColors: [
"#b82015",
"#c21c53",
"#9C27B0",
"#673AB7",
"#3F51B5",
"#106892",
"#055c68",
"#208377",
"#1a761d",
"#476e1a",
"#636d0b",
"#8e5c11",
"#795548",
"#465a64"
],
imgError: !1
};
},
computed: {
background() {
return this.isImage ? "" : this.randomBackgroundColor(this.userName.length, this.backgroundColors);
},
isImage() {
return !this.imgError && !!this.src;
},
style() {
const e = {
width: `${this.width}px`,
height: `${this.width}px`,
lineHeight: `${this.width}px`
}, t = {
backgroundColor: this.background,
fontSize: `${Math.floor(this.width / 2.5)}px`,
fontFamily: "Helvetica, Arial, sans-serif",
color: "white"
};
return Object.assign(e, t), e;
},
userInitial() {
return this.isImage ? "" : ys(this.userName);
}
},
methods: {
onImgError() {
this.imgError = !0;
},
randomBackgroundColor(e, t) {
return t[e % t.length];
}
}
}), je = {}, bs = ["width", "aria-label", "aria-hidden", "focusable", "role", "data-test-user-name"], $s = {
key: 1,
class: "avatarInitials"
};
function vs(e, t, o, a, i, n) {
const r = f("oc-img");
return s(), c("span", {
class: "vue-avatar--wrapper oc-avatar",
style: oe(e.style),
width: e.width,
"aria-label": e.accessibleLabel === "" ? null : e.accessibleLabel,
"aria-hidden": e.accessibleLabel === "" ? "true" : null,
focusable: e.accessibleLabel === "" ? "false" : null,
role: e.accessibleLabel === "" ? null : "img",
"data-test-user-name": e.userName
}, [
e.isImage ? (s(), h(r, {
key: 0,
"loading-type": "lazy",
class: "avatarImg",
src: e.src,
onError: e.onImgError
}, null, 8, ["src", "onError"])) : (s(), c("span", $s, w(e.userInitial), 1))
], 12, bs);
}
typeof je == "function" && je(Gt);
const ve = /* @__PURE__ */ v(Gt, [["render", vs]]), Xt = b({
name: "OcAvatarCount",
status: "ready",
release: "2.1.0",
props: {
/**
* Count of avatars
*/
count: {
type: Number,
required: !0
},
/**
* Width and height of the element in pixels
*/
size: {
type: Number,
required: !1,
default: 30
}
},
computed: {
fontSize() {
return Math.floor(this.size / 2.5) + "px";
}
}
}), Re = {}, ws = ["textContent"];
function ks(e, t, o, a, i, n) {
return s(), c("span", {
class: "oc-avatar-count",
style: oe({ width: e.size + "px", height: e.size + "px", fontSize: e.fontSize }),
textContent: w(`+${e.count}`)
}, null, 12, ws);
}
typeof Re == "function" && Re(Xt);
const Qt = /* @__PURE__ */ v(Xt, [["render", ks]]), Jt = b({
name: "OcAvatarItem",
status: "ready",
release: "10.0.0",
components: {
OcIcon: V
},
props: {
/**
* Name of the public link used as an accessible label
*/
name: {
type: String,
required: !0
},
/**
* Icon that should be used for the avatar
*/
icon: {
type: String,
required: !1,
default: null
},
/**
* Color that should be used for the icon
*/
iconColor: {
type: String,
required: !1,
default: "var(--oc-color-text-inverse)"
},
/**
* Fill-type that should be used for the icon
*/
iconFillType: {
type: String,
required: !1,
default: "fill"
},
/**
* Describes the size of the avatar icon e.g.(small)
*/
iconSize: {
type: String,
required: !1,
default: "small"
},
/**
* Background color that should be used for the avatar. If empty
* a random color will be picked
*/
background: {
type: String,
required: !1,
default: "var(--oc-color-swatch-passive-default)"
},
/**
* Accessibility label used as alt. Use only in case the avatar is used alone.
* In case the avatar is used next to username or display name leave empty.
* If not specified, avatar will get `aria-hidden="true"`.
**/
accessibleLabel: {
type: String,
required: !1,
default: ""
},
/**
* Describes the width of the avatar
*/
width: {
type: Number,
required: !1,
default: 30
}
},
computed: {
avatarWidth() {
return this.width + "px";
},
hasIcon() {
return this.icon !== null;
},
backgroundColor() {
return this.background || this.pickBackgroundColor;
},
pickBackgroundColor() {
const e = [
"#b82015",
"#c21c53",
"#9C27B0",
"#673AB7",
"#3F51B5",
"#106892",
"#055c68",
"#208377",
"#1a761d",
"#476e1a",
"#636d0b",
"#8e5c11",
"#795548",
"#465a64"
];
return e[Math.floor(Math.random() * e.length)];
}
}
}), Ke = {}, Ss = ["data-test-item-name", "aria-label", "aria-hidden", "focusable", "role"];
function Cs(e, t, o, a, i, n) {
const r = f("oc-icon");
return s(), c("div", {
"data-test-item-name": e.name,
"aria-label": e.accessibleLabel === "" ? null : e.accessibleLabel,
"aria-hidden": e.accessibleLabel === "" ? "true" : null,
focusable: e.accessibleLabel === "" ? "false" : null,
role: e.accessibleLabel === "" ? null : "img"
}, [
m("span", {
class: "oc-avatar-item",
style: oe({
backgroundColor: e.backgroundColor,
"--icon-color": e.iconColor,
"--width": e.avatarWidth
})
}, [
e.hasIcon ? (s(), h(r, {
key: 0,
name: e.icon,
size: e.iconSize,
"fill-type": e.iconFillType
}, null, 8, ["name", "size", "fill-type"])) : g("", !0)
], 4)
], 8, Ss);
}
typeof Ke == "function" && Ke(Jt);
const re = /* @__PURE__ */ v(Jt, [["render", Cs]]), Yt = b({
name: "OcAvatarFederated",
status: "ready",
release: "10.0.0",
components: { OcAvatarItem: re },
props: {
/**
* Name of the federated share used as an accessible label
*/
name: {
type: String,
required: !0
},
/**
* Accessibility label used as alt. Use only in case the avatar is used alone.
* In case the avatar is used next to username or display name leave empty.
* If not specified, avatar will get `aria-hidden="true"`.
**/
accessibleLabel: {
type: String,
required: !1,
default: ""
},
/**
* Describes the width of the avatar
*/
width: {
type: Number,
required: !1,
default: 30
},
/**
* Describes the size of the avatar icon e.g.(small)
*/
iconSize: {
type: String,
required: !1,
default: "small"
}
}
}), Ue = {};
function Os(e, t, o, a, i, n) {
const r = f("oc-avatar-item");
return s(), h(r, {
width: e.width,
"icon-size": e.iconSize,
icon: "earth",
"icon-fill-type": "line",
"icon-color": "#85C1BA",
name: e.name,
"accessible-label": e.accessibleLabel
}, null, 8, ["width", "icon-size", "name", "accessible-label"]);
}
typeof Ue == "function" && Ue(Yt);
const he = /* @__PURE__ */ v(Yt, [["render", Os]]), Zt = b({
name: "OcAvatarGroup",
status: "ready",
release: "10.0.0",
components: { OcAvatarItem: re },
props: {
/**
* Name of the group used as an accessible label
*/
name: {
type: String,
required: !0
},
/**
* Accessibility label used as alt. Use only in case the avatar is used alone.
* In case the avatar is used next to username or display name leave empty.
* If not specified, avatar will get `aria-hidden="true"`.
**/
accessibleLabel: {
type: String,
required: !1,
default: ""
},
/**
* Describes the width of the avatar
*/
width: {
type: Number,
required: !1,
default: 30
},
/**
* Describes the size of the avatar icon e.g.(small)
*/
iconSize: {
type: String,
required: !1,
default: "small"
}
}
}), We = {};
function _s(e, t, o, a, i, n) {
const r = f("oc-avatar-item");
return s(), h(r, {
width: e.width,
"icon-size": e.iconSize,
icon: "group",
name: e.name,
"accessible-label": e.accessibleLabel
}, null, 8, ["width", "icon-size", "name", "accessible-label"]);
}
typeof We == "function" && We(Zt);
const me = /* @__PURE__ */ v(Zt, [["render", _s]]), xt = b({
name: "OcAvatarGuest",
status: "ready",
release: "10.0.0",
components: { OcAvatarItem: re },
props: {
/**
* Name of the guest used as an accessible label
*/
name: {
type: String,
required: !0
},
/**
* Accessibility label used as alt. Use only in case the avatar is used alone.
* In case the avatar is used next to username or display name leave empty.
* If not specified, avatar will get `aria-hidden="true"`.
**/
accessibleLabel: {
type: String,
required: !1,
default: ""
},
/**
* Describes the width of the avatar
*/
width: {
type: Number,
required: !1,
default: 30
},
/**
* Describes the size of the avatar icon e.g.(small)
*/
iconSize: {
type: String,
required: !1,
default: "small"
}
}
}), Ge = {};
function Ts(e, t, o, a, i, n) {
const r = f("oc-avatar-item");
return s(), h(r, {
width: e.width,
"icon-size": e.iconSize,
icon: "global",
"icon-fill-type": "line",
"icon-color": "#D78841",
name: e.name,
"accessible-label": e.accessibleLabel
}, null, 8, ["width", "icon-size", "name", "accessible-label"]);
}
typeof Ge == "function" && Ge(xt);
const ge = /* @__PURE__ */ v(xt, [["render", Ts]]), eo = b({
name: "OcAvatarLink",
status: "ready",
release: "2.1.0",
components: { OcAvatarItem: re },
props: {
/**
* Name of the public link used as an accessible label
*/
name: {
type: String,
required: !0
},
/**
* Accessibility label used as alt. Use only in case the avatar is used alone.
* In case the avatar is used next to username or display name leave empty.
* If not specified, avatar will get `aria-hidden="true"`.
**/
accessibleLabel: {
type: String,
required: !1,
default: ""
},
/**
* Describes the width of the avatar
*/
width: {
type: Number,
required: !1,
default: 30
},
/**
* Describes the size of the avatar icon e.g.(small)
*/
iconSize: {
type: String,
required: !1,
default: "small"
}
}
}), Xe = {};
function qs(e, t, o, a, i, n) {
const r = f("oc-avatar-item");
return s(), h(r, {
width: e.width,
"icon-size": e.iconSize,
icon: "link",
name: e.name,
"accessible-label": e.accessibleLabel
}, null, 8, ["width", "icon-size", "name", "accessible-label"]);
}
typeof Xe == "function" && Xe(eo);
const ye = /* @__PURE__ */ v(eo, [["render", qs]]), x = {
user: 0,
group: 1,
link: 3,
guest: 4,
remote: 6
}, to = b({
name: "OcAvatars",
status: "ready",
release: "2.1.0",
components: {
OcAvatar: ve,
OcAvatarCount: Qt,
OcAvatarLink: ye,
OcAvatarGroup: me,
OcAvatarFederated: he,
OcAvatarGuest: ge
},
props: {
/**
* Users, public links, groups, federated and guests to be displayed with avatars
*/
items: {
type: Array,
required: !0
},
/**
* Asserts whether avatars should be stacked on each other
*/
stacked: {
type: Boolean,
required: !1,
default: !1
},
/**
* Asserts whether tooltip should be displayed on hover/focus
*/
isTooltipDisplayed: {
type: Boolean,
required: !1,
default: !1
},
/**
* Limits the number of avatars which will be displayed
*/
maxDisplayed: {
type: Number,
required: !1,
default: null
},
/**
* A description of the avatar group for screen readers. This is required as the avatar group element
* is hidden for screen readers.
*/
accessibleDescription: {
type: String,
required: !1,
default: null
}
},
computed: {
isOverlapping() {
return this.maxDisplayed && this.maxDisplayed < this.items.length;
},
tooltip() {
if (this.isTooltipDisplayed) {
const e = this.avatars.map((o) => o.displayName);
this.otherItems.length > 0 && e.push(...this.otherItems.map((o) => o.name));
let t = e.join(", ");
return this.isOverlapping && (t += ` +${this.items.length - this.maxDisplayed}`), t;
}
return null;
},
avatars() {
const e = this.items.filter((t) => t.shareType === x.user);
return this.isOverlapping ? e.slice(0, this.maxDisplayed) : e;
},
otherItems() {
const e = this.items.filter((t) => t.shareType !== x.user);
return this.isOverlapping ? this.maxDisplayed <= this.avatars.length ? [] : e.slice(0, this.maxDisplayed - this.avatars.length) : e;
}
},
methods: {
getAvatarComponentForItem(e) {
switch (e.shareType) {
case x.link:
return ye;
case x.remote:
return he;
case x.group:
return me;
case x.guest:
return ge;
}
}
}
}), Qe = {}, Ls = ["textContent"];
function Ds(e, t, o, a, i, n) {
const r = f("oc-avatar"), l = f("oc-avatar-count"), p = Y("oc-tooltip");
return s(), c("span", null, [
z((s(), c("span", {
class: O(["oc-avatars", { "oc-avatars-stacked": e.stacked }]),
"aria-hidden": "true"
}, [
e.avatars.length > 0 ? (s(!0), c(A, { key: 0 }, R(e.avatars, (d) => (s(), h(r, {
key: d.username,
src: d.avatar,
"user-name": d.displayName,
width: 30
}, null, 8, ["src", "user-name"]))), 128)) : g("", !0),
e.otherItems.length > 0 ? (s(!0), c(A, { key: 1 }, R(e.otherItems, (d, D) => (s(), h(X(e.getAvatarComponentForItem(d)), {
key: d.name + D,
name: d.name
}, null, 8, ["name"]))), 128)) : g("", !0),
e.isOverlapping ? (s(), h(l, {
key: 2,
count: e.items.length - e.maxDisplayed
}, null, 8, ["count"])) : g("", !0)
], 2)), [
[p, e.tooltip]
]),
e.accessibleDescription ? (s(), c("span", {
key: 0,
class: "oc-invisible-sr",
textContent: w(e.accessibleDescription)
}, null, 8, Ls)) : g("", !0)
]);
}
typeof Qe == "function" && Qe(to);
const Is = /* @__PURE__ */ v(to, [["render", Ds]]), oo = b({
name: "OcButton",
status: "ready",
release: "1.0.0",
props: {
/**
* The html element used for the button.
* `button, a, router-link`
*/
type: {
type: String,
default: "button",
validator: (e) => ["button", "a", "router-link"].includes(e)
},
/**
* Disable the button
*/
disabled: {
type: Boolean,
default: !1
},
/**
* The size of the button. Defaults to medium.
* `small, medium, large`
*/
size: {
type: String,
default: "medium",
validator: (e) => ["small", "medium", "large"].includes(e)
},
/**
* When setting the button’s type to a link, use this option to give a href.
*/
href: {
type: String,
default: null
},
/**
* When setting the button’s type to a link, use this option to give a give a target.
* `_blank, _self, _parent, _top`
*/
target: {
type: String,
default: null,
validator: (e) => ["_blank", "_self", "_parent", "_top"].includes(e)
},
/**
* When setting the button’s type to a router-link, use this option to give a to.
*/
to: {
type: [String, Object],
default: null
},
/**
* The aria-label of the button. Only use this property if you want to overwrite the accessible content of the
* oc-button. Usually this is not needed.
*/
ariaLabel: {
type: String,
default: null
},
/**
* Set the button’s type ("submit", "button" or "reset").
*/
submit: {
type: String,
default: "button",
validator: (e) => ["null", "button", "submit", "reset"].includes(e)
},
/**
* Style variation to give additional meaning.
* Defaults to `primary`.
* Can be `passive, primary, danger, success, warning, brand`.
*/
variation: {
type: String,
default: "passive",
validator: (e) => ["passive", "primary", "danger", "success", "warning", "brand"].includes(e)
},
/**
* Style variation to give additional meaning.
* Defaults to `outline`.
* Can be `outline, filled, raw, raw-inverse` with following characteristics:
* - outline: transparent button with text- and border-color according to variation default-color
* - filled: button filled in variation default-color, text in variation contrast-color
* - raw: text-only button with text in variation default-color
* - raw-inverse: text-only button with text in variation contrast-color
*/
appearance: {
type: String,
default: "outline",
validator: (e) => ["filled", "outline", "raw", "raw-inverse"].includes(e)
},
/**
* How to justify content within the button. Defaults to center.
* `left, center, right, space-around, space-between, space-evenly`
*/
justifyContent: {
type: String,
default: "center",
validator: (e) => [
"left",
"center",
"right",
"space-around",
"space-between",
"space-evenly"
].includes(e)
},
/**
* Distance between children of the button. Defaults to medium. Might be overruled by justify-content value.
* @values none, xsmall, small, medium, large, xlarge
*/
gapSize: {
type: String,
default: "medium",
validator: (e) => ["none", "xsmall", "small", "medium", "large", "xlarge"].includes(e)
},
/**
* Show loading spinner
*/
showSpinner: {
type: Boolean,
default: !1
}
},
emits: ["click"],
computed: {
$_ocButton_buttonClass() {
return [
"oc-button",
"oc-rounded",
`oc-button-${U(this.size)}`,
`oc-button-justify-content-${this.justifyContent}`,
`oc-button-gap-${U(this.gapSize)}`,
`oc-button-${this.variation}`,
`oc-button-${this.variation}-${this.appearance}`
];
},
additionalAttributes() {
return {
...this.href && { href: this.href },
...this.target && { target: this.target },
...this.to && { to: this.to },
...this.type === "button" && { type: this.submit },
...this.type === "button" && { disabled: this.disabled }
};
},
handlers() {
return {
...this.type === "button" && { click: this.$_ocButton_onClick }
};
}
},
methods: {
$_ocButton_onClick(e) {
this.$emit("click", e);
}
}
}), Je = {};
function Ms(e, t, o, a, i, n) {
const r = f("oc-spinner");
return s(), h(X(e.type), E(e.additionalAttributes, {
"aria-label": e.ariaLabel,
class: e.$_ocButton_buttonClass
}, ce(e.handlers)), {
default: y(() => [
e.showSpinner ? (s(), h(r, {
key: 0,
size: "small",
class: "spinner"
})) : g("", !0),
T(e.$slots, "default")
]),
_: 3
}, 16, ["aria-label", "class"]);
}
typeof Je == "function" && Je(oo);
const H = /* @__PURE__ */ v(oo, [["render", Ms]]), so = {
name: "hideOnEsc",
defaultValue: !0,
fn({ hide: e }) {
const t = (o) => {
o.code === "Escape" && e();
};
return {
onShow: () => {
document.addEventListener("keydown", t);
},
onHide: () => {
document.removeEventListener("keydown", t);
}
};
}
}, Ps = {
name: "ariaHidden",
defaultValue: !0,
fn(e) {
return {
onCreate() {
e.popper.setAttribute("aria-hidden", "true");
}
};
}
}, le = (e) => {
if (e)
try {
e.destroy();
} catch {
}
}, Ye = (e, { value: t = {} }) => {
if (Object.prototype.toString.call(t) !== "[object Object]" && (t = { content: t }), t.content !== 0 && !t.content || t.content === "") {
le(e.tooltip), e.tooltip = null;
return;
}
const o = ls.all([
{
ignoreAttributes: !0,
interactive: !0,
aria: {
content: null,
expanded: !1
}
},
t
]);
if (!e.tooltip) {
e.tooltip = jt(e, {
...o,
plugins: [so, Ps]
});
return;
}
e.tooltip.setProps(o);
}, Hi = {
name: "OcTooltip",
beforeMount: Ye,
updated: Ye,
unmounted: (e) => le(e.tooltip)
}, ao = b({
name: "OcDrop",
status: "ready",
release: "1.0.0",
props: {
/**
* Id of the drop.
*/
dropId: {
type: String,
required: !1,
default: () => N("oc-drop-")
},
/**
* Specifies custom Popper options
*/
popperOptions: {
type: Object,
required: !1,
default: () => ({})
},
/**
* CSS selector for the element to be used as toggle. By default, the preceding element is used.
**/
toggle: {
type: String,
default: ""
},
/**
* The position of the drop: `(top|right|bottom|left|auto)|(top|right|bottom|left|auto)-(start|end)`.
**/
position: {
type: String,
default: "bottom-start",
validator: (e) => !!e.match(
/((top|right|bottom|left|auto)|(top|right|bottom|left|auto)-(start|end))/
)
},
/**
* Events that cause the drop to show. Multiple event names are separated by spaces
*
* @values click, hover, manual
**/
mode: {
type: String,
default: "click",
validator: (e) => !!e.match(/(click|hover|manual)/)
},
/**
* Defines if the drop should be closed after clicking on it. Needs to have defined dropId to work.
*/
closeOnClick: {
type: Boolean,
required: !1
},
/**
* Defines if the drop should be nested drop in another drop.
*/
isNested: {
type: Boolean,
required: !1
},
/**
* Element selector used as a target of the drop
*/
target: {
type: String,
required: !1,
default: null
},
/**
* Defines the padding size around the drop content. Defaults to `medium`.
*
* @values xsmall, small, medium, large, xlarge, xxlarge, xxxlarge, remove
*/
paddingSize: {
type: String,
required: !1,
default: "medium",
validator: (e) => [...be, "remove"].some((t) => t === e)
},
/**
* Determines the offset of the drop element. The value can work on both axes by using a string in the form "x, y", such as "50, 20".
*/
offset: {
type: String,
required: !1,
default: void 0
}
},
emits: ["hideDrop", "showDrop"],
setup(e) {
const t = Yo("drop"), o = P(null), a = (l) => {
var p;
(p = $(o)) == null || p.show(l);
}, i = (l) => {
var p;
(p = $(o)) == null || p.hide(l);
}, n = () => {
e.closeOnClick && i();
}, r = (l) => {
const p = $(t).closest(".tippy-box");
l.relatedTarget && !p.contains(l.relatedTarget) && i();
};
return Ft(() => {
$(t).addEventListener("focusout", r);
}), Ht(() => {
$(t).removeEventListener("focusout", r);
}), { drop: t, tippy: o, show: a, hide: i, onClick: n };
},
computed: {
triggerMapping() {
return {
hover: "mouseenter focus"
}[this.mode] || this.mode;
},
paddingClass() {
return `oc-p-${U(this.paddingSize)}`;
}
},
watch: {
position() {
this.tippy.setProps({ placement: this.position });
},
mode() {
this.tippy.setProps({ trigger: this.triggerMapping });
}
},
beforeUnmount() {
le(this.tippy);
},
mounted() {
var a;
le(this.tippy);
const e = this.target ? document.querySelector(this.target) : this.toggle ? document.querySelector(this.toggle) : this.$el.previousElementSibling, t = this.$refs.drop;
if (!e || !t)
return;
const o = {
trigger: this.triggerMapping,
placement: this.position,
arrow: !1,
hideOnClick: !0,
interactive: !0,
plugins: [so],
theme: "none",
maxWidth: 416,
offset: this.offset ?? 0,
...!this.isNested && {
onShow: (i) => {
this.$emit("showDrop"), rs({ exclude: i });
},
onHide: () => {
this.$emit("hideDrop");
}
},
popperOptions: {
...this.popperOptions,
modifiers: [
...(a = this.popperOptions) != null && a.modifiers ? this.popperOptions.modifiers : [],
{
name: "fixVerticalPosition",
enabled: !0,
phase: "beforeWrite",
requiresIfExists: ["offset", "preventOverflow", "flip"],
fn({ state: i }) {
const n = is(i), r = i.modifiersData.fullHeight || i.elements.popper.offsetHeight, l = n.top * -1 - 10, p = l + r + n.bottom * -1, d = p - l, D = p - d;
r > d && r > D && (i.styles.popper.top = `-${l}px`, i.modifiersData.fullHeight = r), r > p && (i.styles.popper.maxHeight = `${p - 10}px`, i.styles.popper.overflowY = "auto", i.styles.popper.overflowX = "hidden");
}
}
]
},
content: t
};
this.target && (o.triggerTarget = this.toggle ? document.querySelector(this.toggle) : this.$el.previousElementSibling), this.tippy = jt(e, o);
}
}), Ze = {}, Bs = ["id"];
function As(e, t, o, a, i, n) {
return s(), c("div", {
id: e.dropId,
ref: "drop",
class: "oc-drop oc-box-shadow-medium oc-rounded",
onClick: t[0] || (t[0] = (...r) => e.onClick && e.onClick(...r))
}, [
e.$slots.default ? (s(), c("div", {
key: 0,
class: O(["oc-card oc-card-body oc-background-secondary", e.paddingClass])
}, [
T(e.$slots, "default")
], 2)) : T(e.$slots, "special", { key: 1 })
], 8, Bs);
}
typeof Ze == "function" && Ze(ao);
const we = /* @__PURE__ */ v(ao, [["render", As]]), no = b({
name: "OcBreadcrumb",
status: "ready",
release: "1.0.0",
components: {
OcDrop: we,
OcIcon: V,
OcButton: H
},
props: {
/**
* Id for the breadcrumbs. If it's empty, a generated one will be used.
*/
id: {
type: String,
required: !1,
default: () => N("oc-breadcrumbs-")
},
/**
* Array of breadcrumb items
*/
items: {
type: Array,
required: !0
},
/**
* Variation of breadcrumbs
* Can be `default` or `lead`
*/
variation: {
type: String,
required: !1,
default: "default",
validator: (e) => e === "lead" || e === "default"
},
/**
* Defines the padding size around the drop content. Defaults to `medium`.
*
* @values xsmall, small, medium, large, xlarge, xxlarge, xxxlarge, remove
*/
contextMenuPadding: {
type: String,
required: !1,
default: "medium",
validator: (e) => [...be, "remove"].some((t) => t === e)
},
/**
* Defines the maximum width of the breadcrumb. If the breadcrumb is wider than the given value, the breadcrumb
* will be reduced from the left side.
* If the value is -1, the breadcrumb will not be reduced.
*/
maxWidth: {
type: Number,
required: !1,
default: -1
},
/**
* Defines the number of items that should be always displayed at the beginning of the breadcrumb.
* The default value is 2. e.g. Personal > ... > XYZ
*/
truncationOffset: {
type: Number,
required: !1,
default: 2
},
/**
* Determines if the last breadcrumb item should have context menu actions.
*/
showContextActions: {
type: Boolean,
default: !1
}
},
emits: [Ie],
setup(e, { emit: t }) {
const { $gettext: o } = se(), a = P([]), i = P([]), n = P(e.items.slice()), r = (_) => document.querySelector(`.oc-breadcrumb-list [data-item-id="${_}"]`), l = (_, F) => !(!_.id || F === $(n).length - 1 || _.isTruncationPlaceholder || _.isStaticNav), p = (_, F) => {
if (l(_, F) && typeof _.to == "object") {
const W = _.to;
W.path = W.path || "/", t(Ie, W);
}
}, d = () => {
let _ = 100;
return a.value.forEach((F) => {
var ae;
const W = r(F.id), Z = ((ae = W == null ? void 0 : W.getBoundingClientRect()) == null ? void 0 : ae.width) || 0;
_ += Z;
}), _;
}, D = (_) => {
const F = e.maxWidth;
if (!F)
return;
const W = d();
if (!(F < W) || a.value.length <= e.truncationOffset + 1)
return;
const ae = a.value.splice(_, 1);
i.value.push(ae[0]), D(_);
}, k = M(
() => i.value.length >= 1 ? $(i)[$(i).length - 1] : { to: {} }
), I = () => {
n.value = [...e.items], n.value.length > e.truncationOffset - 1 && n.value.splice(e.truncationOffset - 1, 0, {
text: "...",
allowContextActions: !1,
to: {},
isTruncationPlaceholder: !0
}), a.value = [...n.value], i.value = [], te(() => {
D(e.truncationOffset);
});
};
J([() => e.maxWidth, () => e.items], I, { immediate: !0 });
const u = M(() => {
if (!(e.items.length === 0 || !e.items))
return [...e.items].reverse()[0];
}), L = M(() => {
var _;
return (_ = [...e.items].reverse()[1]) == null ? void 0 : _.to;
}), S = M(() => o("Show actions for current folder"));
return {
currentFolder: u,
parentFolderTo: L,
contextMenuLabel: S,
getAriaCurrent: (_) => e.items.length - 1 === _ ? "page" : null,
visibleItems: a,
hiddenItems: i,
renderBreadcrumb: I,
displayItems: n,
lastHiddenItem: k,
dropItemEvent: p,
dropItemStyling: (_, F, W, Z) => {
var qe, Le;
if (!l(_, F) || (((qe = Z.dataTransfer) == null ? void 0 : qe.types) || []).some((Wo) => Wo === "Files") || (Le = Z.currentTarget) != null && Le.contains(Z.relatedTarget))
return;
const _e = r(_.id).children[0].classList, Te = "oc-breadcrumb-item-dragover";
W ? _e.remove(Te) : _e.add(Te);
}
};
}
}), xe = {}, Vs = ["id", "aria-label"], Es = { class: "oc-breadcrumb-list oc-flex oc-m-rm oc-p-rm" }, zs = ["data-key", "data-item-id", "aria-hidden", "onDragenter", "onDragleave", "onMouseleave", "onDrop"], Fs = { class: "oc-breadcrumb-item-text oc-breadcrumb-item-navigable" }, Hs = ["textContent"], Ns = ["aria-current", "textContent"], js = {
key: 0,
class: "oc-breadcrumb-mobile-current"
}, Rs = ["textContent"];
function Ks(e, t, o, a, i, n) {
const r = f("router-link"), l = f("oc-button"), p = f("oc-icon"), d = f("oc-drop"), D = Y("oc-tooltip");
return s(), c(A, null, [
m("nav", {
id: e.id,
class: O(`oc-breadcrumb oc-breadcrumb-${e.variation}`),
"aria-label": e.$gettext("Breadcrumbs")
}, [
m("ol", Es, [
(s(!0), c(A, null, R(e.displayItems, (k, I) => (s(), c("li", {
key: I,
"data-key": I,
"data-item-id": k.id,
"aria-hidden": k.isTruncationPlaceholder,
class: O([
"oc-breadcrumb-list-item",
"oc-flex",
"oc-flex-middle",
{
"oc-invisible-sr": e.hiddenItems.indexOf(k) !== -1 || k.isTruncationPlaceholder && e.hiddenItems.length === 0
}
]),
onDragover: t[0] || (t[0] = Q(() => {
}, ["prevent"])),
onDragenter: Q((u) => e.dropItemStyling(k, I, !1, u), ["prevent"]),
onDragleave: Q((u) => e.dropItemStyling(k, I, !0, u), ["prevent"]),
onMouseleave: (u) => e.dropItemStyling(k, I, !0, u),
onDrop: (u) => e.dropItemEvent(k, I)
}, [
k.to ? (s(), h(r, {
key: 0,
"aria-current": e.getAriaCurrent(I),
to: k.isTruncationPlaceholder ? e.lastHiddenItem.to : k.to
}, {
default: y(() => [
m("span", Fs, w(k.text), 1)
]),
_: 2
}, 1032, ["aria-current", "to"])) : k.onClick ? (s(), h(l, {
key: 1,
"aria-current": e.getAriaCurrent(I),
appearance: "raw",
class: "oc-flex",
onClick: k.onClick
}, {
default: y(() => [
m("span", {
class: O([
"oc-breadcrumb-item-text",
"oc-breadcrumb-item-navigable",
{
"oc-breadcrumb-item-text-last": I === e.displayItems.length - 1
}
]),
textContent: w(k.text)
}, null, 10, Hs)
]),
_: 2
}, 1032, ["aria-current", "onClick"])) : (s(), c("span", {
key: 2,
class: "oc-breadcrumb-item-text",
"aria-current": e.getAriaCurrent(I),
tabindex: "-1",
textContent: w(k.text)
}, null, 8, Ns)),
I !== e.displayItems.length - 1 ? (s(), h(p, {
key: 3,
color: "var(--oc-color-text-default)",
name: "arrow-right-s",
class: "oc-mx-xs",
"fill-type": "line"
})) : g("", !0),
e.showContextActions && I === e.displayItems.length - 1 ? (s(), c(A, { key: 4 }, [
z((s(), h(l, {
id: "oc-breadcrumb-contextmenu-trigger",
"aria-label": e.contextMenuLabel,
appearance: "raw"
}, {
default: y(() => [
C(p, {
name: "more-2",
color: "var(--oc-color-text-default)"
})
]),
_: 1
}, 8, ["aria-label"])), [
[D, e.contextMenuLabel]
]),
C(d, {
"drop-id": "oc-breadcrumb-contextmenu",
toggle: "#oc-breadcrumb-contextmenu-trigger",
mode: "click",
"close-on-click": "",
"padding-size": e.contextMenuPadding
}, {
default: y(() => [
T(e.$slots, "contextMenu")
]),
_: 3
}, 8, ["padding-size"])
], 64)) : g("", !0)
], 42, zs))), 128))
]),
e.parentFolderTo && e.displayItems.length > 1 ? (s(), h(l, {
key: 0,
appearance: "raw",
type: "router-link",
"aria-label": e.$gettext("Navigate one level up"),
to: e.parentFolderTo,
class: "oc-breadcrumb-mobile-navigation"
}, {
default: y(() => [
C(p, {
name: "arrow-left-s",
"fill-type": "line",
size: "large",
class: "oc-mr-m"
})
]),
_: 1
}, 8, ["aria-label", "to"])) : g("", !0)
], 10, Vs),
e.displayItems.length > 1 ? (s(), c("div", js, [
m("span", {
class: "oc-text-truncate",
"aria-current": "page",
textContent: w(e.currentFolder.text)
}, null, 8, Rs)
])) : g("", !0)
], 64);
}
typeof xe == "function" && xe(no);
const Us = /* @__PURE__ */ v(no, [["render", Ks]]), ro = b({
name: "OcCheckbox",
status: "ready",
release: "1.0.0",
props: {
/**
* Id for the checkbox. If it's empty, a generated one will be used.
*/
id: {
type: String,
required: !1,
default: () => N("oc-checkbox-")
},
/**
* Disables the checkbox
*/
disabled: {
type: Boolean,
default: !1
},
/**
* The model of the checkbox. It determines, based on the option this checkbox represents, whether or not this
* checkbox is checked. Provide it as value or bind it with v-model.
*
* Can be any type, but most common is boolean for singular checkbox use, or array when used in a group of checkboxes.
**/
modelValue: {
type: [Boolean, Array],
required: !1,
default: !1
},
/**
* The value/object this checkbox represents.
*
* Can be of any type. If `value` is an array, the type of the option needs to match the value item types. If the
* checkbox is used standalone (not in a group on a shared model) the option can be omitted.
**/
// eslint-disable-next-line vue/require-prop-types
option: {
required: !1,
default: null
},
/**
* Label of the Checkbox
*
* Always required for aria-label property. If you want to hide the label, use `hideLabel` property.
**/
label: {
type: String,
required: !0,
default: null
},
/**
* Hide the label of the Checkbox
*/
labelHidden: {
type: Boolean,
default: !1
},
/**
* Size of the Checkbox. Valid values are `small`, `medium` and `large`.
* If not specified, defaults to `medium`
*/
size: {
type: String,
required: !1,
default: "medium",
validator: (e) => ["small", "medium", "large"].includes(e)
},
/**
* Show outline of checkbox
**/
outline: {
type: Boolean,
required: !1,
default: !1
}
},
emits: ["click", "update:modelValue"],
computed: {
model: {
get() {
return this.modelValue;
},
set: function(e) {
this.$emit("update:modelValue", e);
}
},
classes() {
return [
"oc-checkbox",
"oc-rounded",
"oc-checkbox-" + U(this.size),
{ "oc-checkbox-checked": this.isChecked }
];
},
labelClasses() {
return {
"oc-cursor-pointer": !this.disabled
};
},
isChecked() {
return typeof this.model == "boolean" ? this.model : this.model.some((e) => cs(e, this.option));
}
},
methods: {
keydownEnter(e) {
this.model = !this.model, this.$emit("click", e);
}
}
}), et = {}, Ws = ["id", "value", "disabled", "aria-label"], Gs = ["for", "textContent"];
function Xs(e, t, o, a, i, n) {
return s(), c("span", {
onClick: t[2] || (t[2] = (r) => e.$emit("click", r))
}, [
z(m("input", {
id: e.id,
"onUpdate:modelValue": t[0] || (t[0] = (r) => e.model = r),
type: "checkbox",
name: "checkbox",
class: O(e.classes),
value: e.option,
disabled: e.disabled,
"aria-label": e.labelHidden ? e.label : null,
onKeydown: t[1] || (t[1] = de((...r) => e.keydownEnter && e.keydownEnter(...r), ["enter"]))
}, null, 42, Ws), [
[Zo, e.model]
]),
e.labelHidden ? g("", !0) : (s(), c("label", {
key: 0,
for: e.id,
class: O(e.labelClasses),
textContent: w(e.label)
}, null, 10, Gs))
]);
}
typeof et == "function" && et(ro);
const Qs = /* @__PURE__ */ v(ro, [["render", Xs]]), io = b({
name: "OcInfoDrop",
status: "unreleased",
components: { OcButton: H, OcIcon: V, OcDrop: we, FocusTrap: Rt },
props: {
/**
* Id of the element
*/
dropId: {
type: String,
required: !1,
default: () => N("oc-info-drop-")
},
/**
* CSS selector for the element to be used as toggle. By default, the preceding element is used
**/
toggle: {
type: String,
required: !1,
default: ""
},
/**
* Events that cause the drop to show. Multiple event names are separated by spaces
*
* @values click, hover, manual
**/
mode: {
type: String,
required: !1,
default: "click",
validator: (e) => ["click", "hover", "manual"].includes(e)
},
/**
* Element selector used as a target of the element
*/
target: {
type: String,
required: !1,
default: null
},
/**
* Title
*/
title: {
type: String,
required: !0
},
/**
* Text at the beginning
*/
text: {
type: String,
required: !1,
default: ""
},
/**
* List element
*/
list: {
type: Array,
required: !1,
default: () => []
},
/**
* Text at the end
*/
endText: {
type: String,
required: !1,
default: ""
},
/**
* Read more link at the end
*/
readMoreLink: {
type: String,
required: !1,
default: ""
}
},
setup(e) {
const t = P(!1), o = M(() => (e.list || []).filter((a) => !!a.text));
return {
dropOpen: t,
listItems: o
};
}
}), tt = {}, Js = { class: "info-drop-content" }, Ys = { class: "oc-flex oc-flex-between info-header oc-border-b oc-pb-s" }, Zs = ["textContent"], xs = ["textContent"], ea = {
key: 1,
class: "info-list"
}, ta = ["textContent"];
function oa(e, t, o, a, i, n) {
const r = f("oc-icon"), l = f("oc-button"), p = f("focus-trap"), d = f("oc-drop"), D = Y("oc-tooltip");
return s(), h(d, {
ref: "drop",
class: "oc-width-1-1 oc-info-drop",
"drop-id": e.dropId,
toggle: e.toggle,
mode: e.mode,
"close-on-click": "",
onHideDrop: t[0] || (t[0] = () => e.dropOpen = !1),