habit-ui - npm Package Compare versions

Comparing version 0.5.25 to 0.5.26

dist/index.es.js

@@ -17,3 +17,3 @@ function ___$insertStylesToHeader(css) {
 
-import { ref, useSlots, computed, onMounted, watch, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, withDirectives, createElementVNode, vModelCheckbox, renderSlot, Fragment, createTextVNode, toDisplayString, createCommentVNode, pushScopeId, popScopeId } from 'vue';
+import { ref, useSlots, computed, onMounted, watch, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, withDirectives, createElementVNode, vModelCheckbox, renderSlot, Fragment, createTextVNode, toDisplayString, createCommentVNode, pushScopeId, popScopeId, createBlock, Teleport, withModifiers } from 'vue';
 
@@ -23,3 +23,3 @@ var _withScopeId = function _withScopeId(n) {
 };
-var _hoisted_1$1 = /*#__PURE__*/_withScopeId(function () {
+var _hoisted_1$2 = /*#__PURE__*/_withScopeId(function () {
   return /*#__PURE__*/createElementVNode("div", {
@@ -29,6 +29,6 @@ "class": "hb-checkbox__mark"
 });
-var _hoisted_2 = {
+var _hoisted_2$1 = {
   "class": "hb-checkbox__text"
 };
-var script$2 = {
+var script$3 = {
   __name: 'index',
@@ -120,3 +120,3 @@ props: {
         "for": id
-      }, [_hoisted_1$1, createElementVNode("div", _hoisted_2, [hasSlot ? renderSlot(_ctx.$slots, "default", {
+      }, [_hoisted_1$2, createElementVNode("div", _hoisted_2$1, [hasSlot ? renderSlot(_ctx.$slots, "default", {
         key: 0
@@ -136,6 +136,6 @@ }) : (openBlock(), createElementBlock(Fragment, {
 
-script$2.__scopeId = "data-v-38625b18";
-script$2.__file = "docs/.vitepress/components/hb-checkbox/index.vue";
+script$3.__scopeId = "data-v-38625b18";
+script$3.__file = "docs/.vitepress/components/hb-checkbox/index.vue";
 
-var script$1 = {
+var script$2 = {
   name: 'hb-button',
@@ -244,3 +244,3 @@ props: {
 
-var _hoisted_1 = ["disabled"];
+var _hoisted_1$1 = ["disabled"];
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
@@ -265,3 +265,3 @@ return openBlock(), createElementBlock("button", {
     "class": normalizeClass([$options.computedIcon, "hb-button__icon--right"])
-  }, null, 2 /* CLASS */)) : createCommentVNode("v-if", true)], 14 /* CLASS, STYLE, PROPS */, _hoisted_1);
+  }, null, 2 /* CLASS */)) : createCommentVNode("v-if", true)], 14 /* CLASS, STYLE, PROPS */, _hoisted_1$1);
 }
@@ -271,7 +271,7 @@
 
-script$1.render = render$1;
-script$1.__scopeId = "data-v-6210de47";
-script$1.__file = "docs/.vitepress/components/hb-button/index.vue";
+script$2.render = render$1;
+script$2.__scopeId = "data-v-6210de47";
+script$2.__file = "docs/.vitepress/components/hb-button/index.vue";
 
-var script = {
+var script$1 = {
   name: 'hb-button-wrap',
@@ -318,10 +318,93 @@ props: {
 
-script.render = render;
-script.__scopeId = "data-v-2b59b4a6";
-script.__file = "docs/.vitepress/components/hb-button-wrap/index.vue";
+script$1.render = render;
+script$1.__scopeId = "data-v-2b59b4a6";
+script$1.__file = "docs/.vitepress/components/hb-button-wrap/index.vue";
 
+var _hoisted_1 = ["onClick"];
+var _hoisted_2 = {
+  key: 0,
+  "class": "modal__header"
+};
+var script = {
+  __name: 'modal',
+  props: {
+    visible: {
+      type: Boolean,
+      require: true,
+      "default": false
+    },
+    "class": {
+      type: String
+    },
+    title: {
+      type: String,
+      "default": '알림'
+    },
+    contentsPaddingNone: {
+      type: Boolean,
+      "default": false
+    },
+    headerVisible: {
+      type: Boolean,
+      "default": true
+    },
+    size: {
+      type: String,
+      "default": 'medium'
+    },
+    slidable: {
+      type: Boolean,
+      "default": false
+    },
+    blurStyle: {
+      type: String,
+      require: false,
+      "default": 'backdrop-filter: blur(20px)'
+    }
+  },
+  emits: ['update', 'close'],
+  setup: function setup(__props, _ref) {
+    var emit = _ref.emit;
+    var handleWrapperClick = function handleWrapperClick() {
+      emit('update:visible', false);
+      emit('close');
+    };
+    var handleCloseModal = function handleCloseModal() {
+      emit('update:visible', false);
+      emit('close');
+    };
+    return function (_ctx, _cache) {
+      return openBlock(), createBlock(Teleport, {
+        to: "body"
+      }, [__props.visible ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        "class": "modal-wrap",
+        onClick: withModifiers(handleWrapperClick, ["self"]),
+        style: normalizeStyle(__props.blurStyle)
+      }, [createElementVNode("div", {
+        "class": normalizeClass(["modal", ["modal--".concat(__props.size), {
+          'slide-in-bottom': __props.slidable
+        }]])
+      }, [__props.headerVisible ? (openBlock(), createElementBlock("div", _hoisted_2, [createElementVNode("h3", null, toDisplayString(__props.title), 1 /* TEXT */), createElementVNode("i", {
+        "class": "fa-solid fa-xmark modal__close-btn",
+        onClick: handleCloseModal
+      })])) : createCommentVNode("v-if", true), createElementVNode("div", {
+        "class": normalizeClass(["modal__contents", {
+          'modal__contents-padding-none': __props.contentsPaddingNone
+        }])
+      }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */)], 2 /* CLASS */)], 12 /* STYLE, PROPS */, _hoisted_1)) : createCommentVNode("v-if", true)]);
+    };
+  }
+};
+
+___$insertStylesToHeader(".modal-wrap[data-v-7cd208e3] {\n  z-index: 777;\n  position: fixed;\n  overflow: hidden;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(170, 170, 170, 0.7) !important;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.modal[data-v-7cd208e3] {\n  position: relative;\n  background-color: #fff;\n  max-width: 800px;\n  border-radius: 15px;\n}\n\n.modal__header[data-v-7cd208e3] {\n  padding: 16px;\n  padding-right: 50px;\n  min-height: 27px;\n  border-bottom: 1px solid #f2f2f2;\n}\n\n.modal__header h3[data-v-7cd208e3] {\n  font-weight: bold;\n  font-size: 20px;\n}\n\n.modal__close-btn[data-v-7cd208e3] {\n  position: absolute;\n  right: 16px;\n  top: 16px;\n  font-size: 24px;\n  font-weight: normal;\n  opacity: 0.4;\n}\n\n.modal__contents[data-v-7cd208e3] {\n  height: calc(100% - 60px);\n  overflow-y: scroll;\n  padding: 16px;\n}\n\n.modal__contents.modal__contents-padding-none[data-v-7cd208e3] {\n  padding: 0;\n}\n\n.modal__contents pre[data-v-7cd208e3] {\n  width: 100%;\n  white-space: pre-wrap;\n  font-size: 13px;\n  color: #777;\n  margin: 0;\n}\n\n.modal__footer[data-v-7cd208e3] {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  padding-bottom: 10px !important;\n  text-align: right;\n  background-color: white;\n  border-radius: 15px;\n}\n\n.modal__footer button[data-v-7cd208e3] {\n  padding: 5px 6px;\n  display: inline-block !important;\n  width: 50px !important;\n  text-align: center;\n  border: none;\n}\n\n.modal--medium[data-v-7cd208e3] {\n  width: 85%;\n  max-height: 80%;\n  border-radius: 10px;\n  overflow-y: scroll;\n}\n\n.modal--full[data-v-7cd208e3] {\n  width: 100%;\n  height: 100%;\n  max-height: 100vh;\n  border-radius: 0;\n}\n\n.modal--full iframe[data-v-7cd208e3] {\n  height: 100%;\n  width: 100%;\n}\n\n.modal--bottom[data-v-7cd208e3] {\n  width: 100%;\n  border-radius: 20px 20px 0 0;\n  padding: 20px;\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  box-sizing: border-box;\n}\n\n.modal--rightSide[data-v-7cd208e3] {\n  width: 90%;\n  height: 100%;\n  max-height: 100vh;\n  border-radius: 20px 0 0 20px;\n  right: 0;\n  position: absolute;\n}");
+
+script.__scopeId = "data-v-7cd208e3";
+script.__file = "docs/.vitepress/components/ui/modal.vue";
+
 var components = {
-  HbCheckbox: script$2,
-  HbButton: script$1,
-  HbButtonWrap: script
+  HbCheckbox: script$3,
+  HbButton: script$2,
+  HbButtonWrap: script$1,
+  HbModal: script
 };
@@ -336,2 +419,2 @@ var index = {
 
-export { script$1 as HbButton, script as HbButtonWrap, script$2 as HbCheckbox, index as default };
+export { script$2 as HbButton, script$1 as HbButtonWrap, script$3 as HbCheckbox, script as HbModal, index as default };

dist/index.js

@@ -26,3 +26,3 @@ (function (global, factory) {
   };
-  var _hoisted_1$1 = /*#__PURE__*/_withScopeId(function () {
+  var _hoisted_1$2 = /*#__PURE__*/_withScopeId(function () {
     return /*#__PURE__*/vue.createElementVNode("div", {
@@ -32,6 +32,6 @@ "class": "hb-checkbox__mark"
   });
-  var _hoisted_2 = {
+  var _hoisted_2$1 = {
     "class": "hb-checkbox__text"
   };
-  var script$2 = {
+  var script$3 = {
     __name: 'index',
@@ -123,3 +123,3 @@ props: {
           "for": id
-        }, [_hoisted_1$1, vue.createElementVNode("div", _hoisted_2, [hasSlot ? vue.renderSlot(_ctx.$slots, "default", {
+        }, [_hoisted_1$2, vue.createElementVNode("div", _hoisted_2$1, [hasSlot ? vue.renderSlot(_ctx.$slots, "default", {
           key: 0
@@ -139,6 +139,6 @@ }) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
 
-  script$2.__scopeId = "data-v-38625b18";
-  script$2.__file = "docs/.vitepress/components/hb-checkbox/index.vue";
+  script$3.__scopeId = "data-v-38625b18";
+  script$3.__file = "docs/.vitepress/components/hb-checkbox/index.vue";
 
-  var script$1 = {
+  var script$2 = {
     name: 'hb-button',
@@ -247,3 +247,3 @@ props: {
 
-  var _hoisted_1 = ["disabled"];
+  var _hoisted_1$1 = ["disabled"];
   function render$1(_ctx, _cache, $props, $setup, $data, $options) {
@@ -268,3 +268,3 @@ return vue.openBlock(), vue.createElementBlock("button", {
       "class": vue.normalizeClass([$options.computedIcon, "hb-button__icon--right"])
-    }, null, 2 /* CLASS */)) : vue.createCommentVNode("v-if", true)], 14 /* CLASS, STYLE, PROPS */, _hoisted_1);
+    }, null, 2 /* CLASS */)) : vue.createCommentVNode("v-if", true)], 14 /* CLASS, STYLE, PROPS */, _hoisted_1$1);
   }
@@ -274,7 +274,7 @@
 
-  script$1.render = render$1;
-  script$1.__scopeId = "data-v-6210de47";
-  script$1.__file = "docs/.vitepress/components/hb-button/index.vue";
+  script$2.render = render$1;
+  script$2.__scopeId = "data-v-6210de47";
+  script$2.__file = "docs/.vitepress/components/hb-button/index.vue";
 
-  var script = {
+  var script$1 = {
     name: 'hb-button-wrap',
@@ -321,10 +321,93 @@ props: {
 
-  script.render = render;
-  script.__scopeId = "data-v-2b59b4a6";
-  script.__file = "docs/.vitepress/components/hb-button-wrap/index.vue";
+  script$1.render = render;
+  script$1.__scopeId = "data-v-2b59b4a6";
+  script$1.__file = "docs/.vitepress/components/hb-button-wrap/index.vue";
 
+  var _hoisted_1 = ["onClick"];
+  var _hoisted_2 = {
+    key: 0,
+    "class": "modal__header"
+  };
+  var script = {
+    __name: 'modal',
+    props: {
+      visible: {
+        type: Boolean,
+        require: true,
+        "default": false
+      },
+      "class": {
+        type: String
+      },
+      title: {
+        type: String,
+        "default": '알림'
+      },
+      contentsPaddingNone: {
+        type: Boolean,
+        "default": false
+      },
+      headerVisible: {
+        type: Boolean,
+        "default": true
+      },
+      size: {
+        type: String,
+        "default": 'medium'
+      },
+      slidable: {
+        type: Boolean,
+        "default": false
+      },
+      blurStyle: {
+        type: String,
+        require: false,
+        "default": 'backdrop-filter: blur(20px)'
+      }
+    },
+    emits: ['update', 'close'],
+    setup: function setup(__props, _ref) {
+      var emit = _ref.emit;
+      var handleWrapperClick = function handleWrapperClick() {
+        emit('update:visible', false);
+        emit('close');
+      };
+      var handleCloseModal = function handleCloseModal() {
+        emit('update:visible', false);
+        emit('close');
+      };
+      return function (_ctx, _cache) {
+        return vue.openBlock(), vue.createBlock(vue.Teleport, {
+          to: "body"
+        }, [__props.visible ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          "class": "modal-wrap",
+          onClick: vue.withModifiers(handleWrapperClick, ["self"]),
+          style: vue.normalizeStyle(__props.blurStyle)
+        }, [vue.createElementVNode("div", {
+          "class": vue.normalizeClass(["modal", ["modal--".concat(__props.size), {
+            'slide-in-bottom': __props.slidable
+          }]])
+        }, [__props.headerVisible ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [vue.createElementVNode("h3", null, vue.toDisplayString(__props.title), 1 /* TEXT */), vue.createElementVNode("i", {
+          "class": "fa-solid fa-xmark modal__close-btn",
+          onClick: handleCloseModal
+        })])) : vue.createCommentVNode("v-if", true), vue.createElementVNode("div", {
+          "class": vue.normalizeClass(["modal__contents", {
+            'modal__contents-padding-none': __props.contentsPaddingNone
+          }])
+        }, [vue.renderSlot(_ctx.$slots, "default")], 2 /* CLASS */)], 2 /* CLASS */)], 12 /* STYLE, PROPS */, _hoisted_1)) : vue.createCommentVNode("v-if", true)]);
+      };
+    }
+  };
+
+  ___$insertStylesToHeader(".modal-wrap[data-v-7cd208e3] {\n  z-index: 777;\n  position: fixed;\n  overflow: hidden;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(170, 170, 170, 0.7) !important;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.modal[data-v-7cd208e3] {\n  position: relative;\n  background-color: #fff;\n  max-width: 800px;\n  border-radius: 15px;\n}\n\n.modal__header[data-v-7cd208e3] {\n  padding: 16px;\n  padding-right: 50px;\n  min-height: 27px;\n  border-bottom: 1px solid #f2f2f2;\n}\n\n.modal__header h3[data-v-7cd208e3] {\n  font-weight: bold;\n  font-size: 20px;\n}\n\n.modal__close-btn[data-v-7cd208e3] {\n  position: absolute;\n  right: 16px;\n  top: 16px;\n  font-size: 24px;\n  font-weight: normal;\n  opacity: 0.4;\n}\n\n.modal__contents[data-v-7cd208e3] {\n  height: calc(100% - 60px);\n  overflow-y: scroll;\n  padding: 16px;\n}\n\n.modal__contents.modal__contents-padding-none[data-v-7cd208e3] {\n  padding: 0;\n}\n\n.modal__contents pre[data-v-7cd208e3] {\n  width: 100%;\n  white-space: pre-wrap;\n  font-size: 13px;\n  color: #777;\n  margin: 0;\n}\n\n.modal__footer[data-v-7cd208e3] {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  padding-bottom: 10px !important;\n  text-align: right;\n  background-color: white;\n  border-radius: 15px;\n}\n\n.modal__footer button[data-v-7cd208e3] {\n  padding: 5px 6px;\n  display: inline-block !important;\n  width: 50px !important;\n  text-align: center;\n  border: none;\n}\n\n.modal--medium[data-v-7cd208e3] {\n  width: 85%;\n  max-height: 80%;\n  border-radius: 10px;\n  overflow-y: scroll;\n}\n\n.modal--full[data-v-7cd208e3] {\n  width: 100%;\n  height: 100%;\n  max-height: 100vh;\n  border-radius: 0;\n}\n\n.modal--full iframe[data-v-7cd208e3] {\n  height: 100%;\n  width: 100%;\n}\n\n.modal--bottom[data-v-7cd208e3] {\n  width: 100%;\n  border-radius: 20px 20px 0 0;\n  padding: 20px;\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  box-sizing: border-box;\n}\n\n.modal--rightSide[data-v-7cd208e3] {\n  width: 90%;\n  height: 100%;\n  max-height: 100vh;\n  border-radius: 20px 0 0 20px;\n  right: 0;\n  position: absolute;\n}");
+
+  script.__scopeId = "data-v-7cd208e3";
+  script.__file = "docs/.vitepress/components/ui/modal.vue";
+
   var components = {
-    HbCheckbox: script$2,
-    HbButton: script$1,
-    HbButtonWrap: script
+    HbCheckbox: script$3,
+    HbButton: script$2,
+    HbButtonWrap: script$1,
+    HbModal: script
   };
@@ -339,5 +422,6 @@ var index = {
 
-  exports.HbButton = script$1;
-  exports.HbButtonWrap = script;
-  exports.HbCheckbox = script$2;
+  exports.HbButton = script$2;
+  exports.HbButtonWrap = script$1;
+  exports.HbCheckbox = script$3;
+  exports.HbModal = script;
   exports.default = index;
@@ -344,0 +428,0 @@

package.json

@@ -6,3 +6,3 @@ {
   ],
-  "version": "0.5.25",
+  "version": "0.5.26",
   "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

Improved metrics

Total package byte prevSize

77745

increased by13.82%

Lines of code

1066

increased by19.64%

Worsened metrics

Number of low supply chain risk alerts

7

increased by40%

No dependency changes