{"version":3,"file":"BaseButton-ITDzii9J.js","sources":["../../src/components/base/BaseButton.vue"],"sourcesContent":["<script setup>\nimport SvgIcon from '@/components/base/SvgIcon.vue';\n\nconst props = defineProps({\n  variant: {\n    /** 按鈕主題色 */\n    // primary | secondary | tertiary | brownish\n    type: String,\n    // required: true,\n    default: 'primary'\n  },\n  size: {\n    /** 按鈕尺寸 */\n    // lg | md | sm\n    type: String,\n    // required: true,\n    default: 'md'\n  },\n\n  styles: {\n    /** 按鈕類型 */\n    // filled | outline\n    type: String,\n    default: 'filled'\n  },\n  buttonType: {\n    type: String,\n    default: 'button'\n  },\n  block: {\n    type: Boolean,\n    required: false,\n    default: false\n  },\n\n  disabled: {\n    type: Boolean,\n    required: false,\n    default: false\n  },\n  rounded: {\n    type: Boolean,\n    required: false,\n    default: false\n  },\n  labelSize: {\n    /** 文字大小 */\n    // lg | md | sm\n    type: String,\n    required: false,\n    default: 'md'\n  },\n  labelStyle: {\n    type: String,\n    required: false,\n    default: 'regular'\n  },\n  hasIconLeft: {\n    /** 有沒有左方icon */\n    type: Boolean,\n    required: false,\n    default: false\n  },\n  iconLeft: {\n    /** 左方icon檔案名稱 */\n    type: String\n  },\n  hasIconRight: {\n    /** 有沒有右方icon */\n    type: Boolean,\n    required: false,\n    default: false\n  },\n  iconRight: {\n    /** 右方icon檔案名稱 */\n    type: String,\n    default: 'arrowRight'\n  },\n  iconSize: {\n    /** icon尺寸 */\n    // lg | md | sm\n    type: String,\n    default: 'md'\n  }\n});\n\nconst classes = computed(() => ({\n  [type.value]: true,\n  [`${type.value}-${props.variant}-${props.styles}-${props.size}`]: true,\n  [`btn-txt-${props.labelSize}-${props.labelStyle}`]: true,\n  [`btn-rounded`]: props.rounded,\n  [`btn-block`]: props.block,\n  [`disabled`]: props.disabled\n  // [`btn-disabled`]: props.disabled\n}));\n\nconst type = computed(() => (props.label ? 'btn' : 'icon'));\n</script>\n<template>\n  <button :class=\"classes\" :type=\"props.buttonType\">\n    <!-- <button :class=\"classes\"> -->\n    <SvgIcon v-if=\"props.hasIconLeft\" :class=\"props.iconSize\" :name=\"props.iconLeft\" />\n\n    <span>\n      <slot></slot>\n    </span>\n    <SvgIcon v-if=\"props.hasIconRight\" :class=\"props.iconSize\" :name=\"props.iconRight\" />\n  </button>\n</template>\n<style lang=\"scss\" scoped>\n$btn-sizes: lg, md, sm; //Button Size\n\n$btn-paddings: (\n  sm: 8px 16px,\n  md: 8px 24px,\n  lg: 12px 24px\n); //Button Padding\n\n$btn-font-sizes: (\n  'lg': 18,\n  'md': 16,\n  'sm': 14\n); //Button Font Size\n\n$btn-font-weights: (\n  'lg': 1.5,\n  'md': 1.5,\n  'sm': 1.15\n); //Button Font Weight\n\n/** Button Border Radius */\n$btn-base-border-radius: 4px;\n$btn-rounded-border-radius: 100px;\n\n/** ==Primary Button Filled== */\n// -Background\n$btn-primary-filled-bg-color: $color-primary-100;\n$btn-primary-filled-bg-color--hover: $color-primary-darker;\n$btn-primary-filled-bg-color--disabled: $color-primary-40;\n// -Text\n$btn-primary-filled-txt-color: $txt-color-white;\n$btn-primary-filled-txt-color--hover: $txt-color-white;\n$btn-primary-filled-txt-color--disabled: rgba($txt-color-white, 0.4);\n// -Border\n$btn-primary-filled-border-color: none;\n\n/** ==Brownish Button Filled== */\n// -Background\n$btn-brownish-filled-bg-color: #d44934;\n$btn-brownish-filled-bg-color--hover: #7f2c1f;\n$btn-brownish-filled-bg-color--disabled: $color-primary-40;\n// -Text\n$btn-brownish-filled-txt-color: $txt-color-white;\n$btn-brownish-filled-txt-color--hover: $txt-color-white;\n$btn-brownish-filled-txt-color--disabled: rgba($txt-color-white, 0.4);\n// -Border\n$btn-brownish-filled-border-color: none;\n\n/** ==Primary Button Outline== */\n// -Background\n// $btn-primary-outline-bg-color: transparent;\n$btn-primary-outline-bg-color: $bg-light-100;\n$btn-primary-outline-bg-color--hover: $color-primary-20;\n$btn-primary-outline-bg-color--disabled: transparent;\n// -Text\n$btn-primary-outline-txt-color: $color-primary-100;\n$btn-primary-outline-txt-color--hover: $color-primary-100;\n$btn-primary-outline-txt-color--disabled: $color-primary-40;\n// -Border\n$btn-primary-outline-border-color: $color-primary-100;\n$btn-primary-outline-border-color--disabled: $color-primary-40;\n\n/** ==Secondary Button Filled== */\n// -Background\n$btn-secondary-filled-bg-color: $bg-dark-300;\n$btn-secondary-filled-bg-color--hover: $bg-dark-200;\n$btn-secondary-filled-bg-color--disabled: $color-grey-50;\n// -Text\n$btn-secondary-filled-txt-color: $txt-color-white-100;\n$btn-secondary-filled-txt-color--hover: $txt-color-white-100;\n$btn-secondary-filled-txt-color--disabled: $txt-color-white-80;\n// -Border\n$btn-secondary-filled-border-color: none;\n\n/** ==Secondary Button Outline== */\n// -Background\n$btn-secondary-outline-bg-color: $color-white-base;\n$btn-secondary-outline-bg-color--hover: rgba($txt-color-grey, 0.05);\n$btn-secondary-outline-bg-color--disabled: transparent;\n// -Text\n$btn-secondary-outline-txt-color: rgba($txt-color-grey, 0.8);\n$btn-secondary-outline-txt-color--hover: rgba($txt-color-grey, 0.8);\n$btn-secondary-outline-txt-color--disabled: rgba($txt-color-grey, 0.24);\n// -Border\n$btn-secondary-outline-border-color: map-get(map-get($colors, black), 10);\n$btn-secondary-outline-border-color--disabled: map-get(map-get($colors, black), 05);\n\n/** ==Tertiary Button Filled== */\n// -Background\n$btn-tertiary-filled-bg-color: $bg-light-300;\n$btn-tertiary-filled-bg-color--hover: $color-grey-40;\n$btn-tertiary-filled-bg-color--disabled: $bg-light-300;\n// -Text\n$btn-tertiary-filled-txt-color: $txt-color-grey-80;\n$btn-tertiary-filled-txt-color--hover: $txt-color-grey-80;\n$btn-tertiary-filled-txt-color--disabled: $txt-color-grey-24;\n// -Border\n$btn-tertiary-filled-border-color: none;\n\n/** Button Common Setting */\n%btn-base {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n  box-sizing: border-box;\n  text-decoration: none;\n  border: none;\n  cursor: pointer;\n  transition: all 0.3s ease-in;\n}\n\n/** Defined Button Different Status */\n$btn-config: (\n  brownish-filled: (\n    class: 'brownish-filled',\n    bg-default: $btn-brownish-filled-bg-color,\n    bg-hover: $btn-brownish-filled-bg-color--hover,\n    bg-disabled: $btn-brownish-filled-bg-color--disabled,\n    color: $btn-brownish-filled-txt-color,\n    color--hover: $btn-brownish-filled-txt-color--hover,\n    color--disabled: $btn-brownish-filled-txt-color--disabled,\n    border: $btn-brownish-filled-border-color,\n    border--disabled: $btn-brownish-filled-border-color\n  ),\n  primary-filled: (\n    class: 'primary-filled',\n    bg-default: $btn-primary-filled-bg-color,\n    bg-hover: $btn-primary-filled-bg-color--hover,\n    bg-disabled: $btn-primary-filled-bg-color--disabled,\n    color: $btn-primary-filled-txt-color,\n    color--hover: $btn-primary-filled-txt-color--hover,\n    color--disabled: $btn-primary-filled-txt-color--disabled,\n    border: $btn-primary-filled-border-color,\n    border--disabled: $btn-primary-filled-border-color\n  ),\n  secondary-filled: (\n    class: 'secondary-filled',\n    bg-default: $btn-secondary-filled-bg-color,\n    bg-hover: $btn-secondary-filled-bg-color--hover,\n    bg-disabled: $btn-secondary-filled-bg-color--disabled,\n    color: $btn-secondary-filled-txt-color,\n    color--hover: $btn-secondary-filled-txt-color--hover,\n    color--disabled: $btn-secondary-filled-txt-color--disabled,\n    border: $btn-secondary-filled-border-color,\n    border--disabled: $btn-secondary-filled-border-color\n  ),\n  tertiary-filled: (\n    class: 'tertiary-filled',\n    bg-default: $btn-tertiary-filled-bg-color,\n    bg-hover: $btn-tertiary-filled-bg-color--hover,\n    bg-disabled: $btn-tertiary-filled-bg-color--disabled,\n    color: $btn-tertiary-filled-txt-color,\n    color--hover: $btn-tertiary-filled-txt-color--hover,\n    color--disabled: $btn-tertiary-filled-txt-color--disabled,\n    border: $btn-tertiary-filled-border-color,\n    border--disabled: $btn-tertiary-filled-border-color\n  ),\n  primary-outline: (\n    class: 'primary-outline',\n    bg-default: $btn-primary-outline-bg-color,\n    bg-hover: $btn-primary-outline-bg-color--hover,\n    bg-disabled: $btn-primary-outline-bg-color--disabled,\n    color: $btn-primary-outline-txt-color,\n    color--hover: $btn-primary-outline-txt-color--hover,\n    color--disabled: $btn-primary-outline-txt-color--disabled,\n    border: $btn-primary-outline-border-color,\n    border--disabled: $btn-primary-outline-border-color--disabled\n  ),\n  secondary-outline: (\n    class: 'secondary-outline',\n    bg-default: $btn-secondary-outline-bg-color,\n    bg-hover: $btn-secondary-outline-bg-color--hover,\n    bg-disabled: $btn-secondary-outline-bg-color--disabled,\n    color: $btn-secondary-outline-txt-color,\n    color--hover: $btn-secondary-outline-txt-color--hover,\n    color--disabled: $btn-secondary-outline-txt-color--disabled,\n    border: $btn-secondary-outline-border-color,\n    border--disabled: $btn-secondary-outline-border-color--disabled\n  )\n);\n\n@each $type, $value in $btn-config {\n  $class: map-get($value, class);\n\n  $color: map-get($value, color);\n  $colorHover: map-get($value, color--hover);\n  $colorDisabled: map-get($value, color--disabled);\n\n  $bgColor: map-get($value, bg-default);\n  $bgColorHover: map-get($value, bg-hover);\n  $bgColorDisabled: map-get($value, bg-disabled);\n\n  $border: map-get($value, border);\n  $borderDisabled: map-get($value, border--disabled);\n\n  .btn,\n  .icon {\n    @extend %btn-base;\n    border-radius: $btn-base-border-radius;\n\n    &-rounded {\n      border-radius: $btn-rounded-border-radius;\n    }\n\n    &-#{$class} {\n      @each $btn-size in $btn-sizes {\n        &-#{$btn-size} {\n          padding: map-get($btn-paddings, $btn-size);\n          background: $bgColor;\n          color: $color;\n          border: 1px solid $border;\n\n          &:hover {\n            background: $bgColorHover;\n            color: $colorHover;\n          }\n\n          // &:disabled {\n          //     cursor: not-allowed;\n          //     background: $bgColorDisabled;\n          //     color: $colorDisabled;\n          //     border: 1px solid $borderDisabled;\n          // }\n\n          &.disabled {\n            background: $bgColorDisabled;\n            color: $colorDisabled;\n            border: 1px solid $borderDisabled;\n          }\n        }\n      }\n    }\n\n    &-txt {\n      @each $btn-size, $btn-font-size in $btn-font-sizes {\n        &-#{$btn-size}-regular {\n          @include txt-style($btn-font-size);\n          line-height: map-get($btn-font-weights, $btn-size);\n        }\n\n        &-#{$btn-size}-bold {\n          @include txt-style($btn-font-size, bold);\n          line-height: map-get($btn-font-weights, $btn-size);\n        }\n      }\n    }\n\n    &-block {\n      display: block;\n      width: 100%;\n    }\n\n    &-disabled {\n      background: $bgColorDisabled;\n      color: $colorDisabled;\n      border: 1px solid $borderDisabled;\n    }\n  }\n}\n\nbutton {\n  span {\n    white-space: nowrap;\n    text-align: center;\n    width: 100%;\n  }\n}\n</style>\n"],"names":["props","__props","classes","computed","type"],"mappings":"+0BAGA,MAAMA,EAAQC,EAmFRC,EAAUC,EAAS,KAAO,CAC9B,CAACC,EAAK,KAAK,EAAG,GACd,CAAC,GAAG,OAAAA,EAAK,MAAK,KAAI,OAAAJ,EAAM,QAAO,KAAI,OAAAA,EAAM,OAAM,KAAI,OAAAA,EAAM,KAAM,EAAG,GAClE,CAAC,WAAW,OAAAA,EAAM,UAAS,KAAI,OAAAA,EAAM,WAAY,EAAG,GACnD,cAAgBA,EAAM,QACtB,YAAcA,EAAM,MACpB,SAAaA,EAAM,QAEtB,EAAE,EAEII,EAAOD,EAAS,IAAOH,EAAM,MAAQ,MAAQ,MAAO"}