From d97c4865047e90f0e06f6426e8c77a534d5a62aa Mon Sep 17 00:00:00 2001 From: guynikan Date: Thu, 29 Jan 2026 11:24:26 +0000 Subject: [PATCH 1/3] chore: removed separated vue projects --- examples/vue-vuetify/index.html | 14 - examples/vue-vuetify/package.json | 26 - examples/vue-vuetify/src/App.vue | 18 - .../src/components/InputComponents.ts | 398 ---------------- examples/vue-vuetify/src/main.ts | 31 -- .../vue-vuetify/src/pages/ComplexForm.vue | 39 -- examples/vue-vuetify/src/pages/SimpleForm.vue | 39 -- examples/vue-vuetify/tsconfig.json | 11 - examples/vue-vuetify/vite.config.ts | 14 - examples/vue/index.html | 14 - examples/vue/package.json | 23 - examples/vue/src/App.vue | 26 - .../vue/src/components/InputComponents.ts | 449 ------------------ examples/vue/src/main.ts | 20 - examples/vue/src/pages/ComplexForm.vue | 74 --- examples/vue/src/pages/SimpleForm.vue | 74 --- examples/vue/tsconfig.json | 11 - examples/vue/vite.config.ts | 10 - 18 files changed, 1291 deletions(-) delete mode 100644 examples/vue-vuetify/index.html delete mode 100644 examples/vue-vuetify/package.json delete mode 100644 examples/vue-vuetify/src/App.vue delete mode 100644 examples/vue-vuetify/src/components/InputComponents.ts delete mode 100644 examples/vue-vuetify/src/main.ts delete mode 100644 examples/vue-vuetify/src/pages/ComplexForm.vue delete mode 100644 examples/vue-vuetify/src/pages/SimpleForm.vue delete mode 100644 examples/vue-vuetify/tsconfig.json delete mode 100644 examples/vue-vuetify/vite.config.ts delete mode 100644 examples/vue/index.html delete mode 100644 examples/vue/package.json delete mode 100644 examples/vue/src/App.vue delete mode 100644 examples/vue/src/components/InputComponents.ts delete mode 100644 examples/vue/src/main.ts delete mode 100644 examples/vue/src/pages/ComplexForm.vue delete mode 100644 examples/vue/src/pages/SimpleForm.vue delete mode 100644 examples/vue/tsconfig.json delete mode 100644 examples/vue/vite.config.ts diff --git a/examples/vue-vuetify/index.html b/examples/vue-vuetify/index.html deleted file mode 100644 index b248edb..0000000 --- a/examples/vue-vuetify/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - schepta - Vue Vuetify Example - - -
- - - - diff --git a/examples/vue-vuetify/package.json b/examples/vue-vuetify/package.json deleted file mode 100644 index 5401291..0000000 --- a/examples/vue-vuetify/package.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "name": "examples-vue-vuetify", - "version": "0.1.0", - "private": true, - "scripts": { - "dev": "vite", - "build": "vite build", - "preview": "vite preview" - }, - "dependencies": { - "@schepta/core": "workspace:*", - "@schepta/adapter-vue": "workspace:*", - "@schepta/factory-vue": "workspace:*", - "vue": "^3.4.0", - "vue-router": "^4.2.5", - "vuetify": "^3.5.0", - "@mdi/font": "^7.4.47" - }, - "devDependencies": { - "@vitejs/plugin-vue": "^5.0.0", - "vite-plugin-vuetify": "^2.0.1", - "typescript": "^5.3.3", - "vite": "^5.0.8" - } -} - diff --git a/examples/vue-vuetify/src/App.vue b/examples/vue-vuetify/src/App.vue deleted file mode 100644 index fc7d5dd..0000000 --- a/examples/vue-vuetify/src/App.vue +++ /dev/null @@ -1,18 +0,0 @@ - - - - diff --git a/examples/vue-vuetify/src/components/InputComponents.ts b/examples/vue-vuetify/src/components/InputComponents.ts deleted file mode 100644 index ddc0b11..0000000 --- a/examples/vue-vuetify/src/components/InputComponents.ts +++ /dev/null @@ -1,398 +0,0 @@ -import { defineComponent, h } from 'vue'; -import { createComponentSpec } from '@schepta/core'; -import { - VTextField, - VSelect, - VCheckbox, - VTextarea, - VBtn, - VContainer, - VRow, - VCol, -} from 'vuetify/components'; - -// Input Text Component using Vuetify -export const InputText = defineComponent({ - name: 'InputText', - props: { - label: String, - name: String, - value: [String, Number], - placeholder: String, - modelValue: [String, Number], - onChange: Function, - }, - emits: ['update:modelValue'], - setup(props, { emit }) { - return () => h(VTextField, { - label: props.label, - name: props.name, - 'data-test-id': props.name, - modelValue: props.modelValue !== undefined ? props.modelValue : (props.value || ''), - placeholder: props.placeholder, - 'onUpdate:modelValue': (value: any) => { - emit('update:modelValue', value); - if (props.onChange) { - props.onChange(value); - } - }, - density: 'default', - variant: 'outlined', - }); - } -}); - -// Input Select Component using Vuetify -export const InputSelect = defineComponent({ - name: 'InputSelect', - props: { - label: String, - name: String, - value: String, - placeholder: String, - options: Array, - modelValue: String, - onChange: Function, - }, - emits: ['update:modelValue'], - setup(props, { emit }) { - const items = (props.options as any[]) || []; - - return () => h(VSelect, { - label: props.label, - name: props.name, - 'data-test-id': props.name, - modelValue: props.modelValue !== undefined ? props.modelValue : (props.value || ''), - items: items.map((opt: any) => ({ title: opt.label, value: opt.value })), - placeholder: props.placeholder, - 'onUpdate:modelValue': (value: any) => { - emit('update:modelValue', value); - if (props.onChange) { - props.onChange(value); - } - }, - density: 'default', - variant: 'outlined', - }); - } -}); - -// Input Checkbox Component using Vuetify -export const InputCheckbox = defineComponent({ - name: 'InputCheckbox', - props: { - label: String, - name: String, - checked: Boolean, - modelValue: Boolean, - onChange: Function, - }, - emits: ['update:modelValue'], - setup(props, { emit }) { - return () => h(VCheckbox, { - name: props.name, - 'data-test-id': props.name, - modelValue: props.modelValue !== undefined ? props.modelValue : (props.checked || false), - label: props.label, - 'onUpdate:modelValue': (value: any) => { - emit('update:modelValue', value); - if (props.onChange) { - props.onChange(value); - } - }, - density: 'default', - }); - } -}); - -// Input Textarea Component using Vuetify -export const InputTextarea = defineComponent({ - name: 'InputTextarea', - props: { - label: String, - name: String, - value: String, - placeholder: String, - rows: Number, - modelValue: String, - onChange: Function, - }, - emits: ['update:modelValue'], - setup(props, { emit }) { - return () => h(VTextarea, { - label: props.label, - name: props.name, - 'data-test-id': props.name, - modelValue: props.modelValue !== undefined ? props.modelValue : (props.value || ''), - placeholder: props.placeholder, - rows: props.rows || 4, - 'onUpdate:modelValue': (value: any) => { - emit('update:modelValue', value); - if (props.onChange) { - props.onChange(value); - } - }, - density: 'default', - variant: 'outlined', - }); - } -}); - -// Input Number Component using Vuetify -export const InputNumber = defineComponent({ - name: 'InputNumber', - props: { - label: String, - name: String, - value: Number, - placeholder: String, - min: Number, - max: Number, - step: Number, - modelValue: Number, - onChange: Function, - }, - emits: ['update:modelValue'], - setup(props, { emit }) { - return () => h(VTextField, { - label: props.label, - name: props.name, - 'data-test-id': props.name, - type: 'number', - modelValue: props.modelValue !== undefined ? props.modelValue : (props.value || ''), - placeholder: props.placeholder, - min: props.min, - max: props.max, - step: props.step, - 'onUpdate:modelValue': (value: any) => { - emit('update:modelValue', value ? Number(value) : ''); - if (props.onChange) { - props.onChange(value ? Number(value) : ''); - } - }, - density: 'default', - variant: 'outlined', - }); - } -}); - -// Input Date Component using Vuetify -export const InputDate = defineComponent({ - name: 'InputDate', - props: { - label: String, - name: String, - value: String, - modelValue: String, - onChange: Function, - }, - emits: ['update:modelValue'], - setup(props, { emit }) { - return () => h(VTextField, { - label: props.label, - name: props.name, - 'data-test-id': props.name, - type: 'date', - modelValue: props.modelValue !== undefined ? props.modelValue : (props.value || ''), - 'onUpdate:modelValue': (value: any) => { - emit('update:modelValue', value); - if (props.onChange) { - props.onChange(value); - } - }, - density: 'default', - variant: 'outlined', - }); - } -}); - -// Input Phone Component -export const InputPhone = defineComponent({ - name: 'InputPhone', - setup(props: any, { emit }) { - return () => h(InputText, { ...props, type: 'tel' }); - } -}); - -// Container Components -export const FormField = defineComponent({ - name: 'FormField', - setup(props, { slots }) { - return () => h('div', props, slots.default?.()); - } -}); - -export const FormSectionContainer = defineComponent({ - name: 'FormSectionContainer', - setup(props, { slots }) { - return () => h('div', { ...props, style: { marginBottom: '24px', ...props.style } }, slots.default?.()); - } -}); - -export const FormSectionTitle = defineComponent({ - name: 'FormSectionTitle', - props: { - 'x-content': String, - }, - setup(props, { slots }) { - return () => h('h2', { - class: 'text-h5 mb-4', - style: { fontWeight: '600' } - }, props['x-content'] || slots.default?.()); - } -}); - -export const FormSectionGroupContainer = defineComponent({ - name: 'FormSectionGroupContainer', - setup(props, { slots }) { - return () => h('div', props, slots.default?.()); - } -}); - -export const FormSectionGroup = defineComponent({ - name: 'FormSectionGroup', - props: { - 'x-component-props': Object, - columns: String, - children: Array, - }, - setup(props, { slots }) { - const columns = props.columns || (props['x-component-props'] as any)?.columns || '1fr 1fr'; - const gridColumns = columns === '1fr' ? 12 : 6; - - return () => { - // Get children from props or slots - const children = props.children || slots.default?.(); - - // VRow and VCol need children as function for slots - return h(VRow, { - props: { dense: false } - }, () => - (Array.isArray(children) ? children : [children]).map((child: any, index: number) => - h(VCol, { key: index, cols: 12, sm: gridColumns }, () => [child]) - ) - ); - }; - } -}); - -export const FormContainer = defineComponent({ - name: 'FormContainer', - props: { - externalContext: Object, - }, - setup(props, { slots }) { - const onSubmit = (props.externalContext as any)?.onSubmit; - - return () => h('form', { - onSubmit: (e: Event) => { - e.preventDefault(); - if (onSubmit) { - onSubmit(); - } - } - }, slots.default?.()); - } -}); - -export const SubmitButton = defineComponent({ - name: 'SubmitButton', - props: { - 'x-content': String, - externalContext: Object, - }, - setup(props, { slots }) { - const onSubmit = (props.externalContext as any)?.onSubmit; - - const handleClick = () => { - if (onSubmit) { - onSubmit(); - } - }; - - return () => h('div', { - class: 'mt-6 d-flex justify-end' - }, [ - h(VBtn, { - color: 'primary', - size: 'large', - onClick: handleClick, - }, () => props['x-content'] || slots.default?.() || 'Submit') - ]); - } -}); - -// Create component specs -export const components = { - 'FormContainer': createComponentSpec({ - id: 'FormContainer', - type: 'FormContainer', - factory: () => FormContainer, - }), - InputText: createComponentSpec({ - id: 'InputText', - type: 'field', - factory: () => InputText, - }), - InputSelect: createComponentSpec({ - id: 'InputSelect', - type: 'field', - factory: () => InputSelect, - }), - InputCheckbox: createComponentSpec({ - id: 'InputCheckbox', - type: 'field', - factory: () => InputCheckbox, - }), - InputPhone: createComponentSpec({ - id: 'InputPhone', - type: 'field', - factory: () => InputPhone, - }), - InputTextarea: createComponentSpec({ - id: 'InputTextarea', - type: 'field', - factory: () => InputTextarea, - }), - InputNumber: createComponentSpec({ - id: 'InputNumber', - type: 'field', - factory: () => InputNumber, - }), - InputDate: createComponentSpec({ - id: 'InputDate', - type: 'field', - factory: () => InputDate, - }), - SubmitButton: createComponentSpec({ - id: 'SubmitButton', - type: 'content', - factory: () => SubmitButton, - }), - FormField: createComponentSpec({ - id: 'FormField', - type: 'container', - factory: () => FormField, - }), - FormSectionContainer: createComponentSpec({ - id: 'FormSectionContainer', - type: 'container', - factory: () => FormSectionContainer, - }), - FormSectionTitle: createComponentSpec({ - id: 'FormSectionTitle', - type: 'content', - factory: () => FormSectionTitle, - }), - FormSectionGroupContainer: createComponentSpec({ - id: 'FormSectionGroupContainer', - type: 'container', - factory: () => FormSectionGroupContainer, - }), - FormSectionGroup: createComponentSpec({ - id: 'FormSectionGroup', - type: 'container', - factory: () => FormSectionGroup, - }), -}; - diff --git a/examples/vue-vuetify/src/main.ts b/examples/vue-vuetify/src/main.ts deleted file mode 100644 index b8b9967..0000000 --- a/examples/vue-vuetify/src/main.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { createApp } from 'vue'; -import { createRouter, createWebHistory } from 'vue-router'; -import { createVuetify } from 'vuetify'; -import * as components from 'vuetify/components'; -import * as directives from 'vuetify/directives'; -import 'vuetify/styles'; -import '@mdi/font/css/materialdesignicons.css'; -import App from './App.vue'; -import SimpleForm from './pages/SimpleForm.vue'; -import ComplexForm from './pages/ComplexForm.vue'; - -const routes = [ - { path: '/', component: SimpleForm }, - { path: '/complex', component: ComplexForm }, -]; - -const router = createRouter({ - history: createWebHistory(), - routes, -}); - -const vuetify = createVuetify({ - components, - directives, -}); - -const app = createApp(App); -app.use(router); -app.use(vuetify); -app.mount('#root'); - diff --git a/examples/vue-vuetify/src/pages/ComplexForm.vue b/examples/vue-vuetify/src/pages/ComplexForm.vue deleted file mode 100644 index bc9a89a..0000000 --- a/examples/vue-vuetify/src/pages/ComplexForm.vue +++ /dev/null @@ -1,39 +0,0 @@ - - - - diff --git a/examples/vue-vuetify/src/pages/SimpleForm.vue b/examples/vue-vuetify/src/pages/SimpleForm.vue deleted file mode 100644 index 585944d..0000000 --- a/examples/vue-vuetify/src/pages/SimpleForm.vue +++ /dev/null @@ -1,39 +0,0 @@ - - - - diff --git a/examples/vue-vuetify/tsconfig.json b/examples/vue-vuetify/tsconfig.json deleted file mode 100644 index 39c69f6..0000000 --- a/examples/vue-vuetify/tsconfig.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "outDir": "./dist", - "rootDir": "./src", - "jsx": "preserve" - }, - "include": ["src/**/*"], - "exclude": ["node_modules", "dist"] -} - diff --git a/examples/vue-vuetify/vite.config.ts b/examples/vue-vuetify/vite.config.ts deleted file mode 100644 index 37fdec6..0000000 --- a/examples/vue-vuetify/vite.config.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { defineConfig } from 'vite'; -import vue from '@vitejs/plugin-vue'; -import vuetify from 'vite-plugin-vuetify'; - -export default defineConfig({ - plugins: [ - vue(), - vuetify({ autoImport: true }), - ], - server: { - port: 3011, - }, -}); - diff --git a/examples/vue/index.html b/examples/vue/index.html deleted file mode 100644 index 4095262..0000000 --- a/examples/vue/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - schepta - Vue Example - - -
- - - - diff --git a/examples/vue/package.json b/examples/vue/package.json deleted file mode 100644 index b3ba2f7..0000000 --- a/examples/vue/package.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "name": "examples-vue", - "version": "0.1.0", - "private": true, - "scripts": { - "dev": "vite", - "build": "vite build", - "preview": "vite preview" - }, - "dependencies": { - "@schepta/core": "workspace:*", - "@schepta/adapter-vue": "workspace:*", - "@schepta/factory-vue": "workspace:*", - "vue": "^3.4.0", - "vue-router": "^4.2.5" - }, - "devDependencies": { - "@vitejs/plugin-vue": "^5.0.0", - "typescript": "^5.3.3", - "vite": "^5.0.8" - } -} - diff --git a/examples/vue/src/App.vue b/examples/vue/src/App.vue deleted file mode 100644 index 0efacd1..0000000 --- a/examples/vue/src/App.vue +++ /dev/null @@ -1,26 +0,0 @@ - - - - diff --git a/examples/vue/src/components/InputComponents.ts b/examples/vue/src/components/InputComponents.ts deleted file mode 100644 index 8ad7031..0000000 --- a/examples/vue/src/components/InputComponents.ts +++ /dev/null @@ -1,449 +0,0 @@ -import { defineComponent, h } from 'vue'; -import { createComponentSpec } from '@schepta/core'; - -// Input Text Component -export const InputText = defineComponent({ - name: 'InputText', - props: { - label: String, - name: String, - value: [String, Number], - placeholder: String, - modelValue: [String, Number], - onChange: Function, - }, - emits: ['update:modelValue'], - setup(props, { emit }) { - const handleInput = (e: Event) => { - const target = e.target as HTMLInputElement; - const value = target.value; - emit('update:modelValue', value); - if (props.onChange) { - props.onChange(value); - } - }; - - return () => h('div', { style: { marginBottom: '16px' } }, [ - props.label ? h('label', { - for: props.name, - style: { display: 'block', marginBottom: '4px', fontWeight: '500' } - }, props.label) : null, - h('input', { - id: props.name, - name: props.name, - 'data-test-id': props.name, - value: props.modelValue !== undefined ? props.modelValue : (props.value || ''), - placeholder: props.placeholder, - onInput: handleInput, - style: { width: '100%', padding: '8px', border: '1px solid #ccc', borderRadius: '4px' } - }) - ]); - } -}); - -// Input Select Component -export const InputSelect = defineComponent({ - name: 'InputSelect', - props: { - label: String, - name: String, - value: String, - placeholder: String, - options: Array, - modelValue: String, - onChange: Function, - }, - emits: ['update:modelValue'], - setup(props, { emit }) { - const handleChange = (e: Event) => { - const target = e.target as HTMLSelectElement; - const value = target.value; - emit('update:modelValue', value); - if (props.onChange) { - props.onChange(value); - } - }; - - return () => h('div', { style: { marginBottom: '16px' } }, [ - props.label ? h('label', { - for: props.name, - style: { display: 'block', marginBottom: '4px', fontWeight: '500' } - }, props.label) : null, - h('select', { - id: props.name, - name: props.name, - 'data-test-id': props.name, - value: props.modelValue !== undefined ? props.modelValue : (props.value || ''), - onChange: handleChange, - style: { width: '100%', padding: '8px', border: '1px solid #ccc', borderRadius: '4px' } - }, [ - h('option', { value: '' }, props.placeholder || 'Select...'), - ...((props.options as any[]) || []).map((opt: any) => - h('option', { key: opt.value, value: opt.value }, opt.label) - ) - ]) - ]); - } -}); - -// Input Checkbox Component -export const InputCheckbox = defineComponent({ - name: 'InputCheckbox', - props: { - label: String, - name: String, - checked: Boolean, - modelValue: Boolean, - onChange: Function, - }, - emits: ['update:modelValue'], - setup(props, { emit }) { - const handleChange = (e: Event) => { - const target = e.target as HTMLInputElement; - const value = target.checked; - emit('update:modelValue', value); - if (props.onChange) { - props.onChange(value); - } - }; - - return () => h('div', { style: { marginBottom: '16px' } }, [ - h('label', { - style: { display: 'flex', alignItems: 'center', gap: '8px' } - }, [ - h('input', { - type: 'checkbox', - name: props.name, - 'data-test-id': props.name, - checked: props.modelValue !== undefined ? props.modelValue : (props.checked || false), - onChange: handleChange - }), - props.label - ]) - ]); - } -}); - -// Input Textarea Component -export const InputTextarea = defineComponent({ - name: 'InputTextarea', - props: { - label: String, - name: String, - value: String, - placeholder: String, - rows: Number, - modelValue: String, - onChange: Function, - }, - emits: ['update:modelValue'], - setup(props, { emit }) { - const handleInput = (e: Event) => { - const target = e.target as HTMLTextAreaElement; - const value = target.value; - emit('update:modelValue', value); - if (props.onChange) { - props.onChange(value); - } - }; - - return () => h('div', { style: { marginBottom: '16px' } }, [ - props.label ? h('label', { - for: props.name, - style: { display: 'block', marginBottom: '4px', fontWeight: '500' } - }, props.label) : null, - h('textarea', { - id: props.name, - name: props.name, - 'data-test-id': props.name, - value: props.modelValue !== undefined ? props.modelValue : (props.value || ''), - placeholder: props.placeholder, - rows: props.rows || 4, - onInput: handleInput, - style: { width: '100%', padding: '8px', border: '1px solid #ccc', borderRadius: '4px', fontFamily: 'inherit' } - }) - ]); - } -}); - -// Input Number Component -export const InputNumber = defineComponent({ - name: 'InputNumber', - props: { - label: String, - name: String, - value: Number, - placeholder: String, - min: Number, - max: Number, - step: Number, - modelValue: Number, - onChange: Function, - }, - emits: ['update:modelValue'], - setup(props, { emit }) { - const handleInput = (e: Event) => { - const target = e.target as HTMLInputElement; - const value = target.value ? Number(target.value) : ''; - emit('update:modelValue', value); - if (props.onChange) { - props.onChange(value); - } - }; - - return () => h('div', { style: { marginBottom: '16px' } }, [ - props.label ? h('label', { - for: props.name, - style: { display: 'block', marginBottom: '4px', fontWeight: '500' } - }, props.label) : null, - h('input', { - type: 'number', - id: props.name, - name: props.name, - 'data-test-id': props.name, - value: props.modelValue !== undefined ? props.modelValue : (props.value || ''), - placeholder: props.placeholder, - min: props.min, - max: props.max, - step: props.step, - onInput: handleInput, - style: { width: '100%', padding: '8px', border: '1px solid #ccc', borderRadius: '4px' } - }) - ]); - } -}); - -// Input Date Component -export const InputDate = defineComponent({ - name: 'InputDate', - props: { - label: String, - name: String, - value: String, - modelValue: String, - onChange: Function, - }, - emits: ['update:modelValue'], - setup(props, { emit }) { - const handleChange = (e: Event) => { - const target = e.target as HTMLInputElement; - const value = target.value; - emit('update:modelValue', value); - if (props.onChange) { - props.onChange(value); - } - }; - - return () => h('div', { style: { marginBottom: '16px' } }, [ - props.label ? h('label', { - for: props.name, - style: { display: 'block', marginBottom: '4px', fontWeight: '500' } - }, props.label) : null, - h('input', { - type: 'date', - id: props.name, - name: props.name, - 'data-test-id': props.name, - value: props.modelValue !== undefined ? props.modelValue : (props.value || ''), - onChange: handleChange, - style: { width: '100%', padding: '8px', border: '1px solid #ccc', borderRadius: '4px' } - }) - ]); - } -}); - -// Input Phone Component -export const InputPhone = defineComponent({ - name: 'InputPhone', - setup(props: any, { emit }) { - return () => h(InputText, { ...props, type: 'tel' }); - } -}); - -// Container Components -export const FormField = defineComponent({ - name: 'FormField', - setup(props, { slots }) { - return () => h('div', props, slots.default?.()); - } -}); - -export const FormSectionContainer = defineComponent({ - name: 'FormSectionContainer', - setup(props, { slots }) { - return () => h('div', { ...props, style: { marginBottom: '24px', ...props.style } }, slots.default?.()); - } -}); - -export const FormSectionTitle = defineComponent({ - name: 'FormSectionTitle', - props: { - 'x-content': String, - }, - setup(props, { slots }) { - return () => h('h2', { - style: { marginBottom: '16px', fontSize: '20px', fontWeight: '600', color: '#333' } - }, props['x-content'] || slots.default?.()); - } -}); - -export const FormSectionGroupContainer = defineComponent({ - name: 'FormSectionGroupContainer', - setup(props, { slots }) { - return () => h('div', props, slots.default?.()); - } -}); - -export const FormSectionGroup = defineComponent({ - name: 'FormSectionGroup', - props: { - 'x-component-props': Object, - columns: String, - }, - setup(props, { slots }) { - // Get columns from x-component-props or direct prop - const columns = props.columns || (props['x-component-props'] as any)?.columns || '1fr 1fr'; - return () => h('div', { - style: { - display: 'grid', - gridTemplateColumns: columns, - gap: '16px' - } - }, slots.default?.()); - } -}); - -export const FormContainer = defineComponent({ - name: 'FormContainer', - props: { - externalContext: Object, - children: Array, - }, - setup(props, { slots }) { - const onSubmit = (props.externalContext as any)?.onSubmit; - - return () => { - // Use children prop if provided, otherwise use slots - const children = props.children || slots.default?.(); - - return h('form', { - onSubmit: (e: Event) => { - e.preventDefault(); - if (onSubmit) { - onSubmit(); - } - } - }, children); - }; - } -}); - -export const SubmitButton = defineComponent({ - name: 'SubmitButton', - props: { - 'x-content': String, - externalContext: Object, - }, - setup(props, { slots }) { - const onSubmit = (props.externalContext as any)?.onSubmit; - - const handleClick = () => { - if (onSubmit) { - onSubmit(); - } - }; - - return () => h('div', { - style: { marginTop: '24px', textAlign: 'right' } - }, [ - h('button', { - type: 'button', - onClick: handleClick, - style: { - padding: '12px 24px', - backgroundColor: '#007bff', - color: 'white', - border: 'none', - borderRadius: '4px', - cursor: 'pointer', - fontSize: '16px', - fontWeight: '500', - } - }, props['x-content'] || slots.default?.() || 'Submit') - ]); - } -}); - -// Create component specs -export const components = { - 'FormContainer': createComponentSpec({ - id: 'FormContainer', - type: 'FormContainer', - factory: () => FormContainer, - }), - InputText: createComponentSpec({ - id: 'InputText', - type: 'field', - factory: () => InputText, - }), - InputSelect: createComponentSpec({ - id: 'InputSelect', - type: 'field', - factory: () => InputSelect, - }), - InputCheckbox: createComponentSpec({ - id: 'InputCheckbox', - type: 'field', - factory: () => InputCheckbox, - }), - InputPhone: createComponentSpec({ - id: 'InputPhone', - type: 'field', - factory: () => InputPhone, - }), - InputTextarea: createComponentSpec({ - id: 'InputTextarea', - type: 'field', - factory: () => InputTextarea, - }), - InputNumber: createComponentSpec({ - id: 'InputNumber', - type: 'field', - factory: () => InputNumber, - }), - InputDate: createComponentSpec({ - id: 'InputDate', - type: 'field', - factory: () => InputDate, - }), - SubmitButton: createComponentSpec({ - id: 'SubmitButton', - type: 'content', - factory: () => SubmitButton, - }), - FormField: createComponentSpec({ - id: 'FormField', - type: 'container', - factory: () => FormField, - }), - FormSectionContainer: createComponentSpec({ - id: 'FormSectionContainer', - type: 'container', - factory: () => FormSectionContainer, - }), - FormSectionTitle: createComponentSpec({ - id: 'FormSectionTitle', - type: 'content', - factory: () => FormSectionTitle, - }), - FormSectionGroupContainer: createComponentSpec({ - id: 'FormSectionGroupContainer', - type: 'container', - factory: () => FormSectionGroupContainer, - }), - FormSectionGroup: createComponentSpec({ - id: 'FormSectionGroup', - type: 'container', - factory: () => FormSectionGroup, - }), -}; diff --git a/examples/vue/src/main.ts b/examples/vue/src/main.ts deleted file mode 100644 index b3c3aa2..0000000 --- a/examples/vue/src/main.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { createApp } from 'vue'; -import { createRouter, createWebHistory } from 'vue-router'; -import App from './App.vue'; -import SimpleForm from './pages/SimpleForm.vue'; -import ComplexForm from './pages/ComplexForm.vue'; - -const routes = [ - { path: '/', component: SimpleForm }, - { path: '/complex', component: ComplexForm }, -]; - -const router = createRouter({ - history: createWebHistory(), - routes, -}); - -const app = createApp(App); -app.use(router); -app.mount('#root'); - diff --git a/examples/vue/src/pages/ComplexForm.vue b/examples/vue/src/pages/ComplexForm.vue deleted file mode 100644 index 95bb268..0000000 --- a/examples/vue/src/pages/ComplexForm.vue +++ /dev/null @@ -1,74 +0,0 @@ - - - - - - diff --git a/examples/vue/src/pages/SimpleForm.vue b/examples/vue/src/pages/SimpleForm.vue deleted file mode 100644 index 14d60b9..0000000 --- a/examples/vue/src/pages/SimpleForm.vue +++ /dev/null @@ -1,74 +0,0 @@ - - - - - - diff --git a/examples/vue/tsconfig.json b/examples/vue/tsconfig.json deleted file mode 100644 index 39c69f6..0000000 --- a/examples/vue/tsconfig.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "outDir": "./dist", - "rootDir": "./src", - "jsx": "preserve" - }, - "include": ["src/**/*"], - "exclude": ["node_modules", "dist"] -} - diff --git a/examples/vue/vite.config.ts b/examples/vue/vite.config.ts deleted file mode 100644 index 7e4699e..0000000 --- a/examples/vue/vite.config.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { defineConfig } from 'vite'; -import vue from '@vitejs/plugin-vue'; - -export default defineConfig({ - plugins: [vue()], - server: { - port: 3010, - }, -}); - From 47a95adf2bfe6eca27aa600cffe6a593d1b03f00 Mon Sep 17 00:00:00 2001 From: guynikan Date: Thu, 29 Jan 2026 12:00:00 +0000 Subject: [PATCH 2/3] refactor: cleanup examples --- README.md | 10 +- docs/.vitepress/components.ts | 12 +- docs/.vitepress/config.ts | 44 +++---- docs/.vitepress/theme/index.ts | 1 - docs/components/home/ConceptsSection.vue | 8 +- docs/components/home/HeroSection.vue | 4 +- docs/en-US/examples/chakra-ui.md | 8 +- docs/en-US/examples/material-ui.md | 8 +- docs/en-US/examples/react.md | 8 +- docs/en-US/examples/vue.md | 8 +- docs/en-US/examples/vuetify.md | 8 +- docs/en-US/guide/quick-start.md | 10 -- docs/en-US/index.md | 8 +- docs/es-ES/examples/chakra-ui.md | 2 +- docs/es-ES/examples/material-ui.md | 2 +- docs/es-ES/examples/react.md | 2 +- docs/es-ES/examples/vue.md | 2 +- docs/es-ES/examples/vuetify.md | 2 +- docs/es-ES/guide/quick-start.md | 10 -- docs/es-ES/index.md | 14 +-- docs/pt-BR/examples/chakra-ui.md | 2 +- docs/pt-BR/examples/material-ui.md | 2 +- docs/pt-BR/examples/react.md | 2 +- docs/pt-BR/examples/vue.md | 2 +- docs/pt-BR/examples/vuetify.md | 2 +- docs/pt-BR/guide/quick-start.md | 10 -- docs/pt-BR/index.md | 14 +-- packages/factories/react/README.md | 2 +- packages/factories/react/src/index.ts | 4 +- packages/factories/vanilla/README.md | 2 +- packages/factories/vue/README.md | 2 +- pnpm-lock.yaml | 107 +----------------- pnpm-workspace.yaml | 2 +- scripts/publish.sh | 2 +- scripts/start-all-servers.sh | 6 +- {examples => showcases}/react/index.html | 0 {examples => showcases}/react/package.json | 2 +- {examples => showcases}/react/src/App.tsx | 8 +- .../react/src/ExpressionExample.tsx | 0 .../basic-ui/components/ComponentRegistry.tsx | 0 .../components/Forms/FormWithFormik.tsx | 0 .../basic-ui/components/Forms/FormWithRHF.tsx | 0 .../basic-ui/components/Forms/ModalForm.tsx | 0 .../components/Forms/NativeComplexForm.tsx | 0 .../basic-ui/components/Forms/NativeForm.tsx | 0 .../basic-ui/components/Inputs/InputText.tsx | 0 .../components/formik/FormikFieldWrapper.tsx | 0 .../components/formik/FormikFormContainer.tsx | 0 .../components/rhf/RHFFieldWrapper.tsx | 0 .../components/rhf/RHFFormContainer.tsx | 0 .../src/basic-ui/pages/BasicFormPage.tsx | 0 .../components/ComponentRegistry.tsx | 0 .../components/Containers/FormContainer.tsx | 0 .../components/Containers/FormField.tsx | 0 .../Containers/FormSectionContainer.tsx | 0 .../Containers/FormSectionGroup.tsx | 0 .../Containers/FormSectionGroupContainer.tsx | 0 .../Containers/FormSectionTitle.tsx | 0 .../react/src/chakra-ui/components/Form.tsx | 0 .../components/Inputs/InputCheckbox.tsx | 0 .../chakra-ui/components/Inputs/InputDate.tsx | 0 .../components/Inputs/InputNumber.tsx | 0 .../components/Inputs/InputPhone.tsx | 0 .../components/Inputs/InputSelect.tsx | 0 .../chakra-ui/components/Inputs/InputText.tsx | 0 .../components/Inputs/InputTextarea.tsx | 0 .../src/chakra-ui/components/SubmitButton.tsx | 0 .../src/chakra-ui/pages/ChakraFormPage.tsx | 0 .../src/components/ProviderComponents.tsx | 0 .../react/src/components/ProviderFeatures.tsx | 0 .../src/components/SubmittedValuesDisplay.tsx | 0 {examples => showcases}/react/src/index.css | 0 {examples => showcases}/react/src/main.tsx | 0 .../components/ComponentRegistry.tsx | 0 .../components/Containers/FormContainer.tsx | 0 .../components/Containers/FormField.tsx | 0 .../Containers/FormSectionContainer.tsx | 0 .../Containers/FormSectionGroup.tsx | 0 .../Containers/FormSectionGroupContainer.tsx | 0 .../Containers/FormSectionTitle.tsx | 0 .../react/src/material-ui/components/Form.tsx | 0 .../components/Inputs/InputCheckbox.tsx | 0 .../components/Inputs/InputDate.tsx | 0 .../components/Inputs/InputNumber.tsx | 0 .../components/Inputs/InputPhone.tsx | 0 .../components/Inputs/InputSelect.tsx | 0 .../components/Inputs/InputText.tsx | 0 .../components/Inputs/InputTextarea.tsx | 0 .../material-ui/components/SubmitButton.tsx | 0 .../material-ui/pages/MaterialFormPage.tsx | 0 {examples => showcases}/react/tsconfig.json | 0 {examples => showcases}/react/vite.config.ts | 0 tests/playwright.config.ts | 2 +- 93 files changed, 105 insertions(+), 239 deletions(-) rename {examples => showcases}/react/index.html (100%) rename {examples => showcases}/react/package.json (96%) rename {examples => showcases}/react/src/App.tsx (92%) rename {examples => showcases}/react/src/ExpressionExample.tsx (100%) rename {examples => showcases}/react/src/basic-ui/components/ComponentRegistry.tsx (100%) rename {examples => showcases}/react/src/basic-ui/components/Forms/FormWithFormik.tsx (100%) rename {examples => showcases}/react/src/basic-ui/components/Forms/FormWithRHF.tsx (100%) rename {examples => showcases}/react/src/basic-ui/components/Forms/ModalForm.tsx (100%) rename {examples => showcases}/react/src/basic-ui/components/Forms/NativeComplexForm.tsx (100%) rename {examples => showcases}/react/src/basic-ui/components/Forms/NativeForm.tsx (100%) rename {examples => showcases}/react/src/basic-ui/components/Inputs/InputText.tsx (100%) rename {examples => showcases}/react/src/basic-ui/components/formik/FormikFieldWrapper.tsx (100%) rename {examples => showcases}/react/src/basic-ui/components/formik/FormikFormContainer.tsx (100%) rename {examples => showcases}/react/src/basic-ui/components/rhf/RHFFieldWrapper.tsx (100%) rename {examples => showcases}/react/src/basic-ui/components/rhf/RHFFormContainer.tsx (100%) rename {examples => showcases}/react/src/basic-ui/pages/BasicFormPage.tsx (100%) rename {examples => showcases}/react/src/chakra-ui/components/ComponentRegistry.tsx (100%) rename {examples => showcases}/react/src/chakra-ui/components/Containers/FormContainer.tsx (100%) rename {examples => showcases}/react/src/chakra-ui/components/Containers/FormField.tsx (100%) rename {examples => showcases}/react/src/chakra-ui/components/Containers/FormSectionContainer.tsx (100%) rename {examples => showcases}/react/src/chakra-ui/components/Containers/FormSectionGroup.tsx (100%) rename {examples => showcases}/react/src/chakra-ui/components/Containers/FormSectionGroupContainer.tsx (100%) rename {examples => showcases}/react/src/chakra-ui/components/Containers/FormSectionTitle.tsx (100%) rename {examples => showcases}/react/src/chakra-ui/components/Form.tsx (100%) rename {examples => showcases}/react/src/chakra-ui/components/Inputs/InputCheckbox.tsx (100%) rename {examples => showcases}/react/src/chakra-ui/components/Inputs/InputDate.tsx (100%) rename {examples => showcases}/react/src/chakra-ui/components/Inputs/InputNumber.tsx (100%) rename {examples => showcases}/react/src/chakra-ui/components/Inputs/InputPhone.tsx (100%) rename {examples => showcases}/react/src/chakra-ui/components/Inputs/InputSelect.tsx (100%) rename {examples => showcases}/react/src/chakra-ui/components/Inputs/InputText.tsx (100%) rename {examples => showcases}/react/src/chakra-ui/components/Inputs/InputTextarea.tsx (100%) rename {examples => showcases}/react/src/chakra-ui/components/SubmitButton.tsx (100%) rename {examples => showcases}/react/src/chakra-ui/pages/ChakraFormPage.tsx (100%) rename {examples => showcases}/react/src/components/ProviderComponents.tsx (100%) rename {examples => showcases}/react/src/components/ProviderFeatures.tsx (100%) rename {examples => showcases}/react/src/components/SubmittedValuesDisplay.tsx (100%) rename {examples => showcases}/react/src/index.css (100%) rename {examples => showcases}/react/src/main.tsx (100%) rename {examples => showcases}/react/src/material-ui/components/ComponentRegistry.tsx (100%) rename {examples => showcases}/react/src/material-ui/components/Containers/FormContainer.tsx (100%) rename {examples => showcases}/react/src/material-ui/components/Containers/FormField.tsx (100%) rename {examples => showcases}/react/src/material-ui/components/Containers/FormSectionContainer.tsx (100%) rename {examples => showcases}/react/src/material-ui/components/Containers/FormSectionGroup.tsx (100%) rename {examples => showcases}/react/src/material-ui/components/Containers/FormSectionGroupContainer.tsx (100%) rename {examples => showcases}/react/src/material-ui/components/Containers/FormSectionTitle.tsx (100%) rename {examples => showcases}/react/src/material-ui/components/Form.tsx (100%) rename {examples => showcases}/react/src/material-ui/components/Inputs/InputCheckbox.tsx (100%) rename {examples => showcases}/react/src/material-ui/components/Inputs/InputDate.tsx (100%) rename {examples => showcases}/react/src/material-ui/components/Inputs/InputNumber.tsx (100%) rename {examples => showcases}/react/src/material-ui/components/Inputs/InputPhone.tsx (100%) rename {examples => showcases}/react/src/material-ui/components/Inputs/InputSelect.tsx (100%) rename {examples => showcases}/react/src/material-ui/components/Inputs/InputText.tsx (100%) rename {examples => showcases}/react/src/material-ui/components/Inputs/InputTextarea.tsx (100%) rename {examples => showcases}/react/src/material-ui/components/SubmitButton.tsx (100%) rename {examples => showcases}/react/src/material-ui/pages/MaterialFormPage.tsx (100%) rename {examples => showcases}/react/tsconfig.json (100%) rename {examples => showcases}/react/vite.config.ts (100%) diff --git a/README.md b/README.md index f81d500..20d6461 100644 --- a/README.md +++ b/README.md @@ -12,23 +12,23 @@ Framework-agnostic rendering engine for server-driven UI. Build dynamic forms an - ⚡ **Reactive System**: Handle declarative and imperative reactions - 🧩 **Type Safe**: Full TypeScript support -## Examples +## Showcases ### React (Vanilla) ```bash -pnpm --filter examples-react dev +pnpm --filter showcases-react dev # http://localhost:3000 ``` ### React with Material UI ```bash -pnpm --filter examples-react-material-ui dev +pnpm --filter showcases-react-material-ui dev # http://localhost:3001 ``` ### React with Chakra UI ```bash -pnpm --filter examples-react-chakra-ui dev +pnpm --filter showcases-react-chakra-ui dev # http://localhost:3002 ``` @@ -52,7 +52,7 @@ schepta/ │ ├── core/ # Framework-agnostic core logic │ ├── adapters/ # Framework adapters (react, vue, vanilla) │ └── factories/ # Framework factories (react, vue, vanilla) -├── examples/ # Example applications +├── showcases/ # Example applications │ ├── react/ # React vanilla example │ ├── react-material-ui/ # React with Material UI │ └── react-chakra-ui/ # React with Chakra UI diff --git a/docs/.vitepress/components.ts b/docs/.vitepress/components.ts index 3023b5a..5a31702 100644 --- a/docs/.vitepress/components.ts +++ b/docs/.vitepress/components.ts @@ -20,11 +20,11 @@ const ReactWrapper = (Component: any) => { }; export default { - SimpleFormReact: defineAsyncComponent(() => import('../components/examples/SimpleFormReact.vue')), - ComplexFormReact: defineAsyncComponent(() => import('../components/examples/ComplexFormReact.vue')), - SimpleFormVue: defineAsyncComponent(() => import('../components/examples/SimpleFormVue.vue')), - ComplexFormVue: defineAsyncComponent(() => import('../components/examples/ComplexFormVue.vue')), - SimpleFormVuetify: defineAsyncComponent(() => import('../components/examples/SimpleFormVuetify.vue')), - ComplexFormVuetify: defineAsyncComponent(() => import('../components/examples/ComplexFormVuetify.vue')), + SimpleFormReact: defineAsyncComponent(() => import('../components/showcases/SimpleFormReact.vue')), + ComplexFormReact: defineAsyncComponent(() => import('../components/showcases/ComplexFormReact.vue')), + SimpleFormVue: defineAsyncComponent(() => import('../components/showcases/SimpleFormVue.vue')), + ComplexFormVue: defineAsyncComponent(() => import('../components/showcases/ComplexFormVue.vue')), + SimpleFormVuetify: defineAsyncComponent(() => import('../components/showcases/SimpleFormVuetify.vue')), + ComplexFormVuetify: defineAsyncComponent(() => import('../components/showcases/ComplexFormVuetify.vue')), }; diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 402a71d..9ce3ac9 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -27,7 +27,7 @@ export default defineConfig({ { text: 'Home', link: '/en-US/' }, { text: 'Guide', link: '/en-US/guide/quick-start' }, { text: 'Concepts', link: '/en-US/concepts/01-factories' }, - { text: 'Examples', link: '/en-US/examples/react' }, + { text: 'Showcases', link: '/en-US/showcases/react' }, ], sidebar: { '/en-US/guide/': [ @@ -52,15 +52,15 @@ export default defineConfig({ ], }, ], - '/en-US/examples/': [ + '/en-US/showcases/': [ { - text: 'Examples', + text: 'Showcases', items: [ - { text: 'React', link: '/en-US/examples/react' }, - { text: 'React Material UI', link: '/en-US/examples/material-ui' }, - { text: 'React Chakra UI', link: '/en-US/examples/chakra-ui' }, - { text: 'Vue', link: '/en-US/examples/vue' }, - { text: 'Vue Vuetify', link: '/en-US/examples/vuetify' }, + { text: 'React', link: '/en-US/showcases/react' }, + { text: 'React Material UI', link: '/en-US/showcases/material-ui' }, + { text: 'React Chakra UI', link: '/en-US/showcases/chakra-ui' }, + { text: 'Vue', link: '/en-US/showcases/vue' }, + { text: 'Vue Vuetify', link: '/en-US/showcases/vuetify' }, ], }, ], @@ -81,7 +81,7 @@ export default defineConfig({ { text: 'Início', link: '/pt-BR/' }, { text: 'Guia', link: '/pt-BR/guide/quick-start' }, { text: 'Conceitos', link: '/pt-BR/concepts/01-factories' }, - { text: 'Exemplos', link: '/pt-BR/examples/react' }, + { text: 'Exemplos', link: '/pt-BR/showcases/react' }, ], sidebar: { '/pt-BR/guide/': [ @@ -106,15 +106,15 @@ export default defineConfig({ ], }, ], - '/pt-BR/examples/': [ + '/pt-BR/showcases/': [ { text: 'Exemplos', items: [ - { text: 'React', link: '/pt-BR/examples/react' }, - { text: 'React Material UI', link: '/pt-BR/examples/material-ui' }, - { text: 'React Chakra UI', link: '/pt-BR/examples/chakra-ui' }, - { text: 'Vue', link: '/pt-BR/examples/vue' }, - { text: 'Vue Vuetify', link: '/pt-BR/examples/vuetify' }, + { text: 'React', link: '/pt-BR/showcases/react' }, + { text: 'React Material UI', link: '/pt-BR/showcases/material-ui' }, + { text: 'React Chakra UI', link: '/pt-BR/showcases/chakra-ui' }, + { text: 'Vue', link: '/pt-BR/showcases/vue' }, + { text: 'Vue Vuetify', link: '/pt-BR/showcases/vuetify' }, ], }, ], @@ -135,7 +135,7 @@ export default defineConfig({ { text: 'Inicio', link: '/es-ES/' }, { text: 'Guía', link: '/es-ES/guide/quick-start' }, { text: 'Conceptos', link: '/es-ES/concepts/01-factories' }, - { text: 'Ejemplos', link: '/es-ES/examples/react' }, + { text: 'Ejemplos', link: '/es-ES/showcases/react' }, ], sidebar: { '/es-ES/guide/': [ @@ -160,15 +160,15 @@ export default defineConfig({ ], }, ], - '/es-ES/examples/': [ + '/es-ES/showcases/': [ { text: 'Ejemplos', items: [ - { text: 'React', link: '/es-ES/examples/react' }, - { text: 'React Material UI', link: '/es-ES/examples/material-ui' }, - { text: 'React Chakra UI', link: '/es-ES/examples/chakra-ui' }, - { text: 'Vue', link: '/es-ES/examples/vue' }, - { text: 'Vue Vuetify', link: '/es-ES/examples/vuetify' }, + { text: 'React', link: '/es-ES/showcases/react' }, + { text: 'React Material UI', link: '/es-ES/showcases/material-ui' }, + { text: 'React Chakra UI', link: '/es-ES/showcases/chakra-ui' }, + { text: 'Vue', link: '/es-ES/showcases/vue' }, + { text: 'Vue Vuetify', link: '/es-ES/showcases/vuetify' }, ], }, ], diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts index 2954151..c7ef144 100644 --- a/docs/.vitepress/theme/index.ts +++ b/docs/.vitepress/theme/index.ts @@ -7,7 +7,6 @@ import { MotionPlugin } from '@vueuse/motion' export default { ...DefaultTheme, enhanceApp({ app, router }) { - app.component('CodeSandboxEmbed', defineAsyncComponent(() => import('../../components/examples/CodeSandboxEmbed.vue'))); app.component('TerminalIcon', defineAsyncComponent(() => import('lucide-vue-next').then(m => m.Terminal))); app.component('CopyIcon', defineAsyncComponent(() => import('lucide-vue-next').then(m => m.Copy))); app.component('CheckIcon', defineAsyncComponent(() => import('lucide-vue-next').then(m => m.Check))); diff --git a/docs/components/home/ConceptsSection.vue b/docs/components/home/ConceptsSection.vue index 29218ea..6cd5303 100644 --- a/docs/components/home/ConceptsSection.vue +++ b/docs/components/home/ConceptsSection.vue @@ -11,10 +11,10 @@
-

{{ examples.title }}

-

{{ examples.description }}

+

{{ showcases.title }}

+

{{ showcases.description }}

@@ -30,7 +30,7 @@ const { frontmatter } = useData(); const locale = computed(() => frontmatter.value.locale || 'en-US'); const concepts = computed(() => frontmatter.value.concepts || {}); -const examples = computed(() => frontmatter.value.examples || {}); +const showcases = computed(() => frontmatter.value.showcases || {});