vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

SplitterPanel and InlineMessage class name convensions

pull/5806/head
tugcekucukoglu 2024-05-21 10:15:51 +03:00
parent c5ebd68b74
commit c629ca8f51
8 changed files with 36 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/lib/inlinemessage/InlineMessage.spec.js
View File

@ -12,8 +12,8 @@ describe('InlineMessage.vue', () => {
} }
}); });
expect(wrapper.find('.p-inline-message.p-component').exists()).toBe(true); expect(wrapper.find('.p-inlinemessage.p-component').exists()).toBe(true);
expect(wrapper.find('.p-inline-message.p-component').text()).toBe('Username is required'); expect(wrapper.find('.p-inlinemessage.p-component').text()).toBe('Username is required');
expect(wrapper.find('.p-inline-message-error').exists()).toBe(true); expect(wrapper.find('.p-inlinemessage-error').exists()).toBe(true);
}); });
}); });

6
components/lib/inlinemessage/style/InlineMessageStyle.d.ts vendored
View File

@ -10,9 +10,9 @@
import { BaseStyle } from '../../base/style'; import { BaseStyle } from '../../base/style';
export enum InlineMessageClasses { export enum InlineMessageClasses {
root = 'p-inline-message', root = 'p-inlinemessage',
icon = 'p-inline-message-icon', icon = 'p-inlinemessage-icon',
text = 'p-inline-message-text' text = 'p-inlinemessage-text'
} }
export interface InlineMessageStyle extends BaseStyle {} export interface InlineMessageStyle extends BaseStyle {}

40
components/lib/inlinemessage/style/InlineMessageStyle.js
View File

