Create `@primevue/form` package and add `form` component
Mert Sincan
parent
69d0407fe6
commit
9870b303cf
|
|
@ -0,0 +1 @@
|
||||||
|
# PrimeVue Form
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
{
|
||||||
|
"name": "@primevue/form",
|
||||||
|
"version": "4.1.0",
|
||||||
|
"author": "PrimeTek Informatics",
|
||||||
|
"description": "",
|
||||||
|
"homepage": "https://primevue.org/",
|
||||||
|
"license": "MIT",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://github.com/primefaces/primevue.git",
|
||||||
|
"directory": "packages/form"
|
||||||
|
},
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/primefaces/primevue/issues"
|
||||||
|
},
|
||||||
|
"main": "./src/index.js",
|
||||||
|
"module": "./src/index.js",
|
||||||
|
"types": "./src/index.d.ts",
|
||||||
|
"exports": {
|
||||||
|
".": "./src/index.js",
|
||||||
|
"./form/style": "./src/form/style/FormStyle.js",
|
||||||
|
"./form": "./src/form/Form.vue",
|
||||||
|
"./*": "./src/*/index.js"
|
||||||
|
},
|
||||||
|
"publishConfig": {
|
||||||
|
"main": "./index.mjs",
|
||||||
|
"module": "./index.mjs",
|
||||||
|
"types": "./index.d.ts",
|
||||||
|
"exports": {
|
||||||
|
".": {
|
||||||
|
"types": "./index.d.ts",
|
||||||
|
"import": "./index.mjs"
|
||||||
|
},
|
||||||
|
"./*": {
|
||||||
|
"types": "./*/index.d.ts",
|
||||||
|
"import": "./*/index.mjs"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"directory": "dist",
|
||||||
|
"linkDirectory": false,
|
||||||
|
"access": "public"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"build": "NODE_ENV=production INPUT_DIR=src/ OUTPUT_DIR=dist/ pnpm run build:package",
|
||||||
|
"build:package": "pnpm run build:prebuild && rollup -c && pnpm run build:postbuild",
|
||||||
|
"build:prebuild": "node ./scripts/prebuild.mjs",
|
||||||
|
"build:postbuild": "node ./scripts/postbuild.mjs",
|
||||||
|
"dev:link": "pnpm link --global && npm link"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@primeuix/utils": "catalog:",
|
||||||
|
"@primeuix/form": "catalog:",
|
||||||
|
"@primevue/core": "workspace:*"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=12.11.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,201 @@
|
||||||
|
import alias from '@rollup/plugin-alias';
|
||||||
|
import { babel } from '@rollup/plugin-babel';
|
||||||
|
import resolve from '@rollup/plugin-node-resolve';
|
||||||
|
import terser from '@rollup/plugin-terser';
|
||||||
|
import postcss from 'rollup-plugin-postcss';
|
||||||
|
import vue from 'rollup-plugin-vue';
|
||||||
|
|
||||||
|
import fs from 'fs-extra';
|
||||||
|
import path, { dirname } from 'path';
|
||||||
|
import { fileURLToPath } from 'url';
|
||||||
|
|
||||||
|
// @todo - Remove
|
||||||
|
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||||
|
|
||||||
|
// globals
|
||||||
|
const GLOBALS = {
|
||||||
|
vue: 'Vue'
|
||||||
|
};
|
||||||
|
|
||||||
|
// externals
|
||||||
|
const GLOBAL_EXTERNALS = ['vue'];
|
||||||
|
const INLINE_EXTERNALS = [/@primevue\/core\/.*/];
|
||||||
|
const EXTERNALS = [...GLOBAL_EXTERNALS, ...INLINE_EXTERNALS];
|
||||||
|
|
||||||
|
// alias
|
||||||
|
const ALIAS_ENTRIES = [
|
||||||
|
{
|
||||||
|
find: /^@primevue\/icons\/(.*)$/,
|
||||||
|
replacement: path.resolve(__dirname, './src/$1/index.vue')
|
||||||
|
},
|
||||||
|
{ find: '@primevue/icons/baseicon/style', replacement: path.resolve(__dirname, './src/baseicon/style/BaseIconStyle.js') },
|
||||||
|
{ find: '@primevue/icons/baseicon', replacement: path.resolve(__dirname, './src/baseicon/BaseIcon.vue') }
|
||||||
|
];
|
||||||
|
|
||||||
|
// plugins
|
||||||
|
const BABEL_PLUGIN_OPTIONS = {
|
||||||
|
extensions: ['.js', '.vue'],
|
||||||
|
exclude: 'node_modules/**',
|
||||||
|
presets: ['@babel/preset-env'],
|
||||||
|
plugins: [],
|
||||||
|
skipPreflightCheck: true,
|
||||||
|
babelHelpers: 'runtime',
|
||||||
|
babelrc: false
|
||||||
|
};
|
||||||
|
|
||||||
|
const ALIAS_PLUGIN_OPTIONS = {
|
||||||
|
entries: ALIAS_ENTRIES
|
||||||
|
};
|
||||||
|
|
||||||
|
const POSTCSS_PLUGIN_OPTIONS = {
|
||||||
|
sourceMap: false
|
||||||
|
};
|
||||||
|
|
||||||
|
const TERSER_PLUGIN_OPTIONS = {
|
||||||
|
compress: {
|
||||||
|
keep_infinity: true,
|
||||||
|
pure_getters: true,
|
||||||
|
reduce_funcs: true
|
||||||
|
},
|
||||||
|
mangle: {
|
||||||
|
reserved: ['theme', 'css']
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const PLUGINS = [vue(), postcss(POSTCSS_PLUGIN_OPTIONS), babel(BABEL_PLUGIN_OPTIONS)];
|
||||||
|
|
||||||
|
const ENTRY = {
|
||||||
|
entries: [],
|
||||||
|
onwarn(warning) {
|
||||||
|
if (warning.code === 'CIRCULAR_DEPENDENCY') {
|
||||||
|
//console.error(`(!) ${warning.message}`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
format: {
|
||||||
|
cjs_es(options) {
|
||||||
|
return ENTRY.format.cjs(options).es(options);
|
||||||
|
},
|
||||||
|
cjs({ input, output, minify }) {
|
||||||
|
ENTRY.entries.push({
|
||||||
|
onwarn: ENTRY.onwarn,
|
||||||
|
input,
|
||||||
|
plugins: [...PLUGINS, minify && terser(TERSER_PLUGIN_OPTIONS)],
|
||||||
|
external: EXTERNALS,
|
||||||
|
inlineDynamicImports: true,
|
||||||
|
output: [
|
||||||
|
{
|
||||||
|
format: 'cjs',
|
||||||
|
file: `${output}${minify ? '.min' : ''}.cjs`,
|
||||||
|
sourcemap: true,
|
||||||
|
exports: 'auto'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
ENTRY.update.packageJson({ input, output, options: { main: `${output}.cjs` } });
|
||||||
|
|
||||||
|
return ENTRY.format;
|
||||||
|
},
|
||||||
|
es({ input, output, minify }) {
|
||||||
|
ENTRY.entries.push({
|
||||||
|
onwarn: ENTRY.onwarn,
|
||||||
|
input,
|
||||||
|
plugins: [...PLUGINS, minify && terser(TERSER_PLUGIN_OPTIONS)],
|
||||||
|
external: EXTERNALS,
|
||||||
|
inlineDynamicImports: true,
|
||||||
|
output: [
|
||||||
|
{
|
||||||
|
format: 'es',
|
||||||
|
file: `${output}${minify ? '.min' : ''}.mjs`,
|
||||||
|
sourcemap: true,
|
||||||
|
exports: 'auto'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
ENTRY.update.packageJson({ input, output, options: { main: `${output}.mjs`, module: `${output}.mjs` } });
|
||||||
|
|
||||||
|
return ENTRY.format;
|
||||||
|
},
|
||||||
|
umd({ name, input, output, minify }) {
|
||||||
|
ENTRY.entries.push({
|
||||||
|
onwarn: ENTRY.onwarn,
|
||||||
|
input,
|
||||||
|
plugins: [alias(ALIAS_PLUGIN_OPTIONS), resolve(), ...PLUGINS, minify && terser(TERSER_PLUGIN_OPTIONS)],
|
||||||
|
external: GLOBAL_EXTERNALS,
|
||||||
|
inlineDynamicImports: true,
|
||||||
|
output: [
|
||||||
|
{
|
||||||
|
format: 'umd',
|
||||||
|
name: name ?? 'PrimeVue',
|
||||||
|
file: `${output}${minify ? '.min' : ''}.js`,
|
||||||
|
globals: GLOBALS,
|
||||||
|
exports: 'auto'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
return ENTRY.format;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
update: {
|
||||||
|
packageJson({ input, output, options }) {
|
||||||
|
try {
|
||||||
|
const inputDir = path.resolve(__dirname, path.dirname(input));
|
||||||
|
const outputDir = path.resolve(__dirname, path.dirname(output));
|
||||||
|
const packageJson = path.resolve(outputDir, 'package.json');
|
||||||
|
|
||||||
|
!fs.existsSync(packageJson) && fs.copySync(path.resolve(inputDir, './package.json'), packageJson);
|
||||||
|
|
||||||
|
const pkg = JSON.parse(fs.readFileSync(packageJson, { encoding: 'utf8', flag: 'r' }));
|
||||||
|
|
||||||
|
!pkg?.main?.includes('.cjs') && (pkg.main = path.basename(options?.main) ? `./${path.basename(options.main)}` : pkg.main);
|
||||||
|
pkg.module = path.basename(options?.module) ? `./${path.basename(options.module)}` : packageJson.module;
|
||||||
|
pkg.types && (pkg.types = './index.d.ts');
|
||||||
|
|
||||||
|
fs.writeFileSync(packageJson, JSON.stringify(pkg, null, 4));
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function addIcons() {
|
||||||
|
const iconDir = path.resolve(__dirname, process.env.INPUT_DIR);
|
||||||
|
|
||||||
|
fs.readdirSync(path.resolve(__dirname, iconDir), { withFileTypes: true })
|
||||||
|
.filter((dir) => dir.isDirectory())
|
||||||
|
.forEach(({ name: folderName }) => {
|
||||||
|
fs.readdirSync(path.resolve(__dirname, iconDir + '/' + folderName)).forEach((file) => {
|
||||||
|
if (/\.vue$/.test(file)) {
|
||||||
|
const input = process.env.INPUT_DIR + folderName + '/' + file;
|
||||||
|
const output = process.env.OUTPUT_DIR + folderName + '/index';
|
||||||
|
|
||||||
|
ENTRY.format.es({ input, output });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function addStyle() {
|
||||||
|
fs.readdirSync(path.resolve(__dirname, process.env.INPUT_DIR), { withFileTypes: true })
|
||||||
|
.filter((dir) => dir.isDirectory())
|
||||||
|
.forEach(({ name: folderName }) => {
|
||||||
|
try {
|
||||||
|
fs.readdirSync(path.resolve(__dirname, process.env.INPUT_DIR + folderName + '/style')).forEach((file) => {
|
||||||
|
if (/\.js$/.test(file)) {
|
||||||
|
const name = file.split(/(.js)$/)[0].toLowerCase();
|
||||||
|
const input = process.env.INPUT_DIR + folderName + '/style/' + file;
|
||||||
|
const output = process.env.OUTPUT_DIR + folderName + '/style/index';
|
||||||
|
|
||||||
|
ENTRY.format.es({ input, output });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} catch {}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
addIcons();
|
||||||
|
addStyle();
|
||||||
|
|
||||||
|
export default ENTRY.entries;
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
import fs from 'fs-extra';
|
||||||
|
import path from 'path';
|
||||||
|
import { clearPackageJson, copyDependencies, renameDTSFile, resolvePath } from '../../../scripts/build-helper.mjs';
|
||||||
|
|
||||||
|
const { __dirname, __workspace, INPUT_DIR, OUTPUT_DIR } = resolvePath(import.meta.url);
|
||||||
|
|
||||||
|
copyDependencies(INPUT_DIR, OUTPUT_DIR, '/style');
|
||||||
|
renameDTSFile(OUTPUT_DIR, 'index');
|
||||||
|
|
||||||
|
fs.copySync(path.resolve(__dirname, '../package.json'), `${OUTPUT_DIR}/package.json`);
|
||||||
|
fs.copySync(path.resolve(__dirname, '../README.md'), `${OUTPUT_DIR}/README.md`);
|
||||||
|
fs.copySync(path.resolve(__workspace, './LICENSE.md'), `${OUTPUT_DIR}/LICENSE.md`);
|
||||||
|
|
||||||
|
clearPackageJson(path.resolve(__dirname, `../${OUTPUT_DIR}/package.json`));
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
import path from 'path';
|
||||||
|
import { removeBuild, resolvePath, updatePackageJson } from '../../../scripts/build-helper.mjs';
|
||||||
|
|
||||||
|
removeBuild(import.meta.url);
|
||||||
|
updatePackageJson(path.resolve(resolvePath(import.meta.url).__dirname, '../package.json'));
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
<script>
|
||||||
|
import BaseComponent from '@primevue/core/basecomponent';
|
||||||
|
import FormStyle from '@primevue/form/form/style';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'BaseForm',
|
||||||
|
extends: BaseComponent,
|
||||||
|
style: FormStyle,
|
||||||
|
props: {
|
||||||
|
resolver: {
|
||||||
|
type: Function,
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
defaultValues: {
|
||||||
|
type: Object,
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
validateOnValueUpdate: {
|
||||||
|
type: [Boolean, Array],
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
validateOnBlur: {
|
||||||
|
type: [Boolean, Array],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
validateOnMount: {
|
||||||
|
type: [Boolean, Array],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
validateOnSubmit: {
|
||||||
|
type: [Boolean, Array],
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
provide() {
|
||||||
|
return {
|
||||||
|
$pcForm: this,
|
||||||
|
$parentInstance: this
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,130 @@
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* Fluid is a layout component to make descendant components span full width of their container.
|
||||||
|
*
|
||||||
|
* [Live Demo](https://www.primevue.org/fluid/)
|
||||||
|
*
|
||||||
|
* @module fluid
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
import type { DefineComponent, DesignToken, EmitFn, PassThrough } from '@primevue/core';
|
||||||
|
import type { ComponentHooks } from '@primevue/core/basecomponent';
|
||||||
|
import type { PassThroughOptions } from 'primevue/passthrough';
|
||||||
|
import { TransitionProps, VNode } from 'vue';
|
||||||
|
|
||||||
|
export declare type FluidPassThroughOptionType = FluidPassThroughAttributes | ((options: FluidPassThroughMethodOptions) => FluidPassThroughAttributes | string) | string | null | undefined;
|
||||||
|
|
||||||
|
export declare type FluidPassThroughTransitionType = TransitionProps | ((options: FluidPassThroughMethodOptions) => TransitionProps) | undefined;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Custom passthrough(pt) option method.
|
||||||
|
*/
|
||||||
|
export interface FluidPassThroughMethodOptions {
|
||||||
|
/**
|
||||||
|
* Defines instance.
|
||||||
|
*/
|
||||||
|
instance: any;
|
||||||
|
/**
|
||||||
|
* Defines valid properties.
|
||||||
|
*/
|
||||||
|
props: FluidProps;
|
||||||
|
/**
|
||||||
|
* Defines valid attributes.
|
||||||
|
*/
|
||||||
|
attrs: any;
|
||||||
|
/**
|
||||||
|
* Defines parent options.
|
||||||
|
*/
|
||||||
|
parent: any;
|
||||||
|
/**
|
||||||
|
* Defines passthrough(pt) options in global config.
|
||||||
|
*/
|
||||||
|
global: object | undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Custom passthrough(pt) options.
|
||||||
|
* @see {@link FluidProps.pt}
|
||||||
|
*/
|
||||||
|
export interface FluidPassThroughOptions {
|
||||||
|
/**
|
||||||
|
* Used to pass attributes to the root's DOM element.
|
||||||
|
*/
|
||||||
|
root?: FluidPassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Used to manage all lifecycle hooks.
|
||||||
|
* @see {@link BaseComponent.ComponentHooks}
|
||||||
|
*/
|
||||||
|
hooks?: ComponentHooks;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Custom passthrough attributes for each DOM elements
|
||||||
|
*/
|
||||||
|
export interface FluidPassThroughAttributes {
|
||||||
|
[key: string]: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defines valid properties in Fluid component.
|
||||||
|
*/
|
||||||
|
export interface FluidProps {
|
||||||
|
/**
|
||||||
|
* It generates scoped CSS variables using design tokens for the component.
|
||||||
|
*/
|
||||||
|
dt?: DesignToken<any>;
|
||||||
|
/**
|
||||||
|
* Used to pass attributes to DOM elements inside the component.
|
||||||
|
* @type {FluidPassThroughOptions}
|
||||||
|
*/
|
||||||
|
pt?: PassThrough<FluidPassThroughOptions>;
|
||||||
|
/**
|
||||||
|
* Used to configure passthrough(pt) options of the component.
|
||||||
|
* @type {PassThroughOptions}
|
||||||
|
*/
|
||||||
|
ptOptions?: PassThroughOptions;
|
||||||
|
/**
|
||||||
|
* When enabled, it removes component related styles in the core.
|
||||||
|
* @defaultValue false
|
||||||
|
*/
|
||||||
|
unstyled?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defines valid slots in Fluid component.
|
||||||
|
*/
|
||||||
|
export interface FluidSlots {
|
||||||
|
/**
|
||||||
|
* Default content slot.
|
||||||
|
*/
|
||||||
|
default: () => VNode[];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defines valid emits in Fluid component.
|
||||||
|
*/
|
||||||
|
export interface FluidEmitsOptions {}
|
||||||
|
|
||||||
|
export declare type FluidEmits = EmitFn<FluidEmitsOptions>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* **PrimeVue - Fluid**
|
||||||
|
*
|
||||||
|
* _Fluid is a layout component to make descendant components span full width of their container._
|
||||||
|
*
|
||||||
|
* [Live Demo](https://www.primevue.org/fluid/)
|
||||||
|
* --- ---
|
||||||
|
* 
|
||||||
|
*
|
||||||
|
* @group Component
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
declare const Fluid: DefineComponent<FluidProps, FluidSlots, FluidEmits>;
|
||||||
|
|
||||||
|
declare module 'vue' {
|
||||||
|
export interface GlobalComponents {
|
||||||
|
Fluid: DefineComponent<FluidProps, FluidSlots, FluidEmits>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Fluid;
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
<template>
|
||||||
|
<form @submit.prevent="onSubmit" v-bind="ptmi('root')">
|
||||||
|
<slot :register :valid v-bind="states" />
|
||||||
|
</form>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { omit } from '@primeuix/utils';
|
||||||
|
import { useForm } from '@primevue/form/useform';
|
||||||
|
import BaseForm from './BaseForm.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Form',
|
||||||
|
extends: BaseForm,
|
||||||
|
inheritAttrs: false,
|
||||||
|
emits: ['submit'],
|
||||||
|
setup(props, { emit }) {
|
||||||
|
const $form = useForm(props);
|
||||||
|
|
||||||
|
const register = (field, options) => {
|
||||||
|
const [, fieldProps] = $form.defineField(field, options);
|
||||||
|
|
||||||
|
return fieldProps;
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSubmit = $form.handleSubmit((e) => {
|
||||||
|
emit('submit', e);
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
register,
|
||||||
|
onSubmit,
|
||||||
|
...omit($form, ['defineField', 'handleSubmit'])
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"main": "./Form.vue",
|
||||||
|
"module": "./Form.vue",
|
||||||
|
"types": "./Form.d.ts",
|
||||||
|
"browser": {
|
||||||
|
"./sfc": "./Form.vue"
|
||||||
|
},
|
||||||
|
"sideEffects": [
|
||||||
|
"*.vue"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
*
|
||||||
|
*
|
||||||
|
* [Live Demo](https://www.primevue.org/form/)
|
||||||
|
*
|
||||||
|
* @module formstyle
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
import type { BaseStyle } from '@primevue/core/base/style';
|
||||||
|
|
||||||
|
export interface FormStyle extends BaseStyle {}
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
import BaseStyle from '@primevue/core/base/style';
|
||||||
|
|
||||||
|
export default BaseStyle.extend({
|
||||||
|
name: 'form'
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
{
|
||||||
|
"main": "./FormStyle.js",
|
||||||
|
"module": "./FormStyle.js",
|
||||||
|
"types": "./FormStyle.d.ts",
|
||||||
|
"sideEffects": false
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
export { default as Form } from '@primevue/form/form';
|
||||||
|
export * from '@primevue/form/resolvers';
|
||||||
|
export * from '@primevue/form/useform';
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
export * from '@primeuix/form/resolvers';
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"main": "./index.js",
|
||||||
|
"module": "./index.js"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,121 @@
|
||||||
|
import { resolve } from '@primeuix/utils';
|
||||||
|
import { computed, mergeProps, nextTick, onMounted, reactive, toValue, watch } from 'vue';
|
||||||
|
|
||||||
|
function tryOnMounted(fn, sync = true) {
|
||||||
|
if (getCurrentInstance()) onMounted(fn);
|
||||||
|
else if (sync) fn();
|
||||||
|
else nextTick(fn);
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useForm = (options = {}) => {
|
||||||
|
const states = reactive({});
|
||||||
|
const valid = computed(() => Object.values(states).every((field) => !field.invalid));
|
||||||
|
|
||||||
|
const getInitialState = (field) => {
|
||||||
|
return {
|
||||||
|
value: options.defaultValues?.[field],
|
||||||
|
touched: false,
|
||||||
|
dirty: false,
|
||||||
|
pristine: true,
|
||||||
|
valid: true,
|
||||||
|
invalid: false,
|
||||||
|
errors: []
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const isFieldValidate = (field, validateOn) => {
|
||||||
|
const value = resolve(validateOn, field);
|
||||||
|
|
||||||
|
return value === true || (Array.isArray(value) && value.includes(field));
|
||||||
|
};
|
||||||
|
|
||||||
|
const defineField = (field, fieldOptions) => {
|
||||||
|
states[field] ||= getInitialState(field);
|
||||||
|
|
||||||
|
const props = mergeProps(resolve(fieldOptions, states[field])?.props, resolve(fieldOptions?.props, states[field]), {
|
||||||
|
name: field,
|
||||||
|
onBlur: () => {
|
||||||
|
states[field].touched = true;
|
||||||
|
(fieldOptions?.validateOnBlur ?? isFieldValidate(field, options.validateOnBlur)) && validate(field);
|
||||||
|
},
|
||||||
|
onChange: (event) => {
|
||||||
|
states[field].value = event.hasOwnProperty('value') ? event.value : event.target.type === 'checkbox' || event.target.type === 'radio' ? event.target.checked : event.target.value;
|
||||||
|
},
|
||||||
|
onInvalid: (errors) => {
|
||||||
|
states[field].invalid = true;
|
||||||
|
states[field].errors = errors;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => states[field].value,
|
||||||
|
(newValue, oldValue) => {
|
||||||
|
if (states[field].pristine) {
|
||||||
|
states[field].pristine = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (newValue !== oldValue) {
|
||||||
|
states[field].dirty = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
(fieldOptions?.validateOnBlur ?? isFieldValidate(field, options.validateOnValueUpdate ?? true)) && validate(field);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
return [states[field], props];
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (callback) => {
|
||||||
|
return async (event) => {
|
||||||
|
let results = undefined;
|
||||||
|
|
||||||
|
(options.validateOnSubmit ?? true) && (results = await validate());
|
||||||
|
|
||||||
|
return callback({
|
||||||
|
originalEvent: event,
|
||||||
|
valid: toValue(valid),
|
||||||
|
states: toValue(states),
|
||||||
|
...results
|
||||||
|
});
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const validate = async (field) => {
|
||||||
|
const values = Object.entries(states).reduce((acc, [key, val]) => {
|
||||||
|
acc[key] = val.value;
|
||||||
|
|
||||||
|
return acc;
|
||||||
|
}, {});
|
||||||
|
|
||||||
|
const result = (await options.resolver?.({ values })) ?? {};
|
||||||
|
|
||||||
|
for (const sField of Object.keys(states)) {
|
||||||
|
if (sField === field || !field) {
|
||||||
|
const errors = result.errors?.[sField] ?? [];
|
||||||
|
const value = result.values?.[sField] ?? states[sField].value;
|
||||||
|
|
||||||
|
states[sField].invalid = errors.length > 0;
|
||||||
|
states[sField].valid = !states[sField].invalid;
|
||||||
|
states[sField].errors = errors;
|
||||||
|
states[sField].value = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
const reset = () => {
|
||||||
|
Object.keys(states).forEach((field) => (states[field] = getInitialState(field)));
|
||||||
|
};
|
||||||
|
|
||||||
|
options.validateOnMount && tryOnMounted(validate);
|
||||||
|
|
||||||
|
return {
|
||||||
|
defineField,
|
||||||
|
handleSubmit,
|
||||||
|
validate,
|
||||||
|
reset,
|
||||||
|
valid: toValue(valid),
|
||||||
|
states: toValue(states)
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"main": "./index.js",
|
||||||
|
"module": "./index.js"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": false,
|
||||||
|
"strict": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": false,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"incremental": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@primevue/form/*": ["./src/*"],
|
||||||
|
"@primevue/core/*": ["../../packages/core/src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["**/*.ts", "src/*"],
|
||||||
|
"exclude": ["node_modules", "dist"]
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue