@sandlada/vue-mdc
Version:
123 lines (122 loc) • 3.75 kB
JavaScript
/**
* @license
* Copyright 2025 Sandlada & Kai Orion
* SPDX-License-Identifier: MIT
*/
import { defineComponent, ref, onMounted, onBeforeUnmount, onBeforeUpdate, createVNode } from "vue";
import { useReflectAttribute } from "../../node_modules/@glare-labs/vue-reflect-attribute/build/vue-reflect-attribute.js";
import { componentNamePrefix } from "../../internals/component-name-prefix/component-name-prefix.js";
import { isServer } from "../../utils/is-server.js";
import { FocusRing } from "../focus-ring/focus-ring.js";
import "../../internals/navigation/render-navigation-destination.js";
import { Ripple } from "../ripple/ripple.js";
import css from "./styles/icon-button.module.scss.js";
import { props } from "./toggle-icon-button.definition.js";
const ToggleIconButton = /* @__PURE__ */ defineComponent({
name: `${componentNamePrefix}-toggle-icon-button`,
props,
slots: {},
emits: ["update:modelValue", "change"],
setup(props2, {
slots,
emit
}) {
const root = ref(null);
const _selected = ref(props2.defaultSelected);
const _appearance = ref(props2.appearance);
const _disabled = ref(props2.disabled);
const _name = ref(props2.name);
const _value = ref(props2.value);
useReflectAttribute(root, {
attributes: [{
attribute: "appearance",
ref: _appearance,
reflect: true,
type: "string"
}, {
attribute: "disabled",
ref: _disabled,
reflect: true,
type: "boolean"
}, {
attribute: "name",
ref: _name,
reflect: true,
type: "string"
}, {
attribute: "value",
ref: _value,
reflect: true,
type: "string"
}, {
attribute: "selected",
ref: _selected,
reflect: true,
type: "boolean"
}]
});
const setSelected = (value) => {
const changeEvent = new Event("change", {
bubbles: true,
cancelable: true
});
emit("change", changeEvent);
const preventChange = !dispatchEvent(changeEvent);
if (preventChange) {
return;
}
console.log("u");
_selected.value = value;
emit("update:modelValue", value);
};
const handleIconButtonClick = (e) => {
e.stopImmediatePropagation();
e.preventDefault();
if (_disabled.value) {
return;
}
setSelected(!_selected.value);
};
onMounted(() => {
if (isServer()) {
return;
}
root.value?.addEventListener("click", handleIconButtonClick);
});
onBeforeUnmount(() => {
root.value?.removeEventListener("click", handleIconButtonClick);
});
onBeforeUpdate(() => {
if (props2.modelValue !== null) {
_selected.value = props2.modelValue;
}
});
return () => {
const renderIcon = createVNode("span", {
"class": css.icon
}, [slots.default && slots.default()]);
return createVNode("button", {
"class": [css[_appearance.value], css["toggle-icon-button"], _selected.value && css.selected, _disabled.value && css.disabled],
"data-component": "togglable-icon-button",
"role": "checkbox",
"ref": root
}, [createVNode(Ripple, null, null), createVNode(FocusRing, {
"shapeInherit": false
}, null), createVNode("div", {
"aria-hidden": "true",
"class": css.touch
}, null), createVNode("div", {
"aria-hidden": "true",
"class": css.background
}, null), createVNode("div", {
"aria-hidden": "true",
"class": css.outline
}, null), renderIcon]);
};
},
inheritAttrs: true
});
export {
ToggleIconButton
};
//# sourceMappingURL=toggle-icon-button.js.map