@ederzeel/nuxt-schema-form-nightly 0.1.0-29020128.b61d8e4 → 0.1.0-29021289.98b222b

package/dist/runtime/components/DatePicker.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { computed, type PropType } from 'vue'
+import { DatePicker as VCalendarDatePicker } from 'v-calendar'
+// @ts-ignore
+import type { DatePickerDate, DatePickerRangeObject } from 'v-calendar/dist/types/src/use/datePicker'
+import 'v-calendar/dist/style.css'
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const props = defineProps({
+  modelValue: {
+    type: [Date, Object] as PropType<DatePickerDate | DatePickerRangeObject | null>,
+    default: null
+  }
+})
+
+const emit = defineEmits(['update:model-value', 'close'])
+
+const date = computed({
+  get: () => props.modelValue,
+  set: value => {
+    emit('update:model-value', value)
+    emit('close')
+  }
+})
+
+const attrs = {
+  transparent: true,
+  borderless: true,
+  color: 'primary',
+  'is-dark': { selector: 'html', darkClass: 'dark' },
+  'first-day-of-week': 2
+}
+
+function onDayClick(_: any, event: MouseEvent): void {
+  const target = event.target as HTMLElement
+  target.blur()
+}
+</script>
+
+<template>
+  <VCalendarDatePicker
+    v-if="date && (date as DatePickerRangeObject)?.start && (date as DatePickerRangeObject)?.end"
+    v-model.range="date"
+    :columns="2"
+    v-bind="{ ...attrs, ...$attrs }"
+    @dayclick="onDayClick"
+  />
+  <VCalendarDatePicker v-else v-model="date" v-bind="{ ...attrs, ...$attrs }" @dayclick="onDayClick" />
+</template>
+
+<style>
+:root{--vc-gray-50:rgb(var(--color-gray-50));--vc-gray-100:rgb(var(--color-gray-100));--vc-gray-200:rgb(var(--color-gray-200));--vc-gray-300:rgb(var(--color-gray-300));--vc-gray-400:rgb(var(--color-gray-400));--vc-gray-500:rgb(var(--color-gray-500));--vc-gray-600:rgb(var(--color-gray-600));--vc-gray-700:rgb(var(--color-gray-700));--vc-gray-800:rgb(var(--color-gray-800));--vc-gray-900:rgb(var(--color-gray-900))}.vc-primary{--vc-accent-50:rgb(var(--color-primary-50));--vc-accent-100:rgb(var(--color-primary-100));--vc-accent-200:rgb(var(--color-primary-200));--vc-accent-300:rgb(var(--color-primary-300));--vc-accent-400:rgb(var(--color-primary-400));--vc-accent-500:rgb(var(--color-primary-500));--vc-accent-600:rgb(var(--color-primary-600));--vc-accent-700:rgb(var(--color-primary-700));--vc-accent-800:rgb(var(--color-primary-800));--vc-accent-900:rgb(var(--color-primary-900))}
+</style>

package/dist/runtime/components/SComponent.vue

@@ -12,6 +12,7 @@ export type SComponentProps = {
   type: string
   properties?: Properties
   enum?: string[]
+  format?: string
   description?: string
   jsonSchemaPath?: string
   validateFields?: (fields: string[]) => Promise<boolean>
@@ -35,6 +36,7 @@ const options = computed(() => ({
       v-model="value"
     />
 
+    <SDate v-else-if="type === 'string' && format === 'date-time'" v-bind="options" v-model="value" />
     <SInputField v-else-if="type === 'string'" v-bind="options" v-model="value" />
     <SToggle v-else-if="type === 'boolean'" v-bind="options" v-model="value" />
     <SObject v-else-if="type === 'object'" v-bind="options" v-model="value" />

package/dist/runtime/components/SDate.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import { format } from 'date-fns'
+import { computed, ref } from 'vue'
+import DatePicker from './DatePicker.vue'
+const props = defineProps<{
+  id: string
+  title?: string
+  description?: string
+  type: string
+}>()
+
+const value = defineModel<string>({ required: true })
+const date = ref(new Date(value.value))
+</script>
+
+<template>
+  <div>
+    <UFormGroup :label="props.title || id" :description="props.description" :name="props.id">
+      <UPopover :popper="{ placement: 'bottom-start' }">
+        <UButton icon="i-heroicons-calendar-days-20-solid" :label="format(date, 'd MMM, yyy')" />
+
+        <template #panel="{ close }">
+          <DatePicker v-model="date" is-required @close="close" />
+        </template>
+      </UPopover>
+    </UFormGroup>
+  </div>
+</template>

package/dist/runtime/components/SRow.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import SComponent from './SComponent.vue'
+
+const props = defineProps<{
+  id: string
+  title?: string
+  description?: string
+  jsonSchemaPath: string
+  properties: PropertiesType
+  modelValue: Record<string, unknown>
+}>()
+
+type PropertiesType = {
+  [key: string]: unknown
+}
+const emit = defineEmits(['update:modelValue'])
+const onInput = (value: unknown, key: string) => {
+  emit('update:modelValue', { ...props.modelValue, [key]: value })
+}
+</script>
+
+<template>
+  <div class="flex flex-row gap-4 justify-stretch">
+    <h2 v-if="props.title" class="mb-4 text-2xl leading-none tracking-tight">{{ props.title }}</h2>
+    <p v-if="props.description" class="mb-4">{{ props.description }}</p>
+
+    <SComponent
+      v-for="[key, options] of Object.entries(properties)"
+      :id="id.length <= 0 ? `${key}` : `${id}.${key}`"
+      :key="key"
+      :model-value="modelValue[key]"
+      :json-schema-path="jsonSchemaPath?.length <= 0 ? `properties.${key}` : `${jsonSchemaPath}.properties.${key}`"
+      v-bind="options"
+      class="flex flex-col flex-1"
+      @update:model-value="event => onInput(event, key)"
+    />
+  </div>
+</template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ederzeel/nuxt-schema-form-nightly",
-  "version": "0.1.0-29020128.b61d8e4",
+  "version": "0.1.0-29021289.98b222b",
   "description": "A runtime form generator for nuxt",
   "type": "module",
   "exports": {
@@ -47,6 +47,7 @@
     "@nuxt/kit": "^3.15.4",
     "@nuxt/module-builder": "^0.8.4",
     "@types/eslint": "^9.6.1",
+    "date-fns": "^4.1.0",
     "eslint": "^9.19.0",
     "eslint-config-prettier": "^10.0.1",
     "globals": "^15.14.0",
@@ -65,6 +66,7 @@
     "unplugin": "^2.1.2",
     "unplugin-auto-import": "^19.0.0",
     "unplugin-vue-components": "^28.0.0",
+    "v-calendar": "^3.1.2",
     "yup": "^1.6.1"
   },
   "resolutions": {