cream-vue-ui
Version:
A beautiful and functional UI component library for Vue 3
1,705 lines • 51.7 kB
JavaScript
import { createElementBlock, openBlock, normalizeClass, createCommentVNode, toDisplayString, renderSlot, createElementVNode, createTextVNode, createBlock, Transition, withCtx, normalizeStyle, Fragment, renderList, createVNode, withDirectives, vShow } from "vue";
const _export_sfc = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
const _sfc_main$8 = {
name: "CButton",
props: {
type: {
type: String,
default: "button",
validator: (value) => ["button", "submit", "reset"].includes(value)
},
variant: {
type: String,
default: "primary",
validator: (value) => [
"primary",
"secondary",
"success",
"warning",
"error",
"info",
"outline",
"text",
"glass",
"soft"
].includes(value)
},
size: {
type: String,
default: "md",
validator: (value) => ["xs", "sm", "md", "lg", "xl"].includes(value)
},
disabled: {
type: Boolean,
default: false
},
block: {
type: Boolean,
default: false
},
rounded: {
type: Boolean,
default: false
},
loading: {
type: Boolean,
default: false
},
loadingType: {
type: String,
default: "spinner",
validator: (value) => ["spinner", "dots", "pulse"].includes(value)
},
icon: {
type: String,
default: ""
},
iconPosition: {
type: String,
default: "left",
validator: (value) => ["left", "right"].includes(value)
},
iconOnly: {
type: Boolean,
default: false
},
tooltip: {
type: String,
default: ""
},
elevation: {
type: String,
default: "md",
validator: (value) => ["none", "sm", "md", "lg", "xl"].includes(value)
}
},
computed: {
classes() {
return [
"c-button",
`c-button--${this.variant}`,
`c-button--${this.size}`,
`c-button--elevation-${this.elevation}`,
{
"c-button--block": this.block,
"c-button--rounded": this.rounded,
"c-button--loading": this.loading,
"c-button--with-icon": this.icon,
"c-button--icon-left": this.icon && this.iconPosition === "left" && !this.iconOnly,
"c-button--icon-right": this.icon && this.iconPosition === "right" && !this.iconOnly,
"c-button--icon-only": this.iconOnly && this.icon,
"c-button--with-tooltip": this.tooltip
}
];
},
loadingClasses() {
return [
"c-button__loader",
`c-button__loader--${this.loadingType}`
];
}
},
methods: {
onClick(event) {
if (this.disabled || this.loading) {
event.preventDefault();
return;
}
this.$emit("click", event);
}
}
};
const _hoisted_1$6 = ["type", "disabled", "title", "aria-label"];
const _hoisted_2$6 = {
key: 0,
class: "c-button__loader-dot"
};
const _hoisted_3$6 = {
key: 1,
class: "c-button__loader-dot"
};
const _hoisted_4$6 = {
key: 2,
class: "c-button__loader-dot"
};
const _hoisted_5$6 = {
key: 1,
class: "c-button__icon"
};
const _hoisted_6$5 = {
key: 2,
class: "c-button__content"
};
const _hoisted_7$4 = {
key: 3,
class: "c-button__icon c-button__icon--right"
};
const _hoisted_8$4 = {
key: 4,
class: "c-button__tooltip"
};
function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("button", {
type: $props.type,
class: normalizeClass($options.classes),
disabled: $props.disabled || $props.loading,
onClick: _cache[0] || (_cache[0] = (...args) => $options.onClick && $options.onClick(...args)),
title: $props.tooltip,
"aria-label": $props.tooltip || void 0
}, [
$props.loading ? (openBlock(), createElementBlock("span", {
key: 0,
class: normalizeClass($options.loadingClasses)
}, [
$props.loadingType === "dots" ? (openBlock(), createElementBlock("span", _hoisted_2$6)) : createCommentVNode("", true),
$props.loadingType === "dots" ? (openBlock(), createElementBlock("span", _hoisted_3$6)) : createCommentVNode("", true),
$props.loadingType === "dots" ? (openBlock(), createElementBlock("span", _hoisted_4$6)) : createCommentVNode("", true)
], 2)) : createCommentVNode("", true),
$props.icon && ($props.iconPosition === "left" || $props.iconOnly) ? (openBlock(), createElementBlock("span", _hoisted_5$6, toDisplayString($props.icon), 1)) : createCommentVNode("", true),
!$props.iconOnly ? (openBlock(), createElementBlock("span", _hoisted_6$5, [
renderSlot(_ctx.$slots, "default")
])) : createCommentVNode("", true),
$props.icon && $props.iconPosition === "right" && !$props.iconOnly ? (openBlock(), createElementBlock("span", _hoisted_7$4, toDisplayString($props.icon), 1)) : createCommentVNode("", true),
$props.tooltip ? (openBlock(), createElementBlock("span", _hoisted_8$4, toDisplayString($props.tooltip), 1)) : createCommentVNode("", true)
], 10, _hoisted_1$6);
}
const Button = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8]]);
const _sfc_main$7 = {
name: "CInput",
data() {
return {
isFocused: false
};
},
props: {
modelValue: {
type: [String, Number],
default: ""
},
type: {
type: String,
default: "text",
validator: (value) => [
"text",
"password",
"email",
"number",
"tel",
"url",
"search",
"date",
"time",
"datetime-local",
"month",
"week"
].includes(value)
},
label: {
type: String,
default: ""
},
placeholder: {
type: String,
default: ""
},
disabled: {
type: Boolean,
default: false
},
readonly: {
type: Boolean,
default: false
},
required: {
type: Boolean,
default: false
},
error: {
type: String,
default: ""
},
success: {
type: Boolean,
default: false
},
size: {
type: String,
default: "md",
validator: (value) => ["xs", "sm", "md", "lg", "xl"].includes(value)
},
icon: {
type: String,
default: ""
},
iconPosition: {
type: String,
default: "left",
validator: (value) => ["left", "right"].includes(value)
},
clearable: {
type: Boolean,
default: false
},
variant: {
type: String,
default: "default",
validator: (value) => ["default", "outlined", "filled", "underlined"].includes(value)
},
floatingLabel: {
type: Boolean,
default: false
},
rounded: {
type: Boolean,
default: false
},
prefix: {
type: String,
default: ""
},
suffix: {
type: String,
default: ""
},
maxLength: {
type: Number,
default: null
},
showCount: {
type: Boolean,
default: false
},
autofocus: {
type: Boolean,
default: false
},
elevation: {
type: String,
default: "none",
validator: (value) => ["none", "sm", "md", "lg", "xl"].includes(value)
}
},
computed: {
inputClasses() {
return [
"c-input__field",
`c-input__field--${this.size}`,
`c-input__field--${this.variant}`,
`c-input__field--elevation-${this.elevation}`,
{
"c-input__field--error": this.error,
"c-input__field--success": this.success,
"c-input__field--with-icon": this.icon,
"c-input__field--with-icon-left": this.icon && this.iconPosition === "left",
"c-input__field--with-icon-right": this.icon && this.iconPosition === "right",
"c-input__field--clearable": this.clearable && this.modelValue,
"c-input__field--rounded": this.rounded,
"c-input__field--with-prefix": this.prefix,
"c-input__field--with-suffix": this.suffix,
"c-input__field--floating": this.floatingLabel && this.label
}
];
},
wrapperClasses() {
return [
"c-input",
`c-input--${this.variant}`,
`c-input--${this.size}`,
{
"c-input--disabled": this.disabled,
"c-input--readonly": this.readonly,
"c-input--error": this.error,
"c-input--success": this.success,
"c-input--floating": this.floatingLabel && this.label,
"c-input--focused": this.isFocused,
"c-input--has-value": !!this.modelValue,
"c-input--with-count": this.showCount && this.maxLength
}
];
},
showClearButton() {
return this.clearable && this.modelValue && !this.disabled && !this.readonly;
},
characterCount() {
if (!this.showCount || this.maxLength === null) return null;
const valueLength = String(this.modelValue || "").length;
return `${valueLength}/${this.maxLength}`;
},
isOverMaxLength() {
if (this.maxLength === null) return false;
return String(this.modelValue || "").length > this.maxLength;
}
},
methods: {
updateValue(event) {
this.$emit("update:modelValue", event.target.value);
},
clearInput() {
this.$emit("update:modelValue", "");
this.$emit("clear");
this.$refs.input.focus();
},
onFocus(event) {
this.isFocused = true;
this.$emit("focus", event);
},
onBlur(event) {
this.isFocused = false;
this.$emit("blur", event);
}
}
};
const _hoisted_1$5 = ["for"];
const _hoisted_2$5 = {
key: 0,
class: "c-input__required"
};
const _hoisted_3$5 = { class: "c-input__wrapper" };
const _hoisted_4$5 = {
key: 0,
class: "c-input__icon c-input__icon--left"
};
const _hoisted_5$5 = {
key: 1,
class: "c-input__prefix"
};
const _hoisted_6$4 = ["id", "type", "value", "placeholder", "disabled", "readonly", "required", "maxlength", "autofocus"];
const _hoisted_7$3 = {
key: 2,
class: "c-input__floating-label"
};
const _hoisted_8$3 = {
key: 0,
class: "c-input__required"
};
const _hoisted_9$3 = {
key: 3,
class: "c-input__suffix"
};
const _hoisted_10$3 = {
key: 4,
class: "c-input__icon c-input__icon--right"
};
const _hoisted_11$2 = { class: "c-input__bottom-row" };
const _hoisted_12$1 = {
key: 0,
class: "c-input__error"
};
function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", {
class: normalizeClass($options.wrapperClasses)
}, [
$props.label ? (openBlock(), createElementBlock("label", {
key: 0,
class: "c-input__label",
for: "input-" + _ctx._uid
}, [
createTextVNode(toDisplayString($props.label) + " ", 1),
$props.required ? (openBlock(), createElementBlock("span", _hoisted_2$5, "*")) : createCommentVNode("", true)
], 8, _hoisted_1$5)) : createCommentVNode("", true),
createElementVNode("div", _hoisted_3$5, [
$props.icon && $props.iconPosition === "left" ? (openBlock(), createElementBlock("span", _hoisted_4$5, toDisplayString($props.icon), 1)) : createCommentVNode("", true),
$props.prefix ? (openBlock(), createElementBlock("span", _hoisted_5$5, toDisplayString($props.prefix), 1)) : createCommentVNode("", true),
createElementVNode("input", {
id: "input-" + _ctx._uid,
ref: "input",
type: $props.type,
value: $props.modelValue,
placeholder: $props.floatingLabel && $props.label ? " " : $props.placeholder,
disabled: $props.disabled,
readonly: $props.readonly,
required: $props.required,
maxlength: $props.maxLength,
autofocus: $props.autofocus,
class: normalizeClass($options.inputClasses),
onInput: _cache[0] || (_cache[0] = (...args) => $options.updateValue && $options.updateValue(...args)),
onFocus: _cache[1] || (_cache[1] = (...args) => $options.onFocus && $options.onFocus(...args)),
onBlur: _cache[2] || (_cache[2] = (...args) => $options.onBlur && $options.onBlur(...args))
}, null, 42, _hoisted_6$4),
$props.floatingLabel && $props.label ? (openBlock(), createElementBlock("span", _hoisted_7$3, [
createTextVNode(toDisplayString($props.label) + " ", 1),
$props.required ? (openBlock(), createElementBlock("span", _hoisted_8$3, "*")) : createCommentVNode("", true)
])) : createCommentVNode("", true),
$props.suffix ? (openBlock(), createElementBlock("span", _hoisted_9$3, toDisplayString($props.suffix), 1)) : createCommentVNode("", true),
$props.icon && $props.iconPosition === "right" ? (openBlock(), createElementBlock("span", _hoisted_10$3, toDisplayString($props.icon), 1)) : createCommentVNode("", true),
$options.showClearButton ? (openBlock(), createElementBlock("button", {
key: 5,
type: "button",
class: "c-input__clear",
onClick: _cache[3] || (_cache[3] = (...args) => $options.clearInput && $options.clearInput(...args)),
"aria-label": "Clear input"
}, " × ")) : createCommentVNode("", true)
]),
createElementVNode("div", _hoisted_11$2, [
$props.error ? (openBlock(), createElementBlock("div", _hoisted_12$1, toDisplayString($props.error), 1)) : createCommentVNode("", true),
$props.showCount && $props.maxLength ? (openBlock(), createElementBlock("div", {
key: 1,
class: normalizeClass(["c-input__count", { "c-input__count--over": $options.isOverMaxLength }])
}, toDisplayString($options.characterCount), 3)) : createCommentVNode("", true)
])
], 2);
}
const Input = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7]]);
const _sfc_main$6 = {
name: "CCard",
props: {
title: {
type: String,
default: ""
},
subtitle: {
type: String,
default: ""
},
image: {
type: String,
default: ""
},
imageAlt: {
type: String,
default: "Card image"
},
imagePosition: {
type: String,
default: "top",
validator: (value) => ["top", "bottom", "left", "right", "background"].includes(value)
},
imageOverlay: {
type: Boolean,
default: false
},
imageAspectRatio: {
type: String,
default: "auto",
validator: (value) => ["auto", "1:1", "4:3", "16:9", "21:9"].includes(value)
},
variant: {
type: String,
default: "default",
validator: (value) => [
"default",
"primary",
"secondary",
"success",
"warning",
"error",
"info",
"outline",
"flat",
"glass"
].includes(value)
},
size: {
type: String,
default: "md",
validator: (value) => ["sm", "md", "lg", "xl"].includes(value)
},
hover: {
type: Boolean,
default: false
},
clickable: {
type: Boolean,
default: false
},
elevation: {
type: String,
default: "sm",
validator: (value) => ["none", "sm", "md", "lg", "xl"].includes(value)
},
borderRadius: {
type: String,
default: "default",
validator: (value) => ["none", "sm", "default", "lg", "xl", "full"].includes(value)
},
horizontal: {
type: Boolean,
default: false
},
gradient: {
type: Boolean,
default: false
}
},
computed: {
cardClasses() {
return [
"c-card",
`c-card--${this.variant}`,
`c-card--${this.size}`,
`c-card--elevation-${this.elevation}`,
`c-card--radius-${this.borderRadius}`,
`c-card--image-${this.imagePosition}`,
{
"c-card--hover": this.hover,
"c-card--clickable": this.clickable,
"c-card--horizontal": this.horizontal,
"c-card--gradient": this.gradient,
"c-card--image-overlay": this.imageOverlay,
[`c-card--image-ratio-${this.imageAspectRatio.replace(":", "-")}`]: this.imageAspectRatio !== "auto"
}
];
},
hasHeader() {
return this.title || this.subtitle || this.$slots.header;
},
hasFooter() {
return this.$slots.footer;
}
},
methods: {
onClick(event) {
if (this.clickable) {
this.$emit("click", event);
}
}
}
};
const _hoisted_1$4 = {
key: 0,
class: "c-card__background"
};
const _hoisted_2$4 = ["src", "alt"];
const _hoisted_3$4 = {
key: 0,
class: "c-card__overlay"
};
const _hoisted_4$4 = {
key: 1,
class: "c-card__image c-card__image--left"
};
const _hoisted_5$4 = ["src", "alt"];
const _hoisted_6$3 = {
key: 0,
class: "c-card__overlay"
};
const _hoisted_7$2 = {
key: 2,
class: "c-card__image"
};
const _hoisted_8$2 = ["src", "alt"];
const _hoisted_9$2 = {
key: 0,
class: "c-card__overlay"
};
const _hoisted_10$2 = { class: "c-card__content" };
const _hoisted_11$1 = {
key: 0,
class: "c-card__header"
};
const _hoisted_12 = {
key: 0,
class: "c-card__title"
};
const _hoisted_13 = {
key: 1,
class: "c-card__subtitle"
};
const _hoisted_14 = { class: "c-card__body" };
const _hoisted_15 = {
key: 1,
class: "c-card__footer"
};
const _hoisted_16 = {
key: 3,
class: "c-card__image c-card__image--right"
};
const _hoisted_17 = ["src", "alt"];
const _hoisted_18 = {
key: 0,
class: "c-card__overlay"
};
const _hoisted_19 = {
key: 4,
class: "c-card__image"
};
const _hoisted_20 = ["src", "alt"];
const _hoisted_21 = {
key: 0,
class: "c-card__overlay"
};
function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", {
class: normalizeClass($options.cardClasses),
onClick: _cache[0] || (_cache[0] = (...args) => $options.onClick && $options.onClick(...args))
}, [
$props.image && $props.imagePosition === "background" ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
createElementVNode("img", {
src: $props.image,
alt: $props.imageAlt
}, null, 8, _hoisted_2$4),
$props.imageOverlay ? (openBlock(), createElementBlock("div", _hoisted_3$4)) : createCommentVNode("", true)
])) : createCommentVNode("", true),
$props.image && $props.imagePosition === "left" && $props.horizontal ? (openBlock(), createElementBlock("div", _hoisted_4$4, [
createElementVNode("img", {
src: $props.image,
alt: $props.imageAlt
}, null, 8, _hoisted_5$4),
$props.imageOverlay ? (openBlock(), createElementBlock("div", _hoisted_6$3)) : createCommentVNode("", true)
])) : createCommentVNode("", true),
$props.image && $props.imagePosition === "top" && !$props.horizontal ? (openBlock(), createElementBlock("div", _hoisted_7$2, [
createElementVNode("img", {
src: $props.image,
alt: $props.imageAlt
}, null, 8, _hoisted_8$2),
$props.imageOverlay ? (openBlock(), createElementBlock("div", _hoisted_9$2)) : createCommentVNode("", true)
])) : createCommentVNode("", true),
createElementVNode("div", _hoisted_10$2, [
$options.hasHeader ? (openBlock(), createElementBlock("div", _hoisted_11$1, [
renderSlot(_ctx.$slots, "header", {}, () => [
$props.title ? (openBlock(), createElementBlock("h3", _hoisted_12, toDisplayString($props.title), 1)) : createCommentVNode("", true),
$props.subtitle ? (openBlock(), createElementBlock("p", _hoisted_13, toDisplayString($props.subtitle), 1)) : createCommentVNode("", true)
])
])) : createCommentVNode("", true),
createElementVNode("div", _hoisted_14, [
renderSlot(_ctx.$slots, "default")
]),
$options.hasFooter ? (openBlock(), createElementBlock("div", _hoisted_15, [
renderSlot(_ctx.$slots, "footer")
])) : createCommentVNode("", true)
]),
$props.image && $props.imagePosition === "right" && $props.horizontal ? (openBlock(), createElementBlock("div", _hoisted_16, [
createElementVNode("img", {
src: $props.image,
alt: $props.imageAlt
}, null, 8, _hoisted_17),
$props.imageOverlay ? (openBlock(), createElementBlock("div", _hoisted_18)) : createCommentVNode("", true)
])) : createCommentVNode("", true),
$props.image && $props.imagePosition === "bottom" && !$props.horizontal ? (openBlock(), createElementBlock("div", _hoisted_19, [
createElementVNode("img", {
src: $props.image,
alt: $props.imageAlt
}, null, 8, _hoisted_20),
$props.imageOverlay ? (openBlock(), createElementBlock("div", _hoisted_21)) : createCommentVNode("", true)
])) : createCommentVNode("", true)
], 2);
}
const Card = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6]]);
const _sfc_main$5 = {
name: "CAlert",
props: {
title: {
type: String,
default: ""
},
type: {
type: String,
default: "info",
validator: (value) => ["info", "success", "warning", "error"].includes(value)
},
dismissible: {
type: Boolean,
default: false
},
icon: {
type: String,
default: ""
},
iconPosition: {
type: String,
default: "left",
validator: (value) => ["left", "right", "top"].includes(value)
},
showIcon: {
type: Boolean,
default: true
},
border: {
type: String,
default: "none",
validator: (value) => ["none", "left", "top", "right", "bottom", "all"].includes(value)
},
rounded: {
type: Boolean,
default: true
},
outlined: {
type: Boolean,
default: false
},
elevation: {
type: String,
default: "none",
validator: (value) => ["none", "sm", "md", "lg", "xl"].includes(value)
},
variant: {
type: String,
default: "default",
validator: (value) => ["default", "filled", "soft", "toast"].includes(value)
},
size: {
type: String,
default: "md",
validator: (value) => ["sm", "md", "lg"].includes(value)
},
closable: {
type: Boolean,
default: false
},
closeIcon: {
type: String,
default: "×"
},
actions: {
type: Array,
default: () => []
},
autoClose: {
type: Number,
default: 0
},
position: {
type: String,
default: "static",
validator: (value) => ["static", "top-right", "top-left", "bottom-right", "bottom-left", "top-center", "bottom-center"].includes(value)
}
},
data() {
return {
visible: true,
autoCloseTimeout: null
};
},
computed: {
alertClasses() {
return [
"c-alert",
`c-alert--${this.type}`,
`c-alert--${this.variant}`,
`c-alert--${this.size}`,
`c-alert--border-${this.border}`,
`c-alert--elevation-${this.elevation}`,
`c-alert--position-${this.position}`,
`c-alert--icon-${this.iconPosition}`,
{
"c-alert--dismissible": this.dismissible || this.closable,
"c-alert--with-icon": (this.icon || this.typeIcon) && this.showIcon,
"c-alert--rounded": this.rounded,
"c-alert--outlined": this.outlined,
"c-alert--with-actions": this.actions.length > 0,
"c-alert--toast": this.variant === "toast",
"c-alert--auto-close": this.autoClose > 0
}
];
},
typeIcon() {
if (this.icon) return this.icon;
const icons = {
info: "ℹ️",
success: "✅",
warning: "⚠️",
error: "❌"
};
return icons[this.type];
},
shouldShowIcon() {
return this.showIcon && (this.icon || this.typeIcon);
},
progressStyle() {
if (this.autoClose <= 0) return {};
return {
animationDuration: `${this.autoClose}ms`
};
}
},
mounted() {
this.setupAutoClose();
},
beforeUnmount() {
this.clearAutoCloseTimeout();
},
methods: {
dismiss() {
this.visible = false;
this.$emit("dismiss");
this.clearAutoCloseTimeout();
},
setupAutoClose() {
if (this.autoClose > 0) {
this.clearAutoCloseTimeout();
this.autoCloseTimeout = setTimeout(() => {
this.dismiss();
}, this.autoClose);
}
},
clearAutoCloseTimeout() {
if (this.autoCloseTimeout) {
clearTimeout(this.autoCloseTimeout);
this.autoCloseTimeout = null;
}
},
handleAction(action) {
if (action.onClick) {
action.onClick();
}
if (action.close) {
this.dismiss();
}
this.$emit("action", action);
}
}
};
const _hoisted_1$3 = {
key: 1,
class: "c-alert__icon-container c-alert__icon-container--top"
};
const _hoisted_2$3 = { class: "c-alert__icon" };
const _hoisted_3$3 = { class: "c-alert__content" };
const _hoisted_4$3 = {
key: 0,
class: "c-alert__icon c-alert__icon--left"
};
const _hoisted_5$3 = { class: "c-alert__message" };
const _hoisted_6$2 = {
key: 0,
class: "c-alert__title"
};
const _hoisted_7$1 = { class: "c-alert__body" };
const _hoisted_8$1 = {
key: 1,
class: "c-alert__actions"
};
const _hoisted_9$1 = ["onClick"];
const _hoisted_10$1 = {
key: 1,
class: "c-alert__icon c-alert__icon--right"
};
function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createBlock(Transition, { name: "c-alert-fade" }, {
default: withCtx(() => [
$data.visible ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass($options.alertClasses),
role: "alert"
}, [
$props.autoClose > 0 ? (openBlock(), createElementBlock("div", {
key: 0,
class: "c-alert__progress",
style: normalizeStyle($options.progressStyle)
}, null, 4)) : createCommentVNode("", true),
$options.shouldShowIcon && $props.iconPosition === "top" ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
createElementVNode("span", _hoisted_2$3, toDisplayString($options.typeIcon), 1)
])) : createCommentVNode("", true),
createElementVNode("div", _hoisted_3$3, [
$options.shouldShowIcon && $props.iconPosition === "left" ? (openBlock(), createElementBlock("span", _hoisted_4$3, toDisplayString($options.typeIcon), 1)) : createCommentVNode("", true),
createElementVNode("div", _hoisted_5$3, [
$props.title ? (openBlock(), createElementBlock("div", _hoisted_6$2, toDisplayString($props.title), 1)) : createCommentVNode("", true),
createElementVNode("div", _hoisted_7$1, [
renderSlot(_ctx.$slots, "default")
]),
$props.actions.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_8$1, [
(openBlock(true), createElementBlock(Fragment, null, renderList($props.actions, (action, index) => {
return openBlock(), createElementBlock("button", {
key: index,
type: "button",
class: normalizeClass(["c-alert__action", [
`c-alert__action--${action.variant || "default"}`,
{ "c-alert__action--text": action.text }
]]),
onClick: ($event) => $options.handleAction(action)
}, toDisplayString(action.label), 11, _hoisted_9$1);
}), 128))
])) : createCommentVNode("", true)
]),
$options.shouldShowIcon && $props.iconPosition === "right" ? (openBlock(), createElementBlock("span", _hoisted_10$1, toDisplayString($options.typeIcon), 1)) : createCommentVNode("", true)
]),
$props.dismissible || $props.closable ? (openBlock(), createElementBlock("button", {
key: 2,
type: "button",
class: "c-alert__close",
onClick: _cache[0] || (_cache[0] = (...args) => $options.dismiss && $options.dismiss(...args)),
"aria-label": "Close alert"
}, toDisplayString($props.closeIcon), 1)) : createCommentVNode("", true)
], 2)) : createCommentVNode("", true)
]),
_: 3
});
}
const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5]]);
const _sfc_main$4 = {
name: "CBadge",
props: {
variant: {
type: String,
default: "primary",
validator: (value) => [
"primary",
"secondary",
"success",
"warning",
"error",
"info",
"neutral",
"light",
"dark"
].includes(value)
},
size: {
type: String,
default: "md",
validator: (value) => ["xs", "sm", "md", "lg"].includes(value)
},
rounded: {
type: Boolean,
default: true
},
pill: {
type: Boolean,
default: false
},
outlined: {
type: Boolean,
default: false
},
dot: {
type: Boolean,
default: false
},
position: {
type: String,
default: "",
validator: (value) => ["", "top-right", "top-left", "bottom-right", "bottom-left"].includes(value)
},
overlap: {
type: Boolean,
default: false
},
max: {
type: Number,
default: null
},
invisible: {
type: Boolean,
default: false
}
},
computed: {
classes() {
return [
"c-badge",
`c-badge--${this.variant}`,
`c-badge--${this.size}`,
{
"c-badge--rounded": this.rounded,
"c-badge--pill": this.pill,
"c-badge--outlined": this.outlined,
"c-badge--dot": this.dot,
"c-badge--positioned": this.position,
[`c-badge--${this.position}`]: this.position,
"c-badge--overlap": this.overlap,
"c-badge--invisible": this.invisible
}
];
},
displayContent() {
if (this.dot) return "";
if (this.max !== null && !isNaN(this.$slots.default[0].text)) {
const value = parseInt(this.$slots.default[0].text, 10);
if (value > this.max) {
return `${this.max}+`;
}
}
return null;
}
}
};
function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("span", {
class: normalizeClass($options.classes)
}, [
$options.displayContent === null ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
createTextVNode(toDisplayString($options.displayContent), 1)
], 64))
], 2);
}
const Badge = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
const _sfc_main$3 = {
name: "CAvatar",
props: {
src: {
type: String,
default: ""
},
alt: {
type: String,
default: "Avatar"
},
size: {
type: String,
default: "md",
validator: (value) => ["xs", "sm", "md", "lg", "xl", "custom"].includes(value)
},
customSize: {
type: String,
default: ""
},
shape: {
type: String,
default: "circle",
validator: (value) => ["circle", "square", "rounded"].includes(value)
},
text: {
type: String,
default: ""
},
icon: {
type: String,
default: ""
},
color: {
type: String,
default: ""
},
bgColor: {
type: String,
default: ""
},
variant: {
type: String,
default: "default",
validator: (value) => [
"default",
"primary",
"secondary",
"success",
"warning",
"error",
"info",
"light",
"dark"
].includes(value)
},
bordered: {
type: Boolean,
default: false
},
borderColor: {
type: String,
default: ""
},
status: {
type: String,
default: "",
validator: (value) => ["", "online", "offline", "away", "busy", "custom"].includes(value)
},
statusColor: {
type: String,
default: ""
},
statusPosition: {
type: String,
default: "bottom-right",
validator: (value) => ["top-right", "top-left", "bottom-right", "bottom-left"].includes(value)
},
clickable: {
type: Boolean,
default: false
},
loading: {
type: Boolean,
default: false
},
fallbackStrategy: {
type: String,
default: "text",
validator: (value) => ["text", "icon", "color"].includes(value)
}
},
data() {
return {
imageError: false
};
},
computed: {
classes() {
return [
"c-avatar",
`c-avatar--${this.size}`,
`c-avatar--${this.shape}`,
`c-avatar--${this.variant}`,
{
"c-avatar--bordered": this.bordered,
"c-avatar--clickable": this.clickable,
"c-avatar--loading": this.loading,
"c-avatar--with-status": this.status,
[`c-avatar--status-${this.status}`]: this.status,
[`c-avatar--status-${this.statusPosition}`]: this.status
}
];
},
styles() {
const styles = {};
if (this.size === "custom" && this.customSize) {
styles.width = this.customSize;
styles.height = this.customSize;
styles.fontSize = `calc(${this.customSize} * 0.4)`;
}
if (this.color) {
styles.color = this.color;
}
if (this.bgColor) {
styles.backgroundColor = this.bgColor;
}
if (this.bordered && this.borderColor) {
styles.borderColor = this.borderColor;
}
return styles;
},
statusStyles() {
return this.statusColor ? { backgroundColor: this.statusColor } : {};
},
showImage() {
return this.src && !this.imageError;
},
showText() {
return !this.showImage && (this.text || this.generateInitials()) && (this.fallbackStrategy === "text" || !this.icon);
},
showIcon() {
return !this.showImage && this.icon && (this.fallbackStrategy === "icon" || !this.text && !this.generateInitials());
},
displayText() {
return this.text || this.generateInitials();
}
},
methods: {
generateInitials() {
if (!this.alt || this.alt === "Avatar") return "";
return this.alt.split(" ").map((word) => word.charAt(0)).join("").toUpperCase().substring(0, 2);
},
handleImageError() {
this.imageError = true;
this.$emit("error");
},
handleClick(event) {
if (this.clickable) {
this.$emit("click", event);
}
}
}
};
const _hoisted_1$2 = ["aria-label"];
const _hoisted_2$2 = {
key: 0,
class: "c-avatar__loader"
};
const _hoisted_3$2 = ["src", "alt"];
const _hoisted_4$2 = {
key: 2,
class: "c-avatar__text"
};
const _hoisted_5$2 = {
key: 3,
class: "c-avatar__icon"
};
const _hoisted_6$1 = {
key: 4,
class: "c-avatar__fallback"
};
function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", {
class: normalizeClass($options.classes),
style: normalizeStyle($options.styles),
onClick: _cache[1] || (_cache[1] = (...args) => $options.handleClick && $options.handleClick(...args)),
role: "img",
"aria-label": $props.alt
}, [
$props.loading ? (openBlock(), createElementBlock("div", _hoisted_2$2)) : $options.showImage ? (openBlock(), createElementBlock("img", {
key: 1,
src: $props.src,
alt: $props.alt,
class: "c-avatar__image",
onError: _cache[0] || (_cache[0] = (...args) => $options.handleImageError && $options.handleImageError(...args))
}, null, 40, _hoisted_3$2)) : $options.showText ? (openBlock(), createElementBlock("span", _hoisted_4$2, toDisplayString($options.displayText), 1)) : $options.showIcon ? (openBlock(), createElementBlock("span", _hoisted_5$2, toDisplayString($props.icon), 1)) : (openBlock(), createElementBlock("span", _hoisted_6$1)),
$props.status ? (openBlock(), createElementBlock("span", {
key: 5,
class: normalizeClass(["c-avatar__status", `c-avatar__status--${$props.status}`]),
style: normalizeStyle($options.statusStyles)
}, null, 6)) : createCommentVNode("", true)
], 14, _hoisted_1$2);
}
const Avatar = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
const _sfc_main$2 = {
name: "CToggle",
props: {
modelValue: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
size: {
type: String,
default: "md",
validator: (value) => ["sm", "md", "lg"].includes(value)
},
variant: {
type: String,
default: "primary",
validator: (value) => [
"primary",
"secondary",
"success",
"warning",
"error",
"info",
"neutral"
].includes(value)
},
label: {
type: String,
default: ""
},
labelPosition: {
type: String,
default: "right",
validator: (value) => ["left", "right"].includes(value)
},
onLabel: {
type: String,
default: ""
},
offLabel: {
type: String,
default: ""
},
name: {
type: String,
default: ""
},
required: {
type: Boolean,
default: false
},
loading: {
type: Boolean,
default: false
},
icon: {
type: Boolean,
default: false
},
square: {
type: Boolean,
default: false
},
readonly: {
type: Boolean,
default: false
},
id: {
type: String,
default: () => `c-toggle-${Math.random().toString(36).substring(2, 9)}`
}
},
computed: {
wrapperClasses() {
return [
"c-toggle-wrapper",
`c-toggle-wrapper--${this.size}`,
{
"c-toggle-wrapper--disabled": this.disabled,
"c-toggle-wrapper--loading": this.loading,
"c-toggle-wrapper--readonly": this.readonly,
[`c-toggle-wrapper--label-${this.labelPosition}`]: this.label
}
];
},
toggleClasses() {
return [
"c-toggle",
`c-toggle--${this.size}`,
`c-toggle--${this.variant}`,
{
"c-toggle--checked": this.modelValue,
"c-toggle--disabled": this.disabled,
"c-toggle--loading": this.loading,
"c-toggle--readonly": this.readonly,
"c-toggle--with-icon": this.icon,
"c-toggle--square": this.square
}
];
},
ariaChecked() {
return this.modelValue ? "true" : "false";
},
displayOnLabel() {
return this.onLabel || this.label;
},
displayOffLabel() {
return this.offLabel || this.label;
}
},
methods: {
toggle() {
if (this.disabled || this.loading || this.readonly) return;
this.$emit("update:modelValue", !this.modelValue);
this.$emit("change", !this.modelValue);
},
onKeyDown(event) {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
this.toggle();
}
}
}
};
const _hoisted_1$1 = ["for"];
const _hoisted_2$1 = ["aria-checked", "aria-disabled", "aria-readonly", "tabindex", "id"];
const _hoisted_3$1 = ["checked", "disabled", "name", "required", "id"];
const _hoisted_4$1 = { class: "c-toggle__track" };
const _hoisted_5$1 = {
key: 0,
class: "c-toggle__label-on"
};
const _hoisted_6 = {
key: 1,
class: "c-toggle__label-off"
};
const _hoisted_7 = { class: "c-toggle__thumb" };
const _hoisted_8 = {
key: 0,
class: "c-toggle__loader"
};
const _hoisted_9 = {
key: 1,
class: "c-toggle__icon c-toggle__icon--on"
};
const _hoisted_10 = {
key: 2,
class: "c-toggle__icon c-toggle__icon--off"
};
const _hoisted_11 = ["for"];
function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", {
class: normalizeClass($options.wrapperClasses)
}, [
$props.label && $props.labelPosition === "left" ? (openBlock(), createElementBlock("label", {
key: 0,
for: $props.id,
class: "c-toggle__label c-toggle__label--left"
}, toDisplayString($props.label), 9, _hoisted_1$1)) : createCommentVNode("", true),
createElementVNode("div", {
class: normalizeClass($options.toggleClasses),
"aria-checked": $options.ariaChecked,
"aria-disabled": $props.disabled,
"aria-readonly": $props.readonly,
role: "switch",
tabindex: $props.disabled ? -1 : 0,
onClick: _cache[1] || (_cache[1] = (...args) => $options.toggle && $options.toggle(...args)),
onKeydown: _cache[2] || (_cache[2] = (...args) => $options.onKeyDown && $options.onKeyDown(...args)),
id: $props.id
}, [
createElementVNode("input", {
type: "checkbox",
checked: $props.modelValue,
disabled: $props.disabled || $props.readonly,
name: $props.name,
required: $props.required,
class: "c-toggle__input",
id: `${$props.id}-input`,
onChange: _cache[0] || (_cache[0] = (...args) => $options.toggle && $options.toggle(...args))
}, null, 40, _hoisted_3$1),
createElementVNode("div", _hoisted_4$1, [
$props.onLabel ? (openBlock(), createElementBlock("span", _hoisted_5$1, toDisplayString($props.onLabel), 1)) : createCommentVNode("", true),
$props.offLabel ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString($props.offLabel), 1)) : createCommentVNode("", true)
]),
createElementVNode("div", _hoisted_7, [
$props.loading ? (openBlock(), createElementBlock("div", _hoisted_8)) : $props.icon && $props.modelValue ? (openBlock(), createElementBlock("span", _hoisted_9, "✓")) : $props.icon && !$props.modelValue ? (openBlock(), createElementBlock("span", _hoisted_10, "✕")) : createCommentVNode("", true)
])
], 42, _hoisted_2$1),
$props.label && $props.labelPosition === "right" ? (openBlock(), createElementBlock("label", {
key: 1,
for: $props.id,
class: "c-toggle__label c-toggle__label--right"
}, toDisplayString($props.label), 9, _hoisted_11)) : createCommentVNode("", true)
], 2);
}
const Toggle = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
const _sfc_main$1 = {
name: "CAccordion",
props: {
multiple: {
type: Boolean,
default: false
},
variant: {
type: String,
default: "default",
validator: (value) => [
"default",
"bordered",
"separated",
"elevated",
"minimal"
].includes(value)
},
size: {
type: String,
default: "md",
validator: (value) => ["sm", "md", "lg"].includes(value)
},
iconPosition: {
type: String,
default: "right",
validator: (value) => ["left", "right"].includes(value)
},
customIcon: {
type: String,
default: ""
},
disabled: {
type: Boolean,
default: false
},
flush: {
type: Boolean,
default: false
},
rounded: {
type: Boolean,
default: true
},
expandIcon: {
type: String,
default: "+"
},
collapseIcon: {
type: String,
default: "−"
},
modelValue: {
type: [Array, Number, String],
default: () => []
}
},
provide() {
const self = this;
return {
accordion: {
get activeItems() {
return self.localActiveItems;
},
multiple: this.multiple,
variant: this.variant,
size: this.size,
iconPosition: this.iconPosition,
customIcon: this.customIcon,
disabled: this.disabled,
expandIcon: this.expandIcon,
collapseIcon: this.collapseIcon,
toggleItem: this.toggleItem
}
};
},
data() {
return {
localActiveItems: Array.isArray(this.modelValue) ? [...this.modelValue] : [this.modelValue]
};
},
computed: {
classes() {
return [
"c-accordion",
`c-accordion--${this.variant}`,
`c-accordion--${this.size}`,
{
"c-accordion--flush": this.flush,
"c-accordion--rounded": this.rounded && !this.flush,
"c-accordion--disabled": this.disabled
}
];
}
},
watch: {
modelValue: {
handler(newValue) {
this.localActiveItems = Array.isArray(newValue) ? [...newValue] : [newValue];
},
deep: true
}
},
methods: {
toggleItem(itemKey) {
if (this.disabled) return;
const index = this.localActiveItems.indexOf(itemKey);
if (index > -1) {
if (this.multiple) {
const newActiveItems = [...this.localActiveItems];
newActiveItems.splice(index, 1);
this.updateActiveItems(newActiveItems);
} else {
this.updateActiveItems([]);
}
} else {
if (this.multiple) {
this.updateActiveItems([...this.localActiveItems, itemKey]);
} else {
this.updateActiveItems([itemKey]);
}
}
},
updateActiveItems(items) {
this.localActiveItems = items;
this.$emit("update:modelValue", this.multiple ? items : items.length ? items[0] : null);
this.$emit("change", this.multiple ? items : items.length ? items[0] : null);
}
}
};
function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", {
class: normalizeClass($options.classes),
role: "tablist",
"aria-multiselectable": "true"
}, [
renderSlot(_ctx.$slots, "default")
], 2);
}
const Accordion = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
const _sfc_main = {
name: "CAccordionItem",
inject: ["accordion"],
props: {
title: {
type: String,
default: ""
},
itemKey: {
type: [String, Number],
default: () => `item-${Math.random().toString(36).substring(2, 9)}`
},
disabled: {
type: Boolean,
default: false
},
icon: {
type: String,
default: ""
}
},
computed: {
isActive() {
if (Array.isArray(this.accordion.activeItems)) {
return this.accordion.activeItems.includes(this.itemKey);
}
return this.accordion.activeItems === this.itemKey;
},
isDisabled() {
return this.disabled || this.accordion.disabled;
},
headerClasses() {
return [
"c-accordion-item__header",
{
"c-accordion-item__header--active": this.isActive,
"c-accordion-item__header--disabled": this.isDisabled,
[`c-accordion-item__header--icon-${this.accordion.iconPosition}`]: true
}
];
},
contentClasses() {
return [
"c-accordion-item__content",
{
"c-accordion-item__content--active": this.isActive
}
];
},
itemClasses() {
return [
"c-accordion-item",
{
"c-accordion-item--active": this.isActive,
"c-accordion-item--disabled": this.isDisabled
}
];
},
displayIcon() {
if (this.icon) return this.icon;
if (this.accordion.customIcon) return this.accordion.customIcon;
return this.isActive ? this.accordion.collapseIcon : this.accordion.expandIcon;
}
},
methods: {
toggle() {
if (!this.isDisabled) {
this.accordion.toggleItem(this.itemKey);
}
},
onKeyDown(event) {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
this.toggle();
}
},
onEnter(el) {
el.style.height = "0";
el.style.opacity = "0";
el.style.transform = "scale(0.98)";
try {
const setTimeoutFn = typeof window !== "undefined" ? window.setTimeout : typeof global !== "undefined" ? global.setTimeout : typeof setTimeout !== "undefined" ? setTimeout : null;
if (setTimeoutFn) {
setTimeoutFn(() => {
el.style.height = el.scrollHeight + "px";
el.style.opacity = "1";
el.style.transform = "scale(1)";
}, 10);
} else {
el.style.height = el.scrollHeight + "px";
el.style.opacity = "1";
el.style.transform = "scale(1)";
}
} catch (e) {
el.style.height = el.scrollHeight + "px";
el.style.opacity = "1";
el.style.transform = "scale(1)";
console.error("Error in accordion animation:", e);
}
},
onAfterEnter(el) {
el.style.height = "auto";
el.style.overflow = "visible";
},
onBeforeLeave(el) {
el.style.height = el.scrollHeight + "px";
el.style.overflow = "hidden";
},
onLeave(el) {
el.style.height = "0";
el.style.opacity = "0";
el.style.transform = "scale(0.98)";
}
}
};
const _hoisted_1 = ["aria-expanded", "aria-disabled", "tabindex"];
const _hoisted_2 = {
key: 0,
class: "c-accordion-item__icon c-accordion-item__icon--left"
};
const _hoisted_3 = { class: "c-accordion-item__title" };
const _hoisted_4 = {
key: 1,
class: "c-accordion-item__icon c-accordion-item__icon--right"
};
const _hoisted_5 = { class: "c-accordion-item__body" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", {
class: normalizeClass($options.itemClasses)
}, [
createElementVNode("div", {
class: normalizeClass($options.headerClasses),
onClick: _cache[0] || (_cache[0] = (...args) => $options.toggle && $options.toggle(...args)),
onKeydown: _cache[1] || (_cache[1] = (...args) => $options.onKeyDown && $options.onKeyDown(...args)),
role: "tab",
"aria-expanded": $options.isActive ? "true" : "false",
"aria-disabled": $options.isDisabled ? "true" : "false",
tabindex: $options.isDisabled ? -1 : 0
}, [
$options.accordion.iconPosition === "left" ? (openBlock(), createElementBlock