{"version":3,"file":"ThButton.vue_vue_type_script_setup_true_lang-7e9faa46.js","sources":["../../src/components/ui/ThButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport ThSpinner from './ThSpinner.vue'\n\nexport interface ThButtonProps {\n  as?: string\n  color?: 'primary' | 'secondary' | 'danger-secondary'\n  size?: 'md' | 'lg' | 'sm'\n  loading?: boolean\n  disabled?: boolean\n  type?: 'submit' | 'button'\n}\n\nconst props = withDefaults(defineProps<ThButtonProps>(), {\n  as: 'button',\n  color: 'primary',\n  size: 'md',\n  type: 'button'\n})\n\nconst classes = computed(() => {\n  const { color, size } = props\n\n  // Cannot use :disabled here, because styles should not apply when the button is in loading state\n  // use [&.is-loading] to target button in loading state\n  // use [&.is-disabled] to target button in disabled state\n  return {\n    'is-loading': props.loading,\n    // We only add this class if the button is explicitly disabled, and not when loading\n    'is-disabled': props.disabled,\n    'pointer-events-none select-none': props.disabled || props.loading,\n    'text-gray-800 bg-white hover:bg-gray-100 border border-gray-400 active:bg-gray-400 [&.is-disabled]:text-gray-400 [&.is-loading]:bg-gray-400':\n      color === 'secondary',\n    // Hover/Active styles for primary buttons are accomplished via overlay pseudo element.\n    // Merchant provides the base primary color and we use the pseudo element to make it lighter/darker\n    'text-white bg-primary [&.is-disabled]:bg-gray-400 [&.is-disabled]:text-gray-700 z-0 before:absolute before:inset-0 before:rounded-[inherit] hover:before:bg-black/10 active:before:bg-black/20 [&.is-loading]:before:bg-black/20 before:-z-[1] before:transition before:duration-200 before:ease-linear before:pointer-event-snone':\n      color === 'primary',\n    'text-error bg-white hover:bg-gray-100 border border-gray-400 active:bg-gray-400 [&.is-disabled]:text-gray-400 [&.is-loading]:text-error [&.is-loading]:bg-gray-400':\n      color === 'danger-secondary',\n    'h-9 px-5 text-sm': size === 'md',\n    'h-7 px-4 text-sm': size === 'sm',\n    'h-11 px-6 text-base': size === 'lg'\n  }\n})\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    :type=\"type\"\n    :class=\"[\n      'relative inline-flex rounded-full font-medium items-center justify-center outline-none focus:ring-2 ring-offset-2 ring-primary/50 transition duration-200 ease-linear',\n      classes\n    ]\"\n    :disabled=\"disabled || loading\"\n    :tabindex=\"disabled ? -1 : undefined\"\n  >\n    <span\n      v-if=\"$slots.prepend\"\n      :class=\"[\n        'mr-3 leading-[0]',\n        {\n          'opacity-0': loading\n        }\n      ]\"\n    >\n      <slot name=\"prepend\" />\n    </span>\n\n    <span\n      :class=\"[\n        'truncate',\n        {\n          'opacity-0': loading\n        }\n      ]\"\n    >\n      <slot />\n    </span>\n\n    <span\n      v-if=\"$slots.append\"\n      :class=\"[\n        'ml-3 leading-[0]',\n        {\n          'opacity-0': loading\n        }\n      ]\"\n    >\n      <slot name=\"append\" />\n    </span>\n\n    <div\n      v-if=\"loading\"\n      :class=\"[\n        'absolute inset-0 flex items-center justify-center rounded-[inherit] text-[inherit]',\n        {\n          'bg-black/20': color === 'primary'\n        }\n      ]\"\n    >\n      <ThSpinner />\n    </div>\n  </component>\n</template>\n"],"names":["classes","computed","color","size","props"],"mappings":"knBAoBMA,EAAUC,EAAS,IAAM,CACvB,KAAA,CAAE,MAAAC,EAAO,KAAAC,CAAS,EAAAC,EAKjB,MAAA,CACL,aAAcA,EAAM,QAEpB,cAAeA,EAAM,SACrB,kCAAmCA,EAAM,UAAYA,EAAM,QAC3D,8IACEF,IAAU,YAGZ,qUACEA,IAAU,UACZ,qKACEA,IAAU,mBACZ,mBAAoBC,IAAS,KAC7B,mBAAoBA,IAAS,KAC7B,sBAAuBA,IAAS,IAAA,CAClC,CACD"}