{"version":3,"file":"Button.vue.DmHFsvHC.js","sources":["../../../../components/common/Button.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Button } from \"@/types/button\";\n/*\nCustom Button Component\n\n- button (outerClass)\n  -loading (spinner)\n  - wrapperClass\n      - prefixIcon\n      - prefix (slot)\n      - label\n      - suffix (slot)\n      - suffixIcon\n  - end wrapperClass\n- end button\n*/\n\nconst props = withDefaults(defineProps<Button>(), {\n  color: \"ngreen\",\n  type: \"primary\",\n  isSubmit: false,\n});\n\n//Set Colors\nconst color = toRef(props, \"color\");\nconst type = toRef(props, \"type\");\nconst isSubmit = toRef(props, \"isSubmit\");\n\nlet colorClass = computed(() => {\n  if (type.value === \"primary\") {\n    return `bg-${color.value} hover:bg-${color.value} hover:bg-opacity-70 dark:bg-${color.value} dark:hover:bg-${color.value}/70 dark:border-gray-600  hover:border-${color.value}/80`;\n  }\n  if (type.value === \"secondary\") {\n    return `hover:bg-${color.value} text-black dark:text-white hover:text-black/70 dark:hover:text-white/80 hover:bg-opacity-80 dark:border-gray-600 dark:hover:border-gray-600/60 border-${color.value} hover:border-${color.value}/80`;\n  }\n  if (type.value === \"minimal\") {\n    return `text-${color.value} hover:text-${color.value}/70 bg-transparent dark:bg-transparent`;\n  }\n});\n\n//Set Rounded\nconst rounded = toRef(props, \"rounded\");\nconst roundedClass = computed(() => {\n  if (rounded.value) {\n    return \"rounded-full\";\n  }\n});\n\n//Click Loading Function\nconst loading = toRef(props, \"loading\");\nconst hover = ref(false);\nconst mode = ref(\"\");\nconst darkColor = \"#161B22\";\nconst lightColor = \"#ffffff\";\n\nif (type.value === \"secondary\" && !isDark.value) {\n  mode.value = darkColor;\n} else {\n  mode.value = lightColor;\n}\n\nwatch(\n  () => hover.value,\n  () => {\n    if (hover.value) {\n      mode.value = lightColor;\n    } else if (!hover.value && !isDark.value) {\n      mode.value = darkColor;\n    } else {\n      mode.value = lightColor;\n    }\n  },\n);\n\nwatch(\n  () => [isDark.value],\n  () => {\n    if (type.value === \"secondary\" && !isDark.value) {\n      mode.value = darkColor;\n    } else {\n      mode.value = lightColor;\n    }\n  },\n);\n//End Click Loading Function\n</script>\n\n<template>\n  <button\n    v-if=\"type === 'primary'\"\n    class=\"max-w-fit disabled:cursor-not-allowed relative disabled:opacity-20 disabled:pointer-events-none flex justify-between items-center transition duration-300 ease-in-out px-6 py-[9px] mt-2 min-w-[50px] text-xs font-semibold text-white border-2 mb-2 lg:text-xl whitespace-nowrap\"\n    :class=\"`${colorClass} ${roundedClass} ${outerClass}`\"\n    v-bind=\"$attrs\"\n    :type=\"isSubmit ? 'submit' : 'button'\"\n  >\n    <div class=\"min-w-[75px]\" v-if=\"loading\">\n      <Icon name=\"svg-spinners:ring-resize\" class=\"text-lg dark:text-white\" />\n    </div>\n    <div\n      class=\"z-10 flex items-center justify-center\"\n      :class=\"`${wrapperClass}`\"\n      v-if=\"!loading\"\n    >\n      <div\n        class=\"mr-2 text-lg font-semibold leading-4\"\n        :class=\"`${prefixIconClass}`\"\n        v-if=\"prefixIcon\"\n      >\n        <Icon :name=\"prefixIcon\" />\n      </div>\n      <div :class=\"`${prefixClass}`\">\n        <slot name=\"prefix\" />\n      </div>\n      <div\n        class=\"flex justify-center text-xs font-bold leading-4 align-middle\"\n        :class=\"`${labelClass}`\"\n      >\n        {{ label ?? \"\" }}\n        <slot />\n      </div>\n      <div :class=\"`${suffixClass}`\">\n        <slot name=\"suffix\" />\n      </div>\n      <div\n        class=\"ml-2 text-lg leading-4\"\n        :class=\"`${suffixIconClass}`\"\n        v-if=\"suffixIcon\"\n      >\n        <Icon :name=\"suffixIcon\" />\n      </div>\n    </div>\n  </button>\n\n  <button\n    v-if=\"type === 'secondary'\"\n    class=\"max-w-fit disabled:cursor-not-allowed disabled:opacity-20 dark:bg-transparent bg-transparent relative disabled:pointer-events-none flex justify-between items-center transition duration-300 ease-in-out px-6 py-[9px] mt-2 min-w-[50px] text-xs font-semibold border-2 mb-2 lg:text-xl whitespace-nowrap\"\n    :class=\"`${colorClass} ${roundedClass} ${outerClass}`\"\n    v-bind=\"$attrs\"\n    @mouseover=\"hover = true\"\n    @mouseleave=\"hover = false\"\n    :type=\"isSubmit ? 'submit' : 'button'\"\n  >\n    <div class=\"min-w-[75px]\" v-if=\"loading\">\n      <Icon name=\"svg-spinners:ring-resize\" class=\"text-lg dark:text-white\" />\n    </div>\n    <div\n      class=\"z-10 flex items-center justify-center\"\n      :class=\"`${wrapperClass}`\"\n      v-if=\"!loading\"\n    >\n      <div\n        class=\"mr-2 text-lg font-semibold leading-4\"\n        :class=\"`${prefixIconClass}`\"\n        v-if=\"prefixIcon\"\n      >\n        <Icon :name=\"prefixIcon\" />\n      </div>\n      <div :class=\"`${prefixClass}`\">\n        <slot name=\"prefix\" />\n      </div>\n      <div\n        class=\"flex justify-center text-xs font-bold leading-4 align-middle\"\n        :class=\"`${labelClass}`\"\n      >\n        {{ label ?? \"\" }}\n        <slot />\n      </div>\n      <div :class=\"`${suffixClass}`\">\n        <slot name=\"suffix\" />\n      </div>\n      <div\n        class=\"ml-2 text-lg leading-4\"\n        :class=\"`${suffixIconClass}`\"\n        v-if=\"suffixIcon\"\n      >\n        <Icon :name=\"suffixIcon\" />\n      </div>\n    </div>\n  </button>\n  <button\n    v-if=\"type === 'minimal'\"\n    class=\"max-w-fit disabled:cursor-not-allowed disabled:opacity-20 flex justify-between items-center transition duration-300 ease-in-out px-6 mt-2 min-w-[50px] text-xs font-semibold bg-transparent border-0 mb-2 lg:text-xl whitespace-nowrap\"\n    :class=\"`${colorClass} ${roundedClass} ${outerClass}`\"\n    v-bind=\"$attrs\"\n    :type=\"isSubmit ? 'submit' : 'button'\"\n  >\n    <div\n      class=\"z-10 flex items-center justify-center\"\n      :class=\"`${wrapperClass}`\"\n    >\n      <Icon\n        :name=\"prefixIcon\"\n        class=\"mr-2 text-lg font-semibold leading-4 text-black dark:text-white\"\n        :class=\"`${prefixIconClass}`\"\n        v-if=\"prefixIcon\"\n      />\n      <div class=\"text-black dark:text-white\" :class=\"`${prefixClass}`\">\n        <slot name=\"prefix\" />\n      </div>\n      <div\n        class=\"flex justify-center text-xs font-bold leading-4 align-middle dark:text-white\"\n        :class=\"`${labelClass}`\"\n      >\n        {{ label ?? \"\" }}\n        <slot />\n      </div>\n      <div class=\"text-black dark:text-white\" :class=\"`${suffixClass}`\">\n        <slot name=\"suffix\" />\n      </div>\n      <Icon\n        :name=\"suffixIcon\"\n        class=\"ml-2 text-lg leading-4 text-black dark:text-white\"\n        :class=\"`${suffixIconClass}`\"\n        v-if=\"suffixIcon\"\n      />\n    </div>\n  </button>\n</template>\n<style>\n:root {\n  --spinner-offset: 145;\n  --spinner-offset-min: 20;\n  --spinner-duration: 2400ms;\n  --spinner-size: 25px;\n}\n\n.spinner {\n  display: inline-block;\n  width: var(--spinner-size);\n  height: var(--spinner-size);\n}\n\n.spinner svg {\n  animation: rotator var(--spinner-duration) linear infinite;\n}\n\n.spinner circle {\n  fill: none;\n  stroke-width: 6;\n  stroke-linecap: round;\n  stroke-dasharray: var(--spinner-offset);\n  transform-origin: center;\n  animation:\n    dash var(--spinner-duration) ease-in-out infinite,\n    colors calc(var(--spinner-duration) * 4) ease-in-out infinite;\n}\n\n@keyframes colors {\n  0% {\n    stroke: v-bind(mode);\n  }\n  25% {\n    stroke: v-bind(mode);\n  }\n  50% {\n    stroke: v-bind(mode);\n  }\n  75% {\n    stroke: v-bind(mode);\n  }\n  100% {\n    stroke: v-bind(mode);\n  }\n}\n\n@keyframes rotator {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(270deg);\n  }\n}\n\n@keyframes dash {\n  0% {\n    stroke-dashoffset: var(--spinner-offset);\n  }\n  50% {\n    stroke-dashoffset: var(--spinner-offset-min);\n    transform: rotate(135deg);\n  }\n  100% {\n    stroke-dashoffset: var(--spinner-offset);\n    transform: rotate(450deg);\n  }\n}\n</style>\n"],"names":["darkColor","lightColor","props","__props","color","toRef","type","isSubmit","colorClass","computed","rounded","roundedClass","loading","hover","ref","mode","isDark","watch"],"mappings":"soBAoDMA,EAAY,UACZC,EAAa,kZApCnB,MAAMC,EAAQC,EAORC,EAAQC,EAAMH,EAAO,OAAO,EAC5BI,EAAOD,EAAMH,EAAO,MAAM,EAC1BK,EAAWF,EAAMH,EAAO,UAAU,EAEpC,IAAAM,EAAaC,EAAS,IAAM,CAC1B,GAAAH,EAAK,QAAU,UACjB,MAAO,MAAMF,EAAM,KAAK,aAAaA,EAAM,KAAK,gCAAgCA,EAAM,KAAK,kBAAkBA,EAAM,KAAK,0CAA0CA,EAAM,KAAK,MAE3K,GAAAE,EAAK,QAAU,YACV,MAAA,YAAYF,EAAM,KAAK,0JAA0JA,EAAM,KAAK,iBAAiBA,EAAM,KAAK,MAE7N,GAAAE,EAAK,QAAU,UACjB,MAAO,QAAQF,EAAM,KAAK,eAAeA,EAAM,KAAK,wCACtD,CACD,EAGK,MAAAM,EAAUL,EAAMH,EAAO,SAAS,EAChCS,EAAeF,EAAS,IAAM,CAClC,GAAIC,EAAQ,MACH,MAAA,cACT,CACD,EAGKE,EAAUP,EAAMH,EAAO,SAAS,EAChCW,EAAQC,EAAI,EAAK,EACjBC,EAAOD,EAAI,EAAE,EAInB,OAAIR,EAAK,QAAU,aAAe,CAACU,EAAO,MACxCD,EAAK,MAAQf,EAEbe,EAAK,MAAQd,EAGfgB,EACE,IAAMJ,EAAM,MACZ,IAAM,CACAA,EAAM,MACRE,EAAK,MAAQd,EACJ,CAACY,EAAM,OAAS,CAACG,EAAO,MACjCD,EAAK,MAAQf,EAEbe,EAAK,MAAQd,CACf,CAEJ,EAEAgB,EACE,IAAM,CAACD,EAAO,KAAK,EACnB,IAAM,CACAV,EAAK,QAAU,aAAe,CAACU,EAAO,MACxCD,EAAK,MAAQf,EAEbe,EAAK,MAAQd,CACf,CAEJ"}