From 5d8babd349819d3130d8a02d53cd6d56651a6bc8 Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Thu, 2 Nov 2023 15:48:32 +0300 Subject: [PATCH] Fixed #4742 - New InputGroup Component --- components/lib/inputgroup/BaseInputGroup.vue | 15 +++ components/lib/inputgroup/InputGroup.d.ts | 114 ++++++++++++++++++ components/lib/inputgroup/InputGroup.vue | 14 +++ components/lib/inputgroup/package.json | 9 ++ .../lib/inputgroup/style/InputGroupStyle.d.ts | 3 + .../lib/inputgroup/style/InputGroupStyle.js | 10 ++ components/lib/inputgroup/style/package.json | 6 + .../inputgroupaddon/BaseInputGroupAddon.vue | 15 +++ .../lib/inputgroupaddon/InputGroupAddon.d.ts | 114 ++++++++++++++++++ .../lib/inputgroupaddon/InputGroupAddon.vue | 14 +++ components/lib/inputgroupaddon/package.json | 9 ++ .../style/InputGroupAddonStyle.d.ts | 3 + .../style/InputGroupAddonStyle.js | 10 ++ .../lib/inputgroupaddon/style/package.json | 6 + .../runtime/core/components/index.js | 2 + nuxt-vite.config.js | 2 + rollup.config.js | 2 + 17 files changed, 348 insertions(+) create mode 100644 components/lib/inputgroup/BaseInputGroup.vue create mode 100644 components/lib/inputgroup/InputGroup.d.ts create mode 100644 components/lib/inputgroup/InputGroup.vue create mode 100644 components/lib/inputgroup/package.json create mode 100644 components/lib/inputgroup/style/InputGroupStyle.d.ts create mode 100644 components/lib/inputgroup/style/InputGroupStyle.js create mode 100644 components/lib/inputgroup/style/package.json create mode 100644 components/lib/inputgroupaddon/BaseInputGroupAddon.vue create mode 100644 components/lib/inputgroupaddon/InputGroupAddon.d.ts create mode 100644 components/lib/inputgroupaddon/InputGroupAddon.vue create mode 100644 components/lib/inputgroupaddon/package.json create mode 100644 components/lib/inputgroupaddon/style/InputGroupAddonStyle.d.ts create mode 100644 components/lib/inputgroupaddon/style/InputGroupAddonStyle.js create mode 100644 components/lib/inputgroupaddon/style/package.json diff --git a/components/lib/inputgroup/BaseInputGroup.vue b/components/lib/inputgroup/BaseInputGroup.vue new file mode 100644 index 0000000000..c5aa256484 --- /dev/null +++ b/components/lib/inputgroup/BaseInputGroup.vue @@ -0,0 +1,15 @@ + diff --git a/components/lib/inputgroup/InputGroup.d.ts b/components/lib/inputgroup/InputGroup.d.ts new file mode 100644 index 0000000000..8ff295c742 --- /dev/null +++ b/components/lib/inputgroup/InputGroup.d.ts @@ -0,0 +1,114 @@ +/** + * + * InputGroup displays text, icon, buttons and other content can be grouped next to an input. + * + * [Live Demo](https://www.primevue.org/inputgroup/) + * + * @module inputgroup + * + */ +import { VNode } from 'vue'; +import { ComponentHooks } from '../basecomponent'; +import { PassThroughOptions } from '../passthrough'; +import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers'; + +export declare type InputGroupPassThroughOptionType = InputGroupPassThroughAttributes | ((options: InputGroupPassThroughMethodOptions) => InputGroupPassThroughAttributes | string) | string | null | undefined; + +/** + * Custom passthrough(pt) option method. + */ +export interface InputGroupPassThroughMethodOptions { + /** + * Defines instance. + */ + instance: any; + /** + * Defines passthrough(pt) options in global config. + */ + global: object | undefined; +} + +/** + * Custom passthrough(pt) options. + * @see {@link InputGroupProps.pt} + */ +export interface InputGroupPassThroughOptions { + /** + * Used to pass attributes to the root's DOM element. + */ + root?: InputGroupPassThroughOptionType; + /** + * Used to manage all lifecycle hooks + * @see {@link BaseComponent.ComponentHooks} + */ + hooks?: ComponentHooks; +} + +/** + * Custom passthrough attributes for each DOM elements + */ +export interface InputGroupPassThroughAttributes { + [key: string]: any; +} + +/** + * Defines valid properties in InputGroup component. + */ +export interface InputGroupProps { + /** + * Used to pass attributes to DOM elements inside the component. + * @type {InputGroupPassThroughOptions} + */ + 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 InputGroup component. + */ +export interface InputGroupSlots { + /** + * Custom default template. + */ + default(): VNode[]; + /** + * Dynamic content template. + * @todo + */ + [key: string]: (node: any) => VNode[]; +} + +/** + * Defines valid emits in InputGroup component. + */ +export interface InputGroupEmits {} + +/** + * **PrimeVue - InputGroup** + * + * _InputGroup displays text, icon, buttons and other content can be grouped next to an input._ + * + * [Live Demo](https://www.primevue.org/inputgroup/) + * --- --- + * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) + * + * @group Component + */ +declare class InputGroup extends ClassComponent {} + +declare module '@vue/runtime-core' { + interface GlobalComponents { + InputGroup: GlobalComponentConstructor; + } +} + +export default InputGroup; diff --git a/components/lib/inputgroup/InputGroup.vue b/components/lib/inputgroup/InputGroup.vue new file mode 100644 index 0000000000..f281102b4a --- /dev/null +++ b/components/lib/inputgroup/InputGroup.vue @@ -0,0 +1,14 @@ + + + diff --git a/components/lib/inputgroup/package.json b/components/lib/inputgroup/package.json new file mode 100644 index 0000000000..cc3baf8eef --- /dev/null +++ b/components/lib/inputgroup/package.json @@ -0,0 +1,9 @@ +{ + "main": "./inputgroup.cjs.js", + "module": "./inputgroup.esm.js", + "unpkg": "./inputgroup.min.js", + "types": "./InputGroup.d.ts", + "browser": { + "./sfc": "./InputGroup.vue" + } +} \ No newline at end of file diff --git a/components/lib/inputgroup/style/InputGroupStyle.d.ts b/components/lib/inputgroup/style/InputGroupStyle.d.ts new file mode 100644 index 0000000000..3cd83c5b46 --- /dev/null +++ b/components/lib/inputgroup/style/InputGroupStyle.d.ts @@ -0,0 +1,3 @@ +import { BaseStyle } from '../../base/style'; + +export interface InputGroupStyle extends BaseStyle {} diff --git a/components/lib/inputgroup/style/InputGroupStyle.js b/components/lib/inputgroup/style/InputGroupStyle.js new file mode 100644 index 0000000000..051f9a5edc --- /dev/null +++ b/components/lib/inputgroup/style/InputGroupStyle.js @@ -0,0 +1,10 @@ +import BaseStyle from 'primevue/base/style'; + +const classes = { + root: 'p-inputgroup' +}; + +export default BaseStyle.extend({ + name: 'inputgroup', + classes +}); diff --git a/components/lib/inputgroup/style/package.json b/components/lib/inputgroup/style/package.json new file mode 100644 index 0000000000..77bd264b9b --- /dev/null +++ b/components/lib/inputgroup/style/package.json @@ -0,0 +1,6 @@ +{ + "main": "./inputgroupstyle.cjs.js", + "module": "./inputgroupstyle.esm.js", + "unpkg": "./inputgroupstyle.min.js", + "types": "./InputGroupStyle.d.ts" +} \ No newline at end of file diff --git a/components/lib/inputgroupaddon/BaseInputGroupAddon.vue b/components/lib/inputgroupaddon/BaseInputGroupAddon.vue new file mode 100644 index 0000000000..b5e29ffb26 --- /dev/null +++ b/components/lib/inputgroupaddon/BaseInputGroupAddon.vue @@ -0,0 +1,15 @@ + diff --git a/components/lib/inputgroupaddon/InputGroupAddon.d.ts b/components/lib/inputgroupaddon/InputGroupAddon.d.ts new file mode 100644 index 0000000000..0e9a406a38 --- /dev/null +++ b/components/lib/inputgroupaddon/InputGroupAddon.d.ts @@ -0,0 +1,114 @@ +/** + * + * InputGroupAddon displays text, icon, buttons and other content can be grouped next to an input. + * + * [Live Demo](https://www.primevue.org/inputgroup/) + * + * @module inputgroupaddon + * + */ +import { VNode } from 'vue'; +import { ComponentHooks } from '../basecomponent'; +import { PassThroughOptions } from '../passthrough'; +import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers'; + +export declare type InputGroupPassThroughOptionType = InputGroupPassThroughAttributes | ((options: InputGroupPassThroughMethodOptions) => InputGroupPassThroughAttributes | string) | string | null | undefined; + +/** + * Custom passthrough(pt) option method. + */ +export interface InputGroupPassThroughMethodOptions { + /** + * Defines instance. + */ + instance: any; + /** + * Defines passthrough(pt) options in global config. + */ + global: object | undefined; +} + +/** + * Custom passthrough(pt) options. + * @see {@link InputGroupProps.pt} + */ +export interface InputGroupPassThroughOptions { + /** + * Used to pass attributes to the root's DOM element. + */ + root?: InputGroupPassThroughOptionType; + /** + * Used to manage all lifecycle hooks + * @see {@link BaseComponent.ComponentHooks} + */ + hooks?: ComponentHooks; +} + +/** + * Custom passthrough attributes for each DOM elements + */ +export interface InputGroupPassThroughAttributes { + [key: string]: any; +} + +/** + * Defines valid properties in InputGroupAddon component. + */ +export interface InputGroupProps { + /** + * Used to pass attributes to DOM elements inside the component. + * @type {InputGroupPassThroughOptions} + */ + 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 InputGroupAddon component. + */ +export interface InputGroupSlots { + /** + * Custom default template. + */ + default(): VNode[]; + /** + * Dynamic content template. + * @todo + */ + [key: string]: (node: any) => VNode[]; +} + +/** + * Defines valid emits in InputGroupAddon component. + */ +export interface InputGroupEmits {} + +/** + * **PrimeVue - InputGroupAddon** + * + * _InputGroup displays text, icon, buttons and other content can be grouped next to an input._ + * + * [Live Demo](https://www.primevue.org/inputgroup/) + * --- --- + * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) + * + * @group Component + */ +declare class InputGroupAddon extends ClassComponent {} + +declare module '@vue/runtime-core' { + interface GlobalComponents { + InputGroupAddon: GlobalComponentConstructor; + } +} + +export default InputGroupAddon; diff --git a/components/lib/inputgroupaddon/InputGroupAddon.vue b/components/lib/inputgroupaddon/InputGroupAddon.vue new file mode 100644 index 0000000000..8df8a9bba9 --- /dev/null +++ b/components/lib/inputgroupaddon/InputGroupAddon.vue @@ -0,0 +1,14 @@ + + + diff --git a/components/lib/inputgroupaddon/package.json b/components/lib/inputgroupaddon/package.json new file mode 100644 index 0000000000..cea4e8903b --- /dev/null +++ b/components/lib/inputgroupaddon/package.json @@ -0,0 +1,9 @@ +{ + "main": "./inputgroupaddon.cjs.js", + "module": "./inputgrouaddonp.esm.js", + "unpkg": "./inputgroupaddon.min.js", + "types": "./InputGroupAddon.d.ts", + "browser": { + "./sfc": "./InputGroupAddon.vue" + } +} diff --git a/components/lib/inputgroupaddon/style/InputGroupAddonStyle.d.ts b/components/lib/inputgroupaddon/style/InputGroupAddonStyle.d.ts new file mode 100644 index 0000000000..cbfe1a7505 --- /dev/null +++ b/components/lib/inputgroupaddon/style/InputGroupAddonStyle.d.ts @@ -0,0 +1,3 @@ +import { BaseStyle } from '../../base/style'; + +export interface InputGroupAddonStyle extends BaseStyle {} diff --git a/components/lib/inputgroupaddon/style/InputGroupAddonStyle.js b/components/lib/inputgroupaddon/style/InputGroupAddonStyle.js new file mode 100644 index 0000000000..4564c1eeb6 --- /dev/null +++ b/components/lib/inputgroupaddon/style/InputGroupAddonStyle.js @@ -0,0 +1,10 @@ +import BaseStyle from 'primevue/base/style'; + +const classes = { + root: 'p-inputgroup-addon' +}; + +export default BaseStyle.extend({ + name: 'inputgroupaddon', + classes +}); diff --git a/components/lib/inputgroupaddon/style/package.json b/components/lib/inputgroupaddon/style/package.json new file mode 100644 index 0000000000..f1f6345fff --- /dev/null +++ b/components/lib/inputgroupaddon/style/package.json @@ -0,0 +1,6 @@ +{ + "main": "./inputgroupaddonstyle.cjs.js", + "module": "./inputgroupaddonstyle.esm.js", + "unpkg": "./inputgroupaddonstyle.min.js", + "types": "./InputGroupAddonStyle.d.ts" +} diff --git a/modules/nuxt-primevue/runtime/core/components/index.js b/modules/nuxt-primevue/runtime/core/components/index.js index 7814ec0438..0cf8830ec8 100644 --- a/modules/nuxt-primevue/runtime/core/components/index.js +++ b/modules/nuxt-primevue/runtime/core/components/index.js @@ -7,6 +7,8 @@ const form = [ 'ColorPicker', 'Dropdown', 'Editor', + 'InputGroup', + 'InputGroupAddon', 'InputMask', 'InputNumber', 'InputSwitch', diff --git a/nuxt-vite.config.js b/nuxt-vite.config.js index 10fa77d50e..143bd7bdf5 100644 --- a/nuxt-vite.config.js +++ b/nuxt-vite.config.js @@ -48,6 +48,8 @@ const STYLE_ALIAS = { 'primevue/image/style': path.resolve(__dirname, './components/lib/image/style/ImageStyle.js'), 'primevue/inlinemessage/style': path.resolve(__dirname, './components/lib/inlinemessage/style/InlineMessageStyle.js'), 'primevue/inplace/style': path.resolve(__dirname, './components/lib/inplace/style/InplaceStyle.js'), + 'primevue/inputgroup/style': path.resolve(__dirname, './components/lib/inputgroup/style/InputGroupStyle.js'), + 'primevue/inputgroupaddon/style': path.resolve(__dirname, './components/lib/inputgroupaddon/style/InputGroupAddonStyle.js'), 'primevue/inputmask/style': path.resolve(__dirname, './components/lib/inputmask/style/InputMaskStyle.js'), 'primevue/inputnumber/style': path.resolve(__dirname, './components/lib/inputnumber/style/InputNumberStyle.js'), 'primevue/inputswitch/style': path.resolve(__dirname, './components/lib/inputswitch/style/InputSwitchStyle.js'), diff --git a/rollup.config.js b/rollup.config.js index bc6296fa7c..099c7d8a05 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -112,6 +112,8 @@ const CORE_STYLE_DEPENDENCIES = { 'primevue/image/style': 'primevue.image.style', 'primevue/inlinemessage/style': 'primevue.inlinemessage.style', 'primevue/inplace/style': 'primevue.inplace.style', + 'primevue/inputgroup/style': 'primevue.inputgroup.style', + 'primevue/inputgroupaddon/style': 'primevue.inputgroupaddon.style', 'primevue/inputmask/style': 'primevue.inputmask.style', 'primevue/inputnumber/style': 'primevue.inputnumber.style', 'primevue/inputswitch/style': 'primevue.inputswitch.style',