Compare commits

...

5 Commits

Author SHA1 Message Date
Benjamin Canac
159acd664c chore(release): v2.19.2 2024-11-05 19:36:54 +01:00
Benjamin Canac
212f7df35b fix(Button): put back target override 2024-11-05 19:26:37 +01:00
Benjamin Canac
d0d37a06d2 chore(release): v2.19.1 2024-11-05 18:06:03 +01:00
Benjamin Canac
cb6f5f2d71 fix(InputMenu/SelectMenu): regex breaks build 2024-11-05 17:57:49 +01:00
Benjamin Canac
22da1a839a docs(date-picker): improve component
Resolves #2082
2024-11-05 17:35:49 +01:00
7 changed files with 47 additions and 16 deletions

View File

@@ -1,5 +1,17 @@
# Changelog # Changelog
## [2.19.2](https://github.com/nuxt/ui/compare/v2.19.1...v2.19.2) (2024-11-05)
### Bug Fixes
* **Button:** put back `target` override ([212f7df](https://github.com/nuxt/ui/commit/212f7df35b9f81d189e1ee3e34f6fd2234cf52fe))
## [2.19.1](https://github.com/nuxt/ui/compare/v2.19.0...v2.19.1) (2024-11-05)
### Bug Fixes
* **InputMenu/SelectMenu:** regex breaks build ([cb6f5f2](https://github.com/nuxt/ui/commit/cb6f5f2d71ea8bb526a8f958daec8e9871469b63))
## [2.19.0](https://github.com/nuxt/ui/compare/v2.18.7...v2.19.0) (2024-11-05) ## [2.19.0](https://github.com/nuxt/ui/compare/v2.18.7...v2.19.0) (2024-11-05)
### Features ### Features

View File

@@ -1,5 +1,4 @@
<script setup lang="ts"> <script setup lang="ts">
import { useBreakpoints, breakpointsTailwind } from '@vueuse/core'
import { DatePicker as VCalendarDatePicker } from 'v-calendar' import { DatePicker as VCalendarDatePicker } from 'v-calendar'
// @ts-ignore // @ts-ignore
import type { DatePickerDate, DatePickerRangeObject } from 'v-calendar/dist/types/src/use/datePicker' import type { DatePickerDate, DatePickerRangeObject } from 'v-calendar/dist/types/src/use/datePicker'
@@ -26,10 +25,6 @@ const date = computed({
} }
}) })
const breakpoints = useBreakpoints(breakpointsTailwind)
const smallerThanSm = breakpoints.smaller('sm')
const attrs = { const attrs = {
'transparent': true, 'transparent': true,
'borderless': true, 'borderless': true,
@@ -40,8 +35,17 @@ const attrs = {
</script> </script>
<template> <template>
<VCalendarDatePicker v-if="date && (date as DatePickerRangeObject)?.start && (date as DatePickerRangeObject)?.end" v-model.range="date" :columns="smallerThanSm ? 1 : 2" :rows="smallerThanSm ? 2 : 1" v-bind="{ ...attrs, ...$attrs }" /> <VCalendarDatePicker
<VCalendarDatePicker v-else v-model="date" v-bind="{ ...attrs, ...$attrs }" /> v-if="date && (date as DatePickerRangeObject)?.start && (date as DatePickerRangeObject)?.end"
v-model.range="date"
:columns="2"
v-bind="{ ...attrs, ...$attrs }"
/>
<VCalendarDatePicker
v-else
v-model="date"
v-bind="{ ...attrs, ...$attrs }"
/>
</template> </template>
<style> <style>

View File

@@ -38,9 +38,14 @@ The following example is styled based on the `primary` and `gray` colors and sup
```vue [components/DatePicker.vue] ```vue [components/DatePicker.vue]
<script setup lang="ts"> <script setup lang="ts">
import { DatePicker as VCalendarDatePicker } from 'v-calendar' import { DatePicker as VCalendarDatePicker } from 'v-calendar'
// @ts-ignore
import type { DatePickerDate, DatePickerRangeObject } from 'v-calendar/dist/types/src/use/datePicker' import type { DatePickerDate, DatePickerRangeObject } from 'v-calendar/dist/types/src/use/datePicker'
import 'v-calendar/dist/style.css' import 'v-calendar/dist/style.css'
defineOptions({
inheritAttrs: false
})
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
type: [Date, Object] as PropType<DatePickerDate | DatePickerRangeObject | null>, type: [Date, Object] as PropType<DatePickerDate | DatePickerRangeObject | null>,
@@ -59,17 +64,26 @@ const date = computed({
}) })
const attrs = { const attrs = {
transparent: true, 'transparent': true,
borderless: true, 'borderless': true,
color: 'primary', 'color': 'primary',
'is-dark': { selector: 'html', darkClass: 'dark' }, 'is-dark': { selector: 'html', darkClass: 'dark' },
'first-day-of-week': 2, 'first-day-of-week': 2
} }
</script> </script>
<template> <template>
<VCalendarDatePicker v-if="date && (typeof date === 'object')" v-model.range="date" :columns="2" v-bind="{ ...attrs, ...$attrs }" /> <VCalendarDatePicker
<VCalendarDatePicker v-else v-model="date" v-bind="{ ...attrs, ...$attrs }" /> v-if="date && (date as DatePickerRangeObject)?.start && (date as DatePickerRangeObject)?.end"
v-model.range="date"
:columns="2"
v-bind="{ ...attrs, ...$attrs }"
/>
<VCalendarDatePicker
v-else
v-model="date"
v-bind="{ ...attrs, ...$attrs }"
/>
</template> </template>
<style> <style>

View File

@@ -1,7 +1,7 @@
{ {
"name": "@nuxt/ui", "name": "@nuxt/ui",
"description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.", "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
"version": "2.19.0", "version": "2.19.2",
"packageManager": "pnpm@9.12.3", "packageManager": "pnpm@9.12.3",
"repository": "nuxt/ui", "repository": "nuxt/ui",
"homepage": "https://ui.nuxt.com", "homepage": "https://ui.nuxt.com",

View File

@@ -402,7 +402,7 @@ export default defineComponent({
}) })
function escapeRegExp(string: string) { function escapeRegExp(string: string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') return string.replace(/[.*+?^${}()|[\]\\]/g, match => `\\${match}`)
} }
const filteredOptions = computed(() => { const filteredOptions = computed(() => {

View File

@@ -486,7 +486,7 @@ export default defineComponent({
}) })
function escapeRegExp(string: string) { function escapeRegExp(string: string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') return string.replace(/[.*+?^${}()|[\]\\]/g, match => `\\${match}`)
} }
function accessor<T extends Record<string, any>>(obj: T, key: string) { function accessor<T extends Record<string, any>>(obj: T, key: string) {

View File

@@ -26,4 +26,5 @@ export interface Button extends Link {
leading?: boolean leading?: boolean
square?: boolean square?: boolean
truncate?: boolean truncate?: boolean
target?: string
} }