habit-ui - npm Package Compare versions

Comparing version 0.5.26 to 0.6.0

dist/index.es.js

@@ -188,3 +188,6 @@ function ___$insertStylesToHeader(css) {
     return {
-      hasSlot: false
+      hasSlot: false,
+      id: 'button-id-' + Math.random().toString(36).substring(2),
+      isButtonActive: false,
+      buttonObj: null
     };
@@ -230,2 +233,10 @@ },
       this.$emit('click', evt);
+    },
+    activateButton: function activateButton() {
+      this.buttonObj.classList.add('button-active');
+      this.isButtonActive = true;
+    },
+    deactivateButton: function deactivateButton() {
+      this.buttonObj.classList.remove('button-active');
+      this.isButtonActive = false;
     }
@@ -238,6 +249,41 @@ },
     });
+    this.buttonObj = document.getElementById(this.id);
+    this.buttonObj.addEventListener('mousedown', function () {
+      that.activateButton();
+
+      // 마우스가 버튼 밖으로 나갔을 때 버튼을 비활성화
+      window.addEventListener('mouseup', function mouseupHandler() {
+        that.deactivateButton();
+        window.removeEventListener('mouseup', mouseupHandler);
+      });
+    });
+    this.buttonObj.addEventListener('touchstart', function () {
+      that.activateButton();
+
+      // 터치가 버튼 밖으로 나갔을 때 버튼을 비활성화
+      window.addEventListener('touchend', function touchendHandler() {
+        that.deactivateButton();
+        window.removeEventListener('touchend', touchendHandler);
+      });
+
+      // 터치가 버튼을 벗어났을 때 버튼을 비활성화 (추가)
+      window.addEventListener('touchcancel', function touchcancelHandler() {
+        that.deactivateButton();
+        window.removeEventListener('touchcancel', touchcancelHandler);
+      });
+    });
+    this.buttonObj.addEventListener('touchmove', function (event) {
+      if (!this.isButtonActive) return;
+      var touch = event.touches[0];
+      var rect = this.getBoundingClientRect();
+
+      // 버튼 영역을 벗어나면 버튼 비활성화
+      if (touch.clientX < rect.left || touch.clientX > rect.right || touch.clientY < rect.top || touch.clientY > rect.bottom) {
+        that.deactivateButton();
+      }
+    });
   }
 };
 
