type number min max added

gofynd · Sep 21, 2020 · 950c0c7 · 950c0c7
1 parent 2fe49f6
commit 950c0c7
Show file tree

Hide file tree

Showing 13 changed files with 2,308 additions and 2,380 deletions.
diff --git a/dist/nitrozen.common.js b/dist/nitrozen.common.js
diff --git a/dist/nitrozen.common.js.map b/dist/nitrozen.common.js.map
diff --git a/dist/nitrozen.css b/dist/nitrozen.css
diff --git a/dist/nitrozen.umd.js b/dist/nitrozen.umd.js
diff --git a/dist/nitrozen.umd.js.map b/dist/nitrozen.umd.js.map
diff --git a/dist/nitrozen.umd.min.js b/dist/nitrozen.umd.min.js
diff --git a/dist/nitrozen.umd.min.js.map b/dist/nitrozen.umd.min.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gofynd/nitrozen-vue",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "description": "Fynd Design Library for Vue",
   "homepage": "https://github.com/gofynd/nitrozen-vue#readme",
   "author": "Aayush Jain<aayushjain3011@gmail.com>",

diff --git a/src/components/NInput/NInput.less b/src/components/NInput/NInput.less
@@ -1,162 +1,173 @@
 @import "./../../base/base.less";
 .n-input {
-    // margin: 4px 0px 0px 0px;
-    padding: 0 12px;
-    height: 40px;
-    color: @TypographyPrimaryColor;
-    border: 1px solid @BorderColor;
-    border-radius: 3px;
-    width: 100%;
-    background: @WhiteColor;
-    font-family: @PrimaryFont;
-    position: relative;
-    outline: none;
-    box-sizing: border-box;
-    font-size: @BaseFontSize + 2;
-    &:focus {
-        border: 1px solid @SecondaryColor;
-    }
+  // margin: 4px 0px 0px 0px;
+  padding: 0 12px;
+  height: 40px;
+  color: @TypographyPrimaryColor;
+  border: 1px solid @BorderColor;
+  border-radius: 3px;
+  width: 100%;
+  background: @WhiteColor;
+  font-family: @PrimaryFont;
+  position: relative;
+  outline: none;
+  box-sizing: border-box;
+  font-size: @BaseFontSize + 2;
+  &:focus {
+    border: 1px solid @SecondaryColor;
+  }
 }
 
 .n-input-textarea {
-    height: 96px;
-    line-height: 21px;
-    padding-top: 6px;
+  height: 96px;
+  line-height: 21px;
+  padding-top: 6px;
 }
 
 .n-input:disabled {
-    background: @HoverColor;
-    pointer-events: none;
-    cursor: not-allowed;
-    opacity: 0.5;
+  background: @HoverColor;
+  pointer-events: none;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
 .n-input:disabled + .n-input-label {
-    opacity: 0.5;
+  opacity: 0.5;
 }
 
 .nitrozen-form-input {
-    outline: none;
-    // &:focus {
-    //     label{
-    //         color: @SecondaryColor;
-    //         font-weight: 600;
-    //     }
-    // }
+  outline: none;
+  // &:focus {
+  //     label{
+  //         color: @SecondaryColor;
+  //         font-weight: 600;
+  //     }
+  // }
 }
 
 .n-input-label {
-    color: @LabelColor;
-    font-family: @PrimaryFont;
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 21px;
-    display: flex;
-    flex: 1;
+  color: @LabelColor;
+  font-family: @PrimaryFont;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 21px;
+  display: flex;
+  flex: 1;
 }
 
 .n-input-maxlength {
-    // display: block;
-    // float: right;
-    display: flex;
-    justify-content: flex-end;
-    position: relative;
+  // display: block;
+  // float: right;
+  display: flex;
+  justify-content: flex-end;
+  position: relative;
 }
 
 .nitrozen-input-grp:focus-within + .n-input-label-container > .n-input-label {
-    color: @SecondaryColor !important;
+  color: @SecondaryColor !important;
 }
 
 ::-webkit-input-placeholder {
-    /* Edge */
-    color: @PlaceholderColor;
-    font-size: 12px;
-    font-family: @PrimaryFont;
+  /* Edge */
+  color: @PlaceholderColor;
+  font-size: 12px;
+  font-family: @PrimaryFont;
 }
 
 :-ms-input-placeholder {
-    /* Internet Explorer 10-11 */
-    color: @PlaceholderColor;
-    font-size: 12px;
-    font-family: @PrimaryFont;
+  /* Internet Explorer 10-11 */
+  color: @PlaceholderColor;
+  font-size: 12px;
+  font-family: @PrimaryFont;
 }
 
 ::placeholder {
-    color: @PlaceholderColor;
-    font-size: 12px;
-    font-family: @PrimaryFont;
+  color: @PlaceholderColor;
+  font-size: 12px;
+  font-family: @PrimaryFont;
 }
 
 input[type="search"]::-webkit-search-cancel-button {
-    position: relative;
-    right: 10px;
-    font-size: @BaseFontSize + 4px;
-    cursor: pointer;
+  position: relative;
+  right: 10px;
+  font-size: @BaseFontSize + 4px;
+  cursor: pointer;
 }
 
 .nitrozen-loader-div {
-    float: right;
-    position: relative;
-    bottom: 52px;
-    left: 20px;
-    img {
-        width: 65px;
-    }
+  float: right;
+  position: relative;
+  bottom: 52px;
+  left: 20px;
+  img {
+    width: 65px;
+  }
 }
 
 .nitrozen-search-icon {
-    z-index: 2;
-    position: absolute;
-    left: 9px;
-    top: 9px;
+  z-index: 2;
+  position: absolute;
+  left: 9px;
+  top: 9px;
 }
 
 .nitrozen-tooltip-icon {
-    margin-left: 5px;
+  margin-left: 5px;
 }
 
 .nitrozen-search-input-padding {
-    padding-left: 35px;
+  padding-left: 35px;
 }
 
 .nitrozen-input-label-div {
-    display: flex;
-    justify-content: space-between;
+  display: flex;
+  justify-content: space-between;
 }
 
 .n-input-label-container {
-    display: flex;
+  display: flex;
 }
 
 .nitrozen-input-prefix,
 .nitrozen-input-suffix {
-    height: 40px;
-    margin: auto;
-    box-sizing: border-box;
-    color: @TypographyPrimaryColor;
-    border-radius: 3px;
-    background-color: @PrefixSuffixBackground;
+  height: 40px;
+  margin: auto;
+  box-sizing: border-box;
+  color: @TypographyPrimaryColor;
+  border-radius: 3px;
+  background-color: @PrefixSuffixBackground;
 }
 
 .nitrozen-remove-left-border {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    border-left-color: @WhiteColor;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left-color: @WhiteColor;
 }
 
 .nitrozen-remove-right-border {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    border-right-color: @WhiteColor;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-right-color: @WhiteColor;
 }
 
 .nitrozen-input-grp {
-    display: flex;
-    position: relative;
+  display: flex;
+  position: relative;
 }
 
 .nitrozen-prefix-padding,
 .nitrozen-suffix-padding {
-    padding: 10px;
-    border: 1px solid @BorderColor;
+  padding: 10px;
+  border: 1px solid @BorderColor;
+}
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type="number"] {
+  -moz-appearance: textfield;
 }
