@ederzeel/nuxt-schema-form-nightly 0.1.0-28989865.c565459

package/playground/components/MultiStage.vue

@@ -0,0 +1,164 @@
+<script lang="ts" setup>
+// import { SComponent } from 'nuxt-schema-form'
+import {
+  StepperDescription,
+  StepperIndicator,
+  StepperItem,
+  StepperRoot,
+  StepperSeparator,
+  StepperTitle,
+  StepperTrigger
+} from 'reka-ui'
+
+export interface FormError<T extends string = string> {
+  path: T
+  message: string
+}
+
+const props = defineProps<{
+  id: string
+  title: string
+  jsonSchemaPath: string
+  validateFields: (fields: string[]) => Promise<boolean>
+  properties: PropertiesType
+  modelValue: Record<string, unknown>
+}>()
+
+type PropertiesType = {
+  properties: {
+    title: string
+    description: string
+    properties: PropertiesType
+    icon: PropertiesType
+    [key: string]: unknown
+  }
+  [key: string]: unknown
+}
+const emit = defineEmits(['update:modelValue'])
+const onInput = (value: unknown, key: string) => {
+  emit('update:modelValue', { ...props.modelValue, [key]: value })
+}
+
+const stage = ref(0)
+const children = computed(() => Object.entries(props.properties).map((x, i) => [x[0], x[1], i] as const))
+
+type ChildIdsKeys = {
+  properties?: ChildIdsKeys
+}
+const getChildFieldIds = (id: string, schema: ChildIdsKeys) => {
+  const children: string[] = []
+  if (schema.properties == null) return children
+  for (const [key, child] of Object.entries(schema.properties)) {
+    if (child.properties != null) {
+      const childIds = getChildFieldIds(key, child)
+      childIds.map(x => `${id}.${x}`)
+      children.push(...childIds)
+    } else {
+      children.push(`${id}.${key}`)
+    }
+  }
+
+  return children
+}
+
+const formErrors = inject<Ref<FormError[]> | null>('form-errors', null)
+
+const steps = computed(() =>
+  children.value.map((x, i) => ({
+    step: i,
+    title: x[1].title,
+    description: x[1].description,
+    icon: x[1].icon || '',
+    error: formErrors?.value.find(error => error.path.includes(`${x[0]}`))
+  }))
+)
+
+const onNext = async () => {
+  const child = children.value[stage.value]
+  console.log(await props.validateFields(getChildFieldIds(child[0], child[1])))
+  if (!(await props.validateFields(getChildFieldIds(child[0], child[1])))) return
+  stage.value++
+}
+</script>
+
+<template>
+  <div class="stepper-container">
+    <!-- {{ formErrors }} -->
+    <!-- {{ `${children[stage][0]}` }} -->
+    <!-- {{ formErrors?.find((error) => error.path.includes(`${children[stage][0]}`)) }} -->
+    <h1>{{ props.title }}</h1>
+
+    <div class="stepper">
+      <StepperRoot v-model="stage" class="flex gap-2 w-full">
+        <StepperItem
+          v-for="item in steps"
+          :key="item.step"
+          class="w-full flex justify-center gap-2 cursor-pointer group relative px-4"
+          :data-error="item.error ? 'error' : undefined"
+          :step="item.step"
+        >
+          <StepperTrigger
+            class="inline-flex border-2 shadow-sm items-center text-white bg-primary-500 border-primary-500 group-data-[error=error]:bg-red-500 group-data-[error=error]:border-red-500 group-data-[state=inactive]:border-gray-200 group-data-[state=inactive]:bg-white group-data-[state=inactive]:text-stone-700 group-data-[disabled]:opacity-50 group-data-[disabled]:cursor-not-allowed justify-center rounded-full w-10 h-10 shrink-0 focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none"
+          >
+            <StepperIndicator>
+              <UIcon :name="item.icon" class="w-5 h-5 ms-auto transform transition-transform duration-200" />
+            </StepperIndicator>
+          </StepperTrigger>
+
+          <StepperSeparator
+            v-if="item.step !== steps[steps.length - 1].step"
+            class="absolute block top-5 left-[calc(50%+30px)] right-[calc(-50%+20px)] h-0.5 rounded-full bg-stone-300/50 shrink-0"
+          />
+
+          <div
+            class="absolute text-center top-full left-0 w-full mt-2 text-stone-700 dark:text-white group-data-[disabled]:opacity-50"
+          >
+            <StepperTitle class="font-medium">
+              {{ item.title }}
+            </StepperTitle>
+            <StepperDescription class="hidden sm:block text-xs">
+              {{ item.description }}
+            </StepperDescription>
+          </div>
+        </StepperItem>
+      </StepperRoot>
+    </div>
+    <div class="stepper-content">
+      <section v-for="[key, options, index] of children" v-show="stage == index" :key="key">
+        <SComponent
+          :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"
+          @update:model-value="event => onInput(event, key)"
+        />
+      </section>
+    </div>
+
+    <slot name="submit">
+      <UButton :type="stage == steps.length - 1 ? 'submit' : undefined" @click="onNext">
+        {{ stage != steps.length - 1 ? 'Next' : 'Submit' }}
+      </UButton>
+    </slot>
+  </div>
+</template>
+
+<style lang="css">
+.stepper {
+  width: 100%;
+  height: 150px;
+  padding-bottom: 1em;
+  /* display: flex; */
+  /* align-items: center; */
+  /* justify-content: center; */
+}
+
+.stepper-container {
+  padding-bottom: 1em;
+}
+
+.stepper-content {
+  padding-bottom: 1em;
+}
+</style>

