Fixed #4742 - New InputGroup Component

components/lib/inputgroupaddon/BaseInputGroupAddon.vue

@@ -0,0 +1,15 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import InputGroupAddonStyle from 'primevue/inputgroupaddon/style';
+
+export default {
+    name: 'BaseInputGroupAddon',
+    extends: BaseComponent,
+    style: InputGroupAddonStyle,
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>

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<InputGroupPassThroughOptions>;
+    /**
+     * 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<InputGroupProps, InputGroupSlots, InputGroupEmits> {}
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        InputGroupAddon: GlobalComponentConstructor<InputGroupAddon>;
+    }
+}
+
+export default InputGroupAddon;

components/lib/inputgroupaddon/InputGroupAddon.vue

@@ -0,0 +1,14 @@
+<template>
+    <div :class="cx('root')" v-bind="ptm('root')" data-pc-name="inputgroupaddon">
+        <slot />
+    </div>
+</template>
+
+<script>
+import BaseInputGroupAddon from './BaseInputGroupAddon.vue';
+
+export default {
+    name: 'InputGroupAddon',
+    extends: BaseInputGroupAddon
+};
+</script>

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"
+    }
+}

components/lib/inputgroupaddon/style/InputGroupAddonStyle.d.ts

@@ -0,0 +1,3 @@
+import { BaseStyle } from '../../base/style';
+
+export interface InputGroupAddonStyle extends BaseStyle {}

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
+});

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"
+}