Skip to content

Commit

Permalink
Merge branch 'primefaces:master' into fix/tooltip-escape
Browse files Browse the repository at this point in the history
  • Loading branch information
barthy-koeln committed May 26, 2023
2 parents 718d797 + ba0b555 commit 0ea9648
Show file tree
Hide file tree
Showing 166 changed files with 8,700 additions and 5,922 deletions.
3 changes: 2 additions & 1 deletion .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,8 @@ module.exports = {
{ blankLine: 'always', prev: 'block', next: '*' },
{ blankLine: 'always', prev: '*', next: 'block' },
{ blankLine: 'always', prev: 'block-like', next: '*' },
{ blankLine: 'always', prev: '*', next: 'block-like' }
{ blankLine: 'always', prev: '*', next: 'block-like' },
{ blankLine: 'always', prev: ['import'], next: ['const', 'let', 'var'] }
]
}
};
8 changes: 4 additions & 4 deletions .github/workflows/node.js.yml
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ jobs:
run: |
npm run security:check
- name: Unit Tests Check
if: ${{ success() }}
run: |
npm run test:unit
# - name: Unit Tests Check
# if: ${{ success() }}
# run: |
# npm run test:unit
1 change: 1 addition & 0 deletions assets/styles/primevue.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import '../../components/lib/common/Common.css';
/* Todo: badge.css should be removed for unstyled */
@import '../../components/lib/badge/Badge.css';
@import '../../components/lib/button/Button.css';
@import '../../components/lib/checkbox/Checkbox.css';
Expand Down
20 changes: 12 additions & 8 deletions components/doc/DocSectionCode.vue
Original file line number Diff line number Diff line change
Expand Up @@ -42,11 +42,13 @@
class="p-button-rounded p-button-text p-button-plain h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center"
@click="showCodesandbox"
>
<svg role="img" viewBox="0 0 24 24" width="16" height="16" fill="var(--text-color-secondary)" style="display: 'block'">
<path
d="M2 6l10.455-6L22.91 6 23 17.95 12.455 24 2 18V6zm2.088 2.481v4.757l3.345 1.86v3.516l3.972 2.296v-8.272L4.088 8.481zm16.739 0l-7.317 4.157v8.272l3.972-2.296V15.1l3.345-1.861V8.48zM5.134 6.601l7.303 4.144 7.32-4.18-3.871-2.197-3.41 1.945-3.43-1.968L5.133 6.6z"
/>
</svg>
<template #icon="slotProps">
<svg role="img" :class="slotProps.class" viewBox="0 0 24 24" width="16" height="16" fill="var(--text-color-secondary)" style="display: 'block'">
<path
d="M2 6l10.455-6L22.91 6 23 17.95 12.455 24 2 18V6zm2.088 2.481v4.757l3.345 1.86v3.516l3.972 2.296v-8.272L4.088 8.481zm16.739 0l-7.317 4.157v8.272l3.972-2.296V15.1l3.345-1.861V8.48zM5.134 6.601l7.303 4.144 7.32-4.18-3.871-2.197-3.41 1.945-3.43-1.968L5.133 6.6z"
/>
</svg>
</template>
</Button>
</template>

Expand All @@ -57,9 +59,11 @@
class="p-button-rounded p-button-text p-button-plain h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center"
@click="showStackblitz"
>
<svg role="img" viewBox="0 0 24 24" width="16" height="16" fill="var(--text-color-secondary)" style="display: 'block'">
<path d="M0 15.98H8.15844L3.40299 27.26L19 11.1945H10.7979L15.5098 0L0 15.98Z" />
</svg>
<template #icon="slotProps">
<svg role="img" :class="slotProps.class" viewBox="0 0 24 24" width="16" height="16" fill="var(--text-color-secondary)" style="display: 'block'">
<path d="M0 15.98H8.15844L3.40299 27.26L19 11.1945H10.7979L15.5098 0L0 15.98Z" />
</svg>
</template>
</Button>
</template>

