@wikimedia/codex/dist/modules/CdxToggleButton.cjs

Codex Design System for Wikimedia

"use strict";const t=require("vue"),r=require("./constants.js"),p=require("./useIconOnlyButton.js"),y=require("./_plugin-vue_export-helper.js"),m=r.makeStringTypeValidator(r.ButtonSizes),b=t.defineComponent({name:"CdxToggleButton",props:{modelValue:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},quiet:{type:Boolean,default:!1},size:{type:String,default:"medium",validator:m}},emits:["update:modelValue"],setup(e,{emit:o,slots:s,attrs:u}){const d=p.useIconOnlyButton(s.default,u,"CdxToggleButton"),l=t.ref(!1),n=t.computed(()=>({["cdx-toggle-button--size-".concat(e.size)]:!0,"cdx-toggle-button--quiet":e.quiet,"cdx-toggle-button--framed":!e.quiet,"cdx-toggle-button--toggled-on":e.modelValue,"cdx-toggle-button--toggled-off":!e.modelValue,"cdx-toggle-button--icon-only":d.value,"cdx-toggle-button--is-active":l.value})),i=()=>{o("update:modelValue",!e.modelValue)},a=f=>{l.value=f};function g(){a(!0)}function c(){a(!1),i()}return{rootClasses:n,onClick:i,onKeyDown:g,onKeyUp:c}}}),B=["aria-pressed","disabled"];function C(e,o,s,u,d,l){return t.openBlock(),t.createElementBlock("button",{class:t.normalizeClass(["cdx-toggle-button",e.rootClasses]),"aria-pressed":e.modelValue,disabled:e.disabled,type:"button",onClick:o[0]||(o[0]=(...n)=>e.onClick&&e.onClick(...n)),onKeydown:o[1]||(o[1]=t.withKeys(t.withModifiers((...n)=>e.onKeyDown&&e.onKeyDown(...n),["prevent"]),["space","enter"])),onKeyup:o[2]||(o[2]=t.withKeys((...n)=>e.onKeyUp&&e.onKeyUp(...n),["space","enter"]))},[t.renderSlot(e.$slots,"default")],42,B)}const K=y._export_sfc(b,[["render",C]]);module.exports=K;