package/playground/components/Stepper.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+// import { Icon } from '@iconify/vue'
+import {
+  StepperDescription,
+  StepperIndicator,
+  StepperItem,
+  StepperRoot,
+  StepperSeparator,
+  StepperTitle,
+  StepperTrigger
+} from 'reka-ui'
+
+const steps = [
+  {
+    step: 1,
+    title: 'Address',
+    description: 'Add your address here'
+    // icon: 'radix-icons:home'
+  },
+  {
+    step: 2,
+    title: 'Shipping',
+    description: 'Set your preferred shipping method'
+    // icon: 'radix-icons:archive'
+  },
+  {
+    step: 3,
+    title: 'Checkout',
+    description: 'Confirm your order'
+    // icon: 'radix-icons:check'
+  }
+]
+</script>
+
+<template>
+  <StepperRoot :default-value="2" class="flex gap-2 w-full max-w-[32rem]">
+    <StepperItem v-for="item in steps" :key="item.step"
+      class="w-full flex justify-center gap-2 cursor-pointer group relative px-4" :step="item.step">
+      <StepperTrigger
+        class="inline-flex border-2 shadow-sm items-center text-white bg-green9 border-green9 group-data-[state=inactive]:border-gray-200 group-data-[state=inactive]:bg-white group-data-[state=inactive]:text-stone-700 group-data-[disabled]:opacity-50 group-data-[disabled]:cursor-not-allowed justify-center rounded-full w-10 h-10 shrink-0 focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none">
+        <StepperIndicator>
+          <!-- <Icon -->
+          <!--   :icon="item.icon" -->
+          <!--   class="w-5 h-5" -->
+          <!-- /> -->
+        </StepperIndicator>
+      </StepperTrigger>
+
+      <StepperSeparator v-if="item.step !== steps[steps.length - 1].step"
+        class="absolute block top-5 left-[calc(50%+30px)] right-[calc(-50%+20px)] h-0.5 rounded-full bg-stone-300/50 shrink-0" />
+
+      <div
+        class="absolute text-center top-full left-0 w-full mt-2 text-stone-700 dark:text-white group-data-[disabled]:opacity-50">
+        <StepperTitle class="font-medium">
+          {{ item.title }}
+        </StepperTitle>
+        <StepperDescription class="hidden sm:block text-xs">
+          {{ item.description }}
+        </StepperDescription>
+      </div>
+    </StepperItem>
+  </StepperRoot>
+</template>

package/playground/nuxt.config.ts

@@ -0,0 +1,13 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  modules: ['../src/module', '@nuxt/ui'],
+  components: {
+    global: true,
+    dirs: ['@/components']
+  },
+  devtools: { enabled: true },
+  colorMode: {
+    preference: 'light'
+  },
+  compatibilityDate: '2025-01-31'
+})

package/playground/package.json

