feat(lib): adding maz-input-number

Makefile

@@ -16,6 +16,9 @@ build-lib:
 build-watch-lib:
 	make --directory=packages/lib build-watch
 
+build-js-lib:
+	make --directory=packages/lib build-js
+
 install:
 	make install-root install-lib install-docs
 

packages/docs/docs/.vuepress/configs/components.ts

@@ -8,6 +8,7 @@ export const components = {
         '/components/maz-checkbox.md',
         '/components/maz-dropzone.md',
         '/components/maz-input.md',
+        '/components/maz-input-number.md',
         '/components/maz-input-price.md',
         '/components/maz-phone-number-input.md',
         '/components/maz-select.md',

packages/docs/docs/components/maz-input-number.md

@@ -0,0 +1,50 @@
+---
+description: MazInputNumber is a stand-alone component replaces the standard html input text and format the text enter according with the currency provided
+---
+
+# MazInputNumber
+
+MazInputNumber is a stand-alone component replaces the standard html input text and format the text enter according with the currency provided
+
+> Before you have to import the global css files in your project, follow instructions in [Getting Started](/maz-ui-3/guide/getting-started.html)
+## Basic usage
+
+<MazInputNumber
+  v-model="numberValue"
+  label="Enter number"
+  :min="5"
+  :max="1000"
+  :step="1"
+  color="secondary"
+/>
+
+`numberValue: {{ numberValue }}`
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  const numberValue = ref(2)
+</script>
+
+```vue
+<template>
+  <MazInputNumber
+    v-model="numberValue"
+    label="Enter number"
+    :min="5"
+    :max="1000"
+    :step="1"
+    size="md"
+    color="secondary"
+  />
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import MazInputNumber from 'maz-ui/components/MazInputNumber'
+  const numberValue = ref(2)
+</script>
+```
+
+## Props, Events emitted
+
+<ComponentPropDoc component="MazInputNumber" />

packages/docs/docs/components/maz-input-price.md

@@ -19,7 +19,9 @@ description: MazInputPrice is a stand-alone component replaces the standard html
 />
 
 `priceValue: {{ priceValue }}`
+
 <br />
+
 `formattedPrice: {{ formattedPrice }}`
 <script lang="ts" setup>
   import { ref } from 'vue'
@@ -28,8 +30,6 @@ description: MazInputPrice is a stand-alone component replaces the standard html
   const formattedPrice = ref()
 </script>
 
-> Set `:options="{ autoProcessQueue: true }"` to upload automatically the files (no button needed)
-
 ```vue
 <template>
   <MazInputPrice
@@ -53,6 +53,6 @@ description: MazInputPrice is a stand-alone component replaces the standard html
 </script>
 ```
 
-## Props, Events emitted & Methods
+## Props, Events emitted
 
 <ComponentPropDoc component="MazInputPrice" />

packages/docs/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "declaration": true,
+    "esModuleInterop": true,
+    "pretty": true,
+    "moduleResolution": "node",
+    "lib": ["es2015", "es2016.array.include","DOM"],
+    "allowSyntheticDefaultImports": true,
+    "stripInternal": true,
+    "noImplicitAny": false,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "resolveJsonModule": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "alwaysStrict": true,
+    "module": "commonjs",
+    "outDir": "lib",
+  },
+  "include": ["docs/**/*"],
+}

packages/lib/Makefile

@@ -6,6 +6,9 @@ lint:
 build:
 	make clean-build && npm run build
 
+build-js:
+	npm run build:js
+
 clean-build:
 	npm run clean
 

packages/lib/package/components/MazBtn.vue

@@ -18,6 +18,7 @@
         '--disabled': isDisabled,
         '--icon': hasIcon,
         '--rounded': rounded,
+        '--no-padding': noPadding,
       },
     ]"
     :type="btnType"
@@ -27,7 +28,7 @@
         <MazIcon v-if="leftIcon" :name="leftIcon" />
       </slot>
     </div>
-    <span>
+    <span class="maz-flex maz-flex-center">
       <slot></slot>
     </span>
     <div v-if="hasRightIcon" class="m-btn__icon-right">
@@ -109,6 +110,7 @@
     fab: { type: Boolean, default: false },
     leftIcon: { type: String, default: undefined },
     rightIcon: { type: String, default: undefined },
