@fishawack/lab-velocity 0.6.4 → 0.7.0

package/_defaults.scss

@@ -10,3 +10,12 @@ $spacing: get-ratio(8px);
     margin-left: 0;
     padding: 0px 5 * $spacing;
 }
+
+
+body {
+    font-family: $primaryFont, sans-serif;
+    font-size: get-ratio(16px);
+    line-height: 1.5;
+    color: $color1;
+    background-color: $color3;
+}

package/components/_inputNumber.scss

@@ -0,0 +1,17 @@
+@import "element-plus/theme-chalk/el-input-number";
+
+.vel-input-number {
+    display: block;
+    font-size: 1rem;
+
+    .el-input__wrapper {
+        // padding: .5 * $spacing $spacing;
+    }
+
+    .el-input__inner {
+        --el-input-inner-height:38px
+    }
+    .el-input-group__append, .el-input-group__prepend {
+        padding: 0 2 * $spacing;
+    }
+}

package/form/InputNumber.vue

@@ -0,0 +1,90 @@
+<template>
+    <XInput v-bind="$props">
+        <template #label>
+            <slot name="label" />
+        </template>
+
+        <el-input-number
+            v-bind="{ ...$attrs, class: undefined }"
+            :class="[`${baseClass}`]"
+            :name="name"
+            :id="name"
+            :disabled="disabled"
+            :min="min"
+            :max="max"
+            :size="size"
+            :precision="precision"
+            :step="step"
+            :controls="controls"
+            :step-strictly="stepStrictly"
+            :placeholder="placeholder"
+            v-model="content"
+            :required="required"
+            @input="handleInput"
+        >
+
+            <template #prefix>
+                <slot name="prefix" />
+            </template>
+            <template #suffix>
+                <slot name="suffix" />
+            </template>
+            <template #decrease-icon>
+                <slot name="decrease-icon" />
+            </template>
+            <template #increase-icon>
+                <slot name="increase-icon" />
+            </template>
+        </el-input-number>
+    </XInput>
+</template>
+
+<script>
+import { ElInputNumber } from "element-plus";
+import input from "./input.js";
+import XInput from "./input.vue";
+
+export default {
+    mixins: [input],
+    props: {
+        ...input.props,
+        baseClass: {
+            type: String,
+            default: "vel-input-number",
+        },
+        min: {
+            type: Number,
+            default: -Infinity,
+        },
+        max: {
+            type: Number,
+            default: Infinity,
+        },
+        precision: {
+            type: Number,
+            default: null,
+        },
+        step: {
+            type: Number,
+            default: 1,
+        },
+        stepStrictly: {
+            type: Boolean,
+            default: true,
+        },
+        size: {
+            type: String,
+            default: "default",
+        },
+        controls: {
+            type: Boolean,
+            default: true,
+        }
+    },
+
+    components: {
+        XInput,
+        ElInputNumber,
+    },
+};
+</script>

package/form/input.js

@@ -21,7 +21,7 @@ export default {
             default: false,
         },
         modelValue: {
-            type: String,
+            type: [String,Number],
             default: null,
         },
         label: {

package/general.scss

@@ -14,6 +14,7 @@
 @import "./components/_cascader.scss";
 @import "./components/_wysiwyg.scss";
 @import "./components/_upload.scss";
+@import "./components/_inputNumber.scss";
 
 @import "./components/_breadcrumbs.scss";
 @import "./components/_sidebar.scss";
@@ -25,12 +26,4 @@
 @import "./components/_form.scss";
 
 
-@import "./_base.scss";
-
-body {
-    font-family: $primaryFont, sans-serif;
-    font-size: get-ratio(16px);
-    line-height: 1.5;
-    color: $color1;
-    background-color: $color3;
-}
+@import "./_base.scss";

package/index.js

@@ -11,6 +11,7 @@ export { default as Select } from "./form/Select.vue";
 export { default as Switch } from "./form/Switch.vue";
 export { default as Wysiwyg } from "./form/Wysiwyg.vue";
 export { default as Upload } from "./form/Upload.vue";
+export { default as InputNumber } from "./form/InputNumber.vue";
 
 export { default as SideBar } from "./layout/sideBar.vue";
 export { default as Footer } from "./layout/Footer.vue";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fishawack/lab-velocity",
-  "version": "0.6.4",
+  "version": "0.7.0",
   "description": "Avalere Health branded style system",
   "scripts": {
     "setup": "npm ci || npm i && npm run content",