From 9247620421a88beb7a2c17caa0e03e382c76678b Mon Sep 17 00:00:00 2001 From: mertsincan Date: Mon, 3 Jul 2023 23:20:35 +0100 Subject: [PATCH] Refactor #3965, Improve build and Added *Base models --- .eslintrc.js | 2 +- assets/styles/primevue.css | 10 - components/lib/accordion/BaseAccordion.vue | 2 +- components/lib/autocomplete/AutoComplete.vue | 4 +- .../lib/autocomplete/BaseAutoComplete.vue | 6 +- components/lib/avatar/BaseAvatar.vue | 2 +- .../lib/avatargroup/BaseAvatarGroup.vue | 2 +- components/lib/badge/BaseBadge.vue | 2 +- .../lib/badgedirective/BadgeDirective.js | 19 +- .../BaseBadgeDirective.js} | 22 +- components/lib/base/Base.js | 48 + components/lib/base/package.json | 5 + .../lib/basecomponent/BaseComponent.vue | 371 +- components/lib/basedirective/BaseDirective.js | 134 +- components/lib/basedirective/package.json | 3 +- components/lib/blockui/BaseBlockUI.vue | 2 +- components/lib/blockui/BlockUI.vue | 4 +- components/lib/breadcrumb/BaseBreadcrumb.vue | 2 +- components/lib/button/BaseButton.vue | 10 +- components/lib/button/Button.css | 68 - components/lib/button/Button.vue | 6 +- components/lib/calendar/BaseCalendar.vue | 5 +- components/lib/calendar/Calendar.vue | 12 +- components/lib/carousel/BaseCarousel.vue | 2 +- .../lib/cascadeselect/BaseCascadeSelect.vue | 5 +- .../lib/cascadeselect/CascadeSelect.vue | 6 +- components/lib/chart/BaseChart.vue | 2 +- components/lib/checkbox/BaseCheckbox.vue | 3 +- components/lib/checkbox/Checkbox.css | 17 - components/lib/checkbox/Checkbox.vue | 2 +- components/lib/chip/BaseChip.vue | 2 +- components/lib/chips/BaseChips.vue | 2 +- .../lib/colorpicker/BaseColorPicker.vue | 6 +- components/lib/colorpicker/ColorPicker.css | 7 - components/lib/colorpicker/images/color.png | Bin 10355 -> 0 bytes components/lib/colorpicker/images/hue.png | Bin 293 -> 0 bytes components/lib/common/Common.css | 168 - .../lib/confirmpopup/BaseConfirmPopup.vue | 2 +- .../lib/contextmenu/BaseContextMenu.vue | 2 +- components/lib/datatable/BaseDataTable.vue | 4 +- components/lib/datatable/HeaderCheckbox.vue | 2 +- components/lib/datatable/RowCheckbox.vue | 2 +- components/lib/datatable/RowRadioButton.vue | 2 +- components/lib/dialog/BaseDialog.vue | 2 +- components/lib/dialog/Dialog.vue | 8 +- components/lib/divider/BaseDivider.vue | 2 +- components/lib/dock/BaseDock.vue | 2 +- components/lib/dropdown/BaseDropdown.vue | 9 +- components/lib/dropdown/Dropdown.vue | 31 +- components/lib/editor/BaseEditor.vue | 2 +- components/lib/fieldset/BaseFieldset.vue | 2 +- components/lib/fileupload/BaseFileUpload.vue | 2 +- components/lib/focustrap/BaseFocusTrap.js | 5 + components/lib/focustrap/FocusTrap.js | 219 +- components/lib/galleria/BaseGalleria.vue | 2 +- components/lib/galleria/Galleria.vue | 9 +- components/lib/image/BaseImage.vue | 2 +- .../lib/inlinemessage/BaseInlineMessage.vue | 2 +- components/lib/inplace/BaseInplace.vue | 2 +- .../lib/inputnumber/BaseInputNumber.vue | 2 +- .../lib/inputswitch/BaseInputSwitch.vue | 3 +- components/lib/inputswitch/InputSwitch.vue | 2 +- components/lib/inputtext/BaseInputText.vue | 2 +- components/lib/inputtext/InputText.css | 106 - components/lib/knob/BaseKnob.vue | 2 +- components/lib/listbox/BaseListbox.vue | 9 +- components/lib/listbox/Listbox.vue | 12 +- components/lib/megamenu/BaseMegaMenu.vue | 2 +- components/lib/menu/BaseMenu.vue | 2 +- components/lib/menubar/BaseMenubar.vue | 2 +- components/lib/message/BaseMessage.vue | 2 +- .../lib/multiselect/BaseMultiSelect.vue | 11 +- components/lib/multiselect/MultiSelect.vue | 24 +- components/lib/orderlist/BaseOrderList.vue | 2 +- .../BaseOrganizationChart.vue | 2 +- .../lib/overlaypanel/BaseOverlayPanel.vue | 2 +- components/lib/paginator/BasePaginator.vue | 2 +- components/lib/panel/BasePanel.vue | 2 +- components/lib/panelmenu/BasePanelMenu.vue | 2 +- components/lib/password/BasePassword.vue | 3 +- components/lib/password/Password.vue | 2 +- components/lib/picklist/BasePickList.vue | 2 +- .../lib/progressbar/BaseProgressBar.vue | 2 +- .../progressspinner/BaseProgressSpinner.vue | 2 +- .../lib/radiobutton/BaseRadioButton.vue | 3 +- components/lib/radiobutton/RadioButton.css | 30 - components/lib/radiobutton/RadioButton.vue | 2 +- components/lib/rating/BaseRating.vue | 4 +- components/lib/rating/Rating.vue | 4 +- .../lib/ripple/{Ripple.css => BaseRipple.js} | 20 + components/lib/ripple/Ripple.js | 189 +- .../lib/scrollpanel/BaseScrollPanel.vue | 2 +- components/lib/scrolltop/BaseScrollTop.vue | 2 +- components/lib/sidebar/BaseSidebar.vue | 2 +- components/lib/sidebar/Sidebar.vue | 6 +- components/lib/skeleton/BaseSkeleton.vue | 2 +- components/lib/slider/BaseSlider.vue | 2 +- components/lib/speeddial/BaseSpeedDial.vue | 2 +- .../lib/splitbutton/BaseSplitButton.vue | 2 +- components/lib/splitter/BaseSplitter.vue | 2 +- .../lib/splitterpanel/BaseSplitterPanel.vue | 2 +- components/lib/steps/BaseSteps.vue | 2 +- components/lib/styleclass/BaseStyleClass.js | 5 + components/lib/styleclass/StyleClass.js | 291 +- components/lib/tabmenu/BaseTabMenu.vue | 2 +- components/lib/tabview/BaseTabView.vue | 2 +- components/lib/tag/BaseTag.vue | 2 +- components/lib/terminal/BaseTerminal.vue | 2 +- components/lib/textarea/BaseTextarea.vue | 2 +- components/lib/tieredmenu/BaseTieredMenu.vue | 2 +- components/lib/timeline/BaseTimeline.vue | 2 +- components/lib/toast/BaseToast.vue | 2 +- .../lib/togglebutton/BaseToggleButton.vue | 1 - components/lib/togglebutton/ToggleButton.vue | 2 +- components/lib/toolbar/BaseToolbar.vue | 2 +- .../tooltip/{Tooltip.css => BaseTooltip.js} | 24 +- components/lib/tooltip/Tooltip.js | 736 ++-- components/lib/tree/BaseTree.vue | 2 +- components/lib/treeselect/BaseTreeSelect.vue | 3 +- components/lib/treeselect/TreeSelect.vue | 2 +- components/lib/treetable/BaseTreeTable.vue | 3 +- components/lib/treetable/BodyCell.vue | 2 +- .../tristatecheckbox/BaseTriStateCheckbox.vue | 2 - .../lib/tristatecheckbox/TriStateCheckbox.vue | 4 +- components/lib/usestyle/UseStyle.js | 9 +- components/lib/utils/DomHandler.js | 79 +- components/lib/utils/test/DomHandler.spec.js | 8 +- .../virtualscroller/BaseVirtualScroller.vue | 2 +- gulpfile.js | 4 +- nuxt.config.js | 2 +- package-lock.json | 2977 +++++++++++++++-- package.json | 2 + rollup.config.js | 20 +- vite.config.js | 1 + 134 files changed, 4230 insertions(+), 1729 deletions(-) delete mode 100644 assets/styles/primevue.css rename components/lib/{badge/Badge.css => badgedirective/BaseBadgeDirective.js} (55%) create mode 100644 components/lib/base/Base.js create mode 100644 components/lib/base/package.json delete mode 100755 components/lib/button/Button.css delete mode 100755 components/lib/checkbox/Checkbox.css delete mode 100755 components/lib/colorpicker/ColorPicker.css delete mode 100755 components/lib/colorpicker/images/color.png delete mode 100755 components/lib/colorpicker/images/hue.png delete mode 100755 components/lib/common/Common.css create mode 100644 components/lib/focustrap/BaseFocusTrap.js delete mode 100755 components/lib/inputtext/InputText.css delete mode 100755 components/lib/radiobutton/RadioButton.css rename components/lib/ripple/{Ripple.css => BaseRipple.js} (54%) create mode 100644 components/lib/styleclass/BaseStyleClass.js rename components/lib/tooltip/{Tooltip.css => BaseTooltip.js} (70%) mode change 100755 => 100644 diff --git a/.eslintrc.js b/.eslintrc.js index 49e4b8a51..d002974d3 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -15,7 +15,7 @@ module.exports = { } }, plugins: ['prettier'], - ignorePatterns: ['**/public/**'], + ignorePatterns: ['**/public/**', '**/dist/**'], rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', diff --git a/assets/styles/primevue.css b/assets/styles/primevue.css deleted file mode 100644 index a99af375f..000000000 --- a/assets/styles/primevue.css +++ /dev/null @@ -1,10 +0,0 @@ -@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'; -@import '../../components/lib/colorpicker/ColorPicker.css'; -@import '../../components/lib/inputtext/InputText.css'; -@import '../../components/lib/radiobutton/RadioButton.css'; -@import '../../components/lib/ripple/Ripple.css'; -@import '../../components/lib/tooltip/Tooltip.css'; \ No newline at end of file diff --git a/components/lib/accordion/BaseAccordion.vue b/components/lib/accordion/BaseAccordion.vue index 3d1d18657..5abaa3557 100644 --- a/components/lib/accordion/BaseAccordion.vue +++ b/components/lib/accordion/BaseAccordion.vue @@ -45,7 +45,7 @@ const classes = { } }; -const { load: loadStyle } = useStyle(styles, { id: 'primevue_accordion_style', manual: true }); +const { load: loadStyle } = useStyle(styles, { name: 'accordion', manual: true }); export default { name: 'BaseAccordion', diff --git a/components/lib/autocomplete/AutoComplete.vue b/components/lib/autocomplete/AutoComplete.vue index 5b786c7f1..28858648b 100755 --- a/components/lib/autocomplete/AutoComplete.vue +++ b/components/lib/autocomplete/AutoComplete.vue @@ -110,7 +110,7 @@ - + {{ searchResultMessageText }} @@ -166,7 +166,7 @@ - + {{ selectedMessageText }} diff --git a/components/lib/autocomplete/BaseAutoComplete.vue b/components/lib/autocomplete/BaseAutoComplete.vue index 706a545ba..b1e4039e3 100644 --- a/components/lib/autocomplete/BaseAutoComplete.vue +++ b/components/lib/autocomplete/BaseAutoComplete.vue @@ -126,7 +126,6 @@ const classes = { inputToken: 'p-autocomplete-input-token', loadingIcon: 'p-autocomplete-loader', dropdownButton: 'p-autocomplete-dropdown', - hiddenSearchResult: 'p-hidden-accessible', panel: ({ instance }) => [ 'p-autocomplete-panel p-component', { @@ -144,11 +143,10 @@ const classes = { 'p-disabled': instance.isOptionDisabled(option) } ], - emptyMessage: 'p-autocomplete-empty-message', - hiddenSelectedMessage: 'p-hidden-accessible' + emptyMessage: 'p-autocomplete-empty-message' }; -const { load: loadStyle } = useStyle(styles, { id: 'primevue_autocomplete_style', manual: true }); +const { load: loadStyle } = useStyle(styles, { name: 'autocomplete', manual: true }); export default { name: 'BaseAutoComplete', diff --git a/components/lib/avatar/BaseAvatar.vue b/components/lib/avatar/BaseAvatar.vue index 1851bf6bb..c613ce767 100644 --- a/components/lib/avatar/BaseAvatar.vue +++ b/components/lib/avatar/BaseAvatar.vue @@ -48,7 +48,7 @@ const classes = { icon: 'p-avatar-icon' }; -const { load: loadStyle } = useStyle(styles, { id: 'primevue_avatar_style', manual: true }); +const { load: loadStyle } = useStyle(styles, { name: 'avatar', manual: true }); export default { name: 'BaseAvatar', diff --git a/components/lib/avatargroup/BaseAvatarGroup.vue b/components/lib/avatargroup/BaseAvatarGroup.vue index 86d3e239a..fc134bcde 100644 --- a/components/lib/avatargroup/BaseAvatarGroup.vue +++ b/components/lib/avatargroup/BaseAvatarGroup.vue @@ -17,7 +17,7 @@ const classes = { root: 'p-avatar-group p-component' }; -const { load: loadStyle } = useStyle(styles, { id: 'primevue_avatargroup_style', manual: true }); +const { load: loadStyle } = useStyle(styles, { name: 'avatargroup', manual: true }); export default { name: 'BaseAvatarGroup', diff --git a/components/lib/badge/BaseBadge.vue b/components/lib/badge/BaseBadge.vue index 07cc4ce6b..e91903624 100644 --- a/components/lib/badge/BaseBadge.vue +++ b/components/lib/badge/BaseBadge.vue @@ -54,7 +54,7 @@ const classes = { ] }; -const { load: loadStyle } = useStyle(styles, { id: 'primevue_badge_style', manual: true }); +const { load: loadStyle } = useStyle(styles, { name: 'badge', manual: true }); export default { name: 'BaseBadge', diff --git a/components/lib/badgedirective/BadgeDirective.js b/components/lib/badgedirective/BadgeDirective.js index 624eb652f..4c1944f3c 100644 --- a/components/lib/badgedirective/BadgeDirective.js +++ b/components/lib/badgedirective/BadgeDirective.js @@ -1,19 +1,19 @@ -import { BaseDirective } from 'primevue/basedirective'; import { DomHandler, UniqueComponentId } from 'primevue/utils'; +import BaseBadgeDirective from './BaseBadgeDirective'; -const BadgeDirective = BaseDirective.extend('badge', { +const BadgeDirective = BaseBadgeDirective.extend('badge', { mounted(el, binding) { const id = UniqueComponentId() + '_badge'; - el.$_pbadgeId = id; el.$_pbadgeUnstyled = binding.instance.$primevue.config.unstyled || false; - let badge = document.createElement('span'); + const badge = DomHandler.createElement('span', { + id, + class: this.cx('root'), + 'p-bind': this.ptm('root') + }); - badge.id = id; - !el.$_pbadgeUnstyled && (badge.className = 'p-badge p-component'); - badge.setAttribute('data-pc-name', 'badge'); - badge.setAttribute('data-pc-section', 'root'); + el.$_pbadgeId = badge.getAttribute('id'); for (let modifier in binding.modifiers) { !el.$_pbadgeUnstyled && DomHandler.addClass(badge, 'p-badge-' + modifier); @@ -34,9 +34,8 @@ const BadgeDirective = BaseDirective.extend('badge', { !el.$_pbadgeUnstyled && DomHandler.addClass(el, 'p-overlay-badge'); el.setAttribute('data-p-overlay-badge', 'true'); el.appendChild(badge); - el.$pEl = badge; - BaseDirective.handleCSS('badge', el, binding); + this.$el = badge; }, updated(el, binding) { !el.$_pbadgeUnstyled && DomHandler.addClass(el, 'p-overlay-badge'); diff --git a/components/lib/badge/Badge.css b/components/lib/badgedirective/BaseBadgeDirective.js similarity index 55% rename from components/lib/badge/Badge.css rename to components/lib/badgedirective/BaseBadgeDirective.js index fe55f385a..384b9e8cc 100644 --- a/components/lib/badge/Badge.css +++ b/components/lib/badgedirective/BaseBadgeDirective.js @@ -1,3 +1,7 @@ +import BaseDirective from 'primevue/basedirective'; +import { useStyle } from 'primevue/usestyle'; + +const styles = ` .p-badge { display: inline-block; border-radius: 10px; @@ -29,4 +33,20 @@ .p-badge-no-gutter { padding: 0; border-radius: 50%; -} \ No newline at end of file +} +`; + +const classes = { + root: 'p-badge p-component' +}; + +const { load: loadStyle } = useStyle(styles, { name: 'badge', manual: true }); + +const BaseBadgeDirective = BaseDirective.extend({ + css: { + classes, + loadStyle + } +}); + +export default BaseBadgeDirective; diff --git a/components/lib/base/Base.js b/components/lib/base/Base.js new file mode 100644 index 000000000..bf31ade85 --- /dev/null +++ b/components/lib/base/Base.js @@ -0,0 +1,48 @@ +import { useStyle } from 'primevue/usestyle'; + +const styles = ` +.p-hidden-accessible { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +.p-hidden-accessible input, +.p-hidden-accessible select { + transform: scale(0); +} + +.p-overflow-hidden { + overflow: hidden; +} + +.p-unselectable-text { + user-select: none; +} + +.p-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal !important; +} +`; + +export const { load: loadBaseStyle } = useStyle(styles, { name: 'base', manual: true }); + +const Base = { + styles +}; + +export default Base; diff --git a/components/lib/base/package.json b/components/lib/base/package.json new file mode 100644 index 000000000..03fd79edd --- /dev/null +++ b/components/lib/base/package.json @@ -0,0 +1,5 @@ +{ + "main": "./base.cjs.js", + "module": "./base.esm.js", + "unpkg": "./base.min.js" +} diff --git a/components/lib/basecomponent/BaseComponent.vue b/components/lib/basecomponent/BaseComponent.vue index a754fe6b6..2a96b44cb 100644 --- a/components/lib/basecomponent/BaseComponent.vue +++ b/components/lib/basecomponent/BaseComponent.vue @@ -1,19 +1,358 @@