+    noPadding: { type: Boolean, default: false },
   })
 
   const component = computed(() => {
@@ -518,6 +520,10 @@
         @apply maz-cursor-not-allowed maz-bg-color-light maz-text-gray-400;
       }
 
+      &.--no-padding {
+        @apply maz-p-0;
+      }
+
       /* Loader */
       .m-btn__loading-wrapper {
         @apply maz-absolute maz-inset-0 maz-flex maz-items-center maz-justify-center;

packages/lib/package/components/MazCheckbox.vue

@@ -78,8 +78,8 @@
       content: '';
       position: absolute;
       left: 0;
-      width: 18px;
-      height: 18px;
+      width: 22px;
+      height: 22px;
       background: transparent;
       border-radius: 4px;
       transition: all 300ms ease-in-out;
@@ -91,8 +91,8 @@
       content: '';
       position: absolute;
       left: 0;
-      width: 18px;
-      height: 18px;
+      width: 22px;
+      height: 22px;
       background: transparent;
       transition: all 300ms ease-in-out;
     }

packages/lib/package/components/MazInputNumber.vue

@@ -0,0 +1,147 @@
+<template>
+  <div
+    class="m-input-number maz-align-center"
+    :class="[`m-input-number--${size}`]"
+  >
+    <MazBtn
+      color="transparent"
+      no-shadow
+      :size="size"
+      class="m-input-number__button m-input-number__decrement-button"
+      :disabled="decrementDisabled || disabled"
+      @click="decrement"
+    >
+      <MazIcon :src="MinusIcon" class="m-input-number__button__icon" />
+    </MazBtn>
+    <MazInput
+      v-model.number="currentValue"
+      type="number"
+      class="m-input-number__input maz-flex-1"
+      :disabled="disabled"
+      :min="min"
+      :max="max"
+      :step="step"
+      v-bind="$attrs"
+      :size="size"
+      @keydown.up.prevent="increment"
+      @keydown.down.prevent="decrement"
+    />
+    <MazBtn
+      color="transparent"
+      no-shadow
+      :size="size"
+      class="m-input-number__button m-input-number__increment-button"
+      :disabled="incrementDisabled || disabled"
+      @click="increment"
+    >
+      <MazIcon :src="PlusIcon" class="m-input-number__button__icon" />
+    </MazBtn>
+  </div>
+</template>
+
+<script lang="ts">
+  export type { Size } from './types'
+</script>
+
+<script lang="ts" setup>
+  import { computed, PropType } from 'vue'
+  import { Size } from './types'
+  import MazBtn from './MazBtn.vue'
+  import MazInput from './MazInput.vue'
+  import MazIcon from './MazIcon.vue'
+  import PlusIcon from './../icons/plus.svg'
+  import MinusIcon from './../icons/minus.svg'
+
+  const props = defineProps({
+    modelValue: { type: Number, required: true },
+    disabled: { type: Boolean, default: false },
+    max: { type: Number, default: Infinity },
+    min: { type: Number, default: -Infinity },
+    step: { type: Number, default: 1 },
+    size: {
+      type: String as PropType<Size>,
+      default: 'md',
+      validator: (value: string) => {
+        return ['mini', 'xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+      },
+    },
+  })
+  const emits = defineEmits(['update:model-value'])
+  const currentValue = computed({
+    get: () => props.modelValue,
+    set: (value: number) => emitValue(value),
+  })
+  const checkValue = (value: number) => {
+    if (value <= props.min) return props.min
+    if (value >= props.max) return props.max
+    else return value
+  }
+  const emitValue = (newValue: number) => {
+    newValue = checkValue(newValue)
+    if (currentValue.value === newValue) return
+    emits('update:model-value', newValue)
+  }
+  emitValue(currentValue.value)
+  const incrementDisabled = computed(() => props.modelValue >= props.max)
+  const decrementDisabled = computed(() => props.modelValue <= props.min)
+  const increment = () => {
+    if (props.disabled || incrementDisabled.value) return
+    currentValue.value = currentValue.value + 1 * props.step
+  }
+  const decrement = () => {
+    if (props.disabled || decrementDisabled.value) return
+    currentValue.value = currentValue.value - 1 * props.step
+  }
+</script>
+
+<style lang="postcss">
+  .m-input-number {
+    @apply maz-inline-flex;
+
+    &__button {
+      &.m-btn.--is-button {
+        &::before {
+          content: none !important;
+        }
+
+        &:first-child {
+          @apply maz-rounded-r-none maz-border maz-border-color-lighter maz-px-2 maz-shadow-none;
+          @apply maz-px-3 maz-py-0 !important;
+
+          margin-right: calc(-1 * 2px);
+        }
+
+        &:last-child {
+          @apply maz-rounded-l-none maz-border maz-border-color-lighter maz-px-2 maz-shadow-none;
+          @apply maz-px-3 maz-py-0 !important;
+
+          margin-left: calc(-1 * 2px);
+        }
+      }
+
+      &__icon {
+        @apply maz-h-4 maz-w-4;
+      }
+    }
+
+    &__input {
+      min-width: 120px;
+
+      & .m-input-wrapper {
+        @apply maz-z-1 maz-rounded-none;
+      }
+
+      /* Chrome, Safari, Edge, Opera */
+      & input::-webkit-outer-spin-button,
+      & input::-webkit-inner-spin-button {
+        appearance: none;
+        margin: 0;
+      }
+
+      /* Firefox */
+      & input[type='number'] {
+        appearance: textfield;
+      }
+    }
+  }
+</style>

packages/lib/package/components/index.ts

@@ -16,6 +16,7 @@ import { default as MazDropzone } from './MazDropzone.vue'
 import { default as MazGallery } from './MazGallery.vue'
 import { default as MazIcon } from './MazIcon.vue'
 import { default as MazInput } from './MazInput.vue'
+import { default as MazInputNumber } from './MazInputNumber.vue'
 import { default as MazInputPrice } from './MazInputPrice.vue'
 import { default as MazLazyImg } from './MazLazyImg.vue'
 import { default as MazPhoneNumberInput } from './MazPhoneNumberInput.vue'
@@ -44,6 +45,7 @@ export {
   MazGallery,
   MazIcon,
   MazInput,
+  MazInputNumber,
   MazInputPrice,
   MazLazyImg,
   MazPhoneNumberInput,
@@ -73,6 +75,7 @@ export default {
   MazGallery,
   MazIcon,
   MazInput,
+  MazInputNumber,
   MazInputPrice,
   MazLazyImg,
   MazPhoneNumberInput,