From 53985c1855e8898bf8bc2905c6d70e2b8bed2310 Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Tue, 17 Sep 2024 13:02:13 +0300 Subject: [PATCH] New IftaLabel component first implementation --- packages/metadata/src/components/index.ts | 1 + packages/primevue/package.json | 2 + .../primevue/src/iftalabel/BaseIftaLabel.vue | 16 +++ .../primevue/src/iftalabel/IftaLabel.d.ts | 130 ++++++++++++++++++ packages/primevue/src/iftalabel/IftaLabel.vue | 15 ++ packages/primevue/src/iftalabel/package.json | 11 ++ .../src/iftalabel/style/IftaLabelStyle.d.ts | 19 +++ .../src/iftalabel/style/IftaLabelStyle.js | 14 ++ .../primevue/src/iftalabel/style/package.json | 6 + 9 files changed, 214 insertions(+) create mode 100644 packages/primevue/src/iftalabel/BaseIftaLabel.vue create mode 100644 packages/primevue/src/iftalabel/IftaLabel.d.ts create mode 100644 packages/primevue/src/iftalabel/IftaLabel.vue create mode 100644 packages/primevue/src/iftalabel/package.json create mode 100644 packages/primevue/src/iftalabel/style/IftaLabelStyle.d.ts create mode 100644 packages/primevue/src/iftalabel/style/IftaLabelStyle.js create mode 100644 packages/primevue/src/iftalabel/style/package.json diff --git a/packages/metadata/src/components/index.ts b/packages/metadata/src/components/index.ts index 4de97512c..9b0f9a570 100644 --- a/packages/metadata/src/components/index.ts +++ b/packages/metadata/src/components/index.ts @@ -13,6 +13,7 @@ export const form: MetaType[] = toMeta([ 'FloatLabel', 'Fluid', 'IconField', + 'IftaLabel', 'InputChips', 'InputGroup', 'InputGroupAddon', diff --git a/packages/primevue/package.json b/packages/primevue/package.json index 98a5bbd62..60d77ad0b 100644 --- a/packages/primevue/package.json +++ b/packages/primevue/package.json @@ -138,6 +138,8 @@ "./galleria/style": "./src/galleria/style/GalleriaStyle.js", "./iconfield": "./src/iconfield/IconField.vue", "./iconfield/style": "./src/iconfield/style/IconFieldStyle.js", + "./iftalabel": "./src/iftalabel/IftaLabel.vue", + "./iftalabel/style": "./src/iftalabel/style/IftaLabelStyle.js", "./image": "./src/image/Image.vue", "./image/style": "./src/image/style/ImageStyle.js", "./inlinemessage": "./src/inlinemessage/InlineMessage.vue", diff --git a/packages/primevue/src/iftalabel/BaseIftaLabel.vue b/packages/primevue/src/iftalabel/BaseIftaLabel.vue new file mode 100644 index 000000000..071f914fb --- /dev/null +++ b/packages/primevue/src/iftalabel/BaseIftaLabel.vue @@ -0,0 +1,16 @@ + diff --git a/packages/primevue/src/iftalabel/IftaLabel.d.ts b/packages/primevue/src/iftalabel/IftaLabel.d.ts new file mode 100644 index 000000000..05f26456e --- /dev/null +++ b/packages/primevue/src/iftalabel/IftaLabel.d.ts @@ -0,0 +1,130 @@ +/** + * + * FloatLabel appears on top of the input field when focused. + * + * [Live Demo](https://www.primevue.org/iftalabel/) + * + * @module iftalabel + * + */ +import type { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, 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 IftaLabelPassThroughOptionType = IftaLabelPassThroughAttributes | ((options: IftaLabelPassThroughMethodOptions) => IftaLabelPassThroughAttributes | string) | string | null | undefined; + +export declare type IftaLabelPassThroughTransitionType = TransitionProps | ((options: IftaLabelPassThroughMethodOptions) => TransitionProps) | undefined; + +/** + * Custom passthrough(pt) option method. + */ +export interface IftaLabelPassThroughMethodOptions { + /** + * Defines instance. + */ + instance: any; + /** + * Defines valid properties. + */ + props: IftaLabelProps; + /** + * 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 IftaLabelProps.pt} + */ +export interface IftaLabelPassThroughOptions { + /** + * Used to pass attributes to the root's DOM element. + */ + root?: IftaLabelPassThroughOptionType; + /** + * Used to manage all lifecycle hooks. + * @see {@link BaseComponent.ComponentHooks} + */ + hooks?: ComponentHooks; +} + +/** + * Custom passthrough attributes for each DOM elements + */ +export interface IftaLabelPassThroughAttributes { + [key: string]: any; +} + +/** + * Defines valid properties in IftaLabel component. + */ +export interface IftaLabelProps { + /** + * It generates scoped CSS variables using design tokens for the component. + */ + dt?: DesignToken; + /** + * Used to pass attributes to DOM elements inside the component. + * @type {IftaLabelPassThroughOptions} + */ + 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 IftaLabel component. + */ +export interface IftaLabelSlots { + /** + * Default content slot. + */ + default: () => VNode[]; +} + +/** + * Defines valid emits in IftaLabel component. + */ +export interface IftaLabelEmitsOptions {} + +export declare type IftaLabelEmits = EmitFn; + +/** + * **PrimeVue - IftaLabel** + * + * _FloatLabel appears on top of the input field when focused._ + * + * [Live Demo](https://www.primevue.org/inputtext/) + * --- --- + * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) + * + * @group Component + * + */ +declare const IftaLabel: DefineComponent; + +declare module 'vue' { + export interface GlobalComponents { + IftaLabel: GlobalComponentConstructor; + } +} + +export default IftaLabel; diff --git a/packages/primevue/src/iftalabel/IftaLabel.vue b/packages/primevue/src/iftalabel/IftaLabel.vue new file mode 100644 index 000000000..7b7bf6ca3 --- /dev/null +++ b/packages/primevue/src/iftalabel/IftaLabel.vue @@ -0,0 +1,15 @@ + + + diff --git a/packages/primevue/src/iftalabel/package.json b/packages/primevue/src/iftalabel/package.json new file mode 100644 index 000000000..4bf883240 --- /dev/null +++ b/packages/primevue/src/iftalabel/package.json @@ -0,0 +1,11 @@ +{ + "main": "./IftaLabel.vue", + "module": "./IftaLabel.vue", + "types": "./IftaLabel.d.ts", + "browser": { + "./sfc": "./IftaLabel.vue" + }, + "sideEffects": [ + "*.vue" + ] +} diff --git a/packages/primevue/src/iftalabel/style/IftaLabelStyle.d.ts b/packages/primevue/src/iftalabel/style/IftaLabelStyle.d.ts new file mode 100644 index 000000000..b06f0eeeb --- /dev/null +++ b/packages/primevue/src/iftalabel/style/IftaLabelStyle.d.ts @@ -0,0 +1,19 @@ +/** + * + * FloatLabel appears on top of the input field when focused. + * + * [Live Demo](https://www.primevue.org/floatlabel/) + * + * @module iftalabelstyle + * + */ +import type { BaseStyle } from '@primevue/core/base/style'; + +export enum IftaLabelClasses { + /** + * Class name of the root element + */ + root = 'p-iftalabel' +} + +export interface IftaLabelStyle extends BaseStyle {} diff --git a/packages/primevue/src/iftalabel/style/IftaLabelStyle.js b/packages/primevue/src/iftalabel/style/IftaLabelStyle.js new file mode 100644 index 000000000..72d6aa192 --- /dev/null +++ b/packages/primevue/src/iftalabel/style/IftaLabelStyle.js @@ -0,0 +1,14 @@ +import BaseStyle from '@primevue/core/base/style'; + +const theme = ({ dt }) => ` +`; + +const classes = { + root: 'p-iftalabel' +}; + +export default BaseStyle.extend({ + name: 'iftalabel', + theme, + classes +}); diff --git a/packages/primevue/src/iftalabel/style/package.json b/packages/primevue/src/iftalabel/style/package.json new file mode 100644 index 000000000..a66a89180 --- /dev/null +++ b/packages/primevue/src/iftalabel/style/package.json @@ -0,0 +1,6 @@ +{ + "main": "./IftaLabelStyle.js", + "module": "./IftaLabelStyle.js", + "types": "./IftaLabelStyle.d.ts", + "sideEffects": false +}