@appscode/design-system 1.1.0-beta.8 → 1.1.0-beta.81

package/vue-components/v3/button/Button.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed } from "vue";
+
 interface Props {
   title?: string;
   tooltip?: string;
@@ -18,6 +20,7 @@ const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   iconClass: "",
   iconImage: "",
+
   iconImageWidth: undefined,
   modifierClasses: "is-primary",
   titleModifierClass: "",
@@ -28,6 +31,11 @@ const emit = defineEmits(["click"]);
 const handleClick = (e: Event) => {
   if (!props.disabled) emit("click", e);
 };
+
+const showUnpluginIcon = computed(() => {
+  if (props.iconClass.includes("unplugin")) return true;
+  else return false;
+});
 </script>
 
 <template>
@@ -38,15 +46,23 @@ const handleClick = (e: Event) => {
     @click="handleClick"
     :title="tooltip"
   >
-    <span v-if="iconClass || iconImage" class="icon is-small">
+    <span
+      v-if="iconClass || iconImage"
+      class="icon is-small"
+      :class="showUnpluginIcon ? iconClass : ''"
+    >
       <img
         v-if="iconImage"
         :src="iconImage"
         alt="icon"
         :width="iconImageWidth"
       />
+
+      <slot name="icon" v-else-if="showUnpluginIcon" />
+
       <i v-else :class="`fa fa-${iconClass}`" aria-hidden="true" />
     </span>
+
     <span v-if="title" :class="titleModifierClass">{{ title }}</span>
     <slot />
   </button>
@@ -55,805 +71,52 @@ const handleClick = (e: Event) => {
 <style lang="scss" scoped>
 .button {
   &.ac-button {
-    padding: 8px 18px;
+    padding: 8px 16px;
     font-weight: 500;
     line-height: 1;
 
+    &.is-primary {
+      &.is-light {
+        color: $primary;
+      }
+    }
+    &.is-warning {
+      &.is-light {
+        color: $yellow-30;
+      }
+    }
+
+    &.is-success {
+      &.is-light {
+        color: $green-30;
+      }
+    }
     &.is-light {
       &.is-loading {
         &::after {
           border-color: transparent transparent #1c1c1c #1c1c1c !important;
         }
       }
+      &.is-outlined {
+        &:hover {
+          border-color: inherit;
+        }
+      }
     }
-    &.is-square {
-      border: 1px solid $primary-95;
-    }
+
     &.is-small {
-      padding: 4px 9px;
+      padding: 4px 12px;
+      &:not(.is-rounded) {
+        border-radius: 4px;
+      }
+    }
+    &.is-medium {
+      font-size: 1rem;
+      height: 36px;
     }
   }
 }
 button.is-primary {
-  background-color: $ac-primary;
+  background-color: $primary;
 }
-// .button {
-//   transition: 86ms ease-in-out;
-
-//   // ac-button
-//   &.ac-button {
-//     border-color: $primary;
-//     border-radius: 4px;
-//     font-size: 14px;
-//     font-family: $font-paragraph;
-//     letter-spacing: 0.2px;
-//     color: $primary;
-//     font-weight: 500;
-//     height: 36px;
-//     padding-left: 25px;
-//     padding-right: 25px;
-//     line-height: 1;
-//     &:focus-visible {
-//       outline: none;
-//     }
-
-//     &:hover {
-//       border-color: hsla(
-//         var(--hsl-hue),
-//         var(--hsl-saturation),
-//         calc(var(--hsl-lightness) - 9%),
-//         1
-//       );
-//       color: hsla(
-//         var(--hsl-hue),
-//         var(--hsl-saturation),
-//         calc(var(--hsl-lightness) - 9%),
-//         1
-//       );
-//     }
-
-//     &.underline-button {
-//       text-decoration-line: underline;
-//       border: none;
-//       padding: 0;
-//       height: unset;
-//       letter-spacing: 1px;
-
-//       &.is-primary {
-//         color: $primary;
-//         background-color: transparent;
-
-//         &:hover {
-//           background-color: unset;
-//         }
-//       }
-//     }
-
-//     &.is-disabled {
-//       opacity: 0.5 !important;
-//     }
-
-//     &.is-rounded {
-//       border-radius: 9999px;
-//     }
-
-//     .ac-icon {
-//       margin-left: 25px;
-//       background-color: $white-100;
-//       color: $primary;
-//       padding: 2px 6px;
-//       border-radius: 4px;
-//       width: 20px;
-//       height: 20px;
-//       display: flex;
-//       align-items: center;
-//       justify-content: center;
-//       font-size: 12px;
-//     }
-
-//     &.is-small {
-//       height: 36px;
-//       font-size: 13px;
-//       letter-spacing: 0px;
-//       font-weight: 500;
-//       padding-left: 25px;
-//       padding-right: 25px;
-//     }
-
-//     &.is-extra-small {
-//       height: 32px;
-//       font-size: 12px;
-//       letter-spacing: 0px;
-//       font-weight: 500;
-//       padding-left: 20px;
-//       padding-right: 20px;
-//     }
-
-//     &.is-tiny {
-//       height: 28px;
-//       font-size: 11px;
-//       letter-spacing: 0px;
-//       font-weight: 400;
-//       padding-left: 15px;
-//       padding-right: 15px;
-//       line-height: 1;
-//     }
-//     &.is-extra-tiny {
-//       height: 22px;
-//       font-size: 11px;
-//       letter-spacing: 0px;
-//       font-weight: 400;
-//       padding-left: 10px;
-//       padding-right: 10px;
-//       line-height: 1;
-//     }
-//     &.is-normal {
-//       height: 45px;
-//       font-size: 15px;
-//       letter-spacing: 0px;
-//       font-weight: 500;
-//       padding-left: 25px;
-//       padding-right: 25px;
-//     }
-
-//     &.is-medium {
-//       height: 58px;
-//       font-size: 18px;
-//       padding-left: 45px;
-//       padding-right: 45px;
-//     }
-
-//     &.is-large {
-//       height: 48px;
-//       font-size: 16px;
-//       padding-left: 45px;
-//       padding-right: 45px;
-//     }
-
-//     &.is-square {
-//       width: 52px;
-//       height: 52px;
-//       padding: 0;
-//       &:hover {
-//         svg {
-//           color: $white-100;
-//         }
-//       }
-//       &.is-gray {
-//         background-color: $primary-90;
-//         color: $black-80;
-//         border-color: transparent;
-
-//         img {
-//           width: 16px;
-//         }
-
-//         i.fa {
-//           font-size: 18px;
-//           color: $black-80;
-//         }
-
-//         &:hover {
-//           background-color: $black-80;
-//         }
-//       }
-
-//       &.is-outlined-gray {
-//         border: 1px solid $primary-90;
-//         font-size: 15px;
-//       }
-
-//       &.is-transparent {
-//         background-color: transparent;
-//         color: $black-40;
-
-//         &:hover {
-//           background-color: $white-100-lighter;
-//           color: $ac-black;
-//         }
-
-//         &:focus {
-//           background-color: $white-100-lighter;
-//           color: $ac-black;
-//         }
-//       }
-
-//       &.transparent-bg {
-//         background-color: transparent;
-//         border: 1px solid $ac-label-text;
-
-//         img {
-//           &:hover {
-//             filter: brightness(1) !important;
-//           }
-//         }
-//       }
-
-//       &.is-normal {
-//         height: 45px;
-//         width: 45px;
-//       }
-
-//       &.is-small {
-//         width: 36px;
-//         height: 36px;
-//         font-size: 15px;
-//       }
-//       &.is-extra-small {
-//         width: 32px;
-//         height: 32px;
-//         font-size: 14px;
-//       }
-//       &.is-tinny {
-//         width: 25px;
-//         height: 25px;
-//         font-size: 12px;
-
-//         i.fa {
-//           font-size: 13px;
-//         }
-//       }
-//     }
-
-//     &.is-transparent {
-//       padding: 0;
-//       height: auto;
-//       border: none;
-//       font-size: 14px;
-//       font-weight: 500;
-//       background-color: transparent;
-//       color: $primary-10;
-
-//       &.is-primary {
-//         background-color: transparent;
-//         color: $primary;
-
-//         &:hover {
-//           background-color: transparent;
-//           color: $primary;
-//         }
-//       }
-
-//       &.is-danger {
-//         background-color: transparent;
-//         color: $danger;
-
-//         &:hover {
-//           background-color: transparent;
-//           color: $danger;
-//         }
-//       }
-
-//       &.is-small {
-//         letter-spacing: 0px;
-//         font-size: 13px;
-//       }
-
-//       &:focus {
-//         box-shadow: none;
-//         outline: none;
-//       }
-//     }
-
-//     &.is-white {
-//       background-color: $white-100;
-//       border: none;
-//     }
-
-//     &.is-light {
-//       background-color: $primary-90;
-//       border: none;
-
-//       &:hover {
-//         background-color: darken(#e7e7e7, 9);
-//       }
-//     }
-
-//     &.is-dark {
-//       background-color: $black-30;
-//       border: none;
-//       color: $white-100;
-
-//       &:hover {
-//         background-color: $primary-20;
-//       }
-//     }
-
-//     &.is-black {
-//       background-color: $primary-10;
-//       border: none;
-//       color: $white-100;
-
-//       &:hover {
-//         background-color: hsla(0, 0, calc(var(--hsl-lightness) - 9%), 1);
-//       }
-//     }
-
-//     &.is-text {
-//       background-color: $white-100;
-//       border: none;
-
-//       &:hover {
-//         box-shadow: none;
-//         box-shadow: none;
-//         color: hsla(
-//           var(--hsl-hue),
-//           var(--hsl-saturation),
-//           calc(var(--hsl-lightness) - 10%),
-//           1
-//         );
-//       }
-
-//       &:focus {
-//         box-shadow: none;
-//         box-shadow: none;
-//         color: hsla(
-//           var(--hsl-hue),
-//           var(--hsl-saturation),
-//           calc(var(--hsl-lightness) - 10%),
-//           1
-//         );
-//       }
-//     }
-
-//     &.is-static {
-//       border: none;
-//       background-color: $primary-90;
-//       color: $white-100;
-//     }
-
-//     // ac-button from mixin
-//     &.is-primary {
-//       @include ac-button($primary);
-//     }
-
-//     &.is-link {
-//       @include ac-button($info);
-//     }
-
-//     &.is-info {
-//       @include ac-button($info);
-//     }
-
-//     &.is-success {
-//       @include ac-button($success);
-//     }
-
-//     &.is-warning {
-//       @include ac-button($warning);
-//     }
-
-//     &.is-danger {
-//       @include ac-button($danger);
-//     }
-
-//     &.is-green {
-//       @include ac-button($success);
-//     }
-//   }
-
-//   // play button
-//   &.ac-play-button {
-//     width: 60px;
-//     height: 60px;
-//     background-color: transparent;
-//     transition: 0.3s ease-in-out;
-//     border: 2px solid $black-30;
-//     color: $black-30;
-
-//     i.fa {
-//       padding-left: 5px;
-//     }
-
-//     // ac-button from mixin
-//     &.is-primary {
-//       @include ac-play-button($primary);
-//     }
-
-//     &.is-link {
-//       @include ac-play-button($info);
-//     }
-
-//     &.is-info {
-//       @include ac-play-button($info);
-//     }
-
-//     &.is-success {
-//       @include ac-play-button($success);
-//     }
-
-//     &.is-warning {
-//       @include ac-play-button($warning);
-//     }
-
-//     &.is-danger {
-//       @include ac-play-button($danger);
-//     }
-
-//     &.is-large {
-//       width: auto;
-//       display: inline-block;
-//       padding: 0 25px 0 4px;
-//       height: 53px;
-//       border: 1px solid $primary;
-
-//       .ac-play {
-//         width: 44px;
-//         height: 44px;
-//         font-size: 16px;
-//         line-height: 44px;
-//         display: inline-block;
-//         border: 1px solid $primary;
-//         border-radius: 50%;
-//         margin-right: 10px;
-//       }
-
-//       span {
-//         font-size: 16px;
-//         font-weight: 600;
-//         color: $primary;
-//       }
-//     }
-//   }
-// }
-
-// .ac-play-button-wrapper {
-//   display: flex;
-//   align-items: center;
-
-//   .ac-play-button {
-//     height: 52px;
-//     width: 52px;
-//     margin-bottom: 0;
-//     margin-right: 10px;
-//     background-color: $primary;
-
-//     i.fa {
-//       color: $white-100;
-//     }
-//   }
-
-//   p {
-//     font-size: 16px;
-//     font-weight: 600;
-//     display: block;
-//     color: $primary-10;
-
-//     span {
-//       font-size: 12px;
-//       display: block;
-//       font-weight: 400;
-//     }
-//   }
-
-//   &:hover {
-//     p {
-//       color: $primary;
-//     }
-//   }
-// }
-
-// // counter button start
-// .ac-counter-button {
-//   background-color: transparent;
-//   border: 1px solid $ac-label-text;
-//   border-radius: 4px;
-//   height: 46px;
-//   overflow: hidden;
-//   display: inline-flex;
-//   align-items: center;
-
-//   .ac-counter {
-//     min-width: 50px;
-//     text-align: left;
-//     padding: 0;
-//     height: 100%;
-//     overflow: hidden;
-
-//     input[type="number"] {
-//       border: none;
-//       height: 100%;
-//       padding: 10px;
-//       font-size: 15px;
-//       font-weight: 500;
-//       color: $primary-20;
-//       background-color: transparent;
-//       width: 100%;
-//       -moz-appearance: textfield;
-
-//       /* Chrome, Safari, Edge, Opera */
-//       &::-webkit-outer-spin-button,
-//       &::-webkit-inner-spin-button {
-//         -webkit-appearance: none;
-//         margin: 0;
-//       }
-
-//       &:focus {
-//         outline: none;
-//         background-color: $white-100;
-//       }
-//     }
-//   }
-
-//   // .ac-counter-button .ac-counter {
-//   //   padding: 0;
-//   //   height: 100%;
-//   // }
-
-//   .ac-counter-arrow-wrapper {
-//     height: 100%;
-//     color: $primary-10;
-//     border-left: 1px solid $ac-label-text;
-
-//     .ac-counter-arrow {
-//       background-color: transparent;
-//       border: none;
-//       cursor: pointer;
-//       color: $ac-label-text;
-//       height: 23px;
-
-//       &:hover {
-//         color: $primary-10;
-//       }
-
-//       &:first-child {
-//         border-bottom: 1px solid $ac-label-text;
-//       }
-//     }
-//   }
-// }
-
-// // counter button end
-
-// // up down button start
-// .up-down-buttons {
-//   border-radius: 4px;
-//   overflow: hidden;
-//   margin-right: 10px;
-//   position: relative;
-//   z-index: 1;
-//   max-width: 44px;
-
-//   &.is-small {
-//     max-width: 36px;
-
-//     .up-down-button {
-//       width: 36px;
-//       height: 18px;
-//     }
-//   }
-
-//   .up-down-button {
-//     background-color: $primary-90;
-//     border: none;
-//     display: block;
-//     cursor: pointer;
-//     width: 44px;
-//     height: 22.5px;
-//     color: #a4a4a4;
-
-//     &.is-info {
-//       background-color: $primary;
-//       color: $white-100;
-//       transition: 0.3s;
-//     }
-
-//     &:disabled {
-//       cursor: not-allowed;
-//       opacity: 0.8;
-//     }
-//   }
-// }
-
-// // up down button end
-
-// .ac-options:not(.list-button) {
-//   button {
-//     display: flex;
-//     flex-direction: column;
-
-//     span {
-//       width: 5px;
-//       height: 5px;
-//       border-radius: 50%;
-//       background-color: $primary-20;
-//       margin-bottom: 3px;
-
-//       &:last-child {
-//         margin-bottom: 0;
-//       }
-//     }
-//   }
-// }
-
-// // dark theme start
-// .is-dark-theme {
-//   .button.ac-button.is-primary.is-light {
-//     background-color: $primary;
-//     color: $white-100;
-//     &:hover {
-//       opacity: 0.8;
-//     }
-//   }
-//   .button.ac-button.is-danger.is-light {
-//     background-color: $danger;
-//     color: $white-100;
-//     &:hover {
-//       opacity: 0.8;
-//     }
-//   }
-//   .button.ac-button {
-//     --ac-white: #ffffff;
-//     &.is-white {
-//       --ac-white: #2e323c;
-//     }
-//   }
-//   .button.ac-button.is-text {
-//     background-color: transparent;
-//   }
-// }
-// // dark theme end
-// /****************************************
-// Responsive Classes
-// *****************************************/
-// // Extra small devices (portrait phones, less than 576px)
-// @media (max-width: 575.98px) {
-//   .button {
-//     &.ac-button {
-//       font-size: 14px;
-//       letter-spacing: 0px;
-//       font-weight: 500;
-//       height: 30px;
-//       padding-left: 20px;
-//       padding-right: 20px;
-
-//       &.is-medium {
-//         height: 38px;
-//         font-size: 15px;
-//       }
-
-//       &.is-large {
-//         height: 42px;
-//         font-size: 16px;
-//       }
-
-//       .ac-icon {
-//         padding: 3px;
-//         font-size: 10px;
-//       }
-//     }
-
-//     &.ac-play-button {
-//       width: 50px;
-//       height: 50px;
-//     }
-//   }
-
-//   .ac-counter-button {
-//     height: 42px;
-//   }
-// }
-
-// // Small devices (landscape phones, 576px and up)
-// @media (min-width: 576px) and (max-width: 767.98px) {
-//   .button {
-//     &.ac-button {
-//       font-size: 14px;
-//       letter-spacing: 0px;
-//       font-weight: 500;
-//       height: 36px;
-//       padding-left: 30px;
-//       padding-right: 30px;
-
-//       &.is-medium {
-//         height: 38px;
-//         font-size: 15px;
-//       }
-
-//       &.is-large {
-//         height: 42px;
-//         font-size: 16px;
-//       }
-
-//       .ac-icon {
-//         padding: 3px;
-//         font-size: 10px;
-//       }
-//     }
-
-//     &.ac-play-button {
-//       width: 50px;
-//       height: 50px;
-//     }
-//   }
-
-//   .ac-counter-button {
-//     height: 42px;
-//   }
-// }
-
-// // Medium devices (tablets, 768px and up)
-// @media (min-width: 768px) and (max-width: 991.98px) {
-//   .button {
-//     &.ac-button {
-//       font-size: 14px;
-//       letter-spacing: 0px;
-//       font-weight: 500;
-//       height: 36px;
-//       padding-left: 30px;
-//       padding-right: 30px;
-
-//       &.is-small {
-//         letter-spacing: 0px;
-//         line-height: 1;
-//       }
-
-//       &.is-medium {
-//         height: 38px;
-//         font-size: 15px;
-//       }
-
-//       &.is-large {
-//         height: 42px;
-//         font-size: 16px;
-//       }
-
-//       .ac-icon {
-//         padding: 3px;
-//         font-size: 10px;
-//       }
-//     }
-
-//     &.ac-play-button {
-//       width: 50px;
-//       height: 50px;
-//     }
-//   }
-
-//   .ac-counter-button {
-//     height: 42px;
-//   }
-// }
-
-// // Large devices (desktops, 992px and up)
-// @media (min-width: 992px) and (max-width: 1199.98px) {
-//   .button {
-//     &.ac-button {
-//       font-size: 15px;
-//       letter-spacing: 0px;
-//       font-weight: 500;
-//       height: 38px;
-//       padding-left: 30px;
-//       padding-right: 30px;
-
-//       &.is-medium {
-//         height: 40px;
-//         font-size: 15px;
-//       }
-
-//       &.is-large {
-//         height: 44px;
-//         font-size: 16px;
-//       }
-
-//       .ac-icon {
-//         padding: 3px;
-//         font-size: 10px;
-//       }
-//     }
-
-//     &.ac-play-button {
-//       width: 50px;
-//       height: 50px;
-//     }
-//   }
-
-//   .ac-counter-button {
-//     height: 42px;
-//   }
-// }
-
-// // Extra large devices (large desktops, 1200px and up)
-// @media (min-width: 1200px) {
-// }
 </style>