diff --git a/apps/showcase/assets/menu/menu.json b/apps/showcase/assets/menu/menu.json index bdc8a016b..007937412 100644 --- a/apps/showcase/assets/menu/menu.json +++ b/apps/showcase/assets/menu/menu.json @@ -95,9 +95,15 @@ "name": "Editor", "to": "/editor" }, + { + "name": "IftaLabel", + "to": "/iftalabel", + "badge": "NEW" + }, { "name": "FloatLabel", - "to": "/floatlabel" + "to": "/floatlabel", + "badge": "NEW" }, { "name": "IconField", diff --git a/apps/showcase/assets/styles/layout/_doc.scss b/apps/showcase/assets/styles/layout/_doc.scss index 55dea0f82..cad42da70 100644 --- a/apps/showcase/assets/styles/layout/_doc.scss +++ b/apps/showcase/assets/styles/layout/_doc.scss @@ -442,7 +442,7 @@ display: flex; align-items: center; justify-content: center; - border-color: var(--p-content-border-color); + border-color: var(--border-color); border-width: 0 1px 0 0; padding: 1rem; width: 75%; @@ -461,16 +461,13 @@ display: flex; flex-direction: column; padding: .5rem; - cursor: pointer; &:hover { - background-color: var(--p-content-hover-background); + background-color: var(--hover-background); } - .doc-ptoption-text { - color: var(--p-text-muted-color); - font-size: 0.875rem; - line-height: 1.25rem; + .doc-ptoption-text:hover { + cursor: default; } } } diff --git a/apps/showcase/components/doc/DocPTViewer.vue b/apps/showcase/components/doc/DocPTViewer.vue index 1152f45f0..1fa39d55b 100644 --- a/apps/showcase/components/doc/DocPTViewer.vue +++ b/apps/showcase/components/doc/DocPTViewer.vue @@ -7,8 +7,10 @@ @@ -32,6 +34,7 @@ export default { cmpName = componentName; if (componentName === 'ConfirmDialog') cmpName = 'Dialog'; + else if (componentName === 'ScrollTop') cmpName = 'Button'; if (item.label === 'root') selector = `[data-pc-name="${cmpName.toLowerCase()}"]`; else if (item.label.startsWith('pc')) selector = `[data-pc-name="${item.label.toLowerCase()}"]`; @@ -42,18 +45,18 @@ export default { if (this.hoveredElements.length === 0) this.hoveredElements = find(document.querySelector('body'), selector); //TODO: this.hoveredElements?.forEach((el) => { - addClass(el, '!ring !ring-red-500 !z-10'); + addClass(el, '!ring !ring-blue-500 !z-10'); }); }, leaveSection() { this.hoveredElements.forEach((el) => { - removeClass(el, '!ring !ring-red-500 !z-10'); + removeClass(el, '!ring !ring-blue-500 !z-10'); }); this.hoveredElements = []; }, handleData(doc) { - return doc.filter((item) => item.label !== 'hooks' && item.label !== 'transition'); + return doc.filter((item) => item.label !== 'hooks' && item.label !== 'transition' && !item.label.includes('hidden')); } } }; diff --git a/apps/showcase/components/landing/BlockSection.vue b/apps/showcase/components/landing/BlockSection.vue index 943ef83a3..29bf7d921 100644 --- a/apps/showcase/components/landing/BlockSection.vue +++ b/apps/showcase/components/landing/BlockSection.vue @@ -355,7 +355,7 @@
-
+
question mark
diff --git a/apps/showcase/components/landing/UsersSection.vue b/apps/showcase/components/landing/UsersSection.vue index 502308e46..8413dcda1 100644 --- a/apps/showcase/components/landing/UsersSection.vue +++ b/apps/showcase/components/landing/UsersSection.vue @@ -2,7 +2,7 @@
Who Uses

- PrimeTek libraries have reached over 150 Million Downloads on npm! Join the PrimeLand community and experience the difference yourself. + PrimeTek libraries have reached over 200 Million Downloads on npm! Join the PrimeLand community and experience the difference yourself.

diff --git a/apps/showcase/doc/breadcrumb/pt/PTImage.vue b/apps/showcase/doc/breadcrumb/pt/PTImage.vue deleted file mode 100644 index c8d224791..000000000 --- a/apps/showcase/doc/breadcrumb/pt/PTImage.vue +++ /dev/null @@ -1,8 +0,0 @@ - diff --git a/apps/showcase/doc/breadcrumb/pt/PTViewer.vue b/apps/showcase/doc/breadcrumb/pt/PTViewer.vue new file mode 100644 index 000000000..3ba48a2bc --- /dev/null +++ b/apps/showcase/doc/breadcrumb/pt/PTViewer.vue @@ -0,0 +1,27 @@ + + + diff --git a/apps/showcase/doc/breadcrumb/pt/index.vue b/apps/showcase/doc/breadcrumb/pt/index.vue index 8d8f8b3dc..b3b9d63dc 100644 --- a/apps/showcase/doc/breadcrumb/pt/index.vue +++ b/apps/showcase/doc/breadcrumb/pt/index.vue @@ -11,16 +11,16 @@ diff --git a/apps/showcase/doc/chart/pt/index.vue b/apps/showcase/doc/chart/pt/index.vue index dfdb22fdb..451a0815f 100644 --- a/apps/showcase/doc/chart/pt/index.vue +++ b/apps/showcase/doc/chart/pt/index.vue @@ -11,16 +11,16 @@ diff --git a/apps/showcase/doc/contextmenu/pt/index.vue b/apps/showcase/doc/contextmenu/pt/index.vue index 7ca9f6a55..119d9ec70 100644 --- a/apps/showcase/doc/contextmenu/pt/index.vue +++ b/apps/showcase/doc/contextmenu/pt/index.vue @@ -11,16 +11,16 @@ diff --git a/apps/showcase/doc/dock/pt/index.vue b/apps/showcase/doc/dock/pt/index.vue index fb7b6deec..94b8ae313 100644 --- a/apps/showcase/doc/dock/pt/index.vue +++ b/apps/showcase/doc/dock/pt/index.vue @@ -11,16 +11,16 @@ diff --git a/apps/showcase/doc/floatlabel/VariantsDoc.vue b/apps/showcase/doc/floatlabel/VariantsDoc.vue new file mode 100644 index 000000000..9660a2f26 --- /dev/null +++ b/apps/showcase/doc/floatlabel/VariantsDoc.vue @@ -0,0 +1,90 @@ + + + diff --git a/apps/showcase/doc/iftalabel/AccessibilityDoc.vue b/apps/showcase/doc/iftalabel/AccessibilityDoc.vue new file mode 100644 index 000000000..05d727668 --- /dev/null +++ b/apps/showcase/doc/iftalabel/AccessibilityDoc.vue @@ -0,0 +1,9 @@ + diff --git a/apps/showcase/doc/iftalabel/BasicDoc.vue b/apps/showcase/doc/iftalabel/BasicDoc.vue new file mode 100644 index 000000000..38ed1a31b --- /dev/null +++ b/apps/showcase/doc/iftalabel/BasicDoc.vue @@ -0,0 +1,67 @@ + + + diff --git a/apps/showcase/doc/iftalabel/ImportDoc.vue b/apps/showcase/doc/iftalabel/ImportDoc.vue new file mode 100644 index 000000000..c54ef52e4 --- /dev/null +++ b/apps/showcase/doc/iftalabel/ImportDoc.vue @@ -0,0 +1,18 @@ + + + diff --git a/apps/showcase/doc/iftalabel/InvalidDoc.vue b/apps/showcase/doc/iftalabel/InvalidDoc.vue new file mode 100644 index 000000000..c202a843a --- /dev/null +++ b/apps/showcase/doc/iftalabel/InvalidDoc.vue @@ -0,0 +1,67 @@ + + + diff --git a/apps/showcase/doc/chart/pt/PTImage.vue b/apps/showcase/doc/iftalabel/pt/PTImage.vue similarity index 100% rename from apps/showcase/doc/chart/pt/PTImage.vue rename to apps/showcase/doc/iftalabel/pt/PTImage.vue diff --git a/apps/showcase/doc/iftalabel/pt/index.vue b/apps/showcase/doc/iftalabel/pt/index.vue new file mode 100644 index 000000000..d90c8f5e7 --- /dev/null +++ b/apps/showcase/doc/iftalabel/pt/index.vue @@ -0,0 +1,35 @@ + + + diff --git a/apps/showcase/doc/iftalabel/theming/TailwindDoc.vue b/apps/showcase/doc/iftalabel/theming/TailwindDoc.vue new file mode 100644 index 000000000..4daa6c5f8 --- /dev/null +++ b/apps/showcase/doc/iftalabel/theming/TailwindDoc.vue @@ -0,0 +1,8 @@ + diff --git a/apps/showcase/doc/iftalabel/theming/index.vue b/apps/showcase/doc/iftalabel/theming/index.vue new file mode 100644 index 000000000..7439af3b9 --- /dev/null +++ b/apps/showcase/doc/iftalabel/theming/index.vue @@ -0,0 +1,56 @@ + + + diff --git a/apps/showcase/doc/megamenu/pt/PTImage.vue b/apps/showcase/doc/megamenu/pt/PTImage.vue deleted file mode 100644 index a624d52c5..000000000 --- a/apps/showcase/doc/megamenu/pt/PTImage.vue +++ /dev/null @@ -1,8 +0,0 @@ - diff --git a/apps/showcase/doc/megamenu/pt/PTViewer.vue b/apps/showcase/doc/megamenu/pt/PTViewer.vue new file mode 100644 index 000000000..9cb1f9346 --- /dev/null +++ b/apps/showcase/doc/megamenu/pt/PTViewer.vue @@ -0,0 +1,83 @@ + + + diff --git a/apps/showcase/doc/megamenu/pt/index.vue b/apps/showcase/doc/megamenu/pt/index.vue index 6ab86713d..633cd8793 100644 --- a/apps/showcase/doc/megamenu/pt/index.vue +++ b/apps/showcase/doc/megamenu/pt/index.vue @@ -11,16 +11,16 @@ diff --git a/apps/showcase/doc/menu/pt/index.vue b/apps/showcase/doc/menu/pt/index.vue index 7e2592428..2e537b0de 100644 --- a/apps/showcase/doc/menu/pt/index.vue +++ b/apps/showcase/doc/menu/pt/index.vue @@ -11,16 +11,16 @@ diff --git a/apps/showcase/doc/menubar/pt/index.vue b/apps/showcase/doc/menubar/pt/index.vue index b1e64ecbf..b2b157503 100644 --- a/apps/showcase/doc/menubar/pt/index.vue +++ b/apps/showcase/doc/menubar/pt/index.vue @@ -11,16 +11,16 @@ diff --git a/apps/showcase/doc/panelmenu/pt/index.vue b/apps/showcase/doc/panelmenu/pt/index.vue index 3824a10d4..cb9710cec 100644 --- a/apps/showcase/doc/panelmenu/pt/index.vue +++ b/apps/showcase/doc/panelmenu/pt/index.vue @@ -11,16 +11,16 @@ diff --git a/apps/showcase/doc/tieredmenu/pt/index.vue b/apps/showcase/doc/tieredmenu/pt/index.vue index eb2c92003..9d9d03326 100644 --- a/apps/showcase/doc/tieredmenu/pt/index.vue +++ b/apps/showcase/doc/tieredmenu/pt/index.vue @@ -11,16 +11,16 @@ diff --git a/apps/showcase/plugins/app-state.js b/apps/showcase/plugins/app-state.js index 2b053d79c..a1a77c4ba 100644 --- a/apps/showcase/plugins/app-state.js +++ b/apps/showcase/plugins/app-state.js @@ -16,6 +16,15 @@ const $appState = { } }; -export default defineNuxtPlugin((nuxtApp) => { +export default defineNuxtPlugin(async (nuxtApp) => { + const runtimeConfig = useRuntimeConfig(); + nuxtApp.vueApp.use($appState); + + if (runtimeConfig.public.DEV_ENV === 'hot') { + const { default: PrimeVue } = await import('primevue/config'); + const { default: Noir } = await import('@/themes/app-theme'); + + nuxtApp.vueApp.use(PrimeVue, { theme: Noir }); + } }); diff --git a/package.json b/package.json index b519d3ae8..fe1b15e87 100644 --- a/package.json +++ b/package.json @@ -27,9 +27,10 @@ "build:lib": "pnpm --filter primevue build", "build:themes": "pnpm --filter themes build", "build:icons": "pnpm --filter icons build", - "build:showcase": "pnpm --filter showcase build:prebuild", + "build:showcase": "pnpm --filter showcase build", "build:apidoc": "pnpm --filter themes build:tokens && pnpm --filter showcase build:apidoc", "dev": "pnpm --filter showcase dev", + "hot:dev": "DEV_ENV=hot pnpm --filter showcase dev", "module:dev": "pnpm --filter @primevue/nuxt-module dev", "security:check": "pnpm audit --prod --audit-level high", "format": "prettier --write \"**/*.{vue,js,mjs,ts,d.ts}\" --cache", 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/nuxt-module/src/module.ts b/packages/nuxt-module/src/module.ts index f27606a30..15d6fe0aa 100644 --- a/packages/nuxt-module/src/module.ts +++ b/packages/nuxt-module/src/module.ts @@ -21,6 +21,7 @@ export default defineNuxtModule({ //cssLayerOrder: undefined, importPT: undefined, importTheme: undefined, + loadStyles: true, options: {}, components: { prefix: '', @@ -47,7 +48,7 @@ export default defineNuxtModule({ const resolver = createResolver(import.meta.url); const registered = register(moduleOptions); - const { autoImport, importPT, importTheme, options } = moduleOptions; + const { autoImport, importPT, importTheme, options, loadStyles } = moduleOptions; const hasTheme = (importTheme || options?.theme) && !options?.unstyled; nuxt.options.runtimeConfig.public.primevue = { @@ -84,6 +85,8 @@ export default defineNuxtModule({ } const styleContent = () => { + if (!loadStyles) return `export const styles = [], stylesToTop = [], themes = [];`; + const uniqueRegisteredStyles = Array.from(new Map(registeredStyles?.map((m: MetaType) => [m.name, m])).values()); return ` @@ -102,11 +105,11 @@ const { options = {} } = config; const stylesToTop = [${registered.injectStylesAsStringToTop.join('')}].join(''); const styleProps = { - ${options?.csp?.nonce ? `nonce: ${options?.csp?.nonce}` : ''} + ${options?.csp?.nonce ? `nonce: ${options?.csp?.nonce}` : ''} } const styles = [ - ${registered.injectStylesAsString.join('')}, - ${uniqueRegisteredStyles?.map((item: MetaType) => `${item.as} && ${item.as}.getStyleSheet ? ${item.as}.getStyleSheet(undefined, styleProps) : ''`).join(',')} + ${registered.injectStylesAsString.join('')}, + ${uniqueRegisteredStyles?.map((item: MetaType) => `${item.as} && ${item.as}.getStyleSheet ? ${item.as}.getStyleSheet(undefined, styleProps) : ''`).join(',')} ].join(''); ${hasTheme ? `Theme.setTheme(${importTheme?.as} || options?.theme)` : ''} diff --git a/packages/nuxt-module/src/types.d.ts b/packages/nuxt-module/src/types.d.ts index 0d91f4547..ad9ac2b99 100644 --- a/packages/nuxt-module/src/types.d.ts +++ b/packages/nuxt-module/src/types.d.ts @@ -14,6 +14,7 @@ export interface ModuleOptions { /*cssLayerOrder?: string;*/ importPT?: ImportOptions; importTheme?: ImportOptions; + loadStyles?: boolean; options?: PrimeVueOptions; components?: ConstructsType; directives?: ConstructsType; 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/button/Button.spec.js b/packages/primevue/src/button/Button.spec.js index fcb939668..ebef2382b 100644 --- a/packages/primevue/src/button/Button.spec.js +++ b/packages/primevue/src/button/Button.spec.js @@ -1,5 +1,4 @@ import { mount } from '@vue/test-utils'; -import { h } from 'vue'; import Button from './Button.vue'; describe('Button.vue', () => { @@ -70,15 +69,3 @@ describe('Button.vue', () => { expect(wrapper.find('.p-button-loading').exists()).toBe(false); }); }); - -describe('Button.vue', () => { - it('should render default slot', () => { - const wrapper = mount(Button, { - slots: { - default: h('span', { class: 'ml-2 font-bold' }, 'Default PrimeVue Button') - } - }); - - expect(wrapper.html()).toBe(``); - }); -}); diff --git a/packages/primevue/src/floatlabel/BaseFloatLabel.vue b/packages/primevue/src/floatlabel/BaseFloatLabel.vue index ce70295f7..85be43204 100644 --- a/packages/primevue/src/floatlabel/BaseFloatLabel.vue +++ b/packages/primevue/src/floatlabel/BaseFloatLabel.vue @@ -5,7 +5,12 @@ import FloatLabelStyle from 'primevue/floatlabel/style'; export default { name: 'BaseFloatLabel', extends: BaseComponent, - props: {}, + props: { + variant: { + type: String, + default: 'over' + } + }, style: FloatLabelStyle, provide() { return { diff --git a/packages/primevue/src/floatlabel/FloatLabel.d.ts b/packages/primevue/src/floatlabel/FloatLabel.d.ts index 0b3b177c4..34e9182be 100644 --- a/packages/primevue/src/floatlabel/FloatLabel.d.ts +++ b/packages/primevue/src/floatlabel/FloatLabel.d.ts @@ -1,6 +1,6 @@ /** * - * FloatLabel appears on top of the input field when focused. + * FloatLabel visually integrates a label with its form element. * * [Live Demo](https://www.primevue.org/floatlabel/) * @@ -88,6 +88,11 @@ export interface FloatLabelProps { * @defaultValue false */ unstyled?: boolean; + /** + * Defines the positioning of the label relative to the input. + * @defaultValue false + */ + variant?: 'over' | 'in' | 'on' | undefined; } /** @@ -110,7 +115,7 @@ export declare type FloatLabelEmits = EmitFn; /** * **PrimeVue - FloatLabel** * - * _FloatLabel appears on top of the input field when focused._ + * _FloatLabel visually integrates a label with its form element._ * * [Live Demo](https://www.primevue.org/inputtext/) * --- --- diff --git a/packages/primevue/src/floatlabel/style/FloatLabelStyle.d.ts b/packages/primevue/src/floatlabel/style/FloatLabelStyle.d.ts index f068cded6..cd7f0c190 100644 --- a/packages/primevue/src/floatlabel/style/FloatLabelStyle.d.ts +++ b/packages/primevue/src/floatlabel/style/FloatLabelStyle.d.ts @@ -1,8 +1,8 @@ /** * - * FloatLabel appears on top of the input field when focused. + * FloatLabel visually integrates a label with its form element. * - * [Live Demo](https://www.primevue.org/inputtext/) + * [Live Demo](https://www.primevue.org/floatlabel/) * * @module floatlabelstyle * diff --git a/packages/primevue/src/floatlabel/style/FloatLabelStyle.js b/packages/primevue/src/floatlabel/style/FloatLabelStyle.js index f4a4d85a1..b58a03419 100644 --- a/packages/primevue/src/floatlabel/style/FloatLabelStyle.js +++ b/packages/primevue/src/floatlabel/style/FloatLabelStyle.js @@ -14,7 +14,8 @@ const theme = ({ dt }) => ` transition-property: all; transition-timing-function: ease; line-height: 1; - left: 0.75rem; + font-weight: ${dt('floatlabel.font.weight')}; + left: ${dt('floatlabel.position.x')}; color: ${dt('floatlabel.color')}; transition-duration: ${dt('floatlabel.transition.duration')}; } @@ -23,6 +24,10 @@ const theme = ({ dt }) => ` top: 1rem; } +.p-floatlabel:has(.p-invalid) label { + color: ${dt('floatlabel.invalid.color')}; +} + .p-floatlabel:has(input:focus) label, .p-floatlabel:has(input.p-filled) label, .p-floatlabel:has(input:-webkit-autofill) label, @@ -30,8 +35,22 @@ const theme = ({ dt }) => ` .p-floatlabel:has(textarea.p-filled) label, .p-floatlabel:has(.p-inputwrapper-focus) label, .p-floatlabel:has(.p-inputwrapper-filled) label { - top: -.75rem; - font-size: 12px; + top: ${dt('floatlabel.focus.top')}; + margin-top: 0; + font-size: ${dt('floatlabel.focus.font.size')}; + font-weight: ${dt('floatlabel.label.focus.font.weight')}; +} + +.p-floatlabel:has(input.p-filled) label, +.p-floatlabel:has(textarea.p-filled) label, +.p-floatlabel:has(.p-inputwrapper-filled) label { + color: ${dt('floatlabel.active.color')}; +} + +.p-floatlabel:has(input:focus) label , +.p-floatlabel:has(input:-webkit-autofill) label, +.p-floatlabel:has(textarea:focus) label , +.p-floatlabel:has(.p-inputwrapper-focus) label { color: ${dt('floatlabel.focus.color')}; } @@ -51,13 +70,48 @@ const theme = ({ dt }) => ` transition-timing-function: ease; } -.p-floatlabel > .p-invalid + label { - color: ${dt('floatlabel.invalid.color')}; +.p-floatlabel-in .p-inputtext { + padding-top: ${dt('floatlabel.in.input.padding.top')}; +} + +.p-floatlabel-in:has(input:focus) label, +.p-floatlabel-in:has(input.p-filled) label, +.p-floatlabel-in:has(input:-webkit-autofill) label, +.p-floatlabel-in:has(textarea:focus) label, +.p-floatlabel-in:has(textarea.p-filled) label, +.p-floatlabel-in:has(.p-inputwrapper-focus) label, +.p-floatlabel-in:has(.p-inputwrapper-filled) label { + top: ${dt('floatlabel.in.focus.top')}; +} + +.p-floatlabel-on .p-inputtext { + padding-top: ${dt('floatlabel.on.input.padding.top')}; + padding-bottom: ${dt('floatlabel.on.input.padding.bottom')}; +} + +.p-floatlabel-on:has(input:focus) label, +.p-floatlabel-on:has(input.p-filled) label, +.p-floatlabel-on:has(input:-webkit-autofill) label, +.p-floatlabel-on:has(textarea:focus) label, +.p-floatlabel-on:has(textarea.p-filled) label, +.p-floatlabel-on:has(.p-inputwrapper-focus) label, +.p-floatlabel-on:has(.p-inputwrapper-filled) label { + top: 0; + transform: translateY(-50%); + background: ${dt('floatlabel.on.focus.background')}; + padding: ${dt('floatlabel.on.focus.padding')}; } `; const classes = { - root: 'p-floatlabel' + root: ({ instance, props }) => [ + 'p-floatlabel', + { + 'p-floatlabel-over': props.variant === 'over', + 'p-floatlabel-on': props.variant === 'on', + 'p-floatlabel-in': props.variant === 'in' + } + ] }; export default BaseStyle.extend({ 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..31dee0933 --- /dev/null +++ b/packages/primevue/src/iftalabel/IftaLabel.d.ts @@ -0,0 +1,130 @@ +/** + * + * IftaLabel visually integrates a label within its form element. + * + * [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** + * + * _IftaLabel visually integrates a label within its form element._ + * + * [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..ea02130fb --- /dev/null +++ b/packages/primevue/src/iftalabel/style/IftaLabelStyle.d.ts @@ -0,0 +1,19 @@ +/** + * + * IftaLabel visually integrates a label within its form element. + * + * [Live Demo](https://www.primevue.org/iftalabel/) + * + * @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..e6519b25c --- /dev/null +++ b/packages/primevue/src/iftalabel/style/IftaLabelStyle.js @@ -0,0 +1,67 @@ +import BaseStyle from '@primevue/core/base/style'; + +const theme = ({ dt }) => ` +.p-iftalabel { + display: block; + position: relative; +} + +.p-iftalabel label { + position: absolute; + pointer-events: none; + top: ${dt('iftalabel.top')}; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + font-size: ${dt('iftalabel.font.size')}; + font-weight: ${dt('iftalabel.font.weight')}; + left: ${dt('iftalabel.position.x')}; + color: ${dt('iftalabel.color')}; + transition-duration: ${dt('iftalabel.transition.duration')}; +} + +.p-iftalabel .p-inputtext { + padding-top: ${dt('iftalabel.input.padding.top')}; +} + +.p-iftalabel:has(textarea) label { + top: 1rem; +} + +.p-iftalabel:has(.p-invalid) label { + color: ${dt('iftalabel.invalid.color')}; +} + +.p-iftalabel:has(input:focus) label , +.p-iftalabel:has(input:-webkit-autofill) label, +.p-iftalabel:has(textarea:focus) label , +.p-iftalabel:has(.p-inputwrapper-focus) label { + color: ${dt('iftalabel.focus.color')}; +} + +.p-iftalabel .p-placeholder, +.p-iftalabel input::placeholder, +.p-iftalabel .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; +} + +.p-iftalabel .p-focus .p-placeholder, +.p-iftalabel input:focus::placeholder, +.p-iftalabel .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; +} +`; + +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 +} diff --git a/packages/primevue/src/inputmask/InputMask.vue b/packages/primevue/src/inputmask/InputMask.vue index 94b96722e..a9c71f04b 100755 --- a/packages/primevue/src/inputmask/InputMask.vue +++ b/packages/primevue/src/inputmask/InputMask.vue @@ -534,7 +534,7 @@ export default { return [this.cx('root'), this.class]; }, rootPTOptions() { - return mergeProps(this.ptmi('root', this.ptmParams), this.ptm('pcInputText', this.ptmParams)); + return mergeProps(this.ptm('pcInputText', this.ptmParams), this.ptmi('root', this.ptmParams)); }, ptmParams() { return { diff --git a/packages/primevue/src/megamenu/MegaMenu.d.ts b/packages/primevue/src/megamenu/MegaMenu.d.ts index e29c80220..7717c5a03 100755 --- a/packages/primevue/src/megamenu/MegaMenu.d.ts +++ b/packages/primevue/src/megamenu/MegaMenu.d.ts @@ -114,6 +114,10 @@ export interface MegaMenuPassThroughOptions { * Used to pass attributes to the mobile popup menu button's DOM element. */ button?: MegaMenuPassThroughOptionType; + /** + * Used to pass attributes to the mobile popup menu button icon's DOM element. + */ + buttonIcon?: MegaMenuPassThroughOptionType; /** * Used to pass attributes to the start of the component. */ diff --git a/packages/primevue/src/megamenu/MegaMenu.vue b/packages/primevue/src/megamenu/MegaMenu.vue index 893b5eb36..4744a1bfd 100755 --- a/packages/primevue/src/megamenu/MegaMenu.vue +++ b/packages/primevue/src/megamenu/MegaMenu.vue @@ -21,7 +21,7 @@ > - + @@ -58,10 +58,10 @@