@sorion/windmill-vue
Version:
Vue 3 UI component library built with Tailwind CSS, inspired by @windmill/react-ui
1,164 lines (1,163 loc) • 41 kB
JavaScript
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
import { openBlock, createElementBlock, createElementVNode, defineComponent, computed, normalizeClass, createBlock, resolveDynamicComponent, renderSlot, createCommentVNode, pushScopeId, popScopeId, ref, watch, Transition, withCtx, resolveComponent, createVNode, withDirectives, vModelDynamic, onUpdated, createTextVNode, toDisplayString, Fragment, renderList, vModelText } from "vue";
var _export_sfc = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
const _sfc_main$A = {};
const _hoisted_1$u = {
fill: "none",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "2",
viewBox: "0 0 24 24",
stroke: "currentColor"
};
const _hoisted_2$b = /* @__PURE__ */ createElementVNode("path", { d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }, null, -1);
const _hoisted_3$8 = [
_hoisted_2$b
];
function _sfc_render$A(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1$u, _hoisted_3$8);
}
var InfoIcon = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["render", _sfc_render$A]]);
const _sfc_main$z = {};
const _hoisted_1$t = {
fill: "none",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "2",
viewBox: "0 0 24 24",
stroke: "currentColor"
};
const _hoisted_2$a = /* @__PURE__ */ createElementVNode("path", { d: "M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" }, null, -1);
const _hoisted_3$7 = [
_hoisted_2$a
];
function _sfc_render$z(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1$t, _hoisted_3$7);
}
var DangerIcon = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["render", _sfc_render$z]]);
const _sfc_main$y = {};
const _hoisted_1$s = {
fill: "none",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "2",
viewBox: "0 0 24 24",
stroke: "currentColor"
};
const _hoisted_2$9 = /* @__PURE__ */ createElementVNode("path", { d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }, null, -1);
const _hoisted_3$6 = [
_hoisted_2$9
];
function _sfc_render$y(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1$s, _hoisted_3$6);
}
var SuccessIcon = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["render", _sfc_render$y]]);
const _sfc_main$x = {};
const _hoisted_1$r = {
fill: "none",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "2",
viewBox: "0 0 24 24",
stroke: "currentColor"
};
const _hoisted_2$8 = /* @__PURE__ */ createElementVNode("path", { d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }, null, -1);
const _hoisted_3$5 = [
_hoisted_2$8
];
function _sfc_render$x(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1$r, _hoisted_3$5);
}
var WarningIcon = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["render", _sfc_render$x]]);
const _sfc_main$w = defineComponent({
name: "NeutralIcon"
});
const _hoisted_1$q = {
fill: "none",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "2",
viewBox: "0 0 24 24",
stroke: "currentColor"
};
const _hoisted_2$7 = /* @__PURE__ */ createElementVNode("path", { d: "M8 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }, null, -1);
const _hoisted_3$4 = [
_hoisted_2$7
];
function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("svg", _hoisted_1$q, _hoisted_3$4);
}
var NeutralIcon = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["render", _sfc_render$w]]);
const _sfc_main$v = {};
const _hoisted_1$p = {
"aria-hidden": "true",
fill: "currentColor",
viewBox: "0 0 20 20"
};
const _hoisted_2$6 = /* @__PURE__ */ createElementVNode("path", {
d: "M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z",
clipRule: "evenodd",
fillRule: "evenodd"
}, null, -1);
const _hoisted_3$3 = [
_hoisted_2$6
];
function _sfc_render$v(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1$p, _hoisted_3$3);
}
var PrevIcon = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["render", _sfc_render$v]]);
const _sfc_main$u = {};
const _hoisted_1$o = {
"aria-hidden": "true",
fill: "currentColor",
viewBox: "0 0 20 20"
};
const _hoisted_2$5 = /* @__PURE__ */ createElementVNode("path", {
d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z",
clipRule: "evenodd",
fillRule: "evenodd"
}, null, -1);
const _hoisted_3$2 = [
_hoisted_2$5
];
function _sfc_render$u(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1$o, _hoisted_3$2);
}
var NextIcon = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["render", _sfc_render$u]]);
var UIAlert_vue_vue_type_style_index_0_scoped_true_lang = "";
const _sfc_main$t = defineComponent({
name: "UIAlert",
props: {
type: { type: String, default: "neutral" },
onClose: { type: Function, required: false }
},
setup(props) {
const handleClose = () => {
if (props.onClose) {
props.onClose();
}
};
const className = computed(() => {
return {
neutral: props.type === "neutral",
success: props.type === "success",
danger: props.type === "danger",
warning: props.type === "warning",
info: props.type === "info"
};
});
const iconComponent = computed(() => {
let icon = NeutralIcon;
switch (props.type) {
case "neutral":
icon = NeutralIcon;
break;
case "success":
icon = SuccessIcon;
break;
case "danger":
icon = DangerIcon;
break;
case "warning":
icon = WarningIcon;
break;
case "info":
icon = InfoIcon;
break;
}
return icon;
});
return {
className,
iconComponent,
handleClose
};
}
});
const _withScopeId$1 = (n) => (pushScopeId("data-v-659c766f"), n = n(), popScopeId(), n);
const _hoisted_1$n = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("path", {
d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
clipRule: "evenodd",
fillRule: "evenodd"
}, null, -1));
const _hoisted_2$4 = [
_hoisted_1$n
];
function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", {
class: normalizeClass(["alert", _ctx.className]),
role: "alert"
}, [
(openBlock(), createBlock(resolveDynamicComponent(_ctx.iconComponent), {
class: normalizeClass(["icon", _ctx.className])
}, null, 8, ["class"])),
renderSlot(_ctx.$slots, "default", {}, void 0, true),
_ctx.onClose ? (openBlock(), createElementBlock("button", {
key: 0,
class: normalizeClass(["button-close", _ctx.className]),
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClose && _ctx.handleClose(...args))
}, [
(openBlock(), createElementBlock("svg", {
class: normalizeClass(["h-5 w-5", _ctx.className]),
fill: "currentColor",
viewBox: "0 0 20 20",
role: "img",
"aria-hidden": "true"
}, _hoisted_2$4, 2))
], 2)) : createCommentVNode("", true)
], 2);
}
var UIAlert = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", _sfc_render$t], ["__scopeId", "data-v-659c766f"]]);
var UIAvatar_vue_vue_type_style_index_0_scoped_true_lang = "";
const _sfc_main$s = defineComponent({
name: "UIAvatar",
props: {
size: { type: String, default: "regular" },
src: { type: String, required: true },
alt: { type: String, required: true }
},
setup(props) {
const classSize = computed(() => {
return {
large: props.size === "large",
regular: props.size === "regular",
small: props.size === "small"
};
});
return {
classSize
};
}
});
const _withScopeId = (n) => (pushScopeId("data-v-bc2a87b4"), n = n(), popScopeId(), n);
const _hoisted_1$m = ["src", "alt"];
const _hoisted_2$3 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "absolute inset-0 rounded-full shadow-inner" }, null, -1));
function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", {
class: normalizeClass(["avatar", _ctx.classSize])
}, [
createElementVNode("img", {
class: "image",
src: _ctx.src,
alt: _ctx.alt
}, null, 8, _hoisted_1$m),
_hoisted_2$3
], 2);
}
var UIAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["render", _sfc_render$s], ["__scopeId", "data-v-bc2a87b4"]]);
var UIBackdrop_vue_vue_type_style_index_0_scoped_true_lang = "";
const _sfc_main$r = defineComponent({
name: "UIBackdrop"
});
const _hoisted_1$l = { class: "force-margin fixed inset-0 z-40 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center" };
function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", _hoisted_1$l, [
renderSlot(_ctx.$slots, "default", {}, void 0, true)
]);
}
var UIBackdrop = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["render", _sfc_render$r], ["__scopeId", "data-v-66350b34"]]);
var UIBadge_vue_vue_type_style_index_0_scoped_true_lang = "";
const _sfc_main$q = defineComponent({
name: "UIBadge",
props: { type: { type: String, default: "primary" } },
setup(props) {
const className = computed(() => {
return {
primary: props.type === "primary",
neutral: props.type === "neutral",
success: props.type === "success",
danger: props.type === "danger",
warning: props.type === "warning"
};
});
return {
className
};
}
});
function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("span", {
class: normalizeClass(["badge", _ctx.className])
}, [
renderSlot(_ctx.$slots, "default", {}, void 0, true)
], 2);
}
var UIBadge = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$q], ["__scopeId", "data-v-189a79c8"]]);
var UIBUtton_vue_vue_type_style_index_0_scoped_true_lang = "";
const _sfc_main$p = defineComponent({
name: "UIButton",
props: {
layout: { type: String, default: "primary" },
size: { type: String, default: "regular" },
disabled: { type: Boolean, default: false },
block: { type: Boolean },
icon: { type: Object, required: false, default: null },
leftIcon: { type: Object, required: false, default: null },
rightIcon: { type: Object, required: false, default: null }
},
setup(props, context) {
const hasSlot = computed(() => {
return context.slots.default !== void 0;
});
const className = computed(() => {
if (props.layout === "__dropdownItem") {
return "button-item";
}
return {
"button-base": true,
primary: props.layout === "primary",
"outline-style": props.layout === "outline",
link: props.layout === "link",
active: !props.disabled,
disabled: props.disabled,
larger: props.size === "larger",
large: props.size === "large",
regular: props.size === "regular",
small: props.size === "small",
pagination: props.size === "pagination",
icon: !hasSlot.value,
block: props.block
};
});
const iconClassName = computed(() => {
return {
"icon-larger": props.size === "larger",
"icon-large": props.size === "large",
"icon-regular": props.size === "regular",
"icon-small": props.size === "small"
};
});
const iconOnLeft = computed(() => {
return props.leftIcon || props.icon;
});
return {
className,
iconClassName,
iconOnLeft,
hasSlot
};
}
});
const _hoisted_1$k = ["disabled"];
function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("button", {
class: normalizeClass(_ctx.className),
disabled: _ctx.disabled
}, [
_ctx.iconOnLeft !== null ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.iconOnLeft), {
key: 0,
class: normalizeClass(__spreadProps(__spreadValues({}, _ctx.iconClassName), { "icon-left": _ctx.hasSlot }))
}, null, 8, ["class"])) : createCommentVNode("", true),
renderSlot(_ctx.$slots, "default", {}, void 0, true),
_ctx.rightIcon !== null ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.rightIcon), {
key: 1,
class: normalizeClass(__spreadProps(__spreadValues({}, _ctx.iconClassName), { "icon-right": _ctx.hasSlot }))
}, null, 8, ["class"])) : createCommentVNode("", true)
], 10, _hoisted_1$k);
}
var UIButton = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$p], ["__scopeId", "data-v-5d032650"]]);
var UICard_vue_vue_type_style_index_0_scoped_true_lang = "";
const _sfc_main$o = defineComponent({
name: "UICard",
props: {
colored: { type: Boolean, default: false }
}
});
function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", {
class: normalizeClass(["card", { default: !_ctx.colored }])
}, [
renderSlot(_ctx.$slots, "default", {}, void 0, true)
], 2);
}
var UICard = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$o], ["__scopeId", "data-v-31cfbb3d"]]);
const _sfc_main$n = defineComponent({
name: "UICardBody"
});
const _hoisted_1$j = { class: "p-4" };
function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", _hoisted_1$j, [
renderSlot(_ctx.$slots, "default")
]);
}
var UICardBody = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$n]]);
var UIDropdown_vue_vue_type_style_index_0_scoped_true_lang = "";
const _sfc_main$m = defineComponent({
name: "UIDropdown",
props: {
isOpen: { type: Boolean, required: true },
align: { type: String, required: false, default: "left" }
},
emits: ["close"],
setup(props, context) {
const dropdownRef = ref(null);
const leftRightClass = computed(() => {
return {
"left-0": props.align === "left",
"right-0": props.align === "right"
};
});
const emitClose = () => {
context.emit("close");
};
const handleEsc = (event) => {
if (event.key === "Esc" || event.key === "Escape") {
emitClose();
}
};
const handleClickOutside = (event) => {
const dropElement = dropdownRef.value;
if (dropElement && !dropElement.contains(event.target)) {
emitClose();
}
};
watch(() => props.isOpen, (state) => {
if (state) {
document.addEventListener("click", handleClickOutside, { capture: true });
document.addEventListener("keydown", handleEsc, { capture: true });
} else {
document.removeEventListener("click", handleClickOutside);
document.removeEventListener("keydown", handleEsc);
}
}, {
flush: "post"
});
return {
leftRightClass,
dropdownRef
};
}
});
const _hoisted_1$i = { key: 0 };
function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createBlock(Transition, { name: "slide-fade" }, {
default: withCtx(() => [
_ctx.isOpen ? (openBlock(), createElementBlock("div", _hoisted_1$i, [
createElementVNode("ul", {
ref: "dropdownRef",
class: normalizeClass(["dropdown-container", _ctx.leftRightClass]),
"aria-label": "submenu"
}, [
renderSlot(_ctx.$slots, "default", {}, void 0, true)
], 2)
])) : createCommentVNode("", true)
]),
_: 3
});
}
var UIDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$m], ["__scopeId", "data-v-0fb45fda"]]);
const _sfc_main$l = defineComponent({
name: "UIDropdownItem",
components: {
UIButton
},
props: {
className: { type: String, required: false, default: "" }
}
});
const _hoisted_1$h = { class: "mb-2 last:mb-0" };
function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
const _component_UIButton = resolveComponent("UIButton");
return openBlock(), createElementBlock("li", _hoisted_1$h, [
createVNode(_component_UIButton, {
layout: "__dropdownItem",
class: normalizeClass(_ctx.className)
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["class"])
]);
}
var UIDropdownItem = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$l]]);
var UIHelperText_vue_vue_type_style_index_0_scoped_true_lang = "";
const _sfc_main$k = defineComponent({
name: "UIHelperText",
props: {
valid: { type: Boolean, required: false, default: void 0 }
},
setup(props) {
const className = computed(() => {
if (props.valid === void 0) {
return {};
}
return {
valid: props.valid,
invalid: !props.valid && props.valid !== void 0
};
});
return {
className
};
}
});
function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("span", {
class: normalizeClass(["helper-text", _ctx.className])
}, [
renderSlot(_ctx.$slots, "default", {}, void 0, true)
], 2);
}
var UIHelperText = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$k], ["__scopeId", "data-v-32c64746"]]);
var UIInput_vue_vue_type_style_index_0_scoped_true_lang = "";
const _sfc_main$j = defineComponent({
name: "UIInput",
props: {
modelValue: { type: [String, Number, Boolean, Array], required: true },
valid: { type: Boolean, default: null },
disabled: { type: Boolean, default: false },
type: { type: String, default: "text" }
},
emits: ["update:modelValue"],
setup(props, context) {
const hasValid = () => {
return props.valid !== null;
};
const update = computed({
get: () => {
return props.modelValue;
},
set: (value) => {
context.emit("update:modelValue", value);
}
});
const baseClassName = computed(() => {
return {
"radio-style": props.type === "radio",
"checkbox-style": props.type === "checkbox",
"input-base": props.type === "text" || props.type === "email" || props.type === "password",
active: !hasValid() && !props.disabled,
disabled: !hasValid() && props.disabled,
valid: hasValid() && props.valid === true,
invalid: hasValid() && props.valid === false
};
});
return {
baseClassName,
update
};
}
});
const _hoisted_1$g = ["type", "disabled"];
function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
return withDirectives((openBlock(), createElementBlock("input", {
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.update = $event),
class: normalizeClass(_ctx.baseClassName),
type: _ctx.type,
disabled: _ctx.disabled
}, null, 10, _hoisted_1$g)), [
[vModelDynamic, _ctx.update]
]);
}
var UIInput = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$j], ["__scopeId", "data-v-fb7dedb4"]]);
var UILabel_vue_vue_type_style_index_0_scoped_true_lang = "";
const _sfc_main$i = defineComponent({
name: "UILabel",
props: {
check: { type: Boolean, default: false },
radio: { type: Boolean, default: false },
disabled: { type: Boolean, default: false }
},
setup(props) {
const className = computed(() => {
return {
"label-base": true,
check: props.check || props.radio,
disabled: props.disabled
};
});
return {
className
};
}
});
function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("label", {
class: normalizeClass(_ctx.className)
}, [
renderSlot(_ctx.$slots, "default", {}, void 0, true)
], 2);
}
var UILabel = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$i], ["__scopeId", "data-v-5df0b398"]]);
var UIModal_vue_vue_type_style_index_0_lang = "";
const _sfc_main$h = defineComponent({
name: "UIModal",
components: {
UIBackdrop
},
props: {
isOpen: { type: Boolean, required: true }
},
emits: ["close"],
setup(props, context) {
const childOpen = ref(false);
const blockClose = ref(false);
const emitClose = () => {
context.emit("close");
};
const handleClose = () => {
childOpen.value = false;
};
const handleOpen = () => {
childOpen.value = true;
blockClose.value = true;
};
const enabled = computed(() => {
if (!props.isOpen) {
if (blockClose.value) {
return true;
} else {
return false;
}
} else {
return true;
}
});
watch(() => props.isOpen, (value) => {
if (!value && blockClose) {
handleClose();
}
});
const handleEsc = (event) => {
if (event.key === "Esc" || event.key === "Escape") {
handleClose();
}
};
onUpdated(() => {
if (props.isOpen) {
document.addEventListener("keydown", handleEsc, { capture: true });
} else {
document.removeEventListener("keydown", handleEsc);
}
});
return {
emitClose,
handleClose,
handleOpen,
childOpen,
blockClose,
enabled
};
}
});
const _hoisted_1$f = {
key: 0,
class: "base-modal",
role: "dialog"
};
const _hoisted_2$2 = { class: "flex justify-end" };
const _hoisted_3$1 = /* @__PURE__ */ createElementVNode("svg", {
className: "w-4 h-4",
fill: "currentColor",
viewBox: "0 0 20 20",
role: "img",
"aria-hidden": "true"
}, [
/* @__PURE__ */ createElementVNode("path", {
d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
clipRule: "evenodd",
fillRule: "evenodd"
})
], -1);
const _hoisted_4$1 = [
_hoisted_3$1
];
function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
const _component_UIBackdrop = resolveComponent("UIBackdrop");
return openBlock(), createBlock(Transition, {
name: "fade",
onAfterEnter: _ctx.handleOpen
}, {
default: withCtx(() => [
_ctx.enabled ? (openBlock(), createBlock(_component_UIBackdrop, { key: 0 }, {
default: withCtx(() => [
createVNode(Transition, {
name: "translate",
onAfterLeave: _cache[1] || (_cache[1] = ($event) => {
_ctx.emitClose();
_ctx.blockClose = false;
})
}, {
default: withCtx(() => [
_ctx.childOpen ? (openBlock(), createElementBlock("div", _hoisted_1$f, [
createElementVNode("header", _hoisted_2$2, [
createElementVNode("button", {
class: "inline-flex items-center justify-center w-6 h-6 text-gray-400 transition-colors duration-150 rounded dark:hover:text-gray-200 hover: hover:text-gray-700",
"aria-label": "close",
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClose && _ctx.handleClose(...args))
}, _hoisted_4$1)
]),
renderSlot(_ctx.$slots, "default")
])) : createCommentVNode("", true)
]),
_: 3
})
]),
_: 3
})) : createCommentVNode("", true)
]),
_: 3
}, 8, ["onAfterEnter"]);
}
var UIModal = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$h]]);
var UIModalBody_vue_vue_type_style_index_0_scoped_true_lang = "";
const _sfc_main$g = defineComponent({
name: "UIModalBody"
});
const _hoisted_1$e = { class: "modal-body" };
function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", _hoisted_1$e, [
renderSlot(_ctx.$slots, "default", {}, void 0, true)
]);
}
var UIModalBody = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$g], ["__scopeId", "data-v-fd80b460"]]);
var UIModalFooter_vue_vue_type_style_index_0_scoped_true_lang = "";
const _sfc_main$f = defineComponent({
name: "UIModalFooter"
});
const _hoisted_1$d = { class: "modal-footer" };
function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("footer", _hoisted_1$d, [
renderSlot(_ctx.$slots, "default", {}, void 0, true)
]);
}
var UIModalFooter = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$f], ["__scopeId", "data-v-4e889ed9"]]);
var UIModalHeader_vue_vue_type_style_index_0_scoped_true_lang = "";
const _sfc_main$e = defineComponent({
name: "UIModalHeader"
});
const _hoisted_1$c = { class: "modal-header" };
function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("p", _hoisted_1$c, [
renderSlot(_ctx.$slots, "default", {}, void 0, true)
]);
}
var UIModalHeader = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$e], ["__scopeId", "data-v-ed10a55a"]]);
const _sfc_main$d = defineComponent({
name: "UINavigationButton",
components: {
UIButton
},
props: {
onClick: { type: Function, required: true },
disabled: { type: Boolean, required: true },
directionIcon: { type: String, required: true }
},
setup(props) {
const icon = computed(() => props.directionIcon === "prev" ? PrevIcon : NextIcon);
const ariaLabel = ref(props.directionIcon === "prev" ? "Previous" : "Next");
return {
ariaLabel,
icon
};
}
});
function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
const _component_UIButton = resolveComponent("UIButton");
return openBlock(), createBlock(_component_UIButton, {
size: "small",
layout: "link",
icon: _ctx.icon,
disabled: _ctx.disabled,
"aria-label": _ctx.ariaLabel
}, null, 8, ["icon", "disabled", "aria-label"]);
}
var UINavigationButton = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d]]);
const _sfc_main$c = defineComponent({
name: "UIPageButton",
props: {
page: { type: [String, Number], required: true },
isActive: { type: Boolean, required: true }
}
});
function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
const _component_UIButton = resolveComponent("UIButton");
return openBlock(), createBlock(_component_UIButton, {
size: "pagination",
layout: _ctx.isActive ? "primary" : "link"
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(_ctx.page), 1)
]),
_: 1
}, 8, ["layout"]);
}
var UIPageButton = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c]]);
const _sfc_main$b = {};
const _hoisted_1$b = { class: "px-2 py-1" };
function _sfc_render$b(_ctx, _cache) {
return openBlock(), createElementBlock("span", _hoisted_1$b, "...");
}
var UIEmptyButton = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b]]);
var UIPagination_vue_vue_type_style_index_0_scoped_true_lang = "";
const _sfc_main$a = defineComponent({
name: "UIPagination",
components: {
UINavigationButton,
UIPageButton,
UIEmptyButton
},
props: {
totalResults: { type: Number, required: true },
resultsPerPage: { type: Number, required: true },
onChange: { type: Function, required: true },
label: { type: String, required: true }
},
setup(props) {
const FIRST_PAGE = 1;
const MAX_VISIBLE_PAGES = 7;
const TOTAL_PAGES = ref(Math.ceil(props.totalResults / props.resultsPerPage));
const LAST_PAGE = TOTAL_PAGES;
const activePage = ref(1);
const handlePreviousClick = () => {
activePage.value = activePage.value - 1;
};
const handleNextClick = () => {
activePage.value = activePage.value + 1;
};
const pages = computed(() => {
let elements = [];
if (TOTAL_PAGES.value <= MAX_VISIBLE_PAGES) {
elements = Array.from({ length: TOTAL_PAGES.value }).map((_, i) => i + 1);
} else if (activePage.value < 5) {
elements = [1, 2, 3, 4, 5, "...", TOTAL_PAGES.value];
} else if (activePage.value >= 5 && activePage.value < TOTAL_PAGES.value - 3) {
elements = [1, "...", activePage.value, activePage.value + 1, "...", TOTAL_PAGES.value];
} else {
elements = [
1,
"...",
TOTAL_PAGES.value - 4,
TOTAL_PAGES.value - 3,
TOTAL_PAGES.value - 2,
TOTAL_PAGES.value - 1,
TOTAL_PAGES.value
];
}
return elements;
});
const setActivePage = (page) => {
if (page.constructor instanceof String) {
return;
} else {
const numberValue = page;
activePage.value = numberValue;
}
};
onUpdated(() => {
props.onChange(activePage.value);
});
return {
handlePreviousClick,
handleNextClick,
setActivePage,
activePage,
pages,
FIRST_PAGE,
LAST_PAGE
};
}
});
const _hoisted_1$a = { class: "pagination-container" };
const _hoisted_2$1 = { class: "pagination-label" };
const _hoisted_3 = { class: "navigation-container" };
const _hoisted_4 = ["aria-label"];
const _hoisted_5 = { class: "navigation-list" };
function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
const _component_UINavigationButton = resolveComponent("UINavigationButton");
const _component_UIEmptyButton = resolveComponent("UIEmptyButton");
const _component_UIPageButton = resolveComponent("UIPageButton");
return openBlock(), createElementBlock("div", _hoisted_1$a, [
createElementVNode("span", _hoisted_2$1, " Showing " + toDisplayString(_ctx.activePage * _ctx.resultsPerPage - _ctx.resultsPerPage - 1) + " - " + toDisplayString(Math.min(_ctx.activePage * _ctx.resultsPerPage, _ctx.totalResults)) + " of " + toDisplayString(_ctx.totalResults), 1),
createElementVNode("div", _hoisted_3, [
createElementVNode("nav", { "aria-label": _ctx.label }, [
createElementVNode("ul", _hoisted_5, [
createElementVNode("li", null, [
createVNode(_component_UINavigationButton, {
"direction-icon": "prev",
disabled: _ctx.activePage === _ctx.FIRST_PAGE,
"on-click": _ctx.handlePreviousClick
}, null, 8, ["disabled", "on-click"])
]),
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.pages, (page, key) => {
return openBlock(), createElementBlock("li", { key }, [
page === "..." ? (openBlock(), createBlock(_component_UIEmptyButton, { key: 0 })) : (openBlock(), createBlock(_component_UIPageButton, {
key: 1,
page,
"is-active": page === _ctx.activePage,
onClick: ($event) => _ctx.setActivePage(page)
}, null, 8, ["page", "is-active", "onClick"]))
]);
}), 128)),
createElementVNode("li", null, [
createVNode(_component_UINavigationButton, {
"direction-icon": "next",
disabled: _ctx.activePage === _ctx.LAST_PAGE,
"on-click": _ctx.handleNextClick
}, null, 8, ["disabled", "on-click"])
])
])
], 8, _hoisted_4)
])
]);
}
var UIPagination = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a], ["__scopeId", "data-v-fd697fee"]]);
var UISelect_vue_vue_type_style_index_0_scoped_true_lang = "";
const _sfc_main$9 = defineComponent({
name: "UISelect",
props: {
disabled: { type: Boolean, default: false },
multiple: { type: Boolean, default: false },
valid: { type: Boolean, default: null }
},
setup(props) {
const hasValid = () => {
return props.valid !== null;
};
const className = computed(() => {
return {
"select-base": true,
active: !hasValid() && !props.disabled,
disabled: !hasValid() && props.disabled,
valid: hasValid() && props.valid === true,
invalid: hasValid() && props.valid === false,
select: props.multiple
};
});
return {
className
};
}
});
const _hoisted_1$9 = ["disabled", "multiple"];
function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("select", {
class: normalizeClass(_ctx.className),
disabled: _ctx.disabled,
multiple: _ctx.multiple
}, [
renderSlot(_ctx.$slots, "default", {}, void 0, true)
], 10, _hoisted_1$9);
}
var UISelect = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9], ["__scopeId", "data-v-4f80243f"]]);
var UITableContainer_vue_vue_type_style_index_0_scoped_true_lang = "";
const _sfc_main$8 = defineComponent({
name: "UITableContainer"
});
const _hoisted_1$8 = { class: "table-container" };
function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", _hoisted_1$8, [
renderSlot(_ctx.$slots, "default", {}, void 0, true)
]);
}
var UITableContainer = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8], ["__scopeId", "data-v-09f4f8b2"]]);
var UITable_vue_vue_type_style_index_0_scoped_true_lang = "";
const _sfc_main$7 = defineComponent({
name: "UITable"
});
const _hoisted_1$7 = { class: "table-wrapper" };
const _hoisted_2 = { class: "table" };
function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", _hoisted_1$7, [
createElementVNode("table", _hoisted_2, [
renderSlot(_ctx.$slots, "default", {}, void 0, true)
])
]);
}
var UITable = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7], ["__scopeId", "data-v-4dd47a39"]]);
var UITableHeader_vue_vue_type_style_index_0_scoped_true_lang = "";
const _sfc_main$6 = defineComponent({
name: "UITableHeader"
});
const _hoisted_1$6 = { class: "table-header" };
function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("thead", _hoisted_1$6, [
renderSlot(_ctx.$slots, "default", {}, void 0, true)
]);
}
var UITableHeader = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6], ["__scopeId", "data-v-ad06d1e2"]]);
var UITableBody_vue_vue_type_style_index_0_scoped_true_lang = "";
const _sfc_main$5 = defineComponent({
name: "UITableBody"
});
const _hoisted_1$5 = { class: "table-body" };
function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("tbody", _hoisted_1$5, [
renderSlot(_ctx.$slots, "default", {}, void 0, true)
]);
}
var UITableBody = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5], ["__scopeId", "data-v-c9555ba0"]]);
var UITableRow_vue_vue_type_style_index_0_scoped_true_lang = "";
const _sfc_main$4 = defineComponent({
name: "UITableRow"
});
const _hoisted_1$4 = { class: "table-row" };
function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("tr", _hoisted_1$4, [
renderSlot(_ctx.$slots, "default", {}, void 0, true)
]);
}
var UITableRow = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4], ["__scopeId", "data-v-f6e36bd6"]]);
var UITableCell_vue_vue_type_style_index_0_scoped_true_lang = "";
const _sfc_main$3 = defineComponent({
name: "UITableCell"
});
const _hoisted_1$3 = { class: "table-cell" };
function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("td", _hoisted_1$3, [
renderSlot(_ctx.$slots, "default", {}, void 0, true)
]);
}
var UITableCell = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3], ["__scopeId", "data-v-0bf4b56c"]]);
var UITableFooter_vue_vue_type_style_index_0_scoped_true_lang = "";
const _sfc_main$2 = defineComponent({
name: "UITableFooter"
});
const _hoisted_1$2 = { class: "table-footer" };
function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", _hoisted_1$2, [
renderSlot(_ctx.$slots, "default", {}, void 0, true)
]);
}
var UITableFooter = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__scopeId", "data-v-1f686e19"]]);
var UITextarea_vue_vue_type_style_index_0_scoped_true_lang = "";
const _sfc_main$1 = defineComponent({
name: "UITextarea",
props: {
modelValue: { type: String, required: true },
disabled: { type: Boolean, default: false },
valid: { type: Boolean, default: null }
},
emits: ["update:modelValue"],
setup(props, context) {
const hasValid = () => {
return props.valid !== null;
};
const update = computed({
get: () => {
return props.modelValue;
},
set: (value) => {
context.emit("update:modelValue", value);
}
});
const className = computed(() => {
return {
active: !hasValid() && !props.disabled,
disabled: !hasValid() && props.disabled,
valid: hasValid() && props.valid,
invalid: hasValid() && props.valid === false
};
});
return {
className,
update
};
}
});
const _hoisted_1$1 = ["disabled"];
function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
return withDirectives((openBlock(), createElementBlock("textarea", {
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.update = $event),
class: normalizeClass(["textarea-base", _ctx.className]),
disabled: _ctx.disabled
}, " ", 10, _hoisted_1$1)), [
[vModelText, _ctx.update]
]);
}
var UITextarea = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-afdb7a3a"]]);
var WApp_vue_vue_type_style_index_0_scoped_true_lang = "";
const _sfc_main = defineComponent({
name: "WApp",
props: {
dark: { type: Boolean, default: false },
usePreferences: { type: Boolean, default: false }
},
setup(props) {
const setMode = (isDark) => {
if (isDark) {
document.documentElement.className = "";
document.documentElement.classList.add("dark");
} else {
document.documentElement.className = "";
document.documentElement.classList.add();
}
};
watch(() => props.dark, (value) => {
setMode(value);
});
}
});
const _hoisted_1 = { id: "app-container" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", _hoisted_1, [
renderSlot(_ctx.$slots, "default", {}, void 0, true)
]);
}
var WApp = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-6b8cb3a5"]]);
var components = /* @__PURE__ */ Object.freeze({
__proto__: null,
[Symbol.toStringTag]: "Module",
UIAlert,
UIAvatar,
UIBackdrop,
UIBadge,
UIButton,
UICard,
UICardBody,
UIDropdown,
UIDropdownItem,
UIHelperText,
UIInput,
UILabel,
UIModal,
UIModalBody,
UIModalFooter,
UIModalHeader,
UIPagination,
UISelect,
UITableContainer,
UITable,
UITableHeader,
UITableBody,
UITableRow,
UITableCell,
UITableFooter,
UITextarea,
WApp
});
var style = "";
const windmillVue = {
install(app) {
for (const componentName in components) {
const component = components[componentName];
app.component(component.name, component);
}
}
};
export { UIAlert, UIAvatar, UIBackdrop, UIBadge, UIButton, UICard, UICardBody, UIDropdown, UIDropdownItem, UIHelperText, UIInput, UILabel, UIModal, UIModalBody, UIModalFooter, UIModalHeader, UIPagination, UISelect, UITable, UITableBody, UITableCell, UITableContainer, UITableFooter, UITableHeader, UITableRow, UITextarea, WApp, windmillVue as default };