@ -1,7 +1,7 @@
import BaseStyle from 'primevue/base/style'; import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => ` const theme = ({ dt }) => `
.p-inline-message { .p-inlinemessage {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -10,97 +10,97 @@ const theme = ({ dt }) => `
gap: ${dt('inlinemessage.gap')}; gap: ${dt('inlinemessage.gap')};
} }
.p-inline-message-text { .p-inlinemessage-text {
font-weight: ${dt('inlinemessage.text.font.weight')}; font-weight: ${dt('inlinemessage.text.font.weight')};
} }
.p-inline-message-icon { .p-inlinemessage-icon {
flex-shrink: 0; flex-shrink: 0;
font-size: ${dt('inlinemessage.icon.size')}; font-size: ${dt('inlinemessage.icon.size')};
width: ${dt('inlinemessage.icon.size')}; width: ${dt('inlinemessage.icon.size')};
height: ${dt('inlinemessage.icon.size')}; height: ${dt('inlinemessage.icon.size')};
} }
.p-inline-message-icon-only .p-inline-message-text { .p-inlinemessage-icon-only .p-inlinemessage-text {
visibility: hidden; visibility: hidden;
width: 0; width: 0;
} }
.p-fluid .p-inline-message { .p-fluid .p-inlinemessage {
display: flex; display: flex;
} }
.p-inline-message-info { .p-inlinemessage-info {
background: ${dt('inlinemessage.info.background')}; background: ${dt('inlinemessage.info.background')};
border: 1px solid ${dt('inlinemessage.info.border.color')}; border: 1px solid ${dt('inlinemessage.info.border.color')};
color: ${dt('inlinemessage.info.color')}; color: ${dt('inlinemessage.info.color')};
box-shadow: ${dt('inlinemessage.info.shadow')}; box-shadow: ${dt('inlinemessage.info.shadow')};
} }
.p-inline-message-info .p-inline-message-icon { .p-inlinemessage-info .p-inlinemessage-icon {
color: ${dt('inlinemessage.info.color')}; color: ${dt('inlinemessage.info.color')};
} }
.p-inline-message-success { .p-inlinemessage-success {
background: ${dt('inlinemessage.success.background')}; background: ${dt('inlinemessage.success.background')};
border: 1px solid ${dt('inlinemessage.success.border.color')}; border: 1px solid ${dt('inlinemessage.success.border.color')};
color: ${dt('inlinemessage.success.color')}; color: ${dt('inlinemessage.success.color')};
box-shadow: ${dt('inlinemessage.success.shadow')}; box-shadow: ${dt('inlinemessage.success.shadow')};
} }
.p-inline-message-success .p-inline-message-icon { .p-inlinemessage-success .p-inlinemessage-icon {
color: ${dt('inlinemessage.success.color')}; color: ${dt('inlinemessage.success.color')};
} }
.p-inline-message-warn { .p-inlinemessage-warn {
background: ${dt('inlinemessage.warn.background')}; background: ${dt('inlinemessage.warn.background')};
border: 1px solid ${dt('inlinemessage.warn.border.color')}; border: 1px solid ${dt('inlinemessage.warn.border.color')};
color: ${dt('inlinemessage.warn.color')}; color: ${dt('inlinemessage.warn.color')};
box-shadow: ${dt('inlinemessage.warn.shadow')}; box-shadow: ${dt('inlinemessage.warn.shadow')};
} }
.p-inline-message-warn .p-inline-message-icon { .p-inlinemessage-warn .p-inlinemessage-icon {
color: ${dt('inlinemessage.warn.color')}; color: ${dt('inlinemessage.warn.color')};
} }
.p-inline-message-error { .p-inlinemessage-error {
background: ${dt('inlinemessage.error.background')}; background: ${dt('inlinemessage.error.background')};
border: 1px solid ${dt('inlinemessage.error.border.color')}; border: 1px solid ${dt('inlinemessage.error.border.color')};
color: ${dt('inlinemessage.error.color')}; color: ${dt('inlinemessage.error.color')};
box-shadow: ${dt('inlinemessage.error.shadow')}; box-shadow: ${dt('inlinemessage.error.shadow')};
} }
.p-inline-message-error .p-inline-message-icon { .p-inlinemessage-error .p-inlinemessage-icon {
color: ${dt('inlinemessage.error.color')}; color: ${dt('inlinemessage.error.color')};
} }
.p-inline-message-secondary { .p-inlinemessage-secondary {
background: ${dt('inlinemessage.secondary.background')}; background: ${dt('inlinemessage.secondary.background')};
border: 1px solid ${dt('inlinemessage.secondary.border.color')}; border: 1px solid ${dt('inlinemessage.secondary.border.color')};
color: ${dt('inlinemessage.secondary.color')}; color: ${dt('inlinemessage.secondary.color')};
box-shadow: ${dt('inlinemessage.secondary.shadow')}; box-shadow: ${dt('inlinemessage.secondary.shadow')};
} }
.p-inline-message-secondary .p-inline-message-icon { .p-inlinemessage-secondary .p-inlinemessage-icon {
color: ${dt('inlinemessage.secondary.color')}; color: ${dt('inlinemessage.secondary.color')};
} }
.p-inline-message-contrast { .p-inlinemessage-contrast {
background: ${dt('inlinemessage.contrast.background')}; background: ${dt('inlinemessage.contrast.background')};
border: 1px solid ${dt('inlinemessage.contrast.border.color')}; border: 1px solid ${dt('inlinemessage.contrast.border.color')};
color: ${dt('inlinemessage.contrast.color')}; color: ${dt('inlinemessage.contrast.color')};
box-shadow: ${dt('inlinemessage.contrast.shadow')}; box-shadow: ${dt('inlinemessage.contrast.shadow')};
} }
.p-inline-message-contrast .p-inline-message-icon { .p-inlinemessage-contrast .p-inlinemessage-icon {
color: ${dt('inlinemessage.contrast.color')}; color: ${dt('inlinemessage.contrast.color')};
} }
`; `;
const classes = { const classes = {
root: ({ props, instance }) => ['p-inline-message p-component p-inline-message-' + props.severity, { 'p-inline-message-icon-only': !instance.$slots.default }], root: ({ props, instance }) => ['p-inlinemessage p-component p-inlinemessage-' + props.severity, { 'p-inlinemessage-icon-only': !instance.$slots.default }],
icon: ({ props }) => ['p-inline-message-icon', props.icon], icon: ({ props }) => ['p-inlinemessage-icon', props.icon],
text: 'p-inline-message-text' text: 'p-inlinemessage-text'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({

4
components/lib/splitter/Splitter.spec.js
View File

@ -28,13 +28,13 @@ describe('Splitter.vue', () => {
it('should exist', () => { it('should exist', () => {
expect(wrapper.find('.p-splitter.p-component').exists()).toBe(true); expect(wrapper.find('.p-splitter.p-component').exists()).toBe(true);
expect(wrapper.find('.p-splitter').classes()).toContain('p-splitter-horizontal'); expect(wrapper.find('.p-splitter').classes()).toContain('p-splitter-horizontal');
expect(wrapper.findAll('.p-splitter-panel').length).toBe(2); expect(wrapper.findAll('.p-splitterpanel').length).toBe(2);
expect(wrapper.find('.p-splitter-gutter-handle').exists()).toBe(true); expect(wrapper.find('.p-splitter-gutter-handle').exists()).toBe(true);
}); });
it('should mousedown', async () => { it('should mousedown', async () => {
const gutter = wrapper.find('.p-splitter-gutter-handle').element; const gutter = wrapper.find('.p-splitter-gutter-handle').element;
const siblings = wrapper.findAll('.p-splitter-panel'); const siblings = wrapper.findAll('.p-splitterpanel');
await wrapper.vm.onGutterMouseDown({ currentTarget: { gutter, previousElementSibling: siblings[0].element, nextElementSibling: siblings[1].element }, pageX: 123 }, 0); await wrapper.vm.onGutterMouseDown({ currentTarget: { gutter, previousElementSibling: siblings[0].element, nextElementSibling: siblings[1].element }, pageX: 123 }, 0);

6
components/lib/splitter/style/SplitterStyle.js
View File

@ -65,16 +65,16 @@ const theme = ({ dt }) => `
cursor: row-resize; cursor: row-resize;
} }
.p-splitter-panel { .p-splitterpanel {
flex-grow: 1; flex-grow: 1;
overflow: hidden; overflow: hidden;
} }
.p-splitter-panel-nested { .p-splitterpanel-nested {
display: flex; display: flex;
} }
.p-splitter-panel .p-splitter { .p-splitterpanel .p-splitter {
flex-grow: 1; flex-grow: 1;
border: 0 none; border: 0 none;
} }

