{"version":3,"file":"button2.mjs","sources":["../../../../../../packages/components/button/src/button.vue"],"sourcesContent":["<template>\r\n  <button\r\n    ref=\"buttonRef\"\r\n    :class=\"[\r\n      ns.b(),\r\n      ns.m(buttonType),\r\n      ns.m(buttonSize),\r\n      ns.is('disabled', buttonDisabled as boolean),\r\n      ns.is('loading', loading),\r\n      ns.is('plain', plain),\r\n      ns.is('outline', outline),\r\n      ns.is('round', round),\r\n      ns.is('circle', circle),\r\n      ns.is('text', text),\r\n      ns.is('block', block)\r\n    ]\"\r\n    :disabled=\"buttonDisabled as boolean || loading\"\r\n    :type=\"nativeType\"\r\n    :style=\"buttonStyle\"\r\n    @click=\"handleClick\"\r\n  >\r\n    <template v-if=\"loading\">\r\n      <slot v-if=\"$slots.loading\" name=\"loading\"></slot>\r\n      <sg-icon v-else :class=\"ns.is('loading')\">\r\n        <component :is=\"loadingIcon\" />\r\n      </sg-icon>\r\n    </template>\r\n    <sg-icon v-else-if=\"icon\">\r\n      <component :is=\"icon\" />\r\n    </sg-icon>\r\n    <span v-if=\"$slots.default\">\r\n      <slot></slot>\r\n    </span>\r\n  </button>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { computed, inject, defineComponent, ref } from 'vue'\r\nimport { useCssVar } from '@vueuse/core'\r\nimport { TinyColor } from '@ctrl/tinycolor'\r\nimport { SgIcon } from '@sgui-plus/components/icon'\r\nimport {\r\n  useDisabled,\r\n  useFormItem,\r\n  useNamespace,\r\n  useSize\r\n} from '@sgui-plus/hooks'\r\nimport { Loading } from '@sgui-plus/icons-vue'\r\n\r\nimport { ButtonGroupContextKey } from './constants'\r\nimport { buttonEmits, buttonProps } from './button'\r\n\r\nexport default defineComponent({\r\n  name: 'SgButton',\r\n\r\n  components: {\r\n    SgIcon,\r\n    Loading,\r\n  },\r\n\r\n  props: buttonProps,\r\n  emits: buttonEmits,\r\n\r\n  setup(props, { emit }) {\r\n    const buttonRef = ref()\r\n    const buttonGroupContext = inject(ButtonGroupContextKey, undefined)\r\n    const ns = useNamespace('button')\r\n\r\n    const { form } = useFormItem()\r\n    const buttonSize = useSize(computed(() => buttonGroupContext?.size) as any)\r\n    const buttonDisabled = useDisabled()\r\n    const buttonType = computed(\r\n      () => props.type || buttonGroupContext?.type || ''\r\n    )\r\n\r\n    // calculate hover & active color by color\r\n    const typeColor = computed(\r\n      () => useCssVar(`--sg-color-${props.type}`).value\r\n    )\r\n    const buttonStyle = computed(() => {\r\n      let styles = {}\r\n\r\n      const buttonColor = props.color || typeColor.value\r\n\r\n      if (buttonColor) {\r\n        const shadeBgColor = new TinyColor(buttonColor).shade(10).toString()\r\n        if (props.plain || props.outline) {\r\n          styles = {\r\n            '--sg-button-bg-color':props.plain ? new TinyColor(buttonColor)\r\n              .tint(90)\r\n              .toString() :\r\n              'var(--sg-color-white)',\r\n            '--sg-button-text-color': buttonColor,\r\n            '--sg-button-hover-text-color': 'var(--sg-color-white)',\r\n            '--sg-button-hover-bg-color': buttonColor,\r\n            '--sg-button-hover-border-color': buttonColor,\r\n            '--sg-button-active-bg-color': shadeBgColor,\r\n            '--sg-button-active-text-color': 'var(--sg-color-white)',\r\n            '--sg-button-active-border-color': shadeBgColor,\r\n          }\r\n        } else {\r\n          const tintBgColor = new TinyColor(buttonColor).tint(20).toString()\r\n          styles = {\r\n            '--sg-button-bg-color': buttonColor,\r\n            '--sg-button-border-color': buttonColor,\r\n            '--sg-button-hover-bg-color': tintBgColor,\r\n            '--sg-button-hover-border-color': tintBgColor,\r\n            '--sg-button-active-bg-color': shadeBgColor,\r\n            '--sg-button-active-border-color': shadeBgColor,\r\n          }\r\n        }\r\n\r\n        if (buttonDisabled.value) {\r\n          const disabledButtonColor = new TinyColor(buttonColor)\r\n            .tint(50)\r\n            .toString()\r\n          styles['--sg-button-disabled-bg-color'] = disabledButtonColor\r\n          styles['--sg-button-disabled-border-color'] = disabledButtonColor\r\n        }\r\n      }\r\n\r\n      return styles\r\n    })\r\n\r\n    const handleClick = (evt: MouseEvent) => {\r\n      if (props.nativeType === 'reset') {\r\n        form?.resetFields()\r\n      }\r\n      emit('click', evt)\r\n    }\r\n\r\n    return {\r\n      buttonRef,\r\n      buttonStyle,\r\n\r\n      buttonSize,\r\n      buttonType,\r\n      buttonDisabled,\r\n\r\n      handleClick,\r\n\r\n      ns\r\n    }\r\n  },\r\n})\r\n</script>\r\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle","_Fragment","_renderSlot","_createBlock","_withCtx","_createCommentVNode"],"mappings":";;;;;;;6BACEA,gBAgCS,CAAA,SAAA,CAAA,CAAA;AA9BD,EAAA,OAAAC,SAAA,EAAA,EAAAC,kBAAA,CAAA,QAAA,EAAA;AAAA,IAAW,GAAA,EAAA,WAAA;AAAA,IAAA,KAAA,EAAeC,cAAK,CAAA;AAAA,MAAoB,QAAG,CAAE,EAAA;AAAA,MAAoB,IAAA,CAAA,EAAA,CAAG,EAAE,IAAa,CAAA,UAAA,CAAA;AAAA,MAAmC,IAAA,CAAA,EAAA,CAAG,EAAE,IAAY,CAAA,UAAA,CAAA;AAAA,MAAiB,IAAA,CAAA,EAAA,CAAG,EAAE,CAAA,UAAA,EAAU,IAAK,CAAA,cAAA,CAAA;AAAA,MAAU,IAAA,CAAA,EAAA,CAAG,EAAE,CAAA,SAAA,EAAY,IAAO,CAAA,OAAA,CAAA;AAAA,MAAU,IAAA,CAAA,EAAA,CAAG,EAAE,CAAA,OAAA,EAAU,IAAK,CAAA,KAAA,CAAA;AAAA,MAAU,IAAA,CAAA,EAAA,CAAG,EAAE,CAAA,SAAA,EAAW,IAAM,CAAA,OAAA,CAAA;AAAA,MAAU,IAAA,CAAA,EAAA,CAAG,EAAE,CAAA,OAAA,EAAS,IAAI,CAAA,KAAA,CAAA;AAAA,MAAU,IAAA,CAAA,EAAA,CAAG,EAAE,CAAA,QAAA,EAAU,IAAK,CAAA,MAAA,CAAA;AAAA,MAAA,IAAA,CAAA,EAAA,CAAA,EAAA,CAAA,MAAA,EAAA,IAAA,CAAA,IAAA,CAAA;AAatV,MAAA,IAAA,CAAA,EAAA,CAAU,EAAc,CAAA,OAAA,EAAA,IAAA,CAAA,KAAA,CAAA;AAAA,KACxB,CAAA;AAAA,IACA,UAAK,IAAa,CAAA,cAAA,IAAA,IAAA,CAAA,OAAA;AAAA,IAClB,IAAK,EAAA,IAAA,CAAA,UAAA;AAAA,IAAA,KAAA,EAAAC,cAAA,CAAA,IAAA,CAAA,WAAA,CAAA;aAEU,MAAO,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,WAAA,IAAA,IAAA,CAAA,WAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,GAAA,EAAA;+BAC6B,EAAAF,kBAAA,CAAAG,QAAA,EAAA,EAAA,GAAA,EAAA,CAAA,EAAA,EAAA;AAAA,MAAA,IAAA,CAAA,MAAA,CAAA,OAAA,GAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,GAAA,EAAA,CAAA,EAAA,CAAA,IAAAL,SAAA,gBAC1B,kBAAK,EAAA;AAAA,QAAA,GAAA,EAAA,CAAA;AACI,QAAA,KAAA,EAAAE,cAAA,CAAA,IAAA,CAAA,EAAA,CAAA,EAAA,CAAA,SAAA,CAAA,CAAA;AAAA,OAAA,EAAA;;;;;OAGX,EAAA,CAAA,EAAA,CAAA,OAAA,CAAA,CAAA,CAAA;AAAA,KAAxB,EAAA,EAAA,CAAA,IAAA,IAAA,CAAA,IAAA,IAAAF,SAAA,EAAA,EAAAM,WAAA,CACE,oBAAwB,EAAR,GAAA,EAAA,CAAA,EAAA,EAAA;AAAA,MAAA,OAAA,EAAAC,OAAA,CAAA,MAAA;;;;KAElB,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,IACE,IAAA,CAAA,MAAA,CAAA,OAAA,IAAAR,SAAA,EAAA,EAAAC,kBAAA,CAAA,MAAA,EAAA,UAAA,EAAA;;;;;;;;;"}