-var _hoisted_1$1 = ["disabled"];
+var _hoisted_1$1 = ["disabled", "id"];
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
@@ -251,3 +297,4 @@ return openBlock(), createElementBlock("button", {
       return $options.handleClick && $options.handleClick.apply($options, arguments);
-    })
+    }),
+    id: $data.id
   }, [$props.icon && $options.computedIconPosition === 'left' ? (openBlock(), createElementBlock("i", {
@@ -266,3 +313,3 @@ key: 0,
 
-___$insertStylesToHeader("button[data-v-6210de47] {\n  border: 0;\n  outline: 0;\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n}\n\n.hb-button[data-v-6210de47] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n.hb-button[data-v-6210de47]:hover, .hb-button[data-v-6210de47]:active {\n  transition: 0.07s;\n}\n\n.hb-button[data-v-6210de47] {\n  background-color: #5c7cfa;\n  color: white;\n}\n\n.hb-button--primary[data-v-6210de47] {\n  background-color: #5c7cfa;\n  color: white;\n}\n\n.hb-button--primary[data-v-6210de47]:hover {\n  background-color: #4c6ef5;\n}\n\n.hb-button--primary[data-v-6210de47]:active {\n  background-color: #3b5bdb;\n}\n\n.hb-button--kakao[data-v-6210de47] {\n  background-color: #fde504;\n  color: black;\n}\n\n.hb-button--kakao[data-v-6210de47]:hover {\n  background-color: #ffe066;\n}\n\n.hb-button--kakao[data-v-6210de47]:active {\n  background-color: #ffd43b;\n}\n\n.hb-button--lightblue[data-v-6210de47] {\n  background-color: #edf2ff;\n  color: #5c7cfa;\n}\n\n.hb-button--lightblue[data-v-6210de47]:hover {\n  background-color: rgba(219, 228, 255, 0.75);\n}\n\n.hb-button--lightblue[data-v-6210de47]:active {\n  background-color: #dbe4ff;\n}\n\n.hb-button--lightgray[data-v-6210de47] {\n  background-color: #f1f3f5;\n  color: #495057;\n}\n\n.hb-button--lightgray[data-v-6210de47]:hover {\n  background-color: #e9ecef;\n}\n\n.hb-button--lightgray[data-v-6210de47]:active {\n  background-color: #dee2e6;\n}\n\n.hb-button--line[data-v-6210de47] {\n  background-color: white;\n  border: 1px solid;\n  border-color: #5c7cfa;\n  color: #5c7cfa;\n}\n\n.hb-button--line.hb-button--primary[data-v-6210de47] {\n  border-color: #5c7cfa;\n  color: #5c7cfa;\n}\n\n.hb-button--line.hb-button--primary[data-v-6210de47]:hover {\n  border-color: #4c6ef5;\n  background-color: rgba(237, 242, 255, 0.5);\n}\n\n.hb-button--line.hb-button--primary[data-v-6210de47]:active {\n  border-color: #3b5bdb;\n  background-color: #edf2ff;\n}\n\n.hb-button--line.hb-button--gray[data-v-6210de47] {\n  border-color: #ced4da;\n  color: #adb5bd;\n}\n\n.hb-button--line.hb-button--gray[data-v-6210de47]:hover {\n  border-color: #adb5bd;\n  background-color: rgba(248, 249, 250, 0.5);\n}\n\n.hb-button--line.hb-button--gray[data-v-6210de47]:active {\n  border-color: #adb5bd;\n  background-color: #f8f9fa;\n}\n\n.hb-button--text[data-v-6210de47] {\n  background-color: transparent;\n  border: 0;\n  color: #5c7cfa;\n}\n\n.hb-button--text[data-v-6210de47]:hover {\n  background-color: rgba(237, 242, 255, 0.5);\n}\n\n.hb-button--text[data-v-6210de47]:active {\n  background-color: #edf2ff;\n}\n\n.hb-button[data-v-6210de47]:disabled {\n  background-color: #ced4da !important;\n  color: #adb5bd !important;\n  border: none !important;\n}\n\n.hb-button--line[data-v-6210de47]:disabled {\n  background-color: #f1f3f5 !important;\n  border: 1px solid #ced4da !important;\n  color: #ced4da !important;\n}\n\n.hb-button--text[data-v-6210de47]:disabled {\n  background-color: transparent !important;\n  color: #ced4da !important;\n}\n\n.hb-button--xs[data-v-6210de47] {\n  height: 22px;\n  border-radius: 3px;\n  padding: 0 6px;\n  font-size: 11px;\n}\n\n.hb-button--sm[data-v-6210de47] {\n  height: 28px;\n  border-radius: 4px;\n  padding: 0 8px;\n  font-size: 13px;\n}\n\n.hb-button--md[data-v-6210de47] {\n  height: 36px;\n  border-radius: 6px;\n  padding: 0 12px;\n  font-size: 13px;\n}\n\n.hb-button--lg[data-v-6210de47] {\n  height: 48px;\n  border-radius: 6px;\n  padding: 0 16px;\n  font-size: 14px;\n  font-weight: bold;\n}\n\n.hb-button--xl[data-v-6210de47] {\n  height: 56px;\n  border-radius: 6px;\n  padding: 0 20px;\n  font-size: 15px;\n  font-weight: bold;\n}\n\n.hb-button--full[data-v-6210de47] {\n  width: 100%;\n}\n\n.hb-button__icon--left[data-v-6210de47] {\n  margin-right: 10px;\n}\n\n.hb-button__icon--left[data-v-6210de47]::before {\n  vertical-align: middle;\n}\n\n.hb-button__icon--right[data-v-6210de47] {\n  margin-left: 10px;\n}\n\n.hb-button__icon--right[data-v-6210de47]::before {\n  vertical-align: middle;\n}");
+___$insertStylesToHeader("@charset \"UTF-8\";\nbutton[data-v-6210de47] {\n  border: 0;\n  outline: 0;\n  background-color: transparent;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 웹킷 브라우저의 경우 */\n  -webkit-user-select: none; /* 사용자 선택 금지 */\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  touch-action: manipulation; /* 터치 액션 제어 */\n  display: flex;\n  align-items: center;\n}\n\n.hb-button[data-v-6210de47] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n.hb-button[data-v-6210de47]:hover, .hb-button[data-v-6210de47]:active {\n  transition: 0.07s;\n}\n\n.hb-button[data-v-6210de47] {\n  background-color: #501eff;\n  color: white;\n  cursor: pointer; /* 마우스 포인터가 버튼 위에 있을 때 모양을 변경 */\n  transition: transform 0.2s ease-out, background-color 0.2s ease-out; /* 애니메이션 효과 설정 */\n}\n\n.hb-button.button-active[data-v-6210de47] {\n  transform: scale(0.97); /* 버튼이 터치된 상태에서 작아지도록 설정 */\n}\n\n.hb-button--primary[data-v-6210de47] {\n  background-color: #501eff;\n  color: white;\n}\n\n.hb-button--primary[data-v-6210de47]:hover {\n  background-color: #3200e0; /* 호버 상태에서 배경색이 어두워지도록 설정 */\n}\n\n.hb-button--primary.button-active[data-v-6210de47] {\n  background-color: #2900b7; /* 터치된 상태에서 배경색이 더 어두워지도록 설정 */\n}\n\n.hb-button--kakao[data-v-6210de47] {\n  background-color: #fde504;\n  color: black;\n}\n\n.hb-button--kakao[data-v-6210de47]:hover {\n  background-color: #f0d902;\n}\n\n.hb-button--kakao.button-active[data-v-6210de47] {\n  background-color: #d6c202;\n}\n\n.hb-button--lightblue[data-v-6210de47] {\n  background-color: #edf2ff;\n  color: #5c7cfa;\n}\n\n.hb-button--lightblue[data-v-6210de47]:hover {\n  background-color: rgba(219, 228, 255, 0.75);\n}\n\n.hb-button--lightblue.button-active[data-v-6210de47] {\n  background-color: #d6e0ff;\n}\n\n.hb-button--lightgray[data-v-6210de47] {\n  background-color: #f1f3f5;\n  color: #495057;\n}\n\n.hb-button--lightgray[data-v-6210de47]:hover {\n  background-color: #e9ecef;\n}\n\n.hb-button--lightgray.button-active[data-v-6210de47] {\n  background-color: #dee2e6;\n}\n\n.hb-button--line[data-v-6210de47] {\n  background-color: white;\n  border: 1px solid;\n  border-color: #501eff;\n  color: #501eff;\n}\n\n.hb-button--line.hb-button--primary[data-v-6210de47] {\n  border-color: #501eff;\n  color: #501eff;\n}\n\n.hb-button--line.hb-button--primary[data-v-6210de47]:hover {\n  border-color: #4c6ef5;\n  background-color: rgba(237, 242, 255, 0.5);\n}\n\n.hb-button--line.hb-button--primary[data-v-6210de47]:active {\n  border-color: #3b5bdb;\n  background-color: #edf2ff;\n}\n\n.hb-button--line.hb-button--gray[data-v-6210de47] {\n  border-color: #ced4da;\n  color: #adb5bd;\n}\n\n.hb-button--line.hb-button--gray[data-v-6210de47]:hover {\n  border-color: #adb5bd;\n  background-color: rgba(248, 249, 250, 0.5);\n}\n\n.hb-button--line.hb-button--gray[data-v-6210de47]:active {\n  border-color: #adb5bd;\n  background-color: #f8f9fa;\n}\n\n.hb-button--text[data-v-6210de47] {\n  background-color: transparent;\n  border: 0;\n  color: #501eff;\n}\n\n.hb-button--text[data-v-6210de47]:hover {\n  background-color: rgba(237, 242, 255, 0.5);\n}\n\n.hb-button--text[data-v-6210de47]:active {\n  background-color: #edf2ff;\n}\n\n.hb-button[data-v-6210de47]:disabled {\n  background-color: #ced4da !important;\n  color: #adb5bd !important;\n  border: none !important;\n}\n\n.hb-button--line[data-v-6210de47]:disabled {\n  background-color: #f1f3f5 !important;\n  border: 1px solid #ced4da !important;\n  color: #ced4da !important;\n}\n\n.hb-button--text[data-v-6210de47]:disabled {\n  background-color: transparent !important;\n  color: #ced4da !important;\n}\n\n.hb-button--xs[data-v-6210de47] {\n  height: 22px;\n  border-radius: 3px;\n  padding: 0 6px;\n  font-size: 11px;\n}\n\n.hb-button--sm[data-v-6210de47] {\n  height: 28px;\n  border-radius: 4px;\n  padding: 0 8px;\n  font-size: 13px;\n}\n\n.hb-button--md[data-v-6210de47] {\n  height: 36px;\n  border-radius: 6px;\n  padding: 0 12px;\n  font-size: 13px;\n}\n\n.hb-button--lg[data-v-6210de47] {\n  height: 48px;\n  border-radius: 6px;\n  padding: 0 16px;\n  font-size: 14px;\n  font-weight: bold;\n}\n\n.hb-button--xl[data-v-6210de47] {\n  height: 56px;\n  border-radius: 6px;\n  padding: 0 20px;\n  font-size: 15px;\n  font-weight: bold;\n}\n\n.hb-button--full[data-v-6210de47] {\n  width: 100%;\n}\n\n.hb-button__icon--left[data-v-6210de47] {\n  margin-right: 10px;\n}\n\n.hb-button__icon--left[data-v-6210de47]::before {\n  vertical-align: middle;\n}\n\n.hb-button__icon--right[data-v-6210de47] {\n  margin-left: 10px;\n}\n\n.hb-button__icon--right[data-v-6210de47]::before {\n  vertical-align: middle;\n}");
 
@@ -269,0 +316,0 @@ script$2.render = render$1;

dist/index.js

@@ -192,3 +192,6 @@ (function (global, factory) {
       return {
-        hasSlot: false
+        hasSlot: false,
+        id: 'button-id-' + Math.random().toString(36).substring(2),
+        isButtonActive: false,
+        buttonObj: null
       };
@@ -234,2 +237,10 @@ },
         this.$emit('click', evt);
+      },
+      activateButton: function activateButton() {
+        this.buttonObj.classList.add('button-active');
+        this.isButtonActive = true;
+      },
+      deactivateButton: function deactivateButton() {
+        this.buttonObj.classList.remove('button-active');
+        this.isButtonActive = false;
       }
@@ -242,6 +253,41 @@ },
       });
+      this.buttonObj = document.getElementById(this.id);
+      this.buttonObj.addEventListener('mousedown', function () {
+        that.activateButton();
+
+        // 마우스가 버튼 밖으로 나갔을 때 버튼을 비활성화
+        window.addEventListener('mouseup', function mouseupHandler() {
+          that.deactivateButton();
+          window.removeEventListener('mouseup', mouseupHandler);
+        });
+      });
+      this.buttonObj.addEventListener('touchstart', function () {
+        that.activateButton();
+
+        // 터치가 버튼 밖으로 나갔을 때 버튼을 비활성화
+        window.addEventListener('touchend', function touchendHandler() {
+          that.deactivateButton();
+          window.removeEventListener('touchend', touchendHandler);
+        });
+
+        // 터치가 버튼을 벗어났을 때 버튼을 비활성화 (추가)
+        window.addEventListener('touchcancel', function touchcancelHandler() {
+          that.deactivateButton();
+          window.removeEventListener('touchcancel', touchcancelHandler);
+        });
+      });
+      this.buttonObj.addEventListener('touchmove', function (event) {
+        if (!this.isButtonActive) return;
+        var touch = event.touches[0];
+        var rect = this.getBoundingClientRect();
+
+        // 버튼 영역을 벗어나면 버튼 비활성화
+        if (touch.clientX < rect.left || touch.clientX > rect.right || touch.clientY < rect.top || touch.clientY > rect.bottom) {
+          that.deactivateButton();
+        }
+      });
     }
   };
 
