@ederzeel/nuxt-schema-form-nightly 0.1.0-28997068.dca840d → 0.1.0-28997933.16d731c

package/playground/components/Editor.vue

@@ -1,44 +0,0 @@
-<script lang="ts" setup>
-// import formSchema from '@/assets/schema.json'
-import { Draft2019 } from 'json-schema-library'
-import { computed } from 'vue'
-
-const props = defineProps<{
-  schema: Record<string, unknown>
-}>()
-
-const colorMode = useColorMode()
-const schemaString = ref(JSON.stringify(props.schema, null, 2))
-const error = ref()
-const schemaObject = ref(new Draft2019(JSON.parse(schemaString.value)))
-const schema = ref(schemaObject.value.rootSchema)
-const state = ref(schemaObject.value.getTemplate())
-
-const monacoOptions = computed(() => ({
-  minimap: { enabled: false },
-  theme: colorMode.value === 'dark' ? 'vs-dark' : 'vs-light',
-  contextmenu: false,
-  lineNumbers: 'off',
-  scrollBeyondLastLine: false
-}))
-</script>
-
-<template>
-  <div class="w-full gap-10 flex">
-    <div
-      class="w-1/2 h-[80vh] rounded-md ring-1 focus:ring-2 ring-gray-300 dark:ring-gray-700 overflow-hidden shadow-sm"
-    >
-      <MonacoEditor v-model="schemaString" :options="monacoOptions" lang="json" class="h-full rounded-md" />
-      <!-- <UFormGroup :error="error"> -->
-      <!--   <UTextarea v-model="schemaString" @update:model-value="onUpdate" :rows="25" class="w-full" /> -->
-      <!-- </UFormGroup> -->
-    </div>
-    <div class="w-1/2">
-      <SForm v-if="schema && error == null" v-model="state" :schema="schema">
-        <template #submit>
-          {{ undefined }}
-        </template>
-      </SForm>
-    </div>
-  </div>
-</template>

package/playground/components/MultiStage.vue

@@ -1,164 +0,0 @@
-<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

@@ -1,63 +0,0 @@
-<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/components/TestForm.vue

@@ -1,24 +0,0 @@
-<template>
-  <div class="w-full flex justify-center">
-    <div class="w-full max-w-[800px]">
-      <SForm v-if="schema" v-model="state" :schema="schema" @submit="onSubmit">
-        <template #submit>
-          {{ undefined }}
-        </template>
-      </SForm>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { type JsonSchema } from 'json-schema-library'
-const props = defineProps<{
-  state: { [key: string]: unknown }
-  schema: JsonSchema
-}>()
-const state = ref(props.state)
-
-const onSubmit = (value: unknown) => {
-  console.log(value)
-}
-</script>

package/playground/nuxt.config.ts

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

package/playground/package.json

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

package/playground/pages/index.vue

@@ -1,22 +0,0 @@
-<template>
-  <div class="w-full flex justify-center">
-    <div class="w-full max-w-[1200px] p-10">
-      <div class="pb-10 flex place-content-between">
-        <h1>Demo</h1>
-        <ColorMode />
-      </div>
-      <Editor :schema="schema" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import ColorMode from '@/components/ColorMode.vue'
-import formSchema from '@/assets/schema.json'
-
-const schema = ref(formSchema)
-
-const onSubmit = (value: unknown) => {
-  console.log(value)
-}
-</script>

package/playground/plugins/monaco-editor.js

@@ -1,19 +0,0 @@
-// import { defineNuxtPlugin } from "#app";
-// import * as monaco from "monaco-editor";
-//
-export default defineNuxtPlugin(() => {
-  //   monaco.editor.defineTheme("myCustomTheme", {
-  //     base: "vs-dark", // Base theme can be 'vs', 'vs-dark', or 'hc-black'
-  //     inherit: true, // Inherit rules from the base theme
-  //     rules: [
-  //       { token: "comment", foreground: "ffa500" },
-  //       { token: "keyword", foreground: "008800", fontStyle: "bold" },
-  //       // Add more rules as needed
-  //     ],
-  //     colors: {
-  //       "editor.background": "#1e1e1e",
-  //       "editor.foreground": "#d4d4d4",
-  //       // Add more colors as needed
-  //     },
-  //   });
-});

package/playground/tailwind.config.js

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

package/playground/tsconfig.json

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

package/pnpm-workspace.yaml

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

package/prettier.config.mjs

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

package/scripts/bump-nightly.ts

@@ -1,25 +0,0 @@
-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

@@ -1,24 +0,0 @@
-#!/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

@@ -1,21 +0,0 @@
-#!/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

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

package/src/module.ts

@@ -1,35 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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
-}