diff --git a/src/components/NInput/NInput.vue b/src/components/NInput/NInput.vue
@@ -52,6 +52,8 @@
         v-on:click="eventEmit($event, 'click')"
         v-on:keypress="eventEmit($event, 'keypress')"
         class="n-input input-text"
+        :min="min"
+        :max="max"
         :maxlength="maxlength"
         :type="type"
         :placeholder="placeholder"
@@ -197,6 +199,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    min: {
+      type: Number,
+      default: 0,
+    },
+    max: {
+      type: Number,
+      default: 0,
+    },
   },
   watch: {
     autofocus() {

diff --git a/src/components/NPagination/NPagination.vue b/src/components/NPagination/NPagination.vue
@@ -158,7 +158,7 @@ export default {
       let txt = "";
       if (this.showTotal) {
         txt = ` ${this.firstRecord} - ${this.lastRecord}`;
-        txt += ` / ${this.value.total}`;
+        txt += ` of ${this.value.total}`;
         txt += ` ${this.name || ""}`;
       } else if (this.value.currentTotal) {
         txt = `Showing ${this.value.currentTotal} ${this.name}`;

diff --git a/src/pages/demo.vue b/src/pages/demo.vue
@@ -367,6 +367,17 @@
         ></nitrozen-input>
       </div>
 
+      <div class="main-div">
+        <nitrozen-input
+          :type="'number'"
+          :placeholder="'Enter Number'"
+          :label="'Number'"
+          :min="1"
+          :max="10"
+          v-model="numberModel"
+        ></nitrozen-input>
+      </div>
+
       <div class="main-div">
         <nitrozen-input
           :id="8"
@@ -770,6 +781,7 @@ export default {
       abcd: true,
       singleCheckboxModel: true,
       inputModel: "Some Value",
+      numberModel: 1,
       autoModel: "",
       checkArray: ["Check 1"],
       radioModel: "1",