-  var _hoisted_1$1 = ["disabled"];
+  var _hoisted_1$1 = ["disabled", "id"];
   function render$1(_ctx, _cache, $props, $setup, $data, $options) {
@@ -255,3 +301,4 @@ return vue.openBlock(), vue.createElementBlock("button", {
         return $options.handleClick && $options.handleClick.apply($options, arguments);
-      })
+      }),
+      id: $data.id
     }, [$props.icon && $options.computedIconPosition === 'left' ? (vue.openBlock(), vue.createElementBlock("i", {
@@ -270,3 +317,3 @@ key: 0,
 
-  ___$insertStylesToHeader("button[data-v-6210de47] {\n  border: 0;\n  outline: 0;\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n}\n\n.hb-button[data-v-6210de47] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n.hb-button[data-v-6210de47]:hover, .hb-button[data-v-6210de47]:active {\n  transition: 0.07s;\n}\n\n.hb-button[data-v-6210de47] {\n  background-color: #5c7cfa;\n  color: white;\n}\n\n.hb-button--primary[data-v-6210de47] {\n  background-color: #5c7cfa;\n  color: white;\n}\n\n.hb-button--primary[data-v-6210de47]:hover {\n  background-color: #4c6ef5;\n}\n\n.hb-button--primary[data-v-6210de47]:active {\n  background-color: #3b5bdb;\n}\n\n.hb-button--kakao[data-v-6210de47] {\n  background-color: #fde504;\n  color: black;\n}\n\n.hb-button--kakao[data-v-6210de47]:hover {\n  background-color: #ffe066;\n}\n\n.hb-button--kakao[data-v-6210de47]:active {\n  background-color: #ffd43b;\n}\n\n.hb-button--lightblue[data-v-6210de47] {\n  background-color: #edf2ff;\n  color: #5c7cfa;\n}\n\n.hb-button--lightblue[data-v-6210de47]:hover {\n  background-color: rgba(219, 228, 255, 0.75);\n}\n\n.hb-button--lightblue[data-v-6210de47]:active {\n  background-color: #dbe4ff;\n}\n\n.hb-button--lightgray[data-v-6210de47] {\n  background-color: #f1f3f5;\n  color: #495057;\n}\n\n.hb-button--lightgray[data-v-6210de47]:hover {\n  background-color: #e9ecef;\n}\n\n.hb-button--lightgray[data-v-6210de47]:active {\n  background-color: #dee2e6;\n}\n\n.hb-button--line[data-v-6210de47] {\n  background-color: white;\n  border: 1px solid;\n  border-color: #5c7cfa;\n  color: #5c7cfa;\n}\n\n.hb-button--line.hb-button--primary[data-v-6210de47] {\n  border-color: #5c7cfa;\n  color: #5c7cfa;\n}\n\n.hb-button--line.hb-button--primary[data-v-6210de47]:hover {\n  border-color: #4c6ef5;\n  background-color: rgba(237, 242, 255, 0.5);\n}\n\n.hb-button--line.hb-button--primary[data-v-6210de47]:active {\n  border-color: #3b5bdb;\n  background-color: #edf2ff;\n}\n\n.hb-button--line.hb-button--gray[data-v-6210de47] {\n  border-color: #ced4da;\n  color: #adb5bd;\n}\n\n.hb-button--line.hb-button--gray[data-v-6210de47]:hover {\n  border-color: #adb5bd;\n  background-color: rgba(248, 249, 250, 0.5);\n}\n\n.hb-button--line.hb-button--gray[data-v-6210de47]:active {\n  border-color: #adb5bd;\n  background-color: #f8f9fa;\n}\n\n.hb-button--text[data-v-6210de47] {\n  background-color: transparent;\n  border: 0;\n  color: #5c7cfa;\n}\n\n.hb-button--text[data-v-6210de47]:hover {\n  background-color: rgba(237, 242, 255, 0.5);\n}\n\n.hb-button--text[data-v-6210de47]:active {\n  background-color: #edf2ff;\n}\n\n.hb-button[data-v-6210de47]:disabled {\n  background-color: #ced4da !important;\n  color: #adb5bd !important;\n  border: none !important;\n}\n\n.hb-button--line[data-v-6210de47]:disabled {\n  background-color: #f1f3f5 !important;\n  border: 1px solid #ced4da !important;\n  color: #ced4da !important;\n}\n\n.hb-button--text[data-v-6210de47]:disabled {\n  background-color: transparent !important;\n  color: #ced4da !important;\n}\n\n.hb-button--xs[data-v-6210de47] {\n  height: 22px;\n  border-radius: 3px;\n  padding: 0 6px;\n  font-size: 11px;\n}\n\n.hb-button--sm[data-v-6210de47] {\n  height: 28px;\n  border-radius: 4px;\n  padding: 0 8px;\n  font-size: 13px;\n}\n\n.hb-button--md[data-v-6210de47] {\n  height: 36px;\n  border-radius: 6px;\n  padding: 0 12px;\n  font-size: 13px;\n}\n\n.hb-button--lg[data-v-6210de47] {\n  height: 48px;\n  border-radius: 6px;\n  padding: 0 16px;\n  font-size: 14px;\n  font-weight: bold;\n}\n\n.hb-button--xl[data-v-6210de47] {\n  height: 56px;\n  border-radius: 6px;\n  padding: 0 20px;\n  font-size: 15px;\n  font-weight: bold;\n}\n\n.hb-button--full[data-v-6210de47] {\n  width: 100%;\n}\n\n.hb-button__icon--left[data-v-6210de47] {\n  margin-right: 10px;\n}\n\n.hb-button__icon--left[data-v-6210de47]::before {\n  vertical-align: middle;\n}\n\n.hb-button__icon--right[data-v-6210de47] {\n  margin-left: 10px;\n}\n\n.hb-button__icon--right[data-v-6210de47]::before {\n  vertical-align: middle;\n}");
+  ___$insertStylesToHeader("@charset \"UTF-8\";\nbutton[data-v-6210de47] {\n  border: 0;\n  outline: 0;\n  background-color: transparent;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 웹킷 브라우저의 경우 */\n  -webkit-user-select: none; /* 사용자 선택 금지 */\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  touch-action: manipulation; /* 터치 액션 제어 */\n  display: flex;\n  align-items: center;\n}\n\n.hb-button[data-v-6210de47] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n.hb-button[data-v-6210de47]:hover, .hb-button[data-v-6210de47]:active {\n  transition: 0.07s;\n}\n\n.hb-button[data-v-6210de47] {\n  background-color: #501eff;\n  color: white;\n  cursor: pointer; /* 마우스 포인터가 버튼 위에 있을 때 모양을 변경 */\n  transition: transform 0.2s ease-out, background-color 0.2s ease-out; /* 애니메이션 효과 설정 */\n}\n\n.hb-button.button-active[data-v-6210de47] {\n  transform: scale(0.97); /* 버튼이 터치된 상태에서 작아지도록 설정 */\n}\n\n.hb-button--primary[data-v-6210de47] {\n  background-color: #501eff;\n  color: white;\n}\n\n.hb-button--primary[data-v-6210de47]:hover {\n  background-color: #3200e0; /* 호버 상태에서 배경색이 어두워지도록 설정 */\n}\n\n.hb-button--primary.button-active[data-v-6210de47] {\n  background-color: #2900b7; /* 터치된 상태에서 배경색이 더 어두워지도록 설정 */\n}\n\n.hb-button--kakao[data-v-6210de47] {\n  background-color: #fde504;\n  color: black;\n}\n\n.hb-button--kakao[data-v-6210de47]:hover {\n  background-color: #f0d902;\n}\n\n.hb-button--kakao.button-active[data-v-6210de47] {\n  background-color: #d6c202;\n}\n\n.hb-button--lightblue[data-v-6210de47] {\n  background-color: #edf2ff;\n  color: #5c7cfa;\n}\n\n.hb-button--lightblue[data-v-6210de47]:hover {\n  background-color: rgba(219, 228, 255, 0.75);\n}\n\n.hb-button--lightblue.button-active[data-v-6210de47] {\n  background-color: #d6e0ff;\n}\n\n.hb-button--lightgray[data-v-6210de47] {\n  background-color: #f1f3f5;\n  color: #495057;\n}\n\n.hb-button--lightgray[data-v-6210de47]:hover {\n  background-color: #e9ecef;\n}\n\n.hb-button--lightgray.button-active[data-v-6210de47] {\n  background-color: #dee2e6;\n}\n\n.hb-button--line[data-v-6210de47] {\n  background-color: white;\n  border: 1px solid;\n  border-color: #501eff;\n  color: #501eff;\n}\n\n.hb-button--line.hb-button--primary[data-v-6210de47] {\n  border-color: #501eff;\n  color: #501eff;\n}\n\n.hb-button--line.hb-button--primary[data-v-6210de47]:hover {\n  border-color: #4c6ef5;\n  background-color: rgba(237, 242, 255, 0.5);\n}\n\n.hb-button--line.hb-button--primary[data-v-6210de47]:active {\n  border-color: #3b5bdb;\n  background-color: #edf2ff;\n}\n\n.hb-button--line.hb-button--gray[data-v-6210de47] {\n  border-color: #ced4da;\n  color: #adb5bd;\n}\n\n.hb-button--line.hb-button--gray[data-v-6210de47]:hover {\n  border-color: #adb5bd;\n  background-color: rgba(248, 249, 250, 0.5);\n}\n\n.hb-button--line.hb-button--gray[data-v-6210de47]:active {\n  border-color: #adb5bd;\n  background-color: #f8f9fa;\n}\n\n.hb-button--text[data-v-6210de47] {\n  background-color: transparent;\n  border: 0;\n  color: #501eff;\n}\n\n.hb-button--text[data-v-6210de47]:hover {\n  background-color: rgba(237, 242, 255, 0.5);\n}\n\n.hb-button--text[data-v-6210de47]:active {\n  background-color: #edf2ff;\n}\n\n.hb-button[data-v-6210de47]:disabled {\n  background-color: #ced4da !important;\n  color: #adb5bd !important;\n  border: none !important;\n}\n\n.hb-button--line[data-v-6210de47]:disabled {\n  background-color: #f1f3f5 !important;\n  border: 1px solid #ced4da !important;\n  color: #ced4da !important;\n}\n\n.hb-button--text[data-v-6210de47]:disabled {\n  background-color: transparent !important;\n  color: #ced4da !important;\n}\n\n.hb-button--xs[data-v-6210de47] {\n  height: 22px;\n  border-radius: 3px;\n  padding: 0 6px;\n  font-size: 11px;\n}\n\n.hb-button--sm[data-v-6210de47] {\n  height: 28px;\n  border-radius: 4px;\n  padding: 0 8px;\n  font-size: 13px;\n}\n\n.hb-button--md[data-v-6210de47] {\n  height: 36px;\n  border-radius: 6px;\n  padding: 0 12px;\n  font-size: 13px;\n}\n\n.hb-button--lg[data-v-6210de47] {\n  height: 48px;\n  border-radius: 6px;\n  padding: 0 16px;\n  font-size: 14px;\n  font-weight: bold;\n}\n\n.hb-button--xl[data-v-6210de47] {\n  height: 56px;\n  border-radius: 6px;\n  padding: 0 20px;\n  font-size: 15px;\n  font-weight: bold;\n}\n\n.hb-button--full[data-v-6210de47] {\n  width: 100%;\n}\n\n.hb-button__icon--left[data-v-6210de47] {\n  margin-right: 10px;\n}\n\n.hb-button__icon--left[data-v-6210de47]::before {\n  vertical-align: middle;\n}\n\n.hb-button__icon--right[data-v-6210de47] {\n  margin-left: 10px;\n}\n\n.hb-button__icon--right[data-v-6210de47]::before {\n  vertical-align: middle;\n}");
 
@@ -273,0 +320,0 @@ script$2.render = render$1;

package.json

@@ -6,3 +6,3 @@ {
   ],
-  "version": "0.5.26",
+  "version": "0.6.0",
   "main": "dist/index.js",
@@ -9,0 +9,0 @@ "module": "dist/index.es.js",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

83222

increased by7.04%

Lines of code

1158

increased by8.63%

No dependency changes