@ederzeel/nuxt-schema-form-nightly 0.1.0-29021155.86a2d08 → 0.1.0-29022346.1443684

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,8 @@ export type SComponentProps = {
   type: string
   properties?: Properties
   enum?: string[]
+  enum_titles?: string[]
+  format?: string
   description?: string
   jsonSchemaPath?: string
   validateFields?: (fields: string[]) => Promise<boolean>
@@ -35,6 +37,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/SSelect.vue

@@ -1,18 +1,29 @@
 <script lang="ts" setup>
+import { computed } from 'vue'
+
 const props = defineProps<{
   id: string
   title?: string
   description?: string
   enum: string[]
+  enum_titles: string[]
 }>()
 
+const options = computed(() => props.enum.map((x, i) => ({ key: props?.enum_titles?.[i] ?? x, value: x })))
+
 const value = defineModel<string>({ required: true })
 </script>
 
 <template>
   <div>
     <UFormGroup :label="props.title || id" :description="props.description" :name="props.id">
-      <USelect v-model="value" placeholder="select size" :options="props.enum" />
+      <USelect
+        v-model="value"
+        placeholder="select size"
+        :options="options"
+        value-attribute="value"
+        option-attribute="key"
+      />
     </UFormGroup>
   </div>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ederzeel/nuxt-schema-form-nightly",
-  "version": "0.1.0-29021155.86a2d08",
+  "version": "0.1.0-29022346.1443684",
   "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": {