adata-ui 2.1.41-beta.20 → 2.1.41-beta.22

package/.playground/app.vue

@@ -1,6 +1,18 @@
 <script setup lang="ts">
+import type { CalendarModelValue, DateRange } from '#adata-ui/components/elements/calendar-v2/types'
+import { getRangePresets } from '#adata-ui/components/elements/calendar-v2/presets'
+
 const manualOpen = ref(false)
 const placements = ['top', 'top-start', 'bottom', 'bottom-end', 'left', 'right'] as const
+
+/* Calendar v2 */
+const pickerSingle = ref<CalendarModelValue>(null)
+const pickerRange = ref<DateRange>({ start: null, end: null })
+const pickerMonth = ref<CalendarModelValue>(null)
+const pickerTime = ref<CalendarModelValue>(null)
+/* null, а не new Date(): серверная и клиентская метка отличались бы и ломали гидрацию <pre> */
+const inlineDate = ref<CalendarModelValue>(null)
+const rangePresets = getRangePresets()
 </script>
 
 <template>
@@ -97,6 +109,45 @@ const placements = ['top', 'top-start', 'bottom', 'bottom-end', 'left', 'right']
           </template>
         </a-tooltip-v2>
       </section>
+
+      <!-- Calendar v2: пикер во всех режимах + инлайн-сетка -->
+      <section class="flex flex-col gap-6">
+        <h2 class="text-h5 text-primary">
+          ADatePickerV2 / ACalendarV2
+        </h2>
+        <div class="grid gap-4 sm:grid-cols-2">
+          <a-date-picker-v2
+            v-model="pickerSingle"
+            label="Дата выдачи"
+            :min="new Date(1994, 0, 1)"
+            :max="new Date()"
+            required
+          />
+          <a-date-picker-v2
+            v-model="pickerRange"
+            mode="range"
+            :months="2"
+            :presets="rangePresets"
+            label="Период"
+          />
+          <a-date-picker-v2
+            v-model="pickerMonth"
+            precision="month"
+            label="Месяц отчёта"
+          />
+          <a-date-picker-v2
+            v-model="pickerTime"
+            show-time
+            label="Дата и время"
+          />
+        </div>
+        <a-calendar-v2
+          v-model="inlineDate"
+          class="self-start"
+          highlight-weekends
+        />
+        <pre class="overflow-x-auto rounded-lg bg-muted p-3 text-body-sm text-secondary">{{ { pickerSingle, pickerRange, pickerMonth, pickerTime, inlineDate } }}</pre>
+      </section>
     </div>
   </div>
 </template>

package/.playground/nuxt.config.ts

@@ -1,4 +1,7 @@
 export default defineNuxtConfig({
   extends: ['..'],
+  /* CSS-вход слоя регистрирует консьюмер, не слой (см. assets/styles/main.css) —
+     playground тут такой же консьюмер, иначе компоненты рендерятся без Tailwind. */
+  css: ['../assets/styles/main.css'],
   compatibilityDate: '2025-03-20',
 })