@vuesax-alpha/nightly
Version:
A Component Library for Vue 3
1 lines • 4.31 kB
Source Map (JSON)
{"version":3,"file":"button2.mjs","sources":["../../../../../../packages/components/button/src/button.vue"],"sourcesContent":["<template>\n <button\n ref=\"root$\"\n :class=\"buttonClasses\"\n :style=\"buttonStyles\"\n @mousedown=\"mouseDown\"\n >\n <div :class=\"ns.e('content')\">\n <slot />\n </div>\n\n <div\n v-if=\"$slots.animate\"\n :class=\"[ns.e('animate'), ns.em('animate', animationType)]\"\n >\n <slot name=\"animate\" />\n </div>\n\n <div v-if=\"loading\" :class=\"ns.e('loading')\">\n <icon-loading />\n </div>\n </button>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, ref, useSlots } from 'vue'\nimport {\n useColor,\n useNamespace,\n useVuesaxBaseComponent,\n} from '@vuesax-alpha/hooks'\nimport { IconLoading } from '@vuesax-alpha/components/icon'\nimport {\n getVsColor,\n ripple,\n rippleCut,\n rippleReverse,\n} from '@vuesax-alpha/utils'\nimport { buttonProps } from './button'\n\ndefineOptions({\n name: 'VsButton',\n})\n\nconst props = defineProps(buttonProps)\nconst slots = useSlots()\n\nconst ns = useNamespace('button')\n\nconst root$ = ref<HTMLElement>()\n\nconst vsBaseClasses = useVuesaxBaseComponent(useColor())\n\nconst buttonClasses = computed(() => {\n return [\n ns.b(),\n vsBaseClasses,\n props.shape && ns.m(props.shape),\n props.active && ns.m('active'),\n slots.animate && ns.m('animate'),\n props.animationType && ns.m(`animate-${props.animationType}`),\n props.animateInactive && ns.m('animate-inactive'),\n props.block && ns.m('block'),\n props.icon && ns.m('icon'),\n props.loading && ns.m('loading'),\n ns.em('size', props.size),\n ns.m(props.type),\n props.upload && ns.m('upload'),\n ]\n})\n\nconst buttonStyles = computed(() => {\n return [\n ns.cssVar({\n color: getVsColor(props.color),\n }),\n ]\n})\n\nconst mouseDown = (evs: MouseEvent) => {\n // ripple effect\n if (props.ripple === 'reverse') {\n rippleReverse(evs)\n } else if (props.ripple === 'cut') {\n rippleCut(evs)\n } else {\n if (props.type === 'flat') {\n ripple(\n evs,\n !props.active && document.activeElement !== root$.value\n ? 'inherit'\n : undefined,\n !props.active && document.activeElement !== root$.value\n )\n } else {\n ripple(evs, undefined, false)\n }\n }\n}\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;mCAwCc,CAAA;AAAA,EACZ,IAAM,EAAA,UAAA;AACR,CAAA,CAAA,CAAA;;;;;;AAGA,IAAA,MAAM,QAAQ,QAAS,EAAA,CAAA;AAEjB,IAAA,MAAA,EAAA,GAAK,aAAa,QAAQ,CAAA,CAAA;AAEhC,IAAA,MAAM,QAAQ,GAAiB,EAAA,CAAA;AAEzB,IAAA,MAAA,aAAA,GAAgB,sBAAuB,CAAA,QAAA,EAAU,CAAA,CAAA;AAEjD,IAAA,MAAA,aAAA,GAAgB,SAAS,MAAM;AAC5B,MAAA,OAAA;AAAA,QACL,GAAG,CAAE,EAAA;AAAA,QACL,aAAA;AAAA,QACA,KAAM,CAAA,KAAA,IAAS,EAAG,CAAA,CAAA,CAAE,MAAM,KAAK,CAAA;AAAA,QAC/B,KAAM,CAAA,MAAA,IAAU,EAAG,CAAA,CAAA,CAAE,QAAQ,CAAA;AAAA,QAC7B,KAAM,CAAA,OAAA,IAAW,EAAG,CAAA,CAAA,CAAE,SAAS,CAAA;AAAA,QAC/B,MAAM,aAAiB,IAAA,EAAA,CAAG,CAAE,CAAA,CAAA,QAAA,EAAW,MAAM,aAAe,CAAA,CAAA,CAAA;AAAA,QAC5D,KAAM,CAAA,eAAA,IAAmB,EAAG,CAAA,CAAA,CAAE,kBAAkB,CAAA;AAAA,QAChD,KAAM,CAAA,KAAA,IAAS,EAAG,CAAA,CAAA,CAAE,OAAO,CAAA;AAAA,QAC3B,KAAM,CAAA,IAAA,IAAQ,EAAG,CAAA,CAAA,CAAE,MAAM,CAAA;AAAA,QACzB,KAAM,CAAA,OAAA,IAAW,EAAG,CAAA,CAAA,CAAE,SAAS,CAAA;AAAA,QAC/B,EAAG,CAAA,EAAA,CAAG,MAAQ,EAAA,KAAA,CAAM,IAAI,CAAA;AAAA,QACxB,EAAA,CAAG,CAAE,CAAA,KAAA,CAAM,IAAI,CAAA;AAAA,QACf,KAAM,CAAA,MAAA,IAAU,EAAG,CAAA,CAAA,CAAE,QAAQ,CAAA;AAAA,OAC/B,CAAA;AAAA,KACD,CAAA,CAAA;AAEK,IAAA,MAAA,YAAA,GAAe,SAAS,MAAM;AAC3B,MAAA,OAAA;AAAA,QACL,GAAG,MAAO,CAAA;AAAA,UACR,KAAA,EAAO,UAAW,CAAA,KAAA,CAAM,KAAK,CAAA;AAAA,SAC9B,CAAA;AAAA,OACH,CAAA;AAAA,KACD,CAAA,CAAA;AAEK,IAAA,MAAA,SAAA,GAAY,CAAC,GAAoB,KAAA;AAEjC,MAAA,IAAA,KAAA,CAAM,WAAW,SAAW,EAAA;AAC9B,QAAA,aAAA,CAAc,GAAG,CAAA,CAAA;AAAA,OACnB,MAAA,IAAW,KAAM,CAAA,MAAA,KAAW,KAAO,EAAA;AACjC,QAAA,SAAA,CAAU,GAAG,CAAA,CAAA;AAAA,OACR,MAAA;AACD,QAAA,IAAA,KAAA,CAAM,SAAS,MAAQ,EAAA;AACzB,UAAA,MAAA;AAAA,YACE,GAAA;AAAA,YACA,CAAC,KAAM,CAAA,MAAA,IAAU,SAAS,aAAkB,KAAA,KAAA,CAAM,QAC9C,SACA,GAAA,KAAA,CAAA;AAAA,YACJ,CAAC,KAAA,CAAM,MAAU,IAAA,QAAA,CAAS,kBAAkB,KAAM,CAAA,KAAA;AAAA,WACpD,CAAA;AAAA,SACK,MAAA;AACE,UAAA,MAAA,CAAA,GAAA,EAAK,QAAW,KAAK,CAAA,CAAA;AAAA,SAC9B;AAAA,OACF;AAAA,KACF,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}