Merge branch 'master' into feat/Keyboard-support-tables

lerna.json

@@ -13,6 +13,6 @@
     }
   },
   "npmClient": "yarn",
-  "version": "3.5.9",
+  "version": "3.5.10",
   "useWorkspaces": true
 }

packages/api-generator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuetify/api-generator",
-  "version": "3.5.9",
+  "version": "3.5.10",
   "private": true,
   "description": "",
   "scripts": {
@@ -17,7 +17,7 @@
     "ts-morph": "^20.0.0",
     "tsx": "^4.6.2",
     "vue": "^3.4.19",
-    "vuetify": "^3.5.9"
+    "vuetify": "^3.5.10"
   },
   "devDependencies": {
     "@types/stringify-object": "^4.0.5"

packages/docs/package.json

@@ -3,7 +3,7 @@
   "description": "A Vue.js project",
   "private": true,
   "author": "John Leider <john@vuetifyjs.com>",
-  "version": "3.5.9",
+  "version": "3.5.10",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuetifyjs/vuetify.git",
@@ -38,7 +38,7 @@
     "vue-i18n": "^9.7.1",
     "vue-instantsearch": "^4.12.1",
     "vue-prism-component": "^2.0.0",
-    "vuetify": "^3.5.9"
+    "vuetify": "^3.5.10"
   },
   "devDependencies": {
     "@emailjs/browser": "^3.11.0",
@@ -50,7 +50,7 @@
     "@vitejs/plugin-basic-ssl": "^1.0.2",
     "@vitejs/plugin-vue": "^4.5.2",
     "@vue/compiler-sfc": "^3.4.19",
-    "@vuetify/api-generator": "^3.5.9",
+    "@vuetify/api-generator": "^3.5.10",
     "ajv": "^8.12.0",
     "async-es": "^3.2.5",
     "date-fns": "^2.30.0",

packages/docs/src/data/nav.json

@@ -231,6 +231,10 @@
         "title": "floating-action-buttons",
         "subfolder": "components"
       },