@@ -0,0 +1,8 @@
+{
+	"dependencies": {
+		"@nuxt/ui": "^2.21.0",
+		"nuxt": "^3.15.4",
+		"@ederzeel/nuxt-schema-form": "../",
+		"reka-ui": "1.0.0-alpha.9"
+	}
+}

package/playground/pages/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="w-full flex justify-center">
+    <div class="w-full max-w-[800px]">
+      <ColorMode />
+      <SForm
+        v-if="schema"
+        v-model="state"
+        :schema="schema"
+        @submit="onSubmit"
+      >
+        <template #submit>
+          {{ undefined }}
+        </template>
+      </SForm>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import ColorMode from '@/components/ColorMode.vue'
+import formSchema from '@/assets/schema.json'
+import { Draft2019 } from 'json-schema-library'
+
+const parsedSchema = new Draft2019(formSchema)
+
+const schema = ref(parsedSchema.rootSchema)
+const state = ref(parsedSchema.getTemplate())
+
+const onSubmit = (value: unknown) => {
+  console.log(value)
+}
+</script>

package/playground/tailwind.config.js

@@ -0,0 +1 @@
+export default {}

package/playground/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}

package/pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+  - 'playground'

package/prettier.config.mjs

@@ -0,0 +1,8 @@
+export default {
+  semi: false,
+  singleQuote: true,
+  printWidth: 120,
+  trailingComma: 'none',
+  endOfLine: 'auto',
+  arrowParens: 'avoid'
+}

package/scripts/bump-nightly.ts

@@ -0,0 +1,25 @@
+import { promises as fsp } from 'node:fs'
+import { execSync } from 'node:child_process'
+import { resolve } from 'pathe'
+
+async function main() {
+  const commit = execSync('git rev-parse --short HEAD').toString('utf-8').trim()
+  const date = Math.round(Date.now() / (1000 * 60))
+
+  const pkgPath = resolve(process.cwd(), 'package.json')
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  const pkg = JSON.parse(await fsp.readFile(pkgPath, 'utf-8').catch(() => '{}'))
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+  pkg.version = `${pkg.version}-${date}.${commit}`
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+  pkg.name = pkg.name + '-nightly'
+  await fsp.writeFile(pkgPath, JSON.stringify(pkg, null, 2) + '\n')
+}
+
+main().catch(err => {
+  console.error(err)
+  process.exit(1)
+})

package/scripts/release-nightly.sh

@@ -0,0 +1,24 @@
+#!/bin/bash
+
+set -xe
+
+# Restore all git changes
+git restore --source=HEAD --staged --worktree -- package.json pnpm-lock.yaml
+
+# Bump versions to edge
+pnpm jiti ./scripts/bump-nightly
+
+# Resolve pnpm
+pnpm i --frozen-lockfile=false
+
+# Update token
+if [[ ! -z ${NPM_TOKEN} ]]; then
+	echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" >>~/.npmrc
+	echo "registry=https://registry.npmjs.org/" >>~/.npmrc
+	echo "always-auth=true" >>~/.npmrc
+	npm whoami
+fi
+
+# Release package
+echo "⚡ Publishing nightly version"
+npx npm@8.17.0 publish --access public --tolerate-republish

package/scripts/release.sh

@@ -0,0 +1,21 @@
+#!/bin/bash
+
+set -xe
+
+# Restore all git changes
+git restore --source=HEAD --staged --worktree -- package.json pnpm-lock.yaml
+
+# Resolve pnpm
+pnpm i --frozen-lockfile=false
+
+# Update token
+if [[ ! -z ${NPM_TOKEN} ]]; then
+	echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" >>~/.npmrc
+	echo "registry=https://registry.npmjs.org/" >>~/.npmrc
+	echo "always-auth=true" >>~/.npmrc
+	npm whoami
+fi
+
+# Release package
+echo "⚡ Publishing with tag latest"
+npx npm@8.17.0 publish --tag latest --access public --tolerate-republish

package/src/defaults.ts

@@ -0,0 +1,3 @@
+export const defaultOptions = {
+  prefix: 'S'
+}

package/src/module.ts

