Adds number input style and doc. Bumps package version. (#37)

docs/.vitepress/config.js

@@ -35,6 +35,7 @@ export default {
           { text: 'Text Logo', link: '/components/text-logo' },
           { text: 'Slider', link: '/components/slider' },
           { text: 'Text Inputs', link: '/components/text-inputs' },
+          { text: 'Number Inputs', link: '/components/number-inputs' },
           { text: 'Search Filter', link: '/components/search-filter' },
           { text: 'Toggle', link: '/components/toggle' },
           { text: 'Promotion', link: '/components/promotion' },

docs/components/number-inputs.md

@@ -0,0 +1,20 @@
+# Number Inputs
+
+<script setup>
+import { ref } from "vue"; 
+
+const input = ref(0)
+</script>
+<DemoContainer>
+<input v-model="input" type="number" />
+</DemoContainer>
+
+```vue
+<script setup>
+import { ref } from "vue"; 
+
+const input = ref(0)
+</script>
+
+<input v-model="input" type="number" />
+```

lib/assets/styles/defaults.scss

@@ -52,6 +52,7 @@ a.uncolored {
 }
 
 input[type='text'],
+input[type='number'],
 textarea {
   border-radius: var(--radius-md);
   box-sizing: border-box;
@@ -91,6 +92,14 @@ textarea {
   }
 }
 
+input[type='number'] {
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+}
+
 .iconified-input {
   align-items: center;
   display: inline-flex;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "omorphia",
   "type": "module",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "files": [
     "dist"
   ],