6
components/lib/splitterpanel/SplitterPanel.spec.js
View File

@ -16,8 +16,8 @@ describe('SplitterPanel.vue', () => {
}); });
it('should exist', () => { it('should exist', () => {
expect(wrapper.find('.p-splitter-panel').exists()).toBe(true); expect(wrapper.find('.p-splitterpanel').exists()).toBe(true);
expect(wrapper.attributes().class).toBe('p-splitter-panel flex align-items-center justify-content-center'); expect(wrapper.attributes().class).toBe('p-splitterpanel flex align-items-center justify-content-center');
expect(wrapper.find('.p-splitter-panel').text()).toBe('Panel 1'); expect(wrapper.find('.p-splitterpanel').text()).toBe('Panel 1');
}); });
}); });

2
components/lib/splitterpanel/style/SplitterPanelStyle.d.ts vendored
View File

@ -10,7 +10,7 @@
import { BaseStyle } from '../../base/style'; import { BaseStyle } from '../../base/style';
export enum SplitterPanelClasses { export enum SplitterPanelClasses {
root = 'p-splitter-panel' root = 'p-splitterpanel'
} }
export interface SplitterPanelStyle extends BaseStyle {} export interface SplitterPanelStyle extends BaseStyle {}

2
components/lib/splitterpanel/style/SplitterPanelStyle.js
View File

@ -1,7 +1,7 @@
import BaseStyle from 'primevue/base/style'; import BaseStyle from 'primevue/base/style';
const classes = { const classes = {
root: ({ instance }) => ['p-splitter-panel', { 'p-splitter-panel-nested': instance.isNested }] root: ({ instance }) => ['p-splitterpanel', { 'p-splitterpanel-nested': instance.isNested }]
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({