@@ -0,0 +1,35 @@
+import { createResolver, defineNuxtModule, addComponentsDir } from '@nuxt/kit'
+import { defaultOptions } from './defaults'
+
+// export type * from './runtime/types'
+
+export interface ModuleOptions {
+  /**
+   * Prefix for components
+   * @defaultValue `S`
+   * @link https://ui3.nuxt.dev/getting-started/installation/nuxt#prefix
+   */
+  prefix?: string
+}
+
+export default defineNuxtModule<ModuleOptions>({
+  meta: {
+    name: 'SchemaForm',
+    configKey: 'schemaForm',
+    compatibility: {
+      nuxt: '>=3.13.1'
+    },
+    docs: 'https://ui3.nuxt.dev/getting-started/installation/nuxt'
+  },
+  defaults: defaultOptions,
+  setup(options, nuxt) {
+    const { resolve } = createResolver(import.meta.url)
+    nuxt.options.alias['#schema-form'] = resolve('./runtime')
+
+    addComponentsDir({
+      path: resolve('./runtime/components'),
+      prefix: options.prefix,
+      pathPrefix: false
+    })
+  }
+})

package/src/plugins/app-config.ts

@@ -0,0 +1,24 @@
+import type { UnpluginOptions } from 'unplugin'
+import type { ModuleOptions } from '../module'
+
+/**
+ * This plugin injects Nuxt Schema From configuration into the runtime build so Nuxt Schema From components can
+ * access it.
+ */
+export default function AppConfigPlugin(_options: ModuleOptions, appConfig: Record<string, unknown>) {
+  return {
+    name: 'nuxt:schema-form:app-config',
+    enforce: 'pre',
+    resolveId(id) {
+      if (id === '#build/app.config') {
+        return 'virtual:nuxt-schema-form-app-config'
+      }
+    },
+    loadInclude: id => id === 'virtual:nuxt-schema-form-app-config',
+    load() {
+      return `
+          export default ${JSON.stringify(appConfig)}
+        `
+    }
+  } satisfies UnpluginOptions
+}

package/src/plugins/components.ts

@@ -0,0 +1,68 @@
+import { join, normalize } from 'pathe'
+import type { UnpluginContextMeta, UnpluginOptions } from 'unplugin'
+import { globSync } from 'tinyglobby'
+import AutoImportComponents from 'unplugin-vue-components'
+
+import { runtimeDir } from '../unplugin'
+import type { NuxtUIOptions } from '../unplugin'
+
+/**
+ * This plugin adds all the Nuxt UI components as auto-imports.
+ */
+export default function ComponentImportPlugin(
+  framework: UnpluginContextMeta['framework'],
+  options: NuxtUIOptions & { prefix: NonNullable<NuxtUIOptions['prefix']> }
+) {
+  const components = globSync('**/*.vue', { cwd: join(runtimeDir, 'components') })
+  const componentNames = new Set(components.map(c => `${options.prefix}${c.replace(/\.vue$/, '')}`))
+
+  const overrides = globSync('**/*.vue', { cwd: join(runtimeDir, 'vue/components') })
+  const overrideNames = new Set(overrides.map(c => `${options.prefix}${c.replace(/\.vue$/, '')}`))
+
+  return [
+    /**
+     * This plugin aims to ensure we override certain components with Vue-compatible versions:
+     * <UIcon> and <ULink> currently.
+     */
+    {
+      name: 'nuxt:schema-form:components',
+      enforce: 'pre',
+      resolveId(id, importer) {
+        // only apply to runtime nuxt ui components
+        if (!importer || !normalize(importer).includes(runtimeDir)) {
+          return
+        }
+
+        // only apply to relative imports
+        if (!RELATIVE_IMPORT_RE.test(id)) {
+          return
+        }
+
+        const filename = id.match(/([^/]+)\.vue$/)?.[1]
+        if (filename && overrideNames.has(`${options.prefix}${filename}`)) {
+          return join(runtimeDir, 'vue/components', `${filename}.vue`)
+        }
+      }
+    },
+    AutoImportComponents[framework]({
+      dts: true,
+      exclude: [/[\\/]node_modules[\\/](?!\.pnpm|nuxt-schema-form)/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/],
+      resolvers: [
+        componentName => {
+          if (overrideNames.has(componentName))
+            return {
+              name: 'default',
+              from: join(runtimeDir, 'vue/components', `${componentName.slice(options.prefix.length)}.vue`)
+            }
+          if (componentNames.has(componentName))
+            return {
+              name: 'default',
+              from: join(runtimeDir, 'components', `${componentName.slice(options.prefix.length)}.vue`)
+            }
+        }
+      ]
+    })
+  ] /*satisfies*/ as UnpluginOptions[]
+}
+
+const RELATIVE_IMPORT_RE = /^\.{1,2}\//