+      {
+        "title": "number-inputs",
+        "subfolder": "components"
+      },
       {
         "title": "sparklines",
         "subfolder": "components"

packages/docs/src/examples/v-number-input/prop-control-variant.vue

@@ -0,0 +1,23 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="12" md="4" sm="4">
+        <h5>Default</h5>
+
+        <v-number-input control-variant="default"></v-number-input>
+      </v-col>
+
+      <v-col cols="12" md="4" sm="4">
+        <h5>Stacked</h5>
+
+        <v-number-input control-variant="stacked"></v-number-input>
+      </v-col>
+
+      <v-col cols="12" md="4" sm="4">
+        <h5>Split</h5>
+
+        <v-number-input control-variant="split"></v-number-input>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>

packages/docs/src/examples/v-number-input/prop-hide-input.vue

@@ -0,0 +1,9 @@
+<template>
+  <v-container>
+    <v-row justify="center">
+      <v-col cols="auto">
+        <v-number-input hide-input></v-number-input>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>

packages/docs/src/examples/v-number-input/prop-inset.vue

@@ -0,0 +1,41 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="12" sm="6">
+        <h5>Default</h5>
+
+        <v-number-input
+          control-variant="default"
+          inset
+        ></v-number-input>
+      </v-col>
+
+      <v-col cols="12" sm="6">
+        <h5>Stacked</h5>
+
+        <v-number-input
+          control-variant="stacked"
+          inset
+        ></v-number-input>
+      </v-col>
+
+      <v-col cols="12" sm="6">
+        <h5>Split</h5>
+
+        <v-number-input
+          control-variant="split"
+          inset
+        ></v-number-input>
+      </v-col>
+
+      <v-col cols="12" sm="6">
+        <h5>Hide-input</h5>
+
+        <v-number-input
+          hide-input
+          inset
+        ></v-number-input>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>

packages/docs/src/examples/v-number-input/prop-min-max.vue

@@ -0,0 +1,15 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col>
+        <h5>min:10/max:20</h5>
+
+        <v-number-input
+          :max="20"
+          :min="10"
+          :model-value="15"
+        ></v-number-input>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>

packages/docs/src/examples/v-number-input/prop-reverse.vue

@@ -0,0 +1,31 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="12" md="4" sm="4">
+        <h5>Default</h5>
+
+        <v-number-input
+          control-variant="default"
+          reverse
+        ></v-number-input>
+      </v-col>
+
+      <v-col cols="12" md="4" sm="4">
+        <h5>Stacked</h5>
+
+        <v-number-input
+          control-variant="stacked"
+          reverse
+        ></v-number-input>
+      </v-col>
+
+      <v-col cols="12" md="4" sm="4">
+        <h5>Split</h5>
+
+        <v-number-input
+          control-variant="split"
+        ></v-number-input>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>

packages/docs/src/examples/v-number-input/prop-step.vue

@@ -0,0 +1,16 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col>
+        <h5>step 2; min:10; max:20</h5>
+
+        <v-number-input
+          :max="20"
+          :min="10"
+          :model-value="15"
+          :step="2"
+        ></v-number-input>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>

packages/docs/src/examples/v-number-input/usage.vue

@@ -0,0 +1,59 @@
+<template>
+  <ExamplesUsageExample
+    v-model="model"
+    :code="code"
+    :name="name"
+    :options="options"
+  >
+    <div class="text-center">
+      <v-number-input v-bind="props"></v-number-input>
+    </div>
+
+    <template v-slot:configuration>
+      <v-select
+        v-model="controlVariant"
+        :items="controlVariantOptions"
+        label="Control Variant"
+      ></v-select>
+      <v-checkbox v-model="reverse" label="Reverse"></v-checkbox>
+      <v-checkbox v-model="inset" label="Inset"></v-checkbox>
+      <v-checkbox v-model="hideInput" label="HideInput"></v-checkbox>
+      <v-text-field v-model="label" label="Label" clearable></v-text-field>
+    </template>
+  </ExamplesUsageExample>
+</template>
+
+<script setup>
+  const name = ref('v-number-input')
+  const model = ref('default')
+  const options = ['outlined', 'filled', 'solo', 'solo-inverted', 'solo-filled']
+  const controlVariantOptions = ['default', 'stacked', 'split']
+  const reverse = ref(false)
+  const controlVariant = ref('default')
+  const disabled = ref(false)
+  const loading = ref(false)
+  const inset = ref(false)
+  const hideInput = ref(false)
+  const label = ref('')
+
+  const props = computed(() => {
+    return {
+      reverse: reverse.value,
+      controlVariant: controlVariant.value,
+      disabled: disabled.value || undefined,
+      label: label.value,
+      loading: loading.value || undefined,
+      hideInput: hideInput.value,
+      inset: inset.value,
+      variant: model.value !== 'default' ? model.value : undefined,
+    }
+  })
+
+  const slots = computed(() => {
+    return ``
+  })
+
+  const code = computed(() => {
+    return `<v-number-input${propsToString(props.value)}>${slots.value}</v-number-input>`
+  })
+</script>

packages/docs/src/pages/en/components/all.md

@@ -232,6 +232,12 @@ Form components are used to collect user input in a variety of ways.
 
 </ComponentsListItem>
 
+<ComponentsListItem name="Number input component" src="number-inputs" labs>
+
+  The number input component is used for collecting numerical data from the user
+
+</ComponentsListItem>
+
 <ComponentsListItem name="OTP Input component" src="otp-input" >
 
   The OTP input component is used for MFA authentication via input field

packages/docs/src/pages/en/components/number-inputs.md

@@ -0,0 +1,101 @@
+---
+emphasized: true
+meta:
+  title: Number inputs
+  description: The Number input component is used for ...
+  keywords: Number, vuetify number input component, vue number component
+related:
+  - /components/inputs/
+  - /components/text-fields/
+  - /components/forms/
+features:
+  label: 'C: VNumberInput'
+  github: /components/VNumberInput/
+  report: true
+---
+
+# Number inputs
+
+The VNumberInput extends the standard HTML number-type input, ensuring style consistency across browsers as a replacement for `<input type="number">`
+
+<page-features />
+
+::: warning
+
+This feature requires [v3.5.10](/getting-started/release-notes/?version=v3.5.10)
+
+:::
+
+## Installation
+
+Labs components require a manual import and installation of the component.
+
+```js { resource="src/plugins/vuetify.js" }
+import { VNumberInput } from 'vuetify/labs/VNumberInput'
+
+export default createVuetify({
+  components: {
+    VNumberInput,
+  },
+})
+```
+
+## Usage
+
+Here we display a list of settings that could be applied within an application.
+
+<ExamplesUsage name="v-number-input" />
+
+<PromotedEntry />
+
+## API
+
+| Component | Description |
+| - | - |
+| [v-number-input](/api/v-number-input/) | Primary Component |
+
+<ApiInline hide-links />
+
+## Guide
+
+The `v-number-input` component is built upon the `v-field` and `v-input` components. It is used as a replacement for `<input type="number">`, accepting numeric values from the user.
+
+### Props
+
+The `v-number-input` component has support for most of `v-field`'s props and is follows the same design patterns as other inputs.
+
+#### Control-variant
+
+The `control-variant` prop offers an easy way to customize steppers button layout. The following values are valid options: **default**, **stacked** and **split**.
+
+<ExamplesExample file="v-number-input/prop-control-variant" />
+
+#### Reverse
+
+The `reverse` prop automatically changes the stepper buttons' position to the opposite side for both the default and stacked control variants.
+
+<ExamplesExample file="v-number-input/prop-reverse" />
+
+#### Hide-input
+
+The `hide-input` prop hides the input field, allowing only the stepper buttons to be visible. These stepper buttons follow a stacked control-variant layout.
+
+<ExamplesExample file="v-number-input/prop-hide-input" />
+
+#### Inset
+
+The `inset` prop adjusts the style of the stepper buttons by reducing the size of the button dividers.
+
+<ExamplesExample file="v-number-input/prop-inset" />
+
+#### Min/Max
+
+The `min` and `max` props specify the minimum and maximum values accepted by v-number-input, behaving identically to the native min and max attributes for `<input type="number">`.
+
+<ExamplesExample file="v-number-input/prop-min-max" />
+
+#### Step
+
+The `step` prop behaves the same as the `step` attribute in the `<input type="number">`, it defines the incremental steps for adjusting the numeric value.
+
+<ExamplesExample file="v-number-input/prop-step" />

packages/docs/src/pages/en/labs/introduction.md

@@ -79,6 +79,7 @@ The following is a list of available and up-and-coming components for use with L
 | [v-calendar](/components/calendars/) | A calendar component | [v3.4.9](/getting-started/release-notes/?version=v3.4.9) |
 | [v-empty-state](/components/empty-states/) | A component for displaying empty states | [v3.5.7](/getting-started/release-notes/?version=v3.5.7) |
 | [v-fab](/components/floating-action-buttons/) | A layout aware [v-btn](/components/buttons/) | [v3.5.7](/getting-started/release-notes/?version=v3.5.7) |
+| [v-number-input](/components/number-input/) | A component for numerical data | [v3.5.10](/getting-started/release-notes/?version=v3.5.10) |
 | [v-speed-dial](/components/speed-dials/) | A component for display actions | [v3.5.8](/getting-started/release-notes/?version=v3.5.8) |
 | [v-sparkline](/components/sparklines/) | A basic data display component | [v3.5.5](/getting-started/release-notes/?version=v3.5.5) |
 | [v-treeview](/components/treeview/) | A treeview component | [v3.5.9](/getting-started/release-notes/?version=v3.5.9) |

packages/vuetify/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuetify",
   "description": "Vue Material Component Framework",
-  "version": "3.5.9",
+  "version": "3.5.10",
   "author": {
     "name": "John Leider",
     "email": "john@vuetifyjs.com"