Expand Down
10 changes: 10 additions & 0 deletions components/lib/accordion/Accordion.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
*
*/
import { VNode } from 'vue';
import { AccordionTabPassThroughOptionType } from '../accordiontab';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';

export declare type AccordionPassThroughOptionType = AccordionPassThroughAttributes | ((options: AccordionPassThroughMethodOptions) => AccordionPassThroughAttributes) | null | undefined;
Expand Down Expand Up @@ -58,6 +59,10 @@ export interface AccordionPassThroughOptions {
* Uses to pass attributes to the root's DOM element.
*/
root?: AccordionPassThroughOptionType;
/**
* Uses to pass attributes to AccordionTab helper components.
*/
tab?: AccordionTabPassThroughOptionType;
}

/**
Expand Down Expand Up @@ -123,6 +128,11 @@ export interface AccordionProps {
* @type {AccordionPassThroughOptions}
*/
pt?: AccordionPassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
}

/**
Expand Down
123 changes: 32 additions & 91 deletions components/lib/accordion/Accordion.vue
Original file line number Diff line number Diff line change
@@ -1,23 +1,29 @@
<template>
<div class="p-accordion p-component" v-bind="ptm('root')">
<div v-for="(tab, i) of tabs" :key="getKey(tab, i)" :class="getTabClass(i)" :data-index="i" v-bind="getTabPT(tab, 'root')">
<div :style="getTabProp(tab, 'headerStyle')" :class="getTabHeaderClass(tab, i)" v-bind="{ ...getTabProp(tab, 'headerProps'), ...getTabPT(tab, 'header') }">
<div :class="cx('root')" v-bind="ptm('root')">
<div v-for="(tab, i) of tabs" :key="getKey(tab, i)" :class="cx('tab.root', { tab, index: i })" v-bind="getTabPT(tab, 'root', i)" data-pc-name="accordiontab" :data-pc-index="i" :data-p-active="isTabActive(i)">
<div
:style="getTabProp(tab, 'headerStyle')"
:class="[cx('tab.header', { tab, index: i }), getTabProp(tab, 'headerClass')]"
v-bind="{ ...getTabProp(tab, 'headerProps'), ...getTabPT(tab, 'header', i) }"
:data-p-highlight="isTabActive(i)"
:data-p-disabled="getTabProp(tab, 'disabled')"
>
<a
:id="getTabHeaderActionId(i)"
class="p-accordion-header-link p-accordion-header-action"
:class="cx('tab.headerAction')"
:tabindex="getTabProp(tab, 'disabled') ? -1 : tabindex"
role="button"
:aria-disabled="getTabProp(tab, 'disabled')"
:aria-expanded="isTabActive(i)"
:aria-controls="getTabContentId(i)"
@click="onTabClick($event, tab, i)"
@keydown="onTabKeyDown($event, tab, i)"
v-bind="{ ...getTabProp(tab, 'headeractionprops'), ...getTabPT(tab, 'headeraction') }"
v-bind="{ ...getTabProp(tab, 'headeractionprops'), ...getTabPT(tab, 'headeraction', i) }"
>
<component v-if="tab.children && tab.children.headericon" :is="tab.children.headericon" :isTabActive="isTabActive(i)" :index="i"></component>
<component v-else-if="isTabActive(i)" :is="collapseIcon ? 'span' : 'ChevronDownIcon'" :class="['p-accordion-toggle-icon', collapseIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon')" />
<component v-else :is="expandIcon ? 'span' : 'ChevronRightIcon'" :class="['p-accordion-toggle-icon', expandIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon')" />
<span v-if="tab.props && tab.props.header" class="p-accordion-header-text" v-bind="getTabPT(tab, 'headertitle')">{{ tab.props.header }}</span>
<component v-else-if="isTabActive(i)" :is="collapseIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('tab.headerIcon'), collapseIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon', i)" />
<component v-else :is="expandIcon ? 'span' : 'ChevronRightIcon'" :class="[cx('tab.headerIcon'), expandIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon', i)" />
<span v-if="tab.props && tab.props.header" :class="cx('tab.headerTitle')" v-bind="getTabPT(tab, 'headertitle', i)">{{ tab.props.header }}</span>
<component v-if="tab.children && tab.children.header" :is="tab.children.header"></component>
</a>
</div>
Expand All @@ -27,12 +33,12 @@
v-show="lazy ? true : isTabActive(i)"
:id="getTabContentId(i)"
:style="getTabProp(tab, 'contentStyle')"
:class="getTabContentClass(tab)"
:class="[cx('tab.toggleableContent'), getTabProp(tab, 'contentClass')]"
role="region"
:aria-labelledby="getTabHeaderActionId(i)"
v-bind="{ ...getTabProp(tab, 'contentProps'), ...getTabPT(tab, 'toggleablecontent') }"
v-bind="{ ...getTabProp(tab, 'contentProps'), ...getTabPT(tab, 'toggleablecontent', i) }"
>
<div class="p-accordion-content" v-bind="getTabPT(tab, 'content')">
<div :class="cx('tab.content')" v-bind="getTabPT(tab, 'content', i)">
<component :is="tab"></component>
</div>
</div>
Expand All @@ -42,46 +48,16 @@
</template>

<script>
import BaseComponent from 'primevue/basecomponent';
import ChevronDownIcon from 'primevue/icons/chevrondown';
import ChevronRightIcon from 'primevue/icons/chevronright';
import Ripple from 'primevue/ripple';
import { DomHandler, UniqueComponentId } from 'primevue/utils';
import BaseAccordion from './BaseAccordion.vue';
export default {
name: 'Accordion',
extends: BaseComponent,
extends: BaseAccordion,
emits: ['update:activeIndex', 'tab-open', 'tab-close', 'tab-click'],
props: {
multiple: {
type: Boolean,
default: false
},
activeIndex: {
type: [Number, Array],
default: null
},
lazy: {
type: Boolean,
default: false
},
expandIcon: {
type: String,
default: undefined
},
collapseIcon: {
type: String,
default: undefined
},
tabindex: {
type: Number,
default: 0
},
selectOnFocus: {
type: Boolean,
default: false
}
},
data() {
return {
id: this.$attrs.id,
Expand Down Expand Up @@ -118,14 +94,19 @@ export default {
getTabContentId(index) {
return `${this.id}_${index}_content`;
},
getTabPT(tab, key) {
return this.ptmo(this.getTabProp(tab, 'pt'), key, {
getTabPT(tab, key, index) {
const tabMetaData = {
props: tab.props,
parent: {
props: this.$props,
state: this.$data
},
context: {
index
}
});
};
return { ...this.ptm(`tab.${key}`, { tab: tabMetaData }), ...this.ptmo(this.getTabProp(tab, 'pt'), key, tabMetaData) };
},
onTabClick(event, tab, index) {
this.changeActiveIndex(event, tab, index);
Expand Down Expand Up @@ -189,15 +170,15 @@ export default {
},
findNextHeaderAction(tabElement, selfCheck = false) {
const nextTabElement = selfCheck ? tabElement : tabElement.nextElementSibling;
const headerElement = DomHandler.findSingle(nextTabElement, '.p-accordion-header');
const headerElement = DomHandler.findSingle(nextTabElement, '[data-pc-section="header"]');
return headerElement ? (DomHandler.hasClass(headerElement, 'p-disabled') ? this.findNextHeaderAction(headerElement.parentElement) : DomHandler.findSingle(headerElement, '.p-accordion-header-action')) : null;
return headerElement ? (DomHandler.getAttribute(headerElement, 'data-p-disabled') ? this.findNextHeaderAction(headerElement.parentElement) : DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]')) : null;
},
findPrevHeaderAction(tabElement, selfCheck = false) {
const prevTabElement = selfCheck ? tabElement : tabElement.previousElementSibling;
const headerElement = DomHandler.findSingle(prevTabElement, '.p-accordion-header');
const headerElement = DomHandler.findSingle(prevTabElement, '[data-pc-section="header"]');
return headerElement ? (DomHandler.hasClass(headerElement, 'p-disabled') ? this.findPrevHeaderAction(headerElement.parentElement) : DomHandler.findSingle(headerElement, '.p-accordion-header-action')) : null;
return headerElement ? (DomHandler.getAttribute(headerElement, 'data-p-disabled') ? this.findPrevHeaderAction(headerElement.parentElement) : DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]')) : null;
},
findFirstHeaderAction() {
return this.findNextHeaderAction(this.$el.firstElementChild, true);
Expand Down Expand Up @@ -230,33 +211,12 @@ export default {
DomHandler.focus(element);
if (this.selectOnFocus) {
const index = parseInt(element.parentElement.parentElement.dataset.index, 10);
const index = parseInt(element.parentElement.parentElement.dataset.pcIndex, 10);
const tab = this.tabs[index];
this.changeActiveIndex(event, tab, index);
}
}
},
getTabClass(i) {
return [
'p-accordion-tab',
{
'p-accordion-tab-active': this.isTabActive(i)
}
];
},
getTabHeaderClass(tab, i) {
return [
'p-accordion-header',
this.getTabProp(tab, 'headerClass'),
{
'p-highlight': this.isTabActive(i),
'p-disabled': this.getTabProp(tab, 'disabled')
}
];
},
getTabContentClass(tab) {
return ['p-toggleable-content', this.getTabProp(tab, 'contentClass')];
}
},
computed: {
Expand Down Expand Up @@ -285,22 +245,3 @@ export default {
}
};
</script>

<style>
.p-accordion-header-action {
cursor: pointer;
display: flex;
align-items: center;
user-select: none;
position: relative;
text-decoration: none;
}
.p-accordion-header-action:focus {
z-index: 1;
}
.p-accordion-header-text {
line-height: 1;
}
</style>
95 changes: 95 additions & 0 deletions components/lib/accordion/BaseAccordion.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.p-accordion-header-action {
cursor: pointer;
display: flex;
align-items: center;
user-select: none;
position: relative;
text-decoration: none;
}
.p-accordion-header-action:focus {
z-index: 1;
}
.p-accordion-header-text {
line-height: 1;
}
`;
const classes = {
root: 'p-accordion p-component',
tab: {
root: ({ instance, index }) => [
'p-accordion-tab',
{
'p-accordion-tab-active': instance.isTabActive(index)
}
],
header: ({ instance, tab, index }) => [
'p-accordion-header',
{
'p-highlight': instance.isTabActive(index),
'p-disabled': instance.getTabProp(tab, 'disabled')
}
],
headerAction: 'p-accordion-header-link p-accordion-header-action',
headerIcon: 'p-accordion-toggle-icon',
headerTitle: 'p-accordion-header-text',
toggleableContent: 'p-toggleable-content',
content: 'p-accordion-content'
}
};
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_accordion_style', manual: true });
export default {
name: 'BaseAccordion',
extends: BaseComponent,
props: {
multiple: {
type: Boolean,
default: false
},
activeIndex: {
type: [Number, Array],
default: null
},
lazy: {
type: Boolean,
default: false
},
expandIcon: {
type: String,
default: undefined
},
collapseIcon: {
type: String,
default: undefined
},
tabindex: {
type: Number,
default: 0
},
selectOnFocus: {
type: Boolean,
default: false
}
},
css: {
classes
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
}
};
</script>
Loading

0 comments on commit 0ea9648

Please sign in to comment.