vue-material-adapter
Version:
Vue 3 wrapper arround Material Components for the Web
1,570 lines (1,530 loc) • 250 kB
JavaScript
import { resolveDynamicComponent, h, ref, computed, onMounted, onBeforeUnmount, openBlock, createElementBlock, renderSlot, normalizeProps, guardReactiveProps, mergeProps, reactive, watch, toRefs, resolveComponent, normalizeClass, normalizeStyle, createVNode, withCtx, createElementVNode, toDisplayString, createCommentVNode, withModifiers, shallowReactive, defineComponent, createBlock, toRef, createSlots, createTextVNode, inject, getCurrentInstance, Fragment, provide, renderList, nextTick, toHandlers, watchEffect } from 'vue';
import { MDCFormFieldFoundation } from '@material/form-field/foundation.js';
import { MDCBannerFoundation } from '@material/banner/index.js';
import { FocusTrap } from '@material/dom/focus-trap.js';
import { applyPassive } from '@material/dom/events.js';
import { matches, closest } from '@material/dom/ponyfill.js';
import { MDCRippleFoundation } from '@material/ripple/index.js';
import { supportsCssVariables } from '@material/ripple/util.js';
import { getCorrectEventName } from '@material/animation/index.js';
import { MDCCheckboxFoundation } from '@material/checkbox/foundation.js';
import { MDCChipPrimaryActionFoundation, MDCChipTrailingActionFoundation } from '@material/chips/action/index.js';
import { MDCChipSetFoundation } from '@material/chips/chip-set/index.js';
import { announce } from '@material/dom/announce.js';
import { MDCChipFoundation } from '@material/chips/chip/foundation.js';
import { MDCCircularProgressFoundation } from '@material/circular-progress/foundation.js';
import { cssClasses as cssClasses$7, MDCDataTableFoundation, selectors, dataAttributes, SortValue, messages } from '@material/data-table/index.js';
import { MDCDialogFoundation } from '@material/dialog/foundation.js';
import * as util from '@material/dialog/util.js';
import { MDCDismissibleDrawerFoundation } from '@material/drawer/dismissible/foundation.js';
import { MDCModalDrawerFoundation } from '@material/drawer/modal/foundation.js';
import * as util$1 from '@material/drawer/util.js';
import { MDCListFoundation } from '@material/list/foundation.js';
import { MDCFloatingLabelFoundation } from '@material/floating-label/foundation.js';
import { MDCIconButtonToggleFoundation } from '@material/icon-button/foundation.js';
import { MDCLineRippleFoundation } from '@material/line-ripple/foundation.js';
import { MDCLinearProgressFoundation } from '@material/linear-progress/foundation.js';
import { cssClasses as cssClasses$8, MDCListFoundation as MDCListFoundation$1, strings as strings$b } from '@material/list/index.js';
import { getCorrectPropertyName } from '@material/animation/util.js';
import { MDCMenuSurfaceFoundation } from '@material/menu-surface/foundation.js';
import { MDCMenuFoundation } from '@material/menu/foundation.js';
import { MDCNotchedOutlineFoundation } from '@material/notched-outline/foundation.js';
import { MDCRadioFoundation } from '@material/radio/foundation.js';
import { MDCSegmentedButtonSegmentFoundation } from '@material/segmented-button/segment/index.js';
import { MDCSegmentedButtonFoundation } from '@material/segmented-button/index.js';
import { MDCSelectFoundation } from '@material/select/foundation.js';
import { MDCSelectHelperTextFoundation } from '@material/select/helper-text/foundation.js';
import { MDCSelectIconFoundation } from '@material/select/icon/foundation.js';
import { MDCSliderFoundation, cssClasses as cssClasses$9, Thumb, events } from '@material/slider';
import { MDCSnackbarFoundation } from '@material/snackbar/foundation.js';
import { CssClasses, MDCSwitchRenderFoundation } from '@material/switch/index.js';
import { MDCTabBarFoundation } from '@material/tab-bar/foundation.js';
import { MDCFadingTabIndicatorFoundation } from '@material/tab-indicator/fading-foundation.js';
import { MDCTabIndicatorFoundation } from '@material/tab-indicator/foundation.js';
import { MDCSlidingTabIndicatorFoundation } from '@material/tab-indicator/sliding-foundation.js';
import { MDCTabScrollerFoundation } from '@material/tab-scroller/foundation.js';
import * as util$2 from '@material/tab-scroller/util.js';
import MDCTabFoundation from '@material/tab/foundation.js';
import { MDCTextFieldCharacterCounterFoundation } from '@material/textfield/character-counter/foundation.js';
import { MDCTextFieldHelperTextFoundation } from '@material/textfield/helper-text/foundation.js';
import { MDCTextFieldIconFoundation } from '@material/textfield/icon/foundation.js';
import { MDCTextFieldFoundation } from '@material/textfield/foundation.js';
import { MDCTooltipFoundation, events as events$1, CssClasses as CssClasses$1 } from '@material/tooltip';
import { MDCFixedTopAppBarFoundation } from '@material/top-app-bar/fixed/foundation.js';
import { MDCShortTopAppBarFoundation } from '@material/top-app-bar/short/foundation.js';
import { MDCTopAppBarFoundation } from '@material/top-app-bar/standard/foundation.js';
function BasePlugin(components) {
return {
version: "__VERSION__",
install: (vm) => {
for (const [key, component] of Object.entries(components)) {
const name = key.replace(/([\da-z])([A-Z])/g, "$1-$2").toLowerCase();
const [pfx, ...rest] = name.split("-");
const mdcName = ["mdc", ...rest].join("-");
const mcwName = ["mcw", ...rest].join("-");
const haveComponent = vm._context.components[mcwName];
if (!haveComponent) {
vm.component(mcwName, component);
vm.component(mdcName, component);
}
}
},
components
};
}
function emitCustomEvent(element, eventType, eventData, shouldBubble = false) {
if (element) {
eventType = eventType.toLowerCase();
const event_ = typeof CustomEvent === "function" ? new CustomEvent(eventType, {
detail: eventData,
bubbles: shouldBubble
}) : createCustomEvent(eventType, shouldBubble, eventData);
element.dispatchEvent(event_);
}
}
const createCustomEvent = (eventType, shouldBubble, eventData) => {
const event_ = document.createEvent("CustomEvent");
return event_.initCustomEvent(eventType, shouldBubble, false, eventData);
};
const CustomLink = {
name: "custom-link",
props: {
tag: String,
to: [String, Object]
},
setup(props, { slots, attrs }) {
return () => {
var _a;
const { to, href, tag } = props;
const routerLink = resolveDynamicComponent("router-link");
if (to && routerLink) {
const rtag = tag != null ? tag : "a";
return h(
routerLink,
{
custom: true,
...attrs,
to
},
{
default: (props2) => {
var _a2;
return h(
rtag,
{
...attrs,
onClick: (event_) => {
event_.__itemId = attrs.itemId;
props2.navigate(event_);
}
},
(_a2 = slots.default) == null ? void 0 : _a2.call(slots)
);
}
}
);
}
const element = href ? "a" : tag != null ? tag : "a";
const role = href ? "button" : element === "button" ? void 0 : "button";
const children = (_a = slots.default) == null ? void 0 : _a.call(slots);
return h(element, { ...attrs, role }, { default: () => children });
};
}
};
var formFieldWrapper = {
props: {
activate: Function,
deactivate: Function,
alignEnd: Boolean,
forId: String
},
inheritAttrs: false,
setup(props, { slots, attrs }) {
const labelElement = ref();
let formField;
const hasLabel = !!slots.label;
const formFieldClasses = computed(() => {
return {
"mdc-form-field": hasLabel,
"mdc-form-field--align-end": hasLabel && props.alignEnd
};
});
onMounted(() => {
if (props.hasLabel) {
formField = new MDCFormFieldFoundation({
registerInteractionHandler: (type, handler) => {
labelElement.value.addEventListener(type, handler);
},
deregisterInteractionHandler: (type, handler) => {
labelElement.value.removeEventListener(type, handler);
},
activateInputRipple: () => {
props == null ? void 0 : props.activate();
},
deactivateInputRipple: () => {
props == null ? void 0 : props.deactivate();
}
});
formField.init();
}
});
onBeforeUnmount(() => {
formField == null ? void 0 : formField.destroy();
});
return () => {
var _a, _b;
const cl = {};
if (attrs.class) {
for (const c of attrs.class.split(" ")) {
cl[c] = 1;
}
}
if (hasLabel) {
return h(
"div",
{
class: {
...formFieldClasses.value,
...cl
}
},
[
(_a = slots.default) == null ? void 0 : _a.call(slots),
h(
"label",
{
for: props.forId,
ref: labelElement
},
[(_b = slots.label) == null ? void 0 : _b.call(slots)]
)
]
);
}
return slots.default();
};
}
};
var touchWrapper = {
inheritAttrs: false,
props: { isTouch: Boolean },
setup(props, { slots }) {
return () => {
if (props.isTouch) {
return h("div", { class: "mdc-touch-target-wrapper" }, [
slots.default()
]);
}
return slots.default();
};
}
};
var index$1 = /*#__PURE__*/Object.freeze({
__proto__: null,
BasePlugin: BasePlugin,
emitCustomEvent: emitCustomEvent,
CustomLink: CustomLink,
formFieldWrapper: formFieldWrapper,
touchWrapper: touchWrapper
});
var script$r = {
inheritAttrs: false,
props: {
fixed: Boolean
},
setup() {
return {};
}
};
const _hoisted_1$n = {
key: 0,
class: "mdc-banner__fixed"
};
function render$r(_ctx, _cache, $props, $setup, $data, $options) {
return $props.fixed ? (openBlock(), createElementBlock("div", _hoisted_1$n, [
renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(_ctx.$attrs)))
])) : renderSlot(_ctx.$slots, "default", normalizeProps(mergeProps({ key: 1 }, _ctx.$attrs)));
}
script$r.render = render$r;
script$r.__file = "src/banner/banner-content.vue";
const focusTrapFactory_$2 = (element, options) => new FocusTrap(element, options);
var script$q = {
name: "mcw-banner",
props: {
centered: Boolean,
modelValue: Boolean,
text: String,
primaryAction: String,
secondaryAction: String,
mobile: Boolean,
fixed: Boolean,
disableAutoClose: Boolean,
icon: { type: String, default: () => "" }
},
components: { bannerContent: script$r },
setup(props, { emit }) {
const uiState = reactive({
classes: {
"mdc-banner--centered": props.centered,
"mdc-banner--mobile-stacked": props.mobile
},
styles: {},
root: void 0,
contentEl: void 0,
primaryActionEl: void 0
});
let foundation;
let focusTrap;
const onOpen = (nv) => {
if (nv) {
foundation.open();
} else {
foundation.close(nv);
}
};
const close = (reason) => {
foundation.close(reason);
};
const onContentClick = (target) => {
if (target == 1) {
foundation.handleSecondaryActionClick(props.disableAutoClose);
} else {
foundation.handlePrimaryActionClick(props.disableAutoClose);
}
};
const adapter = {
addClass: (className) => {
uiState.classes = { ...uiState.classes, [className]: true };
uiState.root.classList.add(className);
},
getContentHeight: () => {
return uiState.contentEl.offsetHeight;
},
notifyClosed: (reason) => {
emit("mdcbanner:closed", { reason });
},
notifyClosing: (reason) => {
emit("update:modelValue", false);
emit("mdcbanner:closing", { reason });
},
notifyOpened: () => emit("mdcbanner:opened", {}),
notifyOpening: () => {
emit("mdcbanner:opening", {});
},
notifyActionClicked: (action) => {
emit("mdcbanner:actionclicked", { action });
},
releaseFocus: () => {
focusTrap.releaseFocus();
},
removeClass: (className) => {
const { [className]: removed, ...rest } = uiState.classes;
uiState.classes = rest;
},
setStyleProperty: (property, value) => uiState.styles = { ...uiState.styles, [property]: value },
trapFocus: () => {
focusTrap.trapFocus();
}
};
const haveIcon = computed(() => !!props.icon);
watch(
() => props.modelValue,
(nv) => {
onOpen(nv);
}
);
onMounted(() => {
focusTrap = focusTrapFactory_$2(uiState.root, {
initialFocusEl: uiState.primaryActionEl
});
foundation = new MDCBannerFoundation(adapter);
foundation.init();
});
onBeforeUnmount(() => {
foundation == null ? void 0 : foundation.destroy();
});
return { ...toRefs(uiState), onContentClick, haveIcon, close };
}
};
const _hoisted_1$m = {
class: "mdc-banner__content",
role: "alertdialog",
"aria-live": "assertive",
ref: "contentEl"
};
const _hoisted_2$l = { class: "mdc-banner__graphic-text-wrapper" };
const _hoisted_3$i = {
key: 0,
class: "mdc-banner__graphic",
role: "img",
alt: ""
};
const _hoisted_4$d = { class: "material-icons mdc-banner__icon" };
const _hoisted_5$a = { class: "mdc-banner__text" };
const _hoisted_6$9 = { class: "mdc-banner__actions" };
const _hoisted_7$6 = /* @__PURE__ */ createElementVNode("div", { class: "mdc-button__ripple" }, null, -1);
const _hoisted_8$4 = { class: "mdc-button__label" };
const _hoisted_9$3 = /* @__PURE__ */ createElementVNode("div", { class: "mdc-button__ripple" }, null, -1);
const _hoisted_10$2 = { class: "mdc-button__label" };
function render$q(_ctx, _cache, $props, $setup, $data, $options) {
const _component_banner_content = resolveComponent("banner-content");
return openBlock(), createElementBlock("div", {
ref: "root",
class: normalizeClass(["mdc-banner", _ctx.classes]),
role: "banner",
style: normalizeStyle(_ctx.styles)
}, [
createVNode(_component_banner_content, { fixed: _ctx.fixed }, {
default: withCtx(() => [
createElementVNode("div", _hoisted_1$m, [
createElementVNode("div", _hoisted_2$l, [
_ctx.haveIcon ? (openBlock(), createElementBlock("div", _hoisted_3$i, [
createElementVNode("i", _hoisted_4$d, toDisplayString(_ctx.icon), 1)
])) : createCommentVNode("v-if", true),
createElementVNode("div", _hoisted_5$a, toDisplayString(_ctx.text), 1)
]),
createElementVNode("div", _hoisted_6$9, [
_ctx.secondaryAction ? (openBlock(), createElementBlock("button", {
key: 0,
type: "button",
class: "mdc-button mdc-banner__secondary-action",
onClick: _cache[0] || (_cache[0] = withModifiers(($event) => _ctx.onContentClick(1), ["stop"]))
}, [
_hoisted_7$6,
createElementVNode("div", _hoisted_8$4, toDisplayString(_ctx.secondaryAction), 1)
])) : createCommentVNode("v-if", true),
createElementVNode("button", {
type: "button",
class: "mdc-button mdc-banner__primary-action",
ref: "primaryActionEl",
onClick: _cache[1] || (_cache[1] = withModifiers(($event) => _ctx.onContentClick(0), ["stop"]))
}, [
_hoisted_9$3,
createElementVNode("div", _hoisted_10$2, toDisplayString(_ctx.primaryAction), 1)
], 512)
])
], 512)
]),
_: 1
}, 8, ["fixed"])
], 6);
}
script$q.render = render$q;
script$q.__file = "src/banner/banner.vue";
var banner = BasePlugin({
mcwBanner: script$q
});
class RippleElement extends MDCRippleFoundation {
constructor(element, state, { unbounded = false, ...options } = {}) {
var _a;
const $element = (_a = element.$el) != null ? _a : element;
super({
addClass: (className) => {
if (state) {
state.classes = { ...state.classes, [className]: true };
} else {
$element.classList.add(className);
}
},
browserSupportsCssVars: () => supportsCssVariables(window),
computeBoundingRect: () => $element.getBoundingClientRect(),
containsEventTarget: (target) => $element.contains(target),
deregisterDocumentInteractionHandler: (eventType, handler) => document.documentElement.removeEventListener(
eventType,
handler,
applyPassive()
),
deregisterInteractionHandler: (event_, handler) => $element.removeEventListener(event_, handler, applyPassive()),
deregisterResizeHandler: (handler) => window.removeEventListener("resize", handler),
getWindowPageOffset: () => ({
x: window.pageXOffset,
y: window.pageYOffset
}),
isSurfaceActive: () => matches($element, ":active"),
isSurfaceDisabled: () => false,
isUnbounded: () => this.unbounded_,
registerDocumentInteractionHandler: (eventType, handler) => document.documentElement.addEventListener(
eventType,
handler,
applyPassive()
),
registerInteractionHandler: (event_, handler) => {
$element.addEventListener(event_, handler, applyPassive());
},
registerResizeHandler: (handler) => {
return window.addEventListener("resize", handler);
},
removeClass: (className) => {
if (state) {
const { [className]: removed, ...rest } = state.classes;
state.classes = rest;
} else {
$element.classList.remove(className);
}
},
updateCssVariable: (variableName, value) => {
if (state) {
state.styles = { ...state.styles, [variableName]: value };
} else {
$element.style.setProperty(variableName, value);
}
},
...options
});
this.unbounded_ = unbounded;
}
get unbounded() {
return this.unbounded_;
}
set unbounded(unbounded) {
this.unbounded_ = Boolean(unbounded);
this.setUnbounded(this.unbounded_);
}
}
function useRipplePlugin(root, options) {
const ripple = ref();
const state = shallowReactive({ classes: {}, styles: {} });
const activate = () => {
var _a;
return (_a = ripple.value) == null ? void 0 : _a.activate();
};
const deactivate = () => {
var _a;
return (_a = ripple.value) == null ? void 0 : _a.deactivate();
};
onMounted(() => {
ripple.value = new RippleElement(root.value, state, options);
ripple.value.init();
});
onBeforeUnmount(() => {
ripple.value.destroy();
});
return { ...toRefs(state), activate, deactivate };
}
var script$p = defineComponent({
name: "mcw-button",
props: {
raised: Boolean,
unelevated: Boolean,
outlined: Boolean,
icon: String,
trailingIcon: String,
isTouch: Boolean
},
components: { CustomLink },
setup(props, { slots }) {
const root = ref();
const { classes: rippleClasses, styles } = useRipplePlugin(root);
const haveIcon = computed(() => {
var _a;
return (_a = slots.icon) != null ? _a : props.icon;
});
const haveTrailingIcon = computed(() => {
var _a;
return (_a = slots.trailingIcon) != null ? _a : props.trailingIcon;
});
const classes = computed(() => {
return {
...rippleClasses.value,
"mdc-button": true,
"mdc-button--raised": props.raised,
"mdc-button--unelevated": props.unelevated && !props.raised,
"mdc-button--outlined": props.outlined,
"mdc-button--icon-leading": haveIcon.value,
"mdc-button--icon-trailing": haveTrailingIcon.value
};
});
return {
styles,
classes,
root,
haveIcon,
haveTrailingIcon
};
}
});
const _hoisted_1$l = /* @__PURE__ */ createElementVNode("div", { class: "mdc-button__ripple" }, null, -1);
const _hoisted_2$k = {
key: 0,
class: "mdc-button__touch"
};
const _hoisted_3$h = /* @__PURE__ */ createElementVNode("span", { class: "mdc-button__focus-ring" }, null, -1);
const _hoisted_4$c = {
class: "material-icons mdc-button__icon",
"aria-hidden": "true"
};
const _hoisted_5$9 = { class: "mdc-button__label" };
const _hoisted_6$8 = {
class: "material-icons mdc-button__icon",
"aria-hidden": "true"
};
function render$p(_ctx, _cache, $props, $setup, $data, $options) {
const _component_custom_link = resolveComponent("custom-link");
return openBlock(), createBlock(_component_custom_link, {
ref: "root",
class: normalizeClass(_ctx.classes),
style: normalizeStyle(_ctx.styles),
tag: "button"
}, {
default: withCtx(() => [
_hoisted_1$l,
_ctx.isTouch ? (openBlock(), createElementBlock("span", _hoisted_2$k)) : createCommentVNode("v-if", true),
_hoisted_3$h,
_ctx.haveIcon ? renderSlot(_ctx.$slots, "icon", { key: 1 }, () => [
createElementVNode("i", _hoisted_4$c, toDisplayString(_ctx.icon), 1)
]) : createCommentVNode("v-if", true),
createElementVNode("span", _hoisted_5$9, [
renderSlot(_ctx.$slots, "default")
]),
_ctx.haveTrailingIcon ? renderSlot(_ctx.$slots, "trailingIcon", { key: 2 }, () => [
createElementVNode("i", _hoisted_6$8, toDisplayString(_ctx.trailingIcon), 1)
]) : createCommentVNode("v-if", true)
]),
_: 3
}, 8, ["class", "style"]);
}
script$p.render = render$p;
script$p.__file = "src/button/button.vue";
var button = BasePlugin({
mcwButton: script$p
});
var mcwCardActionButtons = {
name: "mcw-card-action-buttons",
setup(props, { slots }) {
return () => {
var _a;
return h(
"div",
{
class: ["mdc-card__action-buttons"]
},
[(_a = slots.default) == null ? void 0 : _a.call(slots)]
);
};
}
};
var mcwCardActionIcons = {
name: "mcw-card-action-icons",
setup(props, { slots }) {
return () => {
var _a;
return h(
"div",
{
class: ["mdc-card__action-icons"]
},
[(_a = slots.default) == null ? void 0 : _a.call(slots)]
);
};
}
};
var mcwCardActions = {
name: "mcw-card-actions",
props: {
fullBleed: Boolean
},
setup(props, { slots }) {
return () => {
var _a;
return h(
"section",
{
class: [
{
"mdc-card__actions": 1,
"mdc-card__actions--full-bleed": props.fullBleed
}
]
},
(_a = slots.default) == null ? void 0 : _a.call(slots)
);
};
}
};
var mcwCardMedia = {
name: "mcw-card-media",
props: {
src: String,
square: {
type: Boolean,
default() {
return false;
}
},
wide: {
type: Boolean,
default() {
return false;
}
},
contentClass: String
},
setup(props, { slots }) {
return () => {
var _a;
const nodes = [];
const content = (_a = slots.default) == null ? void 0 : _a.call(slots);
if (content) {
nodes.push(
h(
"div",
{ class: ["mdc-card__media-content", props.contentClass] },
content
)
);
}
return h(
"section",
{
class: {
"mdc-card__media": 1,
"mdc-card__media--square": props.square,
"mdc-card__media--16-9": props.wide && !props.square
},
style: {
backgroundImage: `url(${props.src})`
}
},
nodes
);
};
}
};
var mcwCardPrimaryAction = {
name: "mcw-card-primary-action",
setup(props, { slots }) {
const root = ref();
const { classes: rippleClasses, styles } = useRipplePlugin(root);
const classes = computed(() => {
return { ...rippleClasses.value, "mdc-card__primary-action": 1 };
});
return () => {
return h(
CustomLink,
{ ref: root, class: classes.value, style: styles, tabindex: "0" },
() => [slots.default(), h("div", { class: "mdc-card__ripple" })]
);
};
}
};
var mcwCard = {
name: "mcw-card",
props: {
outlined: Boolean
},
setup(props, { attrs, slots }) {
return () => {
var _a;
const { outlined } = props;
return h(
"div",
{
class: [
{
"mdc-card": 1,
"mdc-card--outlined": outlined
}
],
...attrs
},
(_a = slots.default) == null ? void 0 : _a.call(slots)
);
};
}
};
var card = BasePlugin({
mcwCard,
mcwCardPrimaryAction,
mcwCardMedia,
mcwCardActions,
mcwCardActionButtons,
mcwCardActionIcons
});
var checkboxContent = {
props: {
activate: Function,
deactivate: Function,
alignEnd: Boolean,
checkboxId: String
},
inheritAttrs: false,
setup(props, { slots }) {
const labelElement = ref();
let formField;
const hasLabel = !!slots.label;
const formFieldClasses = computed(() => {
return {
"mdc-form-field": hasLabel,
"mdc-form-field--align-end": hasLabel && props.alignEnd
};
});
onMounted(() => {
if (props.hasLabel) {
formField = new MDCFormFieldFoundation({
registerInteractionHandler: (type, handler) => {
labelElement.value.addEventListener(type, handler);
},
deregisterInteractionHandler: (type, handler) => {
labelElement.value.removeEventListener(type, handler);
},
activateInputRipple: () => {
props == null ? void 0 : props.activate();
},
deactivateInputRipple: () => {
props == null ? void 0 : props.deactivate();
}
});
formField.init();
}
});
onBeforeUnmount(() => {
formField == null ? void 0 : formField.destroy();
});
return () => {
var _a, _b;
if (hasLabel) {
return h(
"div",
{ class: { "mdc-checkbox-wrapper": 1, ...formFieldClasses.value } },
[
(_a = slots.default) == null ? void 0 : _a.call(slots),
h(
"label",
{
for: props.checkboxId,
ref: labelElement
},
[(_b = slots.label) == null ? void 0 : _b.call(slots)]
)
]
);
}
return slots.default();
};
}
};
const CB_PROTO_PROPS = ["checked", "indeterminate"];
let checkboxId_ = 0;
var script$o = {
name: "mcw-checkbox",
props: {
modelValue: { type: [Boolean, Array], default: () => false },
indeterminate: { type: Boolean, default: () => false },
disabled: Boolean,
label: String,
alignEnd: Boolean,
value: {
type: [String, Number],
default() {
return "on";
}
},
name: String
},
inheritAttrs: false,
setup(props, { emit, slots }) {
const uiState = reactive({
classes: { "mdc-checkbox": 1 },
control: void 0,
labelEl: void 0,
root: void 0
});
let foundation;
const checkboxId = `__mcw-checkbox-${checkboxId_++}`;
const {
classes: rippleClasses,
styles,
activate,
deactivate
} = useRipplePlugin(toRef(uiState, "root"), {
isUnbounded: () => true,
isSurfaceActive: () => {
return matches(uiState.control, ":active");
},
registerInteractionHandler: (event_, handler) => {
uiState.control.addEventListener(event_, handler, applyPassive());
},
deregisterInteractionHandler: (event_, handler) => {
uiState.control.removeEventListener(event_, handler, applyPassive());
},
computeBoundingRect: () => {
return uiState.root.getBoundingClientRect();
}
});
const rootClasses = computed(() => {
return { ...rippleClasses.value, ...uiState.classes };
});
const hasLabel = computed(() => !!(props.label || slots.default));
const onChange = ({ target: { indeterminate, checked } }) => {
emit("update:indeterminate", indeterminate);
if (Array.isArray(props.modelValue)) {
const index = props.modelValue.indexOf(props.value);
if (checked) {
index < 0 && emit("update:modelValue", [...props.modelValue, props.value]);
} else {
index > -1 && emit("update:modelValue", [
...props.modelValue.slice(0, index),
...props.modelValue.slice(index + 1)
]);
}
} else {
emitCustomEvent(uiState.root, "mdccheckbox:change", {}, true);
emit("update:modelValue", checked);
}
};
const isChecked = () => uiState.control.checked;
const adapter = {
addClass: (className) => uiState.classes = { ...uiState.classes, [className]: true },
forceLayout: () => uiState.root.offsetWidth,
hasNativeControl: () => true,
isAttachedToDOM: () => true,
isChecked: () => uiState.control.checked,
isIndeterminate: () => uiState.control.indeterminate,
removeClass: (className) => {
const { [className]: removed, ...rest } = uiState.classes;
uiState.classes = rest;
},
removeNativeControlAttr: (attribute) => {
uiState.control.removeAttribute(attribute);
},
setNativeControlAttr: (attribute, value) => {
uiState.control.setAttribute(attribute, value);
},
setNativeControlDisabled: (disabled) => uiState.control.disabled = disabled
};
const handleAnimationEnd = () => foundation.handleAnimationEnd();
const setChecked = (checked) => {
uiState.control.checked = Array.isArray(checked) ? checked.includes(props.value) : checked;
};
const setIndeterminate = (indeterminate) => {
uiState.control && (uiState.control.indeterminate = indeterminate);
};
const installPropertyChangeHooks_ = () => {
const nativeCallback = uiState.control;
const callbackProto = Object.getPrototypeOf(nativeCallback);
for (const controlState of CB_PROTO_PROPS) {
const desc = Object.getOwnPropertyDescriptor(
callbackProto,
controlState
);
if (validDescriptor(desc)) {
const nativeCallbackDesc = {
get: desc.get,
set: (state) => {
desc.set.call(nativeCallback, state);
foundation.handleChange();
},
configurable: desc.configurable,
enumerable: desc.enumerable
};
Object.defineProperty(
nativeCallback,
controlState,
nativeCallbackDesc
);
}
}
};
const uninstallPropertyChangeHooks_ = () => {
const nativeCallback = uiState.control;
const callbackProto = Object.getPrototypeOf(nativeCallback);
for (const controlState of CB_PROTO_PROPS) {
const desc = Object.getOwnPropertyDescriptor(callbackProto, controlState);
if (validDescriptor(desc)) {
Object.defineProperty(nativeCallback, controlState, desc);
}
}
};
watch(
() => props.disabled,
(nv, ov) => {
nv != ov && (foundation == null ? void 0 : foundation.setDisabled(nv));
}
);
watch(
() => props.modelValue,
(nv, ov) => {
nv != ov && setChecked(nv);
}
);
watch(
() => props.indeterminate,
(nv, ov) => {
nv != ov && setIndeterminate(nv);
}
);
const checkboxHelpers = {
setIndeterminate,
isChecked,
setChecked,
isIndeterminate: () => uiState.control.indeterminate
};
onMounted(() => {
foundation = new MDCCheckboxFoundation(adapter);
uiState.root.addEventListener(
getCorrectEventName(window, "animationend"),
handleAnimationEnd
);
uiState.root.__checkboxHelpers = checkboxHelpers;
installPropertyChangeHooks_();
foundation.init();
setChecked(props.modelValue);
foundation.setDisabled(props.disabled);
setIndeterminate(props.indeterminate);
});
onBeforeUnmount(() => {
uiState.root.removeEventListener(
getCorrectEventName(window, "animationend"),
handleAnimationEnd
);
uninstallPropertyChangeHooks_();
foundation.destroy();
});
return {
...toRefs(uiState),
rootClasses,
onChange,
styles,
hasLabel,
setChecked,
setIndeterminate,
isChecked,
checkboxId,
activate,
deactivate
};
},
components: { checkboxContent }
};
function validDescriptor(inputPropertyDesc) {
return !!inputPropertyDesc && typeof inputPropertyDesc.set === "function";
}
const _hoisted_1$k = ["id", "name", "value"];
const _hoisted_2$j = /* @__PURE__ */ createElementVNode("div", { class: "mdc-checkbox__background" }, [
/* @__PURE__ */ createElementVNode("svg", {
class: "mdc-checkbox__checkmark",
viewBox: "0 0 24 24"
}, [
/* @__PURE__ */ createElementVNode("path", {
class: "mdc-checkbox__checkmark-path",
fill: "none",
d: "M1.73,12.91 8.1,19.28 22.79,4.59"
})
]),
/* @__PURE__ */ createElementVNode("div", { class: "mdc-checkbox__mixedmark" })
], -1);
const _hoisted_3$g = /* @__PURE__ */ createElementVNode("div", { class: "mdc-checkbox__ripple" }, null, -1);
const _hoisted_4$b = /* @__PURE__ */ createElementVNode("div", { class: "mdc-checkbox__focus-ring" }, null, -1);
function render$o(_ctx, _cache, $props, $setup, $data, $options) {
const _component_checkbox_content = resolveComponent("checkbox-content");
return openBlock(), createBlock(_component_checkbox_content, {
activate: _ctx.activate,
deactivate: _ctx.deactivate,
checkboxId: _ctx.checkboxId
}, createSlots({
default: withCtx(() => [
createElementVNode("div", mergeProps({
ref: "root",
class: _ctx.rootClasses,
style: _ctx.styles
}, _ctx.$attrs), [
createElementVNode("input", {
id: _ctx.checkboxId,
ref: "control",
name: _ctx.name,
value: _ctx.value,
type: "checkbox",
class: "mdc-checkbox__native-control",
onChange: _cache[0] || (_cache[0] = (...args) => _ctx.onChange && _ctx.onChange(...args))
}, null, 40, _hoisted_1$k),
_hoisted_2$j,
_hoisted_3$g,
_hoisted_4$b
], 16)
]),
_: 2
}, [
_ctx.hasLabel ? {
name: "label",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "default", {}, () => [
createTextVNode(toDisplayString(_ctx.label), 1)
])
]),
key: "0"
} : void 0
]), 1032, ["activate", "deactivate", "checkboxId"]);
}
script$o.render = render$o;
script$o.__file = "src/checkbox/checkbox.vue";
var checkbox = BasePlugin({
mcwCheckbox: script$o
});
var script$n = {
props: {
primary: { type: Boolean },
trailingAction: { type: Boolean },
icon: { type: String },
presentational: { type: Boolean }
},
setup(props) {
const uiState = reactive({ rippleEl: void 0, root: void 0 });
const { classes: rippleClasses, styles } = useRipplePlugin(
toRef(uiState, "root"),
{
unbounded: true,
computeBoundingRect: () => uiState.rippleEl.getBoundingClientRect()
}
);
const registerAction = inject("registerAction");
const mcwChipSet = inject("mcwChipSet");
const classes = computed(() => {
return {
...rippleClasses.value,
...uiState.classes,
"mdc-evolution-chip__action--presentational": props.presentational
};
});
let foundation;
const isFilter = mcwChipSet.role === "listbox";
const adapter = {
emitEvent: (eventName, eventDetail) => {
emitCustomEvent(
uiState.root,
eventName,
eventDetail,
true
);
},
focus: () => {
uiState.root.focus();
},
getAttribute: (attributeName) => uiState.root.getAttribute(attributeName),
getElementID: () => {
return uiState.root.id;
},
removeAttribute: (name) => {
uiState.root.removeAttribute(name);
},
setAttribute: (name, value) => {
uiState.root.setAttribute(name, value);
}
};
const setDisabled = (isDisabled2) => {
foundation.setDisabled(isDisabled2);
};
const isDisabled = () => {
return foundation.isDisabled();
};
const setFocus = (behavior) => {
foundation.setFocus(behavior);
};
const isFocusable = () => {
return foundation.isFocusable();
};
const setSelected = (isSelected2) => {
foundation.setSelected(isSelected2);
};
const isSelected = () => {
return foundation.isSelected();
};
const isSelectable = () => {
return foundation.isSelectable();
};
const actionType = () => {
return foundation.actionType();
};
const handleClick = () => {
foundation.handleClick();
};
const handleKeydown = (event) => foundation.handleKeydown(event);
onMounted(() => {
foundation = props.primary ? new MDCChipPrimaryActionFoundation(adapter) : new MDCChipTrailingActionFoundation(adapter);
foundation.init();
registerAction(getCurrentInstance().ctx);
});
return {
...toRefs(uiState),
classes,
styles,
setDisabled,
isDisabled,
setFocus,
isFocusable,
setSelected,
isSelected,
isSelectable,
actionType,
isFilter,
handleClick,
handleKeydown
};
}
};
const _hoisted_1$j = {
ref: "rippleEl",
class: "mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary"
};
const _hoisted_2$i = { class: "mdc-evolution-chip__graphic" };
const _hoisted_3$f = {
key: 0,
class: "mdc-evolution-chip__icon mdc-evolution-chip__icon--primary material-icons"
};
const _hoisted_4$a = /* @__PURE__ */ createElementVNode("span", { class: "mdc-evolution-chip__checkmark" }, [
/* @__PURE__ */ createElementVNode("svg", {
class: "mdc-evolution-chip__checkmark-svg",
viewBox: "-2 -3 30 30"
}, [
/* @__PURE__ */ createElementVNode("path", {
class: "mdc-evolution-chip__checkmark-path",
fill: "none",
stroke: "black",
d: "M1.73,12.91 8.1,19.28 22.79,4.59"
})
])
], -1);
const _hoisted_5$8 = /* @__PURE__ */ createElementVNode("span", { class: "mdc-evolution-chip__text-label" }, "Chip label", -1);
const _hoisted_6$7 = {
ref: "rippleEl",
class: "mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary"
};
const _hoisted_7$5 = {
key: 0,
class: "mdc-evolution-chip__graphic"
};
const _hoisted_8$3 = { class: "mdc-evolution-chip__icon mdc-evolution-chip__icon--primary material-icons" };
const _hoisted_9$2 = { class: "mdc-evolution-chip__text-label" };
const _hoisted_10$1 = {
ref: "rippleEl",
class: "mdc-evolution-chip__ripple mdc-evolution-chip__ripple--trailing"
};
const _hoisted_11$1 = { class: "mdc-evolution-chip__icon mdc-evolution-chip__icon--trailing material-icons" };
function render$n(_ctx, _cache, $props, $setup, $data, $options) {
return _ctx.primary ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
_ctx.isFilter ? (openBlock(), createElementBlock("span", {
key: 0,
ref: "root",
class: "mdc-evolution-chip__action mdc-evolution-chip__action--primary",
role: "option",
"aria-selected": "false",
tabindex: "0",
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
onKeydown: _cache[1] || (_cache[1] = (...args) => _ctx.handleKeydown && _ctx.handleKeydown(...args))
}, [
createElementVNode("span", _hoisted_1$j, null, 512),
createElementVNode("span", _hoisted_2$i, [
_ctx.icon ? (openBlock(), createElementBlock("span", _hoisted_3$f, toDisplayString(_ctx.icon), 1)) : createCommentVNode("v-if", true),
createCommentVNode(" optional "),
_hoisted_4$a
]),
_hoisted_5$8
], 544)) : (openBlock(), createElementBlock("button", {
key: 1,
ref: "root",
class: normalizeClass(["mdc-evolution-chip__action mdc-evolution-chip__action--primary", _ctx.classes]),
style: normalizeStyle(_ctx.styles),
type: "button",
tabindex: "0"
}, [
createElementVNode("span", _hoisted_6$7, null, 512),
_ctx.icon ? (openBlock(), createElementBlock("span", _hoisted_7$5, [
createElementVNode("span", _hoisted_8$3, toDisplayString(_ctx.icon), 1)
])) : createCommentVNode("v-if", true),
createElementVNode("span", _hoisted_9$2, [
renderSlot(_ctx.$slots, "default")
])
], 6))
], 64)) : (openBlock(), createElementBlock("button", {
key: 1,
ref: "root",
class: "mdc-evolution-chip__action mdc-evolution-chip__action--trailing",
type: "button",
tabindex: "-1",
"data-mdc-deletable": "true",
onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
onKeydown: _cache[3] || (_cache[3] = (...args) => _ctx.handleKeydown && _ctx.handleKeydown(...args))
}, [
createElementVNode("span", _hoisted_10$1, null, 512),
createElementVNode("span", _hoisted_11$1, [
renderSlot(_ctx.$slots, "default")
])
], 544));
}
script$n.render = render$n;
script$n.__file = "src/chips/chip-action.vue";
var script$m = {
name: "mcw-chip-checkmark",
setup() {
const width = ref(0);
const root = ref();
onMounted(() => width.value = root.value.getBoundingClientRect().height);
return { width, root };
}
};
const _hoisted_1$i = {
ref: "root",
class: "mdc-chip__checkmark"
};
const _hoisted_2$h = /* @__PURE__ */ createElementVNode("svg", {
class: "mdc-chip__checkmark-svg",
viewBox: "-2 -3 30 30"
}, [
/* @__PURE__ */ createElementVNode("path", {
class: "mdc-chip__checkmark-path",
fill: "none",
stroke: "black",
d: "M1.73,12.91 8.1,19.28 22.79,4.59"
})
], -1);
const _hoisted_3$e = [
_hoisted_2$h
];
function render$m(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("span", _hoisted_1$i, _hoisted_3$e, 512);
}
script$m.render = render$m;
script$m.__file = "src/chips/chip-checkmark.vue";
var script$l = {
name: "mcw-chip-set",
props: {
multiSelectable: { type: Boolean },
orientation: { type: String, default: () => "horizontal" },
overflow: { type: Boolean },
role: { type: String, default: () => "grid" }
},
setup(props) {
const uiState = reactive({
classes: { "mdc-evolution-chip-set--overflow": props.overflow },
myListeners: {},
attrs: {},
root: void 0
});
let foundation;
const chips = [];
if (props.role == "listbox") {
uiState.attrs["aria-orientation"] = props.orientation;
if (props.multiSelectable) {
uiState.attrs["aria-multiselectable"] = "true";
}
}
const registerChip = (chip) => {
chips.push(chip);
};
provide("registerChip", registerChip);
const isIndexValid = (index) => {
return index > -1 && index < chips.length;
};
const adapter = {
announceMessage: (message) => {
announce(message);
},
emitEvent: (eventName, eventDetail) => {
emitCustomEvent(
uiState.root,
eventName,
eventDetail,
true
);
},
getAttribute: (attributeName) => uiState.root.getAttribute(attributeName),
getChipActionsAtIndex: (index) => {
if (!isIndexValid(index))
return [];
return chips[index].getActions();
},
getChipCount: () => {
return chips.length;
},
getChipIdAtIndex: (index) => {
if (!isIndexValid(index)) {
return "";
}
return chips[index].getElementID();
},
getChipIndexById: (id) => chips.findIndex((chip) => chip.getElementID() === id),
isChipFocusableAtIndex: (index, action) => {
if (!isIndexValid(index)) {
return false;
}
return chips[index].isActionFocusable(action);
},
isChipSelectableAtIndex: (index, action) => {
if (!isIndexValid(index)) {
return false;
}
return chips[index].isActionSelectable(action);
},
isChipSelectedAtIndex: (index, action) => {
if (!isIndexValid(index))
return false;
return chips.value[index].isActionSelected(action);
},
removeChipAtIndex: (index) => {
if (!isIndexValid(index)) {
return;
}
chips[index].remove();
chips.splice(index, 1);
},
setChipFocusAtIndex: (index, action, focus) => {
if (!isIndexValid(index)) {
return;
}
chips[index].setActionFocus(action, focus);
},
setChipSelectedAtIndex: (index, action, selected) => {
if (!isIndexValid(index)) {
return;
}
chips[index].setActionSelected(action, selected);
},
startChipAnimationAtIndex: (index, animation) => {
if (!isIndexValid(index)) {
return;
}
chips[index].startAnimation(animation);
}
};
provide("mcwChipSet", {
role: props.role,
singleSelection: !props.multiSelectable
});
const handleChipAnimation = (event) => {
foundation.handleChipAnimation(event);
};
const handleChipInteraction = (event) => {
foundation.handleChipInteraction(event);
};
const handleChipNavigation = (event) => foundation.handleChipNavigation(event);
const removeChip = (index) => {
if (!isIndexValid(index)) {
return;
}
chips[index].remove();
chips.splice(index, 1);
};
onMounted(() => {
foundation = new MDCChipSetFoundation(adapter);
foundation.init();
});
onBeforeUnmount(() => {
foundation.destroy();
});
return {
...toRefs(uiState),
handleChipAnimation,
handleChipInteraction,
handleChipNavigation,
removeChip
};
}
};
const _hoisted_1$h = ["role"];
const _hoisted_2$g = {
class: "mdc-evolution-chip-set__chips",
role: "presentation"
};
function render$l(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("span", mergeProps({
ref: "root",
class: ["mdc-evolution-chip-set", _ctx.classes],
role: _ctx.role,
"onMdcchip:animation": _cache[0] || (_cache[0] = (...args) => _ctx.handleChipAnimation && _ctx.handleChipAnimation(...args)),
"onMdcchip:interaction": _cache[1] || (_cache[1] = (...args) => _ctx.handleChipInteraction && _ctx.handleChipInteraction(...args)),
"onMdcchip:navigation": _cache[2] || (_cache[2] = (...args) => _ctx.handleChipNavigation && _ctx.handleChipNavigation(...args))
}, _ctx.attrs), [
createElementVNode("span", _hoisted_2$g, [
renderSlot(_ctx.$slots, "default")
])
], 16, _hoisted_1$h);
}
script$l.render = render$l;
script$l.__file = "src/chips/chip-set.vue";
let chipItemId_ = 0;
var script$k = {
name: "mcw-chip",
props: {
leadingIcon: [String],
trailingIcon: [String],
avatar: { type: Boolean },
shouldRemoveOnTrailingIconClick: {
type: Boolean,
default() {
return true;
}
},
disabled: { type: Boolean },
selected: { type: Boolean },
presentational: { type: Boolean }
},
setup(props, { slots }) {
const uiState = reactive({
classes: {
"mdc-evolution-chip--disabled": props.disabled,
"mdc-evolution-chip--selected": props.selected
},
leadingClasses: {
"mdc-chip__icon": 1,
"mdc-chip__icon--leading": 1,
"material-icons": 1
},
styles: {},
myListeners: {},
root: void 0,
checkmarkEl: void 0,
trailingAction: void 0
});
const registerChip = inject("registerChip");
const mcwChipSet = inject("mcwChipSet");
const id = chipItemId_++;
let foundation;
const actions = /* @__PURE__ */ new Map();
const registerAction = (action) => {
actions.set(action.actionType(), action);
};
provide("registerAction", registerAction);
const adapter = {
addClass: (className) => uiState.classes = { ...uiState.classes, [className]: true },
emitEvent: (eventName, eventDetail) => {
emitCustomEvent(
uiState.root,
eventName,
eventDetail,
true
);
},
getActions: () => {
const actionKeys = [];
for (const [key] of actions) {
actionKeys.push(key);
}
return actionKeys;
},
getAttribute: (attributeName) => uiState.root.getAttribute(attributeName),
getElementID: () => uiState.root.id,
getOffsetWidth: () => {
return uiState.root.offsetWidth;
},
hasClass: (className) => uiState.root.classList.contains(className),
isActionSelectable: (actionType) => {
const action = actions.get(actionType);
if (action) {
return action.isSelectable();
}
return false;
},
isActionSelected: (actionType) => {
const action = actions.get(actionType);
if (action) {
return action.isSelected();
}
return false;
},
isActionFocusable: (actionType) => {
const action = actions.get(actionType);
if (action) {
return action.isFocusable();
}
return false;
},
isActionDisabled: (actionType) =>