habit-ui - npm Package Compare versions

Comparing version 0.5.17 to 0.5.18

dist/index.es.js

@@ -775,3 +775,3 @@ import { initDirectivesForSSR, ssrUtils, warn, Fragment, Static, Comment, Text, mergeProps, ssrContextKey, ref, useSlots, computed, onMounted, watch, unref } from 'vue';
 
-var script = {
+var script$2 = {
   __name: 'index',
@@ -862,10 +862,192 @@ __ssrInlineRender: true,
 
-script.__scopeId = "data-v-38625b18";
-script.__file = "docs/.vitepress/components/hb-checkbox/index.vue";
+script$2.__scopeId = "data-v-38625b18";
+script$2.__file = "docs/.vitepress/components/hb-checkbox/index.vue";
 
+var script$1 = {
+  name: 'hb-button',
+  props: {
+    disabled: {
+      type: Boolean,
+      "default": false
+    },
+    color: {
+      type: String,
+      "default": 'primary',
+      validator: function validator(value) {
+        return ['primary', 'kakao', 'gray'].indexOf(value) !== -1;
+      }
+    },
+    height: {
+      type: String,
+      "default": 'xl',
+      validator: function validator(value) {
+        return ['xs', 'sm', 'md', 'lg', 'xl'].indexOf(value) !== -1;
+      }
+    },
+    isFull: {
+      type: Boolean,
+      "default": false
+    },
+    icon: {
+      type: String,
+      "default": ''
+    },
+    iconPosition: {
+      type: String,
+      "default": 'right',
+      validator: function validator(value) {
+        return ['left', 'right'].indexOf(value) !== -1;
+      }
+    },
+    shape: {
+      type: String,
+      "default": 'fill',
+      validator: function validator(value) {
+        return ['fill', 'line', 'text'].indexOf(value) !== -1;
+      }
+    },
+    loading: {
+      type: Boolean,
+      "default": false
+    },
+    fullMargin: {
+      type: Number
+    }
+  },
+  data: function data() {
+    return {
+      hasSlot: false
+    };
+  },
+  computed: {
+    className: function className() {
+      var className = 'hb-button';
+      if (this.color) className += " hb-button--".concat(this.color);
+      if (this.shape) className += " hb-button--".concat(this.shape);
+      if (this.height) className += " hb-button--".concat(this.height);
+      if (this.type) className += " hb-button--".concat(this.type);
+      if (this.isFull) className += " hb-button--full";
+      if (this.loading) className += ' fa-3x';
+      return className;
+    },
+    isOnlyIcon: function isOnlyIcon() {
+      // 텍스트없고 아이콘만 있는 경우 true
+      var result = false;
+      if (!this.hasSlot && this.icon) result = true;
+      return result;
+    },
+    computedIcon: function computedIcon() {
+      if (this.loading) return 'fa-solid fa-spinner fa-spin';
+      return this.icon;
+    },
+    computedIconPosition: function computedIconPosition() {
+      if (this.loading) return 'right';
+      return this.iconPosition;
+    },
+    buttonStyle: function buttonStyle() {
+      var buttonStyle = {};
+      // full 인 경우 마진세팅.
+      if (this.isFull && this.fullMargin) {
+        buttonStyle['width'] = "calc(100% - ".concat(this.fullMargin * 2, "px)");
+        buttonStyle['margin'] = "0 ".concat(this.fullMargin, "px");
+      }
+      return buttonStyle;
+    }
+  },
+  methods: {
+    handleClick: function handleClick(evt) {
+      this.$emit('click', evt);
+    }
+  },
+  mounted: function mounted() {
+    var that = this;
+    setTimeout(function () {
+      that.hasSlot = !!that.$slots['default'];
+    });
+  }
+};
+
+function ssrRender$1(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  _push("<button".concat(ssrRenderAttrs(mergeProps({
+    type: "button",
+    "class": $options.className,
+    style: $options.buttonStyle,
+    disabled: $props.disabled
+  }, _attrs)), " data-v-6210de47>"));
+  if ($props.icon && $options.computedIconPosition === 'left') {
+    _push("<i class=\"".concat(ssrRenderClass([$props.icon, "hb-button__icon--left"]), "\" data-v-6210de47></i>"));
+  } else {
+    _push("<!---->");
+  }
+  _push("<span class=\"".concat(ssrRenderClass({
+    'hb-button__text': $data.hasSlot
+  }), "\" data-v-6210de47>"));
+  ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, "data-v-6210de47-s");
+  _push("</span>");
+  if ($options.computedIcon && $options.computedIconPosition === 'right') {
+    _push("<i class=\"".concat(ssrRenderClass([$options.computedIcon, "hb-button__icon--right"]), "\" data-v-6210de47></i>"));
+  } else {
+    _push("<!---->");
+  }
+  _push("</button>");
+}
+
+script$1.ssrRender = ssrRender$1;
+script$1.__scopeId = "data-v-6210de47";
+script$1.__file = "docs/.vitepress/components/hb-button/index.vue";
+
+var script = {
+  name: 'hb-button-wrap',
+  props: {
+    isFull: {
+      type: Boolean,
+      "default": false
+    },
+    gridRatio: {
+      type: String
+    },
+    isFloat: {
+      type: Boolean,
+      "default": false
+    }
+  },
+  computed: {
+    className: function className() {
+      var className = 'hb-button-wrap';
+      if (this.isFull) className += " hb-button-wrap--full";
+      if (this.isFloat) className += " hb-button-wrap--float";
+      if (this.gridRatio) className += " hb-button-wrap--grid";
+      return className;
+    },
+    buttonWrapStyle: function buttonWrapStyle() {
+      var buttonWrapStyle = {};
+      if (this.gridRatio) {
+        buttonWrapStyle['grid-template-columns'] = this.gridRatio;
+      }
+      return buttonWrapStyle;
+    }
+  }
+};
+
+function ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  _push("<div".concat(ssrRenderAttrs(mergeProps({
+    "class": $options.className,
+    style: $options.buttonWrapStyle
+  }, _attrs)), " data-v-2b59b4a6>"));
+  ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, "data-v-2b59b4a6-s");
+  _push("</div>");
+}
+
+script.ssrRender = ssrRender;
+script.__scopeId = "data-v-2b59b4a6";
+script.__file = "docs/.vitepress/components/hb-button-wrap/index.vue";
+
 var components = {
-  HbCheckbox: script
+  HbCheckbox: script$2,
+  HbButton: script$1,
+  HbButtonWrap: script
 };
 var install = function install(app) {
   for (var componentKey in components) {
+    console.log('componentKey', componentKey);
     app.component(componentKey);
@@ -875,2 +1057,2 @@ }
 
-export { script as HbCheckbox, install as default };
+export { script$1 as HbButton, script as HbButtonWrap, script$2 as HbCheckbox, install as default };

dist/index.js

@@ -779,3 +779,3 @@ (function (global, factory) {
 
-    var script = {
+    var script$2 = {
       __name: 'index',
@@ -866,10 +866,192 @@ __ssrInlineRender: true,
 
-    script.__scopeId = "data-v-38625b18";
-    script.__file = "docs/.vitepress/components/hb-checkbox/index.vue";
+    script$2.__scopeId = "data-v-38625b18";
+    script$2.__file = "docs/.vitepress/components/hb-checkbox/index.vue";
 
+    var script$1 = {
+      name: 'hb-button',
+      props: {
+        disabled: {
+          type: Boolean,
+          "default": false
+        },
+        color: {
+          type: String,
+          "default": 'primary',
+          validator: function validator(value) {
+            return ['primary', 'kakao', 'gray'].indexOf(value) !== -1;
+          }
+        },
+        height: {
+          type: String,
+          "default": 'xl',
+          validator: function validator(value) {
+            return ['xs', 'sm', 'md', 'lg', 'xl'].indexOf(value) !== -1;
+          }
+        },
+        isFull: {
+          type: Boolean,
+          "default": false
+        },
+        icon: {
+          type: String,
+          "default": ''
+        },
+        iconPosition: {
+          type: String,
+          "default": 'right',
+          validator: function validator(value) {
+            return ['left', 'right'].indexOf(value) !== -1;
+          }
+        },
+        shape: {
+          type: String,
+          "default": 'fill',
+          validator: function validator(value) {
+            return ['fill', 'line', 'text'].indexOf(value) !== -1;
+          }
+        },
+        loading: {
+          type: Boolean,
+          "default": false
+        },
+        fullMargin: {
+          type: Number
+        }
+      },
+      data: function data() {
+        return {
+          hasSlot: false
+        };
+      },
+      computed: {
+        className: function className() {
+          var className = 'hb-button';
+          if (this.color) className += " hb-button--".concat(this.color);
+          if (this.shape) className += " hb-button--".concat(this.shape);
+          if (this.height) className += " hb-button--".concat(this.height);
+          if (this.type) className += " hb-button--".concat(this.type);
+          if (this.isFull) className += " hb-button--full";
+          if (this.loading) className += ' fa-3x';
+          return className;
+        },
+        isOnlyIcon: function isOnlyIcon() {
+          // 텍스트없고 아이콘만 있는 경우 true
+          var result = false;
+          if (!this.hasSlot && this.icon) result = true;
+          return result;
+        },
+        computedIcon: function computedIcon() {
+          if (this.loading) return 'fa-solid fa-spinner fa-spin';
+          return this.icon;
+        },
+        computedIconPosition: function computedIconPosition() {
+          if (this.loading) return 'right';
+          return this.iconPosition;
+        },
+        buttonStyle: function buttonStyle() {
+          var buttonStyle = {};
+          // full 인 경우 마진세팅.
+          if (this.isFull && this.fullMargin) {
+            buttonStyle['width'] = "calc(100% - ".concat(this.fullMargin * 2, "px)");
+            buttonStyle['margin'] = "0 ".concat(this.fullMargin, "px");
+          }
+          return buttonStyle;
+        }
+      },
+      methods: {
+        handleClick: function handleClick(evt) {
+          this.$emit('click', evt);
+        }
+      },
+      mounted: function mounted() {
+        var that = this;
+        setTimeout(function () {
+          that.hasSlot = !!that.$slots['default'];
+        });
+      }
+    };
+
+    function ssrRender$1(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+      _push("<button".concat(ssrRenderAttrs(vue.mergeProps({
+        type: "button",
+        "class": $options.className,
+        style: $options.buttonStyle,
+        disabled: $props.disabled
+      }, _attrs)), " data-v-6210de47>"));
+      if ($props.icon && $options.computedIconPosition === 'left') {
+        _push("<i class=\"".concat(ssrRenderClass([$props.icon, "hb-button__icon--left"]), "\" data-v-6210de47></i>"));
+      } else {
+        _push("<!---->");
+      }
+      _push("<span class=\"".concat(ssrRenderClass({
+        'hb-button__text': $data.hasSlot
+      }), "\" data-v-6210de47>"));
+      ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, "data-v-6210de47-s");
+      _push("</span>");
+      if ($options.computedIcon && $options.computedIconPosition === 'right') {
+        _push("<i class=\"".concat(ssrRenderClass([$options.computedIcon, "hb-button__icon--right"]), "\" data-v-6210de47></i>"));
+      } else {
+        _push("<!---->");
+      }
+      _push("</button>");
+    }
+
+    script$1.ssrRender = ssrRender$1;
+    script$1.__scopeId = "data-v-6210de47";
+    script$1.__file = "docs/.vitepress/components/hb-button/index.vue";
+
+    var script = {
+      name: 'hb-button-wrap',
+      props: {
+        isFull: {
+          type: Boolean,
+          "default": false
+        },
+        gridRatio: {
+          type: String
+        },
+        isFloat: {
+          type: Boolean,
+          "default": false
+        }
+      },
+      computed: {
+        className: function className() {
+          var className = 'hb-button-wrap';
+          if (this.isFull) className += " hb-button-wrap--full";
+          if (this.isFloat) className += " hb-button-wrap--float";
+          if (this.gridRatio) className += " hb-button-wrap--grid";
+          return className;
+        },
+        buttonWrapStyle: function buttonWrapStyle() {
+          var buttonWrapStyle = {};
+          if (this.gridRatio) {
+            buttonWrapStyle['grid-template-columns'] = this.gridRatio;
+          }
+          return buttonWrapStyle;
+        }
+      }
+    };
+
+    function ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+      _push("<div".concat(ssrRenderAttrs(vue.mergeProps({
+        "class": $options.className,
+        style: $options.buttonWrapStyle
+      }, _attrs)), " data-v-2b59b4a6>"));
+      ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent, "data-v-2b59b4a6-s");
+      _push("</div>");
+    }
+
+    script.ssrRender = ssrRender;
+    script.__scopeId = "data-v-2b59b4a6";
+    script.__file = "docs/.vitepress/components/hb-button-wrap/index.vue";
+
     var components = {
-      HbCheckbox: script
+      HbCheckbox: script$2,
+      HbButton: script$1,
+      HbButtonWrap: script
     };
     var install = function install(app) {
       for (var componentKey in components) {
+        console.log('componentKey', componentKey);
         app.component(componentKey);
@@ -879,3 +1061,5 @@ }
 
-    exports.HbCheckbox = script;
+    exports.HbButton = script$1;
+    exports.HbButtonWrap = script;
+    exports.HbCheckbox = script$2;
     exports.default = install;
@@ -882,0 +1066,0 @@

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

180609

increased by14.37%

Number of package files

16

increased by6.67%

Lines of code

4605

increased by19.95%

No dependency changes