From 355bbebe7e1cb8e1e42eaf76e06b10501d08f196 Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Tue, 30 Jan 2024 11:01:40 +0300 Subject: [PATCH] Refactor #5175 - FloatLabel --- .../basecomponent/style/BaseComponentStyle.js | 96 ------------- components/lib/floatlabel/BaseFloatlabel.vue | 16 +++ components/lib/floatlabel/FloatLabel.d.ts | 128 ++++++++++++++++++ components/lib/floatlabel/FloatLabel.vue | 14 ++ components/lib/floatlabel/package.json | 9 ++ .../lib/floatlabel/style/FloatLabelStyle.d.ts | 3 + .../lib/floatlabel/style/FloatLabelStyle.js | 59 ++++++++ components/lib/floatlabel/style/package.json | 6 + .../runtime/core/components/index.js | 3 + nuxt-vite.config.js | 3 + 10 files changed, 241 insertions(+), 96 deletions(-) create mode 100644 components/lib/floatlabel/BaseFloatlabel.vue create mode 100644 components/lib/floatlabel/FloatLabel.d.ts create mode 100644 components/lib/floatlabel/FloatLabel.vue create mode 100644 components/lib/floatlabel/package.json create mode 100644 components/lib/floatlabel/style/FloatLabelStyle.d.ts create mode 100644 components/lib/floatlabel/style/FloatLabelStyle.js create mode 100644 components/lib/floatlabel/style/package.json diff --git a/components/lib/basecomponent/style/BaseComponentStyle.js b/components/lib/basecomponent/style/BaseComponentStyle.js index 665db5fe3..7933a426c 100644 --- a/components/lib/basecomponent/style/BaseComponentStyle.js +++ b/components/lib/basecomponent/style/BaseComponentStyle.js @@ -75,102 +75,6 @@ const inputTextCSS = ` .p-fluid .p-inputtext { width: 100%; } - -/* InputGroup */ -.p-inputgroup { - display: flex; - align-items: stretch; - width: 100%; -} - -.p-inputgroup-addon { - display: flex; - align-items: center; - justify-content: center; -} - -.p-inputgroup .p-float-label { - display: flex; - align-items: stretch; - width: 100%; -} - -.p-inputgroup .p-inputtext, -.p-fluid .p-inputgroup .p-inputtext, -.p-inputgroup .p-inputwrapper, -.p-fluid .p-inputgroup .p-input { - flex: 1 1 auto; - width: 1%; -} - -/* Floating Label */ -.p-float-label { - display: block; - position: relative; -} - -.p-float-label label { - position: absolute; - pointer-events: none; - top: 50%; - margin-top: -.5rem; - transition-property: all; - transition-timing-function: ease; - line-height: 1; -} - -.p-float-label textarea ~ label { - top: 1rem; -} - -.p-float-label input:focus ~ label, -.p-float-label input.p-filled ~ label, -.p-float-label input:-webkit-autofill ~ label, -.p-float-label textarea:focus ~ label, -.p-float-label textarea.p-filled ~ label, -.p-float-label .p-inputwrapper-focus ~ label, -.p-float-label .p-inputwrapper-filled ~ label { - top: -.75rem; - font-size: 12px; -} - - -.p-float-label .p-placeholder, -.p-float-label input::placeholder, -.p-float-label .p-inputtext::placeholder { - opacity: 0; - transition-property: all; - transition-timing-function: ease; -} - -.p-float-label .p-focus .p-placeholder, -.p-float-label input:focus::placeholder, -.p-float-label .p-inputtext:focus::placeholder { - opacity: 1; - transition-property: all; - transition-timing-function: ease; -} - -.p-input-icon-left, -.p-input-icon-right { - position: relative; - display: inline-block; -} - -.p-input-icon-left > i, -.p-input-icon-left > svg, -.p-input-icon-right > i, -.p-input-icon-right > svg { - position: absolute; - top: 50%; - margin-top: -.5rem; -} - -.p-fluid .p-input-icon-left, -.p-fluid .p-input-icon-right { - display: block; - width: 100%; -} `; const css = ` diff --git a/components/lib/floatlabel/BaseFloatlabel.vue b/components/lib/floatlabel/BaseFloatlabel.vue new file mode 100644 index 000000000..8ec905a33 --- /dev/null +++ b/components/lib/floatlabel/BaseFloatlabel.vue @@ -0,0 +1,16 @@ + diff --git a/components/lib/floatlabel/FloatLabel.d.ts b/components/lib/floatlabel/FloatLabel.d.ts new file mode 100644 index 000000000..4c04e0499 --- /dev/null +++ b/components/lib/floatlabel/FloatLabel.d.ts @@ -0,0 +1,128 @@ +/** + * + * FloatLabel is a grouping component with the optional content toggle feature. + * + * [Live Demo](https://www.primevue.org/inputtext/) + * + * @module floatlabel + * + */ +import { AnchorHTMLAttributes, TransitionProps, VNode } from 'vue'; +import { ComponentHooks } from '../basecomponent'; +import { PassThroughOptions } from '../passthrough'; +import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers'; + +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; + /** + * Used to control Vue Transition API. + */ + transition?: FloatLabelPassThroughTransitionType; +} + +/** + * Custom passthrough attributes for each DOM elements + */ +export interface FloatLabelPassThroughAttributes { + [key: string]: any; +} + +/** + * Defines valid properties in FloatLabel component. + */ +export interface FloatLabelProps { + /** + * 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 valid slots in FloatLabel component. + */ +export interface FloatLabelSlots { + /** + * Default content slot. + */ + default: () => VNode[]; +} + +/** + * Defines valid emits in FloatLabel component. + */ +export interface FloatLabelEmits {} + +/** + * **PrimeVue - FloatLabel** + * + * _FloatLabel is a grouping component with the optional content toggle feature._ + * + * [Live Demo](https://www.primevue.org/inputtext/) + * --- --- + * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) + * + * @group Component + * + */ +declare class FloatLabel extends ClassComponent {} + +declare module '@vue/runtime-core' { + interface GlobalComponents { + FloatLabel: GlobalComponentConstructor; + } +} + +export default FloatLabel; diff --git a/components/lib/floatlabel/FloatLabel.vue b/components/lib/floatlabel/FloatLabel.vue new file mode 100644 index 000000000..f31eeeb62 --- /dev/null +++ b/components/lib/floatlabel/FloatLabel.vue @@ -0,0 +1,14 @@ + + + diff --git a/components/lib/floatlabel/package.json b/components/lib/floatlabel/package.json new file mode 100644 index 000000000..5322dc864 --- /dev/null +++ b/components/lib/floatlabel/package.json @@ -0,0 +1,9 @@ +{ + "main": "./floatlabel.cjs.js", + "module": "./floatlabel.esm.js", + "unpkg": "./floatlabel.min.js", + "types": "./FloatLabel.d.ts", + "browser": { + "./sfc": "./FloatLabel.vue" + } +} diff --git a/components/lib/floatlabel/style/FloatLabelStyle.d.ts b/components/lib/floatlabel/style/FloatLabelStyle.d.ts new file mode 100644 index 000000000..e0f1ce3ea --- /dev/null +++ b/components/lib/floatlabel/style/FloatLabelStyle.d.ts @@ -0,0 +1,3 @@ +import { BaseStyle } from '../../base/style'; + +export interface FloatLabelStyle extends BaseStyle {} diff --git a/components/lib/floatlabel/style/FloatLabelStyle.js b/components/lib/floatlabel/style/FloatLabelStyle.js new file mode 100644 index 000000000..407063c1a --- /dev/null +++ b/components/lib/floatlabel/style/FloatLabelStyle.js @@ -0,0 +1,59 @@ +import BaseStyle from 'primevue/base/style'; + +const css = ` +.p-float-label { + display: block; + position: relative; +} + +.p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; +} + +.p-float-label:has(textarea) label { + top: 1rem; +} + +.p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -.75rem; + font-size: 12px; +} + +.p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; +} + +.p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; +} +`; + +const classes = { + root: 'p-float-label' +}; + +export default BaseStyle.extend({ + name: 'floatlabel', + css, + classes +}); diff --git a/components/lib/floatlabel/style/package.json b/components/lib/floatlabel/style/package.json new file mode 100644 index 000000000..51d2ee010 --- /dev/null +++ b/components/lib/floatlabel/style/package.json @@ -0,0 +1,6 @@ +{ + "main": "./floatlabelstyle.cjs.js", + "module": "./floatlabelstyle.esm.js", + "unpkg": "./floatlabelstyle.min.js", + "types": "./FloatLabelStyle.d.ts" +} diff --git a/modules/nuxt-primevue/runtime/core/components/index.js b/modules/nuxt-primevue/runtime/core/components/index.js index c637a1028..7f2933b50 100644 --- a/modules/nuxt-primevue/runtime/core/components/index.js +++ b/modules/nuxt-primevue/runtime/core/components/index.js @@ -7,8 +7,11 @@ const form = [ 'ColorPicker', 'Dropdown', 'Editor', + 'FloatLabel', + 'IconField', 'InputGroup', 'InputGroupAddon', + 'InputIcon', 'InputMask', 'InputNumber', 'InputSwitch', diff --git a/nuxt-vite.config.js b/nuxt-vite.config.js index 94f6b5d2e..86974c03a 100644 --- a/nuxt-vite.config.js +++ b/nuxt-vite.config.js @@ -42,14 +42,17 @@ const STYLE_ALIAS = { 'primevue/dynamicdialog/style': path.resolve(__dirname, './components/lib/dynamicdialog/style/DynamicDialogStyle.js'), 'primevue/editor/style': path.resolve(__dirname, './components/lib/editor/style/EditorStyle.js'), 'primevue/fieldset/style': path.resolve(__dirname, './components/lib/fieldset/style/FieldsetStyle.js'), + 'primevue/floatlabel/style': path.resolve(__dirname, './components/lib/floatlabel/style/FloatLabelStyle.js'), 'primevue/fileupload/style': path.resolve(__dirname, './components/lib/fileupload/style/FileUploadStyle.js'), 'primevue/focustrap/style': path.resolve(__dirname, './components/lib/focustrap/style/FocusTrapStyle.js'), 'primevue/galleria/style': path.resolve(__dirname, './components/lib/galleria/style/GalleriaStyle.js'), 'primevue/image/style': path.resolve(__dirname, './components/lib/image/style/ImageStyle.js'), + 'primevue/iconfield/style': path.resolve(__dirname, './components/lib/iconfield/style/IconFieldStyle.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/inputicon/style': path.resolve(__dirname, './components/lib/inputicon/style/InputIconStyle.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'),