Merge branch 'vuetifyjs:master' into feat/data-table-mobile-view

vuetifyjs · Mar 20, 2024 · 3f6a19c · 3f6a19c
2 parents 69273b8 + 34d4712
commit 3f6a19c
Show file tree

Hide file tree

Showing 39 changed files with 764 additions and 39 deletions.
diff --git a/lerna.json b/lerna.json
@@ -13,6 +13,6 @@
     }
   },
   "npmClient": "yarn",
-  "version": "3.5.9",
+  "version": "3.5.10",
   "useWorkspaces": true
 }
diff --git a/packages/api-generator/package.json b/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"

diff --git a/packages/docs/package.json b/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",
@@ -23,7 +23,7 @@
     "@cosmicjs/sdk": "^1.0.11",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vuetify/one": "^1.2.5",
+    "@vuetify/one": "^1.3.1",
     "algoliasearch": "^4.20.0",
     "fflate": "^0.8.1",
     "isomorphic-fetch": "^3.0.0",
@@ -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",

diff --git a/packages/docs/src/components/doc/MadeWithVuetifyGallery.vue b/packages/docs/src/components/doc/MadeWithVuetifyGallery.vue
@@ -79,7 +79,7 @@
   const store = useMadeWithVuetifyStore()
 
   const items = computed(() => {
-    return shuffle(store.items)
+    return shuffle(store.items.slice())
   })
 
   function shuffle (array) {

diff --git a/packages/docs/src/data/nav.json b/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"

diff --git a/packages/docs/src/examples/v-number-input/prop-control-variant.vue b/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>
diff --git a/packages/docs/src/examples/v-number-input/prop-hide-input.vue b/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>
diff --git a/packages/docs/src/examples/v-number-input/prop-inset.vue b/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>
diff --git a/packages/docs/src/examples/v-number-input/prop-min-max.vue b/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>
diff --git a/packages/docs/src/examples/v-number-input/prop-reverse.vue b/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>
diff --git a/packages/docs/src/examples/v-number-input/prop-step.vue b/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>
diff --git a/packages/docs/src/examples/v-number-input/usage.vue b/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>
diff --git a/packages/docs/src/pages/en/components/all.md b/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

diff --git a/packages/docs/src/pages/en/components/number-inputs.md b/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" />