package/src/plugins/nuxt-environment.ts

@@ -0,0 +1,40 @@
+import type { UnpluginOptions } from 'unplugin'
+import { normalize } from 'pathe'
+import { resolvePathSync } from 'mlly'
+import MagicString from 'magic-string'
+
+import { runtimeDir } from '../unplugin'
+
+/**
+ * This plugin normalises Nuxt environment (#imports) and `import.meta.client` within the Nuxt UI components.
+ */
+export default function NuxtEnvironmentPlugin() {
+  const stubPath = resolvePathSync('../runtime/vue/stubs', { extensions: ['.ts', '.mjs', '.js'], url: import.meta.url })
+
+  return {
+    name: 'nuxt:schema-form',
+    enforce: 'pre',
+    resolveId(id) {
+      // this is implemented here rather than in a vite `config` hook for cross-builder support
+      if (id === '#imports') {
+        return stubPath
+      }
+    },
+    transformInclude(id) {
+      return normalize(id).includes(runtimeDir)
+    },
+    transform(code) {
+      if (code.includes('import.meta.client')) {
+        const s = new MagicString(code)
+        s.replaceAll('import.meta.client', 'true')
+
+        if (s.hasChanged()) {
+          return {
+            code: s.toString(),
+            map: s.generateMap({ hires: true })
+          }
+        }
+      }
+    }
+  } satisfies UnpluginOptions
+}

package/src/runtime/components/SComponent.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+type Properties = {
+  properties?: { [key: string]: unknown }
+}
+
+export type SComponentProps = {
+  id: string
+  title?: string
+  renderer?: string
+  type: string
+  properties?: Properties
+  enum?: string[]
+  description?: string[]
+  jsonSchemaPath: string
+  validateFields: (fields: string[]) => Promise<boolean>
+}
+
+const props = defineProps<SComponentProps>()
+const value = defineModel<unknown>({ required: true })
+
+const options = computed(() => ({
+  ...props,
+  jsonSchemaPath: `${props.id}${props.jsonSchemaPath}`
+}))
+</script>
+
+<template>
+  <div class="s-form-group">
+    <component
+      v-bind="options"
+      :is="typeof renderer === 'string' ? renderer : renderer.name"
+      v-if="renderer"
+      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"
+    />
+    <div v-else>
+      else
+    </div>
+  </div>
+</template>

package/src/runtime/components/SForm.vue

@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+import SComponent from './SComponent.vue'
+import convertToYup from 'json-schema-yup-transformer'
+import type { JsonSchema } from 'json-schema-library'
+import { computed, ref } from 'vue'
+
+const props = defineProps<{ schema: JsonSchema }>()
+
+const value = defineModel<Record<string, unknown>>({ required: true })
+const formRef = ref(null)
+
+const emit = defineEmits(['submit'])
+
+async function onSubmit(_event: unknown) {
+  emit('submit', value.value)
+}
+
+const formValidationSchema = computed(() => convertToYup(props.schema))
+
+const validateFields = async (fields: string[]) => {
+  let allValid = true
+  for (const field of fields) {
+    if (!(await formRef.value?.validate(field, { silent: true }))) {
+      allValid = false
+    }
+  }
+
+  return allValid
+}
+</script>
+
+<template>
+  <div>
+    <UForm
+      ref="formRef"
+      :state="value"
+      :schema="formValidationSchema"
+      autocomplete="on"
+      @submit="onSubmit"
+    >
+      <SComponent
+        id=""
+        v-model="value"
+        v-bind="schema"
+        :validate-fields="validateFields"
+      />
+      <slot />
+
+      <slot name="submit">
+        <UButton
+          class="btn"
+          type="submit"
+        >
+          Submit
+        </UButton>
+      </slot>
+    </UForm>
+  </div>
+</template>