From 9870b303cfe60e0d20fb9bbc5befc6fb1435b1b9 Mon Sep 17 00:00:00 2001 From: Mert Sincan Date: Fri, 18 Oct 2024 15:48:40 +0100 Subject: [PATCH 001/117] Create `@primevue/form` package and add `form` component --- packages/form/README.md | 1 + packages/form/package.json | 58 ++++++ packages/form/rollup.config.mjs | 201 ++++++++++++++++++++ packages/form/scripts/postbuild.mjs | 14 ++ packages/form/scripts/prebuild.mjs | 5 + packages/form/src/form/BaseForm.vue | 42 ++++ packages/form/src/form/Form.d.ts | 130 +++++++++++++ packages/form/src/form/Form.vue | 37 ++++ packages/form/src/form/package.json | 11 ++ packages/form/src/form/style/FormStyle.d.ts | 12 ++ packages/form/src/form/style/FormStyle.js | 5 + packages/form/src/form/style/package.json | 6 + packages/form/src/index.d.ts | 0 packages/form/src/index.js | 3 + packages/form/src/resolvers/index.js | 1 + packages/form/src/resolvers/package.json | 4 + packages/form/src/useform/index.js | 121 ++++++++++++ packages/form/src/useform/package.json | 4 + packages/form/tsconfig.json | 25 +++ 19 files changed, 680 insertions(+) create mode 100644 packages/form/README.md create mode 100644 packages/form/package.json create mode 100644 packages/form/rollup.config.mjs create mode 100644 packages/form/scripts/postbuild.mjs create mode 100644 packages/form/scripts/prebuild.mjs create mode 100644 packages/form/src/form/BaseForm.vue create mode 100644 packages/form/src/form/Form.d.ts create mode 100644 packages/form/src/form/Form.vue create mode 100644 packages/form/src/form/package.json create mode 100644 packages/form/src/form/style/FormStyle.d.ts create mode 100644 packages/form/src/form/style/FormStyle.js create mode 100644 packages/form/src/form/style/package.json create mode 100644 packages/form/src/index.d.ts create mode 100644 packages/form/src/index.js create mode 100644 packages/form/src/resolvers/index.js create mode 100644 packages/form/src/resolvers/package.json create mode 100644 packages/form/src/useform/index.js create mode 100644 packages/form/src/useform/package.json create mode 100644 packages/form/tsconfig.json diff --git a/packages/form/README.md b/packages/form/README.md new file mode 100644 index 000000000..3848b9012 --- /dev/null +++ b/packages/form/README.md @@ -0,0 +1 @@ +# PrimeVue Form diff --git a/packages/form/package.json b/packages/form/package.json new file mode 100644 index 000000000..ce886d0ad --- /dev/null +++ b/packages/form/package.json @@ -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" + } +} diff --git a/packages/form/rollup.config.mjs b/packages/form/rollup.config.mjs new file mode 100644 index 000000000..a08826f70 --- /dev/null +++ b/packages/form/rollup.config.mjs @@ -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; diff --git a/packages/form/scripts/postbuild.mjs b/packages/form/scripts/postbuild.mjs new file mode 100644 index 000000000..6ba562151 --- /dev/null +++ b/packages/form/scripts/postbuild.mjs @@ -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`)); diff --git a/packages/form/scripts/prebuild.mjs b/packages/form/scripts/prebuild.mjs new file mode 100644 index 000000000..e8449e469 --- /dev/null +++ b/packages/form/scripts/prebuild.mjs @@ -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')); diff --git a/packages/form/src/form/BaseForm.vue b/packages/form/src/form/BaseForm.vue new file mode 100644 index 000000000..3112e2091 --- /dev/null +++ b/packages/form/src/form/BaseForm.vue @@ -0,0 +1,42 @@ + diff --git a/packages/form/src/form/Form.d.ts b/packages/form/src/form/Form.d.ts new file mode 100644 index 000000000..41590557d --- /dev/null +++ b/packages/form/src/form/Form.d.ts @@ -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; + /** + * Used to pass attributes to DOM elements inside the component. + * @type {FluidPassThroughOptions} + */ + pt?: PassThrough; + /** + * 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; + +/** + * **PrimeVue - Fluid** + * + * _Fluid is a layout component to make descendant components span full width of their container._ + * + * [Live Demo](https://www.primevue.org/fluid/) + * --- --- + * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) + * + * @group Component + * + */ +declare const Fluid: DefineComponent; + +declare module 'vue' { + export interface GlobalComponents { + Fluid: DefineComponent; + } +} + +export default Fluid; diff --git a/packages/form/src/form/Form.vue b/packages/form/src/form/Form.vue new file mode 100644 index 000000000..819f13e0e --- /dev/null +++ b/packages/form/src/form/Form.vue @@ -0,0 +1,37 @@ + + + diff --git a/packages/form/src/form/package.json b/packages/form/src/form/package.json new file mode 100644 index 000000000..1c8ef855d --- /dev/null +++ b/packages/form/src/form/package.json @@ -0,0 +1,11 @@ +{ + "main": "./Form.vue", + "module": "./Form.vue", + "types": "./Form.d.ts", + "browser": { + "./sfc": "./Form.vue" + }, + "sideEffects": [ + "*.vue" + ] +} diff --git a/packages/form/src/form/style/FormStyle.d.ts b/packages/form/src/form/style/FormStyle.d.ts new file mode 100644 index 000000000..9ae1b3400 --- /dev/null +++ b/packages/form/src/form/style/FormStyle.d.ts @@ -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 {} diff --git a/packages/form/src/form/style/FormStyle.js b/packages/form/src/form/style/FormStyle.js new file mode 100644 index 000000000..4f5dbdfc8 --- /dev/null +++ b/packages/form/src/form/style/FormStyle.js @@ -0,0 +1,5 @@ +import BaseStyle from '@primevue/core/base/style'; + +export default BaseStyle.extend({ + name: 'form' +}); diff --git a/packages/form/src/form/style/package.json b/packages/form/src/form/style/package.json new file mode 100644 index 000000000..31fe6b840 --- /dev/null +++ b/packages/form/src/form/style/package.json @@ -0,0 +1,6 @@ +{ + "main": "./FormStyle.js", + "module": "./FormStyle.js", + "types": "./FormStyle.d.ts", + "sideEffects": false +} diff --git a/packages/form/src/index.d.ts b/packages/form/src/index.d.ts new file mode 100644 index 000000000..e69de29bb diff --git a/packages/form/src/index.js b/packages/form/src/index.js new file mode 100644 index 000000000..7e19301ce --- /dev/null +++ b/packages/form/src/index.js @@ -0,0 +1,3 @@ +export { default as Form } from '@primevue/form/form'; +export * from '@primevue/form/resolvers'; +export * from '@primevue/form/useform'; diff --git a/packages/form/src/resolvers/index.js b/packages/form/src/resolvers/index.js new file mode 100644 index 000000000..17e6c1b9c --- /dev/null +++ b/packages/form/src/resolvers/index.js @@ -0,0 +1 @@ +export * from '@primeuix/form/resolvers'; diff --git a/packages/form/src/resolvers/package.json b/packages/form/src/resolvers/package.json new file mode 100644 index 000000000..7604ba623 --- /dev/null +++ b/packages/form/src/resolvers/package.json @@ -0,0 +1,4 @@ +{ + "main": "./index.js", + "module": "./index.js" +} diff --git a/packages/form/src/useform/index.js b/packages/form/src/useform/index.js new file mode 100644 index 000000000..920ea0f7f --- /dev/null +++ b/packages/form/src/useform/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) + }; +}; diff --git a/packages/form/src/useform/package.json b/packages/form/src/useform/package.json new file mode 100644 index 000000000..7604ba623 --- /dev/null +++ b/packages/form/src/useform/package.json @@ -0,0 +1,4 @@ +{ + "main": "./index.js", + "module": "./index.js" +} diff --git a/packages/form/tsconfig.json b/packages/form/tsconfig.json new file mode 100644 index 000000000..8a364744c --- /dev/null +++ b/packages/form/tsconfig.json @@ -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"] +} From 3ec43eda0b73ceaa2ebd95ffce009108d815debf Mon Sep 17 00:00:00 2001 From: Mert Sincan Date: Fri, 18 Oct 2024 15:50:18 +0100 Subject: [PATCH 002/117] Add new base structures to core --- packages/core/package.json | 4 +- .../BaseEditableHolder.d.ts | 30 ++++++ .../baseeditableholder/BaseEditableHolder.vue | 94 +++++++++++++++++++ .../core/src/baseeditableholder/package.json | 11 +++ packages/core/src/baseinput/BaseInput.d.ts | 30 ++++++ packages/core/src/baseinput/BaseInput.vue | 42 +++++++++ packages/core/src/baseinput/package.json | 11 +++ pnpm-workspace.yaml | 1 + 8 files changed, 222 insertions(+), 1 deletion(-) create mode 100644 packages/core/src/baseeditableholder/BaseEditableHolder.d.ts create mode 100644 packages/core/src/baseeditableholder/BaseEditableHolder.vue create mode 100644 packages/core/src/baseeditableholder/package.json create mode 100644 packages/core/src/baseinput/BaseInput.d.ts create mode 100644 packages/core/src/baseinput/BaseInput.vue create mode 100644 packages/core/src/baseinput/package.json diff --git a/packages/core/package.json b/packages/core/package.json index 627e77105..956ec7730 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -22,6 +22,8 @@ "./basecomponent/style": "./src/basecomponent/style/BaseComponentStyle.js", "./basecomponent": "./src/basecomponent/BaseComponent.vue", "./basedirective": "./src/basedirective/BaseDirective.js", + "./baseeditableholder": "./src/baseeditableholder/BaseEditableHolder.vue", + "./baseinput": "./src/baseinput/BaseInput.vue", "./config": "./src/config/PrimeVue.js", "./service": "./src/service/PrimeVueService.js", "./usestyle": "./src/usestyle/UseStyle.js", @@ -61,4 +63,4 @@ "engines": { "node": ">=12.11.0" } -} \ No newline at end of file +} diff --git a/packages/core/src/baseeditableholder/BaseEditableHolder.d.ts b/packages/core/src/baseeditableholder/BaseEditableHolder.d.ts new file mode 100644 index 000000000..2a42d0d4b --- /dev/null +++ b/packages/core/src/baseeditableholder/BaseEditableHolder.d.ts @@ -0,0 +1,30 @@ +/** + * + * [Live Demo](https://primevue.org/) + * + * @module basecomponent + * + */ +export interface ComponentHooks { + onBeforeCreate?(): void; + onCreated?(): void; + onBeforeMount?(): void; + onMounted?(): void; + onBeforeUpdate?(): void; + onUpdated?(): void; + onBeforeUnmount?(): void; + onUnmounted?(): void; +} + +export interface BaseComponentPassThroughOptions { + hooks?: ComponentHooks; +} + +/** + * @todo Update all d.ts with it. + */ +export interface BaseComponentPassThroughMethodOptions { + instance?: I | undefined | null; + props?: P | undefined | null; + state?: S | undefined | null; +} diff --git a/packages/core/src/baseeditableholder/BaseEditableHolder.vue b/packages/core/src/baseeditableholder/BaseEditableHolder.vue new file mode 100644 index 000000000..787aedbf9 --- /dev/null +++ b/packages/core/src/baseeditableholder/BaseEditableHolder.vue @@ -0,0 +1,94 @@ + diff --git a/packages/core/src/baseeditableholder/package.json b/packages/core/src/baseeditableholder/package.json new file mode 100644 index 000000000..9cf468b25 --- /dev/null +++ b/packages/core/src/baseeditableholder/package.json @@ -0,0 +1,11 @@ +{ + "main": "./BaseEditableHolder.vue", + "module": "./BaseEditableHolder.vue", + "types": "./BaseEditableHolder.d.ts", + "browser": { + "./sfc": "./BaseEditableHolder.vue" + }, + "sideEffects": [ + "*.vue" + ] +} diff --git a/packages/core/src/baseinput/BaseInput.d.ts b/packages/core/src/baseinput/BaseInput.d.ts new file mode 100644 index 000000000..2a42d0d4b --- /dev/null +++ b/packages/core/src/baseinput/BaseInput.d.ts @@ -0,0 +1,30 @@ +/** + * + * [Live Demo](https://primevue.org/) + * + * @module basecomponent + * + */ +export interface ComponentHooks { + onBeforeCreate?(): void; + onCreated?(): void; + onBeforeMount?(): void; + onMounted?(): void; + onBeforeUpdate?(): void; + onUpdated?(): void; + onBeforeUnmount?(): void; + onUnmounted?(): void; +} + +export interface BaseComponentPassThroughOptions { + hooks?: ComponentHooks; +} + +/** + * @todo Update all d.ts with it. + */ +export interface BaseComponentPassThroughMethodOptions { + instance?: I | undefined | null; + props?: P | undefined | null; + state?: S | undefined | null; +} diff --git a/packages/core/src/baseinput/BaseInput.vue b/packages/core/src/baseinput/BaseInput.vue new file mode 100644 index 000000000..aa68859a3 --- /dev/null +++ b/packages/core/src/baseinput/BaseInput.vue @@ -0,0 +1,42 @@ + diff --git a/packages/core/src/baseinput/package.json b/packages/core/src/baseinput/package.json new file mode 100644 index 000000000..ff1cf8b62 --- /dev/null +++ b/packages/core/src/baseinput/package.json @@ -0,0 +1,11 @@ +{ + "main": "./BaseInput.vue", + "module": "./BaseInput.vue", + "types": "./BaseInput.d.ts", + "browser": { + "./sfc": "./BaseInput.vue" + }, + "sideEffects": [ + "*.vue" + ] +} diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 01a3e3d3b..21c996683 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -5,3 +5,4 @@ packages: catalog: '@primeuix/styled': ^0.2.0 '@primeuix/utils': ^0.2.0 + '@primeuix/form': ^0.2.0 From ae930545db03924e14cf64c1ead67b8df03c021d Mon Sep 17 00:00:00 2001 From: Mert Sincan Date: Fri, 18 Oct 2024 15:56:50 +0100 Subject: [PATCH 003/117] Add form support to `InputText` --- .../primevue/src/inputtext/BaseInputText.vue | 23 ++---------- packages/primevue/src/inputtext/InputText.vue | 35 +++++++------------ .../src/inputtext/style/InputTextStyle.js | 8 ++--- 3 files changed, 19 insertions(+), 47 deletions(-) diff --git a/packages/primevue/src/inputtext/BaseInputText.vue b/packages/primevue/src/inputtext/BaseInputText.vue index 4bba32110..040699557 100644 --- a/packages/primevue/src/inputtext/BaseInputText.vue +++ b/packages/primevue/src/inputtext/BaseInputText.vue @@ -1,29 +1,10 @@ diff --git a/packages/primevue/src/rating/style/RatingStyle.js b/packages/primevue/src/rating/style/RatingStyle.js index 21497887c..5a7ced729 100644 --- a/packages/primevue/src/rating/style/RatingStyle.js +++ b/packages/primevue/src/rating/style/RatingStyle.js @@ -43,6 +43,10 @@ const theme = ({ dt }) => ` .p-rating-option-active .p-rating-icon { color: ${dt('rating.icon.active.color')}; } + +.p-rating-icon.p-invalid { /* @todo */ + stroke: ${dt('rating.invalid.icon.color')}; +} `; const classes = { @@ -53,15 +57,25 @@ const classes = { 'p-disabled': props.disabled } ], - option: ({ instance, props, value }) => [ + option: ({ instance, value }) => [ 'p-rating-option', { - 'p-rating-option-active': value <= props.modelValue, + 'p-rating-option-active': value <= instance.d_value, 'p-focus-visible': value === instance.focusedOptionIndex && instance.isFocusVisibleItem } ], - onIcon: 'p-rating-icon p-rating-on-icon', - offIcon: 'p-rating-icon p-rating-off-icon' + onIcon: ({ instance }) => [ + 'p-rating-icon p-rating-on-icon', + { + 'p-invalid': instance.$invalid + } + ], + offIcon: ({ instance }) => [ + 'p-rating-icon p-rating-off-icon', + { + 'p-invalid': instance.$invalid + } + ] }; export default BaseStyle.extend({ From a193c1e5501a06b6d386bba2e4ade2da1c850263 Mon Sep 17 00:00:00 2001 From: Mert Sincan Date: Fri, 18 Oct 2024 16:59:39 +0100 Subject: [PATCH 013/117] Add form support to `Select` --- packages/primevue/src/select/BaseSelect.vue | 21 ++---------- packages/primevue/src/select/Select.vue | 34 ++++++++----------- .../primevue/src/select/style/SelectStyle.js | 8 ++--- 3 files changed, 21 insertions(+), 42 deletions(-) diff --git a/packages/primevue/src/select/BaseSelect.vue b/packages/primevue/src/select/BaseSelect.vue index 9d7a4c4be..4e70e4f53 100644 --- a/packages/primevue/src/select/BaseSelect.vue +++ b/packages/primevue/src/select/BaseSelect.vue @@ -1,12 +1,11 @@ diff --git a/packages/primevue/src/checkboxgroup/CheckboxGroup.d.ts b/packages/primevue/src/checkboxgroup/CheckboxGroup.d.ts new file mode 100644 index 000000000..f4f1b6c52 --- /dev/null +++ b/packages/primevue/src/checkboxgroup/CheckboxGroup.d.ts @@ -0,0 +1,135 @@ +/** + * + * FloatLabel visually integrates a label with its form element. + * + * [Live Demo](https://www.primevue.org/floatlabel/) + * + * @module floatlabel + * + */ +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 FloatLabelPassThroughOptionType = FloatLabelPassThroughAttributes | ((options: FloatLabelPassThroughMethodOptions) => FloatLabelPassThroughAttributes | string) | string | null | undefined; + +export declare type FloatLabelPassThroughTransitionType = TransitionProps | ((options: FloatLabelPassThroughMethodOptions) => TransitionProps) | undefined; + +/** + * Custom passthrough(pt) option method. + */ +export interface FloatLabelPassThroughMethodOptions { + /** + * Defines instance. + */ + instance: any; + /** + * Defines valid properties. + */ + props: FloatLabelProps; + /** + * 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 FloatLabelProps.pt} + */ +export interface FloatLabelPassThroughOptions { + /** + * Used to pass attributes to the root's DOM element. + */ + root?: FloatLabelPassThroughOptionType; + /** + * Used to manage all lifecycle hooks. + * @see {@link BaseComponent.ComponentHooks} + */ + hooks?: ComponentHooks; +} + +/** + * Custom passthrough attributes for each DOM elements + */ +export interface FloatLabelPassThroughAttributes { + [key: string]: any; +} + +/** + * Defines valid properties in FloatLabel component. + */ +export interface FloatLabelProps { + /** + * It generates scoped CSS variables using design tokens for the component. + */ + dt?: DesignToken; + /** + * Used to pass attributes to DOM elements inside the component. + * @type {FloatLabelPassThroughOptions} + */ + pt?: PassThrough; + /** + * 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 the positioning of the label relative to the input. + * @defaultValue false + */ + variant?: 'over' | 'in' | 'on' | undefined; +} + +/** + * Defines valid slots in FloatLabel component. + */ +export interface FloatLabelSlots { + /** + * Default content slot. + */ + default: () => VNode[]; +} + +/** + * Defines valid emits in FloatLabel component. + */ +export interface FloatLabelEmitsOptions {} + +export declare type FloatLabelEmits = EmitFn; + +/** + * **PrimeVue - FloatLabel** + * + * _FloatLabel visually integrates a label with its form element._ + * + * [Live Demo](https://www.primevue.org/inputtext/) + * --- --- + * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) + * + * @group Component + * + */ +declare const FloatLabel: DefineComponent; + +declare module 'vue' { + export interface GlobalComponents { + FloatLabel: DefineComponent; + } +} + +export default FloatLabel; diff --git a/packages/primevue/src/checkboxgroup/CheckboxGroup.vue b/packages/primevue/src/checkboxgroup/CheckboxGroup.vue new file mode 100644 index 000000000..be33e992c --- /dev/null +++ b/packages/primevue/src/checkboxgroup/CheckboxGroup.vue @@ -0,0 +1,29 @@ + + + diff --git a/packages/primevue/src/checkboxgroup/package.json b/packages/primevue/src/checkboxgroup/package.json new file mode 100644 index 000000000..c4971e702 --- /dev/null +++ b/packages/primevue/src/checkboxgroup/package.json @@ -0,0 +1,11 @@ +{ + "main": "./CheckboxGroup.vue", + "module": "./CheckboxGroup.vue", + "types": "./CheckboxGroup.d.ts", + "browser": { + "./sfc": "./CheckboxGroup.vue" + }, + "sideEffects": [ + "*.vue" + ] +} diff --git a/packages/primevue/src/checkboxgroup/style/CheckboxGroupStyle.d.ts b/packages/primevue/src/checkboxgroup/style/CheckboxGroupStyle.d.ts new file mode 100644 index 000000000..eea1b2651 --- /dev/null +++ b/packages/primevue/src/checkboxgroup/style/CheckboxGroupStyle.d.ts @@ -0,0 +1,19 @@ +/** + * + * FloatLabel visually integrates a label with its form element. + * + * [Live Demo](https://www.primevue.org/floatlabel/) + * + * @module checkboxgroupstyle + * + */ +import type { BaseStyle } from '@primevue/core/base/style'; + +export enum CheckboxGroupClasses { + /** + * Class name of the root element + */ + root = 'p-checkbox-group' +} + +export interface CheckboxGroupStyle extends BaseStyle {} diff --git a/packages/primevue/src/checkboxgroup/style/CheckboxGroupStyle.js b/packages/primevue/src/checkboxgroup/style/CheckboxGroupStyle.js new file mode 100644 index 000000000..7abe7cf72 --- /dev/null +++ b/packages/primevue/src/checkboxgroup/style/CheckboxGroupStyle.js @@ -0,0 +1,17 @@ +import BaseStyle from '@primevue/core/base/style'; + +const theme = ({ dt }) => ` +.p-checkbox-group { + display: inline-flex; +} +`; + +const classes = { + root: 'p-checkbox-group p-component' +}; + +export default BaseStyle.extend({ + name: 'checkboxgroup', + theme, + classes +}); diff --git a/packages/primevue/src/checkboxgroup/style/package.json b/packages/primevue/src/checkboxgroup/style/package.json new file mode 100644 index 000000000..ec0af1abf --- /dev/null +++ b/packages/primevue/src/checkboxgroup/style/package.json @@ -0,0 +1,6 @@ +{ + "main": "./CheckboxGroupStyle.js", + "module": "./CheckboxGroupStyle.js", + "types": "./CheckboxGroupStyle.d.ts", + "sideEffects": false +} From 2458008489f1b69e5f9d8c8fbf699d5cb64cccd2 Mon Sep 17 00:00:00 2001 From: Mert Sincan Date: Sun, 20 Oct 2024 23:29:29 +0100 Subject: [PATCH 021/117] New Component: `RadioButtonGroup` --- .../primevue/src/radiobutton/RadioButton.vue | 16 ++- .../src/radiobutton/style/RadioButtonStyle.js | 2 +- .../radiobuttongroup/BaseRadioButtonGroup.vue | 16 +++ .../radiobuttongroup/RadioButtonGroup.d.ts | 135 ++++++++++++++++++ .../src/radiobuttongroup/RadioButtonGroup.vue | 29 ++++ .../src/radiobuttongroup/package.json | 11 ++ .../style/RadioButtonGroupStyle.d.ts | 19 +++ .../style/RadioButtonGroupStyle.js | 17 +++ .../src/radiobuttongroup/style/package.json | 6 + 9 files changed, 247 insertions(+), 4 deletions(-) create mode 100644 packages/primevue/src/radiobuttongroup/BaseRadioButtonGroup.vue create mode 100644 packages/primevue/src/radiobuttongroup/RadioButtonGroup.d.ts create mode 100644 packages/primevue/src/radiobuttongroup/RadioButtonGroup.vue create mode 100644 packages/primevue/src/radiobuttongroup/package.json create mode 100644 packages/primevue/src/radiobuttongroup/style/RadioButtonGroupStyle.d.ts create mode 100644 packages/primevue/src/radiobuttongroup/style/RadioButtonGroupStyle.js create mode 100644 packages/primevue/src/radiobuttongroup/style/package.json diff --git a/packages/primevue/src/radiobutton/RadioButton.vue b/packages/primevue/src/radiobutton/RadioButton.vue index 60ffe736b..fd3401007 100755 --- a/packages/primevue/src/radiobutton/RadioButton.vue +++ b/packages/primevue/src/radiobutton/RadioButton.vue @@ -6,7 +6,7 @@ :class="[cx('input'), inputClass]" :style="inputStyle" :value="value" - :name="name" + :name="groupName" :checked="checked" :tabindex="tabindex" :disabled="disabled" @@ -34,6 +34,11 @@ export default { extends: BaseRadioButton, inheritAttrs: false, emits: ['change', 'focus', 'blur'], + inject: { + $pcRadioButtonGroup: { + default: undefined + } + }, methods: { getPTOptions(key) { const _ptm = key === 'root' ? this.ptmi : this.ptm; @@ -49,7 +54,7 @@ export default { if (!this.disabled && !this.readonly) { const newModelValue = this.binary ? !this.checked : this.value; - this.updateValue(newModelValue, event); + this.$pcRadioButtonGroup ? this.$pcRadioButtonGroup.updateValue(newModelValue, event) : this.updateValue(newModelValue, event); this.$emit('change', event); } }, @@ -62,8 +67,13 @@ export default { } }, computed: { + groupName() { + return this.$pcRadioButtonGroup ? this.$pcRadioButtonGroup.groupName : this.name; + }, checked() { - return this.d_value != null && (this.binary ? !!this.d_value : equals(this.d_value, this.value)); + const value = this.$pcRadioButtonGroup ? this.$pcRadioButtonGroup.d_value : this.d_value; + + return value != null && (this.binary ? !!value : equals(value, this.value)); } } }; diff --git a/packages/primevue/src/radiobutton/style/RadioButtonStyle.js b/packages/primevue/src/radiobutton/style/RadioButtonStyle.js index d0416577e..69af9c53e 100644 --- a/packages/primevue/src/radiobutton/style/RadioButtonStyle.js +++ b/packages/primevue/src/radiobutton/style/RadioButtonStyle.js @@ -125,7 +125,7 @@ const classes = { { 'p-radiobutton-checked': instance.checked, 'p-disabled': props.disabled, - 'p-invalid': instance.$invalid, + 'p-invalid': instance.$pcRadioButtonGroup ? instance.$pcRadioButtonGroup.$invalid : instance.$invalid, 'p-variant-filled': instance.$variant === 'filled' } ], diff --git a/packages/primevue/src/radiobuttongroup/BaseRadioButtonGroup.vue b/packages/primevue/src/radiobuttongroup/BaseRadioButtonGroup.vue new file mode 100644 index 000000000..5dc30b203 --- /dev/null +++ b/packages/primevue/src/radiobuttongroup/BaseRadioButtonGroup.vue @@ -0,0 +1,16 @@ + diff --git a/packages/primevue/src/radiobuttongroup/RadioButtonGroup.d.ts b/packages/primevue/src/radiobuttongroup/RadioButtonGroup.d.ts new file mode 100644 index 000000000..f4f1b6c52 --- /dev/null +++ b/packages/primevue/src/radiobuttongroup/RadioButtonGroup.d.ts @@ -0,0 +1,135 @@ +/** + * + * FloatLabel visually integrates a label with its form element. + * + * [Live Demo](https://www.primevue.org/floatlabel/) + * + * @module floatlabel + * + */ +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 FloatLabelPassThroughOptionType = FloatLabelPassThroughAttributes | ((options: FloatLabelPassThroughMethodOptions) => FloatLabelPassThroughAttributes | string) | string | null | undefined; + +export declare type FloatLabelPassThroughTransitionType = TransitionProps | ((options: FloatLabelPassThroughMethodOptions) => TransitionProps) | undefined; + +/** + * Custom passthrough(pt) option method. + */ +export interface FloatLabelPassThroughMethodOptions { + /** + * Defines instance. + */ + instance: any; + /** + * Defines valid properties. + */ + props: FloatLabelProps; + /** + * 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 FloatLabelProps.pt} + */ +export interface FloatLabelPassThroughOptions { + /** + * Used to pass attributes to the root's DOM element. + */ + root?: FloatLabelPassThroughOptionType; + /** + * Used to manage all lifecycle hooks. + * @see {@link BaseComponent.ComponentHooks} + */ + hooks?: ComponentHooks; +} + +/** + * Custom passthrough attributes for each DOM elements + */ +export interface FloatLabelPassThroughAttributes { + [key: string]: any; +} + +/** + * Defines valid properties in FloatLabel component. + */ +export interface FloatLabelProps { + /** + * It generates scoped CSS variables using design tokens for the component. + */ + dt?: DesignToken; + /** + * Used to pass attributes to DOM elements inside the component. + * @type {FloatLabelPassThroughOptions} + */ + pt?: PassThrough; + /** + * 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 the positioning of the label relative to the input. + * @defaultValue false + */ + variant?: 'over' | 'in' | 'on' | undefined; +} + +/** + * Defines valid slots in FloatLabel component. + */ +export interface FloatLabelSlots { + /** + * Default content slot. + */ + default: () => VNode[]; +} + +/** + * Defines valid emits in FloatLabel component. + */ +export interface FloatLabelEmitsOptions {} + +export declare type FloatLabelEmits = EmitFn; + +/** + * **PrimeVue - FloatLabel** + * + * _FloatLabel visually integrates a label with its form element._ + * + * [Live Demo](https://www.primevue.org/inputtext/) + * --- --- + * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) + * + * @group Component + * + */ +declare const FloatLabel: DefineComponent; + +declare module 'vue' { + export interface GlobalComponents { + FloatLabel: DefineComponent; + } +} + +export default FloatLabel; diff --git a/packages/primevue/src/radiobuttongroup/RadioButtonGroup.vue b/packages/primevue/src/radiobuttongroup/RadioButtonGroup.vue new file mode 100644 index 000000000..66120108b --- /dev/null +++ b/packages/primevue/src/radiobuttongroup/RadioButtonGroup.vue @@ -0,0 +1,29 @@ + + + diff --git a/packages/primevue/src/radiobuttongroup/package.json b/packages/primevue/src/radiobuttongroup/package.json new file mode 100644 index 000000000..436c3ef18 --- /dev/null +++ b/packages/primevue/src/radiobuttongroup/package.json @@ -0,0 +1,11 @@ +{ + "main": "./RadioButtonGroup.vue", + "module": "./RadioButtonGroup.vue", + "types": "./RadioButtonGroup.d.ts", + "browser": { + "./sfc": "./RadioButtonGroup.vue" + }, + "sideEffects": [ + "*.vue" + ] +} diff --git a/packages/primevue/src/radiobuttongroup/style/RadioButtonGroupStyle.d.ts b/packages/primevue/src/radiobuttongroup/style/RadioButtonGroupStyle.d.ts new file mode 100644 index 000000000..1e5f8fa5b --- /dev/null +++ b/packages/primevue/src/radiobuttongroup/style/RadioButtonGroupStyle.d.ts @@ -0,0 +1,19 @@ +/** + * + * FloatLabel visually integrates a label with its form element. + * + * [Live Demo](https://www.primevue.org/floatlabel/) + * + * @module radiobuttongroupstyle + * + */ +import type { BaseStyle } from '@primevue/core/base/style'; + +export enum RadioButtonGroupClasses { + /** + * Class name of the root element + */ + root = 'p-radiobutton-group' +} + +export interface RadioButtonGroupStyle extends BaseStyle {} diff --git a/packages/primevue/src/radiobuttongroup/style/RadioButtonGroupStyle.js b/packages/primevue/src/radiobuttongroup/style/RadioButtonGroupStyle.js new file mode 100644 index 000000000..ef01f4ca6 --- /dev/null +++ b/packages/primevue/src/radiobuttongroup/style/RadioButtonGroupStyle.js @@ -0,0 +1,17 @@ +import BaseStyle from '@primevue/core/base/style'; + +const theme = ({ dt }) => ` +.p-radiobutton-group { + display: inline-flex; +} +`; + +const classes = { + root: 'p-radiobutton-group p-component' +}; + +export default BaseStyle.extend({ + name: 'radiobuttongroup', + theme, + classes +}); diff --git a/packages/primevue/src/radiobuttongroup/style/package.json b/packages/primevue/src/radiobuttongroup/style/package.json new file mode 100644 index 000000000..9553818fe --- /dev/null +++ b/packages/primevue/src/radiobuttongroup/style/package.json @@ -0,0 +1,6 @@ +{ + "main": "./RadioButtonGroupStyle.js", + "module": "./RadioButtonGroupStyle.js", + "types": "./RadioButtonGroupStyle.d.ts", + "sideEffects": false +} From 59d01c2adebdea57dd31bc1100af5c7f94bcb10d Mon Sep 17 00:00:00 2001 From: Mert Sincan Date: Mon, 21 Oct 2024 00:25:56 +0100 Subject: [PATCH 022/117] Update `CheckboxGroup` types --- packages/primevue/src/checkbox/Checkbox.vue | 2 +- .../src/checkboxgroup/CheckboxGroup.d.ts | 89 ++++++++++++------- .../style/CheckboxGroupStyle.d.ts | 4 +- 3 files changed, 60 insertions(+), 35 deletions(-) diff --git a/packages/primevue/src/checkbox/Checkbox.vue b/packages/primevue/src/checkbox/Checkbox.vue index c0b7aa386..a7838f938 100755 --- a/packages/primevue/src/checkbox/Checkbox.vue +++ b/packages/primevue/src/checkbox/Checkbox.vue @@ -99,7 +99,7 @@ export default { }, computed: { groupName() { - return this.$pcCheckboxGroup ? this.$pcCheckboxGroup.groupName : this.name; + return this.$pcCheckboxGroup ? this.$pcCheckboxGroup.groupName : this.$formName; }, checked() { const value = this.$pcCheckboxGroup ? this.$pcCheckboxGroup.d_value : this.d_value; diff --git a/packages/primevue/src/checkboxgroup/CheckboxGroup.d.ts b/packages/primevue/src/checkboxgroup/CheckboxGroup.d.ts index f4f1b6c52..b56a881eb 100644 --- a/packages/primevue/src/checkboxgroup/CheckboxGroup.d.ts +++ b/packages/primevue/src/checkboxgroup/CheckboxGroup.d.ts @@ -1,25 +1,23 @@ /** * - * FloatLabel visually integrates a label with its form element. + * CheckboxGroup is a component that groups multiple checkboxes, allowing users to select one or more options. * - * [Live Demo](https://www.primevue.org/floatlabel/) + * [Live Demo](https://www.primevue.org/checkbox/) * - * @module floatlabel + * @module checkboxgroup * */ 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'; +import { VNode } from 'vue'; -export declare type FloatLabelPassThroughOptionType = FloatLabelPassThroughAttributes | ((options: FloatLabelPassThroughMethodOptions) => FloatLabelPassThroughAttributes | string) | string | null | undefined; - -export declare type FloatLabelPassThroughTransitionType = TransitionProps | ((options: FloatLabelPassThroughMethodOptions) => TransitionProps) | undefined; +export declare type CheckboxGroupPassThroughOptionType = CheckboxGroupPassThroughAttributes | ((options: CheckboxGroupPassThroughMethodOptions) => CheckboxGroupPassThroughAttributes | string) | string | null | undefined; /** * Custom passthrough(pt) option method. */ -export interface FloatLabelPassThroughMethodOptions { +export interface CheckboxGroupPassThroughMethodOptions { /** * Defines instance. */ @@ -27,7 +25,7 @@ export interface FloatLabelPassThroughMethodOptions { /** * Defines valid properties. */ - props: FloatLabelProps; + props: CheckboxGroupProps; /** * Defines valid attributes. */ @@ -46,11 +44,11 @@ export interface FloatLabelPassThroughMethodOptions { * Custom passthrough(pt) options. * @see {@link FloatLabelProps.pt} */ -export interface FloatLabelPassThroughOptions { +export interface CheckboxGroupPassThroughOptions { /** * Used to pass attributes to the root's DOM element. */ - root?: FloatLabelPassThroughOptionType; + root?: CheckboxGroupPassThroughOptionType; /** * Used to manage all lifecycle hooks. * @see {@link BaseComponent.ComponentHooks} @@ -61,23 +59,44 @@ export interface FloatLabelPassThroughOptions { /** * Custom passthrough attributes for each DOM elements */ -export interface FloatLabelPassThroughAttributes { +export interface CheckboxGroupPassThroughAttributes { [key: string]: any; } /** - * Defines valid properties in FloatLabel component. + * Defines valid properties in CheckboxGroup component. */ -export interface FloatLabelProps { +export interface CheckboxGroupProps { + /** + * Value binding of the checkboxes. + */ + modelValue?: any; + /** + * Default values of the checkboxes in uncontrolled mode. + */ + defaultValue?: any; + /** + * Name of the input elements. + */ + name?: string | undefined; + /** + * When present, it specifies that the component should have invalid state style. + * @defaultValue false + */ + invalid?: boolean | undefined; + /** + * Used to set form control options. + */ + formControl?: any; /** * It generates scoped CSS variables using design tokens for the component. */ dt?: DesignToken; /** * Used to pass attributes to DOM elements inside the component. - * @type {FloatLabelPassThroughOptions} + * @type {CheckboxGroupPassThroughOptions} */ - pt?: PassThrough; + pt?: PassThrough; /** * Used to configure passthrough(pt) options of the component. * @type {PassThroughOptions} @@ -88,17 +107,12 @@ export interface FloatLabelProps { * @defaultValue false */ unstyled?: boolean; - /** - * Defines the positioning of the label relative to the input. - * @defaultValue false - */ - variant?: 'over' | 'in' | 'on' | undefined; } /** - * Defines valid slots in FloatLabel component. + * Defines valid slots in CheckboxGroup component. */ -export interface FloatLabelSlots { +export interface CheckboxGroupSlots { /** * Default content slot. */ @@ -106,30 +120,41 @@ export interface FloatLabelSlots { } /** - * Defines valid emits in FloatLabel component. + * Defines valid emits in CheckboxGroup component. */ -export interface FloatLabelEmitsOptions {} +export interface CheckboxGroupEmitsOptions { + /** + * Emitted when the value changes. + * @param {*} value - New value. + */ + 'update:modelValue'(value: any): void; + /** + * Emitted when the value changes in uncontrolled mode. + * @param {*} value - New value. + */ + 'value-change'(value: any): void; +} -export declare type FloatLabelEmits = EmitFn; +export declare type CheckboxGroupEmits = EmitFn; /** - * **PrimeVue - FloatLabel** + * **PrimeVue - CheckboxGroup** * - * _FloatLabel visually integrates a label with its form element._ + * _CheckboxGroup is a component that groups multiple checkboxes, allowing users to select one or more options._ * - * [Live Demo](https://www.primevue.org/inputtext/) + * [Live Demo](https://www.primevue.org/checkbox/) * --- --- * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) * * @group Component * */ -declare const FloatLabel: DefineComponent; +declare const CheckboxGroup: DefineComponent; declare module 'vue' { export interface GlobalComponents { - FloatLabel: DefineComponent; + CheckboxGroup: DefineComponent; } } -export default FloatLabel; +export default CheckboxGroup; diff --git a/packages/primevue/src/checkboxgroup/style/CheckboxGroupStyle.d.ts b/packages/primevue/src/checkboxgroup/style/CheckboxGroupStyle.d.ts index eea1b2651..408d4d0ab 100644 --- a/packages/primevue/src/checkboxgroup/style/CheckboxGroupStyle.d.ts +++ b/packages/primevue/src/checkboxgroup/style/CheckboxGroupStyle.d.ts @@ -1,8 +1,8 @@ /** * - * FloatLabel visually integrates a label with its form element. + * CheckboxGroup is a component that groups multiple checkboxes, allowing users to select one or more options. * - * [Live Demo](https://www.primevue.org/floatlabel/) + * [Live Demo](https://www.primevue.org/checkbox/) * * @module checkboxgroupstyle * From ab652204eb0eee0613d12e078eaf8ef7112d2b27 Mon Sep 17 00:00:00 2001 From: Mert Sincan Date: Mon, 21 Oct 2024 00:35:26 +0100 Subject: [PATCH 023/117] New Component: `RadioButtonGroup` --- .../baseeditableholder/BaseEditableHolder.vue | 2 +- .../primevue/src/radiobutton/RadioButton.vue | 2 +- .../radiobuttongroup/RadioButtonGroup.d.ts | 91 ++++++++++++------- .../style/RadioButtonGroupStyle.d.ts | 4 +- 4 files changed, 62 insertions(+), 37 deletions(-) diff --git a/packages/core/src/baseeditableholder/BaseEditableHolder.vue b/packages/core/src/baseeditableholder/BaseEditableHolder.vue index 6bf920889..2eea35a2d 100644 --- a/packages/core/src/baseeditableholder/BaseEditableHolder.vue +++ b/packages/core/src/baseeditableholder/BaseEditableHolder.vue @@ -83,7 +83,7 @@ export default { return this.invalid ?? this.$pcForm?.states?.[this.$formName]?.invalid; }, $formName() { - return this.formControl?.name || this.name || this.$attrs.name; + return this.formControl?.name || this.name; }, // @deprecated use $filled instead filled() { diff --git a/packages/primevue/src/radiobutton/RadioButton.vue b/packages/primevue/src/radiobutton/RadioButton.vue index fd3401007..bb48b4c5d 100755 --- a/packages/primevue/src/radiobutton/RadioButton.vue +++ b/packages/primevue/src/radiobutton/RadioButton.vue @@ -68,7 +68,7 @@ export default { }, computed: { groupName() { - return this.$pcRadioButtonGroup ? this.$pcRadioButtonGroup.groupName : this.name; + return this.$pcRadioButtonGroup ? this.$pcRadioButtonGroup.groupName : this.$formName; }, checked() { const value = this.$pcRadioButtonGroup ? this.$pcRadioButtonGroup.d_value : this.d_value; diff --git a/packages/primevue/src/radiobuttongroup/RadioButtonGroup.d.ts b/packages/primevue/src/radiobuttongroup/RadioButtonGroup.d.ts index f4f1b6c52..8409a048c 100644 --- a/packages/primevue/src/radiobuttongroup/RadioButtonGroup.d.ts +++ b/packages/primevue/src/radiobuttongroup/RadioButtonGroup.d.ts @@ -1,25 +1,23 @@ /** * - * FloatLabel visually integrates a label with its form element. + * RadioButtonGroup is a component that groups multiple radio buttons, allowing users to select only one option from the group. * - * [Live Demo](https://www.primevue.org/floatlabel/) + * [Live Demo](https://www.primevue.org/radiobutton/) * - * @module floatlabel + * @module radiobuttongroup * */ 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'; +import { VNode } from 'vue'; -export declare type FloatLabelPassThroughOptionType = FloatLabelPassThroughAttributes | ((options: FloatLabelPassThroughMethodOptions) => FloatLabelPassThroughAttributes | string) | string | null | undefined; - -export declare type FloatLabelPassThroughTransitionType = TransitionProps | ((options: FloatLabelPassThroughMethodOptions) => TransitionProps) | undefined; +export declare type RadioButtonGroupPassThroughOptionType = RadioButtonGroupPassThroughAttributes | ((options: RadioButtonGroupPassThroughMethodOptions) => RadioButtonGroupPassThroughAttributes | string) | string | null | undefined; /** * Custom passthrough(pt) option method. */ -export interface FloatLabelPassThroughMethodOptions { +export interface RadioButtonGroupPassThroughMethodOptions { /** * Defines instance. */ @@ -27,7 +25,7 @@ export interface FloatLabelPassThroughMethodOptions { /** * Defines valid properties. */ - props: FloatLabelProps; + props: RadioButtonGroupProps; /** * Defines valid attributes. */ @@ -44,13 +42,13 @@ export interface FloatLabelPassThroughMethodOptions { /** * Custom passthrough(pt) options. - * @see {@link FloatLabelProps.pt} + * @see {@link RadioButtonGroupProps.pt} */ -export interface FloatLabelPassThroughOptions { +export interface RadioButtonGroupPassThroughOptions { /** * Used to pass attributes to the root's DOM element. */ - root?: FloatLabelPassThroughOptionType; + root?: RadioButtonGroupPassThroughOptionType; /** * Used to manage all lifecycle hooks. * @see {@link BaseComponent.ComponentHooks} @@ -61,23 +59,44 @@ export interface FloatLabelPassThroughOptions { /** * Custom passthrough attributes for each DOM elements */ -export interface FloatLabelPassThroughAttributes { +export interface RadioButtonGroupPassThroughAttributes { [key: string]: any; } /** - * Defines valid properties in FloatLabel component. + * Defines valid properties in RadioButtonGroup component. */ -export interface FloatLabelProps { +export interface RadioButtonGroupProps { + /** + * Value binding of the radiobuttons. + */ + modelValue?: any; + /** + * Default values of the radiobuttons in uncontrolled mode. + */ + defaultValue?: any; + /** + * Name of the input elements. + */ + name?: string | undefined; + /** + * When present, it specifies that the component should have invalid state style. + * @defaultValue false + */ + invalid?: boolean | undefined; + /** + * Used to set form control options. + */ + formControl?: any; /** * It generates scoped CSS variables using design tokens for the component. */ dt?: DesignToken; /** * Used to pass attributes to DOM elements inside the component. - * @type {FloatLabelPassThroughOptions} + * @type {RadioButtonGroupPassThroughOptions} */ - pt?: PassThrough; + pt?: PassThrough; /** * Used to configure passthrough(pt) options of the component. * @type {PassThroughOptions} @@ -88,17 +107,12 @@ export interface FloatLabelProps { * @defaultValue false */ unstyled?: boolean; - /** - * Defines the positioning of the label relative to the input. - * @defaultValue false - */ - variant?: 'over' | 'in' | 'on' | undefined; } /** - * Defines valid slots in FloatLabel component. + * Defines valid slots in RadioButtonGroup component. */ -export interface FloatLabelSlots { +export interface RadioButtonGroupSlots { /** * Default content slot. */ @@ -106,30 +120,41 @@ export interface FloatLabelSlots { } /** - * Defines valid emits in FloatLabel component. + * Defines valid emits in RadioButtonGroup component. */ -export interface FloatLabelEmitsOptions {} +export interface RadioButtonGroupEmitsOptions { + /** + * Emitted when the value changes. + * @param {*} value - New value. + */ + 'update:modelValue'(value: any): void; + /** + * Emitted when the value changes in uncontrolled mode. + * @param {*} value - New value. + */ + 'value-change'(value: any): void; +} -export declare type FloatLabelEmits = EmitFn; +export declare type RadioButtonGroupEmits = EmitFn; /** - * **PrimeVue - FloatLabel** + * **PrimeVue - RadioButtonGroup** * - * _FloatLabel visually integrates a label with its form element._ + * _RadioButtonGroup is a component that groups multiple radio buttons, allowing users to select only one option from the group._ * - * [Live Demo](https://www.primevue.org/inputtext/) + * [Live Demo](https://www.primevue.org/radiobutton/) * --- --- * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) * * @group Component * */ -declare const FloatLabel: DefineComponent; +declare const RadioButtonGroup: DefineComponent; declare module 'vue' { export interface GlobalComponents { - FloatLabel: DefineComponent; + RadioButtonGroup: DefineComponent; } } -export default FloatLabel; +export default RadioButtonGroup; diff --git a/packages/primevue/src/radiobuttongroup/style/RadioButtonGroupStyle.d.ts b/packages/primevue/src/radiobuttongroup/style/RadioButtonGroupStyle.d.ts index 1e5f8fa5b..d5bb89ad2 100644 --- a/packages/primevue/src/radiobuttongroup/style/RadioButtonGroupStyle.d.ts +++ b/packages/primevue/src/radiobuttongroup/style/RadioButtonGroupStyle.d.ts @@ -1,8 +1,8 @@ /** * - * FloatLabel visually integrates a label with its form element. + * RadioButtonGroup is a component that groups multiple radio buttons, allowing users to select only one option from the group. * - * [Live Demo](https://www.primevue.org/floatlabel/) + * [Live Demo](https://www.primevue.org/radiobuttongroup/) * * @module radiobuttongroupstyle * From 739f43cb37e6cdb3bb5afa1c7a5b53c42c9af782 Mon Sep 17 00:00:00 2001 From: Mert Sincan Date: Mon, 21 Oct 2024 10:30:11 +0100 Subject: [PATCH 024/117] Form d.ts update --- packages/form/src/form/Form.d.ts | 97 +++++++++++++++++------- packages/form/src/index.d.ts | 3 + packages/form/src/resolvers/index.d.ts | 1 + packages/form/src/resolvers/package.json | 3 +- packages/form/src/useform/index.d.ts | 19 +++++ 5 files changed, 94 insertions(+), 29 deletions(-) create mode 100644 packages/form/src/resolvers/index.d.ts create mode 100644 packages/form/src/useform/index.d.ts diff --git a/packages/form/src/form/Form.d.ts b/packages/form/src/form/Form.d.ts index 41590557d..8e593975a 100644 --- a/packages/form/src/form/Form.d.ts +++ b/packages/form/src/form/Form.d.ts @@ -1,25 +1,32 @@ /** * - * Fluid is a layout component to make descendant components span full width of their container. + * Form provides validation functionality and manages form state. * - * [Live Demo](https://www.primevue.org/fluid/) + * [Live Demo](https://www.primevue.org/form/) * - * @module fluid + * @module form * */ 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'; +import { VNode } from 'vue'; -export declare type FluidPassThroughOptionType = FluidPassThroughAttributes | ((options: FluidPassThroughMethodOptions) => FluidPassThroughAttributes | string) | string | null | undefined; +/** + * From primevue/passthrough/index.d.ts + */ +export declare type PassThroughMergePropsType = ((...args: any) => object | undefined) | boolean | undefined; -export declare type FluidPassThroughTransitionType = TransitionProps | ((options: FluidPassThroughMethodOptions) => TransitionProps) | undefined; +export interface PassThroughOptions { + mergeSections?: boolean | undefined; + mergeProps?: PassThroughMergePropsType; +} + +export declare type FormPassThroughOptionType = FormPassThroughAttributes | ((options: FormPassThroughMethodOptions) => FormPassThroughAttributes | string) | string | null | undefined; /** * Custom passthrough(pt) option method. */ -export interface FluidPassThroughMethodOptions { +export interface FormPassThroughMethodOptions { /** * Defines instance. */ @@ -27,7 +34,7 @@ export interface FluidPassThroughMethodOptions { /** * Defines valid properties. */ - props: FluidProps; + props: FormProps; /** * Defines valid attributes. */ @@ -44,13 +51,13 @@ export interface FluidPassThroughMethodOptions { /** * Custom passthrough(pt) options. - * @see {@link FluidProps.pt} + * @see {@link FormProps.pt} */ -export interface FluidPassThroughOptions { +export interface FormPassThroughOptions { /** * Used to pass attributes to the root's DOM element. */ - root?: FluidPassThroughOptionType; + root?: FormPassThroughOptionType; /** * Used to manage all lifecycle hooks. * @see {@link BaseComponent.ComponentHooks} @@ -61,23 +68,51 @@ export interface FluidPassThroughOptions { /** * Custom passthrough attributes for each DOM elements */ -export interface FluidPassThroughAttributes { +export interface FormPassThroughAttributes { [key: string]: any; } /** - * Defines valid properties in Fluid component. + * Defines valid properties in Form component. */ -export interface FluidProps { +export interface FormProps { + /** + * A function that resolves validation logic. + */ + resolver?: (values: Record) => Promise> | Record | undefined; + /** + * The default values for the form fields in uncontrolled mode. + */ + defaultValues?: Record | undefined; + /** + * Whether to validate the form fields when the values change. + * @defaultValue true + */ + validateOnValueUpdate?: boolean | string[] | undefined; + /** + * Whether to validate the form fields when they lose focus (on blur). + * @defaultValue false + */ + validateOnBlur?: boolean | string[] | undefined; + /** + * Whether to validate the form fields immediately after the form is mounted. + * @defaultValue false + */ + validateOnMount?: boolean | string[] | undefined; + /** + * Whether to validate the form fields when the form is submitted. + * @defaultValue true + */ + validateOnSubmit?: boolean | string[] | undefined; /** * It generates scoped CSS variables using design tokens for the component. */ dt?: DesignToken; /** * Used to pass attributes to DOM elements inside the component. - * @type {FluidPassThroughOptions} + * @type {FormPassThroughOptions} */ - pt?: PassThrough; + pt?: PassThrough; /** * Used to configure passthrough(pt) options of the component. * @type {PassThroughOptions} @@ -91,9 +126,9 @@ export interface FluidProps { } /** - * Defines valid slots in Fluid component. + * Defines valid slots in Form component. */ -export interface FluidSlots { +export interface FormSlots { /** * Default content slot. */ @@ -101,30 +136,36 @@ export interface FluidSlots { } /** - * Defines valid emits in Fluid component. + * Defines valid emits in Form component. */ -export interface FluidEmitsOptions {} +export interface FormEmitsOptions { + /** + * Emitted when the form is submitted. + * @param {Event} event - Original DOM event. + */ + submit: (event: Event) => void; +} -export declare type FluidEmits = EmitFn; +export declare type FormEmits = EmitFn; /** - * **PrimeVue - Fluid** + * **PrimeVue - Form** * - * _Fluid is a layout component to make descendant components span full width of their container._ + * _Form provides validation functionality and manages form state._ * - * [Live Demo](https://www.primevue.org/fluid/) + * [Live Demo](https://www.primevue.org/form/) * --- --- * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) * * @group Component * */ -declare const Fluid: DefineComponent; +declare const Form: DefineComponent; declare module 'vue' { export interface GlobalComponents { - Fluid: DefineComponent; + Form: DefineComponent; } } -export default Fluid; +export default Form; diff --git a/packages/form/src/index.d.ts b/packages/form/src/index.d.ts index e69de29bb..7e19301ce 100644 --- a/packages/form/src/index.d.ts +++ b/packages/form/src/index.d.ts @@ -0,0 +1,3 @@ +export { default as Form } from '@primevue/form/form'; +export * from '@primevue/form/resolvers'; +export * from '@primevue/form/useform'; diff --git a/packages/form/src/resolvers/index.d.ts b/packages/form/src/resolvers/index.d.ts new file mode 100644 index 000000000..17e6c1b9c --- /dev/null +++ b/packages/form/src/resolvers/index.d.ts @@ -0,0 +1 @@ +export * from '@primeuix/form/resolvers'; diff --git a/packages/form/src/resolvers/package.json b/packages/form/src/resolvers/package.json index 7604ba623..cb300e167 100644 --- a/packages/form/src/resolvers/package.json +++ b/packages/form/src/resolvers/package.json @@ -1,4 +1,5 @@ { "main": "./index.js", - "module": "./index.js" + "module": "./index.js", + "types": "./index.d.ts" } diff --git a/packages/form/src/useform/index.d.ts b/packages/form/src/useform/index.d.ts new file mode 100644 index 000000000..d229d6473 --- /dev/null +++ b/packages/form/src/useform/index.d.ts @@ -0,0 +1,19 @@ +export interface useFormReturn { + defineField: (field: string, options?: any) => any; + handleSubmit: (event: any) => any; + validate: (field: string) => any; + reset: () => void; + valid: boolean; + states: any; +} + +export interface useFormOptions { + resolver?: (values: Record) => Promise> | Record | undefined; + defaultValues?: Record | undefined; + validateOnValueUpdate?: boolean | string[]; + validateOnBlur?: boolean | string[]; + validateOnMount?: boolean | string[]; + validateOnSubmit?: boolean | string[]; +} + +export declare function useForm(options: useFormOptions): useFormReturn; From 243eaf3a05e6c069252c5f98d466710225b96191 Mon Sep 17 00:00:00 2001 From: Mert Sincan Date: Mon, 21 Oct 2024 12:02:45 +0100 Subject: [PATCH 025/117] Update primeuix/form version --- apps/showcase/package.json | 10 ++++++++-- pnpm-workspace.yaml | 2 +- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/apps/showcase/package.json b/apps/showcase/package.json index 566d81728..77bedae7e 100644 --- a/apps/showcase/package.json +++ b/apps/showcase/package.json @@ -55,7 +55,13 @@ "primevue": "workspace:*", "@primevue/core": "workspace:*", "@primevue/nuxt-module": "workspace:*", - "@primevue/themes": "workspace:*" + "@primevue/themes": "workspace:*", + "@primevue/form": "workspace:*", + "yup": "1.4.0", + "zod": "3.23.8", + "joi": "^17.13.3", + "valibot": "^0.42.1", + "superstruct": "^2.0.2" }, "dependencies": { "@docsearch/js": "^3.3.3", @@ -64,4 +70,4 @@ "engines": { "node": ">=12.11.0" } -} \ No newline at end of file +} diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 21c996683..e6f2ecb2d 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -5,4 +5,4 @@ packages: catalog: '@primeuix/styled': ^0.2.0 '@primeuix/utils': ^0.2.0 - '@primeuix/form': ^0.2.0 + '@primeuix/form': ^0.0.2 From ca12435e7c9c2a44046fe8e9b6d21cff53cd2a86 Mon Sep 17 00:00:00 2001 From: Mert Sincan Date: Mon, 21 Oct 2024 12:50:34 +0100 Subject: [PATCH 026/117] Update d.ts files --- .../BaseEditableHolder.d.ts | 60 ++++++++++++------- packages/core/src/baseinput/BaseInput.d.ts | 40 ++++++------- .../src/autocomplete/AutoComplete.d.ts | 17 ++++++ .../src/cascadeselect/CascadeSelect.d.ts | 17 ++++++ packages/primevue/src/checkbox/Checkbox.d.ts | 13 ++++ .../primevue/src/datepicker/DatePicker.d.ts | 21 +++++-- .../primevue/src/inputnumber/InputNumber.d.ts | 17 ++++++ packages/primevue/src/inputotp/InputOtp.d.ts | 17 ++++++ .../primevue/src/inputtext/InputText.d.ts | 17 ++++++ packages/primevue/src/listbox/Listbox.d.ts | 17 ++++++ .../primevue/src/multiselect/MultiSelect.d.ts | 17 ++++++ packages/primevue/src/password/Password.d.ts | 17 ++++++ .../primevue/src/radiobutton/RadioButton.d.ts | 13 ++++ packages/primevue/src/rating/Rating.d.ts | 18 ++++++ packages/primevue/src/select/Select.d.ts | 17 ++++++ .../src/selectbutton/SelectButton.d.ts | 17 ++++++ packages/primevue/src/slider/Slider.d.ts | 22 +++++++ packages/primevue/src/textarea/Textarea.d.ts | 17 ++++++ .../src/togglebutton/ToggleButton.d.ts | 17 ++++++ .../src/toggleswitch/ToggleSwitch.d.ts | 17 ++++++ .../primevue/src/treeselect/TreeSelect.d.ts | 17 ++++++ 21 files changed, 378 insertions(+), 47 deletions(-) diff --git a/packages/core/src/baseeditableholder/BaseEditableHolder.d.ts b/packages/core/src/baseeditableholder/BaseEditableHolder.d.ts index 2a42d0d4b..7c9ec1848 100644 --- a/packages/core/src/baseeditableholder/BaseEditableHolder.d.ts +++ b/packages/core/src/baseeditableholder/BaseEditableHolder.d.ts @@ -2,29 +2,47 @@ * * [Live Demo](https://primevue.org/) * - * @module basecomponent + * @module baseeditableholder * */ -export interface ComponentHooks { - onBeforeCreate?(): void; - onCreated?(): void; - onBeforeMount?(): void; - onMounted?(): void; - onBeforeUpdate?(): void; - onUpdated?(): void; - onBeforeUnmount?(): void; - onUnmounted?(): void; +export interface BaseEditableHolderProps { + /** + * Value of the component. + */ + modelValue?: any; + /** + * The default value for the input when not controlled by `modelValue`. + */ + defaultValue?: any; + /** + * The name attribute for the element, typically used in form submissions. + */ + name?: string | undefined; + /** + * When present, it specifies that the component should have invalid state style. + * @defaultValue false + */ + invalid?: boolean | undefined; + /** + * Disables the element, making it non-interactive and unclickable. + * @defaultValue false + */ + disabled?: boolean | undefined; + /** + * Form control object, typically used for handling validation and form state. + */ + formControl?: Record | undefined; } -export interface BaseComponentPassThroughOptions { - hooks?: ComponentHooks; -} - -/** - * @todo Update all d.ts with it. - */ -export interface BaseComponentPassThroughMethodOptions { - instance?: I | undefined | null; - props?: P | undefined | null; - state?: S | undefined | null; +export interface BaseEditableHolderEmitsOptions { + /** + * Emitted when the value changes in controlled mode. + * @param {*} value - New value. + */ + 'update:modelValue'(value: any): void; + /** + * Emitted when the value changes in uncontrolled mode. + * @param {*} value - New value. + */ + 'value-change'(value: any): void; } diff --git a/packages/core/src/baseinput/BaseInput.d.ts b/packages/core/src/baseinput/BaseInput.d.ts index 2a42d0d4b..7462d86c3 100644 --- a/packages/core/src/baseinput/BaseInput.d.ts +++ b/packages/core/src/baseinput/BaseInput.d.ts @@ -2,29 +2,25 @@ * * [Live Demo](https://primevue.org/) * - * @module basecomponent + * @module baseinput * */ -export interface ComponentHooks { - onBeforeCreate?(): void; - onCreated?(): void; - onBeforeMount?(): void; - onMounted?(): void; - onBeforeUpdate?(): void; - onUpdated?(): void; - onBeforeUnmount?(): void; - onUnmounted?(): void; +import { BaseEditableHolderEmitsOptions, BaseEditableHolderProps } from '@primevue/core/baseeditableholder'; + +export interface BaseInputProps extends BaseEditableHolderProps { + /** + * Defines the size of the component. + */ + size?: 'small' | 'large' | undefined; + /** + * Spans 100% width of the container when enabled. + */ + fluid?: boolean | undefined; + /** + * Specifies the input variant of the component. + * @defaultValue outlined + */ + variant?: 'outlined' | 'filled' | undefined; } -export interface BaseComponentPassThroughOptions { - hooks?: ComponentHooks; -} - -/** - * @todo Update all d.ts with it. - */ -export interface BaseComponentPassThroughMethodOptions { - instance?: I | undefined | null; - props?: P | undefined | null; - state?: S | undefined | null; -} +export interface BaseInputEmitsOptions extends BaseEditableHolderEmitsOptions {} diff --git a/packages/primevue/src/autocomplete/AutoComplete.d.ts b/packages/primevue/src/autocomplete/AutoComplete.d.ts index 55e2c68d3..69f41a576 100755 --- a/packages/primevue/src/autocomplete/AutoComplete.d.ts +++ b/packages/primevue/src/autocomplete/AutoComplete.d.ts @@ -305,6 +305,14 @@ export interface AutoCompleteProps { * Value of the component. */ modelValue?: any; + /** + * The default value for the input when not controlled by `modelValue`. + */ + defaultValue?: any; + /** + * The name attribute for the element, typically used in form submissions. + */ + name?: string | undefined; /** * An array of suggestions to display. */ @@ -518,6 +526,10 @@ export interface AutoCompleteProps { * Identifier of the underlying input element. */ ariaLabelledby?: string | undefined; + /** + * Form control object, typically used for handling validation and form state. + */ + formControl?: Record | undefined; /** * It generates scoped CSS variables using design tokens for the component. */ @@ -748,6 +760,11 @@ export interface AutoCompleteEmitsOptions { * @param {*} value - New value. */ 'update:modelValue'(value: any): void; + /** + * Emitted when the value changes in uncontrolled mode. + * @param {*} value - New value. + */ + 'value-change'(value: any): void; /** * Callback to invoke on value change. * @param {AutoCompleteChangeEvent} event - Custom change event. diff --git a/packages/primevue/src/cascadeselect/CascadeSelect.d.ts b/packages/primevue/src/cascadeselect/CascadeSelect.d.ts index 4c068ffa5..9ead6ddcb 100644 --- a/packages/primevue/src/cascadeselect/CascadeSelect.d.ts +++ b/packages/primevue/src/cascadeselect/CascadeSelect.d.ts @@ -263,6 +263,14 @@ export interface CascadeSelectProps { * Value of the component. */ modelValue?: any | undefined; + /** + * The default value for the input when not controlled by `modelValue`. + */ + defaultValue?: any | undefined; + /** + * The name attribute for the element, typically used in form submissions. + */ + name?: string | undefined; /** * An array of selectitems to display as the available options. */ @@ -441,6 +449,10 @@ export interface CascadeSelectProps { * Establishes a string value that labels the component. */ ariaLabel?: string | undefined; + /** + * Form control object, typically used for handling validation and form state. + */ + formControl?: Record | undefined; /** * It generates scoped CSS variables using design tokens for the component. */ @@ -548,6 +560,11 @@ export interface CascadeSelectEmitsOptions { * @param {*} value - New value. */ 'update:modelValue'(value: any): void; + /** + * Emitted when the value changes in uncontrolled mode. + * @param {*} value - New value. + */ + 'value-change'(value: any): void; /** * Callback to invoke on value change. * @param { CascadeSelectChangeEvent } event - Custom change event. diff --git a/packages/primevue/src/checkbox/Checkbox.d.ts b/packages/primevue/src/checkbox/Checkbox.d.ts index 34a4d3ceb..598624eb4 100755 --- a/packages/primevue/src/checkbox/Checkbox.d.ts +++ b/packages/primevue/src/checkbox/Checkbox.d.ts @@ -102,6 +102,10 @@ export interface CheckboxProps { * Value binding of the checkbox. */ modelValue?: any; + /** + * The default value for the input when not controlled by `modelValue`. + */ + defaultValue?: any; /** * Name of the input element. */ @@ -175,6 +179,10 @@ export interface CheckboxProps { * Establishes a string value that labels the component. */ ariaLabel?: string | undefined; + /** + * Form control object, typically used for handling validation and form state. + */ + formControl?: Record | undefined; /** * It generates scoped CSS variables using design tokens for the component. */ @@ -250,6 +258,11 @@ export interface CheckboxEmitsOptions { * @param {*} value - New value. */ 'update:modelValue'(value: any): void; + /** + * Emitted when the value changes in uncontrolled mode. + * @param {*} value - New value. + */ + 'value-change'(value: any): void; /** * Callback to invoke on value change. * @param {Event} event - Browser event. diff --git a/packages/primevue/src/datepicker/DatePicker.d.ts b/packages/primevue/src/datepicker/DatePicker.d.ts index 3910e5bf2..2bee6a578 100755 --- a/packages/primevue/src/datepicker/DatePicker.d.ts +++ b/packages/primevue/src/datepicker/DatePicker.d.ts @@ -517,6 +517,14 @@ export interface DatePickerProps { * @defaultValue null */ modelValue?: Date | Array | Array | undefined | null; + /** + * The default value for the input when not controlled by `modelValue`. + */ + defaultValue?: Date | Array | Array | undefined | null; + /** + * The name attribute for the element, typically used in form submissions. + */ + name?: string | undefined; /** * Defines the quantity of the selection. * @defaultValue single @@ -719,10 +727,6 @@ export interface DatePickerProps { * Placeholder text for the input. */ placeholder?: string | undefined; - /** - * Name of the element. - */ - name?: string | undefined; /** * A valid query selector or an HTMLElement to specify where the overlay gets attached. * @defaultValue body @@ -789,6 +793,10 @@ export interface DatePickerProps { * Establishes a string value that labels the component. */ ariaLabel?: string | undefined; + /** + * Form control object, typically used for handling validation and form state. + */ + formControl?: Record | undefined; /** * It generates scoped CSS variables using design tokens for the component. */ @@ -965,6 +973,11 @@ export interface DatePickerEmitsOptions { * @param {string | Date | string[] | Date[] | undefined} value - New value. */ 'update:modelValue'(value: Date | Array | Array | undefined | null): void; + /** + * Emitted when the value changes in uncontrolled mode. + * @param {string | Date | string[] | Date[] | undefined} value - New value. + */ + 'value-change'(value: Date | Array | Array | undefined | null): void; /** * Callback to invoke when input field is being typed. * @param {Event} event - Browser event diff --git a/packages/primevue/src/inputnumber/InputNumber.d.ts b/packages/primevue/src/inputnumber/InputNumber.d.ts index 802ecbc71..0a55b3cc8 100755 --- a/packages/primevue/src/inputnumber/InputNumber.d.ts +++ b/packages/primevue/src/inputnumber/InputNumber.d.ts @@ -193,6 +193,14 @@ export interface InputNumberProps { * Value of the component. */ modelValue?: Nullable; + /** + * The default value for the input when not controlled by `modelValue`. + */ + defaultValue?: Nullable; + /** + * The name attribute for the element, typically used in form submissions. + */ + name?: string | undefined; /** * Whether to format the value. * @defaultValue true @@ -359,6 +367,10 @@ export interface InputNumberProps { * Establishes a string value that labels the component. */ ariaLabel?: string | undefined; + /** + * Form control object, typically used for handling validation and form state. + */ + formControl?: Record | undefined; /** * It generates scoped CSS variables using design tokens for the component. */ @@ -431,6 +443,11 @@ export interface InputNumberEmitsOptions { * @param {number} value - New value. */ 'update:modelValue'(value: number): void; + /** + * Emitted when the value changes in uncontrolled mode. + * @param {number} value - New value. + */ + 'value-change'(value: number): void; /** * Callback to invoke when the value is entered. * @param {InputNumberInputEvent} event - Custom input event. diff --git a/packages/primevue/src/inputotp/InputOtp.d.ts b/packages/primevue/src/inputotp/InputOtp.d.ts index 1a67fdd40..0fdd53d0c 100755 --- a/packages/primevue/src/inputotp/InputOtp.d.ts +++ b/packages/primevue/src/inputotp/InputOtp.d.ts @@ -143,6 +143,14 @@ export interface InputOtpProps { * @defaultValue null */ modelValue?: boolean | string | undefined; + /** + * The default value for the input when not controlled by `modelValue`. + */ + defaultValue?: boolean | string | undefined; + /** + * The name attribute for the element, typically used in form submissions. + */ + name?: string | undefined; /** * When present, it specifies that the component should have invalid state style. * @defaultValue false @@ -182,6 +190,10 @@ export interface InputOtpProps { * @defaultValue false */ integerOnly?: boolean | undefined; + /** + * Form control object, typically used for handling validation and form state. + */ + formControl?: Record | undefined; /** * It generates scoped CSS variables using design tokens for the component. */ @@ -239,6 +251,11 @@ export interface InputOtpEmitsOptions { * @param {boolean} value - New value. */ 'update:modelValue'(value: boolean): void; + /** + * Emitted when the value changes in uncontrolled mode. + * @param {boolean} value - New value. + */ + 'value-change'(value: boolean): void; /** * Callback to invoke on value change. * @param {Event} event - Browser event. diff --git a/packages/primevue/src/inputtext/InputText.d.ts b/packages/primevue/src/inputtext/InputText.d.ts index 7add5a35e..4f4e0c6d4 100755 --- a/packages/primevue/src/inputtext/InputText.d.ts +++ b/packages/primevue/src/inputtext/InputText.d.ts @@ -87,6 +87,14 @@ export interface InputTextProps extends InputHTMLAttributes { * Value of the component. */ modelValue?: Nullable; + /** + * The default value for the input when not controlled by `modelValue`. + */ + defaultValue?: Nullable; + /** + * The name attribute for the element, typically used in form submissions. + */ + name?: string | undefined; /** * Defines the size of the component. */ @@ -106,6 +114,10 @@ export interface InputTextProps extends InputHTMLAttributes { * @defaultValue null */ fluid?: boolean | undefined; + /** + * Form control object, typically used for handling validation and form state. + */ + formControl?: Record | undefined; /** * It generates scoped CSS variables using design tokens for the component. */ @@ -141,6 +153,11 @@ export interface InputTextEmitsOptions { * @param {string} value - New value. */ 'update:modelValue'(value: string | undefined): void; + /** + * Emitted when the value changes in uncontrolled mode. + * @param {string} value - New value. + */ + 'value-change'(value: string | undefined): void; } export declare type InputTextEmits = EmitFn; diff --git a/packages/primevue/src/listbox/Listbox.d.ts b/packages/primevue/src/listbox/Listbox.d.ts index b19114f93..9d7531e10 100755 --- a/packages/primevue/src/listbox/Listbox.d.ts +++ b/packages/primevue/src/listbox/Listbox.d.ts @@ -259,6 +259,14 @@ export interface ListboxProps { * Value of the component. */ modelValue?: any; + /** + * The default value for the input when not controlled by `modelValue`. + */ + defaultValue?: any; + /** + * The name attribute for the element, typically used in form submissions. + */ + name?: string | undefined; /** * An array of selectitems to display as the available options. */ @@ -415,6 +423,10 @@ export interface ListboxProps { * Identifier of the underlying input element. */ ariaLabelledby?: string | undefined; + /** + * Form control object, typically used for handling validation and form state. + */ + formControl?: Record | undefined; /** * It generates scoped CSS variables using design tokens for the component. */ @@ -564,6 +576,11 @@ export interface ListboxEmitsOptions { * @param {*} value - New value. */ 'update:modelValue'(value: any): void; + /** + * Emitted when the value changes in uncontrolled mode. + * @param {*} value - New value. + */ + 'value-change'(value: any): void; /** * Callback to invoke on value change. * @param {ListboxChangeEvent} event - Custom change event. diff --git a/packages/primevue/src/multiselect/MultiSelect.d.ts b/packages/primevue/src/multiselect/MultiSelect.d.ts index 5f8df0398..1169dc737 100755 --- a/packages/primevue/src/multiselect/MultiSelect.d.ts +++ b/packages/primevue/src/multiselect/MultiSelect.d.ts @@ -316,6 +316,14 @@ export interface MultiSelectProps { * Value of the component. */ modelValue?: any; + /** + * The default value for the input when not controlled by `modelValue`. + */ + defaultValue?: any; + /** + * The name attribute for the element, typically used in form submissions. + */ + name?: string | undefined; /** * An array of select items to display as the available options. */ @@ -546,6 +554,10 @@ export interface MultiSelectProps { * Identifier of the underlying input element. */ ariaLabelledby?: string | undefined; + /** + * Form control object, typically used for handling validation and form state. + */ + formControl?: Record | undefined; /** * It generates scoped CSS variables using design tokens for the component. */ @@ -808,6 +820,11 @@ export interface MultiSelectEmitsOptions { * @param {*} value - New value. */ 'update:modelValue'(value: any): void; + /** + * Emitted when the value changes in uncontrolled mode. + * @param {*} value - New value. + */ + 'value-change'(value: any): void; /** * Callback to invoke on value change. * @param {MultiSelectChangeEvent} event - Custom change event. diff --git a/packages/primevue/src/password/Password.d.ts b/packages/primevue/src/password/Password.d.ts index 893d5efff..c093a2c97 100755 --- a/packages/primevue/src/password/Password.d.ts +++ b/packages/primevue/src/password/Password.d.ts @@ -174,6 +174,14 @@ export interface PasswordProps extends InputHTMLAttributes { * Value of the component. */ modelValue?: Nullable; + /** + * The default value for the input when not controlled by `modelValue`. + */ + defaultValue?: Nullable; + /** + * The name attribute for the element, typically used in form submissions. + */ + name?: string | undefined; /** * Text to prompt password entry. Defaults to PrimeVue Locale configuration. */ @@ -313,6 +321,10 @@ export interface PasswordProps extends InputHTMLAttributes { * Establishes a string value that labels the component. */ ariaLabel?: string | undefined; + /** + * Form control object, typically used for handling validation and form state. + */ + formControl?: Record | undefined; /** * It generates scoped CSS variables using design tokens for the component. */ @@ -403,6 +415,11 @@ export interface PasswordEmitsOptions { * @param {string} value - New value. */ 'update:modelValue'(value: string): void; + /** + * Emitted when the value changes in uncontrolled mode. + * @param {string} value - New value. + */ + 'value-change'(value: string): void; /** * Callback to invoke on value change. * @param {Event} event - Browser event. diff --git a/packages/primevue/src/radiobutton/RadioButton.d.ts b/packages/primevue/src/radiobutton/RadioButton.d.ts index 2ef7aa16c..d32768931 100755 --- a/packages/primevue/src/radiobutton/RadioButton.d.ts +++ b/packages/primevue/src/radiobutton/RadioButton.d.ts @@ -101,6 +101,10 @@ export interface RadioButtonProps { * Value binding of the checkbox. */ modelValue?: any; + /** + * The default value for the input when not controlled by `modelValue`. + */ + defaultValue?: any; /** * Name of the input element. */ @@ -154,6 +158,10 @@ export interface RadioButtonProps { * Establishes a string value that labels the component. */ ariaLabel?: string | undefined; + /** + * Form control object, typically used for handling validation and form state. + */ + formControl?: Record | undefined; /** * It generates scoped CSS variables using design tokens for the component. */ @@ -202,6 +210,11 @@ export interface RadioButtonEmitsOptions { * @param {*} value - New value. */ 'update:modelValue'(value: any): void; + /** + * Emitted when the value changes in uncontrolled mode. + * @param {*} value - New value. + */ + 'value-change'(value: any): void; /** * Callback to invoke on radio button value change. * @param {Event} event - Browser event. diff --git a/packages/primevue/src/rating/Rating.d.ts b/packages/primevue/src/rating/Rating.d.ts index 713998180..39111b85d 100755 --- a/packages/primevue/src/rating/Rating.d.ts +++ b/packages/primevue/src/rating/Rating.d.ts @@ -144,10 +144,19 @@ export interface RatingProps { * Value of the rating. */ modelValue?: number | undefined; + /** + * The default value for the input when not controlled by `modelValue`. + */ + defaultValue?: number | undefined; /** * Name of the element. */ name?: string | undefined; + /** + * When present, it specifies that the component should have invalid state style. + * @defaultValue false + */ + invalid?: boolean | undefined; /** * When present, it specifies that the element should be disabled. * @defaultValue false @@ -171,6 +180,10 @@ export interface RatingProps { * Icon for the off state. */ offIcon?: string | undefined; + /** + * Form control object, typically used for handling validation and form state. + */ + formControl?: Record | undefined; /** * It generates scoped CSS variables using design tokens for the component. */ @@ -235,6 +248,11 @@ export interface RatingEmitsOptions { * @param {number} value - New value. */ 'update:modelValue'(value: number): void; + /** + * Emitted when the value changes in uncontrolled mode. + * @param {number} value - New value. + */ + 'value-change'(value: number): void; /** * Callback to invoke when a suggestion is selected. * @param {RatingChangeEvent} event - Custom change event. diff --git a/packages/primevue/src/select/Select.d.ts b/packages/primevue/src/select/Select.d.ts index 6d2429706..e935d6490 100755 --- a/packages/primevue/src/select/Select.d.ts +++ b/packages/primevue/src/select/Select.d.ts @@ -291,6 +291,14 @@ export interface SelectProps { * Value of the component. */ modelValue?: any; + /** + * The default value for the input when not controlled by `modelValue`. + */ + defaultValue?: any; + /** + * The name attribute for the element, typically used in form submissions. + */ + name?: string | undefined; /** * An array of select items to display as the available options. */ @@ -532,6 +540,10 @@ export interface SelectProps { * Identifier of the underlying input element. */ ariaLabelledby?: string | undefined; + /** + * Form control object, typically used for handling validation and form state. + */ + formControl?: Record | undefined; /** * It generates scoped CSS variables using design tokens for the component. */ @@ -726,6 +738,11 @@ export interface SelectEmitsOptions { * @param {*} value - New value. */ 'update:modelValue'(value: any): void; + /** + * Emitted when the value changes in uncontrolled mode. + * @param {*} value - New value. + */ + 'value-change'(value: any): void; /** * Callback to invoke on value change. * @param {SelectChangeEvent} event - Custom change event. diff --git a/packages/primevue/src/selectbutton/SelectButton.d.ts b/packages/primevue/src/selectbutton/SelectButton.d.ts index 930237f69..9772c39de 100755 --- a/packages/primevue/src/selectbutton/SelectButton.d.ts +++ b/packages/primevue/src/selectbutton/SelectButton.d.ts @@ -129,6 +129,14 @@ export interface SelectButtonProps { * Value of the component. */ modelValue?: any; + /** + * The default value for the input when not controlled by `modelValue`. + */ + defaultValue?: any; + /** + * The name attribute for the element, typically used in form submissions. + */ + name?: string | undefined; /** * An array of selectitems to display as the available options. */ @@ -173,6 +181,10 @@ export interface SelectButtonProps { * Identifier of the underlying element. */ ariaLabelledby?: string | undefined; + /** + * Form control object, typically used for handling validation and form state. + */ + formControl?: Record | undefined; /** * It generates scoped CSS variables using design tokens for the component. */ @@ -223,6 +235,11 @@ export interface SelectButtonEmitsOptions { * @param {*} value - New value. */ 'update:modelValue'(value: any): void; + /** + * Emitted when the value changes in uncontrolled mode. + * @param {*} value - New value. + */ + 'value-change'(value: any): void; /** * Callback to invoke on value change. * @param {SelectButtonChangeEvent} event - Custom change event. diff --git a/packages/primevue/src/slider/Slider.d.ts b/packages/primevue/src/slider/Slider.d.ts index da6d91b01..5ba1f1e97 100755 --- a/packages/primevue/src/slider/Slider.d.ts +++ b/packages/primevue/src/slider/Slider.d.ts @@ -101,6 +101,14 @@ export interface SliderProps { * Value of the component. */ modelValue?: number | number[] | undefined; + /** + * The default value for the input when not controlled by `modelValue`. + */ + defaultValue?: number | number[] | undefined; + /** + * The name attribute for the element, typically used in form submissions. + */ + name?: string | undefined; /** * Mininum boundary value. * @defaultValue 0 @@ -126,6 +134,11 @@ export interface SliderProps { * @defaultValue false */ range?: boolean | undefined; + /** + * When present, it specifies that the component should have invalid state style. + * @defaultValue false + */ + invalid?: boolean | undefined; /** * When present, it specifies that the component should be disabled. * @defaultValue false @@ -143,6 +156,10 @@ export interface SliderProps { * Used to define a string that labels the element. */ ariaLabel?: string | undefined; + /** + * Form control object, typically used for handling validation and form state. + */ + formControl?: Record | undefined; /** * It generates scoped CSS variables using design tokens for the component. */ @@ -178,6 +195,11 @@ export interface SliderEmitsOptions { * @param {number | number[]} value - New value. */ 'update:modelValue'(value: number | number[]): void; + /** + * Emitted when the value changes in uncontrolled mode. + * @param {number | number[]} value - New value. + */ + 'value-change'(value: number | number[]): void; /** * Callback to invoke on value change. * @param {number} value - New value diff --git a/packages/primevue/src/textarea/Textarea.d.ts b/packages/primevue/src/textarea/Textarea.d.ts index 2d2932b9f..d58a4fd7e 100755 --- a/packages/primevue/src/textarea/Textarea.d.ts +++ b/packages/primevue/src/textarea/Textarea.d.ts @@ -92,6 +92,14 @@ export interface TextareaProps extends TextareaHTMLAttributes { * Value of the component. */ modelValue?: Nullable; + /** + * The default value for the input when not controlled by `modelValue`. + */ + defaultValue?: Nullable; + /** + * The name attribute for the element, typically used in form submissions. + */ + name?: string | undefined; /** * When present, height of textarea changes as being typed. * @defaultValue false @@ -112,6 +120,10 @@ export interface TextareaProps extends TextareaHTMLAttributes { * @defaultValue null */ fluid?: boolean | undefined; + /** + * Form control object, typically used for handling validation and form state. + */ + formControl?: Record | undefined; /** * It generates scoped CSS variables using design tokens for the component. */ @@ -147,6 +159,11 @@ export interface TextareaEmitsOptions { * @param {string} value - New value. */ 'update:modelValue': (value: string) => void; + /** + * Emitted when the value changes in uncontrolled mode. + * @param {string} value - New value. + */ + 'value-change'(value: string): void; } export declare type TextareaEmits = EmitFn; diff --git a/packages/primevue/src/togglebutton/ToggleButton.d.ts b/packages/primevue/src/togglebutton/ToggleButton.d.ts index 13a97e2ef..66a594ad3 100755 --- a/packages/primevue/src/togglebutton/ToggleButton.d.ts +++ b/packages/primevue/src/togglebutton/ToggleButton.d.ts @@ -104,6 +104,14 @@ export interface ToggleButtonProps { * @defaultValue false */ modelValue?: boolean | undefined; + /** + * The default value for the input when not controlled by `modelValue`. + */ + defaultValue?: boolean | undefined; + /** + * The name attribute for the element, typically used in form submissions. + */ + name?: string | undefined; /** * Icon for the on state. */ @@ -150,6 +158,10 @@ export interface ToggleButtonProps { * Establishes relationships between the component and label(s) where its value should be one or more element IDs. */ ariaLabelledby?: string | undefined; + /** + * Form control object, typically used for handling validation and form state. + */ + formControl?: Record | undefined; /** * It generates scoped CSS variables using design tokens for the component. */ @@ -204,6 +216,11 @@ export interface ToggleButtonEmitsOptions { * @param {boolean} value - New value. */ 'update:modelValue'(value: boolean): void; + /** + * Emitted when the value changes in uncontrolled mode. + * @param {boolean} value - New value. + */ + 'value-change'(value: boolean): void; /** * Callback to invoke on value change. * @param {Event} event - Browser event. diff --git a/packages/primevue/src/toggleswitch/ToggleSwitch.d.ts b/packages/primevue/src/toggleswitch/ToggleSwitch.d.ts index f634f26c9..d9cfd6b0b 100755 --- a/packages/primevue/src/toggleswitch/ToggleSwitch.d.ts +++ b/packages/primevue/src/toggleswitch/ToggleSwitch.d.ts @@ -88,6 +88,14 @@ export interface ToggleSwitchProps { * @defaultValue false */ modelValue?: boolean | string | undefined; + /** + * The default value for the input when not controlled by `modelValue`. + */ + defaultValue?: boolean | string | undefined; + /** + * The name attribute for the element, typically used in form submissions. + */ + name?: string | undefined; /** * Value in checked state. * @defaultValue true @@ -137,6 +145,10 @@ export interface ToggleSwitchProps { * Establishes a string value that labels the component. */ ariaLabel?: string | undefined; + /** + * Form control object, typically used for handling validation and form state. + */ + formControl?: Record | undefined; /** * It generates scoped CSS variables using design tokens for the component. */ @@ -196,6 +208,11 @@ export interface ToggleSwitchEmitsOptions { * @param {boolean} value - New value. */ 'update:modelValue'(value: boolean): void; + /** + * Emitted when the value changes in uncontrolled mode. + * @param {boolean} value - New value. + */ + 'value-change'(value: boolean): void; /** * Callback to invoke on value change. * @param {Event} event - Browser event. diff --git a/packages/primevue/src/treeselect/TreeSelect.d.ts b/packages/primevue/src/treeselect/TreeSelect.d.ts index 90b74a9bd..021b9527f 100644 --- a/packages/primevue/src/treeselect/TreeSelect.d.ts +++ b/packages/primevue/src/treeselect/TreeSelect.d.ts @@ -173,6 +173,14 @@ export interface TreeSelectProps { * Value of the component. */ modelValue?: TreeNode | any; + /** + * The default value for the input when not controlled by `modelValue`. + */ + defaultValue?: TreeNode | any; + /** + * The name attribute for the element, typically used in form submissions. + */ + name?: string | undefined; /** * An array of treenodes. */ @@ -304,6 +312,10 @@ export interface TreeSelectProps { * Establishes a string value that labels the component. */ ariaLabel?: string | undefined; + /** + * Form control object, typically used for handling validation and form state. + */ + formControl?: Record | undefined; /** * It generates scoped CSS variables using design tokens for the component. */ @@ -468,6 +480,11 @@ export interface TreeSelectEmitsOptions { * @param {*} value - New value. */ 'update:modelValue'(value: any): void; + /** + * Emitted when the value changes in uncontrolled mode. + * @param {*} value - New value. + */ + 'value-change'(value: any): void; /** * Emitted when the expanded keys change. * @param {TreeNode} value - New expanded keys. From 0a1c3cc72f62a3e158db76c930088181861b4efe Mon Sep 17 00:00:00 2001 From: Mert Sincan Date: Mon, 21 Oct 2024 13:03:25 +0100 Subject: [PATCH 027/117] Update autoimport for form --- packages/metadata/src/components/index.ts | 4 +++- packages/primevue/src/config/Config.d.ts | 4 ++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/metadata/src/components/index.ts b/packages/metadata/src/components/index.ts index 42b77928e..cd14ac4d5 100644 --- a/packages/metadata/src/components/index.ts +++ b/packages/metadata/src/components/index.ts @@ -96,5 +96,7 @@ export const media: MetaType[] = toMeta(['Carousel', 'Galleria', 'Image', 'Image export const misc: MetaType[] = toMeta(['Avatar', 'AvatarGroup', 'Badge', 'BlockUI', 'Chip', 'Inplace', 'MeterGroup', 'OverlayBadge', 'ScrollTop', 'Skeleton', 'ProgressBar', 'ProgressSpinner', 'Tag', 'Terminal']); +export const extensions: MetaType[] = toMeta([{ name: 'Form', from: '@primevue/form/form' }]); + // All PrimeVue Components -export const components: MetaType[] = [...form, ...button, ...data, ...panel, ...overlay, ...file, ...menu, ...chart, ...messages, ...media, ...misc]; +export const components: MetaType[] = [...form, ...button, ...data, ...panel, ...overlay, ...file, ...menu, ...chart, ...messages, ...media, ...misc, ...extensions]; diff --git a/packages/primevue/src/config/Config.d.ts b/packages/primevue/src/config/Config.d.ts index 438b2910f..006fd368f 100644 --- a/packages/primevue/src/config/Config.d.ts +++ b/packages/primevue/src/config/Config.d.ts @@ -21,6 +21,7 @@ import type { CarouselPassThroughOptions } from 'primevue/carousel'; import type { CascadeSelectPassThroughOptions } from 'primevue/cascadeselect'; import type { ChartPassThroughOptions } from 'primevue/chart'; import type { CheckboxPassThroughOptions } from 'primevue/checkbox'; +import type { CheckboxGroupPassThroughOptions } from 'primevue/checkboxgroup'; import type { ChipPassThroughOptions } from 'primevue/chip'; import type { ChipsPassThroughOptions } from 'primevue/chips'; import type { ColorPickerPassThroughOptions } from 'primevue/colorpicker'; @@ -83,6 +84,7 @@ import type { PopoverPassThroughOptions } from 'primevue/popover'; import type { ProgressBarPassThroughOptions } from 'primevue/progressbar'; import type { ProgressSpinnerPassThroughOptions } from 'primevue/progressspinner'; import type { RadioButtonPassThroughOptions } from 'primevue/radiobutton'; +import type { RadioButtonGroupPassThroughOptions } from 'primevue/radiobuttongroup'; import type { RatingPassThroughOptions } from 'primevue/rating'; import type { RippleDirectivePassThroughOptions } from 'primevue/ripple'; import type { RowPassThroughOptions } from 'primevue/row'; @@ -173,6 +175,7 @@ export interface PrimeVuePTOptions { cascadeselect?: DefaultPassThrough; chart?: DefaultPassThrough; checkbox?: DefaultPassThrough; + checkboxgroup?: DefaultPassThrough; chip?: DefaultPassThrough; /** * @deprecated since v4. Use the new structure of InputChips instead. @@ -245,6 +248,7 @@ export interface PrimeVuePTOptions { progressbar?: DefaultPassThrough; progressspinner?: DefaultPassThrough; radiobutton?: DefaultPassThrough; + radiobuttongroup?: DefaultPassThrough; rating?: DefaultPassThrough; row?: DefaultPassThrough; scrollpanel?: DefaultPassThrough; From 49ad1d6d9fc582d7dcfa26f29b5995919314038d Mon Sep 17 00:00:00 2001 From: Mert Sincan Date: Mon, 21 Oct 2024 13:06:33 +0100 Subject: [PATCH 028/117] Change sass* version for warnings --- apps/showcase/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/showcase/package.json b/apps/showcase/package.json index 77bedae7e..857f7a21a 100644 --- a/apps/showcase/package.json +++ b/apps/showcase/package.json @@ -47,8 +47,8 @@ "prettier": "2.7.1", "primeicons": "^7.0.0", "quill": "^1.3.7", - "sass": "^1.45.0", - "sass-loader": "^8.0.2", + "sass": "1.45.0", + "sass-loader": "8.0.2", "tailwindcss": "^3.4.1", "tailwindcss-primeui": "^0.3.2", "typedoc": "0.23.23", From 8ee19519c999ccc88ffd64d82e47d9dade09d3aa Mon Sep 17 00:00:00 2001 From: Mert Sincan Date: Mon, 21 Oct 2024 13:12:39 +0100 Subject: [PATCH 029/117] remove joi --- apps/showcase/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/showcase/package.json b/apps/showcase/package.json index 857f7a21a..56efd0575 100644 --- a/apps/showcase/package.json +++ b/apps/showcase/package.json @@ -59,7 +59,6 @@ "@primevue/form": "workspace:*", "yup": "1.4.0", "zod": "3.23.8", - "joi": "^17.13.3", "valibot": "^0.42.1", "superstruct": "^2.0.2" }, From b2626114e196d7040f851fac4de14c3af0c84fae Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Mon, 21 Oct 2024 15:32:50 +0300 Subject: [PATCH 030/117] InputText validation demo added --- apps/showcase/doc/inputtext/FormDoc.vue | 98 +++++++++++++++++++++++++ apps/showcase/pages/inputtext/index.vue | 6 ++ 2 files changed, 104 insertions(+) create mode 100644 apps/showcase/doc/inputtext/FormDoc.vue diff --git a/apps/showcase/doc/inputtext/FormDoc.vue b/apps/showcase/doc/inputtext/FormDoc.vue new file mode 100644 index 000000000..dc1a422f6 --- /dev/null +++ b/apps/showcase/doc/inputtext/FormDoc.vue @@ -0,0 +1,98 @@ + + + diff --git a/apps/showcase/pages/inputtext/index.vue b/apps/showcase/pages/inputtext/index.vue index 1b97e20fc..128e88085 100755 --- a/apps/showcase/pages/inputtext/index.vue +++ b/apps/showcase/pages/inputtext/index.vue @@ -8,6 +8,7 @@ import BasicDoc from '@/doc/inputtext/BasicDoc.vue'; import DisabledDoc from '@/doc/inputtext/DisabledDoc.vue'; import FilledDoc from '@/doc/inputtext/FilledDoc.vue'; import FloatLabelDoc from '@/doc/inputtext/FloatLabelDoc.vue'; +import FormDoc from '@/doc/inputtext/FormDoc.vue'; import HelpTextDoc from '@/doc/inputtext/HelpTextDoc.vue'; import IftaLabelDoc from '@/doc/inputtext/IftaLabelDoc.vue'; import ImportDoc from '@/doc/inputtext/ImportDoc.vue'; @@ -30,6 +31,11 @@ export default { label: 'Basic', component: BasicDoc }, + { + id: 'form', + label: 'Form', + component: FormDoc + }, { id: 'filled', label: 'Filled', From 2f92dbfa9988fa5b7d35e0af260cd5efe6b18668 Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Mon, 21 Oct 2024 15:37:41 +0300 Subject: [PATCH 031/117] Update FormDoc.vue --- apps/showcase/doc/inputtext/FormDoc.vue | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/apps/showcase/doc/inputtext/FormDoc.vue b/apps/showcase/doc/inputtext/FormDoc.vue index dc1a422f6..102bf10c8 100644 --- a/apps/showcase/doc/inputtext/FormDoc.vue +++ b/apps/showcase/doc/inputtext/FormDoc.vue @@ -86,9 +86,7 @@ const value = ref(null); this.resolver = zodResolver(this.schema); }, methods: { - onFormSubmit({ valid, values, states }) { - console.log(values, states); - + onFormSubmit({ valid }) { if (valid) { this.$toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 }); } From fcac401158c1639c687566dfa25f6f9ca9edb000 Mon Sep 17 00:00:00 2001 From: Mert Sincan Date: Mon, 21 Oct 2024 14:03:04 +0100 Subject: [PATCH 032/117] Update `SelectButton` --- package.json | 3 ++- packages/form/package.json | 4 ++-- packages/primevue/src/selectbutton/SelectButton.vue | 1 - 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 1347a0119..1fbedf2fe 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "release:rc": "pnpm run build && pnpm recursive publish --filter './packages/*' --no-git-checks --report-summary --tag rc", "build": "NODE_ENV=production pnpm run build:check && pnpm run build:packages", "build:check": "pnpm run format:check && pnpm run security:check", - "build:packages": "pnpm run build:metadata && pnpm run build:resolver && pnpm run build:core && pnpm run build:lib && pnpm run build:module && pnpm run build:themes && pnpm run build:icons && pnpm run build:showcase", + "build:packages": "pnpm run build:metadata && pnpm run build:resolver && pnpm run build:core && pnpm run build:lib && pnpm run build:module && pnpm run build:themes && pnpm run build:icons && pnpm run build:form && pnpm run build:showcase", "build:resolver": "pnpm --filter auto-import-resolver build", "build:core": "pnpm --filter core build", "build:metadata": "pnpm --filter metadata build", @@ -27,6 +27,7 @@ "build:lib": "pnpm --filter primevue build", "build:themes": "pnpm --filter themes build", "build:icons": "pnpm --filter icons build", + "build:form": "pnpm --filter form build", "build:showcase": "pnpm --filter showcase build", "build:apidoc": "pnpm --filter themes build:tokens && pnpm --filter showcase build:apidoc", "dev": "pnpm --filter showcase dev", diff --git a/packages/form/package.json b/packages/form/package.json index ce886d0ad..96de14ca1 100644 --- a/packages/form/package.json +++ b/packages/form/package.json @@ -1,6 +1,6 @@ { "name": "@primevue/form", - "version": "4.1.0", + "version": "4.1.1", "author": "PrimeTek Informatics", "description": "", "homepage": "https://primevue.org/", @@ -55,4 +55,4 @@ "engines": { "node": ">=12.11.0" } -} +} \ No newline at end of file diff --git a/packages/primevue/src/selectbutton/SelectButton.vue b/packages/primevue/src/selectbutton/SelectButton.vue index 64208988e..0bae9077f 100755 --- a/packages/primevue/src/selectbutton/SelectButton.vue +++ b/packages/primevue/src/selectbutton/SelectButton.vue @@ -2,7 +2,6 @@